/* ============================================================================
   Lesson reading page — 사이트 셸(site_base: nav·veil·footer) 공유(설계 §5 통일).
   좌측 스티키 목차 사이드바 + 우측 본문. tokens·components·nav·site.css 위에서 로드.
   액센트는 소속 프로그램 색(--pc). 사이트 블랭킷 'body.site main a{color:inherit}'을
   이기려 레슨 링크 색은 명시도(body.site main …)로 지정.
   ============================================================================ */

/* --- 프로그램 액센트(온보딩=파랑 / 세션=초록) --- */
.lesson-layout { --pc: var(--brand); --pc-wash: var(--brand-wash); --pc-line: var(--brand-line); --pc-ink: var(--brand-ink); }
.lesson-layout.program--session { --pc: var(--brand-2); --pc-wash: var(--brand-2-wash); --pc-line: var(--brand-2-line); --pc-ink: var(--brand-2-ink); }

/* 페이지 스크롤이 상/하 끝단에서 rubber-band(overscroll)로 튈 때 sticky 사이드바가 함께
   흔들리는 현상 제거. body 에 걸면 뷰포트 스크롤러로 전파됨(레슨 페이지 한정). */
body.lesson-view { overscroll-behavior-y: none; }

/* --- 2단 레이아웃: 스티키 목차 + 본문 --- */
/* 풀 너비 + 좌우 여백(--gutter) 제거 → 화면 끝까지.
   세로 여백은 레이아웃이 아니라 본문(.lesson)에 둔다: 공통 규칙 body.site>main>*{padding-block:section-y}
   가 레이아웃에 상하 패딩을 주면, 그 패딩 영역이 스크롤될 때 sticky 사이드바(레이아웃의 자식)가 상/하
   끝단에서 함께 딸려 움직인다. 레이아웃 상하 패딩을 0 으로 눌러(명시도 우위) 그 드래그를 없앤다. */
body.lesson-view .lesson-layout { padding-block: 0; }
/* margin-inline:0 필수 — .wrap 의 margin:0 auto 를 끄지 않으면, main(column flex)에서 본문이 max-width(좁게)를
   가질 때 그리드가 콘텐츠 폭으로 줄며 auto 마진이 중앙정렬 → 사이드바가 딸려 움직인다. 항상 전폭 유지. */
.lesson-layout { --rail-w: 280px; --content-x: calc(var(--rail-w) + var(--sp-7)); max-width: none; margin-inline: 0; padding: 0; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); gap: var(--sp-7); align-items: start;
  transition: grid-template-columns var(--dur-2) var(--ease), gap var(--dur-2) var(--ease); }
/* 사이드바 접기(애니메이션): 사이드바 컬럼 280→0 + gap→0 트랜지션으로 접히며 본문이 밀려 넓어짐.
   display:none 아님(그래야 애니메이션). 사이드바 콘텐츠는 overflow 로 잘림. --content-x=0 → narrow 중앙정렬도 화면 중앙. */
.lesson-layout.rail-collapsed { grid-template-columns: 0px minmax(0, 1fr); gap: 0; --content-x: 0px; }
.lesson-layout.rail-collapsed .lesson { padding-left: var(--sp-7); }   /* 사이드바 없으니 좌측도 패딩(우측과 대칭) */
/* 하단 페이드 높이(px). @property 등록 → mask-image calc() 안에서 값 전환이 애니메이션된다. */
@property --rail-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }

.lesson-side {
  position: fixed; top: var(--nav-h); left: 0;   /* 완전 고정: 페이지 스크롤·푸터와 무관하게 뷰포트에 고정.
     (sticky 는 컨테이너(.lesson-layout) 끝에서 풀려, 푸터로 내려가면 딸려 올라가 상단 챕터가 가려졌음) */
  /* max-height 아니라 height 로 고정: 트리가 짧아도 박스가 뷰포트 높이만큼 잡혀 프로스티드 배경이
     하단까지 채워진다(잘림 없음). 트리가 길면 내부 스크롤(overflow-y auto), 짧으면 아래는 빈 배경. */
  height: calc(100vh - var(--nav-h)); overflow: hidden auto; overscroll-behavior: contain;   /* x: 접힐 때 클립, y: 스크롤 */
  scrollbar-width: thin;
  /* veil(셰이더) 위 트리 시인성 — 살짝 불투명 + 프로스티드(나브 스크롤 배경 계열) */
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  /* 하단 페이드: 평소엔 --rail-fade:0 → 페이드 없음(기존과 동일, 목차 어디든 또렷).
     푸터가 보일 때만 console.js 가 .is-footer-near 를 붙여 --rail-fade 를 130px 로 키운다 → 마지막 목차부터
     길고 완만하게 veil(푸터)로 녹아든다. --rail-fade 전환으로 애니메이션. 이 페이드는 푸터에 닿았을 때만
     나타나므로(평소 독서 중엔 0) 마지막 콘텐츠가 페이드에 참여해도 읽기에 지장 없다. */
  --rail-fade: 0px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--rail-fade)), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--rail-fade)), transparent);
  transition: --rail-fade 360ms var(--ease), transform var(--dur-2) var(--ease);
}
.lesson-side.is-footer-near { --rail-fade: 130px; }
/* fixed 사이드바는 그리드 컬럼 축소로 사라지지 않으므로, 접힘 시 슬라이드 아웃(토글 left·본문 확장과 동기) */
.lesson-layout.rail-collapsed .lesson-side { transform: translateX(-100%); }
.lesson-side .rail__inner { width: var(--rail-w); padding-bottom: 20px; }   /* 고정폭 → 접히며 컬럼이 줄어도 트리가 리플로우되지 않고 깔끔히 잘림. 하단 여백은 마지막 항목 밑선 여유(작게 — 페이드에 자연스럽게 참여) */
.lesson { min-width: 0; max-width: none; grid-column: 2; padding: var(--sp-6) var(--sp-7) var(--sp-8) 0;   /* 사이드바가 fixed(그리드 밖)라 본문을 2번째 컬럼에 고정 → 1번째 280px 컬럼은 빈 채로 폭만 예약 */
  transition: padding var(--dur-2) var(--ease), margin var(--dur-2) var(--ease); }   /* 접힘 시 padding-left(·narrow margin) 점프 방지 — 그리드 컬럼 애니메이션과 동기화(텔레포트 제거) */
/* 우측 패딩=좌측 gap(sp-7) → 좌우 대칭. 세로 여백은 레이아웃 대신 여기서(좌측 0=사이드바 gap 이 확보) */
@media (max-width: 900px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-side { display: none; }               /* 모바일: 목차는 crumb(→프로그램 페이지)·pager 로 대체 */
  .lesson { grid-column: auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }   /* 모바일: 단일 컬럼(grid-column 리셋), 좌우 자체 부여 */
}

/* --- 사이드바: 프로그램 스위치(온보딩/세션) ---
   박스형 pill → 밑줄 탭 + 프로그램 자기 색(온보딩=파랑/세션=초록). 아래 트리 액센트(pc-wash+accent)와
   상단 나브 그룹탭(밑줄 active)과 동일한 언어로 통일. */
.seg { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
  /* 프로그램 탭(온보딩/세션)은 사이드바 내부 스크롤에도 상단에 고정 — 목차가 길어도 항상 보인다.
     사이드바가 반투명(frosted)이라, 아래로 지나가는 트리가 비치지 않게 불투명 배경을 준다.
     lesson 페이지의 rail__inner 는 상단 padding 이 0 이므로, 원래 위치 그대로 두고 sticky·배경만 얹는다
     (음수 margin 트릭 금지 — 없는 padding 을 상쇄하려다 탭이 위로 끌려 올라가 어긋났었다). */
  position: sticky; top: 0; z-index: 5; background: var(--paper); }
.seg__btn {
  flex: 1; height: 36px; border: none; background: transparent; cursor: pointer;
  font: 600 var(--t-sm)/1 var(--font-sans); color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;   /* 컨테이너 헤어라인 위로 밑줄 겹침 */
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.seg__btn:hover { color: var(--ink-2); background: var(--surface-2); }
.seg__btn.is-active { color: var(--ink); }
.seg__btn[data-seg-btn="onboarding"].is-active { color: var(--brand-ink);   border-bottom-color: var(--brand);   background: var(--brand-wash); }
.seg__btn[data-seg-btn="session"].is-active   { color: var(--brand-2-ink); border-bottom-color: var(--brand-2); background: var(--brand-2-wash); }

/* --- 사이드바: 챕터 일괄 접기/펼치기 툴바 --- */
.tree__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }
.tree__allbtn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; background: transparent; border: none; cursor: pointer;
  font: 600 var(--t-xs)/1 var(--font-sans); color: var(--muted); border-radius: var(--r-xs);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.tree__allbtn:hover { color: var(--ink-2); background: var(--surface-2); }
.tree__allbtn svg { flex: none; color: var(--faint); transition: transform var(--dur-1) var(--ease); }
.tree__allbtn.is-expand svg { transform: rotate(180deg); }   /* 펼치기 모드 = 아이콘 아래로 */

/* --- 사이드바: 챕터 트리 --- */
.tree__chapter { margin-bottom: var(--sp-2); }
.tree__chhead { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 7px 8px; cursor: pointer; background: transparent; border: none; text-align: left; border-radius: var(--r-xs); font: 700 var(--t-xs)/1.3 var(--font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.tree__chhead:hover { background: var(--surface-2); color: var(--ink-2); }
/* 제품(외부 문서) 레일의 챕터 헤더 — 토글 아님(정적). 클릭 어포던스 제거. */
.tree__chhead--static { cursor: default; }
.tree__chhead--static:hover { background: transparent; color: var(--muted); }

/* 강의 본문 내 도식(figure/svg) — currentColor 기반이라 다크 콘솔에 자동 적응 */
.lesson-body figure { margin: var(--sp-5) 0; }
.lesson-body figure svg { display: block; max-width: 100%; height: auto; }
.lesson-body figcaption { margin-top: 10px; font-size: var(--t-sm); color: var(--muted); text-align: center; }
.tree__chev { flex: none; color: var(--faint); transition: transform var(--dur-1) var(--ease); }
.tree__chapter.is-collapsed .tree__chev { transform: rotate(0); }
.tree__chapter:not(.is-collapsed) .tree__chev { transform: rotate(90deg); }
.tree__chnum { flex: none; color: var(--faint); }   /* 챕터 접두어(Chap./Subj.+2자리) — chhead 의 모노/대문자 상속 */
.tree__chname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree__chcount { flex: none; color: var(--faint); font-weight: 600; }
.tree__lessons { list-style: none; margin: 2px 0 var(--sp-3); padding: 0 0 0 6px; }
.tree__chapter.is-collapsed .tree__lessons { display: none; }
.tree__lesson { display: block; padding: 6px 10px 6px 16px; margin-left: 6px; position: relative; border-left: 1.5px solid var(--line); font-size: var(--t-sm); line-height: 1.4; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.tree__lesson.is-done::before { content: "✓"; margin-right: 6px; color: var(--brand-2); font-weight: 700; }
.tree__lesson-num { color: var(--faint); font: 600 var(--t-xs)/1 var(--font-mono); margin-right: 7px; }   /* 레슨 순번 접두어(챕터별) */
.tree__soon { margin: 2px 0 var(--sp-3) 16px; font: 500 var(--t-xs)/1 var(--font-mono); color: var(--faint); }
/* 링크 색(블랭킷 color:inherit 이기기). hover=프로그램 액센트색.
   순서: base → is-done → hover → is-active (done 도 hover 시 액센트, active 는 hover 위에서 유지) */
body.site main a.tree__lesson { color: var(--ink-2); }
body.site main a.tree__lesson.is-done { color: var(--muted); }
body.site main a.tree__lesson:hover { color: var(--pc); border-left-color: var(--pc); background: var(--pc-wash); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
body.site main a.tree__lesson.is-active { color: var(--pc-ink); font-weight: 600; border-left-color: var(--pc); background: var(--pc-wash); border-radius: 0 var(--r-xs) var(--r-xs) 0; }

/* --- breadcrumb (그룹 › 프로그램 › 챕터) --- */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--sp-6); font-size: var(--t-sm); color: var(--muted); }
.crumb__sep { color: var(--faint); }
.crumb > span:last-child { color: var(--ink-2); font-weight: 600; }
body.site main .crumb a { color: var(--muted); }
body.site main .crumb a:hover { color: var(--ink); }

/* --- Lesson hero --- */
.lesson-hero { margin-bottom: var(--sp-7); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); }
.lesson-hero .tag {
  display: inline-block; font: 600 var(--t-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--pc); background: var(--pc-wash); border: 1px solid var(--pc-line);
  padding: 5px 9px; border-radius: var(--r-xs); margin-bottom: var(--sp-4);
}
.lesson-hero h1 {
  margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: var(--t-h1); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); font-weight: 700; text-wrap: balance;
}
.lesson-hero .meta { margin: 0; color: var(--muted); font: 500 var(--t-sm)/1.5 var(--font-mono); }
.lesson-hero .meta b { color: var(--ink-2); font-weight: 600; }
.lesson-hero .goal {
  margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); font-size: var(--t-sm);
  border-left: 3px solid var(--pc); background: var(--pc-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.lesson-hero .goal b { color: var(--pc-ink); }

/* --- Markdown body --- */
.lesson-body h2 {
  margin: var(--sp-8) 0 var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700;
}
.lesson-body h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: 1.25rem; font-weight: 700; letter-spacing: var(--tracking-tight); }
.lesson-body h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: 1.0625rem; color: var(--ink-2); font-weight: 700; }
.lesson-body p { margin: var(--sp-4) 0; text-wrap: pretty; }
.lesson-body ul, .lesson-body ol { padding-left: 1.4em; margin: var(--sp-4) 0; }
.lesson-body li { margin: 6px 0; }
.lesson-body li > ul, .lesson-body li > ol { margin: 6px 0; }
.lesson-body strong { font-weight: 700; }
body.site main .lesson-body a { color: var(--pc); border-bottom: 1px solid var(--pc-line); transition: border-color var(--dur-1) var(--ease); }
body.site main .lesson-body a:hover { border-bottom-color: var(--pc); }

/* 인라인 코드 — 라이트 칩 */
.lesson-body :not(pre) > code {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 1.5px 6px; border-radius: var(--r-xs); color: var(--pc-ink);
  word-break: break-all;
}
/* 코드 블록 — 다크(가독) */
.lesson-body pre {
  background: #0f1219; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); overflow-x: auto; margin: var(--sp-5) 0;
}
.lesson-body pre code { background: none; border: none; padding: 0; color: #d6d9df; font-family: var(--font-mono); font-size: .82rem; line-height: 1.65; }
.lesson-body pre:has(code.language-bash) { background: #14171f; border-color: #2b303c; }
.lesson-body pre:has(code.language-claude) { background: #17131f; border-color: rgba(167,139,250,.34); border-left: 3px solid #a78bfa; }

/* 프롬프트 색상 — VS Code 터미널처럼 계정/경로/명령 구분 (명령이 가장 밝게) */
.lesson-body pre .tp-user    { color: #4ec9b0; }   /* 계정@서버 */
.lesson-body pre .tp-path    { color: #6bb6ff; }   /* 현재 경로 */
.lesson-body pre .tp-sign    { color: #7d8695; }   /* $ */
.lesson-body pre .tp-cmd     { color: #f3f5f8; }   /* 내가 입력할 명령 */
.lesson-body pre .tp-comment { color: #6b7a6b; }   /* # 주석 */

/* 우상단 복사 아이콘 */
.lesson-body pre { position: relative; }
.code-copy {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  color: #aeb4bf; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-sm);
  cursor: pointer; opacity: .4;
  transition: opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lesson-body pre:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { background: rgba(255,255,255,.13); color: #fff; }
.code-copy.is-done { color: #4ade80; opacity: 1; border-color: rgba(74,222,128,.4); }
.code-copy svg { display: block; }

/* 표 — 가로 스크롤 안전 */
.lesson-body table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--t-sm); display: block; overflow-x: auto; }
.lesson-body th, .lesson-body td { border: 1px solid var(--line); padding: 9px 13px; text-align: left; vertical-align: top; }
.lesson-body th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.lesson-body tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }

/* 인용 — 브랜드-2 액센트 */
.lesson-body blockquote {
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--brand-2); background: var(--brand-2-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2);
}
.lesson-body blockquote p { margin: 6px 0; }
.lesson-body blockquote strong { color: var(--brand-2-ink); }
.lesson-body hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-8) 0; }
.lesson-body img, .lesson-body svg { max-width: 100%; height: auto; display: block; margin: var(--sp-5) auto; }

/* --- 학습 완료 바 (완료=브랜드-2 초록, 프로그램색 아님) --- */
.complete-bar {
  margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.complete-bar .label { color: var(--muted); font-size: var(--t-sm); }
.btn-complete {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--control-h); padding: 0 var(--sp-5); cursor: pointer;
  font: 600 var(--t-sm)/1 var(--font-sans);
  color: var(--brand-2-ink); background: transparent;
  border: 1px solid var(--brand-2-line); border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn-complete:hover { background: var(--brand-2-wash); }
.btn-complete.done { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }

/* 이전/다음 페이저 (프로그램 내) */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-7); }
.pager__link {
  display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.pager__link:hover { border-color: var(--pc-line); box-shadow: var(--shadow-sm); }
.pager__link--next { text-align: right; grid-column: 2; }
.pager__dir { font: 600 var(--t-xs)/1 var(--font-mono); color: var(--pc); }
.pager__title { font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; }

@media (max-width: 620px) {
  .pager { grid-template-columns: 1fr; }
  .pager__link--next { grid-column: 1; text-align: left; }
}

/* --- 편의: 본문 너비 스위치(위젯은 site.css, 레슨에서만 노출) + 좁게보기 --- */
body.lesson-view .widthpick { display: inline-flex; }
/* 좁게: 사이드바는 그대로, 본문만 읽기폭으로 좁아지며 '화면(뷰포트) 중앙'에 온다.
   본문의 컨테이닝 블록은 사이드바 오른쪽 컬럼(좌측이 rail-w+gap 만큼 밀려 있음)이므로,
   화면 중앙(50vw)에 맞추려면 그만큼을 margin-left 로 뺀다. 좁은 화면에선 사이드바와 겹치지 않게 max(0,…). */
.lesson-layout.is-narrow .lesson {
  --read-w: 820px;
  max-width: var(--read-w); margin-right: 0; padding-right: 0; padding-left: 0;
  /* 본문 컨테이닝블록 좌측이 --content-x(사이드바+gap, 접힘 시 0)만큼 밀려 있으므로 그만큼 빼서 화면 중앙(50vw)에 정렬 */
  margin-left: max(0px, calc(50vw - var(--read-w) / 2 - var(--content-x)));
}

/* --- 우하단 맨위/맨아래 스크롤 버튼 --- */
/* 여백을 폰트 위젯(.reading-tools: 나브로부터 top 10px·right 14px)과 대칭 → bottom 10px·right 14px */
.page-scroll { position: fixed; right: 14px; bottom: 10px; z-index: 90; display: flex; flex-direction: column; gap: 6px; }
/* .page-scroll 는 main 직속이라 공통 body.site>main>*{padding-block:section-y}·*+*{border-top} 을 상속(=32px 상하 패딩+선).
   fixed UI 위젯이므로 그 세로 패딩/보더를 명시도 우위로 제거. */
body.lesson-view .page-scroll { padding: 16px 0; border-top: 0; }
.page-scroll__btn {
  width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); cursor: pointer; color: var(--ink-2); font-size: 15px; line-height: 1;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.page-scroll__btn:hover { color: var(--pc); border-color: var(--pc); }

/* --- 사이드바 접기 토글 — 사이드바 우측상단 경계에 고정(접혀도 보임). 접힘 시 좌측 끝으로 슬라이드 --- */
.rail-toggle {
  position: fixed; top: calc(var(--nav-h) + 10px); left: var(--rail-w); z-index: 50;
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-xs); color: var(--muted); cursor: pointer; box-shadow: var(--shadow-sm);
  transition: left var(--dur-2) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.rail-toggle:hover { color: var(--pc); border-color: var(--pc-line); }
.lesson-layout.rail-collapsed .rail-toggle { left: 4px; }        /* 접히면 좌측 끝(재확장 버튼) — 사이드바 collapse 와 동기 슬라이드 */
@media (max-width: 900px) { .rail-toggle { display: none; } }    /* 모바일: 사이드바 자체가 숨김이라 불필요 */

/* ── 읽기 진행률 바 (나브 하단) ── */
.read-progress { position: fixed; top: var(--nav-h); left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress > i { display: block; height: 100%; width: 0; background: var(--pc, var(--brand)); transition: width .12s var(--ease); }

/* ── 우측 페이지 목차 (Velog/Notion 스타일 스크롤 스파이) ── */
.lesson-body h2, .lesson-body h3 { scroll-margin-top: calc(var(--nav-h) + 16px); }   /* 앵커 점프 시 나브에 안 가리게 */
.page-toc {
  position: fixed; right: 28px; width: 190px;
  /* reading-tools(top: nav+10) 실측 높이 --rt-h(fontpick.html JS) 아래 16px 여유에서 시작
     → 컨트롤 개수(팔레트 추가 등)가 바뀌어도 겹치지 않는다. JS 미실행 시 fallback 118px(3행). */
  --toc-top: calc(var(--nav-h) + 10px + var(--rt-h, 118px) + 16px);
  top: var(--toc-top);
  max-height: calc(100vh - var(--toc-top) - 96px);   /* 우하단 페이지 이동 버튼(.page-scroll) 위에서 끝 */
  overflow-y: auto; z-index: 30; scrollbar-width: thin;
}
.page-toc__head { margin: 0 0 8px; font: 700 var(--t-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.page-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.page-toc__li a {
  display: block; padding: 4px 0 4px 12px; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--muted); font-size: var(--t-xs); line-height: 1.4; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.page-toc__li--h3 a { padding-left: 24px; }
.page-toc__li a:hover { color: var(--ink-2); }
.page-toc__li a.is-active { color: var(--pc); border-left-color: var(--pc); font-weight: 600; }
/* 좁으면 숨김, 넓으면 본문 우측에 목차 공간 확보(겹침 방지) */
@media (max-width: 1200px) { .page-toc { display: none; } }
@media (min-width: 1201px) { .lesson-layout:not(.is-narrow) .lesson { padding-right: 232px; } }