/* ==========================================================================
   GA Deck Kit v1 — deck.css
   발표형 HTML(제안서·소개서)의 공통 틀. 덱 파일에는 내용만 두고 이 파일을 링크한다.
   - 1440×810 슬라이드를 화면에 맞춰 축소, 모바일(≤680px)은 세로 읽기, 인쇄는 1장=1쪽
   - 색은 :root 토큰만 바꾸면 전체가 따라간다. .dark 장은 토큰을 다시 정의해 부품이 자동으로 바뀐다
   - 부품 목록과 쓰는 법: starter.html (이 폴더의 상위) · docs/deck-kit/claude-guide.md
   v1 안에서는 클래스 이름을 지우거나 뜻을 바꾸지 않는다(이미 게시된 덱이 깨진다). 깨지는 변경은 v2 로.
   ========================================================================== */

:root{
  --ink:#10253a;--muted:#607386;--accent:#18a6b8;--accent-2:#58d574;
  --paper:#f5f8fa;--surface:#fff;--line:#d8e3e9;--night:#0d273b;
  --tint:#e6f5ee;--tint-line:#afd4c5;--tint-ink:#256457;
  --deep:#20523c;--deep-ink:#e3f2e8;--deep-muted:#acd3c2;
  --warn:#fff6e8;--warn-line:#e8d6b4;--warn-ink:#846137;
  --chrome:#fff;--chrome-line:#d6dfdc;--backdrop:#e8eeeb;
  --font:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  --scale:1;--shadow:0 20px 70px #101f2e18
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font);color:var(--ink);background:var(--backdrop)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0}
button,a,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #dba829;outline-offset:4px}
em{font-style:normal;color:var(--accent)}
a{color:var(--accent)}

/* ---------- 껍데기: 상단 도구 · 무대 · 하단 이동 (deck.js 가 만든다) ---------- */
.toolbar{height:64px;padding:0 28px;display:flex;justify-content:space-between;align-items:center;background:var(--chrome);border-bottom:1px solid var(--chrome-line);gap:14px;z-index:10;flex-shrink:0}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;font-size:16px;letter-spacing:.9px;white-space:nowrap}
.brand img{height:35px;width:auto}
.brand small{font-size:11px;font-weight:600;color:var(--muted);border-left:1px solid var(--line);padding-left:12px;letter-spacing:1px}
.tools{display:flex;gap:5px;align-items:center}
.tool{background:transparent;border-radius:7px;font-size:13px;padding:9px 12px;min-height:38px;font-weight:600;white-space:nowrap}
.tool:hover{background:#eef4f1}
.tool.accent-tool{background:#e1f5ed;color:#066854}
.viewport{padding:18px;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:auto}
.stage{width:calc(1440px * var(--scale));height:calc(810px * var(--scale));position:relative}
.bottom-nav{height:58px;background:var(--chrome);border-top:1px solid var(--chrome-line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:16px;flex-shrink:0;z-index:10}
.section-label{font-size:12px;font-weight:700;letter-spacing:.6px;color:#537164}
.nav-hint{font-size:12px;color:#7b8d85}
.nav-controls{display:flex;gap:13px;align-items:center}
.nav-controls button{background:#edf3ef;border-radius:7px;padding:8px 17px;font-size:15px;min-width:46px;min-height:36px}
.nav-controls button:hover{background:#dceee2}
.nav-controls button:disabled{opacity:.35;cursor:default}
.slide-counter{font-size:14px;font-variant-numeric:tabular-nums;color:#4c6b5d;min-width:76px;text-align:center;background:transparent!important}
.progress{height:3px;background:#cfdfd6;position:absolute;bottom:58px;left:0;right:0;z-index:11}
.progress i{display:block;height:100%;background:#258163;width:0;transition:width .15s}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:#163d31;color:#fff;padding:13px 19px;border-radius:8px;box-shadow:var(--shadow);font-size:14px;z-index:1000;display:none;max-width:85vw}
.toast.show{display:block}
.deck-audit{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:1001;background:#e8f6ee;color:#13684d;border:1px solid #b8d5c8;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:650;box-shadow:var(--shadow);cursor:pointer;max-width:90vw}
.deck-audit.bad{background:#fff4df;color:#816330;border-color:#e8d6b4}

/* ---------- 슬라이드 틀 ---------- */
.slide{width:1440px;height:810px;background:var(--paper);color:var(--ink);position:relative;padding:54px 60px 76px;display:flex;flex-direction:column;gap:25px;box-shadow:var(--shadow);isolation:isolate;overflow:hidden;flex-shrink:0}
.slide:before{content:"";position:absolute;width:80px;height:5px;left:60px;top:0;background:var(--accent)}
.js body{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.js:not(.review) .slide{display:none;position:absolute;left:0;top:0;transform:scale(var(--scale));transform-origin:top left}
.js:not(.review) .slide.active{display:flex}
.slide-head{flex-shrink:0}
.eyebrow{font-size:14px;letter-spacing:2.1px;font-weight:750;color:var(--accent);margin-bottom:15px;text-transform:uppercase}
.slide h2{font-size:49px;font-weight:750;letter-spacing:-2px;line-height:1.22;margin:0;word-break:keep-all}
.slide h3{font-size:26px;line-height:1.3;letter-spacing:-.75px;margin:0 0 15px;word-break:keep-all}
.slide p{font-size:22px;line-height:1.6;margin:0;color:var(--muted);word-break:keep-all}
.slide .subtitle{font-size:23px;margin:17px 0 0}
.slide-body{display:flex;flex-direction:column;gap:22px;flex:1;min-height:0}
.slide-footer{position:absolute;left:60px;right:60px;bottom:23px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:12px;min-height:26px}
.slide-footer>span:first-child{display:flex;gap:7px;align-items:center;flex-wrap:wrap;flex:1}
.footnote{font-size:14px;color:var(--muted);line-height:1.45}
.folio{font-size:12px;letter-spacing:1.2px;font-weight:650;white-space:nowrap;display:flex;align-items:center;gap:12px;color:var(--muted);text-transform:uppercase}
.folio i{width:17px;height:1px;background:var(--muted)}
.notes{display:none}

/* 표지 · 어두운 장. 어두운 장은 토큰을 다시 정의해 안의 부품이 따라 바뀐다 */
.cover{padding-top:62px}
.cover h2{font-size:65px;line-height:1.25;letter-spacing:-3px;max-width:1250px}
.cover .eyebrow{margin-bottom:26px;letter-spacing:3px}
.dark{--paper:var(--night);--ink:#eef5f5;--line:#334757;--muted:#b3c3cd;--accent:var(--accent-2);
  --surface:#1b3144;--tint:#1e4a48;--tint-line:#598779;--tint-ink:#abefdc;--deep:#1b3b48;--deep-ink:#d8e8ec;--deep-muted:#91d3bb}
.dark:after{content:"";position:absolute;right:-260px;top:-180px;width:750px;height:750px;border:1px solid #2a4b56;border-radius:50%;z-index:-1;box-shadow:0 0 0 95px #2a4b561e,0 0 0 190px #2a4b5612;pointer-events:none}
.dark:before{background:var(--accent-2)}

/* ---------- 글자 도구 ---------- */
.lead{font-size:27px!important;line-height:1.65!important}
.small{font-size:17px!important;line-height:1.6!important}
.muted{color:var(--muted)}
.mt-auto{margin-top:auto}
.center{text-align:center}
.ref{font-size:13px;padding:3px 7px;border:1px solid var(--tint-line);border-radius:5px;background:var(--tint);color:var(--tint-ink);white-space:nowrap}
button.ref{cursor:pointer}
.pill{display:inline-flex;align-items:center;width:max-content;max-width:100%;font-size:15px;font-weight:700;border-radius:5px;padding:7px 10px;background:var(--tint);border:1px solid var(--tint-line);color:var(--tint-ink);letter-spacing:.2px}
.tags{display:flex;gap:10px;flex-wrap:wrap}
.tags span{font-size:17px;padding:9px 14px;border:1px solid var(--line);border-radius:20px;color:var(--muted)}
.link-btn{align-self:flex-start;display:inline-flex;margin-top:auto;color:var(--accent);background:transparent;font-size:17px;font-weight:700;padding:8px 0}
.lead-line{font-size:25px;text-align:center;color:var(--muted);line-height:1.5}
.lead-line strong{color:var(--accent)}

/* ---------- 배치 ---------- */
.grid2,.grid3,.grid4{display:grid;gap:22px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;flex:1;min-height:0}
.split.rev{grid-template-columns:1fr 1.35fr}
.split.wide{grid-template-columns:2.25fr 1fr;gap:38px}
.split.middle{align-items:center}
.fill{flex:1;min-height:0}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ---------- 카드 ---------- */
.card{background:var(--surface);border:1px solid var(--line);padding:30px;border-radius:13px;display:flex;flex-direction:column;min-width:0}
.card.accent{background:var(--tint);border-color:var(--tint-line);color:inherit}
.card.caution{background:var(--warn);border-color:var(--warn-line)}
.card.deep{background:var(--deep);border-color:var(--deep);color:var(--deep-ink)}
.card.deep p{color:var(--deep-muted)}
.card p{margin-bottom:25px}
.card p:last-child{margin-bottom:0}
.card-bottom{border-top:1px solid var(--line);margin-top:auto;padding-top:19px;font-size:18px;line-height:1.4;color:var(--muted)}
.step-num{font-size:47px;color:var(--accent);font-weight:550;margin-bottom:23px;line-height:1}
.label{font-size:14px;letter-spacing:.6px;font-weight:700;color:var(--muted);margin-bottom:17px;text-transform:uppercase}
.stat{font-size:77px;font-weight:650;letter-spacing:-3px;line-height:1.1;margin-bottom:22px;font-variant-numeric:tabular-nums;color:var(--accent)}
.stat span{font-size:32px;letter-spacing:-1px;margin-left:4px}
.card.caution .stat{color:#a77626}
.tick{border-left:3px solid #6bad87;padding:4px 18px;display:flex;flex-direction:column;gap:8px}
.tick b{font-size:18px;color:var(--tint-ink)}
.tick span{font-size:19px;color:var(--muted);line-height:1.5}

/* 한 줄 강조: b(머리) + span(설명). .deep 은 진한 띠 */
.statement{display:flex;align-items:center;gap:27px;padding:21px 26px;border:1px solid var(--tint-line);background:var(--tint);border-radius:10px;font-size:21px;line-height:1.5}
.statement b{color:var(--accent);white-space:nowrap}
.statement span{color:var(--muted)}
.statement.deep{background:var(--deep);border-color:var(--deep);color:var(--deep-ink)}
.statement.deep b{color:var(--accent-2)}
.statement.deep span{color:var(--deep-muted)}

/* ---------- 숫자 ---------- */
/* 큰 숫자 줄: <div class="figures"><div><span>라벨</span><b>4.2<small>억원</small></b></div>… */
.figures{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--tint-line);background:var(--tint);border-radius:11px;padding:24px 0}
.figures>div{padding:0 28px;border-right:1px solid var(--tint-line);display:flex;flex-direction:column;gap:10px}
.figures>div:last-child{border:0}
.figures span{font-size:18px;color:var(--muted)}
.figures b{font-size:44px;font-weight:650;line-height:1;letter-spacing:-1.5px;color:var(--tint-ink);font-variant-numeric:tabular-nums}
.figures small{font-size:20px;margin-left:8px;font-weight:500;letter-spacing:0}
.figures.plain{background:transparent;border:0;padding:0;gap:30px}
.figures.plain>div{border:0;border-top:2px solid #74b591;padding:23px 0 0}

/* 막대: <div class="bars"><div class="bar"><div><span>항목</span><strong>50%</strong></div><div class="track"><i style="width:50%"></i></div></div> */
.bar{margin-bottom:35px}
.bar>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:24px}
.bar strong{font-size:42px;font-weight:650;color:var(--accent);font-variant-numeric:tabular-nums}
.track{height:25px;background:#e4ece8;border-radius:5px;overflow:hidden}
.track i{display:block;height:100%;background:#178675;border-radius:5px}
.track i.dim{background:#6c8991}

/* 항목·값 목록: <div class="kv"><div><span>항목</span><b>값</b></div>… .sum/.total 줄 강조 */
.kv{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface)}
.kv>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px;border-bottom:1px solid var(--line);flex:1}
.kv>div:last-child{border-bottom:0}
.kv span{font-size:18px;color:var(--muted)}
.kv b{font-size:32px;white-space:nowrap;font-weight:650;font-variant-numeric:tabular-nums}
.kv small{font-size:18px;margin-left:6px;font-weight:500}
.kv .sum{background:var(--tint)}
.kv .total{background:var(--deep);color:var(--deep-ink)}
.kv .total span{color:var(--deep-muted)}
.kv .total b{font-size:41px}
.kv.lines{border:0;border-radius:0;background:transparent}
.kv.lines>div{padding:18px 0}

/* ---------- 흐름 · 단계 ---------- */
/* 가로 흐름: 상자(span 또는 .card) 사이에 <b>→</b>. 끊긴 곳은 <b class="break">×</b> */
.flow{display:flex;gap:13px;align-items:stretch;flex:1}
.flow>:not(b){flex:1;min-width:0}
.flow>span{padding:21px 15px;background:#e9eeeb;border:1px solid #d5ded8;border-radius:9px;font-size:21px;line-height:1.45;text-align:center;font-weight:650;display:flex;flex-direction:column;justify-content:center}
.flow>span small{display:block;font-size:17px;color:var(--muted);font-weight:400;margin-top:4px}
.flow>b{align-self:center;color:#7a8f8b;font-size:24px;flex:0 0 auto}
.flow>b.break{color:#c58c57;font-size:35px}
.flow.hl>span{background:var(--tint);color:var(--tint-ink);border-color:var(--tint-line)}
.dark .flow>span{background:var(--surface);border-color:var(--line)}
/* 흐름 앞에 이름표: <div class="flow-row"><div class="flow-label">BEFORE</div><div class="flow">…</div></div> */
.flow-row{display:flex;align-items:center;gap:23px;padding:12px 0}
.flow-label{width:110px;font-size:15px;color:var(--muted);font-weight:800;letter-spacing:1.2px;flex-shrink:0;line-height:1.4}
.flow-row.hl .flow-label{color:var(--accent)}

/* 단계 카드: 열 수는 자식 수만큼 자동. <div class="steps"><div><span>01</span><h3>…</h3><p>…</p><small>…</small></div>… */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:13px}
.steps>*{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:25px 18px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:240px}
.steps>*>span{font-size:41px;color:var(--accent);font-weight:550;margin-bottom:21px;line-height:1}
.steps h3{font-size:25px;margin-bottom:12px}
.steps p{font-size:18px;line-height:1.5;margin-bottom:18px}
.steps small{font-size:13px;color:var(--muted);margin-top:auto}
.steps>.focus{background:var(--tint);border-color:var(--tint-line)}

/* 세로 경로: <div class="path"><div class="node"><small>01</small><b>제목</b><span>설명</span></div><i>↓</i>… .end 는 도착점 */
.path{display:flex;flex-direction:column;gap:6px}
.path .node{border:1px solid var(--line);border-radius:10px;padding:17px 23px;display:grid;grid-template-columns:80px 1fr;gap:4px 10px;background:var(--surface);align-items:center}
.path .node small{grid-row:span 2;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:1px}
.path .node b{font-size:24px;letter-spacing:-.3px}
.path .node span{font-size:17px;color:var(--muted)}
.path .node.end{background:#d8f9e9;color:#153f3a;border-color:#91cfb7}
.path .node.end span,.path .node.end small{color:#396c60}
.path>i{text-align:center;font-size:21px;color:#6c9e9f;line-height:1;font-style:normal}

/* 번호 목록 줄: <div class="rows"><div><i>01</i><b>제목</b><span>설명</span></div>… (button 으로 쓰면 data-detail 연결) */
.rows{display:flex;flex-direction:column;gap:8px}
.rows>*{display:grid;grid-template-columns:38px 170px 1fr auto;gap:13px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);padding:14px 20px;border-radius:8px;min-height:56px;font-size:19px;width:100%}
.rows>button:hover{background:var(--tint);border-color:var(--tint-line)}
.rows i{font-style:normal;font-size:16px;color:#59927e}
.rows b{font-size:20px}
.rows span{font-size:18px;color:var(--muted)}
.rows>button:after{content:"↗";color:var(--accent)}

/* 일정표: 첫 열은 이름, 나머지는 기간. 진하기 .lv1~.lv4 */
.roadmap{display:grid;grid-template-columns:150px repeat(var(--cols,4),1fr);gap:12px;align-items:center}
.roadmap>b{font-size:18px;color:var(--muted);text-align:center}
.roadmap>b:first-child{text-align:left}
.roadmap>strong{font-size:21px;padding:11px 0}
.roadmap>span{text-align:center;font-size:20px;color:var(--muted);padding:16px 8px;line-height:1.4;border-radius:8px}
.roadmap .lv1{background:#e3ece6;color:#41664a;font-weight:700}
.roadmap .lv2{background:#cfe9d9;color:#326849;font-weight:700}
.roadmap .lv3{background:#9ccdba;color:#1c5a3b;font-weight:700}
.roadmap .lv4{background:#245c45;color:#e6f5e9;font-weight:700}

/* ---------- 표 ---------- */
/* 모바일에서는 줄마다 카드로 바뀐다. 열 이름은 th 에서 자동으로 붙는다(deck.js). 표 모양을 지키려면 table.keep-table.
   모바일 규칙은 :where() 로 세기를 .slide td 와 같게 둔다 — 덱의 <style> 이 같은 세기로 덮을 수 있게 */
.slide table{border-collapse:collapse;width:100%;font-size:21px;line-height:1.5;align-self:start}
.slide th{text-align:left;background:var(--tint);color:var(--tint-ink);padding:13px 17px;font-size:17px;font-weight:700}
.slide td{border-bottom:1px solid var(--line);padding:16px 17px;vertical-align:middle;color:var(--muted)}
.slide td b,.slide td strong{color:var(--ink);font-weight:700}
.slide td.hl{color:var(--tint-ink);background:var(--tint)}
.slide .num{text-align:right;font-variant-numeric:tabular-nums}
.slide tr.total td{font-weight:800;background:var(--tint);color:var(--tint-ink);border:0}

/* ---------- 마무리(CTA) ---------- */
.cta{background:var(--deep);border:1px solid var(--tint-line);border-radius:13px;padding:30px;color:var(--deep-ink)}
.cta .eyebrow{margin-bottom:25px;font-size:15px}
.cta-number{font-size:61px;letter-spacing:-2px;color:#c4ffe7;font-weight:650;line-height:1;margin-bottom:28px;font-variant-numeric:tabular-nums}
.cta-number small{font-size:24px;margin-left:7px;font-weight:500;letter-spacing:0}
.cta p{font-size:26px;line-height:1.6;color:var(--deep-ink)}
.cta .grid2{gap:12px;margin-top:25px}
.cta .grid2>span{padding-left:15px;border-left:2px solid #73b69f;font-size:18px;color:var(--deep-muted)}

/* ---------- 그림 (2026-10-14 추가) ---------- */
/* 화면 캡처: <figure class="shot"><img src="…" alt="…"><figcaption>설명</figcaption></figure> — 비율을 지켜 칸 안에 들어간다.
   .plain 은 테두리 · 그림자 없이(투명 배경 그림) */
.slide img{max-width:100%}
.shot{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.shot img{display:block;width:auto;max-width:100%;height:auto;max-height:460px;border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:var(--shadow)}
.shot.plain img{border:0;border-radius:0;background:transparent;box-shadow:none}
.shot figcaption{font-size:17px;line-height:1.5;color:var(--muted)}
/* 로고 줄: <div class="logos" style="--cols:5"><img src="…" alt="회사 이름">…</div> — 어두운 장에서도 로고 칸은 흰 바탕 */
.logos{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:18px}
.logos img{display:block;width:100%;height:84px;object-fit:contain;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:10px}

/* ---------- 참고자료 목록 (deck.js 가 deck-sources 로 채운다) ---------- */
.source-index{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px}
.source-index>button{width:100%;display:flex;align-items:center;gap:16px;padding:17px 19px;background:var(--surface);border:1px solid var(--line);border-radius:9px;text-align:left;min-height:92px}
.source-index>button:hover{background:var(--tint);border-color:var(--tint-line)}
.source-id{font-size:15px;font-weight:800;color:#28754f;border:1px solid #b5d7c0;padding:7px;border-radius:5px}
.source-index b{display:block;font-size:20px;margin-bottom:5px}
.source-index small{display:block;color:var(--muted);font-size:14px}
.source-index>button:after{content:"↗";margin-left:auto;font-size:20px;color:#59896d}

/* ---------- 창(dialog) ---------- */
dialog{border:1px solid #c6d8cb;border-radius:16px;padding:0;background:#f8faf8;color:#142c20;box-shadow:0 25px 110px #00150f55;max-width:calc(100vw - 36px);max-height:calc(100dvh - 44px);width:840px}
dialog::backdrop{background:#0a1e2b99;backdrop-filter:blur(3px)}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;background:#fff;border-bottom:1px solid #dce5dd;padding:23px 28px;position:sticky;top:0;z-index:2}
.modal-header h3{font-size:24px;line-height:1.35;margin:0;letter-spacing:-.6px;word-break:keep-all}
.modal-header .eyebrow{font-size:11px;margin-bottom:8px;color:#18a6b8}
.close-btn{padding:4px 10px;background:#eef4ef;font-size:23px;line-height:1.3;border-radius:7px;color:#496450;min-width:35px;flex-shrink:0}
.modal-content{padding:26px 28px;overflow-wrap:anywhere}
.modal-content p{font-size:16px;line-height:1.75;margin:8px 0 20px;color:#4f6558;word-break:keep-all}
.modal-content h4{font-size:14px;letter-spacing:.3px;color:#22694a;margin:20px 0 8px}
.modal-content h4:first-child{margin-top:0}
.modal-content ul{font-size:16px;line-height:1.75;color:#4f6558;padding-left:20px}
.modal-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.modal-meta span{font-size:12px;padding:6px 9px;border:1px solid #c8ddce;background:#edf4ef;border-radius:5px;color:#386d4d}
.source-link{display:inline-block;color:#fff!important;background:#1b7854;text-decoration:none;padding:12px 18px;border-radius:7px;font-size:16px;font-weight:700}
.source-url{display:block;word-break:break-all;font-size:12px!important;color:#5b7d69!important;margin:12px 0!important}
.source-limitation{background:#fff5e4;border-left:3px solid #d0a653;border-radius:0 8px 8px 0;padding:16px 19px;margin-top:18px}
.source-limitation p{margin:0;font-size:15px;color:#7c684b}
.source-limitation h4{color:#946a28;margin:0 0 8px}
.modal-callout{padding:16px 20px;background:#e6f3e9;border-radius:8px;font-size:16px!important;color:#3d654a!important}
.source-list-item{padding:16px 0;border-bottom:1px solid #dde6df;display:flex;gap:18px;align-items:flex-start}
.source-list-item button{font-size:16px;font-weight:650;color:#29694a;text-align:left;background:transparent;padding:0}
.source-list-item p{font-size:13px!important;margin:7px 0 0!important}
.source-list-item small{font-size:12px;color:#718578}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 25px}
.detail-grid>div{padding:15px 18px;border:1px solid #d5e4d9;border-radius:8px;background:#fff}
.detail-grid h4{margin:0 0 8px}
.detail-grid p{margin:0}
.modal-intro{font-size:22px!important;color:#235d3c!important;font-weight:650}
.note-body{font-size:19px!important;line-height:1.9!important;white-space:pre-line}
.toc-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.toc-item{display:flex;gap:13px;text-align:left;padding:13px;border:1px solid #d7e4db;border-radius:8px;background:#fff;align-items:flex-start;line-height:1.4}
.toc-item:hover,.toc-item.selected{background:#dff1e7;border-color:#85b99a}
.toc-item>span{font-size:13px;color:#2c7350;font-weight:800;padding-top:1px}
.toc-item strong{font-size:14px;font-weight:600;word-break:keep-all}
.toc-separator{grid-column:1/-1;font-size:13px;letter-spacing:1px;color:#6b8573;padding:12px 0 5px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.menu-grid button{padding:18px 12px;background:#e9f4ed;border:1px solid #cee2d5;border-radius:8px;color:#2f6345;font-size:17px;font-weight:650}
.help-table{border-collapse:collapse;width:100%}
.help-table th,.help-table td{font-size:15px;padding:12px;text-align:left;border-bottom:1px solid #dce4df}
.share-input{width:100%;border:1px solid #c8d9d1;border-radius:8px;background:#f6faf8;padding:13px 14px;font-size:15px;color:#17352b;margin:12px 0 18px}
.share-actions{display:flex;gap:9px;flex-wrap:wrap}
.share-actions button{border:1px solid #b8d5c8;background:#e8f6ee;border-radius:8px;padding:12px 16px;color:#13684d;font-weight:650}
.share-status{margin:16px 0;padding:14px 16px;background:#e8f4ed;border:1px solid #b9d6c5;border-radius:8px;color:#234e3b;font-size:15px;line-height:1.7}

/* ---------- 스크립트 없이 · 전체 스크롤 보기 ---------- */
.no-js .viewport{display:block;padding:0}
.no-js .stage{width:auto;height:auto}
.no-js .slide{margin:25px auto;width:min(1440px,100%);height:auto;min-height:810px;overflow:visible;padding-bottom:110px}
.no-js .slide-footer{position:static;margin-top:20px}
.review body{display:block;height:auto;overflow:auto}
.review .toolbar{position:sticky;top:0}
.review .viewport{display:block;padding:28px 18px}
.review .stage{width:min(1440px,100%);height:auto;margin:auto;display:flex;flex-direction:column;gap:30px}
.review .slide{width:100%;height:auto;min-height:810px;padding-bottom:38px;overflow:visible;scroll-margin-top:82px}
.review .slide-footer{position:static;margin-top:auto;padding-top:20px}
.review .bottom-nav{position:sticky;bottom:0}
.review .progress{display:none}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media (max-width:900px){
  .toolbar{padding:0 17px;height:58px}
  .brand small,.hide-mid,.nav-hint{display:none}
  .tool{font-size:12px;padding:8px 10px}
  .bottom-nav{padding:0 17px}
  .section-label{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* 모바일: 축소하지 않고 현재 장을 세로로 읽는다 */
@media (max-width:680px){
  html,body{background:#f6f8f7}
  .toolbar{height:57px;gap:5px;padding:0 12px}
  .brand img{height:26px}
  .tools{gap:0}
  .tool{font-size:12px;padding:8px;min-height:37px}
  .hide-mobile{display:none}
  .viewport{display:block;overflow-y:auto;overflow-x:hidden;padding:0;overscroll-behavior-y:contain}
  .stage{width:100%!important;height:auto!important;min-height:100%}
  .slide,.js:not(.review) .slide{width:100%;height:auto;min-height:100%;padding:29px 22px 23px;position:relative;transform:none!important;overflow:visible;box-shadow:none;gap:23px}
  .slide:before{left:22px;width:45px;height:4px}
  .slide .eyebrow{font-size:10px;letter-spacing:1.4px;margin-bottom:12px}
  .slide h2,.cover h2{font-size:32px;line-height:1.35;letter-spacing:-1.5px}
  .slide h2 br,.lead br{display:none}
  .slide h3{font-size:23px;letter-spacing:-.6px;margin-bottom:12px}
  .slide p{font-size:17px;line-height:1.75}
  .slide .subtitle{font-size:17px}
  .lead{font-size:20px!important;line-height:1.8!important}
  .small{font-size:14px!important}
  .slide-body{gap:22px;flex:none}
  .slide-footer{position:static;align-items:flex-start;margin-top:13px;padding-top:14px;gap:12px}
  .folio{font-size:10px;gap:5px}
  .folio i{display:none}
  .footnote{font-size:11px;line-height:1.7}
  .ref{font-size:10px;padding:4px 6px}
  .dark:after{right:-430px;top:60px;opacity:.6}
  .grid2,.grid3,.grid4,.split,.split.rev,.split.wide{grid-template-columns:1fr;gap:15px}
  .card{padding:24px;min-height:0}
  .card p{font-size:17px;margin-bottom:20px}
  .card-bottom{font-size:14px;padding-top:16px}
  .step-num{font-size:35px;margin-bottom:20px}
  .stat{font-size:62px;letter-spacing:-2px;margin-bottom:20px}
  .stat span{font-size:27px}
  .label{font-size:12px}
  .pill{font-size:12px;padding:6px 9px}
  .tags span{font-size:12px;padding:7px 10px}
  .link-btn{font-size:15px}
  .lead-line{font-size:20px;line-height:1.7;text-align:left}
  .tick span{font-size:16px}
  .statement{flex-direction:column;align-items:flex-start;gap:9px;padding:19px 20px;font-size:17px;line-height:1.7}
  .statement b{white-space:normal}
  .figures{grid-auto-flow:row;grid-template-columns:1fr 1fr;padding:8px}
  .figures>div{padding:17px 13px;border:0}
  .figures.plain{gap:20px;padding:0}
  .figures.plain>div{padding:17px 0 0}
  .figures span{font-size:14px}
  .figures b{font-size:32px}
  .figures small{font-size:15px;margin-left:5px}
  .bar{margin-bottom:25px}
  .bar>div:first-child{font-size:18px;margin-bottom:11px}
  .bar strong{font-size:32px}
  .track{height:19px}
  .kv>div{padding:15px 18px}
  .kv span{font-size:15px}
  .kv b{font-size:26px}
  .kv .total b{font-size:32px}
  .flow{flex-direction:column;gap:6px}
  .flow>span{padding:12px 18px;font-size:17px;text-align:left}
  .flow>span br{display:none}
  .flow>b{transform:rotate(90deg);font-size:20px;line-height:20px}
  .flow-row{flex-direction:column;align-items:stretch;gap:12px;padding:0}
  .flow-label{width:auto;font-size:12px}
  .steps{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:12px}
  .steps>*{padding:20px 17px;min-height:0}
  .steps>*>span{font-size:32px;margin-bottom:16px}
  .steps h3{font-size:20px}
  .steps p{font-size:15px;line-height:1.65}
  .path .node{padding:14px 16px;grid-template-columns:63px 1fr}
  .path .node b{font-size:20px}
  .path .node span{font-size:13px}
  .rows>*{grid-template-columns:28px 1fr auto;gap:7px 10px;padding:15px 16px}
  .rows i{grid-row:span 2;align-self:start;padding-top:3px;font-size:13px}
  .rows b{font-size:18px}
  .rows span{font-size:15px;grid-column:2;line-height:1.6}
  .rows>button:after{grid-column:3;grid-row:1}
  .roadmap{grid-template-columns:1fr 1fr;gap:8px}
  .shot img{max-height:none}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .logos img{height:60px;padding:10px 12px}
  .roadmap>b{display:none}
  .roadmap>strong{grid-column:1/-1;font-size:19px;padding:12px 0 0}
  .roadmap>span{font-size:15px;padding:12px 11px;background:#eef3ef;text-align:left;line-height:1.6}
  .roadmap>span[data-label]:before{content:attr(data-label);display:block;font-size:10px;letter-spacing:1px;opacity:.75;margin-bottom:4px}
  .slide :where(table:not(.keep-table)),.slide :where(table:not(.keep-table)) tbody{display:block}
  .slide :where(table:not(.keep-table)) thead{display:none}
  .slide :where(table:not(.keep-table)) tr{display:block;padding:16px 17px;border:1px solid var(--line);background:var(--surface);border-radius:9px;margin-bottom:13px}
  .slide :where(table:not(.keep-table)) td{display:block;border:0;font-size:16px;padding:7px 0;line-height:1.6;text-align:left!important}
  .slide :where(table:not(.keep-table)) td:first-child{font-size:19px;padding:0 0 8px}
  .slide :where(table:not(.keep-table)) td.hl{background:transparent}
  .slide :where(table:not(.keep-table)) td[data-label]:not(:first-child):before{content:attr(data-label);display:block;font-size:12px;color:#738c7b;margin-bottom:4px;font-weight:700}
  .cta{padding:25px 20px}
  .cta-number{font-size:43px;letter-spacing:-1.5px}
  .cta-number small{font-size:16px}
  .cta p{font-size:19px}
  .cta .grid2>span{font-size:15px}
  .source-index{grid-template-columns:1fr;gap:12px}
  .source-index>button{padding:17px 14px;gap:12px;min-height:0}
  .source-index b{font-size:17px;line-height:1.5}
  .source-index small{font-size:11px}
  .source-id{font-size:12px;padding:5px}
  .bottom-nav{height:60px;padding:0 14px;gap:8px}
  .section-label{font-size:10px;max-width:130px}
  .nav-controls{gap:6px}
  .nav-controls button{font-size:16px;padding:10px 12px;min-height:40px}
  .slide-counter{font-size:13px!important;min-width:65px}
  .progress{bottom:60px}
  .review .viewport{padding:0}
  .review .stage{gap:0}
  .review .slide{min-height:0;border-bottom:12px solid #dce7e0;padding-bottom:28px}
  .no-js .slide{min-height:0;margin:0;padding:29px 22px}
  .modal-header{padding:19px}
  .modal-header h3{font-size:21px;line-height:1.5}
  .modal-content{padding:22px 20px}
  .modal-content p{font-size:15px;line-height:1.85}
  .toc-grid,.menu-grid,.detail-grid{grid-template-columns:1fr}
  .note-body{font-size:17px!important}
  dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 26px);border-radius:12px}
  .toast{font-size:13px;bottom:76px;max-width:90vw;width:max-content}
}
@media (max-width:430px){.brand small{display:none}.toolbar{padding:0 10px}.tool{padding:8px 9px}}

/* 인쇄·PDF 저장: 1장 = 1쪽(15in × 8.4375in = 16:9) */
@media print{
  @page{size:15in 8.4375in;margin:0}
  html,body,.js body,.review body{display:block!important;height:auto!important;overflow:visible!important;background:#fff!important}
  .toolbar,.bottom-nav,.progress,dialog,.toast,.sr-only,.deck-audit{display:none!important}
  .viewport{padding:0!important;display:block!important;overflow:visible!important}
  .stage,.review .stage{display:block!important;width:1440px!important;height:auto!important;margin:0!important}
  .slide,.js:not(.review) .slide,.review .slide{display:flex!important;position:relative!important;width:1440px!important;height:810px!important;min-height:810px!important;max-height:810px!important;transform:none!important;padding:54px 60px 76px!important;margin:0!important;break-after:page;break-inside:avoid;box-shadow:none!important;overflow:hidden!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;border:none!important}
  .slide:last-child{break-after:auto}
  .slide-footer,.review .slide-footer{position:absolute!important;left:60px!important;right:60px!important;bottom:23px!important;padding-top:12px!important;margin:0!important}
}