/* Don't take note! — 랜딩
   토큰과 타이포는 디자인 캔버스(dc4)와 동일하게 맞춘다. */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --paper:#F5F0E8;
  --ink:#2E2B26;
  --sub:#5F594F;
  --dim:#8C8578;
  --line:#D8D0C1;
  --accent:#B4614A;
  --sage:#7E9C8B;

  --serif:'Instrument Serif', Georgia, serif;
  --kserif:'Gowun Batang', 'Apple SD Gothic Neo', serif;
  --sans:'IBM Plex Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --mono:'DM Mono', ui-monospace, Menlo, monospace;

  --s-head:64px;   /* S2~S5 공통 */
  --s-hero:128px;  /* S1 */
  --s-cta:96px;    /* S6 */
  --pad:clamp(24px, 6vw, 96px);
  /* 도구 화면(app.css)과 같은 값. 두 페이지의 모서리가 어긋나면 안 된다. */
  --radius:6px;
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 스크롤에 따라 은은하게 변하는 배경 한 겹 */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:var(--wash, var(--paper));
  transition:background-color 1100ms cubic-bezier(.4,0,.2,1);
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper); padding:12px 18px; z-index:99;
}
.skip:focus{ left:12px; top:12px; }

.d{ font-family:var(--serif); font-weight:400; }
.k{ font-family:var(--kserif); font-weight:400; }
.m{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }

/* ── 상단 바 ─────────────────────────────── */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  mix-blend-mode:normal;
}
.brand{
  font-family:var(--serif); font-size:40px; letter-spacing:.01em; line-height:1;
  color:var(--ink); text-decoration:none;
}
.brand i{ font-style:italic; color:var(--accent); }

/* ── 오른쪽 레일 ─────────────────────────── */
.rail{
  position:fixed; right:calc(var(--pad) - 8px); top:50%; transform:translateY(-50%);
  z-index:40; display:flex; flex-direction:column; gap:18px;
}
.rail a{ display:flex; align-items:center; gap:10px; justify-content:flex-end; text-decoration:none; }
/* 점을 마지막 요소로 둬서, 라벨 길이와 상관없이 점끼리 같은 세로선에 선다 */
.rail a span{ order:2; }
.rail a b{ order:1; }
.rail a span{
  width:7px; height:7px; border-radius:50%;
  background:var(--line); transition:all .4s ease;
}
.rail a b{
  white-space:nowrap; text-align:right;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--dim);
  opacity:0; transform:translateX(6px); transition:all .35s ease; font-weight:400;
}
.rail a:hover b{ opacity:1; transform:none; }
.rail a.on span{ background:var(--accent); transform:scale(1.35); }
.rail a.on b{ opacity:1; transform:none; color:var(--sub); }

/* ── 섹션 공통 ───────────────────────────── */
.beat{
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:120px var(--pad);
  position:relative;
}
.inner{ width:100%; max-width:1040px; }
.center{ text-align:center; }

.head{
  font-size:var(--s-head);
  line-height:1.18;
  letter-spacing:-.015em;
  margin:0 0 28px;
  text-wrap:balance;
}
.head em{ font-style:normal; color:var(--accent); }

.hero{
  font-size:var(--s-hero);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0 0 32px;
}
.hero i{ font-style:italic; color:var(--accent); }

.lead{
  /* --sub(#5F594F)는 리드문 크기에서 흐리게 읽힌다. 본문 잉크에 한 단계 가깝게. */
  font-size:20px; line-height:1.95; color:#463F36;
  margin:0 auto; max-width:660px;
}

/* 등장 애니메이션 — JS가 켜져 있을 때만 숨겼다가 보여준다 */
:root[data-js] .r{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
:root[data-js] .r.in{ opacity:1; transform:none; }
.d2{ transition-delay:.12s; } .d3{ transition-delay:.24s; } .d4{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  :root[data-js] .r{ opacity:1; transform:none; transition:none; }
}

/* 버튼 */
.btn{
  display:inline-block; margin-top:44px;
  padding:16px 40px; border-radius:var(--radius);
  background:var(--ink); color:var(--paper);
  text-decoration:none; font-size:15px; font-weight:400;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--accent); transform:translateY(-2px); }
.btn.big{ padding:20px 56px; font-size:17px; }

/* ── S1 ──────────────────────────────────── */
.cue{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.cue i{ display:block; width:1px; height:44px; background:var(--line); animation:drop 2.2s ease-in-out infinite; }
@keyframes drop{ 0%,100%{ transform:scaleY(.3); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); transform-origin:top; opacity:1 } }

.mobile-note{
  margin:28px auto 0; max-width:420px;
  font-size:14px; line-height:1.9; color:var(--sub);
}
.mobile-note a{ color:var(--accent); }

/* ── S2 숫자 셋 ──────────────────────────── */
.zeros{
  list-style:none; display:flex; justify-content:center; gap:clamp(36px,8vw,96px);
  margin:64px 0 0; padding:0;
}
.zeros div{ display:flex; flex-direction:column-reverse; align-items:center; gap:10px; }
.zeros dt{ margin:0; }
.zeros dd{ margin:0; font-size:56px; line-height:1; color:var(--ink); }

/* ── S3 비교 ─────────────────────────────── */
.compare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(20px,4vw,52px);
  align-items:center; margin-top:56px; text-align:left;
}
.col p{
  margin:0 0 14px; font-size:15px; line-height:1.85;
}
.col.raw p{ color:var(--dim); }
.col.fixed p{ color:var(--ink); }
.col.fixed em{ font-style:normal; color:var(--accent); }
.colhead{ display:block; margin-bottom:20px; }
.arrow{ font-size:28px; color:var(--line); }
.footnote{
  margin:34px 0 0; font-size:12.5px; color:var(--dim); line-height:1.8;
}

/* ── S4 두 장 ────────────────────────────── */
.two{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px);
  margin-top:56px; text-align:left;
}
.two .card h3{
  margin:0 0 14px; font-family:var(--kserif); font-weight:400;
  font-size:21px; line-height:1.5;
}
.two .card p{ margin:0; font-size:15px; line-height:1.9; color:var(--sub); }
.two .yes h3{ color:var(--sage); }
.two .no h3{ color:var(--dim); }

/* ── S5 단계 ─────────────────────────────── */
.steps{
  list-style:none; margin:64px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,5vw,64px);
  text-align:left;
}
.steps .n{ display:block; font-size:34px; color:var(--line); margin-bottom:18px; }
.steps h3{ margin:0 0 12px; font-family:var(--kserif); font-weight:400; font-size:20px; }
.steps p{ margin:0; font-size:14.5px; line-height:1.9; color:var(--sub); }

/* ── S6 ──────────────────────────────────── */
.b6 .head{ font-size:var(--s-cta); }
.small{ margin:56px 0 0; font-size:14px; color:var(--dim); }
.chips{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:18px 0 0; padding:0;
}
.chips a{
  display:inline-block; padding:9px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  color:var(--sub); text-decoration:none; font-size:13.5px;
  transition:all .25s ease;
}
.chips a:hover{ border-color:var(--accent); color:var(--accent); }

/* ── 푸터 ────────────────────────────────── */
.foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding:40px var(--pad) 48px;
}
.foot nav{ display:flex; gap:22px; }
.foot a{ color:var(--dim); text-decoration:none; font-size:13px; }
.foot a:hover{ color:var(--ink); }

/* ── 좁은 화면 ───────────────────────────── */
@media (max-width:960px){
  :root{ --s-hero:64px; --s-head:36px; --s-cta:48px; }
  .rail{ display:none; }
  .beat{ padding:104px var(--pad) 88px; min-height:auto; }
  .b1{ min-height:100svh; }
  .lead{ font-size:18px; line-height:1.9; }
  .compare{ grid-template-columns:1fr; gap:28px; }
  .arrow{ transform:rotate(90deg); justify-self:center; }
  .two, .steps{ grid-template-columns:1fr; gap:32px; }
  .zeros dd{ font-size:40px; }
  /* 좁은 화면에서 로고가 여백을 다 먹지 않게 */
  .brand{ font-size:30px; }
}