/* ==========================================================================
   AI 교사 성장 나침반 — 공개 페이지(site.css)
   <main class="landing"> 화면(랜딩, 이용 안내, 개인정보 처리방침, 비교 기준과 근거, 종이로 진단하기)에서만 읽는다.
   원본: docs/design/prototype-v2/css/site.css(커밋 62ecec9)의 5~8절. 토큰·기본·뼈대·단추·헤더·바닥글은 app.css.
   계획 3 개정 2에서 바꾼 것:
   - 이름 충돌: 쪽 머리의 경로 표시는 page-crumbs(앱 차시 화면의 crumbs와 겹침), 진단 방법의 단계 목록 삭제(앱 실습 창과 겹침)
   - 진단 방법 카드: 그림·단계 목록·'이럴 때 좋습니다' 삭제, 절차 한 줄(.way-flow)과 단추만(Codex 모바일 축약 3-2)
   - 연수 절: 일곱 블록 띠·실습 종류·게이트웨이 예시를 이용 안내로 옮기고 세 단계(.learn-flow)만(3-3)
   - 과정표는 목록(.course-list), 비교표는 휴대전화에서 카드(.compare-cards, 열 이름은 HTML 글자)(3-4, #10)
   - 영상: 자체 포스터·재생 단추 대신 브라우저 기본 재생기
   - 생성 글자는 장식(+, −, 번호)만. 수준 띠는 빈 내용, 대본 번호는 목록 기본 번호
   ========================================================================== */

/* 0. 공개 페이지 기본값: app.css의 앱 화면용 여백을 공개 페이지에서만 되돌린다.
   :where()로 특이성을 요소 선택자와 같게 두어, 아래 클래스 규칙이 늘 이긴다. */
:where(.landing) :is(h1, h2, h3, h4) { margin: 0; }
:where(.landing) :is(ul, ol) { margin: 0; padding: 0; }
:where(.landing) :is(figure, dl, dd, blockquote, details) { margin: 0; }
:where(.landing) summary { color: inherit; font-size: inherit; font-weight: inherit; }

/* 1. 띠·절 머리·보조 ------------------------------------------------------ */
.band { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
.band-paper { background: var(--paper); }
.band-white { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-tight { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.section-head { max-width: 58rem; margin-bottom: var(--sp-7); }
.section-head h2 { font: 620 var(--fs-8) / var(--lh-tight) var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.section-head p { font-size: var(--fs-4); line-height: 1.7; color: var(--ink-2); margin: 0; max-width: 38em; }
.fine { font-size: var(--fs-0); color: var(--muted); line-height: 1.6; }
.key { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--needle); color: #fff; font: 700 14px / 1 var(--f-body); }
.fig { margin: 0; }
.fig-note { margin-top: 14px; }
.more-link { margin-top: var(--sp-5); font-weight: 700; }
.m-only { display: none; }
.hero :focus-visible, .cta-final :focus-visible, .page-hero :focus-visible, .privacy-box :focus-visible { outline-color: var(--chalk-yellow); }
/* 실제 화면 캡처(P4b). 캡처는 요소 가장자리에서 잘려 글이 틀에 닿으므로, 앱 바탕색 여백을 두른다(QA). */
.shot { display: block; width: 100%; height: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--paper); box-shadow: var(--lift); }
.hero .shot { border-color: transparent; box-shadow: var(--lift-dark); }
/* 최대 높이로 자른 넓은 화면 캡처(차시)는 잘린 줄이 보이지 않게 아래를 흐린다. 휴대전화 그림(<source>)은
   요소 단위로 잘라 흐리지 않는다. */
@media (min-width: 641px) { .shot.is-cut { mask-image: linear-gradient(to bottom, black calc(100% - 72px), transparent); } }
.shot-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
/* 나란히 놓는 두 장은 390 창에서 찍은 그림(CSS 폭 358px)이라 그보다 키우지 않는다. 폭은 .shot의 100%를 그대로 두고
   최대 폭만 준다: width: auto는 width·height 속성이 잡아 두는 자리를 없애 늦게 읽을 때 아래 내용을 민다(재검토 N1).
   384px = 그림 358 + 안쪽 여백 12×2 + 테두리 1×2(border-box). */
.shot-pair .shot { max-width: 384px; }

/* 2. 첫 화면 ------------------------------------------------------------- */
.hero { --hero-paper: 112px; background: var(--board); color: var(--chalk); position: relative; padding-top: var(--sp-8); padding-bottom: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; position: relative; z-index: 1; }
.hero-copy { padding-top: var(--sp-5); padding-bottom: calc(var(--hero-paper) + 32px); }
.hero h1 { color: var(--chalk); font: 640 var(--fs-9) / 1.2 var(--f-display); letter-spacing: -0.025em; margin-bottom: var(--sp-5); }
.hero-lead { font-size: var(--fs-4); line-height: 1.75; color: var(--chalk-dim); margin-bottom: var(--sp-6); max-width: 30em; }
.hero-alt { margin-top: var(--sp-5); font-size: var(--fs-2); color: var(--chalk-dim); line-height: 1.7; max-width: 30em; }
.hero-made { margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--board-line); font-size: var(--fs-1); line-height: 1.7; color: var(--chalk-dim); max-width: 32em; }
.hero-alt a, .hero-made a { color: var(--chalk); font-weight: 700; }
.hero-alt a:hover, .hero-made a:hover { color: var(--chalk-yellow); }
.hero-visual { position: relative; margin: 0; padding-bottom: 206px; align-self: end; }
.hero-shot { position: relative; }
.hero-caption { position: absolute; left: 0; bottom: 20px; width: calc(100% - 400px); font-size: var(--fs-0); color: var(--muted); line-height: 1.6; }
.hero-visual.is-shot { padding-bottom: 24px; }
.hero-visual.is-shot .hero-caption { position: static; width: auto; margin-top: 14px; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hero-paper); background: var(--paper); z-index: 0; }

/* 3. 소개 영상 ----------------------------------------------------------- */
.video-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.video-copy h2 { font: 620 var(--fs-7) / 1.28 var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.video-copy p { color: var(--ink-2); }
.caption-note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-2); color: var(--ink-2); margin: var(--sp-5) 0 var(--sp-4); }
.cc-mark { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 4px; border: 1.5px solid var(--board); border-radius: 4px; font: 700 13px / 1 var(--f-body); color: var(--board); margin-top: 2px; }
.transcript { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.transcript summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--board); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::after { content: "+"; font: 400 22px / 1 var(--f-body); color: var(--sprout); }
.transcript[open] summary::after { content: "−"; }
.transcript ol { list-style: decimal; padding: 0 0 var(--sp-4) 1.4em; }
.transcript li { padding: 6px 0; font-size: var(--fs-2); line-height: 1.65; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-frame); overflow: hidden; background: var(--board); box-shadow: var(--lift); }
.video-frame video { display: block; width: 100%; height: 100%; background: #0d1f1b; }
.video-open { display: none; margin: 0; }

/* 4. 보고서 -------------------------------------------------------------- */
.report-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.report-aside { position: sticky; top: 24px; }
.report-aside h2 { font: 620 var(--fs-8) / var(--lh-tight) var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.report-aside > p { font-size: var(--fs-4); color: var(--ink-2); line-height: 1.7; }
.key-list { list-style: none; margin-top: var(--sp-6); display: grid; gap: var(--sp-5); }
.key-list li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; }
.key-list h3 { font: 700 var(--fs-4) / 1.4 var(--f-body); margin-bottom: 4px; }
.key-list p { margin: 0; color: var(--ink-2); font-size: var(--fs-2); line-height: 1.7; }
.report-stage, .report-shot { position: relative; }
.report-note { margin-top: 18px; padding-right: 340px; }
.report-stage.is-shot .report-note { padding-right: 0; }

/* 5. 진단 방법 ----------------------------------------------------------- */
.ways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.way { border-radius: var(--r-panel); padding: 40px; display: flex; flex-direction: column; }
.way-online { background: var(--surface); border: 1px solid var(--line); }
.way-offline { background: var(--omr-soft); border: 1px solid #efcbc1; }
.way h3 { font: 620 var(--fs-6) / 1.3 var(--f-display); letter-spacing: -0.01em; margin-bottom: var(--sp-2); }
.way p { color: var(--ink-2); }
/* 진단 방법이 하나뿐일 때(종이 진단 플래그 꺼짐, .is-single): 카드 한 장이 줄 전체를 쓰고 글은 왼쪽, 단추는 오른쪽.
   절 제목이 카드 제목을 겸하므로 카드 첫 문장을 제목 크기로 둔다. 휴대전화에서는 위아래로 쌓는다(12절). */
.ways-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.ways-grid.is-single .way { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5) var(--sp-8); align-items: center; }
.ways-grid.is-single .way-lead { font: 620 var(--fs-5) / 1.45 var(--f-display); color: var(--ink); margin-bottom: var(--sp-3); }
.ways-grid.is-single .way-copy > :last-child { margin-bottom: 0; }
.ways-grid.is-single .btn-row { flex-direction: column; align-items: stretch; margin-top: 0; padding-top: 0; }
.way-flow { font-size: var(--fs-2); color: var(--ink-2); line-height: 1.7; padding: 12px 16px; background: var(--paper); border-radius: var(--r-sheet); }
.way-offline .way-flow { background: rgba(255, 255, 255, 0.62); }
.way .note { font-size: var(--fs-1); color: var(--muted); }
.way .btn-row { margin-top: auto; padding-top: var(--sp-4); }

/* 6. 연수와 기록 --------------------------------------------------------- */
.learn-flow { list-style: none; counter-reset: flow; display: grid; gap: var(--sp-8); }
.learn-flow > li { counter-increment: flow; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.step-copy h3 { display: flex; gap: 12px; align-items: baseline; font: 620 var(--fs-6) / 1.3 var(--f-display); margin-bottom: var(--sp-3); }
.step-copy h3::before { content: counter(flow); flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--board); color: var(--chalk); font: 700 15px / 1 var(--f-body); transform: translateY(-3px); }
.step-copy p { color: var(--ink-2); }
.reason-quote { padding: 14px 18px; border-left: 3px solid #b9d6c7; background: var(--surface); border-radius: 0 var(--r-sheet) var(--r-sheet) 0; font-size: var(--fs-2); color: var(--ink-2); line-height: 1.7; }
.reason-quote p { margin: 0; }
.reason-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: var(--fs-0); color: var(--muted); }
.pii-note { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: var(--fs-1); color: var(--ink-2); line-height: 1.7; margin-top: var(--sp-4); }
.pii-note svg { width: 20px; height: 20px; margin-top: 3px; color: var(--sprout); }
.course-details { margin-top: var(--sp-8); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.course-details > summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.course-details > summary::-webkit-details-marker { display: none; }
.course-details > summary b { font: 620 var(--fs-5) / 1.35 var(--f-display); color: var(--board); }
.course-details > summary span { font-size: var(--fs-1); color: var(--muted); }
.course-details > summary::after { content: "+"; font: 400 26px / 1 var(--f-body); color: var(--sprout); margin-left: auto; }
.course-details[open] > summary::after { content: "−"; }
.course-list { list-style: none; margin-bottom: var(--sp-6); }
.course-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-2); line-height: 1.55; }
.course-list .code { font-weight: 700; color: var(--board); }
.course-list .min { color: var(--ink-2); white-space: nowrap; }
.course-list .panes { grid-column: 2 / -1; font-size: var(--fs-1); color: var(--muted); }

/* 7. 비교 ---------------------------------------------------------------- */
.compare-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.compare { width: 100%; font-size: var(--fs-2); }
.compare th, .compare td { padding: 15px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; line-height: 1.45; }
.compare thead th { font-size: var(--fs-1); font-weight: 700; color: var(--board); background: var(--paper-2); vertical-align: bottom; padding-top: 18px; padding-bottom: 14px; }
.compare thead th:first-child { text-align: left; }
.compare th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); width: 34%; }
.compare .us { background: #f1f7f3; }
.compare thead .us { background: var(--board); color: var(--chalk); font-size: var(--fs-2); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.mark { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; font-weight: 700; }
.mark-yes { color: var(--sprout); font-size: 18px; }
.us .mark-yes, .is-us .mark-yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sprout); color: #fff; font-size: 15px; }
.mark-part { color: var(--ink-2); font-size: var(--fs-1); font-weight: 500; padding: 2px 10px; border-radius: var(--r-pill); background: var(--paper-2); }
.mark-none { color: var(--muted); font-weight: 400; }
.compare-cards { display: none; list-style: none; gap: 12px; }
.compare-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; }
.compare-card h3 { font: 700 var(--fs-3) / 1.45 var(--f-body); color: var(--board); margin-bottom: 10px; }
.compare-card dl { display: grid; gap: 6px; }
.compare-card dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--paper); }
.compare-card dl > div.is-us { background: #e3efe8; }
.compare-card dt { font-size: var(--fs-1); color: var(--ink-2); }
.compare-card .is-us dt { color: var(--sprout-ink); font-weight: 700; }
.compare-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); margin-top: var(--sp-5); font-size: var(--fs-1); color: var(--ink-2); line-height: 1.7; }
.compare-foot p { margin: 0 0 var(--sp-2); }
.compare-foot .footnote { font-weight: 700; color: var(--board); }
.legend { list-style: none; display: grid; gap: 6px; }
.legend li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; }
.doc-h2 { font: 620 var(--fs-6) / 1.3 var(--f-display); margin-bottom: var(--sp-4); }
.type-block { padding: var(--sp-6) 0; border-top: 1px solid var(--line); }
.type-block h3 { font: 620 var(--fs-5) / 1.35 var(--f-display); margin-bottom: 6px; }
.type-block h4 { font: 700 var(--fs-2) / 1.4 var(--f-body); color: var(--board); margin: var(--sp-4) 0 6px; }
.type-block > p, .scope p { color: var(--ink-2); }
.service-list, .basis-list, .source-list { list-style: none; display: grid; gap: 8px; }
.service-list > li { padding: 10px 0; border-top: 1px dashed var(--line); }
.basis-list li { padding-left: 18px; position: relative; color: var(--ink-2); line-height: 1.7; font-size: var(--fs-2); }
.basis-list li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; border: 1.5px solid var(--line-strong); border-radius: 2px; }
.source-list { margin-top: 6px; gap: 4px; }
.source-list li { font-size: var(--fs-1); line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.source-kind { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: var(--r-pill); background: var(--paper-2); font-size: 13.5px; color: var(--ink-2); }

/* 8. 모델과 만든 사람들 -------------------------------------------------- */
.model-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.model-copy h2 { font: 620 var(--fs-8) / var(--lh-tight) var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.model-copy p { color: var(--ink-2); }
.model-copy .fine { margin-top: var(--sp-5); }
.model-figure { margin: 0; }
.model-flow { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.55fr); align-items: stretch; }
.model-src { display: grid; gap: 12px; align-content: center; }
.src-box { border: 1.5px dashed var(--line-strong); border-radius: var(--r-sheet); padding: 16px 18px; background: var(--paper); }
.src-box b { display: block; color: var(--board); font-size: var(--fs-2); line-height: 1.45; margin-bottom: 4px; }
.src-box span { display: block; font-size: var(--fs-0); color: var(--muted); line-height: 1.55; }
.model-join { display: flex; align-items: center; }
.model-join svg { width: 44px; height: 100%; color: var(--line-strong); }
.model-join .arrow { stroke: var(--board); }
.model-core { background: var(--board); color: var(--chalk); border-radius: var(--r-panel); padding: 24px 24px 20px; }
.model-core .title { font: 620 21px / 1.35 var(--f-display); color: var(--chalk); margin-bottom: 4px; }
.model-core .meta { font-size: var(--fs-0); color: var(--chalk-dim); margin-bottom: 16px; }
.domain { border-top: 1px solid var(--board-line); padding: 10px 0; }
.domain .dn { font-size: 13.5px; color: var(--chalk-dim); margin-bottom: 6px; }
.domain ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.domain li { font-size: 14px; line-height: 1.3; padding: 6px 10px; border-radius: var(--r-pill); background: var(--board-raise); color: var(--chalk); }
.levels { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 18px; }
.levels li { text-align: center; font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.levels li::before { content: ""; display: block; height: 8px; margin-bottom: 6px; border-radius: 2px; background: var(--sprout); }
.levels li:nth-child(1)::before { opacity: .22; }
.levels li:nth-child(2)::before { opacity: .36; }
.levels li:nth-child(3)::before { opacity: .5; }
.levels li:nth-child(4)::before { opacity: .66; }
.levels li:nth-child(5)::before { opacity: .82; }
.levels-cap { font-size: var(--fs-0); color: var(--muted); margin-top: 8px; }
.makers { margin-top: var(--sp-9); }
.makers h2 { font: 620 var(--fs-7) / 1.3 var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-5); }
.makers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.maker { border: 1px solid var(--line); border-radius: var(--r-panel); padding: 32px; background: var(--surface); display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; }
.maker-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--board); font: 640 26px / 1 var(--f-display); }
.maker-mark.co { border-radius: 14px; background: var(--board); color: var(--chalk); font-size: 20px; }
.maker .role { font-size: var(--fs-1); color: var(--needle); font-weight: 700; margin-bottom: 2px; }
.maker h3 { font: 640 var(--fs-6) / 1.3 var(--f-display); margin-bottom: var(--sp-3); }
.maker ul { list-style: none; display: grid; gap: 6px; font-size: var(--fs-2); color: var(--ink-2); line-height: 1.6; }
.maker li { padding-left: 14px; position: relative; }
.maker li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }

/* 9. 자주 묻는 질문 ------------------------------------------------------ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.faq-grid h2 { font: 620 var(--fs-8) / var(--lh-tight) var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.faq-grid .aside p { color: var(--ink-2); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: center; padding: 22px 0; font-weight: 700; font-size: var(--fs-4); color: var(--board); line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 400 26px / 1 var(--f-body); color: var(--sprout); text-align: right; }
.faq-item[open] summary::after { content: "−"; }
.faq-item .a { padding-bottom: 22px; color: var(--ink-2); max-width: 42em; }
.faq-item .a p:last-child { margin-bottom: 0; }

/* 10. 마지막 CTA --------------------------------------------------------- */
.cta-final { background: var(--board); color: var(--chalk); position: relative; overflow: hidden; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-7); align-items: end; }
.cta-final h2 { color: var(--chalk); font: 640 var(--fs-8) / 1.25 var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.cta-final p { color: var(--chalk-dim); font-size: var(--fs-4); margin: 0; max-width: 32em; }
.cta-final .btn-row { justify-content: flex-end; }
.cta-final .sub-link { margin-top: var(--sp-4); text-align: right; font-size: var(--fs-2); color: var(--chalk-dim); }
.cta-final .sub-link a { color: var(--chalk); }
.cta-final .sub-link a:hover { color: var(--chalk-yellow); }

/* 11. 하위 페이지(안내 문서, 종이로 진단하기) ----------------------------- */
.page-hero { background: var(--board); color: var(--chalk); padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.page-crumbs { font-size: var(--fs-1); color: var(--chalk-dim); margin-bottom: var(--sp-4); }
.page-crumbs a { color: var(--chalk-dim); }
.page-crumbs a:hover { color: var(--chalk); }
.page-hero h1 { color: var(--chalk); font: 640 var(--fs-9) / 1.2 var(--f-display); letter-spacing: -0.025em; margin-bottom: var(--sp-5); }
.page-hero .lead { color: var(--chalk-dim); font-size: var(--fs-4); line-height: 1.75; max-width: 32em; margin-bottom: var(--sp-6); }
.page-hero .fine { color: var(--chalk-dim); margin-top: var(--sp-4); }
.page-hero.is-doc { padding-bottom: var(--sp-7); }
.page-hero.is-doc h1 { font-size: var(--fs-8); }
.paper-set { position: relative; height: 420px; }
.paper-set .booklet { position: absolute; left: 0; top: 18px; width: 56%; transform: rotate(-4deg); filter: drop-shadow(0 24px 30px rgba(3, 14, 11, .45)); }
.paper-set .sheet { position: absolute; left: 30%; top: 0; width: 46%; transform: rotate(3deg); border-radius: 3px; filter: drop-shadow(0 30px 40px rgba(3, 14, 11, .55)); }
.paper-set .phone { position: absolute; right: 0; bottom: -10px; width: 34%; filter: drop-shadow(0 24px 30px rgba(3, 14, 11, .55)); }
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.why-grid h2 { font: 620 var(--fs-8) / var(--lh-tight) var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.why-grid .aside p { color: var(--ink-2); }
.cite { border-left: 3px solid var(--needle); padding: 4px 0 4px 16px; margin-top: var(--sp-5); font-size: var(--fs-2); color: var(--ink-2); line-height: 1.7; }
.cite cite { display: block; font-style: normal; font-size: var(--fs-0); color: var(--muted); margin-top: 6px; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.who { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 28px; }
.who h3 { font: 700 var(--fs-4) / 1.4 var(--f-body); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: 10px; }
.who h3 .tag { font-size: 13.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: var(--sprout-soft); color: var(--sprout-ink); }
.who ul { list-style: none; display: grid; gap: var(--sp-4); }
.who li { font-size: var(--fs-2); line-height: 1.7; color: var(--ink-2); padding-left: 18px; position: relative; }
.who li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--sprout); }
.howto { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); counter-reset: how; }
.howto li { counter-increment: how; display: flex; flex-direction: column; }
.howto .fig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); height: 220px; display: grid; place-items: center; padding: 18px; margin-bottom: var(--sp-4); overflow: hidden; }
.howto .fig img { max-height: 184px; width: auto; }
/* 실제 캡처(landing_shot의 <picture>, P5): 안의 그림이 칸의 격자 항목이 되어 가운데에 놓인다. 확인 화면은 칸 폭에 맞춰
   화면 위쪽(제목과 확인이 필요한 문항 안내)을 보인다. */
.howto .fig picture { display: contents; }
.howto .fig .howto-shot.is-top { width: 100%; height: 184px; max-height: none; object-fit: cover; object-position: top; border-radius: 6px; }
.howto .fig.is-paper { background: var(--omr-soft); border-color: #efcbc1; }
.howto h3 { font: 700 var(--fs-4) / 1.45 var(--f-body); display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; margin-bottom: 6px; }
.howto h3::before { content: counter(how); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--needle); color: #fff; font-size: 13px; }
.howto p { margin: 0 0 0 40px; font-size: var(--fs-2); line-height: 1.7; color: var(--ink-2); }
.review-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.review-grid h2 { font: 620 var(--fs-7) / 1.28 var(--f-display); letter-spacing: -0.02em; margin-bottom: var(--sp-4); }
.review-grid .aside p { color: var(--ink-2); }
.tips-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-5); }
.tips { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 32px; }
.tips h2, .privacy-box h2 { font: 620 var(--fs-6) / 1.3 var(--f-display); margin-bottom: var(--sp-5); }
.tip-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.tip-list li { font-size: var(--fs-2); line-height: 1.65; color: var(--ink-2); }
.tip-list b { display: block; color: var(--board); font-size: var(--fs-3); margin-bottom: 2px; }
.privacy-box { background: var(--board); color: var(--chalk); border-radius: var(--r-panel); padding: 32px; }
.privacy-box h2 { color: var(--chalk); }
.privacy-box ul { list-style: none; display: grid; gap: var(--sp-4); }
.privacy-box li { padding-left: 18px; position: relative; font-size: var(--fs-2); line-height: 1.7; color: var(--chalk-dim); }
.privacy-box li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--chalk-yellow); }
.privacy-box a { color: var(--chalk); }
.privacy-box a:hover { color: var(--chalk-yellow); }
.privacy-more { margin: 20px 0 0; font-size: var(--fs-1); color: var(--chalk-dim); }
.doc-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 64px; align-items: start; }
.doc-toc { position: sticky; top: 24px; font-size: var(--fs-1); }
.doc-toc h2 { font: 700 var(--fs-1) / 1.4 var(--f-body); color: var(--muted); margin-bottom: var(--sp-3); }
.doc-toc ol { list-style: none; display: grid; gap: 8px; border-left: 2px solid var(--line); padding-left: 14px; }
.doc-toc a { color: var(--ink-2); text-decoration: none; }
.doc-toc a:hover { color: var(--sprout); text-decoration: underline; }
.doc-section { padding: var(--sp-6) 0; border-top: 1px solid var(--line); }
.doc-section:first-of-type { border-top: 0; padding-top: 0; }
.doc-section h2 { font: 620 var(--fs-6) / 1.3 var(--f-display); margin-bottom: var(--sp-3); }
.doc-section h3 { font: 700 var(--fs-3) / 1.45 var(--f-body); color: var(--board); margin: var(--sp-5) 0 6px; }
.doc-section p { color: var(--ink-2); }
.doc-section ul { list-style: none; display: grid; gap: 8px; margin-bottom: var(--sp-4); }
.doc-section ul > li { padding-left: 18px; position: relative; color: var(--ink-2); line-height: 1.7; }
.doc-section ul > li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; border: 1.5px solid var(--line-strong); border-radius: 2px; }
.doc-section ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: 8px; margin-bottom: var(--sp-4); color: var(--ink-2); }
.key-dl dt, .contact-dl dt { font-weight: 700; color: var(--board); margin-top: var(--sp-3); }
.key-dl dd, .contact-dl dd { margin: 4px 0 0; color: var(--ink-2); line-height: 1.7; }
.doc-figure { margin-top: var(--sp-5); }
.doc-figure figcaption { margin-top: 8px; font-size: var(--fs-0); color: var(--muted); }
.doc-figure .shot.is-narrow { max-width: 470px; } /* 실습 창 캡처(CSS 폭 444px)를 본문 폭으로 늘리지 않는다(P4b QA) */

/* 12. 반응형 -------------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --sp-9: 88px; }
  .hero-grid, .video-grid, .report-grid, .model-grid, .faq-grid, .cta-grid, .why-grid, .review-grid, .page-hero-grid, .doc-layout, .tips-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .learn-flow > li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .hero-copy { padding-bottom: 0; }
  .hero-visual { padding-bottom: 150px; }
  .hero-visual.is-shot { padding-bottom: 24px; }
  .report-note { padding-right: 0; margin-top: 96px; }
  .report-stage.is-shot .report-note { margin-top: 14px; }
  .report-aside, .doc-toc { position: static; }
  .report-aside, .video-copy { display: contents; }
  .report-grid, .video-grid { gap: 0; }
  .report-aside > h2, .video-copy > h2 { order: 1; }
  .report-lead, .video-lead { order: 2; margin-bottom: var(--sp-6); }
  .report-stage, .video-frame { order: 3; }
  .key-list { order: 4; margin-top: var(--sp-8); }
  .report-more { order: 5; }
  .caption-note { order: 4; margin-top: var(--sp-5); }
  .transcript { order: 5; }
  .ways-grid, .makers-grid, .who-grid { grid-template-columns: minmax(0, 1fr); }
  .howto { grid-template-columns: 1fr 1fr; }
  .cta-final .btn-row { justify-content: flex-start; }
  .cta-final .sub-link { text-align: left; }
  .compare-foot { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}
@media (max-width: 640px) {
  /* 휴대전화 공개 페이지의 절 여백. 뒤에 읽는 이 파일의 980px 규칙(88px)이 app.css의 휴대전화 값을 덮고 있어
     여기서 다시 정한다. 48px은 .band-tight(--sp-8)와 같다: 휴대전화 랜딩 높이 예산(11,500px, 글자 확대 전 10,000px) 안에 실습 창 캡처를
     한 장 두려고 64px에서 줄였다(P4b 수정 1). */
  :root { --sp-9: 48px; }
  .m-hide { display: none; }
  .m-only { display: block; }
  .hero { --hero-paper: 150px; padding-top: var(--sp-6); }
  .hero-copy { padding-top: 0; }
  .hero h1 { margin-bottom: var(--sp-4); }
  .hero-lead { font-size: var(--fs-3); margin-bottom: var(--sp-5); }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero-visual { padding-bottom: 24px; }
  .hero-caption { position: static; width: auto; margin-top: 16px; }
  .report-note { margin-top: 18px; }
  .section-head { margin-bottom: var(--sp-6); }
  .section-head p, .report-aside > p, .cta-final p, .page-hero .lead { font-size: var(--fs-3); }
  .key-list { margin-top: var(--sp-5); }
  .key-list p, .key-list .key { display: none; }
  .key-list li { grid-template-columns: minmax(0, 1fr); }
  .way { padding: 24px 20px; }
  /* 두 방식 카드(종이 진단 켜짐, P5): 휴대전화 랜딩 높이 예산(11,500px, 글자 확대 전 10,000px) 안에 두려고 카드 설명을 줄인다. 온라인 카드는 제목과
     단추만(문항 수와 바로 나오는 보고서는 첫 화면과 보고서 절이 말한다), 종이 카드는 무엇을 하는지(.way-lead)와 로그인·인터넷
     안내(.note)만 둔다(사진을 보관하지 않는다는 문장은 넓은 화면과 자주 묻는 질문에 있다). 절 머리글이 같은 문항·같은
     보고서라고 말한다. */
  .ways-grid:not(.is-single) .way-online .way-copy > p, .ways-grid:not(.is-single) .way-offline .way-flow { display: none; }
  .ways-grid.is-single .way { grid-template-columns: minmax(0, 1fr); }
  .ways-grid.is-single .btn-row { flex-direction: row; align-items: center; }
  .shot-pair { grid-template-columns: minmax(0, 1fr); }
  .shot { padding: 8px; }
  .compare-wrap { display: none; }
  .compare-cards { display: grid; }
  .model-flow { grid-template-columns: minmax(0, 1fr); }
  .model-join { justify-content: center; height: 40px; }
  .model-join svg { width: 40px; height: 40px; transform: rotate(90deg); }
  .maker { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 14px; }
  .faq-item summary { font-size: var(--fs-3); padding: 18px 0; }
  .howto { grid-template-columns: minmax(0, 1fr); }
  .howto .fig { height: 200px; }
  .howto .fig .howto-shot.is-top { height: 164px; }
  .tip-list { grid-template-columns: minmax(0, 1fr); }
  .tips, .privacy-box { padding: 24px 20px; }
  .paper-set { height: 300px; }
  .levels li { font-size: 13px; }
  .course-list li { grid-template-columns: 44px minmax(0, 1fr) auto; }
}
@media (max-width: 480px) {
  /* 소개 영상 절(계획 5)은 휴대전화 폭에서 "짧은 소개 영상 보기" 단추 한 줄로 접어 둔다. 390px 랜딩 높이 예산(지금 11,500px, 이 결정 때 10,000px)(영상 절
     없이 9,891px, 종이 진단 켬)에 펼친 영상 절(약 620px)이 들어가지 않는다. 단추는 글과 재생기를 모두 담는 틀(#video-player,
     tabindex="-1")로 가는 링크라, 누르면 그 틀이 :target이 되어 제목·재생기·자막 안내·대본이 펼쳐지고 포커스가 틀의 처음에 온다
     (:has()를 쓰지 않는다). 다른 조각 링크로 옮겨 :target이 풀려도 js/intro-video.js가 붙인 is-open으로 펼친 채 둔다(재생 중인
     영상이 숨지 않게). 481px 이상(1280 화면의 200% 확대인 640px 포함)은 늘 펼친 채다(docs/design/intro-video.md 6절). */
  .video-band { padding-top: 8px; padding-bottom: 8px; }
  .video-band .video-copy > *, .video-band .video-frame { display: none; }
  .video-band .video-open { display: block; order: 0; }
  .video-band .video-open .btn { width: 100%; }
  .video-grid:target .video-open, .video-grid.is-open .video-open { display: none; }
  .video-grid:target .video-copy > h2, .video-grid.is-open .video-copy > h2 { display: block; }
  .video-grid:target .video-copy > .caption-note, .video-grid.is-open .video-copy > .caption-note { display: flex; }
  .video-grid:target .video-copy > .transcript, .video-grid.is-open .video-copy > .transcript { display: block; }
  .video-grid:target .video-frame, .video-grid.is-open .video-frame { display: block; margin-top: var(--sp-4); }
}

/* 13. 모션: 랜딩에는 움직임이 없다(예시 화면은 실제 캡처 그림, P4b. 종이 소개 페이지의 확인 화면·답안지도 실제 캡처, P5). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}