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

*,*::before,*::after{box-sizing:border-box}
/* 앵커·포커스로 옮길 때 내비에 가리지 않게: 스크롤 쪽(html)의 scroll-padding 한 곳에서만 띄운다.
   요소의 scroll-margin 까지 내비 높이로 주면 둘이 더해져 제목이 내비 아래로 한참 내려와 멈춘다(더 띄울 때만 작은 값으로) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Turbo 가 페이지를 바꾸는 동안(html[aria-busy])에는 부드러운 스크롤을 끈다. 뒤로 가기에서 이전 스크롤 위치를 바로 되돌리기 위해서다. */
html[aria-busy="true"]{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}
/* 한국어는 어절 단위로 줄을 바꾼다. "예약하\n고"처럼 낱글자에서 끊기지 않게.
   공백 없는 긴 문자열(주소·메일)은 break-word 가 마지막에 끊는다. */
:where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,.btn,.badge,.pill){word-break:keep-all;overflow-wrap:break-word}
/* hidden 은 언제나 이긴다. display 를 가진 클래스(.btn·.callout·.empty 등)에 hidden 을 붙여도 숨는다. */
[hidden]{display:none !important}
/* 줄로 흐르는 보조문(목록 행 둘째 줄·입력 도움말·캡션·본문 크기 클래스)도 어절 단위로 바꾼다. span·div 로 쓰여도 같게.
   좁은 가로 줄(flex)에서 긴 어절 때문에 폭이 밀리지 않게 anywhere 로 둔다. */
:where(.row-item__sub,.field__help,.memory-row__meta span,.t-body-lg,.t-body-md,.t-body-sm,.t-body-xs,.t-caption,
  .callout__body,.empty__title,.empty__desc,.sheet__head,.toast__text,.menu__item,.picker__opt,.choice__text,.accordion__body,.feature__desc,.stat__label){word-break:keep-all;overflow-wrap:anywhere}
/* 문단 끝 줄에 "있어요." 한 어절만 남지 않게 한다. 크롬 130+·사파리 26+ 에서 마지막 줄을 앞 줄과 나눠 채우고, 그 밖의 브라우저는 지금처럼 바꾼다.
   줄바꿈 방식(nowrap 여부)을 건드리지 않도록 줄임형 text-wrap 이 아니라 text-wrap-style 만 준다. */
:where(p,li,dd,figcaption,label,blockquote,.row-item__title,.row-item__sub,.field__help,.memory-row__meta span,.t-body-lg,.t-body-md,.t-body-sm,.t-body-xs,.t-caption,.callout__body,.empty__desc,.toast__text,.accordion__body){text-wrap-style:pretty}
/* 입력칸도 어절 단위로 바꾼다("잡아 / 줘."처럼 낱말 중간에서 끊지 않게). 공백 없는 긴 주소는 칸 밖으로 넘치지 않게 어디서든 끊는다. */
:where(textarea){word-break:keep-all;overflow-wrap:anywhere}
: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}
.nowrap{white-space:nowrap}
/* 번호·해시·시각·코드: 글꼴은 본문과 같은 Pretendard(--font-mono 도 Pretendard), 숫자만 고정폭으로 맞춘다.
   브라우저 기본값(code·kbd·samp·pre 의 monospace)도 같은 글꼴로 바꿔, 개발자 글꼴이 화면에 섞여 나오지 않게 한다. */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-variant-ligatures:none}
:where(code,kbd,samp,pre,tt){font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.balance{text-wrap:balance}
.pretty{text-wrap:pretty}
/* 본문 한 줄 길이를 65자 근처로 묶는다 */
.measure{max-width:34em}
.measure-narrow{max-width:26em}