/* 지어 낸 파일이다. 손으로 고치지 않는다.
 * 원본: docs/design-system/DESIGN.md (판 3.1.0)
 * 다시 짓기: node scripts/design-tokens.ts
 */
@layer tokens, base, components;
@layer tokens {
  :root {
    --primitive-neutral-0: oklch(99.0% 0.003 128.5);
    --primitive-neutral-50: oklch(97.2% 0.007 132.4);
    --primitive-neutral-100: oklch(94.5% 0.010 155.1);
    --primitive-neutral-200: oklch(92.4% 0.020 166.0);
    --primitive-neutral-300: oklch(89.2% 0.013 157.0);
    --primitive-neutral-400: oklch(80.5% 0.022 158.5);
    --primitive-neutral-450: oklch(74.9% 0.026 166.8);
    --primitive-neutral-500: oklch(69.6% 0.028 162.8);
    --primitive-neutral-550: oklch(60.0% 0.026 166.0);
    --primitive-neutral-600: oklch(49.0% 0.019 172.0);
    --primitive-neutral-700: oklch(41.6% 0.027 171.5);
    --primitive-neutral-750: oklch(36.0% 0.024 172.0);
    --primitive-neutral-800: oklch(32.5% 0.023 173.6);
    --primitive-neutral-850: oklch(27.2% 0.018 172.5);
    --primitive-neutral-900: oklch(25.8% 0.015 174.8);
    --primitive-neutral-950: oklch(23.3% 0.015 174.6);
    --primitive-primary-200: oklch(87.5% 0.058 181.0);
    --primitive-primary-300: oklch(81.0% 0.082 180.5);
    --primitive-primary-400: oklch(74.9% 0.098 180.1);
    --primitive-primary-700: oklch(47.6% 0.080 184.5);
    --primitive-primary-800: oklch(40.0% 0.068 185.0);
    --primitive-primary-900: oklch(33.0% 0.055 185.5);
    --primitive-error-100: oklch(92.5% 0.040 40.0);
    --primitive-error-300: oklch(82.0% 0.085 42.0);
    --primitive-error-400: oklch(74.0% 0.123 41.2);
    --primitive-error-600: oklch(53.7% 0.162 35.7);
    --primitive-error-700: oklch(46.0% 0.145 35.0);
    --primitive-error-900: oklch(33.0% 0.095 34.0);
    --primitive-warning-400: oklch(80.0% 0.120 85.0);
    --primitive-warning-700: oklch(50.0% 0.098 72.0);
    --primitive-warning-900: oklch(35.0% 0.065 70.0);
    --primitive-scrim-light: oklch(23.3% 0.015 174.6 / 0.5);
    --primitive-scrim-dark: oklch(9.0% 0.010 174.6 / 0.72);
    --primitive-shade-light: oklch(23.3% 0.015 174.6 / 0.22);
    --primitive-shade-dark: oklch(0.0% 0.000 0.0 / 0.6);
    --surface-base: light-dark(var(--primitive-neutral-50), var(--primitive-neutral-950));
    --surface-raised: light-dark(var(--primitive-neutral-0), var(--primitive-neutral-850));
    --surface-sunken: light-dark(var(--primitive-neutral-100), var(--primitive-neutral-900));
    --surface-accent: light-dark(var(--primitive-neutral-200), var(--primitive-neutral-800));
    --surface-ink: var(--primitive-neutral-900);
    --surface-ink-hover: var(--primitive-neutral-800);
    --surface-scrim: light-dark(var(--primitive-scrim-light), var(--primitive-scrim-dark));
    --text-primary: light-dark(var(--primitive-neutral-900), var(--primitive-neutral-200));
    --text-secondary: light-dark(var(--primitive-neutral-600), var(--primitive-neutral-450));
    --text-on-ink: var(--primitive-neutral-200);
    --text-on-ink-dim: var(--primitive-neutral-450);
    --text-link: light-dark(var(--primitive-primary-700), var(--primitive-primary-400));
    --text-link-hover: light-dark(var(--primitive-primary-800), var(--primitive-primary-300));
    --border-default: light-dark(var(--primitive-neutral-400), var(--primitive-neutral-700));
    --border-subtle: light-dark(var(--primitive-neutral-300), var(--primitive-neutral-750));
    --border-strong: light-dark(var(--primitive-neutral-900), var(--primitive-neutral-200));
    --border-control: var(--primitive-neutral-550);
    --border-on-ink: var(--primitive-neutral-500);
    --border-focus: light-dark(var(--primitive-primary-700), var(--primitive-primary-400));
    --action-primary: light-dark(var(--primitive-primary-700), var(--primitive-primary-400));
    --action-primary-hover: light-dark(var(--primitive-primary-800), var(--primitive-primary-300));
    --action-primary-active: light-dark(var(--primitive-primary-900), var(--primitive-primary-200));
    --action-primary-text: light-dark(var(--primitive-neutral-0), var(--primitive-neutral-950));
    --action-secondary-hover: light-dark(var(--primitive-neutral-200), var(--primitive-neutral-800));
    --action-danger: light-dark(var(--primitive-error-600), var(--primitive-error-400));
    --action-danger-active: light-dark(var(--primitive-error-700), var(--primitive-error-300));
    --action-danger-text: light-dark(var(--primitive-neutral-0), var(--primitive-neutral-950));
    --status-info: light-dark(var(--primitive-primary-700), var(--primitive-primary-400));
    --status-warning: light-dark(var(--primitive-warning-700), var(--primitive-warning-400));
    --status-danger: light-dark(var(--primitive-error-600), var(--primitive-error-400));
    --ring-color: var(--border-focus);
    --shadow-color: light-dark(var(--primitive-shade-light), var(--primitive-shade-dark));
    --font-sans: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', sans-serif;
    --font-heading: 'Noto Serif KR Variable', 'Noto Serif KR', 'AppleMyungjo', 'Nanum Myeongjo', 'Batang', 'Noto Serif CJK KR', serif;
    --font-sans-ja: 'Noto Sans JP Variable', 'Noto Sans JP', 'Pretendard Variable', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
    --font-heading-ja: 'Noto Serif JP Variable', 'Noto Serif JP', 'Noto Serif KR Variable', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --font-sans-zh-hans: 'Noto Sans SC Variable', 'Noto Sans SC', 'Pretendard Variable', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-heading-zh-hans: 'Noto Serif SC Variable', 'Noto Serif SC', 'Noto Serif KR Variable', 'Songti SC', 'SimSun', serif;
    --font-sans-vi: 'Inter Variable', 'Inter', 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --font-heading-vi: 'Source Serif 4 Variable', 'Source Serif 4', 'Noto Serif KR Variable', 'Noto Serif KR', serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'D2Coding', monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.75rem;
    --text-4xl: 2.25rem;
    --text-5xl: 2.75rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.3;
    --leading-normal: 1.6;
    --tracking-tight: -0.02;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --size-control-md: 2.25rem;
    --size-control-sm: 1.875rem;
    --size-control-lg: 5.5rem;
    --size-touch: 2.75rem;
    --size-head: 3.25rem;
    --size-wrap: 72.5rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --line-default: 1px;
    --line-thick: 3px;
    --ring-width: 2px;
    --ring-offset: 2px;
    --shadow-overlay: 0 8px 28px var(--shadow-color);
    --opacity-disabled: 0.45;
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --ease-default: cubic-bezier(0.2, 0, 0, 1);
    --z-sticky: 100;
    --z-toast: 300;
  }
  /* 대비를 더 달라는 설정: 글자 7:1, 선 3:1 */
  @media (prefers-contrast: more) {
    :root {
      --text-secondary: light-dark(var(--primitive-neutral-800), var(--primitive-neutral-300));
      --text-on-ink-dim: var(--primitive-neutral-300);
      --text-link: light-dark(var(--primitive-primary-800), var(--primitive-primary-300));
      --text-link-hover: light-dark(var(--primitive-primary-900), var(--primitive-primary-200));
      --border-default: light-dark(var(--primitive-neutral-600), var(--primitive-neutral-500));
      --border-subtle: light-dark(var(--primitive-neutral-600), var(--primitive-neutral-500));
      --border-control: light-dark(var(--primitive-neutral-900), var(--primitive-neutral-200));
      --border-focus: light-dark(var(--primitive-primary-800), var(--primitive-primary-300));
      --action-primary: light-dark(var(--primitive-primary-800), var(--primitive-primary-300));
      --action-primary-hover: light-dark(var(--primitive-primary-900), var(--primitive-primary-200));
      --action-danger: light-dark(var(--primitive-error-700), var(--primitive-error-300));
      --action-danger-active: light-dark(var(--primitive-error-900), var(--primitive-error-100));
      --status-info: light-dark(var(--primitive-primary-800), var(--primitive-primary-300));
      --status-warning: light-dark(var(--primitive-warning-900), var(--primitive-warning-400));
      --status-danger: light-dark(var(--primitive-error-700), var(--primitive-error-300));
    }
  }
  /* 움직임을 줄이라는 설정: 시간 토큰을 0 으로 두어 모든 transition 을 끈다 */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-normal: 0ms;
    }
  }
}
/* 웹 화면의 컴포넌트. 색·치수·시간은 모두 design-tokens.css 의 토큰에서 온다(docs/design-system/DESIGN.md 4절). `node scripts/design-tokens.ts --check` 와 `npm test` 가 이를 검사한다.
   규칙은 층에 넣는다. 순서는 tokens, base, components 이고 뒤 층이 앞 층을 이긴다. 그래서 선택자를 길게 써서 이길 일이 없다.
   쪽 바탕과 글자 같은 문서 전체의 모양은 body.site 에만 건다. 3D 월드 화면(/world)은 머리말만 빌려 쓴다. 글꼴 파일은 /fonts.css 가 싣는다(apps/viewer/src/fonts.ts). */
@layer tokens, base, components;

@layer base {
  /* --head 는 위에 붙은 머리말의 높이다. 좁은 화면에서는 메뉴가 둘째 줄로 내려가 높아진다. 포커스 받은 것을 머리말이 가리지 않게 그만큼 비워 둔다(WCAG 2.4.11).
     --measure 는 읽기 편한 줄의 길이다(한글 마흔 자 남짓).
     --lh 와 --lh-tight 는 줄 높이다. 글자 크기에 본문은 1.6, 제목은 1.3 을 곱한 뒤 4px 격자에 맞춘다. 그래서 글줄과 선이 모두 4px 의 배수 자리에 놓인다. */
  :root { color-scheme: light dark; --gutter: var(--space-6); --head: var(--size-head); --measure: 44em; scroll-padding-top: calc(var(--head) + var(--space-6));
    --lh: round(nearest, calc(var(--leading-normal) * 1em), var(--space-1)); --lh-tight: round(nearest, calc(var(--leading-tight) * 1em), var(--space-1)); }
  .site-head, .site-head *, body.site, body.site * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body.site { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--surface-base); color: var(--text-primary);
    font: var(--weight-regular) var(--text-base)/var(--lh) var(--font-sans); word-break: keep-all; overflow-wrap: break-word; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
  /* 줄 높이는 물려받지 않고 요소마다 제 글자 크기로 다시 셈한다(물려받으면 큰 글자의 줄이 겹친다) */
  body.site :where(main, .site-foot, dialog) * { line-height: var(--lh); }
  body.site > main { flex: 1; display: flex; flex-direction: column; }
  /* 링크 색은 본문과 꼬리말과 대화상자에만 건다. 머리말의 링크는 먹색 바탕에 맞춘 제 색을 쓴다. */
  body.site :is(main, .site-foot, dialog) a { color: var(--text-link); text-decoration-thickness: from-font; text-underline-offset: 0.2em; }
  body.site :is(main, .site-foot, dialog) a:hover { color: var(--text-link-hover); }
  body.site :focus-visible, .site-head :focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
  /* 제목은 명조를 조금 굵게, 글자 사이를 조금 좁혀 쓴다. 줄이 바뀌면 두 줄의 길이를 맞춘다 */
  body.site :is(h1, h2, h3) { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-semibold); line-height: var(--lh-tight); letter-spacing: calc(var(--tracking-tight) * 1em); text-wrap: balance; }
  body.site p { margin: 0; max-width: var(--measure); }
  body.site :is(strong, b) { font-weight: var(--weight-bold); }
  body.site code, .mono { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
  /* 글 안에 섞인 고정폭 글자가 그 줄을 밀어 올리지 않게 제 줄 높이를 글자 크기에 맞춘다 */
  body.site :where(p, li, td, span, div) > code { line-height: 1; }
  /* 언어마다의 글자(DESIGN.md 3절 「글자」). 쪽의 언어(<html lang>)에 따라 글꼴을 그 문자 체계의 것으로 바꾼다. 글꼴은 body 에서 정해져 물려 내려가므로
     쪽 안의 한 요소에만 lang 을 달면 글꼴은 그대로다(꼬리말의 언어 이름은 쪽의 글꼴에 없는 글자만 컴퓨터의 글꼴로 그린다). 줄바꿈은 요소의 lang 도 따른다.
     한글의 word-break: keep-all 은 띄어쓰기가 없는 일본어와 중국어에서 줄을 끊지 못하게 하므로 되돌린다. 일본어는 줄 앞뒤에 오면 안 되는 글자(금칙)를 엄격하게 지킨다. */
  :lang(ja) { --font-sans: var(--font-sans-ja); --font-heading: var(--font-heading-ja); }
  :lang(zh) { --font-sans: var(--font-sans-zh-hans); --font-heading: var(--font-heading-zh-hans); }
  :lang(vi) { --font-sans: var(--font-sans-vi); --font-heading: var(--font-heading-vi); }
  body.site:is(:lang(ja), :lang(zh)), body.site :is(:lang(ja), :lang(zh)) { word-break: normal; }
  body.site:lang(ja), body.site :lang(ja) { line-break: strict; }
  body.site :lang(ko) { word-break: keep-all; } /* 일본어·중국어 쪽 안의 한국어(디자인 시스템 쪽의 본문)는 다시 낱말 단위로 끊는다 */
}

@layer components {
  /* ----- 틀 ----- */
  .wrap { width: 100%; max-width: var(--size-wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .dim { color: var(--text-secondary); }
  /* 쌓기: 안의 조각을 같은 간격으로 띄운다. 여백을 인라인 style 로 주지 않고 이것으로 준다. */
  .stack > * + * { margin-top: var(--space-4); }
  .stack.tight > * + * { margin-top: var(--space-2); }
  .stack.loose > * + * { margin-top: var(--space-6); }
  /* 한 줄: 단추와 꼬리표를 세로 가운데를 맞춰 나란히 놓는다. 넘치면 다음 줄로 간다 */
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  /* 본문으로 건너뛰는 링크: 탭으로 닿기 전에는 화면 위로 올려 둔다 */
  .skip { position: absolute; left: var(--gutter); top: var(--space-2); z-index: var(--z-toast); padding: var(--space-2) var(--space-3); background: var(--surface-raised); color: var(--text-link); border-radius: var(--radius-sm); transform: translateY(-300%); }
  .skip:focus { transform: none; }

  /* 머리말: 먹색. 3D 화면 위에도 놓이므로 밝기와 상관없이 같다. 지금 있는 쪽은 아래에 옥색 줄을 긋는다(데스크톱 앱의 탭 줄과 같다). */
  .site-head { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-ink); color: var(--text-on-ink); font: var(--weight-medium) var(--text-sm)/1 var(--font-sans); -webkit-font-smoothing: antialiased; --ring-color: var(--text-on-ink); }
  .site-head .wrap { display: flex; align-items: stretch; gap: 0 var(--space-8); }
  /* 이름과 메뉴의 링크는 머리말의 높이를 다 쓴다. 로그인 자리의 단추는 단추의 높이 그대로다 */
  .site-head .brand, .site-head nav a { min-height: var(--size-head); }
  .site-head a { display: flex; align-items: center; color: var(--text-on-ink-dim); text-decoration: none; border-block: var(--line-thick) solid transparent; transition: color var(--duration-fast) var(--ease-default); white-space: nowrap; }
  .site-head a:hover { color: var(--text-on-ink); }
  .site-head a[aria-current] { color: var(--text-on-ink); border-bottom-color: var(--text-on-ink); }
  .site-head .brand { gap: var(--space-2); font: var(--weight-semibold) var(--text-lg)/1 var(--font-heading); color: var(--text-on-ink); }
  .brand img { flex: none; border-radius: var(--radius-sm); }
  .site-head nav { display: flex; gap: var(--space-6); }
  .site-head .account { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--size-head); }
  .site-head .account .who { color: var(--text-on-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-head .account .btn { background: transparent; color: var(--text-on-ink); border: var(--line-default) solid var(--border-on-ink); }
  .site-head .account .btn:hover, .site-head .account .btn:active { background: var(--surface-ink-hover); color: var(--text-on-ink); }

  /* 머리띠: 쪽 제목을 받치는 옥색 띠 */
  .page-head { background: var(--surface-accent); }
  .page-head .wrap { padding-block: var(--space-12) var(--space-8); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); flex-wrap: wrap; }
  .page-head h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold); }
  .page-head .lede { margin-top: var(--space-3); font-size: var(--text-lg); max-width: 40em; }
  .page-head .acts { display: flex; gap: var(--space-2); }
  .page-body { flex: 1; }
  .page-body > .wrap { padding-block: var(--space-12) var(--space-24); }
  /* 구역: 구역과 구역 사이는 64px, 제목과 내용 사이는 그보다 훨씬 좁다. 제목 아래에 그 구역이 무엇인지 한 줄을 둘 때는 header 로 묶는다 */
  .page-body section + section { margin-top: var(--space-16); }
  .page-body h2 { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
  .page-body h3 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
  /* 소제목: 표와 견본 묶음의 이름. 곁글과 같은 크기라서 먹색과 굵기로 가른다 */
  .page-body h4 { margin: var(--space-8) 0 var(--space-3); font: var(--weight-semibold) var(--text-sm)/var(--lh) var(--font-sans); letter-spacing: 0; }
  .page-body section > header { margin-bottom: var(--space-6); }
  .page-body section > header > :is(h2, h3) { margin-bottom: var(--space-2); }
  /* 큰 묶음: 구역 여럿을 먹색 줄 아래에 모은다 */
  .page-body .group + .group { margin-top: var(--space-24); }
  .page-body .group > header { margin-bottom: var(--space-8); padding-top: var(--space-5); border-top: var(--line-default) solid var(--border-strong); }
  /* 묶음의 제목은 구역의 제목보다 크고 가늘다. 크기와 굵기 둘로 갈린다 */
  .page-body .group > header h2 { font-size: var(--text-3xl); font-weight: var(--weight-regular); }

  /* 곁메뉴(LNB)가 있는 틀: 본문 왼쪽에 한 묶음의 쪽들을 세로로 건다. 곁메뉴가 없는 쪽은 본문이 폭을 다 쓴다. */
  .with-lnb { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-6) var(--space-12); align-items: start; }
  /* 긴 본문을 내려도 머리말 아래에 붙어 따라온다. 지금 있는 쪽은 굵은 글자와 왼쪽 청록 줄로 짚는다(색만으로 알리지 않는다). */
  .lnb { position: sticky; top: calc(var(--head) + var(--space-8)); max-height: calc(100dvh - var(--head) - var(--space-12)); overflow-y: auto; }
  .lnb .title { font: var(--weight-semibold) var(--text-lg)/var(--lh-tight) var(--font-heading); margin-bottom: var(--space-2); padding-bottom: var(--space-3); border-bottom: var(--line-default) solid var(--border-subtle); }
  .lnb a + .title { margin-top: var(--space-6); }
  .lnb a { display: flex; align-items: center; min-height: var(--size-control-md); padding-inline: var(--space-3); border-inline-start: var(--line-thick) solid transparent; color: var(--text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease-default); }
  .lnb a:hover { color: var(--text-primary); }
  .lnb a[aria-current] { color: var(--text-primary); font-weight: var(--weight-bold); border-inline-start-color: var(--action-primary); }

  .site-foot { border-top: var(--line-default) solid var(--border-subtle); color: var(--text-secondary); font-size: var(--text-sm); }
  .site-foot .wrap { padding-block: var(--space-6); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); flex-wrap: wrap; }
  .site-foot .name { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--text-primary); margin-right: var(--space-3); }
  .site-foot nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
  /* 언어 고르기: 꼬리말의 마지막 줄. 언어 이름은 그 언어로 적고 지금 언어는 밑줄 없이 글자색으로 짚는다 */
  .site-foot .langs { flex-basis: 100%; gap: var(--space-4); }
  .site-foot .langs a[aria-current] { color: var(--text-primary); text-decoration: none; }

  /* ----- 단추: 올리면 바탕이 바뀌고 누르면 한 단계 더 짙어진다 ----- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--size-control-md); padding: 0 var(--space-4); border: var(--line-default) solid var(--border-control); border-radius: var(--radius-sm);
    background: var(--surface-raised); color: var(--text-primary); font: inherit; font-weight: var(--weight-medium); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); }
  /* 버금과 글자만 단추는 누를 때 올렸을 때의 바탕이 된다. 손가락으로 누르는 기기에는 올림이 없어서 이것이 눌렸다는 답이다. */
  .btn:hover, .btn:active { background: var(--action-secondary-hover); }
  .btn.sm { height: var(--size-control-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
  .btn.main { background: var(--action-primary); border-color: var(--action-primary); color: var(--action-primary-text); font-weight: var(--weight-semibold); }
  .btn.main:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
  .btn.main:active { background: var(--action-primary-active); border-color: var(--action-primary-active); }
  .btn.danger { border-color: var(--action-danger); color: var(--action-danger); }
  .btn.danger:hover { background: var(--action-danger); color: var(--action-danger-text); }
  .btn.danger:active { background: var(--action-danger-active); border-color: var(--action-danger-active); color: var(--action-danger-text); }
  .btn.ghost { background: transparent; border-color: transparent; color: var(--text-link); }
  .btn.ghost:hover, .btn.ghost:active { background: var(--action-secondary-hover); }
  .btn:disabled { opacity: var(--opacity-disabled); cursor: default; pointer-events: none; }

  /* ----- 입력란: 이름표, 칸, 도움말의 세 줄. 칸은 한 줄(input), 여러 줄(textarea), 고르기(select)가 같은 테를 쓴다 ----- */
  .field { display: grid; gap: var(--space-2); min-width: 0; align-content: start; }
  .field > span:first-child { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--lh-tight); }
  .field > .hint { font-size: var(--text-sm); line-height: var(--lh-tight); color: var(--text-secondary); }
  .field > .hint.error { color: var(--status-danger); }
  .input { height: var(--size-control-md); min-width: 0; padding: 0 var(--space-3); border: var(--line-default) solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-primary); font: inherit;
    transition: border-color var(--duration-fast) var(--ease-default); }
  textarea.input { height: var(--size-control-lg); min-height: var(--size-control-md); padding-block: var(--space-2); resize: vertical; }
  .input::placeholder { color: var(--text-secondary); }
  /* 포커스: 링을 테 위에 겹쳐 굵은 선 하나로 보인다(테와 링이 따로 놀지 않는다) */
  .input:focus-visible { border-color: var(--ring-color); outline-offset: calc(var(--line-default) * -1); }
  .input:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
  /* 잘못된 값: 주홍 테에 왼쪽 줄을 더한다(색만으로 알리지 않는다). 꼭 채울 칸은 사람이 손댄 뒤에 브라우저가 표시하고, 서버가 물리친 값에는 aria-invalid 를 단다. */
  .input:user-invalid, .input[aria-invalid=true] { border-color: var(--status-danger); border-inline-start-width: var(--line-thick); padding-inline-start: calc(var(--space-3) - var(--line-thick) + var(--line-default)); }
  /* 고르기: 브라우저의 화살표를 지우고 같은 자리에 꺾쇠를 그린다 */
  .select { position: relative; display: grid; min-width: 0; }
  .select > select { appearance: none; padding-inline-end: var(--space-8); }
  .select::after { content: ''; position: absolute; inset-inline-end: var(--space-4); top: 50%; width: .45em; height: .45em; border: solid var(--text-secondary); border-width: 0 var(--line-default) var(--line-default) 0; translate: 0 -70%; rotate: 45deg; pointer-events: none; }
  .fields { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
  .fields .field { flex: 1 1 14rem; }
  /* 도움말이 달린 칸과 단추를 나란히 놓으면 단추를 칸의 높이에 둔다. 이름표의 줄 높이(16px)와 그 아래 간격(8px)만큼 내린다 */
  .fields:has(.hint) { align-items: flex-start; }
  .fields:has(.hint) > .btn { margin-top: var(--space-6); }

  /* ----- 명부: 카드로 쪼개지 않고 가는 선으로 가른 목록. 먹색 줄 아래에 왼쪽부터 이름, 설명, 동작. 세 단은 모든 줄에서 같은 자리에 선다 ----- */
  .ledger { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; column-gap: var(--space-8); border-top: var(--line-default) solid var(--border-strong); }
  .ledger > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--space-2); align-items: baseline; padding-block: var(--space-5); border-bottom: var(--line-default) solid var(--border-subtle); }
  .ledger .name { font: var(--weight-semibold) var(--text-2xl)/var(--lh-tight) var(--font-heading); letter-spacing: calc(var(--tracking-tight) * 1em); }
  .ledger .name a { color: inherit; text-decoration: none; }
  .ledger .name a:hover { color: var(--text-link); }
  .ledger .sub { margin-top: var(--space-2); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-secondary); }
  .ledger .sub code { font-size: inherit; line-height: var(--lh); }
  .ledger .desc > * + * { margin-top: var(--space-2); }
  .ledger .meta { display: flex; gap: var(--space-1) var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-secondary); }
  .ledger .acts { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
  .ledger .said { padding-left: var(--space-3); border-left: var(--line-thick) solid var(--status-info); overflow-wrap: anywhere; }

  /* ----- 꼬리표: 상태를 한 낱말로. 색만으로 뜻을 전하지 않는다 ----- */
  .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border: var(--line-default) solid var(--border-default); border-radius: var(--radius-sm); font: var(--weight-medium) var(--text-xs)/1 var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
  .badge.on { border-color: var(--status-info); color: var(--status-info); }
  .badge.warn { border-color: var(--status-warning); color: var(--status-warning); }
  .badge.off { border-style: dashed; }

  /* ----- 알림: 왼쪽 줄의 색이 종류다. 청록은 안내, 황은 주의, 주홍은 오류 ----- */
  .note { max-width: var(--measure); padding: var(--space-3) var(--space-4); border: var(--line-default) solid var(--border-subtle); border-left: var(--line-thick) solid var(--status-info); border-radius: var(--radius-sm); background: var(--surface-raised); }
  .note.warn { border-left-color: var(--status-warning); }
  .note.error { border-left-color: var(--status-danger); }
  .note > * + * { margin-top: var(--space-2); }

  /* ----- 한 번만 보이는 값: 값 상자와 복사 단추의 높이가 같다 ----- */
  .secret { display: flex; gap: var(--space-2); align-items: stretch; max-width: var(--measure); }
  .secret .btn { height: auto; min-height: var(--size-control-md); }
  .secret code { flex: 1; min-width: 0; min-height: var(--size-control-md); display: flex; align-items: center; padding: var(--space-2) var(--space-3); background: var(--surface-sunken); border: var(--line-default) solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: var(--lh-tight); user-select: all; white-space: pre-wrap; }

  /* ----- 대화상자와 빈 화면 ----- */
  dialog.dialog { width: min(30rem, calc(100vw - var(--space-8))); padding: var(--space-6); border: var(--line-default) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-overlay);
    transition: opacity var(--duration-normal) var(--ease-default); }
  /* 열릴 때 나타난다. 닫을 때는 바로 사라진다. */
  @starting-style { dialog.dialog[open] { opacity: 0; } }
  dialog.dialog::backdrop { background: var(--surface-scrim); }
  dialog.dialog h2 { font-size: var(--text-xl); font-weight: var(--weight-medium); margin: 0 0 var(--space-3); }
  dialog.dialog .acts { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
  /* 빈 화면: 점선 테 안에 지금 상태 한 줄과 다음에 할 일 하나 */
  .empty { padding: var(--space-8) var(--space-6); border: var(--line-default) dashed var(--border-default); border-radius: var(--radius-md); }
  .empty h2 { font-size: var(--text-xl); font-weight: var(--weight-medium); margin: 0; }
  .empty p { margin-top: var(--space-2); color: var(--text-secondary); }
  .empty .btn { margin-top: var(--space-5); }

  /* ----- 채팅: 에이전트가 한 말은 오른쪽 옥색, 들은 말은 왼쪽 카드색. 누구의 말인지는 자리와 이름 둘 다로 알린다 ----- */
  .chat { margin-top: var(--space-6); max-height: 70dvh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); padding-block: var(--space-5); border-block: var(--line-default) solid var(--border-subtle); }
  .chat > .btn, .chat .aside { align-self: center; }
  .chat .aside { font-size: var(--text-xs); color: var(--text-secondary); }
  .chat .msg { max-width: min(36em, 85%); display: grid; gap: var(--space-1); justify-items: start; }
  .chat .msg.mine { align-self: flex-end; justify-items: end; }
  .chat .who { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-secondary); }
  .chat .bubble { padding: var(--space-2) var(--space-3); border: var(--line-default) solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
  .chat .mine .bubble { background: var(--surface-accent); border-color: transparent; }

  /* ----- 첫 화면(/): 옥색 띠에 한 줄 소개와 으뜸 단추. 이 쪽에서 눈길을 끄는 것은 월드의 실제 화면 하나이고 그 화면은 띠의 아래 끝에 걸쳐 종이로 넘어온다 ----- */
  .hero { background: var(--surface-accent); }
  .hero .wrap { padding-block: var(--space-16) calc(var(--space-16) * 3 + var(--space-12)); }
  .hero h1 { font-size: var(--text-5xl); font-weight: var(--weight-bold); }
  .hero .lede { margin-top: var(--space-5); max-width: 36em; font-size: var(--text-lg); }
  .hero .acts { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .hero .meta { margin-top: var(--space-3); display: flex; gap: var(--space-1) var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-secondary); }
  /* 띠 안으로 끌어올린다. 끌어올리는 만큼(64px 의 세 곱)이 띠의 아래 여백에 들어 있다 */
  .shot { margin: calc(var(--space-16) * -3 - var(--space-12)) 0 0; }
  /* 찍은 화면의 아래쪽은 빈 바닥이다. 위에 맞춰 2:1 로 잘라 캐릭터와 동상이 가운데 오게 한다 */
  .shot img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; border: var(--line-default) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); }
  .shot figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
  .shot + section { margin-top: var(--space-16); }
  .ledger + .note, .steps + p { margin-top: var(--space-6); }
  /* 시작하는 순서: 차례가 있는 일이라 번호를 붙인다. 명부와 같은 단으로 줄마다 왼쪽에 번호와 할 일, 오른쪽에 설명을 둔다 */
  .steps { margin: 0; padding: 0; list-style: none; border-top: var(--line-default) solid var(--border-strong); counter-reset: step; }
  .steps > li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-2) var(--space-8); align-items: baseline; padding-block: var(--space-5); border-bottom: var(--line-default) solid var(--border-subtle); counter-increment: step; }
  /* 번호는 제 단에 세운다. 제목이 두 줄이 되어도 둘째 줄이 제목 글 아래에서 시작한다 */
  .steps h3 { margin: 0; display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); font-size: var(--text-xl); font-weight: var(--weight-medium); }
  .steps h3::before { content: counter(step); color: var(--text-secondary); font-weight: var(--weight-regular); }

  /* ----- 디자인 시스템 쪽(/styleguide)에서만 쓰는 견본. 이 쪽도 명부처럼 짠다: 먹색 줄 아래에 줄마다 견본, 이름, 값을 적는다 ----- */
  /* 토큰 표: 세 단(견본, 토큰, 값과 쓰임새)이 모든 표에서 같은 자리에 선다. 이름과 값은 고정폭으로 줄을 맞춘다 */
  .tokens { width: 100%; table-layout: fixed; border-spacing: 0; font-size: var(--text-sm); }
  .tokens :is(th, td) { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: var(--line-default) solid var(--border-subtle); text-align: start; vertical-align: middle; }
  .tokens th { width: 30%; border-top: var(--line-default) solid var(--border-strong); font-weight: var(--weight-medium); color: var(--text-secondary); }
  .tokens th:first-child { width: 40%; }
  .tokens.colors th:nth-child(-n+2) { width: 20%; }
  .tokens :is(code, .val) { font: var(--text-xs)/var(--lh) var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tokens :is(code, .val) { display: block; }
  .tokens .val { color: var(--text-secondary); }
  .tokens .pair { display: flex; align-items: center; gap: var(--space-3); }
  /* 쓰임새에도 치수가 적힌다(4px, 36px). 숫자의 폭을 같게 해서 세로로 자리가 맞는다 */
  .tokens td:last-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  /* 색 조각: 밝은 화면의 값과 어두운 화면의 값을 나란히 보인다. 조각마다 그 밝기를 강제해서 light-dark() 가 그 값으로 풀린다 */
  /* 조각의 바탕에는 바둑판 무늬를 깔고 그 위에 색을 얹는다. 비치는 색(막, 그림자)은 무늬가 비쳐서 어느 바탕에서나 그 값이 보인다 */
  .chip { flex: none; display: block; width: 2.5rem; height: 1.5rem; border: var(--line-default) solid var(--border-default); border-radius: var(--radius-sm); }
  .chip, .swatch i { overflow: hidden; background: repeating-conic-gradient(var(--border-default) 0 25%, var(--surface-raised) 0 50%) 0 0 / var(--space-2) var(--space-2); }
  :is(.chip, .swatch i) b { display: block; height: 100%; }
  .chip.light { color-scheme: light; }
  .chip.dark { color-scheme: dark; }
  /* 값으로 그린 견본. 값은 견본마다 인라인 style 의 토큰 하나로 들어온다 */
  .tokens .draw { display: flex; align-items: center; min-height: var(--size-control-md); }
  .draw .bar { height: var(--space-3); background: var(--text-primary); }
  .draw .tall { width: var(--space-16); border: var(--line-default) solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-raised); }
  .draw .corner { width: var(--space-12); height: var(--space-8); border: var(--line-default) solid var(--border-control); background: var(--surface-raised); }
  .draw .rule { width: var(--space-16); border-top: 0 solid var(--text-primary); }
  .draw .ring { width: var(--space-12); height: var(--space-6); margin: var(--space-2) 0 var(--space-2) calc(var(--ring-width) + var(--ring-offset)); border-radius: var(--radius-sm); background: var(--surface-raised); outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); }
  /* 대화상자처럼 가는 테를 두른다. 어두운 화면에서는 그림자가 바탕에 묻혀서 테가 판을 가른다 */
  .draw .lifted { width: var(--space-16); height: var(--space-8); margin-block: var(--space-4) var(--space-8); margin-inline-start: var(--space-4); border: var(--line-default) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); }
  .draw .faded { width: var(--space-16); height: var(--space-6); border-radius: var(--radius-sm); background: var(--text-primary); }
  /* 견본 글은 칸이 좁으면 낱말 사이에서 줄을 바꾼다. 옆 칸으로 넘어가지 않는다 */
  .draw .type { min-width: 0; line-height: var(--lh-tight); text-wrap: balance; }
  .draw .specimen { font-size: var(--text-xl); }
  /* 줄 높이의 견본은 20px 글자로 그린다. 1.3 과 1.6 을 곱한 줄이 그대로 보인다 */
  .draw .lines { width: 11em; font-size: var(--text-xl); }
  /* 시간과 가속: 시간은 길이로, 가속은 곡선으로 그린다. 줄에 올리면 그 시간과 가속으로 점이 움직인다 */
  .draw svg { display: block; overflow: visible; fill: none; stroke: var(--text-primary); }
  .draw .span { width: var(--space-24); height: var(--space-3); }
  .draw .span rect { fill: var(--text-primary); stroke: none; }
  .draw .curve { width: var(--space-12); height: var(--space-12); margin-block: var(--space-2); }
  .draw .curve path { vector-effect: non-scaling-stroke; stroke-width: var(--ring-width); }
  .draw .curve line { vector-effect: non-scaling-stroke; stroke: var(--border-default); stroke-width: var(--line-default); }
  .draw .move { width: var(--space-3); height: var(--space-3); margin-inline-start: var(--space-4); border-radius: 50%; background: var(--text-primary); transition: translate var(--duration-normal) var(--ease-default); }
  .tokens tr:hover .move { translate: var(--space-16); }
  /* 원시 색: 뜻 토큰이 가리키는 값의 재료. 조각마다 이름과 값을 적는다 */
  /* 넉넉하면 네 칸, 좁으면 두 칸, 이름이 들어가지 않을 만큼 좁으면 한 칸에 놓는다. 마지막 줄에 한 칸이 혼자 남지 않게 조각이 셋인 묶음은 두 칸 대신 세 칸에, 그것도 좁으면 한 칸에 놓는다 */
  .swatches { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-5) var(--space-4); }
  .swatch { font-size: var(--text-xs); line-height: var(--lh); }
  /* 테는 바탕과 같은 색의 조각도 보이게 가는 선보다 짙은 선으로 두른다 */
  .swatch i { display: block; height: var(--space-12); margin-bottom: var(--space-2); border: var(--line-default) solid var(--border-default); border-radius: var(--radius-sm); }
  .swatch :is(code, .val) { display: block; font: inherit; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .swatch span { display: block; color: var(--text-secondary); }
  /* 컴포넌트 견본: 줄마다 왼쪽에 이름과 만드는 법, 가운데에 견본, 오른쪽에 쓰임새. 넓어야 하는 견본(.wide)은 가운데와 오른쪽을 함께 쓴다 */
  .specs { margin: 0; padding: 0; list-style: none; border-top: var(--line-default) solid var(--border-strong); }
  .specs > li { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 15rem; gap: var(--space-3) var(--space-8); align-items: center; padding-block: var(--space-5); border-bottom: var(--line-default) solid var(--border-subtle); }
  .specs > li.wide { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .specs > li.wide .what { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--space-8); }
  .specs > li.wide .what code { grid-column: 1; }
  .specs > li.wide .what .why { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
  .specs .what { font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .specs .what code { display: block; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-secondary); overflow-wrap: normal; }
  .specs .why { font-size: var(--text-sm); color: var(--text-secondary); }
  .specs .what .why { margin-top: var(--space-2); font-weight: var(--weight-regular); }
  .specs .show { min-width: 0; }
  /* 견본으로 넣은 채팅과 명부는 제 아래 선을 긋지 않는다. 견본의 줄이 이미 선으로 닫힌다 */
  .specs .show > .chat { margin-top: 0; padding-block: 0; border: 0; }
  .specs .show > .ledger > li:last-child { border-bottom: 0; padding-bottom: 0; }
  /* 만드는 법: 구역의 머리에 그 컴포넌트를 만드는 함수를 적는다 */
  .usage { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); }
  .usage code { font-size: var(--text-xs); line-height: var(--lh); white-space: nowrap; }
  /* 틀의 밑그림: 머리말, 머리띠, 곁메뉴, 본문의 자리를 작게 그린다 */
  .mini { width: 12rem; aspect-ratio: 16 / 10; display: grid; grid-template: "top top" var(--space-3) "band band" var(--space-5) "side body" 1fr / var(--space-12) 1fr; border: var(--line-default) solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-base); }
  .mini .top { grid-area: top; background: var(--surface-ink); border-block-end: var(--line-default) solid var(--border-default); }
  .mini .band { grid-area: band; background: var(--surface-accent); }
  .mini .side { grid-area: side; border-inline-end: var(--line-default) solid var(--border-default); }
  /* 쪽 견본: 쪽 하나를 통째로 보일 때 가는 테를 두른다 */
  .frame { border: var(--line-default) solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
  .frame .wrap { padding-inline: var(--space-8); }

  /* 디자인 시스템 쪽의 견본은 그 구역의 폭에 맞춰 다시 짠다. 화면의 폭은 보지 않는다. 곁메뉴가 있으면 같은 화면에서도 구역이 좁다 */
  .page-body .group > section { container-type: inline-size; }
  @container (max-width: 50rem) {
    .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .swatches:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 견본 명세: 쓰임새가 견본 아래로 간다 */
    .specs > li { grid-template-columns: 15rem minmax(0, 1fr); }
    .specs > li > .why { grid-column: 2; }
  }
  @container (max-width: 44rem) {
    /* 토큰 표: 줄마다 견본을 위에, 이름과 값을 그 아래에 쌓는다. 머리 줄을 지우는 대신 색 조각 위에 어느 화면의 값인지 적는다 */
    .tokens, .tokens tbody { display: block; }
    .tokens { border-top: var(--line-default) solid var(--border-strong); }
    .tokens thead { display: none; }
    .tokens tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-bottom: var(--line-default) solid var(--border-subtle); }
    .tokens td { padding: 0; border: 0; }
    .tokens td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); }
    .tokens td:nth-child(n+3), .tokens:not(.colors) td { grid-column: 1 / -1; }
  }
  @container (max-width: 34rem) {
    .swatches:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
    .specs > li, .specs > li.wide .what { grid-template-columns: minmax(0, 1fr); }
    .specs > li > .why { grid-column: 1; }
    .specs > li.wide .what .why { grid-column: 1; grid-row: auto; margin-top: var(--space-2); }
  }
  @container (max-width: 21.75rem) { .swatches { grid-template-columns: minmax(0, 1fr); } }

  /* 어중간한 폭: 곁메뉴가 본문을 좁히지 않게 본문 위에 가로로 눕힌다. 넘치면 다음 줄로 넘어간다. 지금 있는 쪽의 줄은 아래로 옮긴다. */
  @media (max-width: 960px) {
    .with-lnb { grid-template-columns: minmax(0, 1fr); }
    .lnb { position: static; max-height: none; display: flex; flex-wrap: wrap; }
    /* 묶음의 이름은 그 묶음의 링크들 앞에 한 줄로 작게 적는다 */
    .lnb .title { flex: 0 0 100%; margin: 0; padding: var(--space-3) var(--space-3) 0; border: 0; font: var(--weight-semibold) var(--text-xs)/var(--lh) var(--font-sans); color: var(--text-secondary); }
    .lnb a + .title { margin-top: 0; }
    .lnb a { border-inline-start: 0; border-block-end: var(--line-thick) solid transparent; }
    .lnb a[aria-current] { border-block-end-color: var(--action-primary); }
  }
  @media (max-width: 640px) {
    :root { --gutter: var(--space-4); --head: calc(var(--size-head) + var(--size-touch)); }
    /* 머리말: 메뉴가 둘째 줄로 내려간다 */
    .site-head .wrap { flex-wrap: wrap; column-gap: var(--space-4); }
    .site-head nav { order: 1; flex: 0 0 100%; gap: var(--space-5); }
    .site-head nav a { min-height: var(--size-touch); }
    .hero .wrap { padding-block: var(--space-12) calc(var(--space-16) + var(--space-8)); }
    .hero h1 { font-size: var(--text-3xl); }
    .shot { margin-top: calc(var(--space-16) * -1 - var(--space-6)); }
    .steps > li { grid-template-columns: minmax(0, 1fr); }
    .page-head .wrap { padding-block: var(--space-8) var(--space-6); }
    .page-head h1 { font-size: var(--text-3xl); }
    .page-head .lede { font-size: var(--text-base); }
    .page-body > .wrap { padding-block: var(--space-8) var(--space-16); }
    .page-body h2 { font-size: var(--text-xl); }
    .page-body h3 { font-size: var(--text-xl); }
    .page-body .group > header h2 { font-size: var(--text-2xl); }
    .ledger { grid-template-columns: minmax(0, 1fr); }
    .btn, .input, .lnb a { min-height: var(--size-touch); }
    /* 꼬리말의 메뉴와 명부의 이름도 손가락으로 누르는 자리다 */
    .site-foot nav a, .ledger .name a { display: inline-flex; align-items: center; min-height: var(--size-touch); }
    .secret .btn { min-height: var(--size-touch); }
    .frame .wrap { padding-inline: var(--space-4); }
  }
  /* 손가락으로 누르는 기기에서는 폭과 상관없이 누르는 자리를 키운다 */
  @media (pointer: coarse) { .btn, .input, .lnb a { min-height: var(--size-touch); } }
  @media (pointer: coarse) { .secret .btn { min-height: var(--size-touch); } }

  /* 강제 색(Windows 의 고대비 테마): 바탕색이 지워지고 테는 글자색으로 그려진다. 색으로만 갈리던 것을 시스템 색으로 가른다. */
  @media (forced-colors: active) {
    /* 으뜸 단추: 바탕이 지워지면 버금 단추와 같아 보이므로 시스템의 강조 색으로 채운다 */
    .btn.main, .btn.main:hover, .btn.main:active { background: Highlight; color: HighlightText; border-color: Highlight; }
    /* 머리말: 투명하던 줄이 다 보이게 되므로 바탕색으로 숨기고 지금 있는 쪽에만 긋는다 */
    .site-head a { border-block-color: Canvas; }
    .site-head a[aria-current] { border-block-end-color: Highlight; }
    /* 곁메뉴도 같다 */
    .lnb a { border-color: Canvas; }
    .lnb a[aria-current] { border-color: Highlight; }
    /* 색 견본은 제 색을 보여야 한다 */
    .swatch i, .chip { forced-color-adjust: none; }
  }
}