/* 디자인 규칙: webapp.md §6
   흰 배경, 무채색 기본, 포인트 색 2개. 이모지와 장식 그래픽을 쓰지 않는다. */
:root {
  --ink: #1a1a1a;
  --ink-soft: #5a5a5a;
  --ink-faint: #8c8c8c;
  --line: #e2e2e2;
  --paper: #ffffff;
  --paper-alt: #f7f7f7;
  --accent: #1f4e79;      /* 기본 포인트 — 링크, 현재 위치 */
  --accent-warn: #8a5a00; /* 확인 필요 배지 */
  --code-bg: #1e1e1e;
  --quiz-bg: #f4f7fa;     /* 퀴즈 박스 — 본문과 구분되는 옅은 바탕 */

  /* 트랙별 주제색. CLAUDE_1.md §9 는 포인트 2~3색을 권하지만,
     주제별로 색을 나눠 달라는 사용자 지시(2026-08-15)에 따라 4색을 씁니다.
     모두 어둡고 채도를 낮춰 인쇄와 본문 가독성을 해치지 않게 했습니다. */
  --track-install: #1f4e79;  /* 남색 — 설치 가이드 */
  --track-intro: #2f6b4f;    /* 초록 — 입문 과정 */
  --track-code: #8a5320;     /* 갈색 — 코드 구조화 */
  --track-security: #7a2f52; /* 자주 — 보안 특화 */
  --track-local: #3f5a2f;    /* 짙은 올리브 — 데이터가 나가지 않는 LLM 운영 */
  --track-build: #4a3a6b;    /* 짙은 보라 — 실습 */
  --font: 'NanumSquare', sans-serif;
  --font-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --measure: 46rem;
}

/* 차시 페이지는 그 트랙의 주제색을 --accent 로 덮어쓴다.
   덕분에 제목, 사이드바 현재 위치, 링크가 한 번에 같은 색으로 바뀐다. */
body[data-track="install"]  { --accent: var(--track-install); }
body[data-track="intro"]    { --accent: var(--track-intro); }
body[data-track="code"]     { --accent: var(--track-code); }
body[data-track="security"] { --accent: var(--track-security); }
body[data-track="local"]    { --accent: var(--track-local); }
body[data-track="build"]    { --accent: var(--track-build); }

/* 허브의 카드는 카드마다 자기 트랙 색을 쓴다. */
.track-card[data-track-id="install"]  { --accent: var(--track-install); }
.track-card[data-track-id="intro"]    { --accent: var(--track-intro); }
.track-card[data-track-id="code"]     { --accent: var(--track-code); }
.track-card[data-track-id="security"] { --accent: var(--track-security); }
.track-card[data-track-id="local"]    { --accent: var(--track-local); }
.track-card[data-track-id="build"]    { --accent: var(--track-build); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.75;
  font-size: 16px;
}

/* 복사 억제 — webapp.md §5.5
   유출 차단이 아니다. 개발자도구와 소스 보기로 우회된다.
   코드 블록과 편집 영역은 예외로 둔다. */
body {
  -webkit-user-select: none;
  user-select: none;
}

.selectable,
.code-block pre,
textarea,
input {
  -webkit-user-select: text;
  user-select: text;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 10;
}
.site-title { font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.search-box { position: relative; margin-left: auto; }
#search-input {
  font-family: var(--font); font-size: 0.9rem; padding: 0.4rem 0.75rem;
  border: 1px solid var(--line); border-radius: 2px; width: 16rem;
}
.search-results {
  position: absolute; right: 0; top: 2.4rem; width: 26rem; max-height: 24rem;
  overflow-y: auto; background: var(--paper); border: 1px solid var(--line);
}
.search-results a { display: block; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.search-results .result-track { display: block; font-size: 0.78rem; color: var(--ink-faint); }
.search-results .result-snippet { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.search-results mark { background: #ffe9a8; }
.search-empty { padding: 0.9rem; margin: 0; font-size: 0.88rem; color: var(--ink-faint); }

.site-main { max-width: 76rem; margin: 0 auto; padding: 2.5rem 2rem 5rem; }
body[data-page="lesson"] .site-main { display: grid; grid-template-columns: 15rem 1fr; gap: 3rem; }

.hub-title { font-weight: 800; font-size: 2rem; margin: 0 0 0.5rem; }
.hub-subtitle { color: var(--ink-soft); margin: 0 0 2.5rem; }
.hub-resume { margin: 0 0 2rem; }
.track-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.track-card a { display: block; height: 100%; padding: 1.75rem; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.track-card a:hover { border-color: var(--accent); }
.track-number { display: block; font-weight: 800; color: var(--accent); font-size: 0.85rem; }
.track-name { display: block; font-weight: 700; font-size: 1.2rem; margin: 0.35rem 0 0.6rem; }
.track-summary { display: block; color: var(--ink-soft); font-size: 0.92rem; }
.track-meta { display: block; margin-top: 1.25rem; font-size: 0.82rem; color: var(--ink-faint); }
.hub-note { margin-top: 2.5rem; font-weight: 300; font-size: 0.85rem; color: var(--ink-faint); }

.sidebar { position: sticky; top: 5rem; align-self: start; font-size: 0.9rem; }
.sidebar-track { font-weight: 700; margin: 0 0 0.75rem; }
.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li { margin: 0.15rem 0; }
.sidebar-list a { display: block; padding: 0.35rem 0.5rem; color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent; }
.sidebar-list a[aria-current="page"] { color: var(--accent); font-weight: 700; border-left-color: var(--accent); }
.sidebar-list a.is-done::after { content: '완료'; float: right; font-size: 0.7rem; color: var(--ink-faint); }
.sidebar-progress { margin-top: 1.25rem; font-size: 0.8rem; color: var(--ink-faint); }

.lesson { max-width: var(--measure); }
.lesson-eyebrow { color: var(--accent); font-size: 0.85rem; font-weight: 700; margin: 0; }
.lesson-title {
  font-weight: 800; font-size: 1.9rem; margin: 0.3rem 0 2rem;
  color: var(--accent);
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--accent);
}
.lesson-body h2 { font-weight: 700; font-size: 1.25rem; margin: 2.5rem 0 0.75rem; color: var(--accent); }
.lesson-body h3 { font-weight: 700; font-size: 1.05rem; margin: 1.75rem 0 0.5rem; color: var(--ink); }
.lesson-body .lead { font-size: 1.05rem; color: var(--ink-soft); }
.lesson-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.92rem; }
.lesson-body th, .lesson-body td { border: 1px solid var(--line); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.lesson-body th { background: var(--paper-alt); font-weight: 700; }
.lesson-body img { max-width: 100%; height: auto; }
.lesson-body figure { margin: 2rem 0; }
.lesson-body figcaption { font-weight: 300; font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.5rem; }
.table-scroll { overflow-x: auto; }

.badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 2px; vertical-align: 0.1em; }
.badge-analysis { background: var(--paper-alt); color: var(--ink-soft); border: 1px solid var(--line); }
.badge-check { background: #fdf3e0; color: var(--accent-warn); border: 1px solid #ecd9b0; }
.badge-line { font-size: 0.9rem; color: var(--ink-soft); }

/* 실행 검증까지는 하지 않은 예시 코드임을 밝히는 줄. 빌드가 자동으로 붙인다. */
.code-status {
  font-size: 0.86rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  margin-top: 2.5rem;
}

.callout { border-left: 3px solid var(--accent); background: var(--paper-alt); padding: 1rem 1.25rem; margin: 1.75rem 0; }
.callout-title { font-weight: 700; margin: 0 0 0.35rem; font-size: 0.88rem; color: var(--accent); }
.callout p:last-child { margin-bottom: 0; }

.code-block { position: relative; margin: 1.75rem 0; }
.code-block pre {
  background: var(--code-bg); color: #e8e8e8; font-family: var(--font-code);
  font-size: 0.86rem; line-height: 1.65; padding: 1.25rem 1.25rem; margin: 0;
  overflow-x: auto; border-radius: 3px;
}
.code-copy {
  position: absolute; top: 0.6rem; right: 0.6rem; font-family: var(--font);
  font-size: 0.75rem; padding: 0.25rem 0.6rem; background: #333; color: #ddd;
  border: 1px solid #4a4a4a; border-radius: 2px; cursor: pointer;
}
.code-copy:hover { background: #444; }
.code-copy[data-state="done"] { color: #9ad29a; }

/* 코드 문법 색. lib/highlight.js 가 붙이는 클래스와 짝을 이룬다.
   어두운 배경 위에서 서로 구분되도록 색상환에서 떨어뜨렸다. */

/* 파이썬 */
.tok-keyword { color: #c586c0; }  /* def, import, return */
.tok-string  { color: #ce9178; }  /* 문자열 */
.tok-comment { color: #6a9955; }  /* 주석 */
.tok-number  { color: #b5cea8; }  /* 숫자 */
.tok-def     { color: #dcdcaa; }  /* 함수 이름 */

/* 셸 명령 */
.tok-cmd  { color: #4ec9b0; font-weight: 700; }  /* 명령 이름 */
.tok-flag { color: #9cdcfe; }                    /* -U, --upgrade */

/* 설정 파일 */
.tok-key   { color: #9cdcfe; }  /* KEY */
.tok-value { color: #ce9178; }  /* value */

/* 코드 상자 왼쪽에 언어를 표시한다 */
.code-block { --code-label: ''; }
.code-block:has(.language-python) { --code-label: 'python'; }
.code-block:has(.language-shell)  { --code-label: 'terminal'; }
.code-block:has(.language-config) { --code-label: 'config'; }
.code-block::before {
  content: var(--code-label);
  position: absolute; top: 0.75rem; left: 1.25rem;
  font-family: var(--font); font-size: 0.68rem; letter-spacing: 0.06em;
  color: #7f7f7f; text-transform: uppercase;
}
.code-block:has(.language-python) pre,
.code-block:has(.language-shell) pre,
.code-block:has(.language-config) pre { padding-top: 2.1rem; }

.lesson-footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.btn-primary {
  font-family: var(--font); font-weight: 700; font-size: 0.9rem; cursor: pointer;
  padding: 0.6rem 1.2rem; background: var(--accent); color: #fff; border: 0; border-radius: 2px;
  text-decoration: none; display: inline-block;
}
.btn-primary[data-state="done"] { background: var(--paper-alt); color: var(--ink-soft); border: 1px solid var(--line); }
.sources { margin: 2rem 0; font-size: 0.85rem; color: var(--ink-soft); }
.sources h2 { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.5rem; }
.sources ul { margin: 0; padding-left: 1.1rem; }
.sources code { font-family: var(--font-code); font-size: 0.8rem; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.pager a { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.pager-next { margin-left: auto; }

.quiz {
  margin: 3.5rem 0 0;
  padding: 1.75rem;
  background: var(--quiz-bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
}
.quiz h2 {
  font-size: 1.05rem; font-weight: 800; margin: 0 0 1.25rem; color: var(--accent);
}
.quiz-question + .quiz-question { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.quiz-prompt { font-weight: 700; margin: 0 0 0.75rem; }
.quiz-choice { display: block; width: 100%; text-align: left; font-family: var(--font); font-size: 0.92rem;
  padding: 0.65rem 0.9rem; margin: 0.4rem 0; background: var(--paper);
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer; }
.quiz-choice:hover { border-color: var(--accent); }
.quiz-choice[data-result="correct"] { border-color: #2f6b4f; border-left-width: 4px; background: #edf5f0; font-weight: 700; }
.quiz-choice[data-result="wrong"] { border-color: var(--accent-warn); border-left-width: 4px; background: #fdf3e0; }
.quiz-explain {
  margin-top: 1rem; padding: 0.9rem 1rem; font-size: 0.88rem; color: var(--ink-soft);
  background: var(--paper); border-left: 3px solid var(--accent);
}
.quiz-source code { font-family: var(--font-code); font-size: 0.78rem; }

@media (max-width: 860px) {
  .site-main { padding: 1.5rem 1.25rem 4rem; }
  body[data-page="lesson"] .site-main { grid-template-columns: 1fr; gap: 1.5rem; }
  .sidebar { position: static; }
  .track-grid { grid-template-columns: 1fr; }
  #search-input { width: 10rem; }
  .search-results { width: 90vw; }
}

.checklist { list-style: none; padding: 0; }
.checklist li { margin: 0.3rem 0; }
.checklist label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.checklist input { margin-top: 0.45rem; }

/* 용어 뜻풀이 — 마우스를 올리거나 키보드로 이동하면 뜻이 뜬다.
   terms.json 에 정의하고 build.py 가 첫 등장에 붙인다. */
.term {
  position: relative;
  border-bottom: 1px dotted var(--accent);
  cursor: help;
  text-decoration: none;
  outline: none;
}
.term::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 1.7em;
  z-index: 20;
  min-width: 12rem;
  max-width: 22rem;
  padding: 0.55rem 0.8rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.55;
  border-radius: 3px;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  pointer-events: none;
}
.term:hover::after,
.term:focus::after { opacity: 1; visibility: visible; }
.term:focus { border-bottom-style: solid; }

/* 오른쪽 끝에서 잘리지 않게 */
.lesson-body .term:nth-last-child(-n+3)::after { left: auto; right: 0; }

/* 트랙 개요 */
.overview { max-width: var(--measure); }
.overview-eyebrow { margin: 0 0 0.4rem; font-size: 0.85rem; }
.overview-eyebrow a { color: var(--ink-faint); text-decoration: none; }
.overview-eyebrow a:hover { color: var(--accent); }
.overview-heading {
  font-weight: 800; font-size: 1.9rem; margin: 0 0 1.5rem; color: var(--accent);
  padding-bottom: 0.75rem; border-bottom: 3px solid var(--accent);
}
.overview-goal-box {
  background: var(--paper-alt); border-left: 3px solid var(--accent);
  padding: 1.1rem 1.35rem; margin: 0 0 1.5rem;
}
.overview-goal-label { margin: 0 0 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.overview-goal-text { margin: 0; font-size: 1.05rem; font-weight: 700; }
.overview-summary { color: var(--ink-soft); margin: 0 0 2rem; }
.overview-note { font-weight: 300; font-size: 0.85rem; color: var(--ink-faint); }
.overview-list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.overview-lesson { border-top: 1px solid var(--line); padding: 0.85rem 0; }
.overview-lesson:last-child { border-bottom: 1px solid var(--line); }
.overview-lesson a { display: flex; gap: 0.85rem; align-items: baseline; text-decoration: none; color: var(--ink); }
.overview-lesson a:hover .overview-title { color: var(--accent); }
.overview-no { font-weight: 800; color: var(--accent); font-size: 0.85rem; min-width: 1.4rem; }
.overview-title { font-weight: 700; font-size: 1.02rem; }
.overview-goal { margin: 0.3rem 0 0 2.25rem; font-size: 0.9rem; color: var(--ink-soft); }
.overview-start { margin-top: 2.5rem; }

/* 차시 학습 목표 */
.lesson-goal {
  background: var(--paper-alt); border-left: 3px solid var(--accent);
  padding: 0.9rem 1.2rem; margin: 0 0 2rem;
}
.lesson-goal-label { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.lesson-goal-text { margin: 0; font-weight: 700; }

/* 사이드바 개요 링크 */
.sidebar-overview { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.sidebar-overview a { font-weight: 700; color: var(--accent); }

/* 코드 작성 가이드 — webapp.md §5.6 */
.builder-layout { display: grid; grid-template-columns: 20rem 1fr; gap: 2.5rem; align-items: start; }
.builder-choices { position: sticky; top: 5rem; }
.builder-group { border: 1px solid var(--line); padding: 1rem 1.1rem 0.9rem; margin: 0 0 1.1rem; }
.builder-group legend { font-weight: 700; font-size: 0.92rem; padding: 0 0.4rem; color: var(--accent); }
.builder-why { margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--ink-faint); }
.builder-list { list-style: none; padding: 0; margin: 0; }
.builder-list li { display: flex; gap: 0.5rem; align-items: baseline; margin: 0 0 0.5rem; }
.builder-list label { font-size: 0.88rem; cursor: pointer; }
.builder-list strong { font-weight: 700; }
.builder-note { display: block; font-size: 0.78rem; color: var(--ink-soft); font-weight: 400; }

.builder-notes[hidden] { display: none; }
.builder-alert { font-size: 0.86rem; padding: 0.8rem 1rem; margin: 0 0 0.7rem; border-left: 3px solid; }
.builder-error { border-color: #8a2f2f; background: #fbf0f0; color: #6b2424; }
.builder-warn  { border-color: var(--accent-warn); background: #fdf3e0; color: #6b4600; }
.builder-info  { border-color: var(--ink-faint); background: var(--paper-alt); color: var(--ink-soft); }

.builder-code { position: relative; }
.builder-label { display: block; font-size: 0.78rem; color: var(--ink-faint); padding: 0.7rem 1.25rem 0; }
.builder-source {
  width: 100%; border: 0; resize: vertical; display: block;
  background: var(--code-bg); color: #e8e8e8;
  font-family: var(--font-code); font-size: 0.84rem; line-height: 1.6;
  padding: 0.6rem 1.25rem 1.25rem;
  -webkit-user-select: text; user-select: text;
}
.builder-source:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.builder-run { font-size: 0.88rem; color: var(--ink-soft); margin-top: 1.75rem; }
.hub-builder { margin-top: 2rem; }

@media (max-width: 60rem) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-choices { position: static; }
}

/* 코드 작성 가이드 — 쓰는 법 상자 */
.builder-howto {
  border: 2px solid var(--accent);
  background: var(--paper-alt);
  padding: 1.5rem 1.75rem 1.25rem;
  margin: 2rem 0 2.5rem;
}
.builder-howto-title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.builder-steps { margin: 0; padding-left: 1.4rem; }
.builder-steps li { margin: 0 0 0.9rem; font-size: 0.92rem; }
.builder-steps li span { display: block; margin-top: 0.2rem; font-size: 0.86rem; color: var(--ink-soft); }
.builder-howto-need { font-size: 0.88rem; margin: 1.1rem 0 0.6rem; }
.builder-howto .code-block { margin: 0.6rem 0 0; }

/* 허브 — 쓰는 법 상자와 진도 지우기 */
.hub-howto { margin-top: 2.5rem; }
.hub-howto-list { list-style: none; padding: 0; margin: 0; }
.hub-howto-list li { margin: 0 0 0.9rem; font-size: 0.92rem; }
.hub-howto-list li span { display: block; margin-top: 0.2rem; font-size: 0.86rem; color: var(--ink-soft); }
.hub-clear {
  display: inline-block; margin-left: 0.6rem;
  font-family: var(--font); font-size: 0.78rem; color: var(--ink-soft);
  background: none; border: 1px solid var(--line); border-radius: 2px;
  padding: 0.2rem 0.55rem; cursor: pointer;
}
.hub-clear:hover { border-color: var(--accent); color: var(--accent); }