:root{
  --sky-0:#9d9887; --sky-1:#c4b59a; --sky-2:#e0cfae; --sky-3:#efe4cd;
  --paper:#e9dfcb; --paper-2:#f3ecdc;
  --ink:#231c14; --ink-2:#4e4133; --ink-3:#7b6a55; --ink-4:#9c8b74;
  --line:#cbbb9f; --line-soft:#dbcdb3;
  --flower:#a03e2a; --flower-2:#bd5a41;
  --silhouette:#1e1810;
  --sky2-0:#8f8b7d; --sky2-1:#c2a98c; --sky2-2:#d8b394; --sky2-3:#a98a76;
  --cloud-hi:#f6dcb4; --cloud-lo:#7c6a5e; --bird:#2a2018;
  --on-sky:#33261b; --on-sky-dim:#54412f; --on-sky-line:rgba(51,38,27,.18);
  --shell:#141210; --shell-line:#38332c; --shell-ink:#dcd6ca; --shell-on:#4ac26a;
  --sel:rgba(160,62,42,.16);
  --r:9px; --r-s:6px;
  --t-hover:.14s; --expo:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sky-0:#171511; --sky-1:#221e19; --sky-2:#2d271f; --sky-3:#38301f;
    --paper:#100f0d; --paper-2:#191714;
    --ink:#dcd6ca; --ink-2:#b3aa9a; --ink-3:#8c8271; --ink-4:#6d6455;
    --line:#38332c; --line-soft:#2a2620;
    --flower:#d2694b; --flower-2:#e08063;
    --silhouette:#050403;
    --sky2-0:#14120f; --sky2-1:#241d17; --sky2-2:#33261c; --sky2-3:#1a1511;
    --cloud-hi:#5a4634; --cloud-lo:#0f0d0b; --bird:#000000;
  --on-sky:#d8d0c2; --on-sky-dim:#a29888; --on-sky-line:rgba(216,208,194,.16);
    --on-sky:#d8d0c2; --on-sky-dim:#a29888; --on-sky-line:rgba(216,208,194,.16);
    --shell:#0b0a09; --shell-line:#332e27;
    --sel:rgba(210,105,75,.18);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --sky-0:#171511; --sky-1:#221e19; --sky-2:#2d271f; --sky-3:#38301f;
  --paper:#100f0d; --paper-2:#191714;
  --ink:#dcd6ca; --ink-2:#b3aa9a; --ink-3:#8c8271; --ink-4:#6d6455;
  --line:#38332c; --line-soft:#2a2620;
  --flower:#d2694b; --flower-2:#e08063;
  --silhouette:#050403;
  --sky2-0:#14120f; --sky2-1:#241d17; --sky2-2:#33261c; --sky2-3:#1a1511;
  --cloud-hi:#5a4634; --cloud-lo:#0f0d0b; --bird:#000000;
  --on-sky:#d8d0c2; --on-sky-dim:#a29888; --on-sky-line:rgba(216,208,194,.16);
  --shell:#0b0a09; --shell-line:#332e27;
  --sel:rgba(210,105,75,.18);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:300;font-size:16.5px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
html[lang="ko"] body{font-family:"Work Sans","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;letter-spacing:-.005em}
::selection{background:var(--sel)}

h1,h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;text-wrap:balance;margin:0}
html[lang="ko"] h1,html[lang="ko"] h2{font-family:"Cormorant Garamond","Gowun Batang",serif}
h3{font-size:16px;font-weight:500;margin:0;line-height:1.4}
p{margin:0}
a{color:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
code{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:.88em}

.shell{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.col{max-width:640px}
section{padding:clamp(64px,9vh,104px) 0;position:relative;scroll-margin-top:76px}
section+section{border-top:1px solid var(--line-soft)}

/* ── 상단 바 ────────────────────────────────────────────────────── */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
header.stuck{border-bottom-color:var(--line-soft)}
.bar{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,48px);height:60px;display:flex;align-items:center;gap:14px}
.wordmark{
  font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;letter-spacing:.30em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;
}
.wordmark b{font-weight:500}
.tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.lang button{
  appearance:none;border:0;background:transparent;color:var(--ink-3);cursor:pointer;font-family:inherit;
  font-size:11.5px;letter-spacing:.06em;padding:6px 9px;transition:background var(--t-hover) ease,color var(--t-hover) ease;
}
.lang button+button{border-left:1px solid var(--line-soft)}
.lang button:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.icon-btn{
  appearance:none;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-s);
  background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  transition:background var(--t-hover) ease,border-color var(--t-hover) ease;
}
.icon-btn:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);border-color:var(--ink-4)}
.icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sun{display:none}
  :root:not([data-theme="light"]) .moon{display:block}
}
:root[data-theme="dark"] .sun{display:none}
:root[data-theme="dark"] .moon{display:block}
:root[data-theme="light"] .sun{display:block}
:root[data-theme="light"] .moon{display:none}

.btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;font-family:inherit;
  font-size:14px;padding:11px 20px;border-radius:var(--r-s);border:1px solid transparent;
  transition:transform var(--t-hover) ease,background var(--t-hover) ease,border-color var(--t-hover) ease,color var(--t-hover) ease;
}
.btn-primary{background:var(--flower);color:#fdf6ec;border-color:var(--flower)}
.btn-primary:hover{background:var(--flower-2);border-color:var(--flower-2)}
.btn-ghost{border-color:var(--line);color:var(--ink-2);background:transparent}
.btn-ghost:hover{border-color:var(--ink-4);color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.btn:active{transform:translateY(1px)}
header .btn{padding:8px 15px;font-size:13px}
@media (max-width:560px){header .btn{display:none}}
:focus-visible{outline:2px solid var(--flower);outline-offset:3px;border-radius:2px}

.tabs{display:flex;gap:2px;margin-left:6px}
.tabs a{text-decoration:none;color:var(--ink-3);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:6px 11px;border-radius:var(--r-s);white-space:nowrap;
  transition:background var(--t-hover) ease,color var(--t-hover) ease}
.tabs a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.tabs a.on{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
@media (max-width:700px){.tabs a{padding:6px 8px;font-size:11.5px;letter-spacing:.05em}}