/* ====== 00-tokens.css ====== */
/*
 * INFORMATION SITE DESIGN KIT / Independent implementation / 2026-10-27
 * Values in this base are production-oriented recommendations, not measurements
 * of any third-party website. Load one theme after site-base.css.
 */
:root {
  color-scheme: light;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --color-page: #ffffff;
  --color-surface: #f6f8fa;
  --color-surface-2: #edf1f5;
  --color-elevated: #ffffff;
  --color-ink: #192536;
  --color-muted: #536271;
  --color-subtle: #6b7784;
  --color-border: #d7e0e8;
  --color-border-strong: #a8b7c6;
  --color-brand: #2364dc;
  --color-brand-hover: #164cb4;
  --color-brand-soft: #eaf2ff;
  --color-on-brand: #ffffff;
  --color-link: #145ac0;
  --color-link-hover: #0e408a;
  --color-link-visited: #5c4197;
  --color-focus: #ffce47;
  --color-success: #177347;
  --color-success-soft: #e9f7ef;
  --color-warning: #9f6209;
  --color-warning-soft: #fff6df;
  --color-danger: #b73136;
  --color-danger-soft: #fff0f0;
  --color-header: #ffffff;
  --color-on-header: #192536;
  --color-footer: #f6f8fa;
  --color-hero: #f2f7ff;
  --color-hero-ink: #192536;
  --color-hero-border: transparent;
  --font-body: 16px;
  --font-small: 14px;
  --font-caption: 12px;
  --font-h1: clamp(2rem, 3.55vw, 3.25rem);
  --font-h2: clamp(1.55rem, 2.25vw, 2.05rem);
  --font-h3: clamp(1.2rem, 1.7vw, 1.45rem);
  --font-display: clamp(2.4rem, 5vw, 4rem);
  --line-body: 1.75;
  --line-heading: 1.24;
  --line-lead: 1.7;
  --tracking-heading: -0.035em;
  --font-weight-regular: 400;
  --font-weight-medium: 550;
  --font-weight-semibold: 650;
  --font-weight-bold: 760;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-section: 64px;
  --space-hero: 88px;
  --space-paragraph: 20px;
  --space-heading-before: 52px;
  --space-heading-after: 20px;
  --container: 1160px;
  --container-wide: 1320px;
  --reading: 740px;
  --sidebar: 258px;
  --gutter: 24px;
  --header-height: 72px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);
  --radius-button: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --shadow-card: 0 3px 18px rgb(27 49 76 / 5%);
  --shadow-hover: 0 12px 30px rgb(23 46 75 / 12%);
  --shadow-menu: 0 20px 46px rgb(20 41 70 / 14%);
  --border-card: 1px solid var(--color-border);
  --card-padding: 24px;
  --button-height: 48px;
  --input-height: 48px;
  --nav-gap: 22px;
  --hero-max-text: 710px;
  --hero-align: left;
  --section-title-rule: transparent;
  --faq-divider: var(--color-border);
  --table-stripe: #f8fafc;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-dialog: 50;
}


/* ====== 01-reset-type.css ====== */
/* Resets are intentionally conservative for integration with static HTML/WP. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; min-width: 320px; background: var(--color-page); color: var(--color-ink); font: var(--font-weight-regular) var(--font-body)/var(--line-body) var(--font-sans); overflow-wrap: break-word; word-break: keep-all; }
main, article, aside, footer, header, nav, section { display: block; }
img, video, iframe, svg { max-width: 100%; }
img { height: auto; vertical-align: middle; }
figure { margin: 0; }
figcaption { color: var(--color-muted); font-size: .82rem; margin-top: 10px; }
button, input, optgroup, select, textarea { font: inherit; }
button, select, summary { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
:where(button, input, textarea, select):disabled { cursor: not-allowed; opacity: .55; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }
:where(h1, h2, h3, h4, h5, h6) { font-weight: var(--font-weight-bold); line-height: var(--line-heading); letter-spacing: var(--tracking-heading); }
:where(h1, h2, h3, h4, h5, h6, p, dl, ol, ul) { margin-top: 0; }
h1, .heading-1 { font-size: var(--font-h1); }
h2, .heading-2 { font-size: var(--font-h2); }
h3, .heading-3 { font-size: var(--font-h3); }
h4 { font-size: 1.09rem; }
p { margin-bottom: var(--space-paragraph); }
small, .type-small { font-size: var(--font-small); }
.type-caption { font-size: var(--font-caption); color: var(--color-muted); }
.type-muted { color: var(--color-muted); }
.type-strong { font-weight: var(--font-weight-bold); }
.type-kicker { display: block; font-size: .82rem; font-weight: 800; color: var(--color-brand); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 12px; }
.type-display { font-size: var(--font-display); line-height: 1.14; letter-spacing: -.053em; }
a { color: var(--color-link); text-underline-offset: .21em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--color-link-visited); }
:where(.site-header, .site-footer, .card, .btn, .link-arrow, .pagination, .chip-list, .tag-list, .topic-list) a:visited { color: inherit; }
::selection { color: var(--color-ink); background: #cce1ff; }
.skip-link { position: absolute; z-index: 999; top: -100px; left: 12px; padding: 10px 14px; background: #ffffff; color: #0b0c0c; box-shadow: var(--shadow-menu); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute!important; overflow: hidden!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; border: 0!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: 36px 0; }


/* ====== 02-layout-navigation.css ====== */
/* Navigation, grid systems, hero, footer, responsive article frameworks */
.container, .site-shell { width: min(calc(100% - (var(--gutter) * 2)), var(--container)); margin-inline: auto; }
.container--wide { width: min(calc(100% - (var(--gutter) * 2)), var(--container-wide)); margin-inline: auto; }
.container--reading { width: min(calc(100% - (var(--gutter) * 2)), var(--reading)); margin-inline: auto; }
.site-header { position: relative; z-index: var(--z-sticky); min-height: var(--header-height); background: var(--color-header); color: var(--color-on-header); border-bottom: 1px solid var(--color-border); }
.site-header--sticky { position: sticky; top: 0; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--color-on-header); text-decoration: none; white-space: nowrap; }
.brand:visited, .brand:hover { color: var(--color-on-header); text-decoration: none; }
.brand__symbol { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; background: var(--color-brand); color: var(--color-on-brand); font-size: 18px; font-weight: 800; border-radius: var(--radius-sm); }
.brand__name { font-size: 1.25rem; letter-spacing: -.045em; font-weight: 850; }
.brand__caption { display: block; margin-top: -3px; font-size: .68rem; font-weight: 550; letter-spacing: 0; color: var(--color-muted); }
.nav-toggle { display: none; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-page); color: var(--color-ink); font-weight: 700; }
.nav-toggle__lines, .nav-toggle__lines::before, .nav-toggle__lines::after { display: block; width: 19px; height: 2px; border-radius: 1px; background: currentColor; }
.nav-toggle__lines { position: relative; }
.nav-toggle__lines::before, .nav-toggle__lines::after { position: absolute; content: ''; left: 0; }
.nav-toggle__lines::before { top: -6px; }
.nav-toggle__lines::after { top: 6px; }
.site-nav { display: flex; flex: 1 1 auto; align-items: center; gap: var(--nav-gap); min-width: 0; }
.site-nav__links { display: flex; gap: var(--nav-gap); align-items: center; margin: 0; padding: 0; list-style: none; }
.site-nav__item { position: relative; }
.site-nav__link { display: inline-flex; align-items: center; gap: 5px; min-height: 42px; color: var(--color-on-header); text-decoration: none; font-size: .94rem; font-weight: 650; white-space: nowrap; }
.site-nav__link:hover, .site-nav__link[aria-current='page'] { color: var(--color-brand); text-decoration: none; }
.site-nav__link[aria-current='page'] { box-shadow: inset 0 -3px var(--color-brand); }
.site-nav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.site-nav__actions .btn { white-space: nowrap; }
.dropdown { position: relative; }
.dropdown > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; font-size: .94rem; font-weight: 650; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary::after { content: '⌄'; font-size: 1.1rem; }
.dropdown-menu { position: absolute; z-index: 30; top: calc(100% + 7px); left: -8px; width: min(340px, 92vw); padding: 8px; border: 1px solid var(--color-border); background: var(--color-elevated); box-shadow: var(--shadow-menu); border-radius: var(--radius-card); }
.dropdown-menu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-ink); font-size: .92rem; text-decoration: none; }
.dropdown-menu a:hover { background: var(--color-surface); }
.top-strip { background: var(--color-brand); color: var(--color-on-brand); font-size: 13px; padding: 7px 0; }
.top-strip a { color: inherit; font-weight: 750; }
.site-search--compact { display: flex; max-width: 340px; gap: 6px; }
.site-search--compact .input { min-width: 0; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 22px 0; list-style: none; font-size: .85rem; color: var(--color-muted); }
.breadcrumb li + li::before { content: '/'; display: inline-block; padding-right: 8px; color: var(--color-subtle); }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb [aria-current='page'] { color: var(--color-ink); font-weight: 650; }
.hero { position: relative; overflow: hidden; color: var(--color-hero-ink); background: var(--color-hero); border-bottom: 1px solid var(--color-hero-border); padding: var(--space-hero) 0; text-align: var(--hero-align); }
.hero__inner { position: relative; z-index: 1; }
.hero__copy { max-width: var(--hero-max-text); }
.hero--split .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; }
.hero--split .hero__copy { min-width: 0; }
.hero--center { text-align: center; }
.hero--center .hero__copy, .hero--center .hero__description { margin-inline: auto; }
.hero__eyebrow { margin: 0 0 13px; color: var(--color-brand); font-size: .9rem; font-weight: 750; letter-spacing: .01em; }
.hero__title { font-size: var(--font-display); font-weight: 800; line-height: 1.19; letter-spacing: -.05em; margin: 0 0 22px; }
.hero__description { max-width: 650px; font-size: clamp(1.03rem, 1.25vw, 1.2rem); line-height: 1.68; color: var(--color-muted); margin: 0 0 28px; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hero--center .hero__actions { justify-content: center; }
.hero__visual { padding: 22px; background: var(--color-elevated); border: var(--border-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.hero__visual-title { color: var(--color-muted); font-size: .87rem; margin: 0 0 10px; }
.hero__visual-value { font-size: clamp(2rem, 3vw, 3.25rem); font-weight: 850; letter-spacing: -.055em; line-height: 1.2; margin-bottom: 20px; }
.hero__visual-caption { color: var(--color-muted); font-size: .84rem; margin: 12px 0 0; }
.hero-search { max-width: 710px; margin-top: 28px; }
.hero--center .hero-search { margin-inline: auto; }
.section { padding: var(--space-section) 0; }
.section--muted { background: var(--color-surface); }
.section--compact { padding: 38px 0; }
.section__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.section__title { margin: 0; font-size: var(--font-h2); line-height: 1.25; }
.section__lead { max-width: 700px; color: var(--color-muted); margin: 12px 0 0; }
.section__heading .link-arrow { flex-shrink: 0; }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr)); }
.grid--compact { gap: 12px; }
.layout-article { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: 48px; align-items: start; }
.layout-article__main { min-width: 0; max-width: var(--reading); }
.layout-article__aside { position: sticky; top: calc(var(--header-height) + 24px); min-width: 0; }
.layout-docs { display: grid; grid-template-columns: 225px minmax(0, 1fr) 214px; gap: 34px; align-items: start; }
.layout-docs__aside, .layout-docs__toc { position: sticky; top: calc(var(--header-height) + 22px); align-self: start; max-height: calc(100dvh - var(--header-height) - 48px); overflow-y: auto; }
.layout-docs__main { min-width: 0; }
.page-head { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 36px 0 40px; }
.page-head__title { margin: 0 0 12px; }
.page-head__description { max-width: 710px; color: var(--color-muted); font-size: 1.08rem; margin: 0; }
.site-footer { background: var(--color-footer); border-top: 1px solid var(--color-border); padding: 58px 0 28px; margin-top: 65px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.site-footer__heading { font-weight: 800; margin: 0 0 12px; font-size: .98rem; }
.site-footer__links { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.site-footer__links a { color: var(--color-muted); text-decoration: none; font-size: .9rem; }
.site-footer__links a:hover { color: var(--color-brand); text-decoration: underline; }
.site-footer__bottom { border-top: 1px solid var(--color-border); margin-top: 36px; padding-top: 20px; font-size: .81rem; color: var(--color-muted); }


/* ====== 03-components.css ====== */
/* Reusable standalone components. Semantics belong in HTML; CSS only decorates. */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: var(--button-height); padding: 11px 20px; border: 1px solid transparent; border-radius: var(--radius-button); background: var(--color-brand); color: var(--color-on-brand); font-size: .96rem; font-weight: 750; line-height: 1.3; text-decoration: none; transition: background-color .16s, border-color .16s, box-shadow .16s, transform .16s; cursor: pointer; }
.btn:visited, .btn:hover { color: var(--color-on-brand); text-decoration: none; }
.btn:hover { background: var(--color-brand-hover); }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: var(--color-brand-soft); color: var(--color-brand); }
.btn--secondary:hover, .btn--secondary:visited { background: var(--color-surface-2); color: var(--color-brand-hover); }
.btn--outline { background: transparent; color: var(--color-brand); border-color: var(--color-brand); }
.btn--outline:hover, .btn--outline:visited { background: var(--color-brand-soft); color: var(--color-brand-hover); }
.btn--plain { background: transparent; color: var(--color-ink); border-color: var(--color-border); }
.btn--plain:hover, .btn--plain:visited { background: var(--color-surface); color: var(--color-ink); }
.btn--danger { background: var(--color-danger); }
.btn--danger:hover { background: #85272b; }
.btn--sm { min-height: 36px; padding: 7px 13px; font-size: .86rem; }
.btn--lg { min-height: 56px; padding: 14px 27px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.link-arrow { display: inline-flex; align-items: center; gap: 5px; font-size: .92rem; color: var(--color-link); font-weight: 750; text-underline-offset: 3px; }
.link-arrow::after { content: '→'; transition: transform .16s ease; }
.link-arrow:hover::after { transform: translateX(3px); }
.link-underlined { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.link-quiet { color: var(--color-muted); text-decoration: none; }
.link-quiet:hover { text-decoration: underline; }
.link-external::after { content: ' ↗'; font-size: .8em; }
.link-download::before { content: '↓ '; }
.card { display: block; min-width: 0; padding: var(--card-padding); background: var(--color-elevated); border: var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--color-ink); text-decoration: none; transition: box-shadow .18s, border-color .18s, transform .18s; }
.card:visited { color: var(--color-ink); }
a.card:hover { color: var(--color-ink); text-decoration: none; border-color: var(--color-brand); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card__eyebrow { color: var(--color-brand); font-weight: 800; font-size: .76rem; margin: 0 0 12px; }
.card__title { margin: 0 0 12px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.42; letter-spacing: -.027em; }
.card__description { margin: 0; color: var(--color-muted); font-size: .93rem; line-height: 1.66; }
.card__footer { display: flex; gap: 8px; align-items: center; margin-top: 20px; font-size: .88rem; font-weight: 750; color: var(--color-brand); }
.card--horizontal { display: flex; flex-direction: row; align-items: center; gap: 20px; }
.card--horizontal .card__media { width: 33%; flex-shrink: 0; }
.card--flat { box-shadow: none; }
.card--accent { border-left: 5px solid var(--color-brand); }
.card--feature { padding: 32px; background: var(--color-brand-soft); border-color: transparent; }
.card--number .card__number { display: inline-block; color: var(--color-brand); font-size: 2.1rem; font-weight: 850; letter-spacing: -.04em; margin-bottom: 20px; line-height: 1; }
.card--icon .card__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--radius-sm); background: var(--color-brand-soft); color: var(--color-brand); font-size: 24px; margin-bottom: 17px; }
.card__media { display: block; overflow: hidden; background: var(--color-surface-2); border-radius: var(--radius-sm); margin-bottom: 16px; aspect-ratio: 16/9; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.category-card { padding: 23px; min-height: 150px; }
.category-card__count { display: block; color: var(--color-muted); font-size: .82rem; margin-top: 14px; }
.stat { border: var(--border-card); border-radius: var(--radius-card); background: var(--color-elevated); padding: 23px; }
.stat__label { color: var(--color-muted); font-size: .86rem; }
.stat__value { display: block; color: var(--color-ink); font-size: clamp(1.8rem, 2.5vw, 2.6rem); font-weight: 850; line-height: 1.25; letter-spacing: -.04em; margin: 12px 0; font-variant-numeric: tabular-nums; }
.stat__note { color: var(--color-muted); font-size: .82rem; }
.list-panel { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.list-panel > li { border-bottom: 1px solid var(--color-border); }
.list-panel > li > a { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 16px 5px; color: var(--color-ink); text-decoration: none; font-weight: 650; }
.list-panel > li > a::after { content: '→'; color: var(--color-brand); }
.list-panel > li > a:hover { color: var(--color-brand); }
.list-panel__meta { margin-left: auto; color: var(--color-muted); font-size: .78rem; font-weight: 500; }
.topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 25px; margin: 0; padding: 0; list-style: none; }
.topic-list li { border-bottom: 1px solid var(--color-border); }
.topic-list a { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 10px 0; color: var(--color-ink); text-decoration: none; font-weight: 550; }
.topic-list a:hover { color: var(--color-brand); }
.topic-list a::after { content: '›'; font-size: 1.3rem; color: var(--color-muted); }
.chip-list, .tag-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.chip, .tag { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-elevated); color: var(--color-ink); font-size: .84rem; line-height: 1.2; text-decoration: none; }
.chip:hover, .tag:hover { border-color: var(--color-brand); color: var(--color-brand); text-decoration: none; }
.chip--active, .tag--accent { background: var(--color-brand-soft); color: var(--color-brand); border-color: transparent; font-weight: 750; }
.tag--success { background: var(--color-success-soft); color: var(--color-success); }
.tag--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.tag--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.form-field { margin-bottom: 22px; }
.form-label { display: block; font-size: .91rem; font-weight: 750; margin-bottom: 8px; }
.form-hint { font-size: .81rem; color: var(--color-muted); margin: 6px 0 0; }
.form-error { color: var(--color-danger); font-size: .81rem; margin: 6px 0 0; }
.input, .select, .textarea { display: block; width: 100%; min-height: var(--input-height); padding: 11px 13px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-input); background: var(--color-elevated); color: var(--color-ink); box-shadow: none; appearance: none; }
.input::placeholder, .textarea::placeholder { color: var(--color-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-brand); }
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--color-danger); border-width: 2px; }
.textarea { min-height: 130px; resize: vertical; }
.select { padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 48%, calc(100% - 15px) 48%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.search-box { display: flex; gap: 8px; padding: 6px; background: var(--color-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.search-box__input { min-width: 0; flex: 1; padding: 12px 15px; background: transparent; border: 0; outline-offset: -2px; color: var(--color-ink); }
.search-box .btn { flex-shrink: 0; }
.search-box--inline { max-width: 620px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .92rem; }
.check-row input { flex: 0 0 19px; width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--color-brand); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 5px; max-width: 100%; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.segmented button, .segmented a { padding: 9px 14px; border: 0; border-radius: calc(var(--radius-sm) - 3px); background: transparent; color: var(--color-muted); text-decoration: none; font-size: .9rem; font-weight: 750; }
.segmented [aria-pressed='true'], .segmented [aria-current='page'] { background: var(--color-elevated); color: var(--color-brand); box-shadow: 0 1px 6px rgb(10 30 60 / 12%); }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin: 26px 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; color: var(--color-ink); font-size: .92rem; text-align: left; font-variant-numeric: tabular-nums; }
.data-table caption { caption-side: top; text-align: left; font-weight: 800; padding: 14px 16px; }
.data-table thead { background: var(--color-surface); }
.data-table :is(th, td) { padding: 14px 17px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.data-table th { font-weight: 800; }
.data-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
.data-table--striped tbody tr:nth-child(even) { background: var(--table-stripe); }
.data-table--hover tbody tr:hover { background: var(--color-brand-soft); }
.data-table--compact :is(th, td) { padding: 9px 11px; }
.data-table--bordered :is(th, td) { border-right: 1px solid var(--color-border); }
.data-table--bordered :is(th, td):last-child { border-right: 0; }
.data-table--stacked { min-width: 0; }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.key-value { display: grid; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); border-top: 1px solid var(--color-border); margin: 20px 0 28px; }
.key-value dt, .key-value dd { margin: 0; padding: 15px 12px; border-bottom: 1px solid var(--color-border); }
.key-value dt { font-weight: 800; background: var(--color-surface); }
.alert, .notice, .summary-box { padding: 20px 24px; margin: 22px 0; background: var(--color-brand-soft); border: 1px solid var(--color-border); border-left: 4px solid var(--color-brand); border-radius: var(--radius-sm); }
.alert__title, .summary-box__title { display: block; margin: 0 0 8px; font-size: 1.04rem; font-weight: 800; }
.alert p:last-child, .notice p:last-child, .summary-box p:last-child { margin-bottom: 0; }
.alert--success { background: var(--color-success-soft); border-left-color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); border-left-color: var(--color-warning); }
.alert--danger { background: var(--color-danger-soft); border-left-color: var(--color-danger); }
.alert--plain { background: var(--color-surface); border: 1px solid var(--color-border); }
.summary-box { background: var(--color-surface); border: 1px solid var(--color-border); }
.summary-box--three { padding: 20px 22px; }
.summary-box--three .summary-box__title { margin-bottom: 10px; }
.summary-box--three .data-table { background: var(--color-elevated); }
.summary-box--three .table-scroll { margin: 0; }
.faq { border-top: 1px solid var(--faq-divider); margin: 22px 0 42px; }
.faq__item { border-bottom: 1px solid var(--faq-divider); }
.faq__question { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 60px; padding: 18px 4px; list-style: none; font-weight: 750; line-height: 1.45; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: '+'; flex: 0 0 25px; font-size: 26px; font-weight: 400; text-align: center; line-height: 1; color: var(--color-brand); }
.faq__item[open] .faq__question::after { content: '−'; }
.faq__answer { color: var(--color-muted); padding: 0 36px 22px 4px; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq--cards { border: 0; display: grid; gap: 12px; }
.faq--cards .faq__item { border: var(--border-card); border-radius: var(--radius-card); padding: 0 16px; background: var(--color-elevated); }
.faq--cards .faq__question { padding: 18px 8px; }
.faq--cards .faq__answer { padding: 0 30px 18px 8px; }
.toc { border-left: 2px solid var(--color-border); padding-left: 20px; }
.toc__title { font-weight: 850; margin: 0 0 12px; font-size: .92rem; }
.toc__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.toc__list a { display: block; color: var(--color-muted); padding: 7px 0; font-size: .89rem; line-height: 1.45; text-decoration: none; }
.toc__list a:hover, .toc__list a[aria-current='location'] { color: var(--color-brand); text-decoration: underline; }
.toc__list li.is-sub a { padding-left: 13px; font-size: .82rem; }
.side-nav { list-style: none; margin: 0; padding: 0; }
.side-nav__heading { color: var(--color-muted); font-size: .77rem; font-weight: 850; letter-spacing: .045em; margin: 22px 10px 8px; }
.side-nav a { display: block; border-radius: var(--radius-xs); padding: 8px 10px; color: var(--color-muted); text-decoration: none; font-size: .9rem; line-height: 1.5; }
.side-nav a:hover { color: var(--color-brand); background: var(--color-surface); }
.side-nav a[aria-current='page'] { background: var(--color-brand-soft); color: var(--color-brand); font-weight: 800; }
.tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--color-border); padding-bottom: 1px; }
.tab { flex: 0 0 auto; min-height: 46px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 10px 17px; background: transparent; color: var(--color-muted); font-weight: 700; }
.tab[aria-selected='true'] { border-bottom-color: var(--color-brand); color: var(--color-brand); }
.tab-panel { padding-top: 20px; }
.step-list { counter-reset: steps; margin: 26px 0; padding: 0; list-style: none; }
.step-list > li { position: relative; counter-increment: steps; padding: 0 0 24px 50px; min-height: 54px; border-left: 2px solid var(--color-border); margin-left: 20px; }
.step-list > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.step-list > li::before { content: counter(steps); position: absolute; left: -20px; top: -2px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-brand-soft); border: 2px solid var(--color-brand); color: var(--color-brand); font-weight: 800; }
.step-list__title { display: block; font-size: 1.05rem; font-weight: 800; margin: 0 0 5px; }
.step-list p { margin: 0; color: var(--color-muted); font-size: .91rem; }
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 35px 0; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 43px; min-height: 43px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-xs); color: var(--color-ink); text-decoration: none; }
.pagination a:hover, .pagination [aria-current='page'] { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); }
.empty-state { padding: 52px 25px; text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); }
.empty-state__title { margin: 0 0 10px; font-size: 1.35rem; }
.empty-state p { color: var(--color-muted); }
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px; margin: 34px 0; border: var(--border-card); border-radius: var(--radius-card); background: var(--color-brand-soft); }
.cta-panel h2, .cta-panel h3 { margin: 0 0 7px; font-size: 1.25rem; }
.cta-panel p { margin: 0; font-size: .9rem; color: var(--color-muted); }
.ad-slot { display: grid; place-items: center; width: 100%; min-height: 120px; margin: 35px auto; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-surface); color: var(--color-muted); text-align: center; font-size: 12px; letter-spacing: .04em; }
.ad-slot--infeed { min-height: 180px; }
.ad-slot--desktop { min-height: 250px; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.related-grid a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border: var(--border-card); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; font-weight: 700; }
.related-grid a:hover { border-color: var(--color-brand); color: var(--color-brand); }
.related-grid a::after { content: '→'; color: var(--color-brand); }
.price { font-variant-numeric: tabular-nums; font-weight: 850; font-size: 1.3rem; }
.meter { height: 10px; background: var(--color-surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.meter__fill { height: 100%; width: var(--value, 50%); background: var(--color-brand); border-radius: inherit; }
.result-box { background: var(--color-brand-soft); border: 1px solid var(--color-border); padding: 24px; border-radius: var(--radius-card); }
.result-box__value { font-size: clamp(1.75rem, 3vw, 2.5rem); font-variant-numeric: tabular-nums; font-weight: 850; line-height: 1.2; letter-spacing: -.045em; margin: 5px 0 8px; }
.result-box__label { margin: 0; font-size: .86rem; color: var(--color-muted); }
.copy-btn { min-height: 38px; }
.skeleton { background: linear-gradient(100deg, var(--color-surface-2), var(--color-surface) 42%, var(--color-surface-2) 75%); background-size: 230% 100%; border-radius: var(--radius-xs); min-height: 18px; animation: skeleton-shimmer 1.6s linear infinite; }
@keyframes skeleton-shimmer { to { background-position-x: -230%; } }


/* ====== 04-article.css ====== */
/* Editorial content / trustworthy long-form articles / semantic HTML */
.article { min-width: 0; }
.article__header { margin: 8px 0 28px; }
.article__category { display: inline-block; margin-bottom: 12px; color: var(--color-brand); font-size: .85rem; font-weight: 800; text-decoration: none; }
.article__title { font-size: var(--font-h1); line-height: 1.3; letter-spacing: var(--tracking-heading); margin: 0 0 17px; }
.article__subtitle { color: var(--color-muted); font-size: 1.12rem; line-height: var(--line-lead); margin: 0 0 16px; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 15px; color: var(--color-muted); font-size: .83rem; margin-bottom: 22px; }
.article__meta time { font-variant-numeric: tabular-nums; }
.article__hero-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-card); }
.article__lead { font-size: 1.13rem; font-weight: 480; line-height: 1.78; margin: 26px 0; }
.article__body { font-size: var(--font-body); line-height: var(--line-body); }
.article__body > :first-child { margin-top: 0; }
.article__body p { margin: 0 0 var(--space-paragraph); }
.article__body h2 { font-size: var(--font-h2); margin: var(--space-heading-before) 0 var(--space-heading-after); padding-bottom: 9px; border-bottom: 2px solid var(--section-title-rule); scroll-margin-top: calc(var(--header-height) + 24px); }
.article__body h3 { font-size: var(--font-h3); margin: 32px 0 15px; scroll-margin-top: calc(var(--header-height) + 24px); }
.article__body h4 { margin: 26px 0 12px; }
.article__body ul, .article__body ol { padding-left: 24px; margin: 0 0 24px; }
.article__body li { margin-bottom: 10px; padding-left: 2px; }
.article__body li::marker { color: var(--color-brand); font-weight: 800; }
.article__body blockquote { position: relative; margin: 30px 0; padding: 17px 20px; border-left: 4px solid var(--color-brand); background: var(--color-surface); color: var(--color-ink); font-size: 1.05rem; }
.article__body blockquote p:last-child { margin: 0; }
.article__body mark { padding: .03em .16em; background: #ffefba; color: inherit; }
.article__body code, .code-inline { padding: .15em .35em; border-radius: var(--radius-xs); background: var(--color-surface-2); color: var(--color-ink); font: .88em/1.5 var(--font-mono); }
.article__body pre { overflow-x: auto; padding: 22px; margin: 22px 0; background: #162033; color: #e7ecf5; border-radius: var(--radius-sm); font: .86rem/1.6 var(--font-mono); white-space: pre; }
.article__body pre code { background: transparent; color: inherit; padding: 0; }
.article__body figure { margin: 26px 0; }
.article__body figure img { display: block; width: 100%; border-radius: var(--radius-xs); }
.article__body .table-scroll { font-size: .92rem; }
.article__body .faq__question { font-size: 1rem; }
.article__body .summary-box { font-size: .96rem; }
.article__body .summary-box .data-table { font-size: .92rem; }
.article__body a:not(.btn, .card, .chip, .tag, .link-arrow) { font-weight: 590; }
.article__body .related-grid a { font-size: .94rem; }
.article__update { margin: 30px 0 0; font-size: .82rem; color: var(--color-muted); }
.author-box { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 35px 0; }
.author-box__avatar { display: grid; place-items: center; flex: 0 0 49px; width: 49px; height: 49px; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand); font-size: 1.1rem; font-weight: 850; }
.author-box__name { margin: 0 0 6px; font-weight: 800; }
.author-box__bio { margin: 0; color: var(--color-muted); font-size: .9rem; }
.content-index { padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); margin: 25px 0; }
.content-index__title { font-weight: 800; margin: 0 0 9px; }
.content-index ol { margin: 0; padding-left: 24px; }
.content-index li { margin-bottom: 6px; }
.content-index a { color: var(--color-ink); text-decoration: none; }
.content-index a:hover { color: var(--color-brand); text-decoration: underline; }
.post-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.post-list__item { padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.post-list__item:first-child { border-top: 1px solid var(--color-border); }
.post-list__category { color: var(--color-brand); font-size: .78rem; font-weight: 800; }
.post-list__title { margin: 7px 0 8px; font-size: 1.12rem; line-height: 1.45; }
.post-list__title a { color: var(--color-ink); text-decoration: none; }
.post-list__title a:hover { color: var(--color-brand); text-decoration: underline; }
.post-list__excerpt { margin: 0 0 9px; font-size: .91rem; color: var(--color-muted); }
.post-list__date { font-size: .79rem; color: var(--color-subtle); }
.post-list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.post-list--cards .post-list__item { border: var(--border-card); padding: 21px; border-radius: var(--radius-card); background: var(--color-elevated); }
.post-list--cards .post-list__item:first-child { border: var(--border-card); }
.article-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 30px 0; padding: 18px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.article-share__label { font-size: .86rem; color: var(--color-muted); font-weight: 750; margin-right: 5px; }
.article-share button { min-height: 39px; padding: 8px 12px; border-radius: var(--radius-xs); border: 1px solid var(--color-border); background: var(--color-elevated); color: var(--color-ink); }
.article-share button:hover { border-color: var(--color-brand); color: var(--color-brand); }
.docs-hint { display: inline-flex; gap: 8px; align-items: center; color: var(--color-muted); font-size: .83rem; }
.docs-hint__key { padding: 0 6px; border: 1px solid var(--color-border); border-radius: 4px; font: 11px var(--font-mono); }


/* ====== 05-responsive.css ====== */
/* Mobile-first safeguards layered over shared components. */
@media (max-width: 1180px) {
  .layout-docs { grid-template-columns: 200px minmax(0,1fr); gap: 28px; }
  .layout-docs__toc { display: none; }
}
@media (max-width: 1000px) {
  :root { --sidebar: 230px; --space-section: 52px; --space-hero: 70px; }
  .layout-article { gap: 28px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-nav__actions .site-search--compact { display: none; }
}
@media (max-width: 800px) {
  :root { --gutter: 20px; --header-height: 64px; --space-section: 44px; --space-hero: 58px; --font-display: clamp(2.1rem, 7vw, 3.3rem); }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { flex-wrap: wrap; gap: 0; }
  .site-nav { display: none; flex: 1 1 100%; order: 3; padding: 8px 0 18px; flex-direction: column; align-items: stretch; gap: 8px; }
  .site-header[data-menu-open='true'] .site-nav { display: flex; }
  .site-nav__links { align-items: stretch; gap: 0; flex-direction: column; width: 100%; }
  .site-nav__link, .dropdown > summary { display: flex; width: 100%; min-height: 47px; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
  .site-nav__link[aria-current='page'] { box-shadow: inset 4px 0 var(--color-brand); }
  .dropdown-menu { position: static; width: 100%; box-shadow: none; margin: 4px 0; }
  .site-nav__actions { width: 100%; margin: 0; padding-top: 7px; }
  .site-nav__actions .btn { flex: 1; }
  .layout-article { grid-template-columns: minmax(0, 1fr); }
  .layout-article__main { max-width: var(--reading); }
  .layout-article__aside { position: static; }
  .layout-docs { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .layout-docs__aside { position: static; max-height: none; overflow: visible; padding: 15px; background: var(--color-surface); border-radius: var(--radius-sm); }
  .layout-docs__aside .side-nav { display: none; }
  .layout-docs__aside[data-expanded='true'] .side-nav { display: block; }
  .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { max-width: 650px; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-header--sticky { position: relative; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; --font-body: 16px; --font-h1: 1.88rem; --font-h2: 1.47rem; --font-h3: 1.18rem; --space-section: 36px; --space-hero: 48px; --space-heading-before: 39px; --space-heading-after: 16px; --card-padding: 20px; --space-paragraph: 20px; }
  html { scroll-padding-top: 25px; }
  .brand__name { font-size: 1.15rem; }
  .brand__caption { display: none; }
  .hero__title { line-height: 1.23; }
  .hero__description { font-size: 1rem; }
  .hero__visual { padding: 20px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero-search { margin-top: 25px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0,1fr); }
  .grid--auto { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: 12px; }
  .section__heading { align-items: start; }
  .section__heading .link-arrow { font-size: .81rem; }
  .card { padding: var(--card-padding); }
  .card--horizontal { flex-direction: column; align-items: stretch; }
  .card--horizontal .card__media { width: 100%; }
  .section__title { line-height: 1.3; }
  .topic-list { grid-template-columns: minmax(0, 1fr); }
  .site-footer { padding: 42px 0 25px; margin-top: 35px; }
  .site-footer__grid { gap: 23px 17px; }
  .site-footer__grid > :first-child { grid-column: 1/-1; }
  .article__title { line-height: 1.35; }
  .article__lead { font-size: 1.05rem; }
  .article__body h2 { margin-top: 38px; }
  .article__body .table-scroll { margin: 20px 0; }
  .data-table { font-size: .86rem; }
  .data-table :is(th, td) { padding: 11px 12px; }
  .data-table--stacked thead { display: none; }
  .data-table--stacked tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
  .data-table--stacked tbody tr:last-child { border-bottom: 0; }
  .data-table--stacked tbody :is(th, td) { display: grid; grid-template-columns: minmax(95px, 37%) minmax(0,1fr); gap: 8px; border: 0; padding: 7px 12px; }
  .data-table--stacked tbody :is(th, td)::before { content: attr(data-label); color: var(--color-muted); font-weight: 750; }
  .key-value { grid-template-columns: minmax(105px, 38%) minmax(0,1fr); }
  .key-value :is(dt,dd) { padding: 13px 10px; font-size: .9rem; }
  .search-box { padding: 5px; }
  .search-box__input { width: 0; padding: 9px; font-size: 16px; }
  .search-box .btn { padding-inline: 14px; }
  .form-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .cta-panel { padding: 22px; flex-direction: column; align-items: flex-start; }
  .cta-panel .btn { width: 100%; }
  .related-grid, .post-list--cards { grid-template-columns: minmax(0,1fr); }
  .summary-box, .alert { padding: 17px; }
  .article__body blockquote { padding: 16px; }
  .faq__question { font-size: .95rem; }
  .site-footer__links a { font-size: .84rem; }
}
@media (max-width: 400px) {
  :root { --font-display: 2.03rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .search-box .btn { font-size: .83rem; padding-inline: 10px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__grid > :first-child { grid-column: auto; }
  .brand__symbol { flex-basis: 32px; width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn, .card, .chip, .search-box, .nav-toggle, .faq__item { border: 1px solid CanvasText; }
  .btn { forced-color-adjust: auto; }
}
@media print {
  @page { margin: 15mm; }
  body { color: #000; background: #fff; font: 11pt/1.55 Arial, sans-serif; }
  .site-header, .site-footer, .layout-article__aside, .layout-docs__aside, .layout-docs__toc, .article-share, .ad-slot, .btn, .nav-toggle, .site-nav, .hero-search, .pagination, .skip-link { display: none!important; }
  .layout-article, .layout-docs { display: block; }
  .container, .site-shell, .container--reading { max-width: none; width: 100%; }
  .hero, .page-head { padding: 10px 0; color: #000; background: #fff; }
  .article__body a::after { content: ' (' attr(href) ')'; font: 9pt monospace; }
  .article__body h2, .article__body h3 { break-after: avoid; }
  tr, img, figure, .card, .summary-box { break-inside: avoid; }
  .table-scroll { overflow: visible; }
  .data-table { font-size: 9pt; }
}
@media(max-width:800px){
  .no-js .site-nav { display:flex; }
  .no-js .nav-toggle { display:none; }
}


/* ====== 06-utilities.css ====== */
/* Tiny compositional helpers; avoid inline style proliferation */
.u-mt-0{margin-top:0!important}.u-mt-2{margin-top:8px!important}.u-mt-4{margin-top:16px!important}.u-mt-6{margin-top:24px!important}.u-mt-8{margin-top:40px!important}
.u-mb-0{margin-bottom:0!important}.u-mb-2{margin-bottom:8px!important}.u-mb-4{margin-bottom:16px!important}.u-mb-6{margin-bottom:24px!important}.u-mb-8{margin-bottom:40px!important}
.u-text-center{text-align:center}.u-text-right{text-align:right}.u-flex{display:flex}.u-flex-wrap{flex-wrap:wrap}.u-align-center{align-items:center}.u-justify-between{justify-content:space-between}.u-gap-2{gap:8px}.u-gap-4{gap:16px}.u-gap-6{gap:24px}
.u-block{display:block}.u-full{width:100%}.u-max-reading{max-width:var(--reading)}.u-visually-subtle{color:var(--color-muted)}.u-nowrap{white-space:nowrap}.u-tabular{font-variant-numeric:tabular-nums}
.u-divider{border-bottom:1px solid var(--color-border)}.u-elevated{box-shadow:var(--shadow-card)}.u-radius{border-radius:var(--radius-card)}
@media(max-width:600px){.u-hide-mobile{display:none!important}}@media(min-width:801px){.u-hide-desktop{display:none!important}}