/* ============================================================
   한국GPT협회 표준 교재 공통 디자인 템플릿 (standard-theme.css)
   ------------------------------------------------------------
   전 교재·포털이 링크하는 유일한 스타일 원본. 색·여백·컴포넌트는 여기서만
   정의한다. 챕터 인라인 <style>에는 그 챕터 고유 컴포넌트만 둔다.
   공통 동작: assets/js/boot.js(첫 페인트 전 단계 적용) + assets/js/standard.js.

   ★ 단일 소스 지도 — 무엇을 어디서 고치는가
   - 단계별 실제 크기(글자 px / 본문폭 / 네비폭) : 이 파일 html[data-fs]·html[data-mw]
   - 단계 개수 · 저장 키 · 구버전 승계          : assets/js/boot.js
   - +/- 버튼 동작 · 네비 자동생성 · 복사 버튼   : assets/js/standard.js
   → 교재 HTML은 단계 값을 전혀 모른다. 스케일을 바꿔도 교재를 건드리지 않는다.

   글자 크기 9단계(16~32px) / 본문 너비 9단계(800px~전체폭).
   - 사이드바 글자는 --nav-fs = clamp(16px, 1rem, 21px) 기준으로 본문보다
     완만하게 커진다. 1단계(16px)에서는 rem 값과 같아 모양이 바뀌지 않는다.
   - 네비 폭 = 본문너비 단계 기준폭(--sb-base) + 글자크기 단계 증분(--sb-grow).
     36vw 상한을 둬 좁은 화면에서 본문을 밀어내지 않게 한다.
   - 리스트 마커 들여쓰기(.obj-box·.study-path·.selfcheck)는 rem 기반이다.
     px로 고정하면 큰 글자 단계에서 마커가 본문 글자를 침범한다.

   ── 문서 서식 규약(이 템플릿이 전제하는 것) ──
   (1) 본문 제목 "태그화": .main h2 / .main h3 태그 선택자로 직접 서식.
       클래스 없이 <h2>/<h3>만 써도 적용(.mod-title 등도 병기해 호환).
   (2) h2(대단원) = 굵은 텍스트 + 하단 브랜드색 라인. 넘버링·부제 미사용.
   (3) 'CHAPTER N' 라벨/차시(.mod-head)는 HTML에서 제거(스타일은 잔존).
   (4) '이해(이론)' 섹션은 박스 제거(본문 흐름), '사례·실습'은 박스 유지.
   (5) 본문 좌우 여백 축소 — 박스 중첩에 따른 공간 낭비 완화.
   (6) Learning Objectives 라벨은 .obj-title 클래스로 분리(h4 미사용).
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css");

:root {
  /* 브랜드 팔레트 — 표준(중립) 블루 */
  --p: #1B4F8A;          /* primary */
  --p2: #3D77B8;         /* primary light */
  --pd: #123A66;         /* primary dark */
  --bk: #16243A;         /* near-black */
  --dk: #333;
  --md: #666;
  --lt: #999;
  --bd: #E5E5E5;
  --bg: #F5F6F8;
  --w: #FFF;

  /* 폭 — 네비 폭 = 본문너비 단계의 기준폭 + 글자크기 단계의 증분.
     --sb-base·--main-max 는 html[data-mw]가, --sb-grow 는 html[data-fs]가
     덮어쓴다. 기본 = 본문너비 4단계 · 글자크기 1단계 → 네비 264px */
  --sb-base: 264px;
  --sb-grow: 0px;
  /* 36vw 상한 — 좁은 화면 + 큰 글자에서 네비가 본문을 과하게 밀어내지 않게 */
  --sidebar-w: min(calc(var(--sb-base) + var(--sb-grow)), 36vw);
  --main-max: 1200px;

  /* 네비 기준 글자 크기 — 본문(1rem)보다 완만하게 커진다(16px → 최대 21px).
     사이드바 안의 글자·버튼은 모두 이 값의 배수로 정한다. 배수는 16px 기준
     기존 rem 값과 동일하므로 기본 단계(1단계)의 모양은 바뀌지 않는다. */
  --nav-fs: clamp(16px, 1rem, 21px);

  /* 섹션 유형별 색 — 칩(chip)에만 사용한다 */
  --sec-theory: #1B4F8A;
  --sec-demo: #B25E00;
  --sec-practice: #1E7B4F;
  --sec-challenge: #6A3FA0;

  /* 공통 여백 스케일 — 챕터·섹션 간 간격은 여기서만 조정 */
  --gap-chapter: 64px;   /* 챕터(모듈) 사이 */
  --gap-section: 68px;   /* 섹션(h3) 사이 — 헤딩 단위 단절 강화 */
  --gap-block: 18px;     /* 본문 요소 사이 */
}

html { font-size: 16px; }  /* JS 미실행 대비 기본값 — 실제 단계는 아래 html[data-fs] */

/* ── 글자 크기 9단계 ──────────────────────────────────────
   ★ 단계별 px 값의 유일한 원본. boot.js·standard.js 는 단계 번호만 다루고
     px를 알지 못한다. 크기를 바꾸려면 여기만 고친다.
   함께 지정하는 --sb-grow 는 네비 폭 증분. 네비 글자는 --nav-fs 상한(21px)
   때문에 본문만큼 커지지 않으므로 단계당 5px이면 항목 줄바꿈을 막기에 충분하다. */
html[data-fs="1"] { font-size: 16px; --sb-grow: 0px;  }  /* 기본 */
html[data-fs="2"] { font-size: 18px; --sb-grow: 5px;  }
html[data-fs="3"] { font-size: 20px; --sb-grow: 10px; }
html[data-fs="4"] { font-size: 22px; --sb-grow: 15px; }
html[data-fs="5"] { font-size: 24px; --sb-grow: 20px; }  /* 구 7단계(최대) */
html[data-fs="6"] { font-size: 26px; --sb-grow: 25px; }
html[data-fs="7"] { font-size: 28px; --sb-grow: 30px; }
html[data-fs="8"] { font-size: 30px; --sb-grow: 35px; }
html[data-fs="9"] { font-size: 32px; --sb-grow: 40px; }

/* ── 본문 너비 9단계 ──────────────────────────────────────
   글자 크기(data-fs)와 독립. 본문폭(--main-max)과 네비 기준폭(--sb-base)을
   함께 키운다. 기본=4단계(본문 1200px). 7단계는 네비 포함 1920(FHD),
   9단계는 화면 전체폭. */
html[data-mw="1"] { --sb-base: 240px; --main-max: 800px;  }
html[data-mw="2"] { --sb-base: 248px; --main-max: 960px;  }
html[data-mw="3"] { --sb-base: 256px; --main-max: 1080px; }
html[data-mw="4"] { --sb-base: 264px; --main-max: 1200px; }  /* 기본 */
html[data-mw="5"] { --sb-base: 272px; --main-max: 1320px; }
html[data-mw="6"] { --sb-base: 288px; --main-max: 1440px; }
html[data-mw="7"] { --sb-base: 300px; --main-max: 1600px; }  /* 300+20+1600 = 1920 (FHD) */
html[data-mw="8"] { --sb-base: 312px; --main-max: 1800px; }
html[data-mw="9"] { --sb-base: 320px; --main-max: none;   }  /* 전체폭 */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Paperlogy', -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--dk);
  line-height: 1.7;
  font-size: 1rem;
  word-break: keep-all;
  overflow-wrap: break-word;
}
a { color: var(--p); }

/* ── Sidebar ───────────────────────────────────────────────
   구조: [박스: 한국GPT협회 표준교재] → [교재명(h1 역할)]
        → 가로선(.sidebar-header 하단 보더) → 본문 목차(h2·h3 자동 생성) */
.sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh;
  background: #0B1422; overflow-y: auto; z-index: 1000;
  transition: transform .3s ease;
}
.sidebar-header { padding: 24px 20px 18px; border-bottom: 1px solid rgba(255,255,255,.14); }
/* 상단 박스 — "한국GPT협회 표준교재" */
.sidebar-badge {
  display: inline-block; border: 1px solid var(--p2); border-radius: 3px;
  padding: 5px 12px; font-size: calc(var(--nav-fs) * 0.7333); color: #BBDBFB;
  letter-spacing: .5px; font-weight: 700; margin-bottom: 12px;
}
/* 교재명 — h1에 해당하는 표시 */
.sidebar-title { font-size: calc(var(--nav-fs) * 1.0667); color: var(--w); font-weight: 700; line-height: 1.45; }
.sidebar-title em { font-style: normal; color: #9CC3EC; }
.sidebar-nav { padding: 10px 0 24px; }
.sidebar-nav a {
  display: block; padding: 7px 22px;
  font-size: calc(var(--nav-fs) * 0.8667); color: rgba(255,255,255,.75);
  text-decoration: none; transition: all .2s;
}
.sidebar-nav a:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.05); }
.sidebar-nav a.active { color: var(--w); background: rgba(61,119,184,.22); font-weight: 600; }
/* h2 항목 — 잘 보이게(흰색·크게·굵게) */
.sidebar-nav a.nav-head {
  color: var(--w); font-weight: 700; font-size: var(--nav-fs);
  padding: 14px 22px 8px; margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.sidebar-nav a.nav-head:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar-nav a.nav-head:first-child { border-top: none; margin-top: 0; }
.sidebar-nav a.nav-head.active { color: #fff; background: rgba(61,119,184,.28); }
/* h3 항목 — 작은 글자, 들여쓰기 없음(h2와 같은 좌측 정렬) */
.sidebar-nav a.sub { padding: 6px 22px; font-size: calc(var(--nav-fs) * 0.8); color: rgba(255,255,255,.72); }
.sidebar-nav a.sub:hover { color: #fff; }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: calc(var(--nav-fs) * 0.7333); color: rgba(255,255,255,.55); line-height: 1.8; }
.sidebar-footer b { color: rgba(255,255,255,.85); }
.sidebar-links { display: flex; flex-direction: column; gap: 6px; }
.sidebar-links a { color: #BBDBFB; text-decoration: none; }
.sidebar-links a:hover { color: #fff; text-decoration: underline; }
.sidebar-contact { margin-top: 14px; line-height: 1.9; }
.sidebar-contact .mail-copy { color: #BBDBFB; text-decoration: none; cursor: pointer; }
.sidebar-contact .mail-copy:hover { color: #fff; text-decoration: underline; }
/* 포털 링크 — standard.js가 http(s) 환경에서만 사이드바 헤더에 주입 */
.sidebar-portal-link { display: inline-block; margin-top: 12px; font-size: calc(var(--nav-fs) * 0.7333); color: #BBDBFB; text-decoration: none; }
.sidebar-portal-link:hover { color: #fff; text-decoration: underline; }

/* 햄버거(모바일) */
.hamburger {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 1100;
  background: var(--bk); color: var(--w); border: none;
  padding: 10px 12px; font-size: 1.3333rem; cursor: pointer; border-radius: 4px;
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; }
.sidebar-overlay.show { display: block; }

/* ── Main ──────────────────────────────────────────────── */
.main { margin-left: calc(var(--sidebar-w) + 20px); max-width: var(--main-max); background: var(--w); min-height: 100vh; }

/* Hero */
.hero { background: linear-gradient(135deg, #0B1422, #11335A 60%, #1B4F8A); padding: 52px 40px; }
.hero-badge {
  display: inline-block; border: 1px solid rgba(255,255,255,.35);
  padding: 5px 14px; font-size: 0.7333rem; color: rgba(255,255,255,.8);
  letter-spacing: 1px; margin-bottom: 24px;
}
.hero h1 { font-size: 2.2rem; color: var(--w); font-weight: 700; line-height: 1.3; margin-bottom: 18px; }
.hero h1 em { font-style: normal; background: rgba(255,255,255,.14); padding: 2px 12px; }
.hero-sub { font-size: 1rem; color: rgba(255,255,255,.85); line-height: 1.8; }
.hero-meta { margin-top: 28px; display: flex; gap: 28px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px; flex-wrap: wrap; }
.hero-meta-item { font-size: 0.8667rem; color: rgba(255,255,255,.65); }
.hero-meta-item span { color: var(--w); font-weight: 600; display: block; margin-top: 2px; }

/* Timetable(과정 한눈에 보기) */
.timetable { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); border: 1px solid var(--bd); }
.tt-item { padding: 16px 10px; text-align: center; border-right: 1px solid var(--bd); }
.tt-item:last-child { border-right: none; }
.tt-time { font-size: 0.7333rem; color: var(--p); font-weight: 700; letter-spacing: .5px; }
.tt-title { font-size: 0.8667rem; font-weight: 700; color: var(--bk); margin-top: 6px; line-height: 1.4; }
.tt-data { font-size: 0.7333rem; color: var(--lt); margin-top: 4px; }

/* ── Module(챕터) ──────────────────────────────────────── */
.module { padding: 40px 36px var(--gap-chapter); border-bottom: 6px solid var(--bg); }
/* 'CHAPTER N' 라벨/차시 — 신규 교재에선 미사용. 잔존 호환용. */
.mod-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.mod-num { background: var(--bk); color: var(--w); font-size: 0.7333rem; font-weight: 700; padding: 6px 14px; letter-spacing: 1px; }
.mod-time { font-size: 0.8667rem; color: var(--p); font-weight: 600; }

/* ── 본문 제목 태그화 ──────────────────────────────────────
   <h2>/<h3>만 써도 서식이 적용된다(클래스 불필요).
   기존 클래스(.mod-title / .sec-head h3)도 함께 타깃해 호환 유지. */
/* h2 = 대단원 — 굵은 텍스트 + 하단 브랜드색 라인. 위 여백으로 챕터 단절 */
.main h2, .mod-title {
  font-size: 1.8rem; font-weight: 700; color: var(--bk);
  padding: 0 0 12px; margin: 76px 0 28px;
  border-bottom: 3px solid var(--p);
}
.module > h2:first-child, .module > .mod-title:first-child { margin-top: 0; }
.main h2 small, .mod-title small { display: none; }  /* 부제목 미사용 */
/* h3 = 섹션 큰 제목 (.sec-head 안에서는 칩과 한 줄로 배치됨) */
.main h3, .sec-head h3 { font-size: 1.4rem; font-weight: 700; color: var(--bk); }

/* 학습 목표 — Learning Objectives 라벨은 .obj-title 클래스(모든 교재 공통) */
.obj-box { background: var(--w); border: 1px solid var(--bd); border-radius: 6px; padding: 20px 24px; margin-bottom: 20px; }
.obj-box .obj-title { font-size: 0.8rem; color: var(--p); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; font-weight: 700; }
.obj-box ul { list-style: none; }
/* 들여쓰기·마커 위치를 rem으로 — px 고정이면 큰 글자 단계에서 마커가 본문을 침범한다 */
.obj-box li { font-size: 0.9333rem; color: var(--dk); padding: 0.3125rem 0 0.3125rem 1rem; position: relative; }
.obj-box li::before { content: '●'; position: absolute; left: 0; color: var(--p); font-size: 0.6rem; top: 0.6rem; }

/* 이 장의 학습 흐름 — 혼자 학습하는 경로 안내 (챕터당 1개) */
.study-path { border: 1px solid var(--bd); border-radius: 6px; padding: 18px 24px; margin-bottom: 30px; }
.study-path h4 { font-size: 0.8rem; color: var(--p); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px; }
.study-path ol { list-style: none; counter-reset: sp; }
.study-path li { font-size: 0.9rem; color: var(--dk); padding: 0.25rem 0 0.25rem 1.875rem; position: relative; counter-increment: sp; line-height: 1.75; }
.study-path li::before {
  content: counter(sp); position: absolute; left: 0; top: 0.4375rem;
  width: 1.25rem; height: 1.25rem; border: 1px solid var(--p2); border-radius: 50%;
  font-size: 0.7333rem; color: var(--p); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.study-path li b { color: var(--bk); }
.study-path li em { font-style: normal; color: var(--lt); font-size: 0.8rem; }
.study-path .sp-prep { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--bd); font-size: 0.8333rem; color: var(--md); }
.study-path .sp-prep b { color: var(--dk); }

/* ── 섹션 유형 블록 — 이론 · 시연 사례 · 실습 · 도전 과제 ──
   사례·실습은 흰 바탕 + 가는 테두리 박스. 유형 구분은 칩 색상으로. */
.sec { background: transparent; border: none; border-radius: 0; margin: var(--gap-section) 0; overflow: visible; }
.sec-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 0 6px;
}
.sec-chip { order: 0; font-size: 0.7333rem; font-weight: 700; color: #fff; padding: 4px 12px; border-radius: 3px; letter-spacing: 1px; white-space: nowrap; }
.case-tag {
  order: 1; font-size: 0.7333rem; color: var(--md);
  border: 1px solid var(--bd); border-radius: 12px;
  padding: 2px 10px; white-space: nowrap;
}
.sec-head h3 { order: 2; flex-basis: 100%; }   /* 제목은 칩 아래 줄, 전체폭 */
.sec-body { padding: 16px 0 0; }

.sec-theory .sec-chip { background: var(--sec-theory); }
.sec-demo .sec-chip { background: var(--sec-demo); }
.sec-practice .sec-chip { background: var(--sec-practice); }
.sec-challenge .sec-chip { background: var(--sec-challenge); }

/* '이해(이론)' 섹션은 칩 없이 제목만 */
.sec-theory .sec-chip { display: none; }

/* 학습 방법 안내 — 각 섹션 첫머리의 자기주도 학습 가이드 */
.how-to { font-size: 0.8667rem; color: var(--md); line-height: 1.85; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px dashed var(--bd); }
.how-to .ht-tag { display: block; font-weight: 700; color: var(--p); margin-bottom: 4px; }
.how-to b { color: var(--dk); }
.how-to + .h-lead { margin-top: 0; }

/* 본문 소제목/리드 문단 — h4 권장 위치. 위 여백으로 소제목 단위 단절 */
.h-lead { font-size: 1.2rem; font-weight: 700; color: var(--bk); margin: 56px 0 14px; }
.sec-body .h-lead:first-child { margin-top: 0; }
.p-lead { font-size: 0.9333rem; color: var(--dk); margin-bottom: var(--gap-block); }

/* Tip / Note / Warn — 흰 바탕 + 가는 테두리, 라벨 색으로만 구분 */
.tip-box, .note-box, .warn-box {
  background: var(--w); border: 1px solid var(--bd); border-radius: 6px;
  padding: 14px 20px; margin: 16px 0;
  font-size: 0.8667rem; color: var(--md); line-height: 1.8;
}
.tip-box strong { color: #B26A00; }
.note-box strong { color: var(--bk); }
.warn-box { border-color: #E8B4B4; }
.warn-box strong { color: #B71C1C; }

/* ── 프롬프트 블록(복사 버튼 포함) ─────────────────────── */
.prompt-block { position: relative; background: #141822; border-radius: 6px; margin: 16px 0 20px; overflow: hidden; border: 1px solid #252B3A; }
.prompt-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #1E2433; border-bottom: 1px solid #2A3142; }
.prompt-label { font-size: 0.7333rem; color: #7FB2E5; font-weight: 700; letter-spacing: .5px; }
.copy-btn { background: transparent; border: 1px solid #555; color: #aaa; padding: 3px 10px; font-size: 0.7333rem; cursor: pointer; border-radius: 3px; font-family: inherit; transition: all .2s; }
.copy-btn:hover { border-color: #7FB2E5; color: #7FB2E5; }
.copy-btn.copied { border-color: #4CAF50; color: #4CAF50; }
.copy-btn.failed { border-color: #E53935; color: #E53935; }
.prompt-body {
  padding: 16px; font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.8667rem; color: #E0E0E0; line-height: 1.8;
  white-space: pre-wrap; word-break: break-word;
  overflow-x: auto; max-height: 560px; overflow-y: auto;
}
.prompt-body .hl { color: #FFD369; }
.prompt-body .hl2 { color: #80D8FF; }
.prompt-body .mute { color: #888; }

/* 코드 블록(설정값·매핑 요약용) */
.code-block { background: #1C2128; border-radius: 6px; margin: 14px 0; overflow: hidden; }
.code-block .cb-head { display: flex; justify-content: space-between; padding: 8px 14px; background: #262C36; font-size: 0.7333rem; color: #8AB4DE; }
.code-block pre { padding: 14px 16px; font-family: 'Consolas', monospace; font-size: 0.8333rem; color: #D8DEE6; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }

/* ── 표 ────────────────────────────────────────────────── */
.comp-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.8667rem; background: var(--w); }
.comp-table th, .comp-table td { border: 1px solid var(--bd); padding: 10px 12px; text-align: left; vertical-align: top; }
.comp-table th { background: var(--bg); color: var(--bk); font-weight: 700; font-size: 0.8rem; }
.comp-table td code, .p-lead code, .note-box code, .tip-box code, .warn-box code, li code, .anatomy code, .how-to code {
  background: #F1F5FA; color: var(--pd); padding: 1px 6px; border-radius: 3px;
  font-size: 0.8rem; font-family: 'Consolas', monospace;
}

/* 해부도(라벨-본문 2열 그리드) */
.anatomy { display: grid; grid-template-columns: 10rem 1fr; gap: 0; margin: 16px 0; border: 1px solid var(--bd); border-radius: 6px; overflow: hidden; background: var(--w); }
.anatomy > div { padding: 12px 16px; border-bottom: 1px solid var(--bd); font-size: 0.8667rem; }
.anatomy > div:nth-last-child(-n+2) { border-bottom: none; }
.anatomy .a-label { color: var(--p); font-weight: 700; font-size: 0.8rem; border-right: 1px solid var(--bd); }
.anatomy .a-body { color: var(--dk); line-height: 1.7; }

/* 카드 그리드 */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.info-card { background: var(--w); border: 1px solid var(--bd); padding: 18px; border-radius: 6px; }
.info-card h5 { font-size: 0.9333rem; font-weight: 700; color: var(--bk); margin-bottom: 6px; }
.info-card h5 em { font-style: normal; color: var(--p); font-size: 0.7333rem; margin-right: 6px; }
.info-card p { font-size: 0.8667rem; color: var(--md); line-height: 1.65; }

/* ── 실습 목표/결과물 박스 ─────────────────────────────── */
.goal-box { background: var(--w); border: 1px solid var(--bd); border-radius: 6px; margin: 16px 0; overflow: hidden; }
.goal-box .gb-head { color: var(--sec-practice); font-size: 0.8rem; font-weight: 700; padding: 10px 20px 0; letter-spacing: .5px; text-transform: uppercase; }
.goal-box .gb-body { padding: 8px 20px 16px; font-size: 0.9rem; line-height: 1.8; }
.goal-box .gb-body b { color: var(--sec-practice); }

/* 결과물 미리보기 액자 — 실습 결과물의 모습을 시각적으로 보여줄 때 */
.result-mock { border: 1px solid var(--bd); border-radius: 8px; margin: 18px 0; overflow: hidden; background: var(--w); }
.result-mock .rm-bar { display: flex; align-items: center; gap: 6px; background: var(--bg); padding: 8px 14px; border-bottom: 1px solid var(--bd); }
.result-mock .rm-bar i { width: 10px; height: 10px; border-radius: 50%; background: #C9CFD8; display: inline-block; }
.result-mock .rm-bar span { font-size: 0.7333rem; color: var(--md); margin-left: 8px; }
.result-mock .rm-body { padding: 20px 22px; }

/* 실습 단계 안내 */
.exercise { background: var(--w); border: 1px dashed var(--bd); padding: 20px 24px; margin: 18px 0; border-radius: 6px; }
.exercise h4 { font-size: 0.8667rem; color: var(--sec-practice); font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.exercise ol, .exercise ul { padding-left: 20px; font-size: 0.9rem; color: var(--dk); line-height: 1.95; }

/* 더 해보기(심화) 카드 — 실습 계열 색상으로 통일 */
.challenge-item { background: var(--w); border: 1px solid var(--bd); border-radius: 6px; padding: 18px 22px; margin: 14px 0; }
.challenge-item h4 { font-size: 0.9333rem; font-weight: 700; color: var(--sec-practice); margin-bottom: 8px; }
.challenge-item h4 em { font-style: normal; font-size: 0.7333rem; border: 1px solid var(--sec-practice); border-radius: 3px; padding: 1px 8px; margin-right: 8px; }
.challenge-item p, .challenge-item li { font-size: 0.9rem; color: var(--dk); line-height: 1.8; }
.challenge-item ul, .challenge-item ol { padding-left: 20px; margin-top: 6px; }

/* 실습파일 다운로드 칩 */
.file-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.file-links a {
  display: inline-block; font-size: 0.8rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--p); color: #fff; background: var(--p);
  padding: 5px 14px; border-radius: 14px; transition: all .2s;
}
.file-links a:hover { border-color: var(--pd); background: var(--pd); color: #fff; }
.file-links a::before { content: '📄 '; }

/* 그림 */
figure.overview-img { margin: 18px 0; background: var(--w); border: 1px solid var(--bd); border-radius: 6px; overflow: hidden; }
figure.overview-img img { display: block; width: 100%; height: auto; }
figure.overview-img figcaption { padding: 10px 16px; font-size: 0.8rem; color: var(--md); border-top: 1px solid var(--bd); }
.shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.shot-grid figure.overview-img { margin: 0; }

/* 시나리오(사례 배경) 박스 */
.scenario-box { background: var(--w); border: 1px solid var(--bd); border-radius: 6px; padding: 20px 24px; margin: 18px 0; }
.scenario-box h5 { font-size: 0.9333rem; font-weight: 700; color: #B26A00; margin-bottom: 8px; }
.scenario-box p { font-size: 0.9rem; color: var(--dk); line-height: 1.75; }

/* 자가 점검 체크리스트 */
.selfcheck { background: var(--w); border: 1px dashed var(--bd); padding: 16px 20px; margin: 24px 0 0; border-radius: 4px; font-size: 0.8667rem; color: var(--dk); }
.selfcheck h5 { font-size: 0.8rem; color: var(--p); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.selfcheck ul { list-style: none; }
.selfcheck li { padding: 0.25rem 0 0.25rem 1.5rem; position: relative; line-height: 1.7; }
.selfcheck li::before { content: '☐'; position: absolute; left: 0; color: var(--md); font-size: 0.9333rem; }

/* 흐름 체인(파이프라인 시각화) */
.flow-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 18px 0; }
.flow-cell { background: var(--w); border: 1px solid var(--bd); border-radius: 6px; padding: 14px 12px; text-align: center; position: relative; }
.flow-cell .fc-icon { font-size: 0.6667rem; font-weight: 700; letter-spacing: 1px; color: var(--p); }
.flow-cell .fc-title { font-size: 0.8667rem; font-weight: 700; color: var(--bk); margin-top: 6px; line-height: 1.4; }
.flow-cell .fc-sub { font-size: 0.7333rem; color: var(--lt); margin-top: 4px; }

/* 통계 카드 */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-card { background: var(--w); border: 1px solid var(--bd); padding: 18px 20px; border-radius: 6px; }
.stat-card .s-num { font-size: 1.4667rem; font-weight: 700; line-height: 1.3; color: var(--p); }
.stat-card .s-label { font-size: 0.8rem; color: var(--md); margin-top: 4px; }

/* 미니 막대 차트(CSS 전용 — 결과물 mockup용) */
.mini-bars { display: flex; align-items: flex-end; gap: 14px; height: 140px; padding: 10px 6px 0; border-bottom: 2px solid var(--bd); }
.mini-bars .bar { flex: 1; background: linear-gradient(180deg, #3D77B8, #1B4F8A); border-radius: 3px 3px 0 0; position: relative; min-width: 30px; }
.mini-bars .bar i { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 0.6667rem; color: var(--md); }
.mini-bar-labels { display: flex; gap: 14px; padding: 6px 6px 0; }
.mini-bar-labels span { flex: 1; text-align: center; font-size: 0.7333rem; color: var(--md); min-width: 30px; }

/* ── 핵심 강조 밴드(.keypoint) — 여러 교재 공용 ──────────
   키 컬러(브랜드 블루) 진한 배경 + 흰 글자.
   장(章) 흐름 중간에서 "가장 중요한 메시지 하나"를 강조할 때 사용한다. */
.keypoint {
  background: linear-gradient(135deg, #0E2240 0%, #123A66 55%, #1B4F8A 100%);
  color: #fff; border-radius: 10px;
  padding: 30px 34px; margin: var(--gap-section) 0;
  box-shadow: 0 8px 26px rgba(14,34,64,.20);
}
.keypoint .kp-label {
  font-size: 0.7333rem; letter-spacing: 2px; font-weight: 700;
  color: #9CC3EC; text-transform: uppercase; margin-bottom: 12px;
}
.keypoint .kp-title { font-size: 1.4rem; font-weight: 700; color: #fff; line-height: 1.45; margin: 0 0 14px; }
.keypoint .kp-title em { font-style: normal; background: rgba(255,255,255,.16); padding: 1px 10px; border-radius: 4px; }
.keypoint .kp-text { font-size: 0.9333rem; color: rgba(255,255,255,.82); line-height: 1.85; margin: 0 0 10px; }
.keypoint .kp-text b, .keypoint .kp-text strong { color: #fff; font-weight: 700; }
.keypoint .kp-text code {
  background: rgba(255,255,255,.16); color: #EAF2FB; padding: 1px 6px;
  border-radius: 3px; font-family: 'Consolas', monospace; font-size: 0.8rem;
}
/* 단계 흐름 라벨(예: 수집 ▸ 저장 ▸ 재활용 ▸ 통합) */
.keypoint .kp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 1.0667rem; margin: 18px 0 0; }
.keypoint .kp-flow .sep { color: #9CC3EC; }
/* 어두운 배경용 서브 카드(반투명) */
.keypoint .kp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.keypoint .kp-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 14px 16px; }
.keypoint .kp-card .kc-step { font-size: 0.6667rem; letter-spacing: 1.5px; font-weight: 700; color: #9CC3EC; }
.keypoint .kp-card .kc-title { font-size: 0.9333rem; font-weight: 700; color: #fff; margin: 4px 0 6px; }
.keypoint .kp-card p { font-size: 0.8rem; color: rgba(255,255,255,.78); line-height: 1.6; }
/* 비중 대비 막대(예: 5% vs 95%) — flex 값으로 폭 비율을 직접 지정 */
.keypoint .kp-split {
  display: flex; height: 58px; border-radius: 8px; overflow: hidden;
  margin: 22px 0 12px; border: 1px solid rgba(255,255,255,.25);
}
.keypoint .kp-split > div { display: flex; align-items: center; justify-content: center; font-weight: 700; min-width: 44px; }
.keypoint .kp-min { background: rgba(255,255,255,.16); color: rgba(255,255,255,.78); font-size: 0.8667rem; }
.keypoint .kp-max { background: #fff; color: var(--pd); font-size: 1.2rem; letter-spacing: .5px; }
.keypoint .kp-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.8rem; color: rgba(255,255,255,.8); margin-bottom: 14px; }
.keypoint .kp-legend > div { display: flex; align-items: center; gap: 8px; }
.keypoint .kp-legend b { color: #fff; }
.keypoint .kp-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.keypoint .kp-legend .d-min { background: rgba(255,255,255,.35); }
.keypoint .kp-legend .d-max { background: #fff; }
.keypoint .kp-foot {
  font-size: 0.9333rem; color: #EAF2FB; line-height: 1.8; margin: 6px 0 0;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18);
}
.keypoint .kp-foot b { color: #FFD369; font-weight: 700; }
@media (max-width: 900px) {
  .keypoint { padding: 22px 18px; }
  .keypoint .kp-title { font-size: 1.15rem; }
}

/* Footer */
.footer { background: var(--bk); padding: 30px 40px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; text-align: center; }
.footer p { font-size: 0.8rem; color: rgba(255,255,255,.5); }
.footer span { color: var(--w); font-weight: 500; }

/* 인쇄 */
@media print {
  .sidebar, .hamburger, .sidebar-overlay { display: none !important; }
  .main { margin-left: 0 !important; max-width: 100%; }
  .hero, .module { padding: 28px 30px; }
  .sec, .prompt-block, figure.overview-img { break-inside: avoid; }
  .copy-btn { display: none; }
}

/* 반응형 */
@media (max-width: 1100px) {
  .main { max-width: 100% !important; margin-left: var(--sidebar-w); }
  .hero { padding: 48px 30px; }
  .module { padding: 36px 28px var(--gap-chapter); }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); width: 86%; max-width: 320px; }
  .sidebar.open { transform: translateX(0); }
  .hamburger { display: block; }
  .main { margin-left: 0 !important; }
  .hero { padding: 40px 20px; }
  .hero h1 { font-size: 1.6rem; }
  .module { padding: 30px 18px 48px; }
  .main h2, .mod-title { font-size: 1.5rem; }
  .sec-body { padding: 14px 0 0; }
  .sec-head { padding: 0 0 10px; }
  .main h3, .sec-head h3 { font-size: 1.2rem; }
  .anatomy { grid-template-columns: 1fr; }
  .anatomy .a-label { border-right: none; border-bottom: 1px solid var(--bd); }
  .shot-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .prompt-body { font-size: 0.8rem; padding: 12px; }
  .footer { padding: 22px 20px; flex-direction: column; align-items: flex-start; }
}

/* ── 글자 크기 / 본문 너비 조절 (사이드바 하단) ────────────
   라벨('글자 크기'·'본문 너비')과 +/− 버튼도 글자 크기 단계를 따라 커지되,
   네비와 같은 --nav-fs 기준이라 본문만큼 커지지는 않는다. */
.fs-ctrl {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: calc(var(--nav-fs) * 0.6875);  /* 16px 기준 11px */
  color: rgba(255,255,255,.55);
}
.fs-ctrl .fs-name { margin-right: auto; letter-spacing: .5px; }
.fs-ctrl button {
  width: calc(var(--nav-fs) * 1.5); height: calc(var(--nav-fs) * 1.5); line-height: 1;
  flex: none;
  background: transparent; color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.3); border-radius: 4px;
  font-size: calc(var(--nav-fs) * 0.875); cursor: pointer; font-family: inherit;
}
.fs-ctrl button:hover { border-color: #9CC3EC; color: #C8DEF5; }
.fs-ctrl #fsLevel, .fs-ctrl #mwLevel { min-width: calc(var(--nav-fs) * 1.75); text-align: center; color: rgba(255,255,255,.85); }

/* 큰 글자 단계에서 해부도 열 보정 — 라벨 열이 본문을 잠식하지 않게 */
html[data-fs="5"] .anatomy,
html[data-fs="6"] .anatomy { grid-template-columns: 8.5rem 1fr; }
html[data-fs="7"] .anatomy,
html[data-fs="8"] .anatomy,
html[data-fs="9"] .anatomy { grid-template-columns: 8rem 1fr; }

@media print { .fs-ctrl { display: none !important; } }

/* 학생 공유링크 만료 카운트다운 (사이드바 상단, standard.js가 학생일 때만 주입) */
.kgpt-timer {
  margin-top: 3px;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  color: var(--w); opacity: .72;
  font-variant-numeric: tabular-nums;
}
.kgpt-timer.is-exp { color: #ff9a9a; opacity: 1; }  /* 의미색: 만료(빨강) */
@media print { .kgpt-timer { display: none !important; } }