/*! AgentCSS v1.0.0 | The Autonomous CSS Framework for AI-Driven UIs | MIT License */
/* このファイルは scripts/build.py が tokens/tokens.json から作ります。直接編集しないでください。 */
:root {
  --ac-brand: #1F5FAD;
  --ac-brand-hover: #174A87;
  --ac-brand-active: #123C6E;
  --ac-brand-soft: #E8F0FB;
  --ac-brand-soft-2: #D4E3F7;
  --ac-brand-text: #1B4F94;
  --ac-brand-contrast: #FFFFFF;
  --ac-brand-2: #12324F;
  --ac-brand-2-hover: #0D2740;
  --ac-brand-2-contrast: #FFFFFF;
  --ac-logo-ink: #12324F;
  --ac-logo-spark: #2F7BD8;
  --ac-logo-spark-2: #82B0E8;
  --ac-bg: #F4F5F7;
  --ac-surface: #FFFFFF;
  --ac-surface-2: #FAFBFC;
  --ac-surface-3: #EEF0F2;
  --ac-surface-inverse: #1B1F24;
  --ac-text: #1B1F24;
  --ac-text-2: #444C56;
  --ac-muted: #5B6470;
  --ac-subtle: #8A929C;
  --ac-text-inverse: #FFFFFF;
  --ac-border: #DDE1E6;
  --ac-border-soft: #E6E9ED;
  --ac-border-strong: #C9CED5;
  --ac-link: #1F5FAD;
  --ac-link-hover: #174A87;
  --ac-focus: #1F5FAD;
  --ac-overlay: rgba(16, 24, 40, 0.45);
  --ac-hover: rgba(16, 24, 40, 0.04);
  --ac-pressed: rgba(16, 24, 40, 0.08);
  --ac-on-dark: rgba(255, 255, 255, 0.82);
  --ac-on-dark-muted: rgba(255, 255, 255, 0.55);
  --ac-on-dark-hover: rgba(255, 255, 255, 0.10);
  --ac-info: #1F5FAD;
  --ac-info-bg: #E8F0FB;
  --ac-info-text: #1B4F94;
  --ac-info-border: #9DBBE3;
  --ac-success: #1E7B3A;
  --ac-success-bg: #E6F4EA;
  --ac-success-text: #1B6330;
  --ac-success-border: #9CCFAA;
  --ac-warning: #B26A00;
  --ac-warning-bg: #FDF3E1;
  --ac-warning-text: #7A4A00;
  --ac-warning-border: #E3BF7B;
  --ac-danger: #B42318;
  --ac-danger-bg: #FBE9E7;
  --ac-danger-text: #9F2A1B;
  --ac-danger-border: #E8A79C;
  --ac-neutral: #5B6470;
  --ac-neutral-bg: #EEF0F2;
  --ac-neutral-text: #444C56;
  --ac-neutral-border: #C9CED5;
  --ac-accent-1: #2F7BD8;
  --ac-accent-2: #16805F;
  --ac-accent-3: #C2570C;
  --ac-accent-4: #6B5BB5;
  --ac-accent-5: #0B7A8A;
  --ac-accent-6: #9A6B12;
  --ac-logo-ink-inverse: #FFFFFF;
  --ac-logo-spark-inverse: #7DB3F0;
  --ac-header-bg: var(--ac-surface);
  --ac-header-text: var(--ac-text);
  --ac-header-muted: var(--ac-muted);
  --ac-header-hover: var(--ac-hover);
  --ac-header-border: var(--ac-border-soft);
  --ac-header-logo-ink: var(--ac-logo-ink);
  --ac-header-logo-spark: var(--ac-logo-spark);
  --ac-btn-primary-bg: var(--ac-brand);
  --ac-btn-primary-hover: var(--ac-brand-hover);
  --ac-btn-primary-active: var(--ac-brand-active);
  --ac-btn-primary-text: var(--ac-brand-contrast);
  --ac-accent: #2876D5;
  --ac-accent-hover: #1F5FAD;
  --ac-accent-soft: #EDF3FA;
  --ac-accent-text: #1A4C89;
  --ac-accent-contrast: #FFFFFF;
  --ac-app-color: var(--ac-brand);
  --ac-cat-sales: var(--ac-accent-1);
  --ac-cat-money: var(--ac-accent-2);
  --ac-cat-people: var(--ac-accent-3);
  --ac-cat-team: var(--ac-accent-4);
  --ac-cat-base: var(--ac-accent-5);
  --ac-cat-other: var(--ac-neutral);
  --ac-media-bg: #000000;
  --ac-font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "Yu Gothic UI", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, system-ui, sans-serif;
  --ac-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "BIZ UDGothic", monospace;
  --ac-font-family-heading: var(--ac-font-family);
  --ac-font-family-num: var(--ac-font-family);
  --ac-font-size-2xs: 10px;
  --ac-font-size-xs: 11px;
  --ac-font-size-sm: 12px;
  --ac-font-size-md: 14px;
  --ac-font-size-lg: 16px;
  --ac-font-size-xl: 18px;
  --ac-font-size-2xl: 22px;
  --ac-font-size-3xl: 28px;
  --ac-weight-normal: 400;
  --ac-weight-bold: 700;
  --ac-line-height: 1.5;
  --ac-line-height-tight: 1.3;
  --ac-space-0: 0;
  --ac-space-2xs: 2px;
  --ac-space-xs: 4px;
  --ac-space-sm: 8px;
  --ac-space-ms: 12px;
  --ac-space-md: 16px;
  --ac-space-lg: 24px;
  --ac-space-xl: 32px;
  --ac-space-2xl: 48px;
  --ac-radius-sm: 3px;
  --ac-radius-md: 4px;
  --ac-radius-card: 6px;
  --ac-radius-round: 50%;
  --ac-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --ac-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.14), 0 2px 4px rgba(16, 24, 40, 0.06);
  --ac-shadow-focus: 0 0 0 2px var(--ac-surface), 0 0 0 4px var(--ac-focus);
  --ac-motion-fast: 0.1s;
  --ac-motion-base: 0.15s;
  --ac-motion-slow: 0.2s;
  --ac-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --ac-z-dropdown: 50;
  --ac-z-sticky: 80;
  --ac-z-drawer: 90;
  --ac-z-modal: 100;
  --ac-z-toast: 110;
  --ac-z-tooltip: 120;
  --ac-size-sidebar: 232px;
  --ac-size-topbar: 48px;
  --ac-size-content-max: 1600px;
  --ac-size-icon-xs: 12px;
  --ac-size-icon-sm: 14px;
  --ac-size-icon-md: 16px;
  --ac-size-icon-lg: 20px;
  --ac-size-icon-xl: 24px;
  --ac-font-size: 13px;
  --ac-row-h: 32px;
  --ac-control-h: 28px;
  --ac-control-sm-h: 24px;
  --ac-control-font: 13px;
  --ac-gap: 8px;
  --ac-pad: 12px;
  --ac-touch: 28px;
  color-scheme: light;
}
/* タブレット 600〜1023px */
@media (max-width: 1023px) {
  :root {
    --ac-font-size: 14px;
    --ac-row-h: 44px;
    --ac-control-h: 44px;
    --ac-control-sm-h: 44px;
    --ac-control-font: 16px;
    --ac-gap: 12px;
    --ac-pad: 16px;
    --ac-touch: 44px;
  }
}
/* スマホ 〜599px: 文字 15px・押す所 44px・入力欄 16px */
@media (max-width: 599px) {
  :root {
    --ac-font-size: 15px;
    --ac-row-h: 48px;
    --ac-control-h: 44px;
    --ac-control-sm-h: 44px;
    --ac-control-font: 16px;
    --ac-gap: 16px;
    --ac-pad: 16px;
    --ac-touch: 44px;
  }
}
/* PC で本人が選ぶ密度: <html data-ac-density="standard"> */
@media (min-width: 1024px) {
  :root[data-ac-density="standard"], :root[data-ac-theme="relaxed"] {
    --ac-font-size: 14px;
    --ac-row-h: 40px;
    --ac-control-h: 32px;
    --ac-control-sm-h: 28px;
    --ac-control-font: 14px;
    --ac-gap: 12px;
    --ac-pad: 16px;
    --ac-touch: 32px;
  }
  :root[data-ac-density="touch"] {
    --ac-font-size: 15px;
    --ac-row-h: 48px;
    --ac-control-h: 44px;
    --ac-control-sm-h: 44px;
    --ac-control-font: 16px;
    --ac-gap: 16px;
    --ac-pad: 16px;
    --ac-touch: 44px;
  }
}
/* テーマ「ゆったり」: 文字と余白を大きめに */
@media (max-width: 1023px) {
  :root[data-ac-theme="relaxed"] {
    --ac-font-size: 16px;
    --ac-row-h: 52px;
    --ac-control-h: 48px;
    --ac-control-sm-h: 48px;
    --ac-control-font: 17px;
    --ac-gap: 16px;
    --ac-pad: 16px;
    --ac-touch: 48px;
  }
}
.ac-density--compact {
  --ac-font-size: 13px;
  --ac-row-h: 32px;
  --ac-control-h: 28px;
  --ac-control-sm-h: 24px;
  --ac-control-font: 13px;
  --ac-gap: 8px;
  --ac-pad: 12px;
  --ac-touch: 28px;
}
.ac-density--standard {
  --ac-font-size: 14px;
  --ac-row-h: 40px;
  --ac-control-h: 32px;
  --ac-control-sm-h: 28px;
  --ac-control-font: 14px;
  --ac-gap: 12px;
  --ac-pad: 16px;
  --ac-touch: 32px;
}
.ac-density--touch {
  --ac-font-size: 15px;
  --ac-row-h: 48px;
  --ac-control-h: 44px;
  --ac-control-sm-h: 44px;
  --ac-control-font: 16px;
  --ac-gap: 16px;
  --ac-pad: 16px;
  --ac-touch: 44px;
}
/* ダークモード: <html data-theme="dark">、または data-theme="auto" で端末の設定に合わせる */
:root[data-theme="dark"] {
  --ac-brand: #5B9BE6;
  --ac-brand-hover: #7DB3F0;
  --ac-brand-active: #9CC5F3;
  --ac-brand-soft: #1A2B40;
  --ac-brand-soft-2: #22395A;
  --ac-brand-text: #9CC5F3;
  --ac-brand-contrast: #0D1620;
  --ac-brand-2: #0B1A29;
  --ac-brand-2-hover: #132A40;
  --ac-brand-2-contrast: #FFFFFF;
  --ac-logo-ink: #FFFFFF;
  --ac-logo-spark: #7DB3F0;
  --ac-logo-spark-2: #82B0E8;
  --ac-bg: #111418;
  --ac-surface: #191D22;
  --ac-surface-2: #1E2329;
  --ac-surface-3: #262C33;
  --ac-surface-inverse: #F4F5F7;
  --ac-text: #E7EAEE;
  --ac-text-2: #C3C9D0;
  --ac-muted: #9AA3AE;
  --ac-subtle: #6F7883;
  --ac-text-inverse: #111418;
  --ac-border: #323A43;
  --ac-border-soft: #2A3139;
  --ac-border-strong: #46505B;
  --ac-link: #7DB3F0;
  --ac-link-hover: #9CC5F3;
  --ac-focus: #7DB3F0;
  --ac-overlay: rgba(0, 0, 0, 0.6);
  --ac-hover: rgba(255, 255, 255, 0.05);
  --ac-pressed: rgba(255, 255, 255, 0.10);
  --ac-info: #7DB3F0;
  --ac-info-bg: #16263A;
  --ac-info-text: #9CC5F3;
  --ac-info-border: #2F4D73;
  --ac-success: #5CC27E;
  --ac-success-bg: #132A1C;
  --ac-success-text: #8BD8A4;
  --ac-success-border: #2C5A3B;
  --ac-warning: #E0A33B;
  --ac-warning-bg: #2E2310;
  --ac-warning-text: #F0C478;
  --ac-warning-border: #6A5020;
  --ac-danger: #F07A6C;
  --ac-danger-bg: #341A17;
  --ac-danger-text: #F5A398;
  --ac-danger-border: #6E302A;
  --ac-neutral: #9AA3AE;
  --ac-neutral-bg: #262C33;
  --ac-neutral-text: #C3C9D0;
  --ac-neutral-border: #46505B;
  --ac-accent: #7DB3F0;
  --ac-accent-hover: #9CC5F3;
  --ac-accent-soft: #16263A;
  --ac-accent-text: #9CC5F3;
  --ac-accent-contrast: #0D1620;
  --ac-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ac-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --ac-brand: #5B9BE6;
    --ac-brand-hover: #7DB3F0;
    --ac-brand-active: #9CC5F3;
    --ac-brand-soft: #1A2B40;
    --ac-brand-soft-2: #22395A;
    --ac-brand-text: #9CC5F3;
    --ac-brand-contrast: #0D1620;
    --ac-brand-2: #0B1A29;
    --ac-brand-2-hover: #132A40;
    --ac-brand-2-contrast: #FFFFFF;
    --ac-logo-ink: #FFFFFF;
    --ac-logo-spark: #7DB3F0;
    --ac-logo-spark-2: #82B0E8;
    --ac-bg: #111418;
    --ac-surface: #191D22;
    --ac-surface-2: #1E2329;
    --ac-surface-3: #262C33;
    --ac-surface-inverse: #F4F5F7;
    --ac-text: #E7EAEE;
    --ac-text-2: #C3C9D0;
    --ac-muted: #9AA3AE;
    --ac-subtle: #6F7883;
    --ac-text-inverse: #111418;
    --ac-border: #323A43;
    --ac-border-soft: #2A3139;
    --ac-border-strong: #46505B;
    --ac-link: #7DB3F0;
    --ac-link-hover: #9CC5F3;
    --ac-focus: #7DB3F0;
    --ac-overlay: rgba(0, 0, 0, 0.6);
    --ac-hover: rgba(255, 255, 255, 0.05);
    --ac-pressed: rgba(255, 255, 255, 0.10);
    --ac-info: #7DB3F0;
    --ac-info-bg: #16263A;
    --ac-info-text: #9CC5F3;
    --ac-info-border: #2F4D73;
    --ac-success: #5CC27E;
    --ac-success-bg: #132A1C;
    --ac-success-text: #8BD8A4;
    --ac-success-border: #2C5A3B;
    --ac-warning: #E0A33B;
    --ac-warning-bg: #2E2310;
    --ac-warning-text: #F0C478;
    --ac-warning-border: #6A5020;
    --ac-danger: #F07A6C;
    --ac-danger-bg: #341A17;
    --ac-danger-text: #F5A398;
    --ac-danger-border: #6E302A;
    --ac-neutral: #9AA3AE;
    --ac-neutral-bg: #262C33;
    --ac-neutral-text: #C3C9D0;
    --ac-neutral-border: #46505B;
    --ac-accent: #7DB3F0;
    --ac-accent-hover: #9CC5F3;
    --ac-accent-soft: #16263A;
    --ac-accent-text: #9CC5F3;
    --ac-accent-contrast: #0D1620;
    --ac-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ac-shadow-2: 0 6px 16px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
@media print {
  :root[data-theme="dark"], :root[data-theme="auto"] {
    --ac-brand: #1F5FAD;
    --ac-brand-hover: #174A87;
    --ac-brand-active: #123C6E;
    --ac-brand-soft: #E8F0FB;
    --ac-brand-soft-2: #D4E3F7;
    --ac-brand-text: #1B4F94;
    --ac-brand-contrast: #FFFFFF;
    --ac-brand-2: #12324F;
    --ac-brand-2-hover: #0D2740;
    --ac-brand-2-contrast: #FFFFFF;
    --ac-logo-ink: #12324F;
    --ac-logo-spark: #2F7BD8;
    --ac-logo-spark-2: #82B0E8;
    --ac-bg: #F4F5F7;
    --ac-surface: #FFFFFF;
    --ac-surface-2: #FAFBFC;
    --ac-surface-3: #EEF0F2;
    --ac-surface-inverse: #1B1F24;
    --ac-text: #1B1F24;
    --ac-text-2: #444C56;
    --ac-muted: #5B6470;
    --ac-subtle: #8A929C;
    --ac-text-inverse: #FFFFFF;
    --ac-border: #DDE1E6;
    --ac-border-soft: #E6E9ED;
    --ac-border-strong: #C9CED5;
    --ac-link: #1F5FAD;
    --ac-link-hover: #174A87;
    --ac-focus: #1F5FAD;
    --ac-overlay: rgba(16, 24, 40, 0.45);
    --ac-hover: rgba(16, 24, 40, 0.04);
    --ac-pressed: rgba(16, 24, 40, 0.08);
    --ac-info: #1F5FAD;
    --ac-info-bg: #E8F0FB;
    --ac-info-text: #1B4F94;
    --ac-info-border: #9DBBE3;
    --ac-success: #1E7B3A;
    --ac-success-bg: #E6F4EA;
    --ac-success-text: #1B6330;
    --ac-success-border: #9CCFAA;
    --ac-warning: #B26A00;
    --ac-warning-bg: #FDF3E1;
    --ac-warning-text: #7A4A00;
    --ac-warning-border: #E3BF7B;
    --ac-danger: #B42318;
    --ac-danger-bg: #FBE9E7;
    --ac-danger-text: #9F2A1B;
    --ac-danger-border: #E8A79C;
    --ac-neutral: #5B6470;
    --ac-neutral-bg: #EEF0F2;
    --ac-neutral-text: #444C56;
    --ac-neutral-border: #C9CED5;
    --ac-accent: #2876D5;
    --ac-accent-hover: #1F5FAD;
    --ac-accent-soft: #EDF3FA;
    --ac-accent-text: #1A4C89;
    --ac-accent-contrast: #FFFFFF;
    --ac-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --ac-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.14), 0 2px 4px rgba(16, 24, 40, 0.06);
    color-scheme: light;
  }
}
:root[data-ac-radius="subtle"] {
  --ac-radius-sm: 2px;
  --ac-radius-md: 2px;
  --ac-radius-card: 3px;
}
:root[data-ac-shadow="none"] {
  --ac-shadow-1: none;
  --ac-shadow-2: 0 0 0 1px var(--ac-border), 0 2px 6px rgba(16, 24, 40, 0.08);
}

/* ==========================================================================
   AgentCSS 01 基本（リセット・文字・リンク・キーボードの枠）
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ac-font-family);
  font-size: var(--ac-font-size);
  line-height: var(--ac-line-height);
  color: var(--ac-text);
  background: var(--ac-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 0;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: var(--ac-weight-bold); line-height: var(--ac-line-height-tight); }
/* 見出しのフォント（本文と別に選べる。初期値は本文と同じ） */
h1, h2, h3, h4, h5, h6, .ac-h1, .ac-h2, .ac-h3, .ac-page-header__title, .ac-card__title, .ac-section__title, .ac-modal__title { font-family: var(--ac-font-family-heading); }
p, blockquote, figure, dl, dd, pre { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
img, svg, video, canvas { vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
abbr[title] { text-decoration: none; cursor: help; border: 0; }
hr { border: 0; border-top: 1px solid var(--ac-border); margin: var(--ac-space-md) 0; }
code, kbd, samp, pre { font-family: var(--ac-font-family-mono); font-size: 0.95em; }
small { font-size: var(--ac-font-size-sm); }
strong, b { font-weight: var(--ac-weight-bold); }
[hidden] { display: none !important; }

a { color: var(--ac-link); text-decoration: none; }
a:hover { color: var(--ac-link-hover); text-decoration: underline; }

/* キーボードで選んだ所に青い枠 */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 2px; }

::selection { background: var(--ac-brand-soft-2); color: var(--ac-text); }

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* 文章（説明書・ヘルプなど、箇条書きを残したい所） */
.ac-prose { line-height: 1.75; }
.ac-prose > * + * { margin-top: var(--ac-space-sm); }
.ac-prose ul { list-style: disc; padding-left: var(--ac-space-lg); }
.ac-prose ol { list-style: decimal; padding-left: var(--ac-space-lg); }
.ac-prose li + li { margin-top: var(--ac-space-2xs); }
.ac-prose h2 { font-size: var(--ac-font-size-lg); margin-top: var(--ac-space-lg); }
.ac-prose h3 { font-size: var(--ac-font-size-md); margin-top: var(--ac-space-md); }
.ac-prose code { padding: 0 var(--ac-space-2xs); background: var(--ac-surface-3); border-radius: var(--ac-radius-sm); }

/* ---------- 文字の大きさ・色 ---------- */
.ac-h1 { font-size: var(--ac-font-size-2xl); font-weight: var(--ac-weight-bold); line-height: var(--ac-line-height-tight); }
.ac-h2 { font-size: var(--ac-font-size-xl); font-weight: var(--ac-weight-bold); line-height: var(--ac-line-height-tight); }
.ac-h3 { font-size: var(--ac-font-size-md); font-weight: var(--ac-weight-bold); line-height: var(--ac-line-height-tight); }
.ac-caption { font-size: var(--ac-font-size-sm); color: var(--ac-muted); line-height: var(--ac-line-height-tight); }
.ac-small { font-size: var(--ac-font-size-sm); }
.ac-xsmall { font-size: var(--ac-font-size-xs); }
.ac-muted { color: var(--ac-muted); }
.ac-subtle { color: var(--ac-subtle); }
.ac-strong { font-weight: var(--ac-weight-bold); }
.ac-num { font-family: var(--ac-font-family-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.ac-mono { font-family: var(--ac-font-family-mono); }
.ac-text-danger { color: var(--ac-danger-text); }
.ac-text-success { color: var(--ac-success-text); }
.ac-text-warning { color: var(--ac-warning-text); }
.ac-text-info { color: var(--ac-info-text); }
.ac-text-right { text-align: right; }
.ac-text-center { text-align: center; }
.ac-text-left { text-align: left; }
.ac-truncate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
span.ac-truncate, a.ac-truncate, abbr.ac-truncate { display: inline-block; vertical-align: bottom; }
.ac-nowrap { white-space: nowrap; }
.ac-break { overflow-wrap: anywhere; word-break: break-word; }
.ac-lh-reset { line-height: 1.25; }
.ac-link-reset, .ac-link-reset:hover { color: inherit; text-decoration: none; }
.ac-surface-2 { background: var(--ac-surface-2); }

/* ==========================================================================
   AgentCSS 02 枠組み（画面・見出し・セクション・グリッド・並び）
   スマホ 〜599px / タブレット 600〜1023px / PC 1024px〜
   ========================================================================== */

/* ---------- 画面全体 ---------- */
.ac-page {
  display: flex; flex-direction: column; gap: var(--ac-gap);
  width: 100%; max-width: var(--ac-size-content-max); margin: 0 auto;
  padding: var(--ac-space-ms) var(--ac-space-md) var(--ac-space-lg);
}
@media (max-width: 599px) { .ac-page { padding: var(--ac-space-sm) var(--ac-space-sm) var(--ac-space-lg); } }

/* ---------- 画面の見出し ---------- */
/* 簡単な形: <header class="ac-page-header"><h1 class="ac-page-header__title">…</h1><span class="ac-page-header__meta">12 件</span><div class="ac-page-header__actions">…</div></header> */
.ac-page-header {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-space-sm) var(--ac-space-md);
  padding: var(--ac-space-ms) var(--ac-space-md);
  background: var(--ac-surface); border: 1px solid var(--ac-border-soft); border-radius: var(--ac-radius-card);
  box-shadow: var(--ac-shadow-1);
}
.ac-page-header--plain { padding: 0; background: none; border: 0; box-shadow: none; }
.ac-page-header__title {
  margin: 0; font-size: var(--ac-font-size-xl); font-weight: var(--ac-weight-bold); line-height: var(--ac-line-height-tight);
  min-width: 0;
}
.ac-page-header__meta { color: var(--ac-muted); font-size: var(--ac-font-size-sm); min-width: 0; }
.ac-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-space-xs); margin-left: auto; }
/* 行に分ける形（詳細画面のハイライトなど） */
.ac-page-header__row { flex: 1 1 100%; display: flex; align-items: flex-start; gap: var(--ac-space-md); min-width: 0; }
.ac-page-header__row--details { margin-top: var(--ac-space-2xs); padding-top: var(--ac-space-sm); border-top: 1px solid var(--ac-border-soft); }
.ac-page-header__main { flex: 1 1 auto; min-width: 0; align-self: center; }
.ac-page-header__row > .ac-page-header__actions { flex: 0 0 auto; align-self: center; }
.ac-page-header__meta:where(.ac-page-header__row > *) { flex: 1 1 auto; align-self: flex-end; }
.ac-page-header__tools { flex: 0 0 auto; align-self: flex-end; }
.ac-page-header__details { flex: 1 1 auto; min-width: 0; }
.ac-page-header__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ac-space-xs); }
.ac-page-header__control { display: flex; align-items: center; }
.ac-page-header__name { display: flex; align-items: center; gap: var(--ac-space-sm); min-width: 0; }
.ac-page-header__name-title { min-width: 0; }
.ac-page-header__name-title h1 { margin: 0; font-size: inherit; font-weight: inherit; min-width: 0; }
.ac-page-header h1 { margin: 0; font-size: inherit; min-width: 0; }
.ac-page-header h1 > span:not(.ac-page-header__title):not(.ac-sr-only) { display: block; font-size: var(--ac-font-size-sm); font-weight: var(--ac-weight-normal); color: var(--ac-muted); line-height: var(--ac-line-height-tight); }
.ac-page-header h1 > .ac-page-header__title { display: block; }
.ac-page-header__meta-text { color: var(--ac-muted); font-size: var(--ac-font-size-sm); }
.ac-page-header__detail-row { display: flex; flex-wrap: wrap; gap: var(--ac-space-sm) var(--ac-space-lg); margin: 0; padding: 0; list-style: none; }
.ac-page-header__detail { min-width: 0; max-width: 16rem; }
.ac-page-header__detail > :first-child { font-size: var(--ac-font-size-sm); color: var(--ac-muted); }

/* ---------- セクション ---------- */
.ac-section { display: flex; flex-direction: column; gap: var(--ac-space-sm); min-width: 0; }
.ac-section + .ac-section { margin-top: var(--ac-space-md); }
.ac-section__title {
  margin: 0; padding-bottom: var(--ac-space-xs); border-bottom: 1px solid var(--ac-border);
  font-size: var(--ac-font-size-md); font-weight: var(--ac-weight-bold);
  display: flex; align-items: center; gap: var(--ac-space-sm);
}
.ac-section__body { min-width: 0; }

/* ---------- グリッド（スマホは 1 列） ---------- */
.ac-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ac-gap); align-items: start; }
.ac-grid--stretch { align-items: stretch; }
@media (min-width: 600px) {
  .ac-grid--2, .ac-grid--3, .ac-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ac-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ac-span-2 { grid-column: span 2; }
.ac-span-all { grid-column: 1 / -1; }
@media (max-width: 599px) { .ac-span-2 { grid-column: auto; } }

/* ---------- 縦の並び・横の並び ---------- */
.ac-stack { display: flex; flex-direction: column; gap: var(--ac-gap); min-width: 0; }
.ac-stack--sm { gap: var(--ac-space-xs); }
.ac-stack--lg { gap: var(--ac-space-lg); }
.ac-row { display: flex; align-items: center; gap: var(--ac-space-sm); min-width: 0; }
.ac-row--between { justify-content: space-between; }
.ac-row--end { justify-content: flex-end; }
.ac-row--start { align-items: flex-start; }
.ac-row--wrap { flex-wrap: wrap; }
.ac-row--sm { gap: var(--ac-space-xs); }
.ac-row--lg { gap: var(--ac-space-md); }

/* ---------- 横並び（列の幅を指定する形） ---------- */
.ac-flex { display: flex; min-width: 0; }
.ac-flex--center { align-items: center; }
.ac-flex--wrap { flex-wrap: wrap; }
.ac-flex--column { flex-direction: column; }
.ac-col { flex: 1 1 auto; min-width: 0; }
.ac-gutters { margin-left: calc(var(--ac-space-sm) * -1); margin-right: calc(var(--ac-space-sm) * -1); }
.ac-gutters > .ac-col { padding-left: var(--ac-space-sm); padding-right: var(--ac-space-sm); }
.ac-w-full { flex: 0 0 auto; width: 100%; }
@media (min-width: 600px) {
  .ac-md-1-2 { flex: 0 0 auto; width: 50%; }
  .ac-md-1-3 { flex: 0 0 auto; width: 33.3333%; }
  .ac-md-2-3 { flex: 0 0 auto; width: 66.6667%; }
}
@media (min-width: 1024px) {
  .ac-lg-1-2 { flex: 0 0 auto; width: 50%; }
  .ac-lg-4-12 { flex: 0 0 auto; width: 33.3333%; }
  .ac-lg-5-12 { flex: 0 0 auto; width: 41.6667%; }
  .ac-lg-7-12 { flex: 0 0 auto; width: 58.3333%; }
  .ac-lg-8-12 { flex: 0 0 auto; width: 66.6667%; }
}
.ac-min-0 { flex: 1 1 auto; min-width: 0; }
.ac-no-flex { flex: none; }
.ac-grow { flex-grow: 1; min-width: 0; }
.ac-self-start { align-self: flex-start; }
.ac-self-center { align-self: center; }

/* ---------- 絵と本文（アイコン＋文字） ---------- */
.ac-media { display: flex; align-items: flex-start; min-width: 0; }
.ac-media--center { align-items: center; }
.ac-media__figure { flex: 0 0 auto; margin-right: var(--ac-space-sm); display: flex; }
.ac-media__body { flex: 1 1 auto; min-width: 0; }

/* スマホ: 見出しの行を折り返し、ボタンは下の行に */
@media (max-width: 599px) {
  .ac-page-header { padding: var(--ac-space-sm) var(--ac-space-ms); }
  .ac-page-header__row { flex-wrap: wrap; gap: var(--ac-space-sm); }
  .ac-page-header__row > .ac-page-header__main { flex: 1 1 100%; }
  .ac-page-header__row > .ac-page-header__actions, .ac-page-header__row > .ac-page-header__tools,
  .ac-page-header__row > .ac-page-header__meta { flex: 1 1 100%; margin-left: 0; justify-content: flex-start; }
  .ac-page-header__controls { justify-content: flex-start; }
  .ac-page-header__detail-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ac-space-sm); }
  .ac-page-header__detail { max-width: none; }
  .ac-page-header .ac-btn-group { flex-wrap: wrap; gap: var(--ac-space-xs); }
  .ac-page-header .ac-btn-group > .ac-btn, .ac-page-header .ac-btn-group > * > .ac-btn { margin-left: 0; border-radius: var(--ac-radius-md); }
}

/* ==========================================================================
   AgentCSS 03 ボタン
   押すと少し沈む・マウスを乗せると枠が濃くなる・キーボードで青い枠
   ========================================================================== */
.ac-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ac-space-xs);
  min-height: var(--ac-control-h); padding: 0 var(--ac-space-ms);
  border: 1px solid var(--ac-border-strong); border-radius: var(--ac-radius-md);
  background: var(--ac-surface); color: var(--ac-text);
  font: inherit; font-size: var(--ac-font-size); line-height: 1.2; white-space: nowrap; text-align: center;
  text-decoration: none; cursor: pointer; user-select: none; vertical-align: middle;
  transition: border-color var(--ac-motion-fast) var(--ac-motion-ease), background-color var(--ac-motion-fast) var(--ac-motion-ease),
              transform var(--ac-motion-fast) var(--ac-motion-ease), color var(--ac-motion-fast) var(--ac-motion-ease);
}
.ac-btn:hover { border-color: var(--ac-muted); background: var(--ac-surface-2); color: var(--ac-text); text-decoration: none; }
.ac-btn:active { transform: translateY(1px); background: var(--ac-surface-3); }
.ac-btn:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 2px; }
.ac-btn[disabled], .ac-btn.is-disabled, .ac-btn[aria-disabled="true"] {
  cursor: not-allowed; transform: none; color: var(--ac-subtle);
  background: var(--ac-surface-3); border-color: var(--ac-border);
}

/* 主ボタン（1 画面に 1 つ） */
.ac-btn--primary { background: var(--ac-btn-primary-bg); border-color: var(--ac-btn-primary-bg); color: var(--ac-btn-primary-text); }
.ac-btn--primary:hover { background: var(--ac-btn-primary-hover); border-color: var(--ac-btn-primary-hover); color: var(--ac-btn-primary-text); }
.ac-btn--primary:active { background: var(--ac-btn-primary-active); border-color: var(--ac-btn-primary-active); }
/* 削除など取り消せない操作 */
.ac-btn--danger { background: var(--ac-danger); border-color: var(--ac-danger); color: var(--ac-text-inverse); }
.ac-btn--danger:hover { background: var(--ac-danger-text); border-color: var(--ac-danger-text); color: var(--ac-text-inverse); }
.ac-btn--danger:active { background: var(--ac-danger-text); }
.ac-btn--danger-text { color: var(--ac-danger-text); }
.ac-btn--danger-text:hover { color: var(--ac-danger-text); border-color: var(--ac-danger); background: var(--ac-danger-bg); }
.ac-btn--outline { border-color: var(--ac-brand); color: var(--ac-brand); }
.ac-btn--outline:hover { background: var(--ac-brand-soft); border-color: var(--ac-brand-hover); color: var(--ac-brand-hover); }
.ac-btn--ghost { background: transparent; border-color: transparent; color: var(--ac-link); }
.ac-btn--ghost:hover { background: var(--ac-hover); border-color: transparent; color: var(--ac-link-hover); }
.ac-btn--primary[disabled], .ac-btn--danger[disabled], .ac-btn--primary.is-disabled {
  background: var(--ac-surface-3); border-color: var(--ac-border); color: var(--ac-subtle);
}

/* 大きさ */
.ac-btn--sm { min-height: var(--ac-control-sm-h); padding: 0 var(--ac-space-sm); font-size: var(--ac-font-size-sm); }
.ac-btn--lg { min-height: calc(var(--ac-control-h) + var(--ac-space-sm)); padding: 0 var(--ac-space-md); font-size: var(--ac-font-size-md); }
.ac-btn--block { display: flex; width: 100%; }

/* アイコンだけのボタン（必ず title か ac-sr-only の文字を付ける） */
.ac-btn--icon {
  width: var(--ac-control-h); min-width: var(--ac-control-h); padding: 0;
  border-color: transparent; background: transparent; color: var(--ac-muted);
}
.ac-btn--icon:hover { background: var(--ac-hover); border-color: transparent; color: var(--ac-text); }
.ac-btn--icon-border { width: var(--ac-control-h); min-width: var(--ac-control-h); padding: 0; color: var(--ac-text-2); }
.ac-btn--icon-xs { width: 20px; min-width: 20px; min-height: 20px; height: 20px; padding: 0; }
.ac-btn--sm.ac-btn--icon, .ac-btn--sm.ac-btn--icon-border { width: var(--ac-control-sm-h); min-width: var(--ac-control-sm-h); }
.ac-btn--inverse { color: var(--ac-on-dark); }
.ac-btn--inverse:hover { color: var(--ac-text-inverse); background: var(--ac-on-dark-hover); }
.ac-btn--reset, .ac-btn--reset:hover, .ac-btn--reset:active {
  min-height: 0; padding: 0; border: 0; background: none; color: inherit; transform: none; font-weight: inherit;
}

/* ボタンの中のアイコン */
.ac-btn__icon { width: var(--ac-size-icon-sm); height: var(--ac-size-icon-sm); flex-shrink: 0; }
.ac-btn__icon--left { margin-left: calc(var(--ac-space-2xs) * -1); }
.ac-btn__icon--right { margin-right: calc(var(--ac-space-2xs) * -1); }
.ac-btn__icon--lg { width: var(--ac-size-icon-lg); height: var(--ac-size-icon-lg); }
.ac-btn__icon--sm { width: var(--ac-size-icon-xs); height: var(--ac-size-icon-xs); }
.ac-btn__icon--hint { color: var(--ac-subtle); }

/* ボタンの組（つなげて並べる） */
.ac-btn-group { display: inline-flex; flex-wrap: nowrap; align-items: stretch; vertical-align: middle; }
.ac-btn-group > .ac-btn + .ac-btn, .ac-btn-group > * + .ac-btn, .ac-btn-group > .ac-btn + * { margin-left: -1px; }
.ac-btn-group > .ac-btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ac-btn-group > .ac-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ac-btn-group > .ac-btn:hover, .ac-btn-group > .ac-btn:focus-visible { z-index: 1; }
.ac-btn-group > form, .ac-btn-group > .ac-dropdown { display: inline-flex; }
.ac-btn-group > form > .ac-btn, .ac-btn-group > .ac-dropdown > .ac-btn { border-radius: 0; }
.ac-btn-group > :last-child > .ac-btn { border-top-right-radius: var(--ac-radius-md); border-bottom-right-radius: var(--ac-radius-md); }
.ac-btn-group > :first-child > .ac-btn { border-top-left-radius: var(--ac-radius-md); border-bottom-left-radius: var(--ac-radius-md); }

/* ==========================================================================
   AgentCSS 04 入力（項目・入力欄・選択・チェック・スイッチ・検索・参照検索）
   スマホでは入力欄の文字を 16px にして、入力時に画面が拡大されないようにする
   ========================================================================== */
.ac-form { display: flex; flex-direction: column; gap: var(--ac-gap); }
.ac-field { position: relative; min-width: 0; }
.ac-field__label {
  display: inline-block; margin-bottom: var(--ac-space-2xs);
  font-size: var(--ac-font-size-sm); color: var(--ac-muted); line-height: var(--ac-line-height-tight);
}
.ac-field__control { position: relative; min-width: 0; }
.ac-field__help { margin-top: var(--ac-space-2xs); font-size: var(--ac-font-size-sm); color: var(--ac-muted); }
.ac-field__error, .has-error .ac-field__help { margin-top: var(--ac-space-2xs); font-size: var(--ac-font-size-sm); color: var(--ac-danger-text); }
.ac-field__static {
  display: block; min-height: calc(var(--ac-font-size) * 1.5 + var(--ac-space-sm));
  padding: var(--ac-space-2xs) 0 var(--ac-space-xs);
  border-bottom: 1px solid var(--ac-border-soft); overflow-wrap: anywhere;
}
.ac-field__icon { display: inline-flex; vertical-align: middle; }
.ac-field--stacked { margin-bottom: var(--ac-space-sm); }
.ac-field--stacked > .ac-field__label, .ac-field--readonly > .ac-field__label { display: block; }
.ac-required { color: var(--ac-danger-text); text-decoration: none; border: 0; margin-right: var(--ac-space-2xs); cursor: help; }
.ac-field.is-required > .ac-field__label::before { content: "*"; color: var(--ac-danger-text); margin-right: var(--ac-space-2xs); }
/* 横並びの項目（ラベル 120px ＋ 入力） */
.ac-field--inline { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--ac-space-sm); }
.ac-field--inline > .ac-field__label { margin: 0; }
@media (max-width: 599px) { .ac-field--inline { grid-template-columns: minmax(0, 1fr); gap: var(--ac-space-2xs); } }

/* ---------- 入力欄・選択・複数行 ---------- */
.ac-input, .ac-select, .ac-textarea, input.ac-search {
  display: block; width: 100%; min-height: var(--ac-control-h);
  padding: 0 var(--ac-space-sm);
  border: 1px solid var(--ac-border-strong); border-radius: var(--ac-radius-md);
  background: var(--ac-surface); color: var(--ac-text);
  font: inherit; font-size: var(--ac-control-font); line-height: 1.3;
  transition: border-color var(--ac-motion-fast) var(--ac-motion-ease), box-shadow var(--ac-motion-fast) var(--ac-motion-ease);
}
.ac-input:hover, .ac-select:hover, .ac-textarea:hover, input.ac-search:hover { border-color: var(--ac-muted); }
.ac-input:focus, .ac-select:focus, .ac-textarea:focus, input.ac-search:focus {
  outline: none; border-color: var(--ac-focus); box-shadow: 0 0 0 1px var(--ac-focus);
}
.ac-input::placeholder, .ac-textarea::placeholder, input.ac-search::placeholder { color: var(--ac-subtle); }
.ac-input[disabled], .ac-select[disabled], .ac-textarea[disabled] { background: var(--ac-surface-3); color: var(--ac-muted); cursor: not-allowed; }
.ac-input[type="date"], .ac-input[type="time"], .ac-input[type="datetime-local"], .ac-input[type="month"] { padding-right: var(--ac-space-xs); }
.ac-input[type="color"] { padding: var(--ac-space-2xs); width: 3rem; }
.ac-input[type="file"] { padding: var(--ac-space-xs); line-height: 1.5; }
.ac-textarea { min-height: calc(var(--ac-control-h) * 2.5); padding: var(--ac-space-xs) var(--ac-space-sm); line-height: var(--ac-line-height); resize: vertical; }
.ac-select { padding-right: var(--ac-space-xs); cursor: pointer; }
.has-error .ac-input, .has-error .ac-select, .has-error .ac-textarea, .ac-input.is-invalid { border-color: var(--ac-danger); }
.has-error .ac-input:focus, .has-error .ac-select:focus, .has-error .ac-textarea:focus { box-shadow: 0 0 0 1px var(--ac-danger); }

/* 選択の矢印を自前で描く入れ物（無くても動く） */
.ac-select-wrap { position: relative; display: block; min-width: 0; }
.ac-select-wrap > .ac-select { appearance: none; -webkit-appearance: none; padding-right: var(--ac-space-lg); }
.ac-select-wrap::after {
  content: ""; position: absolute; right: var(--ac-space-sm); top: calc(50% - 4px); width: 6px; height: 6px;
  border-right: 1.5px solid var(--ac-muted); border-bottom: 1.5px solid var(--ac-muted);
  transform: rotate(45deg); pointer-events: none;
}

/* ---------- アイコンつきの入力欄 ---------- */
.ac-input-icon { position: relative; }
.ac-input-icon--left > .ac-input, .ac-input-icon--left > input { padding-left: calc(var(--ac-space-sm) * 2 + var(--ac-size-icon-sm)); }
.ac-input-icon--right > .ac-input, .ac-input-icon--right > input { padding-right: calc(var(--ac-space-sm) * 2 + var(--ac-size-icon-sm)); }
.ac-input-icon__icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--ac-size-icon-sm); height: var(--ac-size-icon-sm); color: var(--ac-muted); pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ac-input-icon__icon--left { left: var(--ac-space-sm); }
.ac-input-icon__icon--right { right: var(--ac-space-sm); }
.ac-btn.ac-input-icon__icon { pointer-events: auto; width: calc(var(--ac-size-icon-sm) + var(--ac-space-sm)); min-width: 0; min-height: 0; height: calc(var(--ac-size-icon-sm) + var(--ac-space-sm)); right: var(--ac-space-xs); }
.ac-btn.ac-input-icon__icon:active { transform: translateY(-50%); }

/* ---------- 検索 ---------- */
.ac-search { position: relative; display: block; min-width: 0; }
.ac-search::before {
  content: ""; position: absolute; left: var(--ac-space-sm); top: 50%; width: var(--ac-size-icon-sm); height: var(--ac-size-icon-sm);
  transform: translateY(-50%); background: var(--ac-muted); pointer-events: none;
  -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='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / contain;
          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='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ac-search > input, .ac-search > .ac-input { padding-left: calc(var(--ac-space-sm) * 2 + var(--ac-size-icon-sm)); }
input.ac-search {
  padding-left: calc(var(--ac-space-sm) * 2 + var(--ac-size-icon-sm));
  background: var(--ac-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6470' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat var(--ac-space-sm) center / var(--ac-size-icon-sm);
}

/* ---------- チェック・ラジオ ---------- */
.ac-check, .ac-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--ac-space-xs); min-width: 0; cursor: pointer; }
.ac-check > input[type="checkbox"], .ac-radio > input[type="radio"] {
  position: relative; top: calc((1.5em - 16px) / 2); flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--ac-brand); cursor: pointer;
}
/* 入力を隠して箱を描く形: <div class="ac-check"><input id><label class="ac-check__label" for><span class="ac-check__box"></span>文字</label></div> */
.ac-check:has(.ac-check__box) > input, .ac-radio:has(.ac-radio__dot) > input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.ac-check__label, .ac-radio__label { display: inline-flex; align-items: flex-start; gap: var(--ac-space-xs); cursor: pointer; min-width: 0; }
.ac-check__label .ac-field__label, .ac-radio__label .ac-field__label { display: inline; margin: 0; font-size: inherit; color: var(--ac-text); line-height: inherit; }
.ac-check__box, .ac-radio__dot {
  position: relative; flex: none; display: inline-block; width: 16px; height: 16px; top: calc((1.5em - 16px) / 2);
  border: 1px solid var(--ac-border-strong); background: var(--ac-surface);
  transition: background-color var(--ac-motion-fast), border-color var(--ac-motion-fast);
}
.ac-check__box { border-radius: var(--ac-radius-sm); }
.ac-radio__dot { border-radius: var(--ac-radius-round); }
.ac-check__label:hover .ac-check__box, .ac-radio__label:hover .ac-radio__dot { border-color: var(--ac-muted); }
.ac-check > input:checked + .ac-check__label .ac-check__box { background: var(--ac-brand); border-color: var(--ac-brand); }
.ac-check > input:checked + .ac-check__label .ac-check__box::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px;
  border-right: 2px solid var(--ac-brand-contrast); border-bottom: 2px solid var(--ac-brand-contrast); transform: rotate(45deg);
}
.ac-radio > input:checked + .ac-radio__label .ac-radio__dot { border-color: var(--ac-brand); }
.ac-radio > input:checked + .ac-radio__label .ac-radio__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: var(--ac-radius-round); background: var(--ac-brand);
}
.ac-check > input:focus-visible + .ac-check__label .ac-check__box,
.ac-radio > input:focus-visible + .ac-radio__label .ac-radio__dot { outline: 2px solid var(--ac-focus); outline-offset: 2px; }
.ac-check > input:disabled + .ac-check__label, .ac-radio > input:disabled + .ac-radio__label { cursor: not-allowed; color: var(--ac-muted); }

/* ---------- スイッチ（オン / オフ） ---------- */
/* 簡単な形: <label class="ac-switch"><input type="checkbox"><span class="ac-switch__track"></span>通知する</label> */
.ac-switch { position: relative; display: inline-flex; align-items: center; gap: var(--ac-space-sm); cursor: pointer; min-height: var(--ac-touch); }
.ac-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ac-switch__body { display: inline-flex; align-items: center; gap: var(--ac-space-sm); }
.ac-switch__track, .ac-switch .ac-check__box {
  position: relative; flex: none; display: inline-block; width: 32px; height: 18px; margin: 0;
  border: 0; border-radius: var(--ac-radius-md); background: var(--ac-border-strong);
  transition: background-color var(--ac-motion-base) var(--ac-motion-ease);
}
.ac-switch__track::after, .ac-switch .ac-check__box::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: var(--ac-radius-sm);
  background: var(--ac-surface); box-shadow: var(--ac-shadow-1);
  transition: transform var(--ac-motion-base) var(--ac-motion-ease);
}
.ac-switch > input:checked ~ .ac-switch__track, .ac-switch > input:checked ~ .ac-switch__body .ac-check__box { background: var(--ac-brand); }
.ac-switch > input:checked ~ .ac-switch__track::after, .ac-switch > input:checked ~ .ac-switch__body .ac-check__box::after { transform: translateX(14px); }
.ac-switch > input:focus-visible ~ .ac-switch__track, .ac-switch > input:focus-visible ~ .ac-switch__body .ac-check__box { outline: 2px solid var(--ac-focus); outline-offset: 2px; }
.ac-switch > input:disabled ~ * { opacity: 0.55; cursor: not-allowed; }
.ac-switch__on, .ac-switch__off { font-size: var(--ac-font-size-sm); color: var(--ac-muted); }
.ac-switch__on { display: none; }
.ac-switch > input:checked ~ .ac-switch__body .ac-switch__on { display: inline; color: var(--ac-text); }
.ac-switch > input:checked ~ .ac-switch__body .ac-switch__off { display: none; }

/* ---------- 参照検索（入力しながら候補から選ぶ） ---------- */
.ac-combobox { position: relative; min-width: 0; }
.ac-combobox__inner, .ac-combobox .ac-dropdown { position: relative; display: block; }
.ac-combobox__field { position: relative; }
.ac-combobox__inner > .ac-dropdown__menu { display: none; }
.ac-combobox__inner.is-open > .ac-dropdown__menu { display: block; }
.ac-listbox { margin: 0; padding: 0; list-style: none; }
.ac-listbox__item + .ac-listbox__item { border-top: 1px solid var(--ac-border-soft); }
.ac-listbox__option {
  display: flex; align-items: center; gap: var(--ac-space-sm); padding: var(--ac-space-xs) var(--ac-space-ms);
  min-height: var(--ac-row-h); cursor: pointer;
}
.ac-listbox__option > .ac-media__figure { margin-right: 0; }
.ac-listbox__option:hover, .ac-listbox__option.is-focused, .ac-listbox__option[aria-selected="true"] { background: var(--ac-brand-soft); }
.ac-listbox__option--plain { cursor: default; color: var(--ac-muted); }
.ac-listbox__option--plain:hover { background: none; }
.ac-listbox__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-listbox__meta { display: block; font-size: var(--ac-font-size-sm); color: var(--ac-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-listbox__icon { flex: none; display: inline-flex; }

/* ---------- スマホ・タブレット ---------- */
@media (max-width: 1023px) {
  .ac-check__label, .ac-radio__label, .ac-check:not(:has(.ac-check__label)), .ac-radio:not(:has(.ac-radio__label)) { min-height: var(--ac-touch); align-items: center; }
  .ac-check__label .ac-check__box, .ac-radio__label .ac-radio__dot, .ac-check > input, .ac-radio > input { top: 0; }
}

/* ==========================================================================
   AgentCSS 05 カード
   ごく薄い影（1 段目）。カードの中にカードを入れない（区切りは線で）
   ========================================================================== */
.ac-card {
  position: relative; min-width: 0;
  background: var(--ac-surface); color: var(--ac-text);
  border: 1px solid var(--ac-border-soft); border-radius: var(--ac-radius-card);
  box-shadow: var(--ac-shadow-1);
}
.ac-card--flat { box-shadow: none; }
.ac-card--muted { background: var(--ac-surface-2); box-shadow: none; }
.ac-card__header {
  display: flex; align-items: center; gap: var(--ac-space-sm);
  min-height: calc(var(--ac-row-h) + var(--ac-space-xs));
  padding: var(--ac-space-xs) var(--ac-space-ms);
  border-bottom: 1px solid var(--ac-border-soft);
}
.ac-card__header > .ac-media { flex: 1 1 auto; min-width: 0; align-items: center; }
.ac-card__title {
  flex: 1 1 auto; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: var(--ac-space-sm);
  font-size: var(--ac-font-size-md); font-weight: var(--ac-weight-bold); line-height: var(--ac-line-height-tight);
}
.ac-card__link { color: inherit; }
.ac-card__link:hover { color: var(--ac-link-hover); }
.ac-card__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-space-xs); flex: 0 0 auto; }
.ac-card__body { padding: var(--ac-space-ms); min-width: 0; }
.ac-card__body--flush { padding: 0; }
.ac-card__header + .ac-card__body--flush > .ac-table:first-child thead th { border-top: 0; }
.ac-card__footer {
  padding: var(--ac-space-sm) var(--ac-space-ms); border-top: 1px solid var(--ac-border-soft);
  font-size: var(--ac-font-size-sm); text-align: center;
}
.ac-card__footer-link { display: block; }
@media (max-width: 599px) {
  .ac-card__header { flex-wrap: wrap; }
}

/* ==========================================================================
   AgentCSS 06 表
   数字は右揃え・等幅（th.is-num / td.is-num）。横に長い表は ac-table-wrap で横スクロール
   スマホでカードの並びにするときは ac-table--cards と td[data-label]
   ========================================================================== */
.ac-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ac-table { width: 100%; border-collapse: collapse; background: var(--ac-surface); font-size: inherit; }
.ac-table th, .ac-table td {
  height: var(--ac-row-h); padding: var(--ac-space-2xs) var(--ac-space-ms);
  border-bottom: 1px solid var(--ac-border-soft);
  text-align: left; vertical-align: middle;
}
.ac-table thead th, .ac-table > tr:first-child > th {
  height: auto; padding-top: var(--ac-space-xs); padding-bottom: var(--ac-space-xs);
  background: var(--ac-surface-2); color: var(--ac-muted);
  font-size: var(--ac-font-size-sm); font-weight: var(--ac-weight-normal); white-space: nowrap;
  border-bottom: 1px solid var(--ac-border);
}
.ac-table tbody th { font-weight: var(--ac-weight-normal); }
.ac-table tbody tr:hover > td, .ac-table tbody tr:hover > th { background: var(--ac-surface-2); }
.ac-table--no-hover tbody tr:hover > td, .ac-table--no-hover tbody tr:hover > th { background: transparent; }
.ac-table tbody tr:last-child > td, .ac-table tbody tr:last-child > th { border-bottom: 0; }
.ac-table tfoot td, .ac-table tfoot th { font-weight: var(--ac-weight-bold); border-top: 1px solid var(--ac-border); border-bottom: 0; }
.ac-table td.is-num, .ac-table .ac-num { font-family: var(--ac-font-family-num); }
.ac-table th.is-num, .ac-table td.is-num, .ac-table .ac-num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.ac-table--compact th, .ac-table--compact td { height: calc(var(--ac-row-h) - var(--ac-space-sm)); padding-left: var(--ac-space-sm); padding-right: var(--ac-space-sm); }
.ac-table--striped tbody tr:nth-child(even) > td, .ac-table--striped tbody tr:nth-child(even) > th { background: var(--ac-surface-2); }
.ac-table--fixed { table-layout: fixed; }
.ac-table--bordered th, .ac-table--bordered td { border: 1px solid var(--ac-border-soft); }
.ac-table--top td, .ac-table--top th, .ac-table td.is-top { vertical-align: top; padding-top: var(--ac-space-xs); padding-bottom: var(--ac-space-xs); }
.ac-table tr.is-selected > td, .ac-table tr.is-selected > th { background: var(--ac-brand-soft); }

/* 並び替えのできる見出し */
.ac-th-action { display: flex; align-items: center; gap: var(--ac-space-xs); width: 100%; color: inherit; text-decoration: none; }
.ac-table th.is-num .ac-th-action { justify-content: flex-end; }
.ac-th-action:hover { color: var(--ac-text); text-decoration: none; }
.ac-sortable .ac-sort-icon { width: var(--ac-size-icon-xs); height: var(--ac-size-icon-xs); opacity: 0; transition: opacity var(--ac-motion-fast); }
.ac-sortable:hover .ac-sort-icon, .ac-sortable.is-sorted .ac-sort-icon { opacity: 1; }
.ac-sortable.is-sorted { color: var(--ac-text); }

/* スマホ: 表をカードの並びに */
@media (max-width: 599px) {
  .ac-table--cards, .ac-table--cards > tbody { display: block; width: 100%; }
  .ac-table--cards > thead { display: none; }
  .ac-table--cards > tbody > tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ac-space-xs) var(--ac-space-ms);
    padding: var(--ac-space-sm) var(--ac-space-ms); border-bottom: 1px solid var(--ac-border-soft);
  }
  .ac-table--cards > tbody > tr > td, .ac-table--cards > tbody > tr > th {
    display: block; height: auto; padding: 0; border: 0; white-space: normal; min-width: 0; text-align: left;
  }
  .ac-table--cards td[data-label]::before, .ac-table--cards th[data-label]::before {
    content: attr(data-label); display: block; font-size: var(--ac-font-size-xs); color: var(--ac-muted);
  }
  .ac-table--cards .is-title, .ac-table--cards td:first-child { grid-column: 1 / -1; font-weight: var(--ac-weight-bold); }
  .ac-table--cards .is-title::before, .ac-table--cards td:first-child::before { display: none; }
}

/* ==========================================================================
   AgentCSS 07 表示（バッジ・タグ・アバター・KPI・0 件・進み具合・読み込み中・アイコン）
   色は意味があるときだけ。状態の色（赤・黄・緑）は会社の色に関係なく固定
   ========================================================================== */
.ac-badge {
  display: inline-flex; align-items: center; gap: var(--ac-space-2xs); max-width: 100%;
  padding: 0 calc(var(--ac-space-xs) + var(--ac-space-2xs)); border-radius: var(--ac-radius-sm);
  background: var(--ac-neutral-bg); color: var(--ac-neutral-text);
  font-size: var(--ac-font-size-sm); font-weight: var(--ac-weight-normal); line-height: 1.6;
  white-space: nowrap; vertical-align: middle;
}
.ac-badge + .ac-badge { margin-left: var(--ac-space-2xs); }
.ac-badge--info { background: var(--ac-info-bg); color: var(--ac-info-text); }
.ac-badge--success { background: var(--ac-success-bg); color: var(--ac-success-text); }
.ac-badge--warning { background: var(--ac-warning-bg); color: var(--ac-warning-text); }
.ac-badge--danger { background: var(--ac-danger-bg); color: var(--ac-danger-text); }
.ac-badge--neutral { background: var(--ac-neutral-bg); color: var(--ac-neutral-text); }
.ac-badge--brand { background: var(--ac-brand-soft); color: var(--ac-brand-text); }
.ac-badge--accent { background: var(--ac-accent-soft); color: var(--ac-accent-text); }
.ac-badge--solid.ac-badge--accent { background: var(--ac-accent); color: var(--ac-accent-contrast); }
.ac-badge--solid.ac-badge--success { background: var(--ac-success); color: var(--ac-text-inverse); }
.ac-badge--solid.ac-badge--danger { background: var(--ac-danger); color: var(--ac-text-inverse); }
.ac-badge--solid.ac-badge--info { background: var(--ac-info); color: var(--ac-text-inverse); }
.ac-badge .ac-icon, .ac-badge svg { width: var(--ac-size-icon-xs); height: var(--ac-size-icon-xs); }

.ac-tag {
  display: inline-flex; align-items: center; gap: var(--ac-space-xs); max-width: 100%;
  padding: 0 var(--ac-space-sm); min-height: calc(var(--ac-control-sm-h) - var(--ac-space-xs));
  border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md); background: var(--ac-surface);
  color: var(--ac-text-2); font-size: var(--ac-font-size-sm); white-space: nowrap;
}
a.ac-tag:hover { border-color: var(--ac-muted); text-decoration: none; color: var(--ac-text); }
.ac-tag.is-active { border-color: var(--ac-brand); background: var(--ac-brand-soft); color: var(--ac-brand-text); }
.ac-tag__remove { display: inline-flex; padding: 0; border: 0; background: none; color: var(--ac-muted); cursor: pointer; }

/* アバター（顔写真か頭文字） */
.ac-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; overflow: hidden; vertical-align: middle;
  border-radius: var(--ac-radius-round); background: var(--ac-brand-soft); color: var(--ac-brand-text);
  font-size: var(--ac-font-size-sm); font-weight: var(--ac-weight-bold); line-height: 1;
}
.ac-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ac-avatar--xs { width: 20px; height: 20px; font-size: var(--ac-font-size-2xs); }
.ac-avatar--sm { width: 24px; height: 24px; font-size: var(--ac-font-size-xs); }
.ac-avatar--md { width: 32px; height: 32px; }
.ac-avatar--lg { width: 48px; height: 48px; font-size: var(--ac-font-size-lg); }
.ac-avatar__initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 0; text-decoration: none; color: inherit; background: inherit; }

/* アイコンの大きさ（Lucide の svg に付ける） */
.ac-icon { display: inline-block; width: var(--ac-size-icon-md); height: var(--ac-size-icon-md); flex-shrink: 0; vertical-align: middle; }
.ac-icon--xs { width: 16px; height: 16px; }
.ac-icon--sm { width: 24px; height: 24px; }
.ac-icon--md { width: 32px; height: 32px; }
.ac-icon--lg { width: 48px; height: 48px; }
.ac-icon--selected { color: var(--ac-brand); }

/* 数字のまとめ（KPI） */
.ac-kpi {
  display: flex; flex-direction: column; gap: var(--ac-space-2xs); min-width: 0;
  padding: var(--ac-space-ms) var(--ac-space-md);
  background: var(--ac-surface); border: 1px solid var(--ac-border-soft); border-radius: var(--ac-radius-card);
  box-shadow: var(--ac-shadow-1); color: var(--ac-text);
}
a.ac-kpi:hover { border-color: var(--ac-border-strong); text-decoration: none; color: var(--ac-text); }
.ac-kpi__label { font-size: var(--ac-font-size-sm); color: var(--ac-muted); }
.ac-kpi__value { font-family: var(--ac-font-family-num); font-size: var(--ac-font-size-2xl); font-weight: var(--ac-weight-bold); line-height: var(--ac-line-height-tight); font-variant-numeric: tabular-nums; }
.ac-kpi__value small { font-size: var(--ac-font-size-sm); font-weight: var(--ac-weight-normal); color: var(--ac-muted); margin-left: var(--ac-space-2xs); }
.ac-kpi__delta { font-size: var(--ac-font-size-sm); color: var(--ac-muted); }
.ac-kpi__delta.is-up { color: var(--ac-success-text); }
.ac-kpi__delta.is-down { color: var(--ac-danger-text); }

/* 0 件の案内 */
.ac-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--ac-space-xs);
  padding: var(--ac-space-xl) var(--ac-space-md); text-align: center; color: var(--ac-muted);
}
.ac-empty__icon { width: var(--ac-size-icon-xl); height: var(--ac-size-icon-xl); color: var(--ac-subtle); }
.ac-empty__title { color: var(--ac-text); font-weight: var(--ac-weight-bold); }
.ac-empty__actions { margin-top: var(--ac-space-xs); display: flex; gap: var(--ac-space-xs); flex-wrap: wrap; justify-content: center; }

/* 進み具合 */
.ac-progress { position: relative; height: 8px; overflow: hidden; border-radius: var(--ac-radius-sm); background: var(--ac-surface-3); }
.ac-progress__bar { display: block; height: 100%; max-width: 100%; background: var(--ac-brand); border-radius: var(--ac-radius-sm); transition: width var(--ac-motion-slow) var(--ac-motion-ease); }
.ac-progress--success .ac-progress__bar { background: var(--ac-success); }
.ac-progress--warning .ac-progress__bar { background: var(--ac-warning); }
.ac-progress--danger .ac-progress__bar { background: var(--ac-danger); }
.ac-progress--sm { height: 4px; }

/* 読み込み中 */
.ac-spinner {
  display: inline-block; width: 24px; height: 24px; vertical-align: middle;
  border: 2px solid var(--ac-border); border-top-color: var(--ac-brand); border-radius: var(--ac-radius-round);
  animation: ac-spin 0.8s linear infinite;
}
.ac-spinner--center { position: absolute; inset: 0; margin: auto; }
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* ・で区切った横並び */
.ac-inline-list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.ac-inline-list > li + li::before { content: "・"; color: var(--ac-subtle); }

/* ロゴ（マークは jinja の logo マクロか docs の SVG を使う） */
.ac-logo { display: inline-flex; align-items: center; gap: var(--ac-space-sm); color: var(--ac-logo-ink); font-weight: var(--ac-weight-bold); text-decoration: none; white-space: nowrap; }
.ac-logo:hover { text-decoration: none; color: var(--ac-logo-ink); }
.ac-logo__mark { width: var(--ac-logo-size, 24px); height: var(--ac-logo-size, 24px); flex: none; }
.ac-logo__j { fill: none; stroke: var(--ac-logo-ink); }
.ac-logo__spark { fill: var(--ac-logo-spark); }
.ac-logo__spark2 { fill: var(--ac-logo-spark); fill-opacity: 0.6; }
.ac-logo__ai { color: var(--ac-logo-spark); }
.ac-logo--inverse { --ac-logo-ink: var(--ac-logo-ink-inverse); --ac-logo-spark: var(--ac-logo-spark-inverse); }

/* 分類の色（業務領域ごと。アイコンの地・タイル・見出しの印に使う）。--ac-cat を差し替えて使う */
.ac-cat { --ac-cat: var(--ac-cat-other); }
.ac-cat--sales { --ac-cat: var(--ac-cat-sales); }
.ac-cat--money { --ac-cat: var(--ac-cat-money); }
.ac-cat--people { --ac-cat: var(--ac-cat-people); }
.ac-cat--team { --ac-cat: var(--ac-cat-team); }
.ac-cat--base { --ac-cat: var(--ac-cat-base); }
.ac-cat-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--ac-size-icon-xl); height: var(--ac-size-icon-xl); border-radius: var(--ac-radius-md);
  background: var(--ac-cat, var(--ac-cat-other)); color: var(--ac-text-inverse);
}
.ac-cat-tile svg { width: var(--ac-size-icon-sm); height: var(--ac-size-icon-sm); }
.ac-text-accent { color: var(--ac-accent-text); }

/* ==========================================================================
   AgentCSS 08 通知（帯のお知らせ・トースト）
   ========================================================================== */
.ac-alert {
  display: flex; align-items: flex-start; gap: var(--ac-space-sm); min-width: 0;
  padding: var(--ac-space-sm) var(--ac-space-ms);
  border: 1px solid var(--ac-info-border); border-radius: var(--ac-radius-md);
  background: var(--ac-info-bg); color: var(--ac-info-text); text-align: left;
}
.ac-alert h2, .ac-alert h3 { font-size: inherit; font-weight: var(--ac-weight-bold); }
.ac-alert a { color: inherit; text-decoration: underline; }
.ac-alert > svg, .ac-alert__icon { flex: none; width: var(--ac-size-icon-md); height: var(--ac-size-icon-md); margin-top: var(--ac-space-2xs); }
.ac-alert__body { flex: 1 1 auto; min-width: 0; }
.ac-alert__actions { margin-left: auto; display: flex; gap: var(--ac-space-xs); flex: none; }
.ac-alert--info { border-color: var(--ac-info-border); background: var(--ac-info-bg); color: var(--ac-info-text); }
.ac-alert--success { border-color: var(--ac-success-border); background: var(--ac-success-bg); color: var(--ac-success-text); }
.ac-alert--warning { border-color: var(--ac-warning-border); background: var(--ac-warning-bg); color: var(--ac-warning-text); }
.ac-alert--danger { border-color: var(--ac-danger-border); background: var(--ac-danger-bg); color: var(--ac-danger-text); }
.ac-alert--neutral { border-color: var(--ac-neutral-border); background: var(--ac-neutral-bg); color: var(--ac-neutral-text); }

/* トースト（画面の上に一時的に出る知らせ） */
.ac-toast-region {
  position: fixed; z-index: var(--ac-z-toast); top: var(--ac-space-md); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--ac-space-sm);
  width: max-content; max-width: calc(100vw - var(--ac-space-xl)); pointer-events: none;
}
.ac-toast {
  display: flex; align-items: flex-start; gap: var(--ac-space-sm);
  min-width: min(22rem, calc(100vw - var(--ac-space-xl))); max-width: 40rem;
  padding: var(--ac-space-sm) var(--ac-space-sm) var(--ac-space-sm) var(--ac-space-md);
  border-radius: var(--ac-radius-md); box-shadow: var(--ac-shadow-2);
  background: var(--ac-surface-inverse); color: var(--ac-text-inverse);
  pointer-events: auto; animation: ac-toast-in var(--ac-motion-slow) var(--ac-motion-ease);
}
.ac-toast--info { background: var(--ac-info); color: var(--ac-text-inverse); }
.ac-toast--success { background: var(--ac-success); color: var(--ac-text-inverse); }
.ac-toast--danger { background: var(--ac-danger); color: var(--ac-text-inverse); }
.ac-toast--warning { background: var(--ac-warning-bg); color: var(--ac-warning-text); border: 1px solid var(--ac-warning-border); }
.ac-toast__body { flex: 1 1 auto; min-width: 0; align-self: center; }
.ac-toast__body h2, .ac-toast__body .ac-h3 { font-size: var(--ac-font-size-md); font-weight: var(--ac-weight-bold); color: inherit; line-height: var(--ac-line-height); }
.ac-toast > svg { margin-top: var(--ac-space-2xs); }
.ac-toast__close { margin-left: auto; flex: none; }
.ac-toast .ac-btn--icon, .ac-toast .ac-btn--inverse { color: inherit; opacity: 0.85; }
.ac-toast .ac-btn--icon:hover { opacity: 1; background: var(--ac-on-dark-hover); color: inherit; }
.ac-toast--warning .ac-btn--icon:hover { background: var(--ac-hover); }
@keyframes ac-toast-in { from { transform: translateY(calc(var(--ac-space-sm) * -1)); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   AgentCSS 09 ナビ（タブ・進捗の段階・パンくず・ページ送り・メニュー・ドロップダウン）
   ========================================================================== */

/* ---------- タブ ---------- */
.ac-tabs { min-width: 0; }
.ac-tabs__list {
  display: flex; align-items: flex-end; gap: var(--ac-space-2xs); margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--ac-border); overflow-x: auto; scrollbar-width: none;
}
.ac-tabs__list::-webkit-scrollbar { display: none; }
.ac-tabs__item { flex: 0 0 auto; display: flex; }
.ac-tabs__tab {
  display: inline-flex; align-items: center; gap: var(--ac-space-xs);
  min-height: var(--ac-control-h); padding: var(--ac-space-xs) var(--ac-space-ms);
  margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--ac-text-2); font: inherit; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color var(--ac-motion-fast), border-color var(--ac-motion-fast);
}
.ac-tabs__tab:hover { color: var(--ac-text); text-decoration: none; border-bottom-color: var(--ac-border-strong); }
.ac-tabs__tab.is-active, .ac-tabs__item.is-active > .ac-tabs__tab, .ac-tabs__tab[aria-selected="true"] {
  color: var(--ac-text); font-weight: var(--ac-weight-bold); border-bottom-color: var(--ac-brand);
}
.ac-tabs__panel { padding-top: var(--ac-space-ms); min-width: 0; }
.ac-tabs__panel[hidden], .ac-tabs__panel.ac-hide { display: none; }
@media (max-width: 1023px) { .ac-tabs__tab { min-height: var(--ac-touch); } }

/* ---------- 進捗の段階（パス） ---------- */
/* 簡単な形: <ol class="ac-path"><li class="ac-path__step is-done">見積</li><li class="ac-path__step is-current">交渉</li>…</ol> */
.ac-path { display: flex; align-items: center; gap: var(--ac-space-ms); min-width: 0; margin: 0; padding: 0; list-style: none; }
.ac-path__track, .ac-path__scroller-wrap { display: flex; align-items: center; gap: var(--ac-space-ms); flex: 1 1 auto; min-width: 0; }
.ac-path__scroller, .ac-path__scroller-inner { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.ac-path__list { display: flex; gap: var(--ac-space-2xs); margin: 0; padding: 0; list-style: none; min-width: 0; }
.ac-path__step {
  --ac-path-notch: 8px;
  position: relative; flex: 1 1 0; min-width: 4.5rem;
  display: flex; align-items: center; justify-content: center; min-height: var(--ac-control-h);
  padding: 0 calc(var(--ac-space-sm) + var(--ac-path-notch));
  background: var(--ac-surface-3); color: var(--ac-text-2); font-size: var(--ac-font-size); text-align: center;
  clip-path: polygon(0 0, calc(100% - var(--ac-path-notch)) 0, 100% 50%, calc(100% - var(--ac-path-notch)) 100%, 0 100%, var(--ac-path-notch) 50%);
  transition: background-color var(--ac-motion-fast);
}
.ac-path__step:first-child { clip-path: polygon(0 0, calc(100% - var(--ac-path-notch)) 0, 100% 50%, calc(100% - var(--ac-path-notch)) 100%, 0 100%); border-radius: var(--ac-radius-md) 0 0 var(--ac-radius-md); }
.ac-path__step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--ac-path-notch) 50%); border-radius: 0 var(--ac-radius-md) var(--ac-radius-md) 0; }
.ac-path__step:only-child { clip-path: none; border-radius: var(--ac-radius-md); }
.ac-path__step:hover { background: var(--ac-border); }
.ac-path__step.is-done { background: var(--ac-brand-soft-2); color: var(--ac-brand-text); }
.ac-path__step.is-current { background: var(--ac-brand); color: var(--ac-brand-contrast); font-weight: var(--ac-weight-bold); }
.ac-path__step.is-active:not(.is-current) { background: var(--ac-brand-2); color: var(--ac-brand-2-contrast); }
.ac-path__step.is-current.is-won { background: var(--ac-success); color: var(--ac-text-inverse); }
.ac-path__step.is-current.is-lost { background: var(--ac-danger); color: var(--ac-text-inverse); }
.ac-path__link {
  display: flex; align-items: center; justify-content: center; gap: var(--ac-space-xs);
  width: 100%; min-height: inherit; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.ac-path__link:hover { color: inherit; text-decoration: none; }
.ac-path__link:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: -4px; }
.ac-path__title { overflow: hidden; text-overflow: ellipsis; }
.ac-path__stage { display: none; align-items: center; }
.ac-path__step.is-done .ac-path__stage { display: inline-flex; }
.ac-path__action { display: flex; align-items: center; gap: var(--ac-space-xs); flex: 0 0 auto; }
.ac-path__mark { white-space: nowrap; }
@media (max-width: 599px) {
  .ac-path, .ac-path__track { flex-wrap: wrap; }
  .ac-path__scroller-wrap { flex: 1 1 100%; }
  .ac-path__list { flex-wrap: nowrap; }
  .ac-path__step { flex: 0 0 auto; }
  .ac-path__action { flex: 1 1 100%; }
  .ac-path__action > .ac-btn { flex: 1 1 auto; }
}

/* ---------- パンくず ---------- */
.ac-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--ac-font-size-sm); color: var(--ac-muted); }
.ac-breadcrumb > li, .ac-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--ac-space-xs); }
.ac-breadcrumb > li + li::before, .ac-breadcrumb__item + .ac-breadcrumb__item::before { content: "/"; color: var(--ac-subtle); }
.ac-breadcrumb a { color: var(--ac-muted); }
.ac-breadcrumb a:hover { color: var(--ac-link-hover); }

/* ---------- ページ送り ---------- */
.ac-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-space-xs); margin: 0; padding: 0; list-style: none; }
.ac-pagination__item, .ac-pagination > a, .ac-pagination > span:not(.ac-pagination__info) {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--ac-control-h); min-height: var(--ac-control-h);
  padding: 0 var(--ac-space-sm); border: 1px solid var(--ac-border-strong); border-radius: var(--ac-radius-md);
  background: var(--ac-surface); color: var(--ac-text); text-decoration: none;
}
a.ac-pagination__item:hover, .ac-pagination > a:hover { border-color: var(--ac-muted); text-decoration: none; }
.ac-pagination .is-current { background: var(--ac-brand); border-color: var(--ac-brand); color: var(--ac-brand-contrast); font-weight: var(--ac-weight-bold); }
.ac-pagination .is-disabled { pointer-events: none; color: var(--ac-subtle); background: var(--ac-surface-3); }
.ac-pagination__info { color: var(--ac-muted); font-size: var(--ac-font-size-sm); margin: 0 var(--ac-space-xs); }

/* ---------- メニュー ---------- */
.ac-menu { margin: 0; padding: var(--ac-space-xs) 0; list-style: none; }
.ac-menu__item { display: block; }
.ac-menu__item > a, .ac-menu__item > button, .ac-menu__item > form > button, .ac-menu__link {
  display: flex; align-items: center; gap: var(--ac-space-sm); width: 100%;
  min-height: var(--ac-control-h); padding: var(--ac-space-xs) var(--ac-space-ms);
  border: 0; background: none; color: var(--ac-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.ac-menu__item > a:hover, .ac-menu__item > button:hover, .ac-menu__item > form > button:hover, .ac-menu__link:hover,
.ac-menu__item > a:focus-visible, .ac-menu__item > button:focus-visible { background: var(--ac-surface-3); color: var(--ac-text); text-decoration: none; outline-offset: -2px; }
.ac-menu__item.is-active > a, .ac-menu__item > a[aria-current="page"] { color: var(--ac-brand-text); background: var(--ac-brand-soft); font-weight: var(--ac-weight-bold); }
.ac-menu__header { padding: var(--ac-space-xs) var(--ac-space-ms); font-size: var(--ac-font-size-sm); font-weight: var(--ac-weight-bold); color: var(--ac-muted); }
.ac-menu__divider { height: 0; margin: var(--ac-space-xs) 0; border-top: 1px solid var(--ac-border-soft); }
@media (max-width: 1023px) { .ac-menu__item > a, .ac-menu__item > button, .ac-menu__item > form > button, .ac-menu__link { min-height: var(--ac-touch); } }

/* ---------- ドロップダウン ---------- */
.ac-dropdown { position: relative; display: inline-block; }
.ac-dropdown__menu {
  position: absolute; z-index: var(--ac-z-dropdown); top: 100%; left: 0; display: none;
  min-width: 12rem; max-width: min(24rem, calc(100vw - var(--ac-space-md))); margin-top: var(--ac-space-2xs);
  background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius-md);
  box-shadow: var(--ac-shadow-2); text-align: left;
}
.ac-dropdown.is-open > .ac-dropdown__menu { display: block; animation: ac-pop-in var(--ac-motion-fast) var(--ac-motion-ease); }
.ac-dropdown__menu--right { left: auto; right: 0; }
.ac-dropdown__menu--left { left: 0; right: auto; }
.ac-dropdown__menu--up { top: auto; bottom: 100%; margin: 0 0 var(--ac-space-2xs); }
.ac-dropdown__menu--fluid { width: 100%; min-width: 100%; max-width: none; }
.ac-dropdown__menu--scroll { max-height: 18rem; overflow-y: auto; }
@keyframes ac-pop-in { from { opacity: 0; transform: translateY(calc(var(--ac-space-2xs) * -1)); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   AgentCSS 10 重ね（ダイアログ・横から出る枠・ツールチップ・開閉できるセクション）
   浮かぶものは 2 段目の影
   ========================================================================== */
.ac-backdrop { position: fixed; inset: 0; z-index: calc(var(--ac-z-modal) - 1); display: none; background: var(--ac-overlay); }
.ac-backdrop.is-open { display: block; animation: ac-fade-in var(--ac-motion-base) var(--ac-motion-ease); }

.ac-modal {
  position: fixed; inset: 0; z-index: var(--ac-z-modal); display: none;
  align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: var(--ac-space-xl) var(--ac-space-md);
}
.ac-modal.is-open { display: flex; }
.ac-modal:not(:has(+ .ac-backdrop)).is-open { background: var(--ac-overlay); }
.ac-modal__dialog {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 40rem; margin: auto;
  max-height: calc(100vh - var(--ac-space-xl) * 2); min-height: 0;
  background: var(--ac-surface); color: var(--ac-text);
  border-radius: var(--ac-radius-card); box-shadow: var(--ac-shadow-2);
  animation: ac-pop-in var(--ac-motion-slow) var(--ac-motion-ease);
}
.ac-modal--prompt .ac-modal__dialog, .ac-modal--sm .ac-modal__dialog { max-width: 30rem; }
.ac-modal--md .ac-modal__dialog { max-width: 60rem; }
.ac-modal--lg .ac-modal__dialog { max-width: 80rem; }
.ac-modal__header {
  display: flex; align-items: center; gap: var(--ac-space-sm); flex: none;
  padding: var(--ac-space-ms) calc(var(--ac-space-md) + var(--ac-control-h)) var(--ac-space-ms) var(--ac-space-md);
  border-bottom: 1px solid var(--ac-border-soft);
}
.ac-modal__header h2, .ac-modal__title { margin: 0; font-size: var(--ac-font-size-lg); font-weight: var(--ac-weight-bold); }
.ac-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--ac-space-md); }
.ac-modal__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ac-space-sm); flex: none;
  padding: var(--ac-space-sm) var(--ac-space-md);
  border-top: 1px solid var(--ac-border-soft); background: var(--ac-surface-2);
  border-radius: 0 0 var(--ac-radius-card) var(--ac-radius-card);
}
.ac-modal__close { position: absolute; top: var(--ac-space-sm); right: var(--ac-space-sm); z-index: 1; }
@media (max-width: 599px) {
  /* スマホ: 入力のダイアログは全画面。確認のダイアログ（--prompt・--sm）は中央の小さな枠のまま */
  .ac-modal:not(.ac-modal--prompt):not(.ac-modal--sm) { padding: 0; }
  .ac-modal:not(.ac-modal--prompt):not(.ac-modal--sm) .ac-modal__dialog { max-width: none; max-height: none; min-height: 100%; margin: 0; border-radius: 0; }
  .ac-modal:not(.ac-modal--prompt):not(.ac-modal--sm) .ac-modal__footer { border-radius: 0; padding-bottom: calc(var(--ac-space-sm) + env(safe-area-inset-bottom)); }
  .ac-modal--prompt, .ac-modal--sm { padding: var(--ac-space-md); align-items: center; }
  .ac-modal__footer > .ac-btn, .ac-modal__footer > form > .ac-btn { flex: 1 1 auto; }
  .ac-modal__footer > form { display: flex; flex: 1 1 auto; gap: var(--ac-space-sm); }
}
@keyframes ac-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 横から出る枠 */
.ac-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--ac-z-drawer);
  display: flex; flex-direction: column; width: min(28rem, 100vw);
  background: var(--ac-surface); box-shadow: var(--ac-shadow-2);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--ac-motion-slow) var(--ac-motion-ease), visibility 0s linear var(--ac-motion-slow);
}
.ac-drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.ac-drawer.is-open { transform: none; visibility: visible; transition: transform var(--ac-motion-slow) var(--ac-motion-ease); }
.ac-drawer__header { display: flex; align-items: center; gap: var(--ac-space-sm); padding: var(--ac-space-ms) var(--ac-space-md); border-bottom: 1px solid var(--ac-border-soft); font-weight: var(--ac-weight-bold); }
.ac-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--ac-space-md); }
.ac-drawer__footer { padding: var(--ac-space-sm) var(--ac-space-md); border-top: 1px solid var(--ac-border-soft); display: flex; gap: var(--ac-space-sm); justify-content: flex-end; }

/* ツールチップ（data-ac-tooltip="…" を付けると JS が出す。CSS だけなら .ac-tooltip を置く） */
.ac-tooltip {
  position: absolute; z-index: var(--ac-z-tooltip); max-width: 20rem;
  padding: var(--ac-space-xs) var(--ac-space-sm); border-radius: var(--ac-radius-md);
  background: var(--ac-surface-inverse); color: var(--ac-text-inverse); box-shadow: var(--ac-shadow-2);
  font-size: var(--ac-font-size-sm); line-height: var(--ac-line-height-tight); pointer-events: none;
  animation: ac-fade-in var(--ac-motion-fast) var(--ac-motion-ease);
}

/* 開閉できるセクション */
.ac-collapse { min-width: 0; }
.ac-collapse + .ac-collapse { margin-top: var(--ac-space-xs); }
.ac-collapse__title { margin: 0; font-size: inherit; }
.ac-collapse__toggle {
  display: flex; align-items: center; gap: var(--ac-space-xs); width: 100%; min-height: var(--ac-control-h);
  padding: var(--ac-space-xs) var(--ac-space-sm); border: 0; border-radius: var(--ac-radius-md);
  background: var(--ac-surface-3); color: var(--ac-text); font: inherit; font-weight: var(--ac-weight-bold); text-align: left; cursor: pointer;
}
.ac-collapse__toggle:hover { background: var(--ac-border-soft); }
.ac-collapse__icon { width: var(--ac-size-icon-sm); height: var(--ac-size-icon-sm); flex: none; transition: transform var(--ac-motion-base) var(--ac-motion-ease); }
.ac-collapse:not(.is-open) .ac-collapse__icon { transform: rotate(-90deg); }
.ac-collapse:not(.is-open) > .ac-collapse__body { display: none; }
.ac-collapse__body { padding: var(--ac-space-sm) 0; }

/* ==========================================================================
   AgentCSS 11 図（時系列・カレンダー・リスト・ラベルと値）
   ========================================================================== */
.ac-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.ac-timeline__item { position: relative; padding: 0 0 var(--ac-space-ms) var(--ac-space-lg); min-width: 0; }
.ac-timeline__item::before {
  content: ""; position: absolute; left: 5px; top: var(--ac-space-md); bottom: 0; width: 2px; background: var(--ac-border-soft);
}
.ac-timeline__item:last-child::before { display: none; }
.ac-timeline__item::after {
  content: ""; position: absolute; left: 0; top: var(--ac-space-xs); width: 12px; height: 12px;
  border: 2px solid var(--ac-brand); border-radius: var(--ac-radius-round); background: var(--ac-surface);
}
.ac-timeline__item.is-done::after { background: var(--ac-brand); }
.ac-timeline__item.is-warning::after { border-color: var(--ac-warning); }
.ac-timeline__item.is-danger::after { border-color: var(--ac-danger); }
.ac-timeline__time { font-size: var(--ac-font-size-sm); color: var(--ac-muted); }
.ac-timeline__title { font-weight: var(--ac-weight-bold); }
.ac-timeline__body { margin-top: var(--ac-space-2xs); color: var(--ac-text-2); }

/* カレンダー（7 列） */
.ac-calendar {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--ac-border); border-radius: var(--ac-radius-card); overflow: hidden; background: var(--ac-surface);
}
.ac-calendar__dow {
  padding: var(--ac-space-xs); text-align: center; font-size: var(--ac-font-size-sm); color: var(--ac-muted);
  background: var(--ac-surface-2); border-bottom: 1px solid var(--ac-border);
}
.ac-calendar__day {
  min-width: 0; min-height: calc(var(--ac-row-h) * 2.25); padding: var(--ac-space-xs);
  border-right: 1px solid var(--ac-border-soft); border-bottom: 1px solid var(--ac-border-soft);
  font-size: var(--ac-font-size-sm); font-variant-numeric: tabular-nums;
}
.ac-calendar__day:nth-child(7n) { border-right: 0; }
.ac-calendar__num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; height: 1.75em; border-radius: var(--ac-radius-sm); font-weight: var(--ac-weight-bold); }
.ac-calendar__day.is-holiday { background: var(--ac-surface-2); }
.ac-calendar__day.is-holiday .ac-calendar__num, .ac-calendar__dow.is-holiday { color: var(--ac-danger-text); }
.ac-calendar__day.is-out { color: var(--ac-subtle); background: var(--ac-surface-2); }
.ac-calendar__day.is-today .ac-calendar__num { background: var(--ac-brand); color: var(--ac-brand-contrast); }
.ac-calendar__day.is-selected { box-shadow: inset 0 0 0 2px var(--ac-focus); }
.ac-calendar__event {
  display: block; margin-top: var(--ac-space-2xs); padding: 0 var(--ac-space-xs); border-radius: var(--ac-radius-sm);
  background: var(--ac-brand-soft); color: var(--ac-brand-text); font-size: var(--ac-font-size-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 599px) { .ac-calendar__day { min-height: calc(var(--ac-row-h) * 1.25); padding: var(--ac-space-2xs); text-align: center; } .ac-calendar__event { display: none; } }

/* リスト（1 行ずつの並び） */
.ac-list { margin: 0; padding: 0; list-style: none; }
.ac-list__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ac-space-sm); min-width: 0;
  min-height: var(--ac-row-h); padding: var(--ac-space-xs) var(--ac-space-ms); border-bottom: 1px solid var(--ac-border-soft);
}
.ac-list__item:last-child { border-bottom: 0; }
a.ac-list__item { color: var(--ac-text); }
a.ac-list__item:hover { background: var(--ac-surface-2); text-decoration: none; }
.ac-list--flush > .ac-list__item { padding-left: 0; padding-right: 0; }
.ac-list__main { flex: 1 1 auto; min-width: 0; }
.ac-list__meta { flex: none; color: var(--ac-muted); font-size: var(--ac-font-size-sm); }

/* ラベルと値の 2 列 */
.ac-dl { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: var(--ac-space-xs) var(--ac-space-md); margin: 0; }
.ac-dl > dt { color: var(--ac-muted); font-size: var(--ac-font-size-sm); padding-top: var(--ac-space-2xs); }
.ac-dl > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ac-dl--wide { grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr); }
@media (max-width: 599px) {
  .ac-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ac-dl > dd { margin-bottom: var(--ac-space-sm); }
}

/* ==========================================================================
   AgentCSS 12 画面の外枠（上の帯・画面の下の版表示・スマホの下のタブ）
   ========================================================================== */

/* 上の帯（ヘッダー）: 地の色は --ac-header-bg。アプリの色の細い帯は ac-header--stripe */
.ac-header {
  display: flex; align-items: center; gap: var(--ac-space-md); min-height: var(--ac-size-topbar); padding: 0 var(--ac-space-md);
  background: var(--ac-header-bg); color: var(--ac-header-text); border-bottom: 1px solid var(--ac-header-border);
}
.ac-header a:not(.ac-btn) { color: inherit; }
.ac-header a:not(.ac-btn):hover { color: inherit; background: var(--ac-header-hover); text-decoration: none; }
.ac-header__muted { color: var(--ac-header-muted); }
.ac-header .ac-logo { --ac-logo-ink: var(--ac-header-logo-ink); --ac-logo-spark: var(--ac-header-logo-spark); }
.ac-header--stripe { border-top: 3px solid var(--ac-app-color); }

/* 画面の下: 版と推奨環境 */
.ac-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ac-space-2xs) var(--ac-space-md);
  margin-top: var(--ac-space-lg); padding: var(--ac-space-sm) 0;
  border-top: 1px solid var(--ac-border-soft);
  font-size: var(--ac-font-size-xs); color: var(--ac-muted); line-height: var(--ac-line-height-tight);
}
.ac-footer a { color: inherit; }
.ac-footer a:hover { color: var(--ac-link-hover); }
.ac-footer__item { display: inline-flex; align-items: center; gap: var(--ac-space-xs); white-space: nowrap; }
.ac-footer__item + .ac-footer__item::before { content: ""; width: 1px; height: 1em; background: var(--ac-border); margin-right: var(--ac-space-sm); }
.ac-footer__start { margin-right: auto; }
@media (max-width: 599px) {
  .ac-footer { justify-content: flex-start; }
  .ac-footer__item { white-space: normal; }
}

/* スマホの下のタブ（よく使う 4 つ＋その他） */
.ac-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--ac-z-sticky);
  display: none; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--ac-surface); border-top: 1px solid var(--ac-border);
}
.ac-bottom-nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ac-space-2xs);
  min-height: 52px; padding: var(--ac-space-2xs); color: var(--ac-muted); font-size: var(--ac-font-size-2xs); text-decoration: none;
  border: 0; background: none; font-family: inherit; cursor: pointer;
}
.ac-bottom-nav__item svg { width: var(--ac-size-icon-lg); height: var(--ac-size-icon-lg); }
.ac-bottom-nav__item:hover { color: var(--ac-text); text-decoration: none; }
.ac-bottom-nav__item.is-active, .ac-bottom-nav__item[aria-current="page"] { color: var(--ac-brand); font-weight: var(--ac-weight-bold); }
@media (max-width: 1023px) and (orientation: portrait), (max-width: 599px) {
  .ac-bottom-nav { display: grid; }
  .ac-has-bottom-nav { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   AgentCSS 13 ダークモードの仕上げ（トークンで表せない所だけ）
   data-theme="dark"、または data-theme="auto" で端末が暗い設定のとき
   ========================================================================== */
:root[data-theme="dark"] input.ac-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3AE' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
/* 写真・ロゴの画像は少しだけ暗くして、まぶしさを抑える（ac-img-keep で外せる） */
:root[data-theme="dark"] .ac-card img:not(.ac-img-keep), :root[data-theme="dark"] .ac-media img:not(.ac-img-keep) { filter: brightness(0.92); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] input.ac-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3AE' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  }
  :root[data-theme="auto"] .ac-card img:not(.ac-img-keep), :root[data-theme="auto"] .ac-media img:not(.ac-img-keep) { filter: brightness(0.92); }
}

/* ==========================================================================
   AgentCSS 99 補助（余白・表示の切り替え・読み上げ専用）
   余白は xs 4px / sm 8px / md 16px / lg 24px / xl 32px（2xs 2px、0）
   ========================================================================== */
.ac-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
.ac-show { display: block; }
.ac-hide { display: none !important; }
.ac-show-sm { display: none !important; }
@media (max-width: 599px) {
  .ac-hide-sm { display: none !important; }
  .ac-show-sm { display: revert !important; }
}
@media (min-width: 600px) and (max-width: 1023px) { .ac-hide-md { display: none !important; } }
@media (min-width: 1024px) { .ac-hide-lg { display: none !important; } }
@media print { .ac-no-print { display: none !important; } }

.ac-m-0 { margin: 0 !important; }
.ac-mt-0 { margin-top: 0 !important; } .ac-mb-0 { margin-bottom: 0 !important; }
.ac-ml-0 { margin-left: 0 !important; } .ac-mr-0 { margin-right: 0 !important; }
.ac-mt-2xs { margin-top: var(--ac-space-2xs) !important; } .ac-mt-xs { margin-top: var(--ac-space-xs) !important; }
.ac-mt-sm { margin-top: var(--ac-space-sm) !important; } .ac-mt-md { margin-top: var(--ac-space-md) !important; }
.ac-mt-lg { margin-top: var(--ac-space-lg) !important; } .ac-mt-xl { margin-top: var(--ac-space-xl) !important; }
.ac-mb-2xs { margin-bottom: var(--ac-space-2xs) !important; } .ac-mb-xs { margin-bottom: var(--ac-space-xs) !important; }
.ac-mb-sm { margin-bottom: var(--ac-space-sm) !important; } .ac-mb-md { margin-bottom: var(--ac-space-md) !important; }
.ac-mb-lg { margin-bottom: var(--ac-space-lg) !important; } .ac-mb-xl { margin-bottom: var(--ac-space-xl) !important; }
.ac-ml-xs { margin-left: var(--ac-space-xs) !important; } .ac-ml-sm { margin-left: var(--ac-space-sm) !important; }
.ac-ml-md { margin-left: var(--ac-space-md) !important; } .ac-ml-auto { margin-left: auto !important; }
.ac-mr-xs { margin-right: var(--ac-space-xs) !important; } .ac-mr-sm { margin-right: var(--ac-space-sm) !important; }
.ac-mr-md { margin-right: var(--ac-space-md) !important; }
.ac-my-xs { margin-top: var(--ac-space-xs) !important; margin-bottom: var(--ac-space-xs) !important; }
.ac-my-sm { margin-top: var(--ac-space-sm) !important; margin-bottom: var(--ac-space-sm) !important; }
.ac-my-md { margin-top: var(--ac-space-md) !important; margin-bottom: var(--ac-space-md) !important; }
.ac-my-lg { margin-top: var(--ac-space-lg) !important; margin-bottom: var(--ac-space-lg) !important; }
.ac-p-0 { padding: 0 !important; }
.ac-p-xs { padding: var(--ac-space-xs) !important; } .ac-p-sm { padding: var(--ac-space-sm) !important; }
.ac-p-md { padding: var(--ac-space-md) !important; } .ac-p-lg { padding: var(--ac-space-lg) !important; }
.ac-pt-xs { padding-top: var(--ac-space-xs) !important; } .ac-pt-sm { padding-top: var(--ac-space-sm) !important; } .ac-pt-md { padding-top: var(--ac-space-md) !important; }
.ac-pb-xs { padding-bottom: var(--ac-space-xs) !important; } .ac-pb-sm { padding-bottom: var(--ac-space-sm) !important; }
.ac-pb-md { padding-bottom: var(--ac-space-md) !important; } .ac-pb-lg { padding-bottom: var(--ac-space-lg) !important; }
.ac-px-sm { padding-left: var(--ac-space-sm) !important; padding-right: var(--ac-space-sm) !important; }
.ac-px-md { padding-left: var(--ac-space-md) !important; padding-right: var(--ac-space-md) !important; }
.ac-py-xs { padding-top: var(--ac-space-xs) !important; padding-bottom: var(--ac-space-xs) !important; }
.ac-py-sm { padding-top: var(--ac-space-sm) !important; padding-bottom: var(--ac-space-sm) !important; }
.ac-py-md { padding-top: var(--ac-space-md) !important; padding-bottom: var(--ac-space-md) !important; }
.ac-py-lg { padding-top: var(--ac-space-lg) !important; padding-bottom: var(--ac-space-lg) !important; }
.ac-gap-xs { gap: var(--ac-space-xs) !important; } .ac-gap-sm { gap: var(--ac-space-sm) !important; } .ac-gap-md { gap: var(--ac-space-md) !important; }