/* guide/guide.css — 생성물이다. 직접 고치지 마라(다음 gen:all이 조용히 되돌린다).
   출처: src-react/css/design/tokens.css + src-react/css/design/base.css + src-react/css/design/components/layout.css + src-react/css/design/components/nav.css + src-react/css/design/components/button.css + src-react/css/design/utilities.css + src-react/css/design/soft-tokens.css
        + src-react/css/design/screens/guide.css
   생성기: scripts/gen-guide-css.mjs · 재생성: npm run gen:guidecss */

/* src-react/css/design/tokens.css */
:root {
  --ground: #faf8f3;
  --paper-2: #f2efe7;
  --ink: #16150f;
  --ink-2: #57544a;
  --ink-3: #6e6b60;
  --ink-4: #8a877d;
  --line: #e4e1d8;
  --line-2: #ece9e1;
  --line-3: #cfcbbf;
  --rule-strong: #918e80;
  --accent: #b32a1e;
  --accent-hover: #8f2317;
  --ok: #16150f;
  --chart-1: #16150f;
  --chart-2: #57544a;
  --chart-3: #6e6b60;
  --chart-4: #cfcbbf;
  --chart-grid: #ece9e1;
  --chart-area: rgba(22, 21, 15, .06);
  --scrim: rgba(22, 21, 15, .48);
}
body {
  --font: 'IBM Plex Sans KR', -apple-system, BlinkMacSystemFont,
  'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
  --fs-result: 46px;
  --fs-result-unit: 21px;
  --lh-result: 1.06;
  --ls-result: -.04em;
  --fs-h1: 26px;      --lh-h1: 1.15;      --ls-h1: -.025em;
  --fs-chapter: 18px; --lh-chapter: 1.3;  --ls-chapter: -.02em;
  --fs-section: 14px; --lh-section: 1.4;  --ls-section: -.01em;
  --fs-sub: 15px;     --lh-sub: 1.4;
  --fs-body: 15px;    --lh-body: 1.6;
  --fs-body-sm: 14px;
  --fs-read: 17px;    --lh-read: 1.8;
  --fs-cell: 14px;    --lh-cell: 1.4;     --ls-cell: -.02em;
  --fs-label: 12px;   --lh-label: 1.4;    --ls-label: .12em;
  --fs-note: 12.5px;  --lh-note: 1.55;
  --fs-badge: 11.5px;
  --fs-input: 28px;   --fs-unit: 13px;    --fs-control: 13.5px;
  --fw-normal: 400;
  --fw-semi: 600;
  --fw-bold: 700;
  --fs-10: 10px; --fs-10h: 10.5px; --fs-11: 11px; --fs-11h: 11.5px; --fs-12: 12px; --fs-12h: 12.5px; --fs-13: 13px; --fs-13h: 13.5px;
  --fs-14: 14px; --fs-14h: 14.5px; --fs-15: 15px; --fs-15h: 15.5px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px;
  --fs-21: 21px; --fs-22: 22px; --fs-24: 24px; --fs-26: 26px; --fs-28: 28px; --fs-30: 30px; --fs-32: 32px; --fs-34: 34px; --fs-36: 36px; --fs-38: 38px;
  --fs-40: 40px; --fs-42: 42px; --fs-44: 44px; --fs-46: 46px; --fs-52: 52px; --fs-60: 60px; --fs-64: 64px; --fs-72: 72px; --fs-88: 88px; --fs-108: 108px;
  --fw-medium: 500;
  --sp-chapter: 48px;
  --sp-section: 32px;
  --sp-cell: 16px;
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;
  --sp-4: 10px; --sp-5: 12px; --sp-6: 14px;
  --sp-7: 18px; --sp-8: 22px; --sp-9: 26px;
  --w-page: 1440px;
  --w-read: 66ch;
  --w-article: 680px;
  --pad-page: 20px;
  --h-touch: 44px;
  --h-header: 56px;
  --h-cta-mobile: 52px;
  --uline: 2px;
  --uline-weak: 1px;
  --radius: 0;
  --shadow: none;
  --r-map: 999px;
  --dur-fade: 120ms;
  --dur-collapse: 180ms;
  --dur-panel: 200ms;
  --dur-sheet: 240ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --z-sticky: 10; --z-pickbar: 20; --z-sheet: 30; --z-toast: 40;
  --tabbar-h: 0px;
}
@media (max-width: 767px) {

}
@media (min-width: 768px) {
  body {
    --pad-page: 40px;
    --fs-result: 72px; --fs-result-unit: 32px;
    --fs-h1: 34px;
    --fs-chapter: 26px;
    --fs-section: 15px;
    --fs-input: 22px;
    --sp-chapter: 96px;
    --sp-section: 56px;
  }
}
@media (min-width: 1024px) {
  body {
    --pad-page: 88px;
    --fs-result: 108px; --fs-result-unit: 44px; --ls-result: -.045em; --lh-result: 1.02;
  }
}
body {
  --c-ground: var(--ground);
  --c-card: var(--ground);
  --c-field: var(--ground);
  --c-field-line: var(--rule-strong);
  --c-hairline: var(--line);
  --c-track: var(--line-2);
  --c-ink: var(--ink);
  --c-muted: var(--ink-3);
  --c-rule: var(--ink);
  --c-brand: var(--accent);
  --c-brand-fill: var(--ink);
  --c-on-fill: var(--ground);
  --c-brand-tint: var(--line-2);
  --c-warn: var(--ink-2);
  --ch-1: var(--chart-1); --ch-2: var(--chart-2); --ch-3: var(--chart-3);
  --ch-4: var(--chart-4); --ch-5: var(--line-2);
  --ch-grid: var(--chart-grid); --ch-area: var(--chart-area); --ch-select: var(--accent);
  --sh-card: none; --sh-float: none;
  --r-field: 0; --r-card: 0; --r-pill: 0;
  --fs-caption: var(--fs-label);
  --fs-lead: var(--fs-sub);
  --fs-title: var(--fs-chapter);
  --fs-hero: var(--fs-h1);
  --lh-lead: var(--lh-sub);
  --lh-title: var(--lh-chapter);
  --lh-hero: var(--lh-h1);
  --ls-lead: 0;
  --ls-title: var(--ls-chapter);
  --ls-hero: var(--ls-h1);
  --fw-black: var(--fw-bold);
  --sp-tight: var(--sp-2);
  --sp-field: var(--sp-5);
  --sp-group: var(--sp-cell);
  --h-ctl: var(--h-touch);
  --h-field-table: 38px;
  --dur-1: var(--dur-fade);
  --dur-2: var(--dur-collapse);
  --dur-chart: 600ms;
}
/* 다크 — 앱은 <html data-theme>로 고르지만 가이드엔 스크립트가 없다(gen-guide-css.mjs) */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #15171a;
    --paper-2: #1b1e22;
    --ink: #e9eaec;
    --ink-2: #b9bbbe;
    --ink-3: #8b8880;
    --ink-4: #6f6d68;
    --line: #2b2e33;
    --line-2: #24272b;
    --line-3: #3a3e44;
    --rule-strong: #68655f;
    --accent: #e2604f;
    --accent-hover: #ef7a68;
    --ok: #e9eaec;
    --chart-1: #e9eaec;
    --chart-2: #a7a39a;
    --chart-3: #8b8880;
    --chart-4: #4a4842;
    --chart-grid: #24272b;
    --chart-area: rgba(233, 234, 236, .07);
    --scrim: rgba(0, 0, 0, .62);
  }
}

/* src-react/css/design/base.css */
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { color: var(--ink); font-weight: var(--fw-bold); }
:where(a) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(a):hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}
:where(a):visited {
  color: var(--ink-2);
  text-decoration-color: var(--line-3);
}
button:not(.btn):not(.chip):not(.seg-item):not(.tab):not(.icon-btn):not(.switch):not(.pg-btn) {
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.u { color: var(--ink-3); font-weight: var(--fw-normal); }
.t-result .u { font-size: var(--fs-result-unit); color: var(--ink-2); font-weight: var(--fw-semi); }
.t-h1 .u, .t-chapter .u { font-size: var(--fs-body); }
.t-body .u, .t-note .u, .t-label .u { font-size: var(--fs-badge); }
.sign { display: inline-block; width: .62em; color: var(--ink-3); }
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}
@keyframes ds-shimmer {
  from { background-position: 200% 0; } to { background-position: -200% 0; }
}
@keyframes ds-grow {
  from { transform: scaleY(0); } to { transform: scaleY(1); }
}
@keyframes ds-growx {
  from { transform: scaleX(0); } to { transform: scaleX(1); }
}
@keyframes ds-rise {
  from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; }
}
@keyframes ds-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* src-react/css/design/components/layout.css */
.page {
  max-width: var(--w-page); width: 100%; min-width: 0; margin: 0 auto;
  padding: var(--sp-section) var(--pad-page) var(--sp-chapter);
  display: flex; flex-direction: column; gap: var(--sp-section);
}
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.page > *, .stack > *, .card > *, .field > * { min-width: 0; }
.nav-move, .chips-scroll, .table-wrap, .tabs { contain: inline-size; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-cell); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-cell); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-cell); }
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}
.chapter {
  display: flex; flex-direction: column; gap: var(--sp-cell);
  border-top: 1px solid var(--ink); padding-top: var(--sp-cell);
}
.chapter + .chapter { margin-top: var(--sp-chapter); }
.sec {
  display: flex; flex-direction: column; gap: var(--sp-cell);
  border-top: 1px solid var(--line); padding-top: var(--sp-cell);
}
.sec + .sec { margin-top: var(--sp-section); }
.card {
  display: flex; flex-direction: column; gap: var(--sp-cell);
  background: none; box-shadow: none; border-radius: 0;
  border: 0; border-top: 1px solid var(--line);
  padding: var(--sp-cell) 0 0;
}
.card .card { border-top: 0; padding-top: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.eyebrow {
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); font-weight: var(--fw-semi); color: var(--ink-2);
}
.prose { max-width: var(--w-read); }
.has-fixed-cta { padding-bottom: calc(var(--h-cta-mobile) + env(safe-area-inset-bottom) + var(--sp-cell)); }

/* src-react/css/design/components/nav.css */
.header {
  display: flex; align-items: baseline; gap: 40px;
  padding: 26px var(--pad-page) 22px;
  background: var(--ground); border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.logo {
  flex: none; display: inline-block;
  font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: -.03em; line-height: 1.5;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo:hover { color: var(--ink); text-decoration: none; }
.header .nav-move {
  display: flex; align-items: baseline; gap: 26px; flex: 1 1 auto; min-width: 0;
  padding: 0; border: 0; overflow-x: auto; scrollbar-width: none;
  font-size: var(--fs-14); color: var(--ink-2);
}
.header .nav-move::-webkit-scrollbar { display: none; }
.header .nav-move > a {
  flex: none; display: inline-block; min-height: 0; padding: 0;
  color: inherit; font-size: var(--fs-14); font-weight: var(--fw-normal); line-height: 1.4;
  text-decoration: none; white-space: nowrap; box-shadow: none;
}
.header .nav-move > a:hover { color: var(--ink); text-decoration: none; box-shadow: none; }
.header .nav-move > a[aria-current="page"] { color: var(--ink); font-weight: var(--fw-semi); box-shadow: none; }
.icon-btn {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; background: none; color: var(--ink-3); font-size: var(--fs-13);
}
.icon-btn:hover { background: none; color: var(--ink); }
@media (max-width: 767px) {
  .header { align-items: center; justify-content: space-between; gap: var(--sp-5); padding: 0 var(--pad-page); min-height: 58px; }
  .header .nav-move { display: none; }
  .header.is-open .nav-move {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-sheet);
    padding: var(--sp-2) var(--pad-page) var(--sp-5);
    background: var(--ground); border-bottom: 1px solid var(--line); overflow: visible;
  }
  .header.is-open .nav-move > a { display: flex; align-items: center; min-height: var(--h-touch); border-bottom: 1px solid var(--line-2); }
}
.company-row { display: flex; align-items: stretch; padding: 0 var(--pad-page); border-bottom: 1px solid var(--line); }
.company-tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.company-tabs::-webkit-scrollbar { display: none; }
.company-tabs > a {
  flex: none; padding: 18px 24px 15px; margin-bottom: -1px;
  font-size: var(--fs-15); line-height: 1.4; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.company-tabs > a:hover { color: var(--ink); text-decoration: none; }
.company-tabs > a[aria-current="page"] { color: var(--ink); font-weight: var(--fw-semi); border-bottom-color: var(--ink); }
.company-pages { margin-left: auto; align-self: center; flex: none; gap: var(--sp-7); border: 0; overflow: visible; contain: none; }
.company-pages .tab { min-height: 36px; font-size: var(--fs-13); }
@media (max-width: 1023px) {
  .company-tabs > a { font-size: var(--fs-14); padding: 16px 18px 13px; }
}
@media (max-width: 767px) {
  .company-tabs > a { padding: 14px 14px 12px; }
  .company-row .company-pages { display: flex; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line); }
}
.nav-move {
  display: flex; gap: var(--sp-9);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--sp-4) var(--pad-page);
  border-bottom: 1px solid var(--line);
}
.nav-move::-webkit-scrollbar { display: none; }
.nav-move a, .nav-move button, .nav-move span {
  flex: none; display: inline-flex; align-items: center;
  min-height: var(--h-touch); padding: 0 2px;
  border: 0; border-radius: 0; background: none;
  color: var(--ink-2); font: inherit; font-size: var(--fs-body);
  font-weight: var(--fw-normal); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fade) var(--ease-out), box-shadow var(--dur-fade) var(--ease-out);
}
.nav-move a:hover, .nav-move button:hover {
  color: var(--ink); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--rule-strong);
}
.nav-move [aria-current="page"] {
  color: var(--ink); font-weight: var(--fw-semi);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.nav-move.is-ancestor [aria-current="page"] { box-shadow: inset 0 -1px 0 var(--ink); }
.tabs {
  display: flex; gap: var(--sp-9);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center;
  min-height: var(--h-touch); padding: 0 2px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--ink-2); font-weight: var(--fw-normal); white-space: nowrap;
  transition: color var(--dur-fade) var(--ease-out), border-color var(--dur-fade) var(--ease-out);
}
.tab:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: var(--fw-semi); border-bottom-color: var(--ink); }
.tab:disabled, .tab[aria-disabled="true"] { color: var(--ink-4); pointer-events: none; }
.site-footer { max-width: var(--w-page); margin: 56px auto 0; padding: 0 var(--pad-page) 48px; font-size: var(--fs-13); line-height: 1.6; color: var(--ink-3); }
.site-footer-co { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding-bottom: 12px; font-size: var(--fs-12h); color: var(--ink-3); }
.site-footer-co a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); text-decoration: none; }
.site-footer-co a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.site-footer-brand { font-size: var(--fs-13); color: var(--ink-3); }
.site-footer-min { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: var(--fs-13); color: var(--ink-2); }
.site-footer-min a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 44px; color: inherit; text-decoration: none; }
.site-footer-min a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .site-footer { margin-top: 32px; padding: 0 var(--pad-page) 34px; font-size: var(--fs-12); }
  .site-footer-co { font-size: var(--fs-12); gap: 0 14px; padding-bottom: 8px; }
  .site-footer-row { padding-top: 16px; }
  .site-footer-name { display: none; }
  .site-footer-min { gap: 0 16px; font-size: var(--fs-12); }
}

/* src-react/css/design/components/button.css */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: var(--h-touch);
  padding: var(--sp-7) var(--sp-1);
  border: 0; border-radius: 0; background: none;
  font-size: var(--fs-read);
  font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.2;
  text-align: center; text-decoration: none;
  transition: color var(--dur-fade) var(--ease-out),
  border-color var(--dur-fade) var(--ease-out),
  box-shadow var(--dur-fade) var(--ease-out);
}
@media (min-width: 768px) {
  .btn { width: auto; align-self: flex-start; }
  .btn-primary { min-width: min(190px, 100%); }
  .btn-block { width: 100%; align-self: stretch; }
}
.btn-primary {
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
  color: var(--ink);
}
.btn-primary:hover {
  border-top-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.btn-secondary, .btn-ghost {
  padding: var(--sp-6) var(--sp-1);
  box-shadow: inset 0 -1px 0 var(--rule-strong);
  color: var(--ink-2);
  font-size: var(--fs-body); font-weight: var(--fw-normal);
}
.btn-secondary:hover, .btn-ghost:hover {
  box-shadow: inset 0 -1px 0 var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.btn-sm { padding: var(--sp-4) var(--sp-1); font-size: var(--fs-body); }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed; color: var(--ink-4);
  border-top-color: var(--line-3);
  box-shadow: inset 0 -2px 0 var(--line-3);
}
.btn-secondary:disabled, .btn-ghost:disabled {
  box-shadow: inset 0 -1px 0 var(--line-3);
}
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--ink); border-right-color: transparent;
  animation: ds-spin 600ms linear infinite;
}
.swap-btn {
  margin-left: 6px; padding: 1px 6px;
  font-size: var(--fs-11h); font-weight: var(--fw-medium); line-height: 1.5;
  color: var(--accent); background: none;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
}
.swap-btn:hover { border-color: var(--accent); }

/* src-react/css/design/utilities.css */
.t-result {
  font-size: var(--fs-result); line-height: var(--lh-result);
  letter-spacing: var(--ls-result); font-weight: var(--fw-bold);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.t-h1 {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1); font-weight: var(--fw-bold); color: var(--ink);
}
.t-chapter {
  font-size: var(--fs-chapter); line-height: var(--lh-chapter);
  letter-spacing: var(--ls-chapter); font-weight: var(--fw-bold); color: var(--ink);
}
.t-section {
  font-size: var(--fs-section); line-height: var(--lh-section);
  letter-spacing: var(--ls-section); font-weight: var(--fw-semi); color: var(--ink);
}
.t-sub { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--fw-semi); color: var(--ink); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.t-read { font-size: var(--fs-read); line-height: var(--lh-read); max-width: var(--w-read); }
.t-cell { font-size: var(--fs-cell); line-height: var(--lh-cell); letter-spacing: var(--ls-cell); }
.t-label {
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); font-weight: var(--fw-normal); color: var(--ink-3);
}
.t-note { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--ink-3); }
.t-ink { color: var(--ink); }
.t-muted { color: var(--ink-3); }
.t-accent { color: var(--accent); }
.t-faint { color: var(--ink-4); }
.fw-n { font-weight: var(--fw-normal); }
.fw-s { font-weight: var(--fw-semi); }
.fw-b { font-weight: var(--fw-bold); }
.g-cell { gap: var(--sp-cell); }
.g-section { gap: var(--sp-section); }
.g-chapter { gap: var(--sp-chapter); }
.between { justify-content: space-between; }
.t-caption { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-3); }
.t-lead { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--fw-semi); color: var(--ink); }
.t-title { font-size: var(--fs-chapter); line-height: var(--lh-chapter); letter-spacing: var(--ls-chapter); font-weight: var(--fw-bold); color: var(--ink); }
.t-hero { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-bold); color: var(--ink); }
.t-warn { color: var(--ink-2); }
.t-brand { color: var(--accent); }
.fw-m { font-weight: var(--fw-normal); }
.fw-k { font-weight: var(--fw-bold); }
.g-tight { gap: var(--sp-2); }
.g-field { gap: var(--sp-5); }
.g-group { gap: var(--sp-cell); }

/* src-react/css/design/soft-tokens.css */
:root, body {
  --r-field: 8px;
  --r-card: 12px;
  --r-pill: 999px;
  --radius: 12px;
}

/* src-react/css/design/screens/guide.css */
:root { color-scheme: light dark; }
body { display: flex; flex-direction: column; min-height: 100vh; font-weight: var(--fw-normal); }
main {
  display: block;
  width: 100%;
  max-width: var(--w-article);
  margin: 0 auto;
  padding: 8px 16px 24px;
  min-width: 0;
}
@media (min-width: 768px) {
  main { padding: 32px 24px 48px; }
}
@media (min-width: 1024px) {
  main {
    display: grid;
    grid-template-columns: minmax(0, var(--w-article)) 300px;
    column-gap: 72px;
    max-width: calc(var(--w-article) + 72px + 300px);
  }
  main > * { grid-column: 1; min-width: 0; }
  main > .gd-toc {
    grid-column: 2; grid-row: 1 / span 500; align-self: start;
    position: sticky; top: 24px; margin: 0;
  }
}
.header { padding: 0; }
.header > .row { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 16px; }
.nav-move { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 10px 16px 0; }
@media (min-width: 768px) {
  .header > .row { padding: 0 24px; }
  .nav-move { padding: 12px 24px 0; }
}
.site-footer { max-width: var(--w-page); margin: 0 auto; width: 100%; }
h1 { font-size: var(--fs-26); font-weight: var(--fw-bold); line-height: 1.22; letter-spacing: -.03em; margin: 0 0 10px; }
h2 { font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-title); letter-spacing: var(--ls-title); margin: var(--sp-section) 0 16px; }
h3 { font-size: var(--fs-lead); font-weight: var(--fw-semi); line-height: var(--lh-lead); margin: 28px 0 8px; }
p, li { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--c-ink); }
p { margin: 0 0 20px; }
li { margin-bottom: 10px; }
strong, b { font-weight: var(--fw-black); }
.lead { font-size: var(--fs-read); line-height: var(--lh-read); font-weight: var(--fw-normal); color: var(--ink-2); margin-bottom: 22px; }
blockquote { margin: 18px 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--c-hairline); color: var(--c-muted); font-size: var(--fs-read); line-height: var(--lh-read); }
main ul, main ol { padding-left: 1.15em; margin: 0 0 18px; list-style: disc; }
main ol { list-style: decimal; }
main .post-list, main .opt-details, main .sal-siblings { padding-left: 0; list-style: none; }
.others a { display: inline-block; margin-right: 10px; padding: 5px 2px; min-height: 24px; line-height: 1.15; }
main > ul > li > a { display: inline-block; padding: 4px 0; min-height: 24px; line-height: 1.35; vertical-align: top; }
.sal-row a { display: inline-block; padding: 4px 2px; min-height: 24px; line-height: 1.3; }
main p > a:only-child { display: inline-block; padding: 4px 0; min-height: 24px; line-height: 1.35; }
.cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--h-ctl); margin: 22px 0; padding: 12px 16px;
  border-radius: var(--r-field); background: var(--c-brand-fill);
  color: var(--c-on-fill); font-size: var(--fs-lead); font-weight: var(--fw-bold);
  text-align: center; line-height: 1.35;
}
.cta:hover { background: color-mix(in srgb, var(--c-brand-fill) 86%, #000); text-decoration: none; }
.formula { margin: 0 0 24px; padding: 22px 26px; border: 0; border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-hairline); border-radius: 0; background: none; font-size: var(--fs-read); line-height: 2; overflow-x: auto; }
.notice-box { margin: 18px 0; padding: 13px 15px; border: 1px solid var(--c-brand); border-left-width: 4px; border-radius: var(--r-field); background: var(--c-brand-tint); font-size: var(--fs-body); line-height: var(--lh-body); }
.others { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--c-rule); font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-2); }
.cite { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--c-rule); }
.cite-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cite-btn {
  display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px;
  border: 1px solid var(--c-field-line); border-radius: var(--r-field); background: var(--c-card);
  color: var(--c-ink); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); line-height: 1.2; cursor: pointer;
}
.cite-btn:hover { background: var(--c-brand-tint); text-decoration: none; }
.cite-src { margin: 8px 0 0; padding-left: 18px; font-size: var(--fs-body-sm); line-height: 1.7; color: var(--ink-2); }
.disclaimer { margin-top: 34px; padding-left: 16px; border-left: 2px solid var(--line-3); font-size: var(--fs-body-sm); line-height: 1.7; color: var(--ink-2); }
.post-list { margin: 20px 0; }
.post-list li { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--c-hairline); }
.post-list li a { display: block; font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: var(--lh-lead); }
.post-meta { display: block; margin-top: 5px; font-size: var(--fs-caption); color: var(--c-muted); }
.post-excerpt { display: block; margin-top: 6px; font-size: var(--fs-body); color: var(--c-muted); line-height: var(--lh-body); }
.post-list time, .post-list li time { font-size: var(--fs-caption); }
.scroll { overflow-x: auto; }
.scroll:focus-visible { outline: none; box-shadow: inset 0 -3px 0 var(--c-brand); }
table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--c-hairline); text-align: left; }
th { color: var(--ink-3); font-size: var(--fs-caption); font-weight: var(--fw-normal); letter-spacing: .1em; }
thead th { background: none; border-bottom: 1px solid var(--c-rule); }
.td-left { text-align: left; }
td.yr a, td:first-child a { display: inline-block; padding: 4px 0; min-height: 24px; line-height: 1.3; }
tr.is-next { background: var(--c-brand-tint); }
tr.is-next td { font-weight: var(--fw-bold); color: var(--c-ink); }
.num-table th, .num-table td { text-align: right; white-space: nowrap; padding: 5px 8px; font-size: var(--fs-caption); }
.num-table th { color: var(--c-muted); }
.num-table td.yr, .num-table th:first-child { text-align: left; color: var(--c-ink); font-weight: var(--fw-black); }
td.ds, th.ds { color: var(--c-brand); font-weight: var(--fw-black); background: var(--c-brand-tint); }
td.zero, .txt-zero { font-weight: var(--fw-medium); }
td.max, .txt-max { font-weight: var(--fw-black); }
td.note { text-align: left; white-space: normal; color: var(--c-muted); font-size: var(--fs-caption); min-width: 160px; }
@media (max-width: 640px) {
  .scroll:has(.card-table) { overflow: visible; }
  .card-table, .card-table tbody, .card-table tr, .card-table td { display: block; width: auto; }
  .card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .card-table tr { border: 1px solid var(--c-hairline); border-radius: var(--r-card); padding: 13px 16px; margin-bottom: 10px; background: var(--c-card); }
  .card-table td { border: 0; padding: 0; text-align: left; }
  .card-table td:first-child { font-weight: var(--fw-black); font-size: var(--fs-lead); margin-bottom: 8px; }
  .card-table td:not(:first-child) { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; }
  .card-table td:not(:first-child)::before { content: attr(data-l); color: var(--c-muted); font-weight: var(--fw-bold); min-width: 0; }
  .card-table td:last-child { margin-top: 5px; padding-top: 7px; border-top: 1px solid var(--c-hairline); }
  .card-table td:last-child b, .card-table td:last-child strong { font-size: var(--fs-lead); }
  .card-table.compact tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; gap: 2px 10px; padding: 11px 2px; margin: 0;
    border: 0; border-bottom: 1px solid var(--c-hairline); border-radius: 0; background: none;
  }
  .card-table.compact td:first-child { grid-area: 1 / 1; margin: 0; font-size: var(--fs-body); }
  .card-table.compact td:nth-child(2) { grid-area: 2 / 1; font-size: var(--fs-caption); color: var(--c-muted); }
  .card-table.compact td:nth-child(3) { grid-area: 2 / 2; font-size: var(--fs-caption); color: var(--c-muted); justify-content: flex-end; }
  .card-table.compact td:last-child { grid-area: 1 / 2; margin: 0; padding: 0; border: 0; justify-content: flex-end; font-size: var(--fs-body); }
  .card-table.compact td:nth-child(2)::before, .card-table.compact td:last-child::before { content: none; }
  .card-table.compact td:last-child b { font-size: var(--fs-body); }
}
.mini-bar { display: block; height: 5px; margin-top: 5px; min-width: 64px; border-radius: var(--r-pill); background: var(--c-track); overflow: hidden; }
.mini-bar b { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-brand); min-width: 2px; }
td.ds .mini-bar { min-width: 34px; margin-top: 3px; height: 4px; }
.w-2 { width:2% }
.w-5 { width:5% }
.w-10 { width:10% }
.w-15 { width:15% }
.w-20 { width:20% }
.w-25 { width:25% }
.w-30 { width:30% }
.w-35 { width:35% }
.w-40 { width:40% }
.w-45 { width:45% }
.w-50 { width:50% }
.w-55 { width:55% }
.w-60 { width:60% }
.w-65 { width:65% }
.w-70 { width:70% }
.w-75 { width:75% }
.w-80 { width:80% }
.w-85 { width:85% }
.w-90 { width:90% }
.w-95 { width:95% }
.w-100 { width:100% }
.chip { display: inline-block; margin: 1px 3px 1px 0; padding: 2px 8px; border: 1px solid var(--c-field-line); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-ink); white-space: nowrap; }
.chip em { font-style: normal; font-weight: var(--fw-medium); color: var(--c-muted); }
.cal-month { color: var(--c-ink); font-weight: var(--fw-black); white-space: nowrap; }
.cal-co { font-weight: var(--fw-bold); white-space: nowrap; }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.timeline .item { padding: 13px; border: 1px solid var(--c-hairline); border-radius: var(--r-field); background: var(--c-card); }
.timeline .month { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); background: var(--c-brand-tint); color: var(--c-brand); font-size: var(--fs-caption); font-weight: var(--fw-black); }
.timeline .item h2 { margin: 10px 0 6px; font-size: var(--fs-lead); letter-spacing: var(--ls-lead); line-height: var(--lh-lead); }
.timeline .item p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
@media (max-width: 720px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sal-hero { margin: 22px 0; padding: 20px; border-radius: var(--r-card); background: var(--c-card); box-shadow: var(--sh-card); }
.sal-hero-label { font-size: var(--fs-caption); color: var(--c-muted); font-weight: var(--fw-bold); }
.sal-num { margin: 4px 0 14px; font-size: var(--fs-hero); font-weight: var(--fw-black); color: var(--c-ink); line-height: var(--lh-hero); font-variant-numeric: tabular-nums; }
.sal-num span { font-size: var(--fs-lead); font-weight: var(--fw-bold); margin-left: 3px; color: var(--c-muted); }
.sal-break { display: flex; flex-direction: column; gap: 7px; }
.sal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--c-hairline); }
.sal-row span { font-size: var(--fs-body); color: var(--c-muted); min-width: 0; overflow-wrap: anywhere; }
.sal-row b { font-size: var(--fs-body); color: var(--c-ink); font-weight: var(--fw-black); min-width: 0; text-align: right; }
.sal-row.note span, .sal-row.note b { font-size: var(--fs-caption); color: var(--c-muted); font-weight: var(--fw-bold); }
.sal-siblings { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sal-siblings a { padding: 5px 12px; border: 1px solid var(--c-field-line); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.opt-details { margin: 10px 0 18px; }
.opt-details li { padding: 10px 12px; border: 1px solid var(--c-hairline); border-radius: var(--r-field); margin-bottom: 8px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-muted); }
.opt-details li b { font-size: var(--fs-body); color: var(--c-ink); }
.opt-details .opt-price { font-weight: var(--fw-bold); font-size: var(--fs-caption); color: var(--c-muted); margin-left: 4px; }
.ad-slot { min-height: 280px; margin: 26px 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ad-slot ins { width: 100%; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
@media (max-width: 640px) {
  h1 { font-size: 34px; }
  h2 { font-size: var(--fs-title); margin: 32px 0 10px; }
  .lead { font-size: var(--fs-read); line-height: 1.65; }
  p, li { font-size: var(--fs-lead); line-height: 1.8; }
  p { margin: 0 0 18px; }
  .sal-num { font-size: 34px; }
  body { word-break: normal; }
}
.gd-crumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 14px; font-size: var(--fs-caption); color: var(--c-muted); }
.gd-crumb a { color: var(--c-muted); }
.gd-crumb a:hover { color: var(--c-ink); }
.gd-crumb span { color: var(--c-ink); overflow-wrap: anywhere; }
.gd-crumb .gd-sep { color: var(--c-hairline-strong, var(--c-rule)); }
.gd-eyebrow { margin: 0 0 18px; font-size: var(--fs-caption); font-weight: var(--fw-normal); letter-spacing: .14em; color: var(--c-muted); }
.gd-meta { margin: -8px 0 22px; font-size: var(--fs-caption); color: var(--c-muted); }
.gd-toc { margin: 30px 0; padding: 0; border: 0; border-top: 1px solid var(--c-rule); border-radius: 0; background: none; }
.gd-toc > b { display: block; margin: 12px 0 8px; font-size: var(--fs-caption); font-weight: var(--fw-normal); letter-spacing: .12em; color: var(--c-muted); }
.gd-toc ol { margin: 0; padding-left: 1.3em; list-style: decimal; }
.gd-toc li { margin: 0 0 4px; font-size: var(--fs-body-sm); line-height: 1.5; }
.gd-toc a { display: inline-block; padding: 3px 0; min-height: 24px; color: var(--c-ink); }
.gd-cta { margin: 36px 0; padding: 22px 24px; border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); }
.gd-cta > b { display: block; font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--c-ink); }
.gd-cta > p { margin: 8px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.gd-cta > a {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; padding: 0 2px;
  font-size: var(--fs-lead, var(--fs-body)); font-weight: var(--fw-bold); letter-spacing: -.02em;
  color: var(--c-ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--c-ink);
}
.gd-cta > a:hover { color: var(--accent-hover); }
.gd-note { margin: 34px 0 0; padding-left: 16px; border-left: 2px solid var(--line-3); font-size: var(--fs-body-sm); line-height: 1.7; color: var(--ink-2); }
.header .logo { white-space: nowrap; }
main h2[id] { scroll-margin-top: 16px; }
@media (min-width: 768px) {
  .gd-crumb { margin-bottom: 18px; }
}
.gd-fig { margin: 26px 0 0; max-width: 460px; }
.gd-svg { display: block; width: 100%; height: auto; }
.gd-fig figcaption { margin-top: 10px; font-size: var(--fs-body-sm); line-height: 1.7; color: var(--ink-3); }
.gd-fig figcaption strong { color: var(--ink-2); }