/*
 * @ailix/web-kit/styles.css — the ailix design system (ailix-suite DESIGN.md) for the three web apps.
 * Brand facts (colors, typeface, logo) follow the ailix Brand Identity Graphic Standards (docs/brand).
 * The shell follows design B "Navy Signature" (docs/design/claude-design/export, 2026-10-24): full-height sidebar,
 * white GNB, 15px body text, 40px controls, ⓘ tooltips instead of help text. The surfaces follow design C "Ink"
 * (docs/design/minimal-flat/export, C-IMPLEMENTATION.md, 2026-11-04): minimal and bold flat — a white page, no
 * shadows, radii 6 (controls, chips, tabs, selected blocks, number tiles) and 8 (cards, table boxes, dialogs, bubbles,
 * toasts, menus, banners), a 2px ink rule under section and table heads, one 1px line between rows, selection drawn
 * as a filled deep-navy block (color.block, set by the colour theme) and status chips filled with their status colour.
 * Import once in the root layout. Rules sit in the `ailix` cascade layer, so unlayered app CSS wins.
 * Tokens are DESIGN.md tokens as custom properties (color.brand.blue → --color-brand-blue); apps use them, not hex values.
 * Pretendard is self-hosted next to this file (CSP font-src 'self').
 * Colour and font themes (DESIGN.md theme-picker) override token values from themes.css with data-color and data-font
 * on <html>; no attribute is the default theme, ailix 블루 + Pretendard.
 */
@import "./fonts/pretendard.css";
@import "./themes.css";

@layer ailix {
  /* ── Design tokens (DESIGN.md §2 Foundations) ─────────────────────── */
  :root {
    /* Brand (brandbook 1.09, RGB values) */
    --color-brand-blue: #1032cd;
    --color-brand-green: #6edc79;
    --color-brand-sky: #00b2ff;
    --color-brand-azure: #0080ff;
    --color-brand-navy: #2d2f8e;
    /* Action: the values of the default colour theme (ailix 블루); themes.css sets the others. */
    --color-action: var(--color-brand-blue);
    --color-action-ink: #ffffff;
    --color-action-text: var(--color-brand-blue);
    --color-focus: var(--color-brand-blue);
    --color-action-hover: #0b27a8;
    --color-action-pressed: #081f87;
    --color-action-soft: #e7ecfc;
    --color-action-tint: #f3f6fe;
    /* Surfaces, lines, ink (design C: the page is white, surface.sunk the only other face, one line colour) */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-sunk: #eef0f4;
    --color-line: #dfe2e8;
    --color-line-strong: #c5ccd9;
    --color-line-field: #7b8193;
    --color-ink: #0f1220;
    --color-ink-secondary: #353a4a;
    --color-ink-muted: #575d6e;
    --color-ink-inverse: #ffffff;
    /* The filled selection block (design C): the current tab, the selected row, a pressed number tile, the picked
       Segmented item, toasts, tooltips and staff's own chat bubble. Deep navy in the default theme, set by the colour
       theme with the sidebar; white words 16.3:1, its muted words 9.8:1, and 1.84:1 against ailix Blue, so a navy
       block and a blue primary button side by side are never taken for each other. */
    --color-block: #181a4a;
    --color-block-ink: #ffffff;
    --color-block-muted: #c3c6e6;
    /* Focus outline on a block, the dark sidebar or the video room (the blue focus is 1.84:1 on navy) */
    --color-focus-on-block: #ffffff;
    /* Status: filled chips (the status colour with white words), soft faces for banners, always with an icon and
       words, never colour alone. -line: the status icon on a block (toasts, 3:1 or more). */
    --color-ok: #18794e;
    --color-ok-soft: #e5f6ec;
    --color-ok-line: #8fd6a8;
    --color-warn: #8a5300;
    --color-warn-soft: #fff3d6;
    --color-warn-line: #e8b54a;
    --color-bad: #b42318;
    --color-bad-hover: #9a1d13;
    --color-bad-soft: #fdecea;
    --color-bad-line: #f1a39b;
    --color-info: #00629b;
    --color-info-soft: #e2f3fd;
    --color-info-line: #8fcdf0;
    --color-pi: #6b3fa0;
    --color-pi-soft: #f1ebfa;
    --color-pi-line: #c8b3e6;
    /* Sidebar, deep navy in the default theme (contrast on it: ink 12.6:1, muted and version 7.4:1); the current item
       an opaque lighter navy with a 4px ailix Green bar (7.2:1 on it) */
    --color-nav-bg: #181a4a;
    --color-nav-strong: #ffffff;
    --color-nav-current-ink: #ffffff;
    --color-nav-bar: var(--color-brand-green);
    --color-nav-badge-bg: var(--color-brand-green);
    --color-nav-badge-ink: #0f1220;
    --color-nav-focus: #ffffff;
    --color-nav-logo-symbol: #ffffff;
    --color-nav-logo-type: #ffffff;
    --color-nav-ink: #dfe2ee;
    --color-nav-muted: #a9acd6;
    --color-nav-version: #a9acd6;
    --color-nav-current: #2a2d6e;
    /* Version under the white logo on ailix Blue (4.97:1) */
    --color-version-on-blue: #b4c0f0;
    /* The sign-in brand face, set by the colour theme (default: the brandbook's ailix Blue face): its face, words,
       version and logo only (design C: no shapes under the lines). */
    --color-auth-face: var(--color-brand-blue);
    --color-auth-ink: var(--color-ink-inverse);
    --color-auth-version: var(--color-version-on-blue);
    --color-auth-logo-symbol: var(--color-ink-inverse);
    --color-auth-logo-type: var(--color-ink-inverse);
    /* Live dot, connected, the speaker's tile edge, the 「진행 중」 chip (ailix Green in every theme) */
    --color-live: var(--color-brand-green);
    /* The partner hospital: its dot, sender name and chat bubbles */
    --color-partner: #00747a;
    --color-partner-soft: #e0f1f1;
    /* Video room (stays a dark neutral in design C) */
    --color-chrome: #12162b;
    --color-chrome-raised: #1c2240;
    --color-chrome-line: #2a3157;
    --color-chrome-ink: #f2f4fa;
    --color-chrome-muted: #a3aac0;
    --color-chrome-control: #2a3058;
    --color-chrome-control-hover: #353c6e;
    /* Scrims under dialogs (darker) and side panels (lighter): a floating layer stands on these, not on a shadow */
    --color-scrim: rgba(15, 18, 32, 0.56);
    --color-scrim-light: rgba(15, 18, 32, 0.32);
    /* Type (brandbook 1.08: Pretendard Semi Bold · Medium · Regular) */
    --font-family-sans-default: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
      "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", "Noto Sans", sans-serif;
    --font-family-sans: var(--font-family-sans-default);
    /* Han text in a Korean font shows Korean glyph forms (Pretendard carries 435 Hanja), and Pretendard has no Thai
       letters: those languages put their own fonts first (the :lang rules below). Vietnamese stays on Pretendard, whose
       full font draws its tone letters (the latin-ext slice of fonts/pretendard.css). Chinese and Japanese fonts draw
       Cyrillic full-width, so a Russian name or a chat original there takes Pretendard's Cyrillic slice, loaded for
       Cyrillic only as "Ailix Cyrillic Variable" (fonts/pretendard.css); Han, kana and Latin stay with the system fonts. */
    --font-family-sans-zh-hans: "Ailix Cyrillic Variable", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
      "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-family-sans-zh-hant: "Ailix Cyrillic Variable", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
      "Source Han Sans TC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-family-sans-ja: "Ailix Cyrillic Variable", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo,
      "Noto Sans JP", "Source Han Sans JP", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-family-sans-th: "Pretendard Variable", Pretendard, Thonburi, "Leelawadee UI", "Noto Sans Thai", -apple-system,
      BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
    --font-family-sans-vi: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
      Roboto, "Noto Sans", sans-serif;
    --font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    /* Page, section, dialog and empty-state titles: the serif font theme sets --font-family-display (themes.css). */
    --font-family-heading: var(--font-family-display, var(--font-family-sans));
    --font-tracking-title: -0.01em;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    /* Type sizes (design B: nothing meaningful under 13px) */
    --font-size-display: 32px;
    --font-size-title-lg: 24px;
    --font-size-title-md: 20px;
    --font-size-title-sm: 17px;
    --font-size-body-lg: 17px;
    --font-size-body: 15px;
    --font-size-label: 14px;
    --font-size-caption: 13px;
    /* The six boxes of a sign-in code (no patient-only sizes since 2026-10-28) */
    --font-size-code: 24px;
    /* Shape, space, size. Two radii only (design C, no pills): sm for controls, chips, badges, tabs, selected blocks
       and number tiles; md for cards, table boxes, dialogs, sheets, bubbles, toasts, panels, menus and banners. */
    --radius-sm: 6px;
    --radius-md: 8px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --size-control-sm: 32px;
    --size-control-md: 40px;
    --size-control-lg: 48px;
    --size-logo-header: 24px;
    --size-gnb: 64px;
    --size-side: 256px;
    --size-side-rail: 72px;
    --size-side-drawer: 296px;
    --size-panel: 480px;
    --layout-content-max: 1360px;
    /* How far a page's box stands in from the edges of the area right of the sidebar, so that what it holds is at most
       layout.content.max wide and centred there (a 1920 window: 1360 of its 1664), its outer padding (space.8) kept.
       100% is the width its margin or padding is measured on: use it on a page, or on a box as wide as that area (an
       app's own full-height layout, its bars). A web-kit helper, not a DESIGN.md token. */
    --ailix-page-inset: max(0px, calc((100% - var(--layout-content-max)) / 2 - var(--space-8)));
    /* Focus and motion */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --motion-duration-fast: 120ms;
    --motion-duration-base: 200ms;
    --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    /* Design C (2026-11-04) has no shadows, two radii, one line colour and no bubble or banner edges, so the shadow,
       radius.lg/.xl/.pill, line.soft and *-line edge tokens are gone (the public site pins its own design B copies in
       site.css). The -bar colours stay for the public site's ailix Codex graph, which draws field colours with them
       (site codex.css, codex-render.mjs FIELD_COLOURS); toasts no longer have a bar. */
    --color-ok-bar: #2f9e62;
    --color-warn-bar: #d99a1e;
    --color-bad-bar: #d93a2b;
    --color-info-bar: #1a8fd0;
    --color-pi-bar: #8a5cc4;
    color-scheme: light;
  }

  /* ── Base ─────────────────────────────────────────────────────────── */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: 100%;
    /* what gets focus or is scrolled to stays out from under the sticky GNB (WCAG 2.4.11, R6-01) */
    scroll-padding-top: calc(var(--size-gnb) + var(--space-2));
  }
  /* …and from under a bar fixed at the bottom (「저장하지 않은 변경」), as tall as ToastProvider measures it (R7-01) */
  html:has([data-bottom-bar]) {
    scroll-padding-bottom: calc(var(--ailix-bottom-bar, 128px) + var(--space-2));
  }
  /* Focus on the GNB, the sidebar or a bar (sticky: always inside that band) moves nothing under it (R8-01: the page
     jumped when a GNB menu closed, the drawer closed or the bar's reason was typed in) */
  html:has(.ailix-gnb:focus-within, .ailix-side:focus-within, [data-top-bar]:focus-within, [data-bottom-bar]:focus-within) {
    scroll-padding-top: 0;
    scroll-padding-bottom: 0;
  }
  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }
  :lang(ko),
  :lang(en),
  :lang(ru),
  :lang(kk),
  :lang(id),
  :lang(mn),
  :lang(uz) {
    --font-family-sans: var(--font-family-sans-default);
    --font-family-heading: var(--font-family-display, var(--font-family-sans));
  }
  /* Titles follow the language too: the serif font theme names a serif per script (themes.css). */
  :lang(zh-Hans) {
    --font-family-sans: var(--font-family-sans-zh-hans);
    --font-family-heading: var(--font-family-display-zh-hans, var(--font-family-sans));
  }
  :lang(zh-Hant) {
    --font-family-sans: var(--font-family-sans-zh-hant);
    --font-family-heading: var(--font-family-display-zh-hant, var(--font-family-sans));
  }
  :lang(ja) {
    --font-family-sans: var(--font-family-sans-ja);
    --font-family-heading: var(--font-family-display-ja, var(--font-family-sans));
  }
  :lang(th) {
    --font-family-sans: var(--font-family-sans-th);
    --font-family-heading: var(--font-family-display-th, var(--font-family-sans));
    word-break: normal;
  }
  :lang(vi) {
    --font-family-sans: var(--font-family-sans-vi);
    --font-family-heading: var(--font-family-display-vi, var(--font-family-sans));
  }
  /* A text in another language inside the page (a chat original, a language menu item) takes that language's font. */
  [lang]:not(html) {
    font-family: var(--font-family-sans);
  }
  /* Chinese and Japanese have no spaces: keep-all would keep a whole sentence on one line. */
  :lang(zh),
  :lang(ja) {
    word-break: normal;
    line-break: strict;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    font-variant-numeric: tabular-nums;
  }
  a {
    color: var(--color-action-text);
    text-decoration: none;
  }
  a:hover {
    color: var(--color-action-text);
    text-decoration: underline;
  }
  :focus {
    outline: none;
  }
  :focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }
  /* On a dark face (the video room): the white outline, since the blue one is lost there. A filled block (a toast, the
     selected row) turns --color-focus itself (Filled block faces, below). */
  [data-dark] :focus-visible {
    outline-color: var(--color-focus-on-block);
  }
  /* The sidebar is dark or light by theme: white on navy, the theme colour on a light one. */
  .ailix-side :focus-visible {
    outline-color: var(--color-nav-focus);
  }
  h1,
  h2,
  h3 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    margin: 0;
  }

  .ailix-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ailix-num {
    font-variant-numeric: tabular-nums;
  }
  .ailix-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-caption);
  }
  .ailix-muted {
    color: var(--color-ink-muted);
  }
  .ailix-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ailix-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .ailix-icon {
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    vertical-align: middle;
  }
  .ailix-icon--spin {
    animation: ailix-spin 0.8s linear infinite;
  }
  .ailix-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-action-text);
    cursor: pointer;
    font-size: inherit;
  }
  .ailix-link:hover {
    text-decoration: underline;
  }
  @keyframes ailix-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes ailix-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes ailix-loading-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes ailix-dot {
    0%,
    80%,
    100% {
      opacity: 0.25;
    }
    40% {
      opacity: 1;
    }
  }

  /* ── Brand mark: logo with the version centred under the whole logo ─ */
  .ailix-brandmark {
    display: inline-flex;
    flex-direction: column;
    width: 71px;
    flex: none;
  }
  .ailix-brandmark img,
  .ailix-brandmark svg {
    display: block;
    height: 24px;
    width: 71px;
  }
  .ailix-brandmark__ver {
    display: block;
    text-align: center; /* under the symbol and logotype together */
    font-size: 12px;
    font-weight: var(--font-weight-regular);
    line-height: 16px;
    margin-top: 4px;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }
  .ailix-brandmark--lg {
    width: 83px;
  }
  .ailix-brandmark--lg img,
  .ailix-brandmark--lg svg {
    height: 28px;
    width: 83px;
  }
  .ailix-brandmark--lg .ailix-brandmark__ver {
    margin-top: 6px;
  }
  .ailix-brandmark--on-navy .ailix-brandmark__ver {
    color: var(--color-nav-version);
  }
  .ailix-brandmark--on-blue .ailix-brandmark__ver {
    color: var(--color-version-on-blue);
  }
  .ailix-brandmark--on-auth .ailix-brandmark__ver {
    color: var(--color-auth-version);
  }
  .ailix-brandmark--symbol {
    width: auto;
    align-items: center;
  }
  .ailix-brandmark--symbol img,
  .ailix-brandmark--symbol svg {
    width: auto;
  }

  /* The shell's skeleton (ShellSkeleton) while a signed-in page gets ready: the widths by CSS alone. */
  .ailix-app--skel .ailix-side {
    transition: none;
  }
  .ailix-skel-brand--rail {
    display: none;
  }
  .ailix-skel-nav {
    display: block;
    height: 20px;
    margin: 12px;
    border-radius: var(--radius-sm);
    visibility: hidden;
  }
  @media (max-width: 1279px) {
    .ailix-app--skel .ailix-side {
      width: var(--size-side-rail);
    }
    .ailix-app--skel .ailix-side__brand {
      justify-content: center;
      padding: 10px 0;
    }
    .ailix-skel-brand--wide {
      display: none;
    }
    .ailix-skel-brand--rail {
      display: inline-flex;
    }
  }
  @media (max-width: 1023px) {
    .ailix-app--skel .ailix-side {
      display: none;
    }
  }
  :root[data-side-collapsed] .ailix-app--skel .ailix-side {
    width: var(--size-side-rail);
  }
  :root[data-side-collapsed] .ailix-app--skel .ailix-side__brand {
    justify-content: center;
    padding: 10px 0;
  }
  :root[data-side-collapsed] .ailix-skel-brand--wide {
    display: none;
  }
  :root[data-side-collapsed] .ailix-skel-brand--rail {
    display: inline-flex;
  }
  /* ── App shell: deep-navy sidebar + white GNB + scrolling main ────── */
  .ailix-app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-bg);
  }
  .ailix-app[data-mode="embed"],
  .ailix-app[data-mode="guest"] {
    display: block;
  }
  .ailix-side {
    flex: none;
    position: sticky;
    top: 0;
    width: var(--size-side);
    height: 100vh;
    height: 100dvh;
    background: var(--color-nav-bg);
    color: var(--color-nav-strong);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 30;
    transition: width var(--motion-duration-base) var(--motion-easing-standard);
  }
  .ailix-side__brand {
    flex: none;
    min-height: var(--size-gnb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 10px 12px 10px 20px;
  }
  .ailix-side__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-3) var(--space-6);
  }
  .ailix-side__org {
    padding: 0 var(--space-3);
  }
  /* The hospital's logo before its name (2026-11-05): a white tile, as logos are drawn for white paper */
  .ailix-side__org--logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .ailix-side__logo {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ailix-side__logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .ailix-side__orgtext {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .ailix-side__orgname {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-nav-strong);
  }
  .ailix-side__orgside {
    font-size: var(--font-size-caption);
    color: var(--color-nav-muted);
    margin-top: 2px;
  }
  .ailix-side__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ailix-side__title {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    color: var(--color-nav-muted);
    padding: 0 var(--space-3) 6px;
    line-height: 1.4;
  }
  .ailix-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    color: var(--color-nav-ink);
    background: transparent;
    text-decoration: none;
    transition: background var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-nav:hover {
    background: var(--color-nav-current);
    color: var(--color-nav-strong);
    text-decoration: none;
  }
  /* The current item: the opaque current face, semibold, and a 4px bar at its left edge (an inset edge, clipped by the
     item's corners like C's bar, not a shadow) */
  .ailix-nav[aria-current="page"] {
    color: var(--color-nav-current-ink);
    background: var(--color-nav-current);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 4px 0 0 var(--color-nav-bar);
  }
  .ailix-nav__label {
    flex: 1;
    min-width: 0;
  }
  .ailix-nav__badge {
    min-width: 24px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    background: var(--color-nav-badge-bg);
    color: var(--color-nav-badge-ink);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  /* Rail: icons only, names in tooltips */
  .ailix-app[data-side="rail"] .ailix-side {
    width: var(--size-side-rail);
  }
  .ailix-app[data-side="rail"] .ailix-side__brand {
    justify-content: center;
    padding: 10px 8px;
  }
  .ailix-app[data-side="rail"] .ailix-nav {
    justify-content: center;
  }
  .ailix-app[data-side="rail"] .ailix-nav__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 20px;
    min-height: 20px;
    padding: 0 5px;
    font-size: var(--font-size-caption);
  }
  /* Drawer (under 1024px): the sidebar slides over the page */
  .ailix-app[data-side="drawer"] .ailix-side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--size-side-drawer);
    max-width: 100%;
    z-index: 60;
    transform: translateX(-105%);
    visibility: hidden;
    transition:
      transform var(--motion-duration-base) var(--motion-easing-standard),
      visibility 0s linear var(--motion-duration-base);
  }
  .ailix-app[data-side="drawer"][data-drawer="open"] .ailix-side {
    transform: none;
    visibility: visible;
    transition: transform var(--motion-duration-base) var(--motion-easing-standard);
  }
  /* Rail opened with ≡ (1024–1279px): the full sidebar over the page for a moment; the page keeps its place. */
  .ailix-app[data-side="overlay"] {
    padding-left: var(--size-side-rail);
  }
  .ailix-app[data-side="overlay"] .ailix-side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--size-side);
    z-index: 60;
    transition: none;
  }
  /* The drawer and the opened rail keep their head (logo, version, ×) while the list scrolls to the current item on
     opening in a low window; focus moving up the list stays out from under it (R9-01) */
  .ailix-app:is([data-side="drawer"], [data-side="overlay"]) .ailix-side {
    scroll-padding-top: calc(var(--size-gnb) + var(--space-2));
  }
  .ailix-app:is([data-side="drawer"], [data-side="overlay"]) .ailix-side__brand {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-nav-bg);
  }
  .ailix-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--color-scrim);
  }
  .ailix-side__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 0;
    background: transparent;
    color: var(--color-nav-strong);
    cursor: pointer;
  }
  .ailix-side__close:hover {
    background: var(--color-nav-current);
  }

  .ailix-frame {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .ailix-gnb {
    flex: none;
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--size-gnb);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-6) 0 var(--space-3);
  }
  .ailix-gnb__end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
  }
  .ailix-gnb__end > * {
    min-width: 0;
  }
  .ailix-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-md);
    height: var(--size-control-md);
    flex: none;
    border-radius: var(--radius-sm);
    border: 0;
    background: transparent;
    color: var(--color-ink-secondary);
    cursor: pointer;
    transition: background var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-iconbtn:hover {
    background: var(--color-surface-sunk);
  }
  .ailix-iconbtn:active {
    background: var(--color-line);
  }
  .ailix-iconbtn--sm {
    width: var(--size-control-sm);
    height: var(--size-control-sm);
    border-radius: var(--radius-sm);
    color: var(--color-ink-muted);
  }
  /* The credit "pill" is a rounded rectangle in design C (no pills): no edge, 14/600. It shows only while the balance
     is low (DESIGN credit-pill), so it keeps the status's soft face and words beside its icon. */
  .ailix-credit {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: var(--space-2);
    min-height: var(--size-control-sm);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-warn-soft);
    color: var(--color-warn);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    text-decoration: none;
  }
  .ailix-credit:hover {
    text-decoration: underline;
    color: var(--color-warn);
  }
  .ailix-credit--bad,
  .ailix-credit--bad:hover {
    background: var(--color-bad-soft);
    color: var(--color-bad);
  }
  .ailix-credit__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ailix-credit__amount {
    display: none;
  }
  .ailix-clock {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    color: var(--color-ink-secondary);
    font-size: var(--font-size-body);
    white-space: nowrap;
  }
  /* Each zone its own two short lines, its date over its time (2026-11-04: two zones may be on different days) */
  .ailix-clock__zones {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
  }
  .ailix-clock__zone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
  }
  .ailix-clock__date {
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  .ailix-clock__time {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
  }
  .ailix-clock__sep,
  .ailix-clock__more {
    font-size: var(--font-size-label);
    line-height: 1.3;
    color: var(--color-ink-muted);
  }
  /* The clock menu: paired hospitals' local times (DESIGN.md gnb). */
  .ailix-menu__panel.ailix-clock-menu {
    min-width: 320px;
    max-width: min(400px, calc(100vw - 32px));
  }
  .ailix-clock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--space-3);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-label);
    color: var(--color-ink);
  }
  .ailix-clock-row:focus-visible {
    outline-offset: -2px;
  }
  .ailix-clock-row__name {
    display: flex;
    align-items: center;
    min-width: 0;
    font-weight: var(--font-weight-medium);
  }
  .ailix-clock-row__time {
    text-align: right;
  }
  .ailix-clock-row__sub {
    grid-column: 1 / -1;
    padding-left: 14px;
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  /* Hospital dot and name: the partner's dot is color.partner, our own color.action.text. */
  .ailix-partner {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
  .ailix-partner__dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--color-partner);
  }
  .ailix-partner__dot--home {
    background: var(--color-action-text);
  }
  /* The partner's local time under a date: caption, muted. */
  .ailix-partner-time {
    display: block;
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  .ailix-main {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* Page-wide notice above every page (terminating hospital) */
  .ailix-shell-notice {
    padding: var(--space-6) var(--space-8) 0;
  }
  .ailix-shell-notice + .ailix-page {
    padding-top: var(--space-4);
  }

  /* Menus (language, user, row actions) */
  .ailix-menu {
    position: relative;
  }
  .ailix-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--size-control-md);
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 0;
    background: transparent;
    color: var(--color-ink-secondary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-menu__trigger:hover {
    background: var(--color-surface-sunk);
  }
  .ailix-menu__trigger:active {
    background: var(--color-line);
  }
  .ailix-menu__trigger--user {
    gap: 10px;
    padding: 0 8px 0 4px;
    color: var(--color-ink);
  }
  .ailix-menu__name {
    max-width: 14em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ailix-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    min-width: 220px;
    /* As tall as the window allows: the 12 languages fit without a scrollbar (2026-10-28). */
    max-height: calc(100dvh - 96px);
    overflow: auto;
    background: var(--color-surface);
    /* design C: no shadow, a 1px ink edge sets the menu off the page */
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-md);
    padding: 6px;
    display: flex;
    flex-direction: column;
    animation: ailix-in var(--motion-duration-base) var(--motion-easing-standard);
  }
  .ailix-menu__panel--up {
    top: auto;
    bottom: calc(100% + 8px);
  }
  .ailix-menu__panel--left {
    right: auto;
    left: 0;
  }
  .ailix-menu__who {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 6px;
    font-size: var(--font-size-label);
    color: var(--color-ink-muted);
  }
  .ailix-menu__who b {
    color: var(--color-ink);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: var(--size-control-md);
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink);
    font-size: var(--font-size-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .ailix-menu__item:hover,
  .ailix-menu__item:focus-visible {
    background: var(--color-surface-sunk);
    color: var(--color-ink);
    text-decoration: none;
  }
  .ailix-menu__item:focus-visible {
    outline-offset: -2px;
  }
  .ailix-menu__item:disabled {
    color: var(--color-ink-muted);
    background: transparent;
    cursor: not-allowed;
  }
  .ailix-menu__list {
    display: flex;
    flex-direction: column;
  }
  .ailix-menu__item--danger,
  .ailix-menu__item--danger:hover {
    color: var(--color-bad);
  }
  .ailix-menu__item--danger:hover {
    background: var(--color-bad-soft);
  }
  .ailix-menu__check {
    width: 20px;
    display: inline-flex;
    color: var(--color-action-text);
  }
  /* The user's initials on a small block (design C: a 6px square, not a circle) */
  .ailix-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--color-block-ink);
    background: var(--color-block);
    flex: none;
    overflow: hidden;
  }
  /* A profile photo in the same square (2026-11-05); the initials' sizes follow the square */
  .ailix-avatar--photo {
    background: var(--color-surface-sunk);
  }
  .ailix-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Loading under the initials, out of sight, until it can cover them */
  .ailix-avatar img.ailix-avatar__wait {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
  .ailix-avatar--20 {
    width: 20px;
    height: 20px;
    font-size: var(--font-size-caption);
    letter-spacing: -0.04em;
  }
  .ailix-avatar--24 {
    width: 24px;
    height: 24px;
  }
  /* A hospital's logo before its name (2026-11-05): a white tile with a hairline in every size, the logo contained */
  .ailix-orglogo {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 2px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    overflow: hidden;
  }
  .ailix-orglogo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .ailix-orglogo--20 {
    width: 20px;
    height: 20px;
    padding: 1px;
  }
  .ailix-orglogo--32 {
    width: 32px;
    height: 32px;
  }
  .ailix-orglogo--40 {
    width: 40px;
    height: 40px;
    padding: 3px;
  }
  /* A person or a hospital named with their face or logo before the words; the words wrap beside it */
  .ailix-named {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
  }
  .ailix-named__text {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .ailix-partner .ailix-orglogo {
    margin-right: 2px;
  }
  .ailix-avatar--40 {
    width: 40px;
    height: 40px;
  }
  .ailix-avatar--64 {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-title-md);
  }

  /* ── Page ─────────────────────────────────────────────────────────── */
  .ailix-page {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
  }
  .ailix-page--narrow {
    max-width: 880px;
  }
  /* One column for every page (DESIGN.md layout rules): at most layout.content.max of content, centred right of the
     sidebar, the notice above it in the same column; a narrow page keeps its 880px at the column's left. Embed and
     guest pages keep their own widths. */
  .ailix-app[data-mode="full"] :is(.ailix-page, .ailix-shell-notice) {
    margin-inline: var(--ailix-page-inset);
  }
  .ailix-page-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
  }
  .ailix-page-h__main {
    flex: 1;
    /* the actions go under the title before it is squeezed to a narrow column (「Петров- / Водкин」 at 1024px, N4-03) */
    min-width: min(100%, 24em);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ailix-page-h__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-secondary);
  }
  .ailix-page-h__back:hover {
    color: var(--color-ink);
  }
  .ailix-page-h__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .ailix-page-h h1 {
    font-size: var(--font-size-title-lg);
    line-height: 1.35;
    letter-spacing: var(--font-tracking-title);
  }
  .ailix-page-h__sub {
    font-size: var(--font-size-label);
    color: var(--color-ink-muted);
  }
  .ailix-page-h__acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  /* ── Button ───────────────────────────────────────────────────────── */
  /* design C: every variant at radius.sm; secondary (the base) edged in ink, filled variants semibold; hover and press
     step the face one shade darker. */
  .ailix-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--size-control-md);
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-ink);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition:
      background var(--motion-duration-fast) var(--motion-easing-standard),
      border-color var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-btn:hover {
    background: var(--color-surface-sunk);
    color: var(--color-ink);
    text-decoration: none;
  }
  .ailix-btn:active {
    background: var(--color-line);
  }
  .ailix-btn--primary {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-action-ink);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-btn--primary:hover {
    border-color: var(--color-action-hover);
    background: var(--color-action-hover);
    color: var(--color-action-ink);
  }
  .ailix-btn--primary:active {
    border-color: var(--color-action-pressed);
    background: var(--color-action-pressed);
  }
  .ailix-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--color-ink-secondary);
  }
  .ailix-btn--ghost:hover {
    background: var(--color-surface-sunk);
    color: var(--color-ink-secondary);
  }
  .ailix-btn--ghost:active {
    background: var(--color-line);
  }
  .ailix-btn--text {
    border-color: transparent;
    background: transparent;
    color: var(--color-action-text);
  }
  .ailix-btn--text:hover,
  .ailix-btn--text:active {
    background: var(--color-action-soft);
    color: var(--color-action-text);
  }
  .ailix-btn--danger {
    border-color: var(--color-bad);
    background: var(--color-surface);
    color: var(--color-bad);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-btn--danger:hover,
  .ailix-btn--danger:active {
    background: var(--color-bad-soft);
    color: var(--color-bad);
  }
  .ailix-btn--danger-solid {
    border-color: var(--color-bad);
    background: var(--color-bad);
    color: var(--color-ink-inverse);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-btn--danger-solid:hover,
  .ailix-btn--danger-solid:active {
    border-color: var(--color-bad-hover);
    background: var(--color-bad-hover);
    color: var(--color-ink-inverse);
  }
  .ailix-btn--dark {
    border-color: transparent;
    background: var(--color-chrome-control);
    color: var(--color-ink-inverse);
  }
  .ailix-btn--dark:hover,
  .ailix-btn--dark:active {
    background: var(--color-chrome-control-hover);
    color: var(--color-ink-inverse);
  }
  .ailix-btn--sm {
    min-height: var(--size-control-sm);
    padding: 0 var(--space-3);
    gap: 6px;
    font-size: var(--font-size-label);
  }
  .ailix-btn--lg {
    min-height: var(--size-control-lg);
    padding: 0 var(--space-5);
    font-size: 16px;
  }
  .ailix-btn--block {
    display: flex;
    width: 100%;
  }
  .ailix-btn--icon {
    width: var(--size-control-md);
    padding: 0;
  }
  .ailix-btn--sm.ailix-btn--icon {
    width: var(--size-control-sm);
  }
  /* Off: the sunk face and muted words; only the edged variants (secondary, danger) keep a line edge. */
  .ailix-btn:is(:disabled, [aria-disabled="true"]) {
    border-color: var(--color-line);
    background: var(--color-surface-sunk);
    color: var(--color-ink-muted);
    font-weight: var(--font-weight-medium);
    cursor: not-allowed;
  }
  .ailix-btn:is(.ailix-btn--primary, .ailix-btn--danger-solid, .ailix-btn--dark):is(:disabled, [aria-disabled="true"]) {
    border-color: transparent;
  }
  .ailix-btn--ghost:disabled,
  .ailix-btn--text:disabled,
  .ailix-btn--ghost[aria-disabled="true"],
  .ailix-btn--text[aria-disabled="true"] {
    background: transparent;
    border-color: transparent;
  }
  .ailix-btn[aria-busy="true"] {
    cursor: progress;
  }
  .ailix-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    display: inline-block;
    flex: none;
    animation: ailix-spin 0.8s linear infinite;
  }
  .ailix-btn--sm .ailix-spinner {
    width: 14px;
    height: 14px;
  }

  /* ⓘ toggletip button next to titles and labels */
  .ailix-tipbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
    vertical-align: middle;
  }
  .ailix-tipbtn:hover {
    color: var(--color-ink);
    background: var(--color-surface-sunk);
  }

  /* ── Field ────────────────────────────────────────────────────────── */
  .ailix-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .ailix-field > label,
  .ailix-field__label {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 20px;
    margin-bottom: 6px;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink);
  }
  .ailix-field__label .ailix-tipbtn {
    margin: -6px 0;
  }
  .ailix-field__optional {
    font-weight: var(--font-weight-regular);
    color: var(--color-ink-muted);
    margin-left: 4px;
  }
  .ailix-field__hint {
    margin-top: 6px;
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  /* The line kept under a field from the start (reserve, password): one line of an error's height, so a hint, the
     error or the Caps Lock line comes and goes in place and nothing below moves (2026-11-04). */
  .ailix-field__msg {
    display: flex;
    /* one line of the error's size (14px × 1.4), the tallest of the three, so the error comes without a move */
    min-height: calc(var(--font-size-label) * 1.4);
    margin-top: var(--space-1);
  }
  /* A message at the right of the label's row (messageAt="label", the sign-in card; 2026-11-04): the row is there
     from the start, so the error or the Caps Lock line comes and goes in it without moving anything. */
  .ailix-field__aside {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
    padding-left: var(--space-2);
    text-align: right;
  }
  .ailix-field__aside > .ailix-field__error,
  .ailix-field__aside > .ailix-field__warn {
    margin-top: 0;
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
  }
  /* Two classes: wins over the lines' own margin-top wherever their rules stand. A line that keeps the room of other
     texts (a field's `room`, OneOf) gives its line height to the line shown and to its unseen copies alike. */
  .ailix-field__msg > .ailix-field__hint,
  .ailix-field__msg > .ailix-field__error,
  .ailix-field__msg > .ailix-oneof,
  .ailix-field__msg > .ailix-field__warn {
    flex: 1 1 auto;
    margin-top: 0;
    line-height: 1.4;
  }
  /* The kept line is room enough under a field: the next field comes space.2 under it, not a whole gap more
     (2026-11-04 「입력 폼들 사이 공백이 너무 많아요」). */
  .ailix-dialog__b > .ailix-field--reserve + .ailix-field {
    margin-top: calc(var(--space-2) - var(--space-4));
  }
  .ailix-panel__b > .ailix-field--reserve + .ailix-field {
    margin-top: calc(var(--space-2) - var(--space-5));
  }
  /* The sign-in card is tighter still (2026-11-04 「이메일, 비밀번호, 이메일 저장 컴포넌트 사이의 공백을 줄여서」, then
     「간격을 더 줄여주세요」): the kept line stands space.1 under its field, 14px × 1.25, and is the whole gap to whatever
     comes next (a field, the remember row, the button). */
  .ailix-auth__form .ailix-field__msg {
    margin-top: var(--space-1);
    min-height: calc(var(--font-size-label) * 1.25);
  }
  .ailix-auth__form .ailix-field__msg > .ailix-field__hint,
  .ailix-auth__form .ailix-field__msg > .ailix-field__error,
  .ailix-auth__form .ailix-field__msg > .ailix-oneof,
  .ailix-auth__form .ailix-field__msg > .ailix-field__warn {
    line-height: 1.25;
  }
  .ailix-auth__form > .ailix-field--reserve + * {
    margin-top: calc(0px - var(--space-3));
  }
  .ailix-field__error {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
    font-size: var(--font-size-label);
    color: var(--color-bad);
  }
  /* One of several texts in one place (OneOf, ui/one-of.tsx): the text shown and, unseen in the same grid cell, every
     text that may stand there, so the place keeps the room of the largest from the start and nothing beside or below
     it moves when another comes (2026-11-04). Inline it is as wide as its longest words, which stand centred (a
     button's); block it takes the line (a field's kept line, an error line kept under a group). The unseen copies are
     the lines themselves (a hint, an error with its icon) with their words drawn from data-word, so they take the
     room those lines take and are neither read out nor part of the page's text. */
  .ailix-oneof {
    display: inline-grid;
    justify-items: center;
    align-items: start;
  }
  .ailix-oneof--block {
    display: grid;
    justify-items: stretch;
    min-width: 0;
  }
  .ailix-oneof > * {
    grid-area: 1 / 1;
  }
  .ailix-oneof--block > * {
    min-width: 0;
  }
  /* Stacked in one cell, a line's own margin would make the room taller than the line */
  .ailix-oneof > :is(.ailix-field__hint, .ailix-field__error, .ailix-field__warn) {
    margin-top: 0;
  }
  .ailix-oneof__room {
    visibility: hidden;
  }
  .ailix-oneof__room::after {
    content: attr(data-word);
  }
  .ailix-input {
    width: 100%;
    min-width: 0;
    min-height: var(--size-control-md);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-line-field);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--font-size-body);
    transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-input:hover {
    border-color: var(--color-ink-muted);
  }
  /* Focus: a 2px edge in the focus colour drawn over the field's own edge (design C), so the words do not move */
  .ailix-input:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: calc(0px - var(--focus-ring-width));
  }
  /* A value that cannot be changed (StaticField): a read-only field's face, the words wrapping. */
  .ailix-static {
    min-height: var(--size-control-md);
    padding: 9px var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunk);
    color: var(--color-ink-secondary);
    font-size: var(--font-size-body);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  /* A list's search box (SearchField): the icon inside the left end, the x inside the right end. */
  .ailix-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(100%, 360px);
  }
  .ailix-search > .ailix-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-ink-muted);
    pointer-events: none;
  }
  .ailix-search__input.ailix-input {
    padding-left: calc(var(--space-3) + 18px + var(--space-2));
    padding-right: var(--size-control-md);
  }
  .ailix-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }
  .ailix-search__clear {
    position: absolute;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-md);
    height: var(--size-control-md);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
  }
  .ailix-search__clear:hover {
    color: var(--color-ink);
  }
  /* Caps Lock on while typing a password (PasswordField): a warning line under the field. */
  .ailix-field__warn {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
    font-size: var(--font-size-label);
    color: var(--color-warn);
  }
  /* The rules a new password must meet, ticked while typing (sign-in screen). */
  .ailix-auth__rules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  .ailix-auth__rules li {
    display: flex;
    gap: var(--space-1);
    align-items: center;
  }
  .ailix-auth__rules li[data-ok="true"] {
    color: var(--color-ok);
  }
  .ailix-auth__help {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: var(--font-size-label);
    color: var(--color-ink-secondary);
  }
  .ailix-auth__help--column {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
  /* A password with its eye button inside the field's right end (PasswordField). */
  .ailix-input-wrap {
    position: relative;
    display: flex;
  }
  .ailix-input--end {
    padding-right: calc(var(--size-control-md) + var(--space-1));
  }
  .ailix-input__end {
    position: absolute;
    top: 50%;
    right: var(--space-1);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-sm);
    height: var(--size-control-sm);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
  }
  .ailix-input__end:hover {
    background: var(--color-surface-sunk);
    color: var(--color-ink);
  }
  select.ailix-input {
    padding: 0 10px;
  }
  textarea.ailix-input {
    padding: var(--space-2) var(--space-3);
    line-height: 1.6;
    resize: vertical;
    min-height: 80px;
  }
  /* Off: the sunk face with a line edge; read-only: the sunk face alone */
  .ailix-input:disabled,
  .ailix-input[readonly] {
    border-color: var(--color-line);
    background: var(--color-surface-sunk);
    color: var(--color-ink-muted);
  }
  .ailix-input[readonly]:not(:disabled) {
    border-color: transparent;
  }
  .ailix-input:disabled {
    cursor: not-allowed;
  }
  /* An error: a 2px bad edge (the field's edge and one more pixel inside it), the words where they were */
  .ailix-input[aria-invalid="true"] {
    border-color: var(--color-bad);
    box-shadow: inset 0 0 0 1px var(--color-bad);
  }
  .ailix-input::placeholder {
    color: var(--color-ink-muted);
  }
  .ailix-input--auto {
    width: auto;
  }
  .ailix-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: var(--size-control-sm);
    padding: 4px 0;
    font-size: var(--font-size-body);
    cursor: pointer;
  }
  /* A check on: the block colour with a white tick (design C) */
  .ailix-check input {
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    flex: none;
    accent-color: var(--color-block);
    cursor: pointer;
  }
  /* Radio card: off a 1px field edge, on a 2px block edge and a block dot; hover the action tint */
  .ailix-radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 14px var(--space-4);
    border: 1px solid var(--color-line-field);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
  }
  .ailix-radio-card:hover {
    background: var(--color-action-tint);
  }
  .ailix-radio-card:has(input:checked) {
    border: 2px solid var(--color-block);
    padding: 13px 15px;
  }
  .ailix-radio-card:has(input:disabled) {
    border-color: var(--color-line);
    background: var(--color-surface-sunk);
    color: var(--color-ink-muted);
    cursor: not-allowed;
  }
  .ailix-radio-card input {
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    flex: none;
    accent-color: var(--color-block);
  }
  /* Theme picker (내 설정 > 화면, DESIGN.md theme-picker): cards in two radio groups, the preview on the right. */
  .ailix-theme {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: var(--space-6);
    align-items: start;
    margin-top: var(--space-4);
  }
  .ailix-theme__pick {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
  }
  .ailix-theme__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .ailix-theme__legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-secondary);
  }
  .ailix-theme__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .ailix-theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-line-field);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: background var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-theme-card:hover {
    background: var(--color-action-tint);
  }
  /* Picked: a thick block edge and a check, never the colour alone. */
  .ailix-theme-card:has(input:checked) {
    padding: 11px;
    border: 2px solid var(--color-block);
  }
  .ailix-theme-card:has(input:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }
  .ailix-theme-card__check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--color-block);
    visibility: hidden;
  }
  .ailix-theme-card:has(input:checked) .ailix-theme-card__check {
    visibility: visible;
  }
  /* Sidebar, main action and its soft face, in the card's own colour theme (data-color on the swatch). */
  .ailix-theme-card__swatch {
    display: flex;
    width: calc(100% - 24px);
    height: 28px;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
  }
  .ailix-theme-card__swatch i {
    flex: 1;
  }
  .ailix-theme-card__swatch i:nth-child(1) {
    flex: 2;
    background: var(--color-nav-bg);
  }
  .ailix-theme-card__swatch i:nth-child(2) {
    background: var(--color-action);
  }
  .ailix-theme-card__swatch i:nth-child(3) {
    background: var(--color-action-soft);
  }
  .ailix-theme-card__sample {
    overflow: hidden;
    padding-right: 24px;
    font-size: 18px;
    line-height: 1.3;
    white-space: nowrap;
  }
  .ailix-theme-card__sample b {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-theme-card__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
  }
  .ailix-theme-card__default {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-regular);
    color: var(--color-ink-muted);
  }
  .ailix-theme__preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: var(--font-size-label);
  }
  .ailix-theme__preview-h {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-muted);
  }
  .ailix-theme__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    align-self: stretch;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    /* a selected row: a filled face (ailix-on-block), its words and chip as on a selected table row */
    background: var(--color-block);
  }
  .ailix-theme__bubble {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--color-partner-soft);
  }
  .ailix-theme__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--color-partner);
  }
  @media (max-width: 767px) {
    .ailix-theme {
      grid-template-columns: minmax(0, 1fr);
    }
    .ailix-theme__cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 399px) {
    .ailix-theme__cards {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  /* 내 설정 (2026-11-04): the two tabs stand in one grid cell, so the dialog keeps the taller one's size; the hidden one
     is transparent and inert. 계정 holds its four fields two by two (one column under 640px) and 보안 under them. */
  .ailix-settings {
    display: grid;
    margin-top: var(--space-4);
  }
  .ailix-settings__panel {
    grid-area: 1 / 1;
    min-width: 0;
  }
  /* opacity, not visibility: a checked card's check turns its own visibility on and would show through */
  .ailix-settings__panel[data-off] {
    opacity: 0;
    pointer-events: none;
  }
  /* 내 설정's profile photo, and a hospital's logo (ImagePickField): the picture, then its two buttons */
  .ailix-imagepick__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .ailix-imagepick__acts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .ailix-settings__photo {
    margin-bottom: var(--space-2);
  }
  .ailix-settings__mail {
    margin-top: var(--space-2);
  }
  .ailix-settings__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    align-items: start;
  }
  @media (max-width: 639px) {
    .ailix-settings__cols {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  /* 보안 stands apart from the account's fields: a line with room on both sides and a heading of its own */
  .ailix-settings__security {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
  }
  .ailix-settings__heading {
    margin: 0 0 var(--space-1);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-ink);
  }
  /* 내 설정 > 보안: one row per thing (비밀번호, 인증 앱), its name at the left and its button at the right; on a narrow
     sheet the button goes under the name. Its dialogs are the sign-in's fields in a Dialog (auth/security.tsx). */
  .ailix-security {
    display: flex;
    flex-direction: column;
  }
  .ailix-security__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    min-height: 64px;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-line);
  }
  .ailix-security__row:last-child {
    border-bottom: 0;
  }
  /* A heading for screen readers, read like a label (sans in every font theme, as the other tabs' legends). */
  .ailix-security__name {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin: 0;
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    color: var(--color-ink);
  }
  .ailix-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ailix-fieldset legend {
    padding: 0;
    margin-bottom: 6px;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
  }
  /* Six boxes side by side, space.2 apart and centred wherever they stand: a wide dialog does not spread them
     (2026-11-04) */
  .ailix-otp {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
  }
  .ailix-otp input {
    width: 48px;
    height: 56px;
    min-width: 0;
    flex: 0 1 48px;
    text-align: center;
    font-size: var(--font-size-code);
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--color-line-field);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }
  .ailix-otp input:focus-visible {
    outline-offset: calc(0px - var(--focus-ring-width));
  }
  .ailix-otp input[aria-invalid="true"] {
    border-color: var(--color-bad);
    box-shadow: inset 0 0 0 1px var(--color-bad);
  }
  .ailix-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-5);
    border: 1px dashed var(--color-line-field);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink-secondary);
    font-size: var(--font-size-body);
    text-align: center;
    cursor: pointer;
    transition:
      background var(--motion-duration-fast) var(--motion-easing-standard),
      border-color var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-drop:hover,
  .ailix-drop[data-over="true"] {
    border-color: var(--color-action-text);
    background: var(--color-action-tint);
  }
  .ailix-drop:has(input:focus-visible) {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }
  .ailix-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    opacity: 0;
    cursor: pointer;
  }
  .ailix-drop__formats {
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  .ailix-drop--compact {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    min-height: var(--size-control-lg);
    border-radius: var(--radius-sm);
  }
  .ailix-drop:not([aria-disabled="true"]):has(input[aria-invalid="true"]) {
    border-color: var(--color-bad);
  }
  .ailix-drop[aria-disabled="true"] {
    cursor: not-allowed;
    background: var(--color-surface-sunk);
    border-color: var(--color-line);
  }

  /* ── Chip, AI badge, risk mark ────────────────────────────────────── */
  /* A chip keeps its words whole and on one line wherever it fits: a flex row does not squeeze it (flex: none), no
     word is split into syllables (「За-прос」, Note R1 N-14), and a table keeps it on one line (Table below). Only a
     chip longer than its whole container wraps, between words, inside its box (R2-Q6).
     design C: a 6px box with no dot; status tones are filled — the status colour with white words (5.4:1 or more) —
     pri the action tint, neutral the sunk face, live (「진행 중」) ailix Green with ink words. The words carry the state. */
  .ailix-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunk);
    color: var(--color-ink-secondary);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    flex: none;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  button.ailix-chip {
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: help;
  }
  button.ailix-chip.ailix-chip--line {
    border: 1px solid var(--color-line-field);
  }
  .ailix-chip--tip:hover {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
  }
  .ailix-chip--sm {
    min-height: 24px;
    padding: 1px 8px;
  }
  .ailix-chip--ok {
    background: var(--color-ok);
    color: var(--color-ink-inverse);
  }
  .ailix-chip--warn {
    background: var(--color-warn);
    color: var(--color-ink-inverse);
  }
  .ailix-chip--bad {
    background: var(--color-bad);
    color: var(--color-ink-inverse);
  }
  .ailix-chip--info {
    background: var(--color-info);
    color: var(--color-ink-inverse);
  }
  .ailix-chip--pri {
    background: var(--color-action-soft);
    color: var(--color-action-text);
  }
  .ailix-chip--pi {
    background: var(--color-pi);
    color: var(--color-ink-inverse);
  }
  .ailix-chip--live {
    background: var(--color-live);
    color: var(--color-ink);
    font-weight: var(--font-weight-semibold);
  }
  /* A kind (an abbreviation, a category): no face, a 1px field edge */
  .ailix-chip--line {
    background: transparent;
    border: 1px solid var(--color-line-field);
    color: var(--color-ink-secondary);
  }

  /* An AI badge is always seen whole (DESIGN ai-badge): one line where it fits; a long one wraps inside its box
     instead of being cut at the card's edge (「ИИ-перевод · не нотариальный перевод」 at 320px, Note R1 M-11). */
  .ailix-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-action-soft);
    color: var(--color-action-text);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    flex: none;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .ailix-ai--sm {
    min-height: 24px;
    padding: 1px 8px;
    gap: 4px;
  }

  /* One visible action note beside an automatic result, without a decorative icon. */
  .ailix-ainote {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    text-wrap: pretty;
  }
  .ailix-ainote--rule {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
  }

  /* A record check's verdict with its count: filled like a status chip (design C), its icon and words beside */
  .ailix-risk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }
  .ailix-risk--risk {
    background: var(--color-bad);
    color: var(--color-ink-inverse);
  }
  .ailix-risk--caution {
    background: var(--color-warn);
    color: var(--color-ink-inverse);
  }
  .ailix-risk--normal {
    background: var(--color-ok);
    color: var(--color-ink-inverse);
  }

  /* ── Card, key-values, number tile, tabs, segmented, steps ───────── */
  /* A card is a box with a 1px line at radius.md on the white page; its head is a section head with a 2px ink rule
     under it (design C), and the rows inside are parted by one 1px line. */
  .ailix-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    min-width: 0;
  }
  .ailix-card--pad {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ailix-card--flush {
    overflow: hidden;
  }
  .ailix-card__h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-2);
    border-bottom: 2px solid var(--color-ink);
  }
  .ailix-card--pad > .ailix-card__h {
    padding: 0 0 var(--space-2);
  }
  .ailix-card__h h2,
  .ailix-card__h h3 {
    flex: 1 1 12em;
    min-width: min(100%, 12em);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-title-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.45;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .ailix-card__body {
    padding: 0 var(--space-5) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ailix-card__h + .ailix-card__body {
    padding-top: var(--space-4);
  }
  .ailix-card__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-line);
  }
  .ailix-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    min-height: 56px;
    padding: var(--space-2) var(--space-5);
    border-top: 1px solid var(--color-line);
  }
  /* Under the head's rule the first row needs no line of its own */
  .ailix-card__h + .ailix-card__row {
    border-top: 0;
  }
  /* Two columns where each gets 150px or more, else one: a narrow card stacks its values instead of breaking a date
     from its time, and a phone keeps two short values side by side. */
  .ailix-kv {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(150px, calc((100% - var(--space-4)) / 2))), 1fr));
    gap: var(--space-3) var(--space-4);
  }
  .ailix-kv dt {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-muted);
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .ailix-kv dd {
    margin: 2px 0 0;
    font-size: var(--font-size-body);
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .ailix-kv__wide {
    grid-column: 1 / -1;
  }
  .ailix-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
  }
  /* Number tile (design C): a sunk 6px face without an edge; pressed, the block; a tile in trouble (bad) is filled with
     the bad colour. Both are filled faces (Stat adds ailix-on-block): their words, chips and focus turn with the
     tokens (Filled block faces, below). */
  .ailix-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 108px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    border: 0;
    background: var(--color-surface-sunk);
    color: var(--color-ink);
    text-align: left;
    font: inherit;
  }
  button.ailix-stat {
    cursor: pointer;
    transition: background var(--motion-duration-fast) var(--motion-easing-standard);
  }
  /* A pressed tile keeps its block under the pointer (its words are block.ink) */
  button.ailix-stat:not([aria-pressed="true"]):hover {
    background: var(--color-line);
  }
  .ailix-stat--bad {
    background: var(--color-bad);
  }
  /* A tile in trouble is a block of the bad colour: its words and the line under its number white (6.6:1 there, where
     block.muted would fall under 4.5:1). Pressed, it is the block like any pressed tile. */
  .ailix-stat--bad:not([aria-pressed="true"]) {
    --color-block-ink: var(--color-ink-inverse);
    --color-block-muted: var(--color-ink-inverse);
  }
  button.ailix-stat--bad:not([aria-pressed="true"]):hover {
    background: var(--color-bad-hover);
  }
  .ailix-stat[aria-pressed="true"] {
    background: var(--color-block);
  }
  .ailix-stat__k {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-secondary);
  }
  .ailix-stat__v {
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }
  .ailix-stat__s {
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  /* Tabs (design C): each a 36px sunk block 2px apart, the current one the block; no line under the row. */
  .ailix-tabs {
    display: flex;
    /* Its sideways scroll makes it shrinkable: in a column (a dialog's body) it would fold to nothing. */
    flex: none;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: var(--space-10);
  }
  .ailix-tabs::-webkit-scrollbar {
    display: none;
  }
  /* More tabs past an edge: that edge fades out (the mask only uses the alpha of the token colour). */
  .ailix-tabs[data-more="end"] {
    -webkit-mask-image: linear-gradient(to right, var(--color-ink) calc(100% - var(--space-10)), transparent);
    mask-image: linear-gradient(to right, var(--color-ink) calc(100% - var(--space-10)), transparent);
  }
  .ailix-tabs[data-more="start"] {
    -webkit-mask-image: linear-gradient(to left, var(--color-ink) calc(100% - var(--space-10)), transparent);
    mask-image: linear-gradient(to left, var(--color-ink) calc(100% - var(--space-10)), transparent);
  }
  .ailix-tabs[data-more="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--color-ink) var(--space-10), var(--color-ink) calc(100% - var(--space-10)), transparent);
    mask-image: linear-gradient(to right, transparent, var(--color-ink) var(--space-10), var(--color-ink) calc(100% - var(--space-10)), transparent);
  }
  .ailix-tab {
    flex: none;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunk);
    color: var(--color-ink);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: background var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-tab:hover {
    background: var(--color-line);
    color: var(--color-ink);
    text-decoration: none;
  }
  .ailix-tab[aria-selected="true"],
  .ailix-tab[aria-current="page"] {
    background: var(--color-block);
    color: var(--color-block-ink);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-tab:focus-visible {
    outline-offset: -2px;
  }
  .ailix-tab:is([aria-selected="true"], [aria-current="page"]):focus-visible {
    outline-color: var(--color-focus-on-block);
  }
  .ailix-tab__n {
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }
  .ailix-tab:is([aria-selected="true"], [aria-current="page"]) .ailix-tab__n {
    color: var(--color-block-muted);
  }
  /* Segmented (design C): items side by side 2px apart on their own sunk faces (no track), the picked one the block;
     40px high as before. */
  .ailix-seg {
    display: inline-flex;
    gap: 2px;
  }
  .ailix-seg--block {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
  }
  .ailix-seg--block .ailix-seg__item {
    white-space: normal;
  }
  .ailix-seg__item {
    min-height: var(--size-control-md);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunk);
    color: var(--color-ink);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motion-duration-fast) var(--motion-easing-standard);
  }
  /* Hover on an item one may pick, kept at the item's own specificity (:where) so the picked rule after it wins by
     order: the picked block stays under the pointer. */
  .ailix-seg__item:where(:not(:disabled, [aria-disabled="true"])):hover {
    background: var(--color-line);
    color: var(--color-ink);
  }
  .ailix-seg__item:is(:disabled, [aria-disabled="true"]) {
    color: var(--color-ink-muted);
    cursor: not-allowed;
  }
  /* The picked item: the block, its words in block ink (also when it is off), the others' weight (a bolder one would
     change widths while picking: nothing moves), no pointer (picking it again does nothing). */
  .ailix-seg__item:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) {
    background: var(--color-block);
    color: var(--color-block-ink);
    cursor: default;
  }
  /* The white ring is drawn inside the block: outside it would vanish on the white page. */
  .ailix-seg__item:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]):focus-visible {
    outline-color: var(--color-focus-on-block);
    outline-offset: -4px;
  }
  /* Forced colours drop the block face: the picked item keeps a ring in the system's highlight */
  @media (forced-colors: active) {
    .ailix-seg__item:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"]) {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }
  .ailix-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) 0;
  }
  .ailix-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-muted);
  }
  .ailix-step__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--color-line-field);
    background: var(--color-surface);
    color: var(--color-ink-secondary);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-step__label {
    white-space: nowrap;
  }
  .ailix-step__line {
    width: 20px;
    height: 2px;
    margin: 0 6px;
    background: var(--color-line);
  }
  /* design C: done steps an ok disc with a white check, the current one the block with its number, the rest open */
  .ailix-step--done {
    color: var(--color-ink-secondary);
  }
  .ailix-step--done .ailix-step__dot {
    border-color: var(--color-ok);
    background: var(--color-ok);
    color: var(--color-ink-inverse);
  }
  .ailix-step--done .ailix-step__line {
    background: var(--color-ink);
  }
  .ailix-step--current {
    color: var(--color-ink);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-step--current .ailix-step__dot {
    border-color: var(--color-block);
    background: var(--color-block);
    color: var(--color-block-ink);
  }
  .ailix-step--failed {
    color: var(--color-bad);
  }
  .ailix-step--failed .ailix-step__dot {
    border-color: var(--color-bad);
    background: var(--color-bad);
    color: var(--color-ink-inverse);
  }
  .ailix-step__count {
    display: none;
  }
  /* Steps that would wrap (Steps sets data-compact): a bar of segments, filled up to the current step, under its name
     and place ("진료 · 5/7"). The other names stay for screen readers. */
  .ailix-steps[data-compact] {
    position: relative;
    flex-wrap: nowrap;
    gap: var(--space-1);
    padding-top: 28px;
  }
  .ailix-steps[data-compact] .ailix-step {
    flex: 1 1 0;
    min-width: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--color-line-strong);
  }
  .ailix-steps[data-compact] .ailix-step--done,
  .ailix-steps[data-compact] .ailix-step--current {
    background: var(--color-block);
  }
  .ailix-steps[data-compact] .ailix-step--failed {
    background: var(--color-bad);
  }
  .ailix-steps[data-compact] .ailix-step__dot,
  .ailix-steps[data-compact] .ailix-step__line {
    display: none;
  }
  .ailix-steps[data-compact] .ailix-step__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ailix-steps[data-compact] .ailix-step--shown .ailix-step__label {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    max-width: calc(100% - 56px);
    clip: auto;
    text-overflow: ellipsis;
    color: var(--color-ink);
  }
  .ailix-steps[data-compact] .ailix-step--failed .ailix-step__label {
    color: var(--color-bad);
  }
  .ailix-steps[data-compact] .ailix-step--shown .ailix-step__count {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ── Table (rows become cards under 768px) ────────────────────────── */
  /* design C: the head 14/600 ink over a 2px ink rule, one 1px line between rows, hover the action tint, the selected
     row the block with its words in block.ink. */
  .ailix-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .ailix-table-scroll {
    overflow-x: auto;
  }
  .ailix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body);
  }
  /* A table's own title is a section head: the 2px ink rule under it, as under a card's head */
  .ailix-table__caption {
    text-align: left;
    padding: var(--space-4) var(--space-5) var(--space-2);
    border-bottom: 2px solid var(--color-ink);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-title-sm);
    font-weight: var(--font-weight-semibold);
  }
  .ailix-table th {
    height: 48px;
    padding: 0 var(--space-4);
    text-align: left;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    border-bottom: 2px solid var(--color-ink);
    background: var(--color-surface);
    vertical-align: middle;
  }
  .ailix-table td {
    height: 56px;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-line);
    vertical-align: middle;
  }
  .ailix-table tbody tr:first-child td {
    border-top: 0;
  }
  .ailix-table th:first-child,
  .ailix-table td:first-child {
    padding-left: var(--space-5);
  }
  .ailix-table th:last-child,
  .ailix-table td:last-child {
    padding-right: var(--space-5);
  }
  /* A status column takes its chip's width: the chip (and an AI badge) stays on one line, never 「진행 / 중」
     (Note R1 N-14). The cards of a phone let a long one wrap again (under 768px). */
  .ailix-table td .ailix-chip,
  .ailix-table td .ailix-ai {
    white-space: nowrap;
  }
  .ailix-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .ailix-table th.ailix-table__num {
    text-align: right;
  }
  .ailix-table__strong {
    font-weight: var(--font-weight-medium);
  }
  .ailix-table__row--click {
    cursor: pointer;
  }
  .ailix-table__row--click:hover td,
  .ailix-table__row--click:focus-visible td {
    background: var(--color-action-tint);
  }
  .ailix-table__row--click:focus-visible {
    outline-offset: -2px;
  }
  /* The selected row: the block, hovered or not, painted by its cells. The row is a filled face (Filled block faces,
     below): what is inside it reads on the block through the tokens; the cards of a phone keep it light. */
  .ailix-table .ailix-table__row--on td {
    background: var(--color-block);
    color: var(--color-block-ink);
  }
  .ailix-table__more {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
    border-top: 1px solid var(--color-line);
  }
  .ailix-table__state {
    padding: 0;
  }

  /* ── Filled block faces (design C selection) ──────────────────────── */
  /* One way for whatever stands on a filled face: the selected table row, a pressed or bad number tile, a toast, and
     any face an app marks with ailix-on-block (Note's chosen block and summary sentence, the console's open
     application, Babel's staff bubble). The face turns the text tokens for everything inside it, so a part that takes
     its words from --color-ink, -ink-secondary or -ink-muted, a link or text button from -action-text, an edge from
     -line-field or its focus ring from -focus reads on the block without being listed anywhere: block.ink 16.3:1 and
     block.muted 9.8:1 on the default navy, where the page's muted words and blue ring fall to about 2:1. The face
     paints its own background (app CSS is unlayered, so a background set here would lose to the face's own rule). */
  :root,
  [data-color] {
    /* The page's values, resolved where the colour theme is set, for the parts inside a block that are white again */
    --ailix-on-page-ink: var(--color-ink);
    --ailix-on-page-ink-secondary: var(--color-ink-secondary);
    --ailix-on-page-ink-muted: var(--color-ink-muted);
    --ailix-on-page-action-text: var(--color-action-text);
    --ailix-on-page-line-field: var(--color-line-field);
    --ailix-on-page-focus: var(--color-focus);
  }
  .ailix-on-block,
  .ailix-table__row--on {
    --color-ink: var(--color-block-ink);
    --color-ink-secondary: var(--color-block-ink);
    --color-ink-muted: var(--color-block-muted);
    --color-action-text: var(--color-block-ink);
    --color-line-field: var(--color-block-muted);
    --color-focus: var(--color-focus-on-block);
    color: var(--color-ink);
  }
  /* The face's own focus ring is drawn outside it, on the page: the page's colour. The selected row draws its ring
     inside, so it keeps the white one; an app face that draws it inside says so in its own rule. At no more weight than
     a plain :focus-visible, so a dark face's white ring ([data-dark]) still wins under it (2026-11-04 review). */
  :where(.ailix-on-block):focus-visible {
    outline-color: var(--ailix-on-page-focus);
  }
  /* A part with a light face of its own is white again inside a block: chips (but the edged kind), the AI badge, risk
     marks and buttons (but the quiet ones) take the page's words and edges back; their focus rings lie on the block, so
     they stay white. A field and a menu are white boxes whose rings lie on white: the page's focus colour and words
     too, and so is a field's end button (the password's eye) that lies on the white box. An app's own white part inside a
     block takes ailix-on-page. */
  :where(.ailix-on-block, .ailix-table__row--on)
    :is(.ailix-chip:not(.ailix-chip--line), .ailix-ai, .ailix-risk, .ailix-btn:not(.ailix-btn--ghost, .ailix-btn--text),
      .ailix-input, .ailix-input__end, .ailix-menu__panel, .ailix-on-page) {
    --color-ink: var(--ailix-on-page-ink);
    --color-ink-secondary: var(--ailix-on-page-ink-secondary);
    --color-ink-muted: var(--ailix-on-page-ink-muted);
    --color-action-text: var(--ailix-on-page-action-text);
    --color-line-field: var(--ailix-on-page-line-field);
  }
  :where(.ailix-on-block, .ailix-table__row--on) :is(.ailix-input, .ailix-input__end, .ailix-menu__panel, .ailix-on-page) {
    --color-focus: var(--ailix-on-page-focus);
    color: var(--color-ink);
  }
  /* A filled status chip or risk mark turns over: a white face with its tone as the words, so its edge stays (design
     C, C-03) */
  :is(.ailix-on-block, .ailix-table__row--on)
    :is(.ailix-chip:is(.ailix-chip--ok, .ailix-chip--warn, .ailix-chip--bad, .ailix-chip--info, .ailix-chip--pi), .ailix-risk) {
    background: var(--color-surface);
  }
  :is(.ailix-on-block, .ailix-table__row--on) :is(.ailix-chip--ok, .ailix-risk--normal) { color: var(--color-ok); }
  :is(.ailix-on-block, .ailix-table__row--on) :is(.ailix-chip--warn, .ailix-risk--caution) { color: var(--color-warn); }
  :is(.ailix-on-block, .ailix-table__row--on) :is(.ailix-chip--bad, .ailix-risk--risk) { color: var(--color-bad); }
  :is(.ailix-on-block, .ailix-table__row--on) .ailix-chip--info { color: var(--color-info); }
  :is(.ailix-on-block, .ailix-table__row--on) .ailix-chip--pi { color: var(--color-pi); }
  /* Quiet buttons (ghost, text, icon buttons, ⓘ, menu triggers) take the block's words from the tokens, muted while
     off; pointed at or pressed, a wash of the block's words instead of the page's sunk or soft face */
  :is(.ailix-on-block, .ailix-table__row--on)
    :is(.ailix-btn--ghost, .ailix-btn--text, .ailix-iconbtn, .ailix-tipbtn, .ailix-menu__trigger):where(:not(:disabled, [aria-disabled="true"])):hover {
    background: color-mix(in srgb, var(--color-block-ink) 16%, transparent);
  }
  :is(.ailix-on-block, .ailix-table__row--on)
    :is(.ailix-btn--ghost, .ailix-btn--text, .ailix-iconbtn, .ailix-tipbtn, .ailix-menu__trigger):where(:not(:disabled, [aria-disabled="true"])):active {
    background: color-mix(in srgb, var(--color-block-ink) 24%, transparent);
  }
  /* A link reads as one by its underline; a hospital dot keeps its colour inside a white ring, our own the page's
     action colour */
  :is(.ailix-on-block, .ailix-table__row--on) a:not(.ailix-btn) {
    text-decoration: underline;
  }
  :is(.ailix-on-block, .ailix-table__row--on) .ailix-partner__dot {
    outline: 2px solid var(--color-block-ink);
  }
  :is(.ailix-on-block, .ailix-table__row--on) .ailix-partner__dot--home {
    background: var(--ailix-on-page-action-text);
  }

  /* ── Banner and ErrorNotice ───────────────────────────────────────── */
  /* design C: the tone's soft face with no edge, the tone's icon, ink words, its action a standard small button */
  .ailix-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-info-soft);
    color: var(--color-info);
    font-size: var(--font-size-body);
  }
  /* The words stay beside the icon at any width (a 200px minimum put the icon alone on a line of its own at 320px,
     Note R1 m-10); an action that does not fit beside the words goes to the next line instead. */
  .ailix-banner__body {
    flex: 1 1 min(12em, calc(100% - 20px - var(--space-3)));
    min-width: 0;
    color: var(--color-ink);
  }
  .ailix-banner .ailix-btn {
    min-height: var(--size-control-sm);
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-label);
  }
  .ailix-banner--warn {
    background: var(--color-warn-soft);
    color: var(--color-warn);
  }
  .ailix-banner--bad {
    background: var(--color-bad-soft);
    color: var(--color-bad);
  }
  .ailix-banner--ok {
    background: var(--color-ok-soft);
    color: var(--color-ok);
  }
  .ailix-banner--brand {
    background: var(--color-action-soft);
    color: var(--color-action-text);
  }
  .ailix-banner--pi {
    background: var(--color-pi-soft);
    color: var(--color-pi);
  }

  .ailix-error {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: var(--space-3) 14px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    background: var(--color-bad-soft);
    color: var(--color-ink);
  }
  .ailix-error p {
    margin: 0;
  }
  .ailix-error .ailix-error__request {
    margin-top: 4px;
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .ailix-error__request code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-caption);
    color: var(--color-ink-secondary);
    user-select: all;
  }
  .ailix-error__copy {
    border: 0;
    background: transparent;
    color: var(--color-ink-muted);
    border-radius: var(--radius-sm);
    min-height: var(--size-control-sm);
    padding: 0 8px;
    font-size: var(--font-size-caption);
    cursor: pointer;
  }
  .ailix-error__copy:hover {
    background: var(--color-surface);
  }

  /* ── Empty, error, loading ────────────────────────────────────────── */
  .ailix-state {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    text-align: center;
  }
  .ailix-state--card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
  }
  .ailix-state--compact {
    min-height: 0;
    padding: var(--space-10) var(--space-6);
  }
  /* Older service revisions may still render this empty compatibility placeholder. */
  .ailix-state__art {
    display: none;
  }
  .ailix-state__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-title-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    margin: 0;
  }
  .ailix-state__text {
    margin: 0;
    color: var(--color-ink-secondary);
  }
  /* A failure: a filled bad disc (56px) with a white icon, the words under it say what failed */
  .ailix-state__icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-bad);
    color: var(--color-ink-inverse);
    align-items: center;
    justify-content: center;
  }
  .ailix-state__req {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  .ailix-state__req code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-caption);
    color: var(--color-ink-secondary);
  }
  .ailix-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }
  .ailix-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink-muted);
    font-size: var(--font-size-label);
  }
  .ailix-loading--block {
    display: flex;
    justify-content: center;
    min-height: 40vh;
    width: 100%;
  }
  .ailix-skel-group {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: left;
  }
  /* Initial loading reserves the same area but never paints a grey mock card. A slower request gets a text-only
     status after four base durations, while the live region announces immediately. */
  .ailix-state--loading {
    position: relative;
    background: transparent;
    border-color: transparent;
  }
  .ailix-state--loading .ailix-skel-group {
    visibility: hidden;
  }
  .ailix-loading__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    color: var(--color-ink-muted);
    font-size: var(--font-size-label);
    animation: ailix-loading-reveal 0s calc(var(--motion-duration-base) * 4) backwards;
  }
  .ailix-loading,
  .ailix-skel-group {
    animation: ailix-loading-reveal 0s var(--motion-duration-base) backwards;
  }
  .ailix-skel {
    height: 48px;
    border-radius: 4px;
    background: var(--color-surface-sunk);
  }
  .ailix-skel--line {
    height: 16px;
    border-radius: 4px;
  }

  /* ── Dialog and side panel ────────────────────────────────────────── */
  /* design C: no shadow — a dialog stands on its scrim, a panel on its scrim and a 1px ink edge; the head sits over a
     2px ink rule and the buttons under a 1px line. */
  .ailix-scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--color-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
  }
  .ailix-dialog {
    width: 560px;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    animation: ailix-in var(--motion-duration-base) var(--motion-easing-standard);
  }
  .ailix-dialog--s {
    width: 420px;
  }
  .ailix-dialog--l {
    width: 800px;
  }
  .ailix-dialog__h {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 56px;
    margin: var(--space-1) var(--space-6) 0;
    padding: var(--space-2) 0;
    border-bottom: 2px solid var(--color-ink);
  }
  .ailix-dialog__h h2 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-title-md);
    line-height: 1.4;
  }
  .ailix-dialog__b {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-body);
    color: var(--color-ink-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .ailix-dialog__b p {
    margin: 0;
  }
  .ailix-dialog__f {
    flex: none;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 var(--space-6);
    padding: var(--space-4) 0 var(--space-5);
    border-top: 1px solid var(--color-line);
  }
  .ailix-scrim--panel {
    z-index: 70;
    background: var(--color-scrim-light);
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
  }
  .ailix-panel {
    width: var(--size-panel);
    max-width: 100%;
    height: 100%;
    background: var(--color-surface);
    border-left: 1px solid var(--color-ink);
    display: flex;
    flex-direction: column;
    animation: ailix-in var(--motion-duration-base) var(--motion-easing-standard);
  }
  .ailix-panel--wide {
    width: 720px;
  }
  .ailix-panel__h {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--size-gnb);
    padding: 0 var(--space-3) 0 var(--space-6);
    border-bottom: 2px solid var(--color-ink);
  }
  .ailix-panel__h h2 {
    flex: 1;
    font-size: var(--font-size-title-md);
    line-height: 1.4;
  }
  .ailix-panel__b {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .ailix-panel__f {
    flex: none;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-line);
  }

  /* ── Toast ────────────────────────────────────────────────────────── */
  .ailix-toasts {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
  }
  .ailix-toasts__live {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-end;
  }
  /* Toasts never cover a bar fixed at the bottom of the screen (an app marks it data-bottom-bar, e.g. 「저장하지 않은
     변경」): they rise above it (2026-10-28 review) */
  body:has([data-bottom-bar]) .ailix-toasts {
    bottom: calc(var(--space-6) + var(--ailix-bottom-bar, 72px));
  }
  /* An open dialog, panel or sheet: ToastProvider moves the toasts off its head and its buttons, to the top of the
     window or else inside it just over its buttons (data-place, R5-01) */
  :root .ailix-toasts[data-place="top"] {
    top: var(--space-3);
    bottom: auto;
  }
  :root .ailix-toasts[data-place="over"] {
    top: auto;
    bottom: var(--ailix-toast-lift, var(--space-6));
  }
  /* an open menu the toasts cannot keep off (a tall list on a phone): out of sight until it closes */
  :root .ailix-toasts[data-place="hide"] {
    visibility: hidden;
  }
  /* A screen whose bottom is its input (Note's session room, marked data-toasts-top): the toasts go to the top under
     the GNB, off the chat's input and push-to-talk (N4-01) */
  body:has([data-toasts-top]) .ailix-toasts {
    top: calc(var(--size-gnb) + var(--space-3));
    bottom: auto;
  }
  /* from 768px at the left, over the room's title and time, not its buttons at the right (N5-02) */
  @media (min-width: 768px) {
    body:has([data-toasts-top]) :is(.ailix-toasts, .ailix-toasts__live) {
      align-items: flex-start;
    }
    body:has([data-toasts-top]) .ailix-toasts {
      right: auto;
      left: var(--space-6);
    }
    body:has(.ailix-app[data-side="wide"]):has([data-toasts-top]) .ailix-toasts {
      left: calc(var(--size-side) + var(--space-6));
    }
    body:has(.ailix-app:is([data-side="rail"], [data-side="overlay"])):has([data-toasts-top]) .ailix-toasts {
      left: calc(var(--size-side-rail) + var(--space-6));
    }
  }
  /* A panel open at the right (a SidePanel, an app's detail panel marked data-right-panel): the toasts go to the
     bottom left of the page, off the panel's buttons (R4-02: 「반려했습니다」 covered the next one's [승인]) */
  @media (min-width: 768px) {
    body:has(.ailix-scrim--panel, [data-right-panel]) :is(.ailix-toasts, .ailix-toasts__live) {
      align-items: flex-start;
    }
    body:has(.ailix-scrim--panel, [data-right-panel]) .ailix-toasts {
      right: auto;
      left: var(--space-6);
    }
    body:has(.ailix-app[data-side="wide"]):has(.ailix-scrim--panel, [data-right-panel]) .ailix-toasts {
      left: calc(var(--size-side) + var(--space-6));
    }
    body:has(.ailix-app:is([data-side="rail"], [data-side="overlay"])):has(.ailix-scrim--panel, [data-right-panel]) .ailix-toasts {
      left: calc(var(--size-side-rail) + var(--space-6));
    }
  }
  /* The groups stay rendered when empty (a live region must exist before its text); only filled ones get a gap. */
  .ailix-toasts__live:not(:empty) ~ .ailix-toasts__live:not(:empty) {
    margin-top: var(--space-2);
  }
  /* design C: the block with block.ink words, no shadow and no edge bar; the tone's icon in its -line colour, which
     keeps 3:1 or more on the block of every theme. A filled face (ailix-on-block, toast.tsx): its close button's
     muted words and the white focus ring come from the tokens. */
  .ailix-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 360px;
    max-width: 480px;
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-block);
    color: var(--color-block-ink);
    font-size: var(--font-size-body);
    animation: ailix-in var(--motion-duration-base) var(--motion-easing-standard);
  }
  .ailix-toast__icon {
    display: inline-flex;
    color: var(--toast-fg, var(--color-info-line));
  }
  .ailix-toast__text {
    flex: 1;
    min-width: 0;
  }
  .ailix-toast__act {
    min-height: var(--size-control-sm);
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-block-ink);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .ailix-toast__act:hover {
    text-decoration-thickness: 2px;
  }
  /* The close button on the block: muted words, the block's words when pointed at, without a wash (an icon button takes
     ink.secondary, which the block turns to its full words) */
  .ailix-toast .ailix-iconbtn {
    color: var(--color-block-muted);
  }
  .ailix-toast .ailix-iconbtn:hover {
    background: transparent;
    color: var(--color-block-ink);
  }
  .ailix-toast--ok {
    --toast-fg: var(--color-ok-line);
  }
  .ailix-toast--warn {
    --toast-fg: var(--color-warn-line);
  }
  .ailix-toast--bad {
    --toast-fg: var(--color-bad-line);
  }
  .ailix-toast--info {
    --toast-fg: var(--color-info-line);
  }

  /* ── Tooltip (data-tip; ⓘ, rail names, icon buttons, disabled reasons) ─ */
  .ailix-tip {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    max-width: 320px;
    padding: 10px 12px;
    /* design C: the block with block.ink words at radius.sm, no shadow; a block.muted edge keeps it apart from the
       sidebar, which is the same navy in the default theme (a rail item's name tip opens against it) */
    border: 1px solid var(--color-block-muted);
    border-radius: var(--radius-sm);
    background: var(--color-block);
    color: var(--color-block-ink);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    text-align: left;
    word-break: keep-all;
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
  }
  .ailix-tip[data-show="true"] {
    opacity: 1;
  }
  .ailix-tip__tail {
    position: absolute;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--color-block);
    transform: rotate(45deg);
  }

  /* ── Sign-in, sign-up and idle lock (auth-screen) ─────────────────── */
  .ailix-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    background: var(--color-bg);
  }
  .ailix-auth__panel {
    display: none;
  }
  .ailix-auth__art {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: var(--space-8) 56px var(--space-12);
    pointer-events: none;
  }
  .ailix-auth__illustration {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-height: 40vh;
    background: var(--color-auth-ink);
    opacity: 0.55;
    mask-repeat: no-repeat;
    mask-position: center bottom;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    -webkit-mask-size: contain;
  }
  .ailix-auth__main {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: 72px var(--space-12) var(--space-12);
  }
  .ailix-auth__lang {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
  }
  .ailix-auth__small-logo {
    display: flex;
  }
  .ailix-auth__card {
    width: 440px;
    max-width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    /* space.6 (2026-11-04 「로그인 화면에서 간격을 더 줄여주세요」; was space.8) */
    padding: var(--space-6);
  }
  .ailix-auth__card--wide {
    width: 560px;
  }
  /* Compact (2026-11-04): a field's own line (its error, the Caps Lock line) is its room below, so the steps keep
     12px between their parts, the line 4px under the box at 1.4, and the title 8px more above the first field. */
  .ailix-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  /* The title stands one form gap over the first field (2026-11-04: was a gap and space.2 more) */
  .ailix-auth__form > .ailix-auth__title,
  .ailix-auth__form > .ailix-auth__head {
    margin-bottom: 0;
  }
  .ailix-auth__form .ailix-field__label {
    margin-bottom: var(--space-1);
  }
  .ailix-auth__title {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .ailix-auth__title h1 {
    font-size: var(--font-size-title-lg);
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
  .ailix-auth__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ailix-auth__badge {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--color-action-soft);
    color: var(--color-action-text);
    align-items: center;
    justify-content: center;
  }
  .ailix-auth__badge--neutral {
    background: var(--color-surface-sunk);
    color: var(--color-ink-secondary);
  }
  .ailix-auth__account {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--color-ink-secondary);
    overflow-wrap: anywhere;
  }
  /* The address in that line moves to the next line whole rather than breaking at its 「-」; only an address longer
     than the whole line wraps inside. */
  .ailix-auth__address {
    display: inline-block;
    max-width: 100%;
  }
  .ailix-auth__links {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--font-size-label);
  }
  .ailix-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    font-size: var(--font-size-label);
  }
  .ailix-auth__row .ailix-check {
    font-size: var(--font-size-label);
  }
  .ailix-auth__back {
    align-self: center;
    font-size: var(--font-size-body);
  }
  /* 「코드 다시 받기」 at the left under the six boxes; the seconds keep their width while they count down. */
  .ailix-auth__resend {
    align-self: flex-start;
    font-variant-numeric: tabular-nums;
  }
  .ailix-auth__foot {
    font-size: var(--font-size-label);
    color: var(--color-ink-secondary);
  }
  /* A link alone on its line is a target of its own: 24px high at least (WCAG 2.5.8), not the text's 16px. */
  .ailix-auth__foot a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--color-ink-secondary);
  }
  /* The key and its copy button; the button keeps its height when the key wraps to several lines (Note R1 m-12).
     「인증 앱에서 열기」 is drawn only where a finger points (login.tsx). */
  .ailix-auth__keyrow {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .ailix-auth__keyrow .ailix-auth__key {
    flex: 1;
    min-width: 0;
    margin-top: 0;
  }
  .ailix-auth__key {
    margin-top: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunk);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body);
    letter-spacing: 0.06em;
    color: var(--color-ink);
    user-select: all;
    overflow-wrap: anywhere;
  }
  .ailix-auth__extra {
    width: 440px;
    max-width: 100%;
  }
  /* Dev test accounts under the card (D-33) */
  .ailix-auth__test {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
  }
  .ailix-auth__test-title {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-ink-secondary);
  }
  .ailix-auth__test-hint {
    margin: var(--space-1) 0 var(--space-3);
    font-size: var(--font-size-caption);
    color: var(--color-ink-muted);
  }
  .ailix-auth__test-list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
  }
  .ailix-auth__test-list .ailix-btn {
    justify-content: space-between;
    gap: var(--space-3);
    text-align: left;
  }
  .ailix-auth__test-key {
    margin-bottom: var(--space-3);
  }
  .ailix-auth__test-role {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }
  .ailix-auth__test-who {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--font-weight-regular);
    color: var(--color-ink-muted);
  }
  /*
   * Brand panel: the theme's face (default ailix Blue) with the logo and the brand line at its top (white 8.9:1).
   * The sign-in flow adds one quiet care scene at the bottom (2026-11-05); sign-up and lock keep the plain face.
   */
  @media (min-width: 960px) {
    .ailix-auth__panel {
      flex: 0 0 44%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: var(--color-auth-face);
      color: var(--color-auth-ink);
    }
    .ailix-auth__small-logo {
      display: none;
    }
  }
  .ailix-auth__band {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-12) 56px var(--space-8);
    background: var(--color-auth-face);
  }
  .ailix-auth__lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  /* The brand line is the face's heading: the serif font theme draws it in its heading face */
  .ailix-auth__tagline {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
  }
  .ailix-auth__subline {
    margin: 0;
    font-size: var(--font-size-body-lg);
    line-height: 1.5;
  }
  .ailix-qr {
    display: block;
    align-self: center;
    width: 200px;
    height: 200px;
    max-width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }
  /* Opaque on purpose: patient data under the lock must not show through. */
  .ailix-lock {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: auto;
    background: var(--color-bg);
  }
  .ailix-gate {
    display: contents;
  }

  /* ── Width steps: 1280 rail, 1024 drawer, 768 phone, 640 sheets ───── */
  @media (max-width: 1279px) {
    .ailix-page {
      padding: var(--space-6);
    }
    .ailix-shell-notice {
      padding: var(--space-6) var(--space-6) 0;
    }
  }
  @media (max-width: 767px) {
    .ailix-page {
      padding: var(--space-4);
      gap: var(--space-5);
    }
    /* A phone: the title on the whole width and the actions under it, not one button squeezing the title and its
       facts into half the line (「진료 · 여 · 40대 · / 카자흐스탄」 at 390px, N3-03); a ⋯ alone stays at the
       title's right, not on a line of its own (R4-06) */
    .ailix-page-h__main {
      flex-basis: 100%;
    }
    .ailix-page-h:has(> .ailix-page-h__acts > .ailix-menu:only-child) {
      flex-wrap: nowrap;
      align-items: flex-start;
    }
    .ailix-page-h:has(> .ailix-page-h__acts > .ailix-menu:only-child) > .ailix-page-h__main {
      flex-basis: 0;
      min-width: 0;
    }
    .ailix-shell-notice {
      padding: var(--space-4) var(--space-4) 0;
    }
    .ailix-gnb {
      padding: 0 var(--space-3);
    }
    .ailix-search {
      width: 100%;
    }
    /* Table rows turn into cards: no sideways scrolling */
    .ailix-table-wrap--cards {
      background: transparent;
      border: 0;
      border-radius: 0;
      overflow: visible;
    }
    .ailix-table-wrap--cards .ailix-table,
    .ailix-table-wrap--cards .ailix-table tbody,
    .ailix-table-wrap--cards .ailix-table tr,
    .ailix-table-wrap--cards .ailix-table td {
      display: block;
      width: 100%;
    }
    .ailix-table-wrap--cards .ailix-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }
    .ailix-table-wrap--cards .ailix-table tbody {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .ailix-table-wrap--cards .ailix-table tr {
      background: var(--color-surface);
      border: 1px solid var(--color-line);
      border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-1) var(--space-4);
    }
    .ailix-table-wrap--cards .ailix-table td,
    .ailix-table-wrap--cards .ailix-table td:first-child,
    .ailix-table-wrap--cards .ailix-table td:last-child {
      height: auto;
      padding: 0;
      border: 0;
      width: auto;
      /* No cell grows past its card: a long name or address in one piece wraps inside it instead of widening the
         page (「Петров-Водкин Константин Константинович」 made it 360px at 320, Note R1 N-01). */
      min-width: 0;
      overflow-wrap: anywhere;
      background: transparent;
      font-size: var(--font-size-label);
      color: var(--color-ink-secondary);
    }
    /* A selected card takes the action tint (design C) and is no block: the page's tokens come back for its words,
       links, edges and focus, and what the block turned over (chips, washes, rings, underlines) is undone */
    .ailix-table-wrap--cards .ailix-table tr.ailix-table__row--on {
      --color-ink: var(--ailix-on-page-ink);
      --color-ink-secondary: var(--ailix-on-page-ink-secondary);
      --color-ink-muted: var(--ailix-on-page-ink-muted);
      --color-action-text: var(--ailix-on-page-action-text);
      --color-line-field: var(--ailix-on-page-line-field);
      --color-focus: var(--ailix-on-page-focus);
      background: var(--color-action-tint);
    }
    .ailix-table-wrap--cards .ailix-table__row--on
      :is(.ailix-chip:is(.ailix-chip--ok, .ailix-chip--warn, .ailix-chip--bad, .ailix-chip--info, .ailix-chip--pi), .ailix-risk) {
      color: var(--color-ink-inverse);
    }
    .ailix-table-wrap--cards .ailix-table__row--on :is(.ailix-chip.ailix-chip--ok, .ailix-risk--normal) { background: var(--color-ok); }
    .ailix-table-wrap--cards .ailix-table__row--on :is(.ailix-chip.ailix-chip--warn, .ailix-risk--caution) { background: var(--color-warn); }
    .ailix-table-wrap--cards .ailix-table__row--on :is(.ailix-chip.ailix-chip--bad, .ailix-risk--risk) { background: var(--color-bad); }
    .ailix-table-wrap--cards .ailix-table__row--on .ailix-chip.ailix-chip--info { background: var(--color-info); }
    .ailix-table-wrap--cards .ailix-table__row--on .ailix-chip.ailix-chip--pi { background: var(--color-pi); }
    .ailix-table-wrap--cards .ailix-table__row--on .ailix-partner__dot {
      outline: none;
    }
    .ailix-table-wrap--cards .ailix-table__row--on a:not(.ailix-btn) {
      text-decoration: none;
    }
    .ailix-table-wrap--cards .ailix-table__row--on
      :is(.ailix-btn--ghost, .ailix-iconbtn, .ailix-tipbtn, .ailix-menu__trigger):where(:not(:disabled, [aria-disabled="true"])):hover {
      background: var(--color-surface-sunk);
    }
    .ailix-table-wrap--cards .ailix-table__row--on
      :is(.ailix-btn--ghost, .ailix-iconbtn, .ailix-menu__trigger):where(:not(:disabled, [aria-disabled="true"])):active {
      background: var(--color-line);
    }
    .ailix-table-wrap--cards .ailix-table__row--on .ailix-tipbtn:active {
      background: var(--color-surface-sunk);
    }
    .ailix-table-wrap--cards .ailix-table__row--on .ailix-btn--text:where(:not(:disabled, [aria-disabled="true"])):is(:hover, :active) {
      background: var(--color-action-soft);
    }
    /* The card's title is its first line on every card (not beside whichever value happens to fit), the values
       under it; a row's ⋯ menu sits at the card's top right corner. */
    .ailix-table-wrap--cards .ailix-table td[data-primary] {
      flex: 1 1 100%;
      order: -1;
      font-size: var(--font-size-body);
      font-weight: var(--font-weight-semibold);
      color: var(--color-ink);
    }
    .ailix-table-wrap--cards .ailix-table td .ailix-chip,
    .ailix-table-wrap--cards .ailix-table td .ailix-ai {
      white-space: normal;
    }
    /* The ⋯ at the card's top right: only the title line leaves it room, the values below reach the same right
       edge as on cards without one (2026-10-28 review) */
    .ailix-table-wrap--cards .ailix-table tr:has(> td:last-child > .ailix-menu:only-child) {
      position: relative;
    }
    .ailix-table-wrap--cards .ailix-table tr:has(> td:last-child > .ailix-menu:only-child) > td[data-primary] {
      padding-right: calc(var(--size-control-sm) + var(--space-2));
    }
    .ailix-table-wrap--cards .ailix-table td:last-child:has(> .ailix-menu:only-child) {
      position: absolute;
      top: var(--space-2);
      right: var(--space-2);
    }
    .ailix-table-wrap--cards .ailix-table td[data-break] {
      flex-basis: 100%;
    }
    /* Under the title, one value a line: its label at the left, the value at the right, the same place on every
       card (2026-10-28 review); a value without a label at the left; a long text (breakBefore) under its label. */
    .ailix-table-wrap--cards .ailix-table td:not([data-primary]) {
      flex-basis: 100%;
      text-align: right;
    }
    .ailix-table-wrap--cards .ailix-table td:not([data-primary]):not([data-label]),
    .ailix-table-wrap--cards .ailix-table td[data-break] {
      text-align: left;
    }
    /* No column headers on a card: every value says what it is ("금액 +5,000 · 잔액 100,000"). The label stays in one
       piece; a value too long for the rest of the line goes under it rather than splitting the label. */
    .ailix-table-wrap--cards .ailix-table td[data-label]::before {
      content: attr(data-label);
      display: inline-block;
      float: left;
      margin-right: var(--space-3);
      text-align: left;
      white-space: nowrap;
      font-size: var(--font-size-caption);
      font-weight: var(--font-weight-medium);
      color: var(--color-ink-muted);
    }
    .ailix-table-wrap--cards .ailix-table td[data-break][data-label]::before {
      float: none;
      display: block;
      margin: 0 0 2px;
    }
    /* A card that opens something says so: a chevron at its right edge (lists of iOS, Android, every mobile web app). */
    .ailix-table-wrap--cards .ailix-table tr.ailix-table__row--click {
      position: relative;
      padding-right: calc(var(--space-4) + 20px);
    }
    .ailix-table-wrap--cards .ailix-table tr.ailix-table__row--click::after {
      content: "";
      position: absolute;
      top: 50%;
      right: var(--space-3);
      width: 20px;
      height: 20px;
      margin-top: -10px;
      background: var(--color-ink-muted);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
      pointer-events: none;
    }
    .ailix-table-wrap--cards .ailix-table td:empty {
      display: none;
    }
    .ailix-table-wrap--cards .ailix-table__num {
      text-align: left;
    }
    .ailix-table-wrap--cards .ailix-table__more {
      border: 0;
    }
    .ailix-toasts {
      left: var(--space-3);
      right: var(--space-3);
      bottom: var(--space-3);
      align-items: stretch;
    }
    body:has([data-bottom-bar]) .ailix-toasts {
      bottom: calc(var(--space-3) + var(--ailix-bottom-bar, 72px));
    }
    .ailix-toasts__live {
      align-items: stretch;
    }
    .ailix-toast {
      min-width: 0;
      max-width: none;
    }
  }
  @media (max-width: 639px) {
    /* The GNB credit pill shows its icon and number only; the words stay its accessible name. */
    .ailix-credit {
      padding: 0 var(--space-2);
      gap: var(--space-1);
    }
    .ailix-credit--short .ailix-credit__text {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .ailix-credit--short .ailix-credit__amount {
      display: inline;
      white-space: nowrap;
    }
    /* Number tiles two per row (one only when it is alone), compact, so the list under them stays near the top. */
    .ailix-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
    }
    /* An odd last tile (one of one, the third of three) takes the whole row instead of standing alone in half of it. */
    .ailix-stats > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
    .ailix-stats > .ailix-stat {
      min-height: 0;
      gap: var(--space-1);
      padding: var(--space-3);
      container-type: inline-size;
    }
    .ailix-stats .ailix-stat__k {
      font-size: var(--font-size-label);
    }
    .ailix-stats .ailix-stat__v {
      font-size: clamp(var(--font-size-body-lg), 16cqi, var(--font-size-title-lg));
    }
    .ailix-scrim {
      align-items: flex-end;
      padding: 0;
    }
    .ailix-dialog,
    .ailix-dialog--s,
    .ailix-dialog--l {
      width: 100%;
      /* room above a tall sheet for a toast, which goes to the top while a sheet is open (R4-04) */
      max-height: calc(100dvh - 96px);
      border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    /* The sheet's buttons share its width in equal parts, [취소] [주 행동], a long label wrapping inside its button
       (not one button alone on a line and the other under it at another width). The same in a phone's side panel. */
    .ailix-dialog__f,
    .ailix-panel__f {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
    }
    .ailix-dialog__f > .ailix-btn,
    .ailix-panel__f > .ailix-btn {
      white-space: normal;
      text-align: center;
      line-height: 1.3;
    }
  }
  /* A narrow phone: one button a line across the sheet, [취소] above [주 행동], so a long label (「Осы аурухананы
     таңдау」) stays on one line instead of three inside half the width (2026-10-28 review) */
  @media (max-width: 479px) {
    .ailix-dialog__f,
    .ailix-panel__f {
      grid-auto-flow: row;
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;
    }
  }
  @media (max-width: 519px) {
    .ailix-auth__main {
      padding: 72px var(--space-4) var(--space-12);
    }
    .ailix-auth__card {
      padding: var(--space-6);
    }
  }

  /* Reduced motion: no transitions, entrance animations end at once; the loading delay stays, only spinners turn. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }
    .ailix-skel {
      animation: none !important;
    }
    .ailix-spinner,
    .ailix-icon--spin {
      animation-duration: 0.8s !important;
      animation-iteration-count: infinite !important;
    }
  }
}