/* ─────────────────────────────────────────────
   Steep Design System — tokens (DESIGN.md)
   ───────────────────────────────────────────── */
:root{
  --color-ink-black:#17191c;
  --color-paper-white:#ffffff;
  --color-mist-gray:#f2f2f3;
  --color-fog-white:#fafafb;
  --color-slate-gray:#777b86;
  --color-ash-gray:#979799;
  --color-smoke-gray:#a3a6af;
  --color-blush-peach:#fbe1d1;
  --color-sienna-brown:#5d2a1a;

  --font-display:"Gowun Batang","Noto Serif KR",ui-serif,Georgia,"Times New Roman",serif;
  --font-sans:"Pretendard Variable",Pretendard,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --text-caption:15px;   --leading-caption:1.5;
  --text-body:17px;      --leading-body:1.75;
  --text-body-lg:20px;   --leading-body-lg:1.6;
  --text-subheading:22px;--leading-subheading:1.6;
  --text-heading-sm:26px;--leading-heading-sm:1.35;

  --spacing-4:4px;    --spacing-8:8px;    --spacing-12:12px;  --spacing-16:16px;
  --spacing-20:20px;  --spacing-24:24px;  --spacing-28:28px;  --spacing-32:32px;
  --spacing-40:40px;  --spacing-64:64px;  --spacing-80:80px;  --spacing-96:96px;
  --spacing-124:124px;--spacing-128:128px;--spacing-160:160px;

  --page-max-width:1200px;
  --section-gap:80px;
  --card-padding:20px;

  --radius-images:12px; --radius-inputs:16px; --radius-smallcards:16px;
  --radius-elevatedcards:20px; --radius-cards:24px; --radius-buttons:9999px;

  --shadow-subtle-3:rgba(4,23,43,.05) 0 0 0 1px, rgba(0,0,0,.1) 0 20px 25px -5px, rgba(0,0,0,.1) 0 8px 10px -6px;

  --ease:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--color-paper-white);
  color:var(--color-ink-black);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── Type ─────────────────────────────────── */
.display,.h1,.h2{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.01em;      /* 한글 적용 규칙: display tracking 완화 */
  margin:0;
}
.display{font-size:clamp(40px,7.2vw,90px);line-height:1.22}
.display strong,.h1 strong,.h2 strong{font-weight:700}   /* 이름 두 글자 강조 */
/* 시각 보정 — 「정」과 「운」의 세로 중심선을 맞춘다.
   잉크 폭 정 50px / 운 59px, 사이드 베어링 5.32px / 1.44px (@64px).
   그대로 우측 정렬하면 중심이 0.62px 어긋나므로 그만큼(0.01em) 되민다. */
.ink-r{margin-right:.01em}
.h1{font-size:clamp(32px,4.6vw,64px)}
.h2{font-size:clamp(27px,3.2vw,44px)}
.h3{
  font-family:var(--font-sans);
  font-size:var(--text-heading-sm);font-weight:450;
  line-height:var(--leading-heading-sm);letter-spacing:-.009em;margin:0;
}
.subheading{font-size:var(--text-subheading);line-height:var(--leading-subheading);font-weight:400;margin:0}
.body-lg{font-size:var(--text-body-lg);line-height:var(--leading-body-lg);font-weight:450;margin:0}
.caption{font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--color-slate-gray);margin:0}
.tag{font-size:14px;font-weight:400;color:var(--color-ash-gray);letter-spacing:.02em;margin:0}
.muted{color:var(--color-slate-gray)}
p{margin:0 0 var(--spacing-16)}
p:last-child{margin-bottom:0}

/* ── Layout ───────────────────────────────── */
.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-32)}
section{padding:var(--section-gap) 0}
.band{background:var(--color-fog-white)}
/* 반전 밴드 — 잉크 캔버스 위에 종이색 활자 */
.band-dark{background:var(--color-ink-black);color:var(--color-paper-white)}
.band-dark .tag{color:#8b8b93}
.band-dark .muted{color:#c4c4cc}
/* 두 줄의 폭을 맞추는 문구 블록 */
.phrase{display:inline-block;width:fit-content}
.phrase span{display:block;text-align:justify;text-align-last:justify;text-justify:inter-character}
.sec-head{display:flex;flex-direction:column;gap:var(--spacing-16);margin-bottom:var(--spacing-64);max-width:760px}
.rule{height:1px;background:#e7e7e9;border:0;margin:0}

/* ── Nav ──────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom-color:#ececee}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--spacing-24)}
.brand{font-family:var(--font-display);font-size:20px;letter-spacing:-.01em}
.nav-links{display:flex;gap:var(--spacing-28);align-items:center}
.nav-links a{font-size:16px;font-weight:400;padding:2px 0;position:relative;color:var(--color-ink-black)}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--color-ink-black);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
@media(max-width:820px){.nav-links{display:none}}

/* ── Buttons ──────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 var(--spacing-20);
  border-radius:var(--radius-buttons);
  font-family:var(--font-sans);font-size:16px;font-weight:400;
  border:1px solid transparent;cursor:pointer;
  transition:opacity .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.btn-filled{background:var(--color-ink-black);color:var(--color-paper-white)}
.btn-filled:hover{opacity:.86}
.btn-ghost{background:transparent;color:var(--color-ink-black);border-color:var(--color-ink-black)}
.btn-ghost:hover{background:var(--color-ink-black);color:var(--color-paper-white)}
.btn-row{display:flex;gap:var(--spacing-12);flex-wrap:wrap}

/* ── Cards ────────────────────────────────── */
.card{background:var(--color-mist-gray);border-radius:var(--radius-cards);padding:var(--spacing-32)}
.card-peach{background:var(--color-blush-peach);color:var(--color-sienna-brown);border-radius:var(--radius-cards);padding:clamp(32px,5vw,64px)}
.card-peach .tag{color:var(--color-sienna-brown);opacity:.7}
.artifact{background:var(--color-paper-white);border-radius:var(--radius-elevatedcards);box-shadow:var(--shadow-subtle-3);padding:var(--spacing-24)}
.grid{display:grid;gap:var(--spacing-20)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3,.g2{grid-template-columns:1fr}}

/* ── Hero ─────────────────────────────────── */
.hero{position:relative;padding:clamp(56px,10vw,140px) 0 var(--spacing-124);overflow:hidden}
.hero-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-art svg{width:100%;height:100%}
.hero-inner{position:relative;z-index:1;max-width:900px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;color:var(--color-ash-gray);letter-spacing:.06em;margin-bottom:var(--spacing-28);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--color-smoke-gray)}
.hero .lede{margin-top:var(--spacing-32);max-width:620px;font-size:var(--text-body-lg);line-height:1.75;color:var(--color-slate-gray)}
.hero .btn-row{margin-top:var(--spacing-40)}

/* 등고선 — 그려지며 들어온 뒤 아주 느리게 표류 */
.contour{fill:none;stroke:var(--color-ink-black);stroke-width:1;vector-effect:non-scaling-stroke}
.contour-draw{stroke-dasharray:2200;stroke-dashoffset:2200;animation:draw 2.8s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.drift{animation:drift 26s ease-in-out infinite alternate}
.drift-2{animation:drift2 34s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-22px,10px,0)}}
@keyframes drift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(18px,-12px,0)}}

/* ── Timeline ─────────────────────────────── */
.tl{position:relative;padding-left:var(--spacing-40)}
.tl::before{
  content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:#e0e0e3;
  transform:scaleY(0);transform-origin:top;transition:transform 1.4s var(--ease);
}
.tl.in::before{transform:scaleY(1)}
.tl-item{position:relative;padding-bottom:var(--spacing-40)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:calc(-1 * var(--spacing-40) + 1px);top:12px;
  width:9px;height:9px;border-radius:50%;background:var(--color-ink-black);
  transform:scale(0);transition:transform .6s var(--ease);
}
.tl.in .tl-item::before{transform:scale(1)}
.tl.in .tl-item:nth-child(2)::before{transition-delay:.14s}
.tl.in .tl-item:nth-child(3)::before{transition-delay:.28s}
.tl.in .tl-item:nth-child(4)::before{transition-delay:.42s}
.tl.in .tl-item:nth-child(5)::before{transition-delay:.56s}
.tl-year{font-size:14px;color:var(--color-ash-gray);letter-spacing:.04em;margin:0 0 6px}
.tl-place{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);font-weight:400;line-height:1.35;letter-spacing:-.01em;margin:0 0 var(--spacing-8)}
.tl-role{font-size:16px;color:var(--color-slate-gray);margin:0 0 var(--spacing-12)}

/* ── Numbered ─────────────────────────────── */
.num{display:flex;gap:var(--spacing-20);align-items:flex-start}
.num-mark{font-family:var(--font-display);font-size:20px;color:var(--color-ash-gray);min-width:32px;padding-top:2px}
.verse{font-size:14px;color:var(--color-ash-gray);letter-spacing:.02em;margin-top:var(--spacing-12)}

/* ── Areas ────────────────────────────────── */
.area{padding:var(--spacing-28) 0;border-top:1px solid #ececee;display:grid;grid-template-columns:200px 1fr;gap:var(--spacing-24)}
.areas .area:last-child{border-bottom:1px solid #ececee}
.area h4{font-family:var(--font-display);font-size:22px;font-weight:400;margin:0;letter-spacing:-.01em}
.area p{color:var(--color-slate-gray);margin:0}
@media(max-width:760px){.area{grid-template-columns:1fr;gap:var(--spacing-12)}}

/* ── Quote ────────────────────────────────── */
.quote{font-family:var(--font-display);font-size:clamp(24px,3vw,40px);line-height:1.55;letter-spacing:-.01em;margin:0}
.quote-src{margin-top:var(--spacing-24);font-size:16px;opacity:.78;line-height:1.7}

/* ── Footer ───────────────────────────────── */
.foot{padding:var(--spacing-64) 0 var(--spacing-80);border-top:1px solid #ececee}
.foot-inner{display:flex;justify-content:space-between;gap:var(--spacing-24);flex-wrap:wrap;align-items:flex-end}
.foot a:hover{text-decoration:underline}

/* ── Reveal ───────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  .tl::before{transform:scaleY(1)}
  .tl .tl-item::before{transform:scale(1)}
  .contour-draw{stroke-dashoffset:0}
}

/* ── 글 (writing) ─────────────────────────── */
.post{padding:var(--spacing-96) 0 var(--spacing-80)}
.post-head{max-width:820px;margin-bottom:var(--spacing-64)}
.post-body{max-width:680px;font-size:var(--text-body-lg);line-height:2}
.post-body h2{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:400;letter-spacing:-.01em;line-height:1.4;margin:var(--spacing-64) 0 var(--spacing-20)}
.post-body h3{font-family:var(--font-sans);font-size:var(--text-heading-sm);font-weight:450;line-height:1.35;margin:var(--spacing-40) 0 var(--spacing-16)}
.post-body h4{font-family:var(--font-sans);font-size:20px;font-weight:480;margin:var(--spacing-32) 0 var(--spacing-12)}
.post-body p{margin:0 0 var(--spacing-28)}
.post-body ul,.post-body ol{margin:0 0 var(--spacing-28);padding-left:1.2em}
.post-body li{margin-bottom:var(--spacing-8)}
.post-body blockquote{
  margin:var(--spacing-40) 0;padding:var(--spacing-28) var(--spacing-32);
  background:var(--color-mist-gray);border-radius:var(--radius-cards);
  font-family:var(--font-display);font-size:clamp(19px,2vw,22px);line-height:1.75;
}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body img{border-radius:var(--radius-images);margin:var(--spacing-32) 0}
.post-body hr{height:1px;background:#e7e7e9;border:0;margin:var(--spacing-64) 0}
.post-body a{text-decoration:underline;text-underline-offset:3px}
.post-body code{font-size:.92em;background:var(--color-mist-gray);padding:2px 6px;border-radius:6px}
.post-body pre{background:var(--color-mist-gray);border-radius:var(--radius-smallcards);padding:var(--spacing-20);overflow-x:auto}
.post-body pre code{background:none;padding:0}

/* 글 목록 행 */
.post-row{text-decoration:none;transition:background .4s var(--ease)}
.post-row:hover{background:var(--color-fog-white)}
.post-row h4{color:var(--color-ash-gray);font-family:var(--font-sans);font-size:15px;font-weight:400;letter-spacing:.02em}
.post-row-title{font-family:var(--font-display);font-size:clamp(20px,2.2vw,26px);line-height:1.4;letter-spacing:-.01em;margin:0}