/* ==========================================================
   배당 ETF로 월 400만원 — 책 요약 정리
   Light Editorial · 아이보리 + 딥그린 + 골드
   ========================================================== */

:root{
  --bg:        #FAF8F3;
  --bg2:       #F1EDE3;
  --paper:     #FFFFFF;
  --ink:       #16181A;
  --sub:       #55514A;
  --muted:     #9A9486;
  --accent:    #1F5C46;   /* deep green — 배당/현금흐름 */
  --accent-s:  #3E8467;
  --gold:      #B0852F;
  --gold-s:    #C9A557;
  --gold-soft: #D8C489;
  --red:       #A4382F;
  --line:      #E4DED0;
  --line-str:  #C7BFAC;
  --on-dark:   #F4F1E8;

  --fs-hero:   clamp(56px, 6.4vw, 128px);
  --fs-div:    clamp(40px, 4.4vw, 86px);
  --fs-title:  clamp(28px, 2.55vw, 50px);
  --fs-body:   clamp(15px, 1.02vw, 20px);
  --fs-small:  clamp(15px, .86vw, 17px);
  --fs-micro:  clamp(14px, .74vw, 15px);

  --pad-y: clamp(48px, 5vh, 84px);
  --pad-x: clamp(28px, 6.5vw, 128px);

  --ease: cubic-bezier(.22,1,.36,1);
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --serif: 'Noto Serif KR', 'Cormorant Garamond', Georgia, serif;
  --en: 'Cormorant Garamond', 'Noto Serif KR', Georgia, serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  width:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  word-break:keep-all;
  overflow-wrap:break-word;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.012em;
}
body{ overflow:hidden; }

.presentation{
  width:100vw; height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.presentation::-webkit-scrollbar{ display:none; }

.slide{
  width:100vw; height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:var(--pad-y) var(--pad-x);
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background:var(--bg);
}

/* ---------- 헤더 / 푸터 ---------- */
.slide-header{
  position:absolute; top:clamp(28px,3.4vh,54px); left:var(--pad-x); right:var(--pad-x);
  display:flex; justify-content:space-between; align-items:center;
  font-size:var(--fs-micro); color:var(--sub);
  letter-spacing:.2em; font-weight:600;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.slide-footer{
  position:absolute; bottom:clamp(24px,3vh,46px); left:var(--pad-x); right:var(--pad-x);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-size:var(--fs-micro); color:var(--muted);
  letter-spacing:.1em;
  padding-top:14px; border-top:1px solid var(--line);
}
.slide-footer .page-num{ color:var(--accent); font-weight:700; letter-spacing:.16em; flex:none; }
.slide-footer span:last-child{ text-align:right; }

.accent-line{ width:44px; height:2px; background:var(--accent); margin-bottom:26px; }

.slide-title{
  font-size:var(--fs-title); font-weight:800;
  letter-spacing:-.032em; line-height:1.18; color:var(--ink);
  margin-bottom:14px;
}
.slide-subtitle{
  font-size:var(--fs-body); color:var(--sub); font-weight:400;
  line-height:1.62; max-width:1080px; margin-bottom:clamp(22px,3.2vh,44px);
}
.panel-cap{
  font-size:var(--fs-micro); color:var(--muted);
  letter-spacing:.22em; font-weight:700; margin-bottom:16px;
}
.panel-foot{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:var(--fs-micro); color:var(--muted); line-height:1.6; letter-spacing:0;
}

/* ---------- 등장 모션 ---------- */
.slide .anim{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.slide.in-view .anim{ opacity:1; transform:none; }
.slide.in-view .anim-1{ transition-delay:.10s; }
.slide.in-view .anim-2{ transition-delay:.22s; }
.slide.in-view .anim-3{ transition-delay:.34s; }
.slide.in-view .anim-4{ transition-delay:.46s; }
.slide.in-view .anim-5{ transition-delay:.58s; }
.slide.in-view .anim-6{ transition-delay:.70s; }

/* ==========================================================
   01 · 표지
   ========================================================== */
.slide-cover{
  align-items:center; text-align:center;
  background:linear-gradient(170deg, #FCFAF6 0%, var(--bg) 46%, var(--bg2) 100%);
}
.cover-frame{
  position:absolute; inset:clamp(26px,3.6vh,54px) clamp(26px,3.4vw,64px);
  border:1px solid var(--line); pointer-events:none;
}
.cover-mark{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(18px,1.5vw,28px); color:var(--accent);
  letter-spacing:.55em; text-indent:.55em; margin-bottom:clamp(18px,2.6vh,34px);
}
.cover-eyebrow{
  font-family:var(--en); font-style:italic;
  font-size:clamp(15px,1.15vw,22px); color:var(--gold);
  letter-spacing:.3em; margin-bottom:clamp(16px,2.4vh,30px);
}
.cover-title{
  font-size:var(--fs-hero); font-weight:800;
  line-height:1.02; letter-spacing:-.048em; color:var(--ink);
  margin-bottom:clamp(18px,2.6vh,32px);
}
.cover-title .cover-figure{
  color:var(--accent);
  font-family:var(--serif); font-weight:700; letter-spacing:-.04em;
}
.cover-lede{
  font-size:var(--fs-body); color:var(--sub); line-height:1.75;
  max-width:760px; margin-bottom:clamp(20px,3vh,38px);
}
.cover-rule{ width:64px; height:1px; background:var(--gold); margin-bottom:clamp(22px,3.4vh,44px); }
.cover-meta{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px,3.4vw,64px); max-width:1000px; width:100%;
}
.cover-meta-block{ text-align:center; }
.cover-meta-block .label{
  font-size:var(--fs-micro); color:var(--gold);
  letter-spacing:.28em; font-weight:700; margin-bottom:12px;
}
.cover-meta-block .value{
  font-size:var(--fs-small); color:var(--sub); line-height:1.62; font-weight:500;
}

/* ==========================================================
   02 · 목차
   ========================================================== */
.slide-contents{ justify-content:center; }
.contents-title{
  font-size:clamp(32px,3.4vw,66px); font-weight:800;
  letter-spacing:-.04em; line-height:1.12;
  margin-bottom:clamp(26px,4vh,56px); color:var(--ink);
}
.contents-list{ display:flex; flex-direction:column; max-width:1220px; }
.contents-item{
  display:grid; grid-template-columns:96px 1fr auto;
  gap:clamp(16px,2.2vw,44px); align-items:center;
  padding:clamp(16px,2.2vh,26px) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:padding-left .35s var(--ease), background .35s var(--ease);
}
.contents-item:hover{ padding-left:14px; background:rgba(31,92,70,.035); }
.contents-item .num{
  font-family:var(--serif); font-size:clamp(34px,3vw,58px); font-weight:700;
  color:var(--accent); line-height:1; letter-spacing:-.04em;
}
.contents-item.dim .num{ color:var(--line-str); }
.contents-item .info .title-ko{
  font-size:clamp(19px,1.55vw,30px); font-weight:700;
  letter-spacing:-.025em; margin-bottom:6px; color:var(--ink);
}
.contents-item.dim .info .title-ko{ color:var(--sub); }
.contents-item .info .title-sub{
  font-size:var(--fs-small); color:var(--sub); font-weight:400; line-height:1.5;
}
.contents-item .pages{
  font-size:var(--fs-micro); color:var(--muted); letter-spacing:.18em; font-weight:600;
}
.contents-note{
  margin-top:clamp(20px,3vh,36px); max-width:900px;
  font-size:var(--fs-small); color:var(--muted); line-height:1.7;
}

/* ==========================================================
   03 / 07 · 섹션 디바이더
   ========================================================== */
.slide-divider{ background:linear-gradient(160deg, var(--bg2) 0%, var(--bg) 60%); }
.divider-bgnum{
  position:absolute; right:clamp(10px,3vw,80px); top:50%;
  transform:translateY(-50%);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(190px,26vw,500px);
  color:rgba(31,92,70,.075);
  line-height:.78; letter-spacing:-.06em; user-select:none; pointer-events:none;
}
.divider-eyebrow{
  font-family:var(--en); font-style:italic;
  font-size:clamp(16px,1.2vw,24px); color:var(--gold);
  letter-spacing:.32em; margin-bottom:18px; position:relative;
}
.divider-num{
  font-family:var(--serif); font-size:clamp(38px,3.6vw,70px); font-weight:300;
  color:var(--accent); line-height:1; margin-bottom:22px; position:relative;
}
.divider-title{
  font-size:var(--fs-div); font-weight:800;
  letter-spacing:-.042em; line-height:1.06; color:var(--ink);
  margin-bottom:26px; position:relative;
}
.divider-title .en{
  display:block; font-family:var(--en); font-style:italic; font-weight:300;
  font-size:clamp(18px,1.7vw,34px); color:var(--sub);
  letter-spacing:-.01em; margin-top:12px;
}
.divider-subtitle{
  font-size:clamp(16px,1.2vw,24px); color:var(--sub);
  line-height:1.7; max-width:720px; position:relative;
}
.divider-nav{
  position:absolute; bottom:clamp(84px,11vh,140px); left:var(--pad-x);
  display:flex; flex-wrap:wrap; gap:clamp(14px,2.2vw,40px);
}
.divider-nav-item{
  font-size:var(--fs-micro); color:var(--muted); letter-spacing:.12em;
  text-decoration:none; transition:color .3s var(--ease);
}
.divider-nav-item .nav-num{ color:var(--line-str); font-weight:700; margin-right:8px; }
.divider-nav-item.done, .divider-nav-item.done .nav-num{ color:var(--sub); }
.divider-nav-item.active, .divider-nav-item.active .nav-num{ color:var(--accent); font-weight:700; }
.divider-nav-item:hover{ color:var(--accent); }

/* ==========================================================
   04 · 필요 원금
   ========================================================== */
.equation-card{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,3.2vw,64px); align-items:stretch;
}
.equation-text{ display:flex; flex-direction:column; gap:clamp(14px,2.2vh,26px); }
.eq-step{ padding-left:22px; border-left:2px solid var(--line); }
.eq-step:nth-child(3){ border-left-color:var(--accent); }
.eq-label{
  font-size:var(--fs-micro); color:var(--gold);
  letter-spacing:.2em; font-weight:700; margin-bottom:10px;
}
.eq-line{
  font-family:var(--serif); font-size:clamp(17px,1.35vw,27px); font-weight:500;
  color:var(--ink); line-height:1.4; margin-bottom:8px; letter-spacing:-.02em;
}
.eq-line strong{ color:var(--accent); font-weight:700; }
.eq-desc{ font-size:var(--fs-small); color:var(--sub); line-height:1.62; }

.yield-panel{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(20px,2.6vw,40px);
  display:flex; flex-direction:column;
}
.yield-row{
  display:grid; grid-template-columns:64px 1fr 90px;
  gap:clamp(10px,1.1vw,20px); align-items:center;
  padding:clamp(9px,1.35vh,16px) 0; border-bottom:1px solid var(--line);
}
.yield-row:last-of-type{ border-bottom:none; }
.y-rate{ font-size:var(--fs-small); font-weight:700; color:var(--sub); }
.y-track{ height:12px; background:var(--bg2); position:relative; }
.y-fill{
  height:100%; background:var(--accent); opacity:.28;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease) .35s;
}
.slide.in-view .y-fill{ transform:scaleX(1); }
.yield-row.hi .y-fill{ opacity:.85; }
.yield-row.hi .y-rate, .yield-row.hi .y-amount{ color:var(--accent); }
.y-amount{
  font-family:var(--serif); font-size:clamp(17px,1.25vw,25px); font-weight:700;
  text-align:right; color:var(--ink); letter-spacing:-.02em;
}

/* ==========================================================
   05 · 세금
   ========================================================== */
.tax-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px);
}
.tax-col{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(18px,2vw,32px);
  display:flex; flex-direction:column;
}
.tax-col.accent{ background:#F4F7F4; border-color:var(--accent-s); }
.tax-tag{
  font-size:var(--fs-micro); color:var(--gold);
  letter-spacing:.2em; font-weight:700; margin-bottom:14px;
}
.tax-col.accent .tax-tag{ color:var(--accent); }
.tax-head{
  font-size:clamp(19px,1.45vw,29px); font-weight:800;
  letter-spacing:-.028em; line-height:1.24; color:var(--ink);
  margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.tax-list{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.tax-list li{
  font-size:var(--fs-small); color:var(--sub); line-height:1.6;
  padding-left:16px; position:relative;
}
.tax-list li::before{
  content:'—'; position:absolute; left:0; color:var(--gold-s); font-weight:700;
}
.tax-list strong{ color:var(--accent); font-weight:700; }

.tax-band{
  margin-top:clamp(16px,2.4vh,30px);
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(20px,2.6vw,48px); align-items:center;
  background:var(--ink); color:var(--on-dark);
  padding:clamp(18px,2.2vw,34px) clamp(20px,2.6vw,44px);
}
.band-num{
  font-family:var(--serif); font-size:clamp(34px,3.2vw,62px); font-weight:700;
  color:var(--gold-soft); line-height:1; letter-spacing:-.04em; white-space:nowrap;
}
.band-num span{ font-size:.38em; margin-left:6px; letter-spacing:0; }
.band-title{
  font-size:clamp(16px,1.15vw,23px); font-weight:700; margin-bottom:8px;
  color:#fff; letter-spacing:-.02em;
}
.band-body p{ font-size:var(--fs-small); color:rgba(244,241,232,.82); line-height:1.65; }

/* ==========================================================
   06 · 환율
   ========================================================== */
.fx-card{
  display:grid; grid-template-columns:1.12fr .88fr;
  gap:clamp(24px,3vw,60px); align-items:start;
}
.fx-text{ display:flex; flex-direction:column; gap:clamp(14px,2.1vh,26px); }
.fx-point{ padding-bottom:clamp(12px,1.8vh,22px); border-bottom:1px solid var(--line); }
.fx-point:last-child{ border-bottom:none; padding-bottom:0; }
.fx-k{
  font-size:clamp(16px,1.15vw,23px); font-weight:700; color:var(--accent);
  letter-spacing:-.02em; margin-bottom:9px;
}
.fx-point p{ font-size:var(--fs-small); color:var(--sub); line-height:1.68; }

.fx-visual{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(18px,2.2vw,34px);
}
.fx-chart{ width:100%; height:auto; display:block; }
.fx-base{ stroke:var(--line-str); stroke-width:1; }
.fx-goal{ stroke:var(--red); stroke-width:1; stroke-dasharray:5 5; }
.fx-goal-t{ fill:var(--red); font-size:13px; font-family:var(--font); letter-spacing:.06em; }
.fx-bar{ fill:var(--accent); }
.fx-bar.low{ opacity:.34; }
.fx-bar.mid{ opacity:.6; }
.fx-bar.high{ opacity:.92; }
.fx-val{ fill:var(--ink); font-size:16px; font-weight:700; font-family:var(--font); }
.fx-cat{ fill:var(--muted); font-size:14px; font-family:var(--font); letter-spacing:.06em; }

.fx-note{
  margin-top:clamp(16px,2.2vh,28px);
  background:var(--bg2); border-left:3px solid var(--gold);
  padding:clamp(14px,1.7vw,24px) clamp(16px,2vw,30px);
  font-size:var(--fs-small); color:var(--sub); line-height:1.68;
}

/* ==========================================================
   08 · 상품 세 갈래
   ========================================================== */
.type-layout{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(22px,3vw,56px); align-items:start;
}
.type-list{ display:flex; flex-direction:column; gap:clamp(12px,1.8vh,22px); }
.type-item{
  display:grid; grid-template-columns:130px 1fr;
  gap:clamp(14px,1.6vw,28px); align-items:start;
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(15px,1.8vw,28px);
}
.type-item.warn{ border-color:var(--red); background:#FDF8F7; }
.type-rate{
  font-family:var(--serif); font-size:clamp(20px,1.6vw,32px); font-weight:700;
  color:var(--accent); line-height:1.1; letter-spacing:-.03em;
}
.type-item.warn .type-rate{ color:var(--red); }
.type-rate span{
  display:block; font-family:var(--font); font-size:var(--fs-micro);
  color:var(--muted); font-weight:600; letter-spacing:.08em; margin-top:6px;
}
.type-body h3{
  font-size:clamp(17px,1.3vw,26px); font-weight:800; letter-spacing:-.025em;
  color:var(--ink); margin-bottom:8px;
}
.type-body p{ font-size:var(--fs-small); color:var(--sub); line-height:1.62; }

.type-chart-card{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(18px,2.2vw,34px);
}
.donut-wrap{ position:relative; width:100%; aspect-ratio:1 / .78; min-height:180px; }
.donut-legend{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:16px;
}
.donut-legend span{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-micro); color:var(--sub); letter-spacing:0;
}
.donut-legend .sw{ width:10px; height:10px; flex:none; border-radius:2px; }
.donut-legend .sw.a{ background:#1F5C46; }
.donut-legend .sw.b{ background:#3E8467; }
.donut-legend .sw.c{ background:#A4382F; }
.donut-legend .sw.d{ background:#C7BFAC; }

/* ==========================================================
   09 · 계좌 3층
   ========================================================== */
.stack{ display:flex; flex-direction:column; gap:clamp(10px,1.4vh,18px); }
.stack-row{
  display:grid; grid-template-columns:78px 200px 1.15fr 1fr;
  gap:clamp(14px,1.8vw,34px); align-items:center;
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--accent);
  padding:clamp(14px,1.8vw,28px) clamp(16px,2vw,32px);
}
.stack-row.plain{ border-left-color:var(--line-str); background:var(--bg2); }
.stack-order{
  font-family:var(--serif); font-size:clamp(20px,1.5vw,30px); font-weight:700;
  color:var(--accent); letter-spacing:-.02em;
}
.stack-row.plain .stack-order{ color:var(--muted); }
.stack-name h3{
  font-size:clamp(18px,1.35vw,27px); font-weight:800; letter-spacing:-.025em;
  color:var(--ink); margin-bottom:6px;
}
.stack-sub{ font-size:var(--fs-micro); color:var(--muted); letter-spacing:.04em; }
.stack-spec{ display:flex; flex-direction:column; gap:8px; }
.stack-spec div{ font-size:var(--fs-small); color:var(--sub); line-height:1.55; }
.stack-spec .k{
  display:inline-block; min-width:44px;
  font-size:var(--fs-micro); color:var(--gold); font-weight:700; letter-spacing:.14em;
}
.stack-use{
  font-size:var(--fs-small); color:var(--sub); line-height:1.6;
  padding-left:clamp(14px,1.4vw,24px); border-left:1px solid var(--line);
}
.stack-note{
  margin-top:clamp(14px,2vh,26px);
  font-size:var(--fs-small); color:var(--sub); line-height:1.7;
  padding:clamp(13px,1.5vw,22px) clamp(16px,1.9vw,28px);
  background:#F4F7F4; border:1px solid var(--accent-s);
}

/* ==========================================================
   10 · 적립 경로
   ========================================================== */
.sim-card{
  display:grid; grid-template-columns:.82fr 1.18fr;
  gap:clamp(24px,3vw,58px); align-items:stretch;
}
.sim-text{ display:flex; flex-direction:column; gap:clamp(14px,2vh,24px); }
.sim-assume{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(16px,2vw,30px);
}
.sim-assume ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.sim-assume li{
  font-size:var(--fs-small); color:var(--sub); line-height:1.58;
  padding-left:16px; position:relative;
}
.sim-assume li::before{ content:'·'; position:absolute; left:4px; color:var(--gold); font-weight:900; }
.sim-assume strong{ color:var(--accent); font-weight:700; }
.sim-read{
  background:var(--ink); color:var(--on-dark);
  padding:clamp(16px,2vw,30px); flex:1;
  display:flex; flex-direction:column; justify-content:center;
}
.sim-figure{
  font-family:var(--serif); font-size:clamp(38px,3.4vw,68px); font-weight:700;
  color:var(--gold-soft); line-height:1; letter-spacing:-.04em; margin-bottom:14px;
}
.sim-read p{ font-size:var(--fs-small); color:rgba(244,241,232,.82); line-height:1.68; }
.sim-chart{
  background:var(--paper); border:1px solid var(--line);
  padding:clamp(16px,2vw,30px);
  position:relative; min-height:clamp(260px,42vh,520px);
}

/* ==========================================================
   11 · 자주 깨지는 지점
   ========================================================== */
.pitfall-list{ list-style:none; display:flex; flex-direction:column; gap:clamp(10px,1.5vh,20px); }
.pitfall{
  display:grid; grid-template-columns:86px 1fr;
  gap:clamp(14px,1.8vw,34px); align-items:baseline;
  padding-bottom:clamp(10px,1.5vh,20px); border-bottom:1px solid var(--line);
}
.pitfall:last-child{ border-bottom:none; padding-bottom:0; }
.p-num{
  font-family:var(--serif); font-size:clamp(28px,2.3vw,46px); font-weight:300;
  color:var(--gold); line-height:1; letter-spacing:-.03em;
}
.p-body h3{
  font-size:clamp(18px,1.35vw,27px); font-weight:800; letter-spacing:-.025em;
  color:var(--ink); margin-bottom:8px;
}
.p-body p{ font-size:var(--fs-small); color:var(--sub); line-height:1.66; max-width:1180px; }
.p-body strong{ color:var(--accent); font-weight:700; }

/* ==========================================================
   12 · 마무리
   ========================================================== */
.slide-close{
  background:linear-gradient(165deg, var(--bg2) 0%, var(--bg) 55%);
  justify-content:center;
}
.close-frame{
  position:absolute; inset:clamp(26px,3.6vh,54px) clamp(26px,3.4vw,64px);
  border:1px solid var(--line-str); pointer-events:none;
}
.close-eyebrow{
  font-family:var(--en); font-style:italic;
  font-size:clamp(16px,1.2vw,24px); color:var(--gold);
  letter-spacing:.3em; margin-bottom:16px; position:relative;
}
.close-title{
  font-size:clamp(30px,3.1vw,60px); font-weight:800;
  letter-spacing:-.04em; line-height:1.12; color:var(--ink);
  margin-bottom:clamp(22px,3.4vh,44px); position:relative;
}
.close-lines{ list-style:none; display:flex; flex-direction:column; gap:clamp(12px,1.8vh,22px); max-width:1180px; position:relative; }
.close-lines li{
  display:grid; grid-template-columns:56px 1fr; gap:clamp(12px,1.4vw,26px);
  font-size:clamp(16px,1.22vw,25px); color:var(--ink); line-height:1.56;
  letter-spacing:-.02em;
  padding-bottom:clamp(12px,1.8vh,22px); border-bottom:1px solid var(--line);
}
.close-lines .cl-n{
  font-family:var(--serif); font-size:clamp(18px,1.3vw,26px); font-weight:700;
  color:var(--accent); letter-spacing:-.02em;
}
.close-refs{ margin-top:clamp(20px,3vh,40px); position:relative; }
.refs-cap{
  font-size:var(--fs-micro); color:var(--muted);
  letter-spacing:.22em; font-weight:700; margin-bottom:14px;
}
.refs-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px);
}
.ref{
  border-top:1px solid var(--line-str); padding-top:12px;
  font-size:var(--fs-micro); color:var(--sub); line-height:1.55; letter-spacing:0;
}
.ref .r-src{
  display:block; color:var(--accent); font-weight:700;
  letter-spacing:.06em; margin-bottom:5px;
}

/* ==========================================================
   전역 크롬
   ========================================================== */
.aura-follower{
  position:fixed; top:0; left:0;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(31,92,70,.16) 0%, rgba(176,133,47,.08) 45%, transparent 70%);
  mix-blend-mode:screen; pointer-events:none; z-index:90;
  margin:-100px 0 0 -100px;
  opacity:0; transition:opacity .5s var(--ease);
  will-change:transform;
}
.aura-follower.on{ opacity:1; }

.progress-bar{
  position:fixed; top:0; left:0; width:100%; height:2px;
  background:var(--line); z-index:100;
}
.progress-bar .progress{
  height:100%; width:0%; background:var(--accent);
  transition:width .4s var(--ease);
}
.slide-indicator{
  position:fixed; bottom:22px; right:28px; z-index:100;
  font-size:var(--fs-micro); color:var(--muted); letter-spacing:.2em;
  background:rgba(255,255,255,.9); padding:7px 14px;
  border:1px solid var(--line); backdrop-filter:blur(8px);
}
.slide-indicator .current{ color:var(--accent); font-weight:700; }

/* ==========================================================
   태블릿 (≈821–1180px) — 2단 유지, 여백만 조인다
   ========================================================== */
@media (max-width:1180px) and (min-width:821px){
  .stack-row{ grid-template-columns:64px 1fr; grid-auto-flow:row; row-gap:12px; }
  .stack-spec, .stack-use{ grid-column:1 / -1; }
  .stack-use{ padding-left:0; border-left:none; padding-top:12px; border-top:1px solid var(--line); }
  .tax-grid{ gap:12px; }
  .refs-grid{ grid-template-columns:1fr 1fr; }
}

/* ==========================================================
   모바일 (≤820px) — 세로 단일열 리플로우
   (에디터는 항상 1920px로 렌더되므로 편집 화면에는 영향 없음)
   ========================================================== */
@media (max-width:820px){
  html, body{ overflow:visible; }
  body{ overflow-x:hidden; }

  .presentation{
    width:100%; height:auto;
    overflow-y:visible; scroll-snap-type:none;
  }
  .slide{
    width:100%; height:auto; min-height:100vh;
    padding:28px 20px 34px;
    overflow:visible;
    border-bottom:1px solid var(--line);
  }

  .slide-header, .slide-footer{
    position:static; left:auto; right:auto; top:auto; bottom:auto;
  }
  .slide-header{ margin-bottom:22px; }
  .slide-footer{
    margin-top:26px; flex-direction:column; align-items:flex-start; gap:6px;
  }
  .slide-footer span:last-child{ text-align:left; }

  /* --- 다단 → 단일열 --- */
  .cover-meta,
  .equation-card,
  .tax-grid,
  .fx-card,
  .type-layout,
  .sim-card,
  .refs-grid,
  .donut-legend{
    grid-template-columns:1fr;
    gap:18px;
  }
  .tax-band{ grid-template-columns:1fr; gap:12px; }
  .type-item{ grid-template-columns:1fr; gap:10px; }
  .stack-row{ grid-template-columns:1fr; gap:12px; }
  .pitfall{ grid-template-columns:1fr; gap:8px; }
  .contents-item{ grid-template-columns:56px 1fr; gap:14px; }
  .contents-item .pages{ grid-column:2; }
  .yield-row{ grid-template-columns:52px 1fr 76px; gap:10px; }
  .close-lines li{ grid-template-columns:1fr; gap:6px; }

  .stack-use{ padding-left:0; border-left:none; padding-top:12px; border-top:1px solid var(--line); }
  .type-rate span{ display:inline; margin-left:8px; }

  /* --- 타이포 --- */
  .cover-title{ font-size:clamp(38px,10.5vw,62px); }
  .contents-title, .close-title{ font-size:clamp(26px,7.4vw,40px); }
  .divider-title{ font-size:clamp(30px,8.6vw,52px); }
  .slide-title{ font-size:clamp(22px,5.9vw,34px); }
  .divider-bgnum{ font-size:clamp(150px,46vw,260px); right:-10px; opacity:.6; }
  .divider-nav{
    position:static; margin-top:30px; flex-direction:column; gap:10px;
  }
  .band-num{ font-size:clamp(34px,10vw,52px); }
  .sim-figure{ font-size:clamp(34px,10vw,52px); }
  .p-num{ font-size:clamp(24px,7vw,34px); }

  .cover-frame, .close-frame{ inset:12px; }
  .donut-wrap{ aspect-ratio:1 / .9; }
  .sim-chart{ min-height:300px; }
  /* SVG 텍스트는 viewBox와 함께 줄어든다 — 좁은 화면에서 14px 아래로 내려가지 않게 단위값을 키운다 */
  .fx-val{ font-size:30px; }
  .fx-cat{ font-size:28px; }
  .fx-goal-t{ font-size:28px; }

  .slide-indicator{ bottom:14px; right:14px; }
  .aura-follower{ display:none; }
}

/* 가로가 넓지만 세로가 아주 짧은 화면 — 높이 고정을 풀어 잘리지 않게 */
@media (max-height:560px) and (min-width:821px){
  .presentation{ scroll-snap-type:none; height:auto; overflow-y:visible; }
  html, body{ overflow:visible; }
  .slide{ height:auto; min-height:100vh; overflow:visible; }
}

/* 데스크톱 안정화 — 반드시 미디어쿼리 안에서만 */
@media (min-width:900px){
  .presentation{ min-width:900px; }
}

/* ==========================================================
   인쇄 / 내보내기
   ========================================================== */
@media print{
  @page{ size:1920px 1080px; margin:0; }
  html, body{ overflow:visible !important; width:1920px !important; background:var(--bg) !important; }
  .presentation{
    width:1920px !important; height:auto !important; min-width:0 !important;
    overflow:visible !important; scroll-snap-type:none !important;
  }
  .slide{
    width:1920px !important; height:1080px !important; min-height:0 !important;
    overflow:hidden !important;
    page-break-after:always; break-after:page;
  }
  .slide-header, .slide-footer{ position:absolute !important; }
  .anim{ opacity:1 !important; transform:none !important; transition:none !important; }
  .y-fill{ transform:scaleX(1) !important; }
  .aura-follower, .progress-bar, .slide-indicator, #three-canvas-container{ display:none !important; }
  *{ print-color-adjust:exact !important; -webkit-print-color-adjust:exact !important; }
}