/* ==========================================================
   공공조달 관리실무 강의 — 공통 스타일
   ========================================================== */
:root{
  --pri:#1d4ed8; --pri-d:#1e3a8a; --pri-l:#eff6ff; --pri-b:#bfdbfe;
  --amber:#b45309; --amber-l:#fffbeb; --amber-b:#fcd34d;
  --green:#047857; --green-l:#ecfdf5; --green-b:#6ee7b7;
  --red:#b91c1c; --red-l:#fef2f2; --red-b:#fca5a5;
  --violet:#6d28d9; --violet-l:#f5f3ff; --violet-b:#c4b5fd;
  --ink:#111827; --gray:#4b5563; --gray-l:#9ca3af;
  --line:#e5e7eb; --bg:#f8fafc; --white:#fff;
  --hdr:62px; --fs:16px; --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Noto Sans KR',sans-serif; background:var(--bg);
  color:var(--ink); line-height:1.85; word-break:keep-all; font-size:var(--fs);
}
a{color:var(--pri); text-decoration:none}

/* ===== 헤더 ===== */
.topbar{
  position:sticky; top:0; z-index:200; height:var(--hdr);
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:14px; padding:0 18px;
}
.brand{display:flex; align-items:center; gap:9px; flex-shrink:0; color:var(--ink)}
.brand .bk{font-size:1.4rem}
.brand b{font-size:.98rem; font-weight:900; letter-spacing:-.02em; white-space:nowrap}
.brand span{font-size:.72rem; color:var(--gray-l); white-space:nowrap}
.topbar .spacer{flex:1}
.tools{display:flex; align-items:center; gap:8px; flex-shrink:0}
.tbtn{
  background:var(--white); border:1px solid var(--line); color:var(--gray);
  border-radius:8px; padding:7px 13px; font-weight:700; cursor:pointer;
  font-size:.82rem; font-family:inherit; white-space:nowrap;
}
.tbtn:hover{border-color:var(--pri); color:var(--pri-d)}
.tbtn.on{background:var(--pri); border-color:var(--pri); color:#fff}
.progwrap{display:flex; align-items:center; gap:9px; flex-shrink:0}
.progbar{width:120px; height:7px; background:var(--line); border-radius:99px; overflow:hidden}
.progbar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--pri),#60a5fa); transition:width .3s}
.progtxt{font-size:.78rem; color:var(--gray); font-weight:700; min-width:78px; text-align:right}
.menubtn{display:none}

/* ===== 레이아웃 ===== */
.shell{display:grid; grid-template-columns:300px minmax(0,1fr); max-width:1460px; margin:0 auto}
.side{
  position:sticky; top:var(--hdr); height:calc(100vh - var(--hdr)); overflow-y:auto;
  border-right:1px solid var(--line); background:var(--white); padding:20px 0 60px;
}
.side h4{margin:0 0 8px; padding:0 22px; font-size:.7rem; font-weight:900; color:var(--gray-l); letter-spacing:.12em}
.side .part{
  margin:16px 0 4px; padding:6px 22px; font-size:.75rem; font-weight:900;
  color:var(--violet); background:var(--violet-l); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.toc a{
  display:flex; gap:9px; align-items:flex-start; padding:7px 22px; font-size:.86rem;
  color:var(--gray); border-left:3px solid transparent; line-height:1.5;
}
.toc a:hover{background:var(--pri-l); color:var(--pri-d)}
.toc a.lv1{font-weight:800; color:var(--ink); font-size:.9rem}
.toc a.active{border-left-color:var(--pri); background:var(--pri-l); color:var(--pri-d); font-weight:700}
.toc .dot{width:6px; height:6px; border-radius:99px; background:var(--line); margin-top:9px; flex-shrink:0}
.toc a.done .dot{background:var(--green)}
.main{padding:0 46px 120px; min-width:0}

/* ===== 히어로 ===== */
.hero{padding:48px 0 30px; border-bottom:1px solid var(--line); margin-bottom:34px}
.eyebrow{display:inline-block; background:var(--pri); color:#fff; font-size:.74rem; font-weight:800; padding:5px 13px; border-radius:99px; letter-spacing:.04em}
.hero h1{font-size:2.4rem; font-weight:900; margin:15px 0 10px; letter-spacing:-.03em; line-height:1.25}
.hero .lead{font-size:1.04rem; color:var(--gray); max-width:840px; margin:0}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.chip{background:var(--white); border:1px solid var(--line); border-radius:99px; padding:6px 14px; font-size:.79rem; color:var(--gray); font-weight:600}
.chip b{color:var(--pri-d)}

/* ===== 섹션 ===== */
section{scroll-margin-top:calc(var(--hdr) + 16px)}
h2.part{
  font-size:1.5rem; font-weight:900; margin:64px 0 6px; letter-spacing:-.02em;
  display:flex; align-items:center; gap:12px; padding-top:8px;
}
h2.part .num{background:var(--violet); color:#fff; font-size:.78rem; font-weight:800; padding:5px 12px; border-radius:8px; flex-shrink:0}
h3.unit{font-size:1.14rem; font-weight:800; margin:40px 0 10px; letter-spacing:-.02em; padding-left:14px; border-left:4px solid var(--pri)}
h4.mini{font-size:1rem; font-weight:800; margin:26px 0 8px; color:var(--pri-d)}
p{margin:0 0 14px}

/* 수행준거 배지 */
.crit{
  display:flex; gap:10px; align-items:flex-start; background:var(--violet-l);
  border:1px solid var(--violet-b); border-radius:12px; padding:13px 16px; margin:0 0 20px;
  font-size:.9rem;
}
.crit b{color:var(--violet); flex-shrink:0; font-weight:900; font-size:.76rem;
  background:#fff; border:1px solid var(--violet-b); border-radius:6px; padding:2px 8px; margin-top:2px}

/* ===== 박스 ===== */
.box{border-radius:var(--radius); padding:19px 22px; margin:22px 0; border:1px solid}
.box .t{font-weight:900; font-size:.95rem; margin:0 0 10px; display:flex; align-items:center; gap:8px}
.box p:last-child, .box ul:last-child{margin-bottom:0}
.b-goal{background:var(--pri-l); border-color:var(--pri-b)} .b-goal .t{color:var(--pri-d)}
.b-key{background:var(--amber-l); border-color:var(--amber-b)} .b-key .t{color:var(--amber)}
.b-warn{background:var(--red-l); border-color:var(--red-b)} .b-warn .t{color:var(--red)}
.b-sum{background:var(--green-l); border-color:var(--green-b)} .b-sum .t{color:var(--green)}
.box ul{margin:0; padding-left:20px} .box li{margin-bottom:7px} .box li:last-child{margin-bottom:0}

/* 발표자 노트 */
.note{
  background:#fffdf5; border:1px dashed var(--amber-b); border-radius:12px;
  margin:18px 0; overflow:hidden;
}
.note summary{
  cursor:pointer; padding:11px 18px; font-weight:800; font-size:.86rem; color:var(--amber);
  list-style:none; user-select:none;
}
.note summary::-webkit-details-marker{display:none}
.note summary::before{content:"🎤 "; }
.note .body{padding:0 18px 16px; font-size:.9rem; color:var(--gray)}
.note .body p{margin:0 0 9px}
.note .body p:last-child{margin:0}
body.hidenotes .note{display:none}

/* 암기 카드 */
.numgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:12px; margin:20px 0}
.numcard{background:var(--white); border:1px solid var(--line); border-top:4px solid var(--amber-b); border-radius:12px; padding:15px 17px}
.numcard b{display:block; font-size:1.45rem; font-weight:900; color:var(--amber); line-height:1.2}
.numcard b.sm{font-size:1.08rem; letter-spacing:-.01em}
.numcard span{display:block; font-size:.82rem; color:var(--gray); margin-top:6px; line-height:1.5}

/* 표 */
.tablewrap{overflow-x:auto; margin:20px 0; border:1px solid var(--line); border-radius:12px; background:var(--white)}
table{border-collapse:collapse; width:100%; font-size:.9rem; min-width:520px}
th,td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle}
td.l,th.l{text-align:left}
thead th{background:#f1f5f9; font-weight:800; color:var(--pri-d); font-size:.85rem}
tbody tr:last-child td{border-bottom:none}
th.rowh{background:#f8fafc; font-weight:800; width:150px; color:var(--ink)}

/* 흐름 */
.flow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:20px 0}
.flow .n{background:var(--white); border:1px solid var(--pri-b); color:var(--pri-d); font-weight:700; padding:9px 15px; border-radius:10px; font-size:.86rem; text-align:center}
.flow .n small{color:var(--gray); font-weight:500}
.flow .ar{color:var(--gray-l); font-weight:900}

/* 도해 */
.figbox{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:22px 0}
.figbox svg{width:100%; height:auto; display:block}
.figbox .cap{font-size:.8rem; color:var(--gray-l); font-weight:600; margin-top:12px; text-align:center}

/* 화면 실습 */
.shot{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); margin:16px 0; overflow:hidden}
.shot-h{display:flex; gap:13px; align-items:flex-start; padding:16px 19px; background:#fbfdff}
.shot-h .no{flex-shrink:0; width:32px; height:32px; border-radius:9px; background:var(--pri); color:#fff;
  font-weight:900; font-size:.86rem; display:flex; align-items:center; justify-content:center}
.shot-h .tt{flex:1; min-width:0}
.shot-h .tt b{display:block; font-size:1rem; font-weight:800; letter-spacing:-.01em}
.shot-h .tt p{margin:6px 0 0; font-size:.92rem; color:var(--gray)}
.shot figure{margin:0; padding:0 19px 17px; background:#fbfdff}
.shot figure img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:10px; cursor:zoom-in; background:#fff}
.shot figcaption{font-size:.77rem; color:var(--gray-l); margin-top:8px; font-weight:600}
body.lecture .shot-h .tt b{font-size:1.3rem}
body.lecture .shot-h .tt p{font-size:1.02rem}
body.lecture .shot-h .no{width:42px; height:42px; font-size:1.05rem}

/* 라이트박스 */
.lb{display:none; position:fixed; inset:0; z-index:500; background:rgba(15,23,42,.94);
  align-items:center; justify-content:center; padding:26px; cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb .cap{position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#e2e8f0; font-size:.85rem; font-weight:600}
.lb .x{position:absolute; top:16px; right:22px; color:#fff; font-size:2rem; cursor:pointer; line-height:1}

/* 확인문제 */
.quiz{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin:26px 0}
.quiz > .qh{font-weight:900; font-size:1.04rem; margin:0 0 4px; color:var(--pri-d)}
.quiz > .qs{font-size:.84rem; color:var(--gray-l); margin:0 0 18px}
.q{border-top:1px dashed var(--line); padding:20px 0 4px}
.q:first-of-type{border-top:none; padding-top:4px}
.q .qt{font-weight:700; margin:0 0 12px; line-height:1.65}
.q .qt em{font-style:normal; color:var(--pri); font-weight:800; margin-right:6px}
.opts{display:flex; flex-direction:column; gap:7px}
.opt{text-align:left; background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 15px;
  font-size:.92rem; cursor:pointer; font-family:inherit; color:var(--ink); line-height:1.55; transition:all .12s}
.opt:hover:not(:disabled){border-color:var(--pri); background:var(--pri-l)}
.opt:disabled{cursor:default}
.opt.ok{border-color:var(--green); background:var(--green-l); font-weight:700}
.opt.no{border-color:var(--red); background:var(--red-l)}
.exp{display:none; margin-top:12px; background:#f8fafc; border-left:4px solid var(--pri);
  border-radius:0 10px 10px 0; padding:13px 16px; font-size:.89rem; color:var(--gray)}
.exp.show{display:block}
.exp b{color:var(--pri-d)}

/* 완료바 */
.donebar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--white); border:1px dashed var(--line); border-radius:12px; padding:13px 19px; margin:28px 0 0}
.donebar span{font-size:.86rem; color:var(--gray); font-weight:600}
.donebar button{background:var(--pri); color:#fff; border:none; border-radius:9px; padding:9px 20px;
  font-weight:700; cursor:pointer; font-family:inherit; font-size:.86rem}
.donebar button.is-done{background:var(--green)}

footer{border-top:1px solid var(--line); margin-top:80px; padding:34px 0; color:var(--gray-l); font-size:.82rem}
footer p{margin:0 0 6px}

/* ============ 강의 모드 ============ */
body.lecture{--fs:22px; background:#fff}
body.lecture .side{display:none}
body.lecture .shell{grid-template-columns:minmax(0,1fr); max-width:1240px}
body.lecture .main{padding:0 40px 140px}
body.lecture .hero h1{font-size:3.2rem}
body.lecture h2.part{font-size:2.1rem; margin-top:80px}
body.lecture h3.unit{font-size:1.55rem; margin-top:56px; border-left-width:6px}
body.lecture h4.mini{font-size:1.28rem}
body.lecture table{font-size:1.02rem; min-width:640px}
body.lecture .flow .n{font-size:1.02rem; padding:13px 20px}
body.lecture .numcard b{font-size:2rem}
body.lecture .numcard b.sm{font-size:1.4rem}
body.lecture .numcard span{font-size:1rem}
body.lecture .chip{font-size:.95rem}
body.lecture .crit{font-size:1.02rem}
body.lecture .quiz .opt{font-size:1.06rem; padding:14px 18px}
body.lecture .box{padding:24px 28px}
body.lecture .box .t{font-size:1.16rem}
body.lecture .progwrap{display:none}

/* 인쇄(유인물) */
@media print{
  .topbar,.side,.donebar,.note,.quiz .opts{display:none}
  .shell{display:block} .main{padding:0}
  body{font-size:11pt; background:#fff}
  .exp{display:block !important}
  section{page-break-inside:avoid}
}

@media (max-width:1080px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed; top:var(--hdr); left:0; width:290px; z-index:150;
    transform:translateX(-100%); transition:transform .25s; box-shadow:6px 0 24px rgba(0,0,0,.09)}
  .side.open{transform:translateX(0)}
  .menubtn{display:block}
  .main{padding:0 20px 100px}
  .hero h1{font-size:1.8rem}
  .brand span{display:none}
  .progwrap{display:none}
}

/* ===== 강의 간 이동 ===== */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:70px 0 0}
.pager .pg{display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; transition:all .15s}
.pager .pg:hover{border-color:var(--pri); box-shadow:0 6px 18px rgba(29,78,216,.08); transform:translateY(-2px)}
.pager .pg .d{display:block; font-size:.76rem; color:var(--gray-l); font-weight:700; margin-bottom:5px}
.pager .pg b{font-size:.98rem; color:var(--ink); font-weight:800; letter-spacing:-.01em}
.pager .pg.next{text-align:right}
.pager .pg.empty{background:transparent; border:none}
body.lecture .pager{display:none}
@media print{.pager{display:none}}

/* ===== 강의 목록(홈) ===== */
body.homepage{background:var(--bg)}
.home{max-width:1180px; margin:0 auto; padding:0 28px 100px}
.home-hero{padding:64px 0 40px; border-bottom:1px solid var(--line); margin-bottom:44px}
.home-hero h1{font-size:3rem; font-weight:900; margin:16px 0 14px; letter-spacing:-.035em; line-height:1.15}
.home-hero .lead{font-size:1.05rem; color:var(--gray); max-width:860px; margin:0}
.home-hero kbd{background:var(--white); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; padding:1px 7px; font-family:inherit; font-size:.85em; font-weight:700; color:var(--ink)}
.home-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}

.lgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px}
.lcard{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:18px; padding:26px 26px 22px; transition:all .18s; color:var(--ink)}
.lcard:hover{border-color:var(--pri); transform:translateY(-4px); box-shadow:0 14px 32px rgba(29,78,216,.10)}
.lcard .lno{display:inline-block; align-self:flex-start; background:var(--pri); color:#fff;
  font-size:.72rem; font-weight:800; padding:4px 11px; border-radius:99px; letter-spacing:.03em}
.lcard h3{font-size:1.3rem; font-weight:900; margin:14px 0 6px; letter-spacing:-.025em; line-height:1.3}
.lcard .lsub{margin:0 0 12px; font-size:.88rem; color:var(--pri-d); font-weight:700}
.lcard .llead{margin:0 0 18px; font-size:.9rem; color:var(--gray); line-height:1.7; flex:1}
.lcard .lmeta{display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--line); padding-top:14px}
.lcard .lmeta span{font-size:.75rem; color:var(--gray-l); background:var(--bg);
  border-radius:6px; padding:3px 9px; font-weight:600}
.lcard .lmeta b{color:var(--pri-d)}
.lcard.soon{opacity:.5; cursor:default}
.lcard.soon:hover{transform:none; box-shadow:none; border-color:var(--line)}
@media (max-width:640px){
  .home{padding:0 18px 80px}
  .home-hero h1{font-size:2rem}
  .lgrid{grid-template-columns:1fr}
}