/* 실전 트랙 — 영상 · 3D 멘토링 수업 페이지 (/tracks/*)
 *
 * 2026-09-16: 강의 페이지(lesson-01…)와 같은 골격으로 맞췄습니다.
 * 골격·타이포·색은 전부 /lesson.css 가 합니다 — 사이드바, 상단 바, #content, 콜아웃, 탭, 푸터.
 * 이 파일은 트랙에만 있는 부품만 얹습니다:
 *   왼쪽 목차가 버튼이 아니라 페이지 링크 · 사다리 칸 표시 · 프롬프트/터미널 칸 ·
 *   강의안↔실습지 탭 · 트랙 목록의 사다리 격자.
 * HTML 은 ~/Desktop/멘토링-AI수업/build.py 가 .md 에서 뽑습니다 — 여기서는 모양만 다룹니다.
 *
 * 값은 직접 쓰지 않고 lesson.css 가 tokens.css 에서 이어준 이름(--accent · --surface …)을 씁니다.
 * 규칙 하나: 네온(--neon)은 '면'에만. 밝은 배경 위 초록 글자는 --accent-strong 입니다.
 */

/* ── 왼쪽 목차 — 강의는 버튼(모듈 전환), 트랙은 링크(페이지 이동) ────── */
#sidebar .brand{text-decoration:none;color:inherit}
a.nav-item{text-decoration:none}
.nav-item .num.dot{background:transparent;color:var(--text-soft);font-size:13px}
.nav-item.active .num.dot{background:var(--accent);color:#fff}
.nav-item .lbl small{display:block;margin-top:2px;font-size:11px;font-weight:400;line-height:1.35;color:var(--text-soft)}
.nav-item.active .lbl small{color:var(--accent-strong)}

/* 진도 카드 자리 — 트랙에서는 '지금 사다리 몇 칸인지'를 같은 모양으로 보여줍니다. */
.progress-card .row b{letter-spacing:-.01em}
.progress-card .pc-note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-muted)}
.progress-card.flat .bar{display:none}

/* ── 본문 ─────────────────────────────────────────────── */
#content.wide{max-width:1080px}
/* 숫자가 아니라 말이 들어가는 머리표(꿀팁 · 심화 · 트랙) */
.mod-num.txt{font-size:13px;padding:0 15px;letter-spacing:0}
.mod-part{color:var(--text-muted)}
.mod-hero .lead a{color:var(--accent-strong)}

/* 마크다운에서 온 본문. #content 가 이미 문단·목록·표·코드를 잡고 있어서
   여기서는 제목 위계만 정리합니다(페이지 제목이 h2, 본문 섹션이 h3 자리). */
#content .doc h2{display:flex;align-items:center;gap:11px;margin:var(--s7) 0 var(--s3);
  font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.35;scroll-margin-top:80px}
#content .doc h2::before{content:"";width:6px;height:20px;border-radius:3px;background:var(--accent);flex:0 0 auto}
#content .doc h3{display:block;margin:var(--s5) 0 var(--s2);font-size:16.5px}
#content .doc h3::before{display:none}
#content .doc .tabpanel > h2:first-child{margin-top:var(--s4)}
.doc .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
#content .doc img{display:block;max-width:min(100%,480px);height:auto;margin:10px 0 20px;
  border-radius:var(--r-md);border:1px solid var(--border)}
#content .doc blockquote{margin:0 0 var(--s4);padding:14px 18px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-md);font-size:14.5px;line-height:1.7}
#content .doc blockquote > :last-child{margin-bottom:0}
.doc .callout{margin:var(--s5) 0}

/* ── 프롬프트 칸 · 터미널 칸 ────────────────────────────
   붙여넣는 문장(밝은 칸)과 터미널에 치는 줄(검은 칸)을 나눕니다.
   이름표 줄이 있고, 복사 버튼은 사이트 공통 copy.js 가 그 줄 오른쪽에 답니다. */
.box{margin:var(--s4) 0 var(--s5);border-radius:var(--r-md);overflow:hidden}
.box-h{display:flex;align-items:center;height:34px;padding:0 14px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em}
.pbox{background:var(--surface);border:1px solid var(--border-strong)}
.pbox .box-h{color:var(--text-muted);border-bottom:1px solid var(--border)}
.tbox{background:var(--console)}
.tbox .box-h{color:#8A8A82;border-bottom:1px solid rgba(255,255,255,.09)}

.quote{position:relative;display:block;margin:0;padding:14px 16px 16px;background:transparent;
  color:var(--text);font-size:15px;line-height:1.75;white-space:pre-wrap}
.cmd{display:block;margin:0;padding:14px 16px;background:var(--console);color:var(--code-text);
  font-family:var(--mono);font-size:13px;line-height:1.65;overflow-x:auto;white-space:pre;
  -webkit-overflow-scrolling:touch}
.cmd::before{content:'$ ';color:var(--brand-on-dark)}
.cmd.plain::before{content:''}
.diagram{margin:var(--s4) 0 var(--s5);padding:14px 16px;overflow-x:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink);white-space:pre}

/* 복사 버튼 — 밝은 칸 위가 기본, 검은 칸에서만 뒤집습니다. 둘 다 이름표 줄로 올립니다. */
.quote-copy{position:absolute;top:-29px;right:9px;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);cursor:pointer;transition:.13s}
.box:hover .quote-copy,.quote-copy:hover,.quote-copy:focus-visible{color:var(--ink);border-color:var(--border-strong)}
.quote-copy:hover{border-color:var(--accent);color:var(--accent-strong)}
.quote-copy.done{background:var(--neon);border-color:var(--neon);color:var(--ink)}
.copy-wrap{position:relative}
.tbox .copy-wrap > .quote-copy{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:#EBEBE7}
.tbox .copy-wrap > .quote-copy:hover{background:rgba(255,255,255,.19);color:#fff;border-color:rgba(255,255,255,.4)}
.tbox .copy-wrap > .quote-copy.done{background:var(--neon);color:var(--ink)}
.cmd.has-copy{padding-right:16px}

/* ── 강의안 ↔ 실습지 ─────────────────────────────────── */
.tabs{align-items:center;gap:8px;margin:var(--s5) 0 var(--s4)}
.tabs .seg{display:flex;gap:6px}
.tabs .print{margin-left:auto}
.tabs-note{font-family:var(--mono);font-size:11px;color:var(--text-soft)}
.tabs-note:empty{display:none}

/* ── 이번 주 꿀팁 · 태그로 보기 ─────────────────────────── */
.lbl{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--text-soft);text-transform:uppercase}
.wtips{margin:var(--s5) 0 0}
.wtips-l{display:flex;flex-wrap:wrap;gap:6px}
.wtips-l a{display:inline-flex;align-items:baseline;gap:8px;padding:8px 13px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:var(--surface);font-size:13px;font-weight:600;
  color:var(--ink);text-decoration:none;transition:.15s}
.wtips-l em{font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:700;color:var(--accent-strong)}
.wtips-l a:hover{border-color:var(--accent);background:var(--accent-soft)}
.tagidx{margin:var(--s5) 0 0}
.tagrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--border);scroll-margin-top:80px}
.tagidx .lbl + .tagrow{border-top:1px solid var(--border-strong)}
.tagrow b{font-size:14px;color:var(--ink)}
.tagrow-l{display:flex;flex-wrap:wrap;gap:4px 16px}
.tagrow-l a{font-size:13.5px;color:var(--text);text-decoration:underline;
  text-decoration-color:var(--border-strong);text-underline-offset:4px}
.tagrow-l a:hover{color:var(--accent-strong);text-decoration-color:var(--accent)}
.tagrow-w{font-family:var(--mono);font-size:11px;color:var(--text-muted);white-space:nowrap}
.tagrow:target{background:var(--accent-soft)}

/* ── 이전 · 다음 (강의 페이지 pager 와 같은 모양, 다만 링크) ── */
.pager a{flex:1;min-width:0;display:block;padding:var(--s4);border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--surface);text-decoration:none;color:var(--text);
  box-shadow:var(--sh-sm);transition:.15s}
.pager a:hover{border-color:var(--accent);box-shadow:var(--sh-md);transform:translateY(-1px)}
.pager a.next{text-align:right}
.pager a .pg-lbl{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--text-muted);
  display:block;margin-bottom:4px}
.pager a .pg-ttl{font-size:14px;font-weight:700;color:var(--text);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 트랙 목록 ───────────────────────────────────────── */
.sec{margin-top:var(--s8)}
.sec > h3{margin-bottom:var(--s3)}
.sec-p{margin:0 0 var(--s5);color:var(--text-muted);font-size:14.5px;line-height:1.7;max-width:64ch}
.sec-p b{color:var(--text)}

/* 내가 정하는 몫 — 터미널 커서와 같은 블록. 칸 번호만큼 네온으로 채웁니다. */
.meter{display:inline-flex;gap:3px}
.meter i{width:6px;height:11px;border-radius:1.5px;background:var(--surface-3)}
.meter i.on{background:var(--neon);box-shadow:inset 0 0 0 1px rgba(25,25,24,.14)}
.meter.lg i{width:8px;height:16px;border-radius:2px}

/* 선으로 나눈 줄 목록 (하고 싶은 것 · 수업 전에) */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-strong)}
.rows li{border-bottom:1px solid var(--border)}
.rows a{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:14px;align-items:center;
  min-height:56px;padding:10px 4px;text-decoration:none;color:var(--ink)}
.rows .g{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.45}
.rows .to{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.rows .ar{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--border-strong);transition:.15s}
.rows a:hover .to{color:var(--accent-strong)}
.rows a:hover .ar{color:var(--ink);transform:translateX(3px)}
.rows.before{margin-top:var(--s4)}

/* 사다리 격자 — 두 트랙이 같은 여섯 칸을 쓴다는 걸 한 판으로 */
.lad-row{display:grid;grid-template-columns:96px repeat(6,minmax(0,1fr));gap:8px}
.lad-row + .lad-row{margin-top:8px}
.lad-head{align-items:end;padding-bottom:8px}
.lad-corner{font-family:var(--mono);font-size:10.5px;font-weight:700;line-height:1.5;
  letter-spacing:.04em;color:var(--text-soft);padding-bottom:2px}
.lad-h{display:grid;gap:5px;padding:0 4px}
.lad-h b{font-size:15px;letter-spacing:-.02em;color:var(--ink)}
.lad-h b .n{font-family:var(--mono);font-size:12px;color:var(--accent-strong);margin-right:5px}
.lad-h > span:last-child{font-size:12px;color:var(--text-muted);line-height:1.4}
.lad-track{display:flex;flex-direction:column;justify-content:center;gap:5px;padding-right:4px}
.lad-track b{font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.lad-track span{font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--text-muted)}
.tile{display:flex;flex-direction:column;gap:6px;min-height:112px;padding:14px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);
  text-decoration:none;color:var(--ink);transition:.15s}
.tile:hover{border-color:var(--accent);box-shadow:var(--sh-md);transform:translateY(-2px)}
.tile .wk{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--text-muted);letter-spacing:.04em}
.tile b{font-size:14.5px;font-weight:650;line-height:1.4;letter-spacing:-.015em}
.tile .rm{display:none}
.tile.t0{background:transparent;border:1px dashed var(--border-strong)}
.tile.t0:hover{border-style:solid}
.tile .go{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:10px;font-weight:700;
  padding:4px 8px;border-radius:var(--r-pill);background:var(--neon);color:var(--ink);white-space:nowrap}
.lad-foot{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;margin-top:12px}
.lad-foot div{display:flex;justify-content:space-between;gap:12px;padding:0 4px;
  font-family:var(--mono);font-size:11px;color:var(--text-muted)}

.goals{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s7)}

.tcards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.tcard{display:flex;flex-direction:column;padding:var(--s5);border:1px solid var(--border);
  border-radius:var(--r-lg);background:var(--surface);scroll-margin-top:80px}
.tcard-e{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-strong)}
.tcard h4{margin:8px 0 10px;font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1.1}
.tcard-d{margin:0;font-size:14.5px;line-height:1.65;color:var(--text)}
.tcard-m{margin:8px 0 var(--s5);font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--text-muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--border);font-size:12.5px;font-weight:600;
  color:var(--ink);text-decoration:none;transition:.15s}
.chips a i{font-family:var(--mono);font-size:10.5px;font-style:normal;color:var(--text-muted)}
.chips a:hover{border-color:var(--accent);background:var(--accent-soft)}
.tcard-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:auto;padding-top:var(--s5)}
.tcard-a a:not(.w-btn){font-size:13px;font-weight:700;color:var(--ink);text-decoration:none}
.tcard-a a:not(.w-btn):hover{color:var(--accent-strong)}
.tcard-a .w-btn{text-decoration:none;display:inline-block}

.rh-wrap{display:grid;gap:var(--s6);max-width:900px}
.rh{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px 16px;align-items:start}
.rh-n{grid-row:span 2;margin:-3px 0 0;font-size:15px;font-weight:700;color:var(--ink)}
.rh-bar{display:flex;gap:3px;height:12px}
.rh-bar i{border-radius:3px;background:var(--surface-3)}
.rh-bar i.on{background:var(--neon)}
.rh-lab{display:flex;gap:3px}
.rh-lab div{min-width:0;padding-right:8px}
.rh-lab b{display:block;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-lab span{font-family:var(--mono);font-size:10.5px;color:var(--text-muted)}

/* ── 체크리스트 (마크다운 - [ ]) — 누른 건 이 브라우저에만 남습니다(tracks.js) ── */
.doc .contains-task-list{list-style:none;padding-left:0}
.doc .task-list-item{position:relative;padding-left:30px}
.doc .task-list-item-checkbox{position:absolute;left:0;top:.32em;width:18px;height:18px;margin:0;
  accent-color:var(--accent);cursor:pointer}

/* ── 좁은 화면 ────────────────────────────────────────── */
@media(max-width:1080px){
  .lad-row{grid-template-columns:80px repeat(6,minmax(0,1fr));gap:6px}
  .lad-foot{grid-template-columns:80px minmax(0,1fr)}
  .lad-track span{display:none}
  .tile{padding:12px 11px 14px;min-height:104px}
  .tile b{font-size:13.5px}
}
@media(max-width:820px){
  /* 사다리 → 트랙마다 세로 목록. 칸 이름이 각 줄 왼쪽으로 들어갑니다. */
  .lad-head,.lad-foot{display:none}
  .lad-row{grid-template-columns:minmax(0,1fr);gap:0;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
  .lad-row + .lad-row{margin-top:14px}
  .lad-track{flex-direction:row;align-items:baseline;justify-content:space-between;padding:16px 16px 12px}
  .lad-track span{display:block}
  .tile{flex-direction:row;align-items:center;gap:12px;min-height:0;padding:14px 16px;
    border:0;border-top:1px solid var(--border);border-radius:0;background:transparent}
  .tile:hover{transform:none;box-shadow:none;background:var(--accent-soft)}
  .tile.t0{border:0;border-top:1px solid var(--border)}
  .tile .wk{display:none}
  .tile .rm{display:block;flex:none;width:76px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent-strong)}
  .tile.t0 .rm{color:var(--text-muted)}
  .tile .go{margin:0 0 0 auto}
  .goals,.tcards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .rows a{grid-template-columns:minmax(0,1fr) 16px;gap:4px 10px}
  .rows .to{grid-column:1;grid-row:2}
  .rows .ar{grid-row:1/span 2;grid-column:2}
  .rh{grid-template-columns:minmax(0,1fr)}
  .rh-n{grid-row:auto;margin:0}
  .rh-lab{flex-wrap:wrap;gap:6px 14px}
  .rh-lab div{flex:none!important;padding:0}
  .tagrow{grid-template-columns:minmax(0,1fr)}
  .pager{flex-direction:column}
  .pager a.next{text-align:left}
}
@media(prefers-reduced-motion:reduce){.tile,.rows .ar,.pager a,.chips a{transition:none}}

/* ── 인쇄 — 지금 열린 탭 하나만, A4 한 단 ─────────────── */
@media print{
  body{display:block;background:#fff}
  #sidebar,#topbar,#overlay,#sitefooter,.skip,.tabs,.pager,.wtips,.tagidx,#readbar{display:none!important}
  #main{display:block}
  #content{max-width:none;padding:0}
  .doc{font-size:10.5pt;line-height:1.6}
  .doc h2{margin-top:18pt;font-size:13pt;break-after:avoid}
  .box,.doc .tw,.doc blockquote,.diagram{break-inside:avoid}
  .tbox{background:#fff;border:1px solid #999}
  .tbox .cmd{background:#fff;color:#191918}
  .tbox .box-h{color:#555;border-color:#ccc}
  .quote-copy{display:none}
}

/* ── 부품 링크는 본문 링크가 아닙니다 ───────────────────
   lesson.css 의 #content a 는 글 속 링크(초록 밑줄) 기준입니다. 사다리 칸·목록 줄·칩처럼
   '누르는 칸' 전체가 링크인 부품에까지 밑줄이 그어져서 여기서만 풀어줍니다. */
#content .tile,#content .rows a,#content .chips a,#content .wtips-l a,
#content .tcard-a a,#content .pager a,#content .side-more a{color:var(--ink);text-decoration:none}
#content .tile b,#content .rows .g{color:var(--ink)}
#content .tile .go{color:var(--ink)}
#content .wtips-l a em{color:var(--accent-strong)}
#content .tcard-a .w-btn{color:#fff}
#content .tile:hover b,#content .rows a:hover .g{color:var(--accent-strong)}