/* 기반 — 리셋과 타이포그래피
   글자 크기가 커질수록 자간을 조이고 행간을 좁힌다. 본문은 행간 1.6으로 넉넉히 둔다. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px)}
:target,[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink-body);
  font-family:var(--font);
  font-size:var(--t-body-md);
  line-height:var(--t-body-md-lh);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv01";
  text-rendering:optimizeLegibility;
}

:where(h1,h2,h3,h4,h5,h6){margin:0;color:var(--ink);font-weight:700;text-wrap:balance}
:where(p,figure,blockquote,dl,dd){margin:0}
:where(ul,ol){margin:0;padding:0;list-style:none}
:where(img,svg,video,canvas){display:block;max-width:100%}
:where(img,video){height:auto}
:where(button,input,select,textarea){font:inherit;color:inherit;margin:0}
:where(button){background:none;border:0;padding:0;cursor:pointer}
:where(a){color:inherit;text-decoration:none}
:where(hr){border:0;height:1px;background:var(--line);margin:0}
:where(table){border-collapse:collapse;width:100%}
:where(fieldset){border:0;padding:0;margin:0}
:where(legend){padding:0}

/* 포커스 — 키보드일 때만. 마우스 클릭에는 링이 뜨지 않는다. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus{outline:none}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

::selection{background:var(--accent-soft);color:var(--accent-text)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 타이포 유틸 ──────────────────────────────────────────
   한 클래스가 크기·행간·자간·굵기를 함께 옮긴다. 따로 지정하지 않는다. */
.t-display-2xl{font-size:var(--t-display-2xl);line-height:var(--t-display-2xl-lh);letter-spacing:var(--t-display-2xl-ls);font-weight:var(--t-display-2xl-w)}
.t-display-xl {font-size:var(--t-display-xl);line-height:var(--t-display-xl-lh);letter-spacing:var(--t-display-xl-ls);font-weight:var(--t-display-xl-w)}
.t-display-lg {font-size:var(--t-display-lg);line-height:var(--t-display-lg-lh);letter-spacing:var(--t-display-lg-ls);font-weight:var(--t-display-lg-w)}
.t-display-md {font-size:var(--t-display-md);line-height:var(--t-display-md-lh);letter-spacing:var(--t-display-md-ls);font-weight:var(--t-display-md-w)}
.t-display-sm {font-size:var(--t-display-sm);line-height:var(--t-display-sm-lh);letter-spacing:var(--t-display-sm-ls);font-weight:var(--t-display-sm-w)}
.t-heading-xl {font-size:var(--t-heading-xl);line-height:var(--t-heading-xl-lh);letter-spacing:var(--t-heading-xl-ls);font-weight:var(--t-heading-xl-w)}
.t-heading-lg {font-size:var(--t-heading-lg);line-height:var(--t-heading-lg-lh);letter-spacing:var(--t-heading-lg-ls);font-weight:var(--t-heading-lg-w)}
.t-heading-md {font-size:var(--t-heading-md);line-height:var(--t-heading-md-lh);letter-spacing:var(--t-heading-md-ls);font-weight:var(--t-heading-md-w)}
.t-heading-sm {font-size:var(--t-heading-sm);line-height:var(--t-heading-sm-lh);letter-spacing:var(--t-heading-sm-ls);font-weight:var(--t-heading-sm-w)}
.t-body-lg    {font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh)}
.t-body-md    {font-size:var(--t-body-md);line-height:var(--t-body-md-lh)}
.t-body-sm    {font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.t-body-xs    {font-size:var(--t-body-xs);line-height:var(--t-body-xs-lh)}
.t-caption    {font-size:var(--t-caption);line-height:var(--t-caption-lh)}
.t-micro      {font-size:var(--t-micro);line-height:var(--t-micro-lh)}
.t-nano       {font-size:var(--t-nano);line-height:var(--t-nano-lh)}

/* 큰 제목은 좁은 화면에서 한 단계씩 내린다. 본문은 그대로 둔다. */
@media (max-width:1023px){
  .t-display-2xl{font-size:64px;line-height:74px;letter-spacing:-1.28px}
  .t-display-xl {font-size:52px;line-height:62px;letter-spacing:-1.04px}
  .t-display-lg {font-size:44px;line-height:54px;letter-spacing:-.88px}
  .t-display-md {font-size:38px;line-height:48px;letter-spacing:-.76px}
  .t-display-sm {font-size:32px;line-height:42px;letter-spacing:-.64px}
  .t-heading-xl {font-size:28px;line-height:38px;letter-spacing:-.56px}
}
@media (max-width:640px){
  .t-display-2xl{font-size:40px;line-height:50px;letter-spacing:-.8px}
  .t-display-xl {font-size:36px;line-height:46px;letter-spacing:-.72px}
  .t-display-lg {font-size:32px;line-height:42px;letter-spacing:-.64px}
  .t-display-md {font-size:28px;line-height:38px;letter-spacing:-.56px}
  .t-display-sm {font-size:24px;line-height:33px;letter-spacing:-.48px}
  .t-heading-xl {font-size:22px;line-height:31px;letter-spacing:-.44px}
  .t-heading-lg {font-size:20px;line-height:29px;letter-spacing:-.4px}
}

/* 색·굵기 유틸 — 타이포 클래스와 조합해 쓴다 */
.ink{color:var(--ink)}
.ink-body{color:var(--ink-body)}
.ink-muted{color:var(--ink-muted)}
.ink-subtle{color:var(--ink-subtle)}
.ink-accent{color:var(--accent-text)}
.ink-invert{color:var(--ink-invert)}
/* 틴트 면 위에서는 보조색을 한 단계 진하게 쓴다 */
.on-alt .ink-muted{color:var(--ink-muted-alt)}
.w-400{font-weight:400}.w-500{font-weight:500}.w-600{font-weight:600}.w-700{font-weight:700}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-variant-ligatures:none}
.balance{text-wrap:balance}
.pretty{text-wrap:pretty}
/* 본문 한 줄 길이를 65자 근처로 묶는다 */
.measure{max-width:34em}
.measure-narrow{max-width:26em}