/*
  基幹システムシミュレーター — デザインシステム
  Apple HIG（Human Interface Guidelines）のWeb翻案。
  content over chrome / 淡い区切り線 / 十分な余白 / システムフォント / セマンティックカラー変数。
  light・dark 両対応、prefers-reduced-motion 尊重、AAコントラスト目標。
*/

/* ==========================================================================
   1. Design Tokens（CSS変数）
   ========================================================================== */

:root {
  /* --- タイポグラフィ --- */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px */
  --text-md: 1.0625rem;  /* 17px */
  --text-lg: 1.375rem;   /* 22px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.25rem;   /* 36px */

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* --- スペーシング（4pxグリッド） --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* --- 角丸・シャドウ --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);

  /* --- モーション --- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* --- ブランド --- */
  --accent: #098fd3;       /* NCSブルー */
  --accent-strong: #001f3f; /* ネイビー（濃色） */
  --accent-strong-hover: #06325c;
  --accent-fg: #ffffff;    /* アクセント上の文字色 */
  --link: var(--accent-strong); /* 本文中の文字リンク色（AA確保のためlightはnavy、darkは明るいblueに切替） */
  --choice-ring: rgba(9, 143, 211, 0.14); /* 選択カードのフォーカスリング（テーマで上書き） */

  color-scheme: light dark;

  /* --- セマンティックカラー（Light） --- */
  --bg: #f5f5f7;              /* systemBackground相当（グループ背景） */
  --bg-elevated: #ffffff;     /* secondarySystemBackground相当（カード等） */
  --bg-grouped: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.07);

  --label: #1d1d1f;              /* label */
  --label-secondary: #6e6e73;    /* secondaryLabel */
  --label-tertiary: #75757a;     /* tertiaryLabel（4.5:1以上を確保する濃さに調整） */
  --label-on-accent: #ffffff;

  --separator: rgba(60, 60, 67, 0.16);       /* separator（薄い罫線） */
  --separator-opaque: rgba(60, 60, 67, 0.29);

  --danger: #d70015;
  --danger-bg: rgba(215, 0, 21, 0.1);
  --success: #1f8a3d;
  --success-bg: rgba(31, 138, 61, 0.1);
  --warning: #b8720a;
  --warning-bg: rgba(184, 114, 10, 0.12);
  --info: #098fd3;
  --info-bg: rgba(9, 143, 211, 0.1);

  /* バッジの文字色（淡いtint背景上でもAAコントラストを保つ専用トーン） */
  --badge-danger-fg: var(--danger);
  --badge-success-fg: #146b2c;
  --badge-warning-fg: #8a5807;
  --badge-info-fg: #0a6ea8;

  --focus-ring: rgba(9, 143, 211, 1);
}

/* --- セマンティックカラー（Dark） --- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --bg-grouped: #1c1c1e;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-active: rgba(255, 255, 255, 0.10);

    --label: #f5f5f7;
    --label-secondary: #98989d;
    --label-tertiary: #88888f;
    --label-on-accent: #ffffff;

    --separator: rgba(84, 84, 88, 0.6);
    --separator-opaque: rgba(84, 84, 88, 0.75);

    --danger: #ff453a;
    --danger-bg: rgba(255, 69, 58, 0.16);
    --success: #32d74b;
    --success-bg: rgba(50, 215, 75, 0.16);
    --warning: #ffd60a;
    --warning-bg: rgba(255, 214, 10, 0.16);
    --info: #35b0f0;
    --info-bg: rgba(53, 176, 240, 0.16);

    --badge-danger-fg: var(--danger);
    --badge-success-fg: var(--success);
    --badge-warning-fg: var(--warning);
    --badge-info-fg: var(--info);

    --accent: #35b0f0;        /* dark時はやや明るいブルーで視認性確保 */
    --accent-strong: #0f76bd; /* 白文字でAA(4.5:1)を満たす濃さに調整 */
    --accent-strong-hover: #0c63a0;
    --link: var(--accent);    /* darkはaccent自体がAA達成するのでそのままリンク色に使う */
    --choice-ring: rgba(53, 176, 240, 0.22);
    --focus-ring: rgba(53, 176, 240, 1);
  }
}

/* 手動テーマ切替に対応（将来のトグル実装用フック） */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elevated: #1c1c1e;
  --bg-grouped: #1c1c1e;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.10);
  --label: #f5f5f7;
  --label-secondary: #98989d;
  --label-tertiary: #88888f;
  --separator: rgba(84, 84, 88, 0.6);
  --separator-opaque: rgba(84, 84, 88, 0.75);
  --danger: #ff453a;
  --danger-bg: rgba(255, 69, 58, 0.16);
  --success: #32d74b;
  --success-bg: rgba(50, 215, 75, 0.16);
  --warning: #ffd60a;
  --warning-bg: rgba(255, 214, 10, 0.16);
  --info: #35b0f0;
  --info-bg: rgba(53, 176, 240, 0.16);
  --badge-danger-fg: var(--danger);
  --badge-success-fg: var(--success);
  --badge-warning-fg: var(--warning);
  --badge-info-fg: var(--info);
  --accent: #35b0f0;
  --accent-strong: #0f76bd;
  --accent-strong-hover: #0c63a0;
  --link: var(--accent);
  --choice-ring: rgba(53, 176, 240, 0.22);
  --focus-ring: rgba(53, 176, 240, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-grouped: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.07);
  --label: #1d1d1f;
  --label-secondary: #6e6e73;
  --label-tertiary: #75757a;
  --separator: rgba(60, 60, 67, 0.16);
  --separator-opaque: rgba(60, 60, 67, 0.29);
  --danger: #d70015;
  --danger-bg: rgba(215, 0, 21, 0.1);
  --success: #1f8a3d;
  --success-bg: rgba(31, 138, 61, 0.1);
  --warning: #b8720a;
  --warning-bg: rgba(184, 114, 10, 0.12);
  --info: #098fd3;
  --info-bg: rgba(9, 143, 211, 0.1);
  --badge-danger-fg: var(--danger);
  --badge-success-fg: #146b2c;
  --badge-warning-fg: #8a5807;
  --badge-info-fg: #0a6ea8;
  --accent: #098fd3;
  --accent-strong: #001f3f;
  --accent-strong-hover: #06325c;
  --link: var(--accent-strong);
  --choice-ring: rgba(9, 143, 211, 0.14);
  --focus-ring: rgba(9, 143, 211, 1);
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-system);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-2) 0;
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-3) 0; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* --- フォーカスリング（キーボード操作向け・アクセシビリティ） --- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* --- モーション最小化 --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. レイアウト: .app / .app__sidebar / .app__main / .topbar
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 100vh;
  min-height: 100vh;
  background: var(--bg);
}

.app__sidebar {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background: var(--bg-elevated);
  border-right: 1px solid var(--separator);
  overflow-y: auto;
}

.app__sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-4);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--label);
}

/* 弊社ロゴのグラデーション停止色。ライトは原色そのまま。
   ダークだけ明るい側へ振る（既定の終端 #004199 は地色 #1c1c1e に対して1.80:1しかなく、
   右下のストロークが背景に沈む）。振り替え後は 4.79:1 で、非テキストのAA(3:1)を満たす。
   --ncs-logo-* を経由するのは、ライト強制（[data-theme="light"]）でも同じ1か所で戻せるようにするため。 */
:root {
  --ncs-logo-1: #00b7ee;
  --ncs-logo-2: #008dd2;
  --ncs-logo-3: #004199;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ncs-logo-1: #5cd6ff;
    --ncs-logo-2: #35b0f0;
    --ncs-logo-3: #1a86d8;
  }
}

:root[data-theme="dark"] {
  --ncs-logo-1: #5cd6ff;
  --ncs-logo-2: #35b0f0;
  --ncs-logo-3: #1a86d8;
}

:root[data-theme="light"] {
  --ncs-logo-1: #00b7ee;
  --ncs-logo-2: #008dd2;
  --ncs-logo-3: #004199;
}

.ncs-logo__stop--1 { stop-color: var(--ncs-logo-1); }
.ncs-logo__stop--2 { stop-color: var(--ncs-logo-2); }
.ncs-logo__stop--3 { stop-color: var(--ncs-logo-3); }

/* 弊社ロゴ。ロゴ自体が色を持つので、下地の塗りと角丸は置かない。 */
.app__sidebar-brand .app__brand-mark {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
}

.app__sidebar-brand .app__brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.app__content {
  flex: 1;
  padding: var(--space-8);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--label);
  margin: 0;
}

.topbar__meta {
  font-size: var(--text-sm);
  color: var(--label-secondary);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* レスポンシブ: 狭幅ではサイドバー折りたたみ相当（縦積み） */
@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .app__sidebar {
    grid-row: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--separator);
    padding: var(--space-3) var(--space-4);
  }
  .app__content {
    padding: var(--space-4);
  }
  .topbar {
    padding: var(--space-3) var(--space-4);
  }
}

/* ==========================================================================
   4. ナビ: .nav / .nav__item / .nav__item--active
   ========================================================================== */

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--label-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}

.nav__item:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.nav__item--active {
  /* accent単体は白文字でAA未達のため、常にAAを満たすaccent-strongを背景に使う */
  background: var(--accent-strong);
  color: var(--label-on-accent);
}

.nav__item--active:hover {
  background: var(--accent-strong-hover);
  color: var(--label-on-accent);
}

.nav__item-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* 横並びナビ（狭幅サイドバー用） */
@media (max-width: 720px) {
  .nav {
    flex-direction: row;
  }
  .nav__item {
    white-space: nowrap;
    width: auto;
  }
}

/* ==========================================================================
   5. ウィザード: .wizard / .wizard__progress / .wizard__step / .choice-grid / .choice
   ========================================================================== */

/* 入口ウィザードは画面いっぱいのステージに中央のカードとして配置する（apple-design/HIG） */
.wizard-page {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-4);
  background: var(--bg);
  color: var(--label);
}

.wizard-page *,
.wizard-page *::before,
.wizard-page *::after {
  box-sizing: border-box;
}

.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: min(100%, 640px);
  padding: clamp(var(--space-5), 5vw, var(--space-8));
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.wizard__progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard__progress small {
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.wizard__progress h1 {
  max-width: 20ch;
  margin: 0;
  color: var(--label);
  font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.wizard__progress-step {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--separator);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.wizard__progress-step--done,
.wizard__progress-step--active {
  background: var(--accent);
}

/* 現在地は色だけでなくリング（形状）でも判別できるようにする */
.wizard__progress-step--active {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.wizard__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wizard__step-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--label);
}

.wizard__step-subtitle {
  font-size: var(--text-base);
  color: var(--label-secondary);
  margin-bottom: var(--space-4);
}

.wizard__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* アクションが1つ（次へ／この設定ではじめる）のときは右寄せにして視線を落とす */
.wizard__actions .btn:only-child {
  margin-inline-start: auto;
}

.wizard__guide-link {
  margin: 0;
  padding-top: var(--space-2);
  text-align: center;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* ウィザード内の選択肢グリッドは中央に寄せる（ダッシュボードのKPI行は全幅のまま） */
.wizard .choice-grid {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--separator);
  background: var(--bg-elevated);
  color: var(--label);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.choice:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.choice__icon {
  width: 2rem;
  height: 2rem;
  color: var(--accent);
}

.choice__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--label);
}

.choice__desc {
  font-size: var(--text-sm);
  color: var(--label-secondary);
}

.choice--selected {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--info-bg);
  box-shadow: 0 0 0 3px var(--choice-ring);
}

.choice--selected .choice__title {
  /* accent-strongはdarkテーマでこの淡いtint背景上ではAAぎりぎりになるため、
     常に高コントラストなlabelを使い、選択状態は枠線・リング・背景tintで示す */
  color: var(--label);
}

/* ウィザードのモバイル調整（本文は横スクロールさせず選択肢は縦積み） */
@media (max-width: 480px) {
  .wizard {
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
  }
  .wizard .choice-grid {
    grid-template-columns: 1fr;
  }
  .wizard__actions .btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .choice {
    transition: none;
  }
}

/* ==========================================================================
   6. 基本部品: ボタン
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px; /* タッチ操作しやすい最小サイズ（Apple HIG推奨） */
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
  background: var(--bg-elevated);
  color: var(--label);
  border-color: var(--separator);
}

.btn:hover {
  background: var(--bg-hover);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  /* accent単体は白文字でAA(4.5:1)未達のため、常にAAを満たすaccent-strongを背景に使う */
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-fg);
}

.btn--primary:hover {
  background: var(--accent-strong-hover);
  border-color: var(--accent-strong-hover);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--link);
}

.btn--ghost:hover {
  background: var(--bg-hover);
}

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.btn--danger:hover {
  filter: brightness(0.9);
}

.btn--sm {
  /* コンパクト表示用途の意図的な例外（デスクトップの密なツールバー等）。
     単独のタップ操作対象になる場合は.btnの標準サイズを使うこと。 */
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* ==========================================================================
   7. 基本部品: カード / KPI
   ========================================================================== */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.card__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--label);
  margin-bottom: var(--space-1);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--label-secondary);
  margin-bottom: var(--space-4);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.kpi__label {
  font-size: var(--text-sm);
  color: var(--label-secondary);
  font-weight: 500;
}

.kpi__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--label);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi__delta {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 色だけに頼らず矢印記号でも増減を判別できるようにする */
.kpi__delta--up { color: var(--success); }
.kpi__delta--up::before { content: "\25B2\0020"; } /* ▲ */
.kpi__delta--down { color: var(--danger); }
.kpi__delta--down::before { content: "\25BC\0020"; } /* ▼ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* ==========================================================================
   8. 基本部品: フォーム（.field / .input / .select）
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--label-secondary);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--label-tertiary);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--danger);
}

.input,
.select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--separator);
  background: var(--bg-elevated);
  color: var(--label);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.input::placeholder {
  color: var(--label-tertiary);
}

.input:hover,
.select:hover {
  border-color: var(--separator-opaque);
}

.input:focus,
.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

.select {
  /* 矢印色はlabel-secondaryに追従させ、dark時も視認性を確保する（テーマごとに切替） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6e73' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 10px 7px;
  padding-right: var(--space-8);
}

@media (prefers-color-scheme: dark) {
  .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2398989d' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2398989d' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236e6e73' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
}

.input:disabled,
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   9. テーブル: .data-table / .data-table__toolbar
   ========================================================================== */

.data-table__wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-table__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--separator);
  flex-wrap: wrap;
}

.data-table__toolbar-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--label);
}

.data-table__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead th {
  text-align: left;
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  color: var(--label-secondary);
  border-bottom: 1px solid var(--separator);
  white-space: nowrap;
}

.data-table tbody td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--separator);
  color: var(--label);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table__empty {
  padding: var(--space-10);
  text-align: center;
  color: var(--label-secondary);
}

/* 横スクロール対応（狭幅） */
.data-table__scroll {
  overflow-x: auto;
}

/* ==========================================================================
   10. 状態表示: .badge
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--bg-hover);
  color: var(--label-secondary);
}

.badge--alert {
  background: var(--danger-bg);
  color: var(--badge-danger-fg);
}

.badge--ok {
  background: var(--success-bg);
  color: var(--badge-success-fg);
}

.badge--pending {
  background: var(--warning-bg);
  color: var(--badge-warning-fg);
}

.badge--processing {
  background: var(--info-bg);
  color: var(--badge-info-fg);
}

.badge--done {
  background: var(--success-bg);
  color: var(--badge-success-fg);
}

/* ==========================================================================
   11. ユーティリティ
   ========================================================================== */

.u-text-secondary { color: var(--label-secondary); }
.u-text-tertiary { color: var(--label-tertiary); }
.u-mt-0 { margin-top: 0; }
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Apple native refinement
   既存の "Apple HIG refinement" ブロックを丸ごと置き換える
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. アプリ全体
   -------------------------------------------------------------------------- */

.app {
  grid-template-columns: 224px minmax(0, 1fr);
  background: var(--bg);
}

.app__sidebar {
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3);
  background: var(--bg-elevated);
  border-right: 1px solid var(--separator);
  box-shadow: none;
}

.app__content {
  width: 100%;
  max-width: 1280px;
  padding: var(--space-8) var(--space-10) var(--space-12);
}

.app__content > .card + .card,
.app__content > .choice-grid + .card,
.app__content > .dash-split + .card,
.app__content > .dash-split + .dash-split,
.app__content > .card + .dash-split {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   2. macOSソースリスト調のナビゲーション
   -------------------------------------------------------------------------- */

.nav {
  gap: var(--space-1);
}

.nav__item {
  min-height: 36px;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: 0;
  box-shadow: none;
}

.nav__item:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.nav__item--active,
.nav__item--active:hover {
  background: var(--bg-active);
  color: var(--label);
  font-weight: 600;
  box-shadow: none;
}

.nav__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   3. トップバー
   -------------------------------------------------------------------------- */

.topbar {
  min-height: 56px;
  padding: var(--space-2) var(--space-10);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
  box-shadow: none;
}

.topbar > span:first-child {
  color: var(--label);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.topbar > span:last-child {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.topbar .btn--ghost {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.topbar .btn--ghost:hover {
  color: var(--label);
}

/* --------------------------------------------------------------------------
   4. インセットグループと見出し
   -------------------------------------------------------------------------- */

.card {
  padding: var(--space-6);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.app__content .card > h3 {
  margin: 0 0 var(--space-4);
  color: var(--label);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* テーブルを持つカードは外周を一つのインセットグループとして扱う */
.app__content > .card:has(> .data-table__scroll),
.app__content > .card:has(> .data-table__toolbar) {
  padding: 0;
  overflow: hidden;
}

.app__content > .card:has(> .data-table__scroll) > h3,
.app__content > .card:has(> .data-table__toolbar) > h3 {
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
}

/* テーブルを持つ（padding:0の）カード内のノート文・チップ列にも左右の余白を戻し、
   見出し／ツールバー／セルと同じインセットに揃える（flush内で左端に張り付くのを防ぐ） */
.app__content > .card:has(> .data-table__scroll) > .card__subtitle,
.app__content > .card:has(> .data-table__toolbar) > .card__subtitle {
  margin: 0;
  padding: var(--space-2) var(--space-5) var(--space-4);
}

.app__content > .card:has(> .data-table__scroll) > h3:has(+ .card__subtitle),
.app__content > .card:has(> .data-table__toolbar) > h3:has(+ .card__subtitle) {
  padding-bottom: var(--space-1);
}

.app__content > .card:has(> .data-table__scroll) > .ai-samples,
.app__content > .card:has(> .data-table__toolbar) > .ai-samples {
  padding: 0 var(--space-5) var(--space-4);
}

/* 追加フォームは親カードの中で静かに区切る */
#inv-addform:not(:empty) {
  border-bottom: 1px solid var(--separator);
}

#inv-addform > .card {
  border: 0;
  border-radius: 0;
  background: var(--bg-grouped);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. ダッシュボードKPI
   ウィザード内の .choice-grid には影響させない
   -------------------------------------------------------------------------- */

.app__content > .choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.app__content .kpi {
  position: relative;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 前回追加された装飾的なカラーバーを明示的に無効化 */
.app__content .kpi::before {
  display: none;
  content: none;
}

/* 4列表示では各スタットをhairlineで区切る */
.app__content > .choice-grid > .kpi:nth-child(n + 2) {
  border-left: 1px solid var(--separator);
}

.app__content .kpi > .field__label {
  margin: 0;
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: 0;
}

.app__content .kpi__value {
  color: var(--label);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. テーブルツールバーとフォーム部品
   -------------------------------------------------------------------------- */

.data-table__toolbar {
  min-height: 56px;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-grouped);
  border-bottom: 1px solid var(--separator);
}

.data-table__toolbar > .input,
.data-table__toolbar > .select {
  width: auto;
  min-width: 144px;
  flex: 1 1 160px;
}

.data-table__toolbar > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.input,
.select {
  min-height: 36px;
  padding-block: var(--space-2);
  background-color: var(--bg-elevated);
  border: 1px solid var(--separator-opaque);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.input:hover,
.select:hover {
  background-color: var(--bg-hover);
  border-color: var(--separator-opaque);
}

.input:focus,
.select:focus {
  background-color: var(--bg-elevated);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   7. macOSリスト調のテーブル
   -------------------------------------------------------------------------- */

.data-table {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.data-table thead {
  background: var(--bg-hover);
}

.data-table thead th {
  padding: var(--space-2) var(--space-5);
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-normal);
  letter-spacing: 0;
  border-bottom: 1px solid var(--separator);
}

.data-table tbody td {
  height: 44px;
  padding: var(--space-2) var(--space-5);
  color: var(--label);
  vertical-align: middle;
  border-bottom: 1px solid var(--separator);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table tbody td:first-child {
  font-weight: 500;
}

/* ダッシュボードKPIの直下カード：数値列の右寄せ */
.app__content > .choice-grid + .card .data-table :is(th, td):nth-child(n + 2) {
  text-align: right;
}

/* 数値列の右寄せ。カード内にID等の掴める目印がある表は上の :has() 方式が使えるが、
   目印のない表では列位置頼みの脆いセレクタになる。
   th と td の両方に .num を付けて、見出しと数値を必ず同じ端に揃える。 */
.data-table :is(th, td).num {
  text-align: right;
}

.data-table td .input,
.data-table td .select {
  min-height: 32px;
  font-size: var(--text-sm);
}

.data-table td .btn {
  min-height: 32px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   8. ボタン
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--radius-sm);
  letter-spacing: 0;
  box-shadow: none;
}

.btn:hover {
  box-shadow: none;
}

.btn--primary {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-fg);
  box-shadow: none;
}

.btn--primary:hover {
  background: var(--accent-strong-hover);
  border-color: var(--accent-strong-hover);
  color: var(--accent-fg);
  box-shadow: none;
}

.btn--ghost,
.btn--ghost:hover {
  box-shadow: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   9. 小さく静かな状態バッジ
   -------------------------------------------------------------------------- */

.badge {
  min-height: 20px;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
}

.badge--alert {
  background: var(--danger-bg);
  color: var(--badge-danger-fg);
}

.badge--ok,
.badge--done {
  background: var(--success-bg);
  color: var(--badge-success-fg);
}

.badge--pending {
  background: var(--warning-bg);
  color: var(--badge-warning-fg);
}

.badge--processing {
  background: var(--info-bg);
  color: var(--badge-info-fg);
}

/* --------------------------------------------------------------------------
   10. レスポンシブ調整
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
  .app__content {
    padding-inline: var(--space-6);
  }

  .topbar {
    padding-inline: var(--space-6);
  }

  .app__content > .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__content > .choice-grid > .kpi {
    border-left: 0;
  }

  .app__content > .choice-grid > .kpi:nth-child(even) {
    border-left: 1px solid var(--separator);
  }

  .app__content > .choice-grid > .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--separator);
  }
}

@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr;
  }

  .app__sidebar {
    padding: var(--space-2) var(--space-4);
  }

  .nav__item {
    min-height: 36px;
  }

  .nav__item--active,
  .nav__item--active:hover {
    box-shadow: none;
  }

  .topbar {
    min-height: 52px;
    padding-inline: var(--space-4);
  }

  .topbar > span:last-child {
    gap: 0;
  }

  .app__content {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .data-table__toolbar > .input,
  .data-table__toolbar > .select {
    min-width: 120px;
  }
}

@media (max-width: 560px) {
  .app__content > .choice-grid {
    grid-template-columns: 1fr;
  }

  .app__content > .choice-grid > .kpi,
  .app__content > .choice-grid > .kpi:nth-child(even),
  .app__content > .choice-grid > .kpi:nth-child(n + 3) {
    border-left: 0;
  }

  .app__content > .choice-grid > .kpi:nth-child(n + 2) {
    border-top: 1px solid var(--separator);
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .topbar > span:last-child {
    width: 100%;
    overflow-x: auto;
  }

  .data-table__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .data-table__toolbar > .input,
  .data-table__toolbar > .select,
  .data-table__toolbar > span {
    width: 100%;
    margin-inline-start: 0;
  }

  .data-table__toolbar > span .btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   11. モーション抑制
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nav__item,
  .data-table tbody tr,
  .btn,
  .input,
  .select {
    transition: none;
  }

  .btn:active {
    transform: none;
  }
}

/* ==========================================================================
   12. 経営ダッシュボード / ステータスパイプライン / レポート / トースト / 時計
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 ビュー見出し
   -------------------------------------------------------------------------- */

.view-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.view-head h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.view-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}

.view-sub {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0;
}

/* --------------------------------------------------------------------------
   12.2 KPIグリッド（6枚対応・hairline方式）
   -------------------------------------------------------------------------- */

.app__content > .choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--separator);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: none;
}

.app__content .kpi {
  background: var(--bg-grouped);
  border: 0;
  border-radius: 0;
}

.app__content > .choice-grid > .kpi {
  border-left: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 1050px) {
  .app__content > .choice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .app__content > .choice-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   12.3 2カラムレイアウト（グラフ・ランキング）
   -------------------------------------------------------------------------- */

.dash-split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.dash-split .card {
  margin-top: 0;
}

/* 左右で同格の2枚（売掛/買掛など）は均等割りにして、
   片側が極端に狭くなり表が折り返すのを防ぐ */
.dash-split--even {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

@media (max-width: 900px) {
  .dash-split {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   12.4 要対応リスト
   -------------------------------------------------------------------------- */

.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--separator);
}

.action-item:last-child {
  border-bottom: 0;
}

.action-item__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--radius-full);
  background: var(--label-tertiary);
}

.action-item--danger .action-item__dot { background: var(--danger); }
.action-item--warning .action-item__dot { background: var(--warning); }
.action-item--info .action-item__dot { background: var(--label-tertiary); }

.action-item__body {
  flex: 1;
  min-width: 0;
}

.action-item__title {
  font-weight: 600;
  color: var(--label);
  font-size: var(--text-sm);
}

.action-item__desc {
  color: var(--label-secondary);
  font-size: var(--text-sm);
}

.action-item__link {
  margin-inline-start: auto;
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--link);
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12.5 チャート（棒＋折れ線）
   -------------------------------------------------------------------------- */

.chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart__bar {
  fill: var(--accent);
  fill-opacity: 0.85;
}

.chart__line {
  fill: none;
  stroke: var(--label-secondary);
  stroke-width: 2;
}

.chart__dot {
  fill: var(--label-secondary);
}

.chart__axis {
  stroke: var(--separator);
  stroke-width: 1;
}

.chart__xlabel {
  fill: var(--label-tertiary);
  font-size: 10px;
}

.chart-empty {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  padding: var(--space-4);
}

.chart-caption {
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   12.6 ドーナツグラフ
   -------------------------------------------------------------------------- */

.donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.chart--donut {
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
}

.donut__total {
  fill: var(--label);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}

.donut__seg {
  fill: none;
  stroke-width: 26;
}

.donut__seg--1, .donut-legend__swatch--1 { stroke: var(--accent); background: var(--accent); }
.donut__seg--2, .donut-legend__swatch--2 { stroke: var(--success); background: var(--success); }
.donut__seg--3, .donut-legend__swatch--3 { stroke: var(--warning); background: var(--warning); }
.donut__seg--4, .donut-legend__swatch--4 { stroke: var(--info); background: var(--info); }
.donut__seg--5, .donut-legend__swatch--5 { stroke: var(--danger); background: var(--danger); }
.donut__seg--6, .donut-legend__swatch--6 { stroke: var(--label-tertiary); background: var(--label-tertiary); }
.donut__seg--7, .donut-legend__swatch--7 { stroke: var(--accent-strong); background: var(--accent-strong); }
.donut__seg--8, .donut-legend__swatch--8 { stroke: var(--label-secondary); background: var(--label-secondary); }

.donut-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.donut-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--label-secondary);
}

.donut-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.donut-legend__value {
  margin-inline-start: auto;
  color: var(--label-tertiary);
}

/* --------------------------------------------------------------------------
   12.7 モジュール状況タイル
   -------------------------------------------------------------------------- */

.module-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 720px) {
  .module-tiles {
    grid-template-columns: 1fr;
  }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
  padding: var(--space-4);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.tile:hover {
  background: var(--bg-hover);
}

.tile__label {
  font-size: var(--text-xs);
  color: var(--label-secondary);
}

.tile__value {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--label);
}

.tile__note {
  font-size: var(--text-xs);
  color: var(--label-tertiary);
}

/* --------------------------------------------------------------------------
   12.8 ステータスパイプライン（CRM: 商談ステージ）
   -------------------------------------------------------------------------- */

.pipeline {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pipeline__stage {
  flex: 1 1 0;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-3);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.pipeline__stage:hover {
  background: var(--bg-hover);
}

.pipeline__stage--active {
  border-color: var(--accent);
  background: var(--info-bg);
}

.pipeline__count {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--label);
}

.pipeline__label {
  font-size: var(--text-sm);
  color: var(--label);
}

.pipeline__amt {
  font-size: var(--text-xs);
  color: var(--label-tertiary);
}

.pipeline__arrow {
  display: flex;
  align-items: center;
  color: var(--label-tertiary);
  font-size: var(--text-lg);
}

@media (max-width: 560px) {
  .pipeline__arrow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12.9 水平バー（ランキング）
   -------------------------------------------------------------------------- */

.hbar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hbar {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.hbar__label {
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 上限を示す背景トラック（帯）は廃止。.hbar__fill 1本だけが
   グリッド列（1fr）の幅を基準に値の割合ぶん伸びる（枠・上限が見えない状態にする）。 */
.hbar__fill {
  display: block;
  height: 8px;
  min-width: 2px;
  background: var(--accent);
  border-radius: var(--radius-full);
}

/* レポートのランキング表示（棒グラフ）は角丸なし */
.hbar-list .hbar__fill {
  border-radius: 0;
}

.hbar__value {
  color: var(--label-secondary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .hbar {
    grid-template-columns: 90px 1fr auto;
  }
}

/* --------------------------------------------------------------------------
   12.10 トップバーの時計
   -------------------------------------------------------------------------- */

.app-clock {
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  margin-inline-end: var(--space-2);
}

@media (max-width: 720px) {
  .app-clock {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12.11 トースト通知
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: var(--label);
  color: var(--bg-elevated);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
  z-index: 100;
  pointer-events: none;
}

.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* ==========================================================================
   Apple premium craft refinement
   style.cssの末尾に追記する最終上書き
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. タイポグラフィと共通アイコン
   -------------------------------------------------------------------------- */

body {
  letter-spacing: -0.005em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--leading-tight);
  letter-spacing: -0.018em;
}

.view-head h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.card h3,
.card__title,
.data-table__toolbar-title {
  font-weight: 650;
  letter-spacing: -0.012em;
}

.kpi__value,
.tile__value,
.pipeline__count,
.pipeline__amt,
.hbar__value,
.data-table td,
.app-clock {
  font-variant-numeric: tabular-nums;
}

.icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
  max-width: none;
  flex: 0 0 auto;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   2. サイドバーとソースリスト
   -------------------------------------------------------------------------- */

.app {
  grid-template-columns: 232px minmax(0, 1fr);
}

.app__sidebar {
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3);
  background: var(--bg-elevated);
  border-right: 1px solid var(--separator);
  box-shadow: inset -1px 0 0 var(--bg-hover);
}

.app__sidebar-brand {
  padding: 0 var(--space-3) var(--space-4);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.018em;
}

.nav {
  gap: var(--space-4);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-group__label {
  margin: var(--space-2) var(--space-3) var(--space-1);
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: var(--leading-tight);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -0.006em;
  box-shadow: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.nav__item:hover {
  background: var(--bg-hover);
  border-color: var(--separator);
  color: var(--label);
}

.nav__item--active,
.nav__item--active:hover {
  background: var(--info-bg);
  border-color: var(--separator);
  color: var(--label);
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--bg-hover);
}

.nav__icon {
  display: inline-grid;
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--label-secondary);
}

.nav__icon .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.8;
}

.nav__item:hover .nav__icon {
  color: var(--label);
}

.nav__item--active .nav__icon,
.nav__item--active:hover .nav__icon {
  color: var(--accent);
}

.nav__item:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   3. トップバーとコンテンツ
   -------------------------------------------------------------------------- */

.topbar {
  min-height: 58px;
  padding: var(--space-2) var(--space-10);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
  box-shadow: inset 0 -1px 0 var(--bg-hover);
}

.topbar > span:first-child,
.topbar__title {
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.015em;
}

/* タイトルは折り返さない。狭幅では右側のメタ情報＋ボタン群だけを折り返す
   （空きが足りないと、日本語は分かち書きが無いため単語の途中で改行されてしまうため）。 */
.topbar {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.topbar > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.topbar > span:last-child {
  flex-wrap: wrap;
  row-gap: var(--space-2);
  justify-content: flex-end;
}

.app__content {
  max-width: 1280px;
  padding: var(--space-8) var(--space-10) var(--space-12);
}

/* --------------------------------------------------------------------------
   4. カード
   -------------------------------------------------------------------------- */

.card {
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card h3 {
  margin-bottom: var(--space-4);
  color: var(--label);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

.card__subtitle,
.view-sub {
  color: var(--label-secondary);
  line-height: var(--leading-normal);
}

/* Lightテーマだけに、ごく薄い内側ハイライトを加える */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .card {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      var(--shadow-sm);
  }
}

:root[data-theme="light"] .card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    var(--shadow-sm);
}

/* Darkテーマでは影を消し、面と境界の明度差だけで奥行きを作る */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card {
    box-shadow: none;
  }
}

:root[data-theme="dark"] .card {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. ダッシュボード直下のKPI行
   ウィザード内の.choice-gridには影響させない
   -------------------------------------------------------------------------- */

.app__content > .choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app__content > .choice-grid > .card.kpi {
  position: relative;
  min-height: 142px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  padding: var(--space-5);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--separator) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.app__content > .choice-grid > .card.kpi:hover {
  border-color: var(--separator-opaque) !important;
}

.kpi__icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--info-bg);
  color: var(--accent);
}

.kpi__icon .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.app__content > .choice-grid > .kpi > .field__label,
.app__content > .choice-grid > .kpi > .kpi__label {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.app__content > .choice-grid > .kpi > .kpi__value {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  color: var(--label);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.kpi__delta {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 22px;
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  color: var(--label-secondary);
  background: var(--bg-hover);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.kpi__delta--up {
  color: var(--badge-success-fg);
  background: var(--success-bg);
}

.kpi__delta--down {
  color: var(--badge-danger-fg);
  background: var(--danger-bg);
}

.kpi__delta--up::before {
  content: "\25B2";
  font-size: 0.72em;
}

.kpi__delta--down::before {
  content: "\25BC";
  font-size: 0.72em;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])
    .app__content > .choice-grid > .card.kpi {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      var(--shadow-sm);
  }
}

:root[data-theme="light"]
  .app__content > .choice-grid > .card.kpi {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    var(--shadow-sm);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])
    .app__content > .choice-grid > .card.kpi {
    background: var(--bg-grouped);
    box-shadow: none;
  }
}

:root[data-theme="dark"]
  .app__content > .choice-grid > .card.kpi {
  background: var(--bg-grouped);
  box-shadow: none;
}

/* アイコン未実装の移行期間も、既存KPIの配置を崩さない */
.app__content > .choice-grid > .kpi:not(:has(.kpi__icon))
  > .field__label,
.app__content > .choice-grid > .kpi:not(:has(.kpi__icon))
  > .kpi__label {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   6. ボタンとフォーム
   -------------------------------------------------------------------------- */

.btn {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-sm);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--separator-opaque);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  background: var(--bg-active);
  transform: scale(0.985);
}

.btn--primary {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-fg);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--accent-strong-hover);
  border-color: var(--accent-strong-hover);
  color: var(--accent-fg);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--link);
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--bg-hover);
  border-color: transparent;
  color: var(--link);
  box-shadow: none;
}

.btn:focus-visible,
.input:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.input,
.select {
  min-height: 40px;
  border-color: var(--separator);
  border-radius: var(--radius-md);
  background-color: var(--bg-elevated);
  font-size: var(--text-sm);
}

.input:hover,
.select:hover {
  border-color: var(--separator-opaque);
}

/* --------------------------------------------------------------------------
   7. テーブル
   -------------------------------------------------------------------------- */

.data-table__scroll {
  overflow-x: auto;
  border-radius: var(--radius-md);
}

.data-table__toolbar {
  gap: var(--space-3);
  /* 左右を表セル(th/td)と同じ space-5 に揃える。0だとドロップダウンやボタンが
     カードの端に貼り付き、下の表の内容とインセットがズレて見える */
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--separator);
}

.data-table {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.data-table thead th {
  padding: var(--space-3) var(--space-5);
  background: var(--bg-grouped);
  border-bottom: 1px solid var(--separator-opaque);
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: var(--leading-tight);
  letter-spacing: 0.025em;
}

.data-table tbody td {
  padding: var(--space-4) var(--space-5);
  border-bottom-color: var(--separator);
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table tbody tr:focus-within {
  background: var(--bg-hover);
}

/* --------------------------------------------------------------------------
   8. バッジ
   -------------------------------------------------------------------------- */

.badge {
  min-height: 22px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--separator);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  box-shadow: inset 0 1px 0 var(--bg-hover);
}

.badge--alert {
  background: var(--danger-bg);
  color: var(--badge-danger-fg);
}

.badge--ok,
.badge--done {
  background: var(--success-bg);
  color: var(--badge-success-fg);
}

.badge--pending {
  background: var(--warning-bg);
  color: var(--badge-warning-fg);
}

.badge--processing {
  background: var(--info-bg);
  color: var(--badge-info-fg);
}

/* --------------------------------------------------------------------------
   9. モジュールタイル
   -------------------------------------------------------------------------- */

.module-tiles {
  gap: var(--space-3);
}

.tile {
  position: relative;
  min-height: 124px;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  color: var(--label);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.tile:hover {
  background: var(--bg-hover);
  border-color: var(--separator-opaque);
  transform: translateY(-1px);
}

.tile:active {
  transform: translateY(0);
}

.tile:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.tile > .icon,
.tile__icon {
  color: var(--accent);
}

.tile > .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: var(--space-1);
}

.tile__label {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.tile__value {
  color: var(--label);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.tile__note {
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile {
    box-shadow: none;
  }
}

:root[data-theme="dark"] .tile {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   10. パイプライン
   -------------------------------------------------------------------------- */

.pipeline {
  gap: var(--space-2);
}

.pipeline__stage {
  min-width: 108px;
  min-height: 104px;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.pipeline__stage:hover {
  background: var(--bg-hover);
  border-color: var(--separator-opaque);
}

.pipeline__stage--active,
.pipeline__stage--active:hover {
  background: var(--info-bg);
  border-color: var(--accent);
}

.pipeline__stage--active .pipeline__count {
  color: var(--accent);
}

.pipeline__stage:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.pipeline__count {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.pipeline__label {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pipeline__amt {
  margin-top: var(--space-1);
  color: var(--label-tertiary);
  font-size: var(--text-xs);
}

.pipeline__arrow {
  color: var(--label-tertiary);
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pipeline__stage {
    box-shadow: none;
  }
}

:root[data-theme="dark"] .pipeline__stage {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   11. 要対応リスト
   -------------------------------------------------------------------------- */

.action-item {
  align-items: center;
  gap: var(--space-3);
  min-height: 58px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.action-item:hover {
  background: var(--bg-hover);
}

.action-item__dot {
  width: 7px;
  height: 7px;
  margin-top: 0;
  box-shadow: 0 0 0 3px var(--bg-hover);
}

.action-item__title {
  font-weight: 650;
  letter-spacing: -0.006em;
}

.action-item__desc {
  margin-top: var(--space-1);
  color: var(--label-secondary);
  line-height: var(--leading-normal);
}

.action-item__link {
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.action-item__link:hover {
  background: var(--bg-hover);
  text-decoration: none;
}

.action-item__link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   12. グラフ
   -------------------------------------------------------------------------- */

.chart__bar {
  fill: var(--accent);
  fill-opacity: 0.76;
}

.chart__line {
  stroke: var(--label-secondary);
  stroke-width: 1.7;
}

.chart__dot {
  fill: var(--bg-elevated);
  stroke: var(--label-secondary);
  stroke-width: 1.5;
}

.chart__axis {
  stroke: var(--separator);
}

.chart-caption {
  color: var(--label-tertiary);
  line-height: var(--leading-normal);
}

.hbar-list {
  gap: var(--space-4);
}

.hbar__fill {
  background: var(--accent);
}

.donut__seg {
  stroke-width: 24;
}

/* --------------------------------------------------------------------------
   13. レスポンシブ
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
  .app__content {
    padding-inline: var(--space-6);
  }

  .topbar {
    padding-inline: var(--space-6);
  }

  .app__content > .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__content > .choice-grid > .card.kpi {
    border: 1px solid var(--separator) !important;
  }
}

@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr;
  }

  .app__sidebar {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--separator);
    box-shadow: inset 0 -1px 0 var(--bg-hover);
  }

  .nav {
    flex-direction: row;
    gap: var(--space-2);
  }

  .nav-group {
    flex-direction: row;
  }

  .nav-group__label {
    display: none;
  }

  .nav__item {
    width: auto;
    min-height: 38px;
    white-space: nowrap;
  }

  .topbar {
    padding-inline: var(--space-4);
  }

  .app__content {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .tile:hover {
    transform: none;
  }
}

@media (max-width: 560px) {
  .app__content > .choice-grid {
    grid-template-columns: 1fr;
  }

  .app__content > .choice-grid > .card.kpi {
    min-height: 132px;
    border: 1px solid var(--separator) !important;
  }

  .pipeline__arrow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   14. モーションを減らす設定
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nav__item,
  .card,
  .tile,
  .pipeline__stage,
  .action-item,
  .data-table tbody tr,
  .btn,
  .input,
  .select {
    transition: none;
  }

  .btn:active,
  .tile:hover,
  .tile:active {
    transform: none;
  }
}

/* ==========================================================================
   15. 補助ルール（統合仕様2: 新クラスの最小スタイル。既存トークンのみ使用）
   ========================================================================== */

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

.tile__icon .icon,
.kpi__icon .icon {
  width: 1.3em;
  height: 1.3em;
}

.action-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.action-item__icon--danger {
  color: var(--danger);
}

.action-item__icon--warning {
  color: var(--warning);
}

.action-item__icon--info {
  color: var(--label-tertiary);
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.settings-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--text-sm);
}

.settings-list__row:last-child {
  border-bottom: 0;
}

.settings-list__row dt {
  color: var(--label-secondary);
}

.settings-list__row dd {
  margin: 0;
  color: var(--label);
  font-weight: 600;
}
/* ==========================================================================
   追補: グラフのリッチ化（グラデバー/グリッド/エリア塗り/ハロードット）＋設定の余白
   ========================================================================== */

/* 棒は縦グラデーション（角丸なし）。CSSのfillが属性より優先されるため、
   ここでグラデーションを明示指定して既存の単色fillを上書きする */
.chart__bar {
  fill: url(#chartBarGrad);
  fill-opacity: 1;
}
.chart__grad-bar-a { stop-color: var(--accent); stop-opacity: 0.95; }
.chart__grad-bar-b { stop-color: var(--accent); stop-opacity: 0.42; }

/* 目安の水平グリッド（淡く） */
.chart__grid {
  stroke: var(--separator);
  stroke-opacity: 0.55;
  stroke-width: 1;
}

/* 折れ線の下の面（粗利率トレンドの厚み） */
.chart__area { fill: url(#chartAreaGrad); }
.chart__grad-area-a { stop-color: var(--label-secondary); stop-opacity: 0.16; }
.chart__grad-area-b { stop-color: var(--label-secondary); stop-opacity: 0; }

/* 折れ線とドット（ハロー付き） */
.chart__line {
  fill: none;
  stroke: var(--label-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart__dot {
  fill: var(--bg-elevated);
  stroke: var(--warning);
  stroke-width: 1.6;
}
.chart__axis { stroke: var(--separator); stroke-width: 1; }

/* 折れ線＝粗利率はアンバーで棒（青）と色分けし、どちらが何かを一目で分かるように */
.chart__line { stroke: var(--warning); }
.chart__grad-area-a { stop-color: var(--warning); stop-opacity: 0.14; }
.chart__grad-area-b { stop-color: var(--warning); stop-opacity: 0; }

/* Y軸の目盛り（左＝売上高/万円＝青、右＝粗利率/%＝アンバー） */
.chart__ylabel { font-size: 10px; }
.chart__ylabel--bar { fill: var(--accent); }
.chart__ylabel--line { fill: var(--warning); }

/* 軸タイトル（何の軸かを明示） */
.chart__axis-title { font-size: 10.5px; font-weight: 700; }
.chart__axis-title--bar { fill: var(--accent); }
.chart__axis-title--line { fill: var(--warning); }

/* ドーナツ中央の単位ラベル */
.donut__unit { fill: var(--label-tertiary); font-size: 11px; }

/* キャプションの凡例キー（棒／折れ線の色見本） */
.legend-key { display: inline-block; vertical-align: middle; margin-right: 4px; }
.legend-key--bar { width: 12px; height: 12px; border-radius: 2px; background: var(--accent); }
.legend-key--line {
  width: 16px;
  height: 0;
  border-top: 3px solid var(--warning);
  border-radius: 2px;
}

/* 設定画面のボタン群（.data-table__toolbar を流用するとカードの余白が消えるため専用クラス） */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   ステージパイプラインの補助状態
   -------------------------------------------------------------------------- */

/* パイプラインの完了ステージ（受注・完了などを .pipeline__stage--done で強調） */
.pipeline__stage--done {
  border-color: var(--success);
  background: var(--success-bg);
}

.pipeline__stage--done .pipeline__count {
  color: var(--success);
}

/* --------------------------------------------------------------------------
   AI取込・ナレッジ・権限（全業態共通）
   -------------------------------------------------------------------------- */

/* ナレッジ一覧のタグチップ */
.doc-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--label-secondary);
  font-size: var(--text-xs);
  margin-right: 4px;
}

/* 権限マトリクスの ○/– */
.perm-yes {
  color: var(--accent);
  font-weight: 600;
}

.perm-no {
  color: var(--label-tertiary);
}

/* AI取込のサンプル候補ボタン列 */
.ai-samples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* AI取込の結果カード（種別バッジ＋確信度） */
.ai-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.ai-result__conf {
  font-size: var(--text-xs);
  color: var(--label-secondary);
}

.ai-field-row {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--label-secondary);
}

.ai-field__k {
  color: var(--label-tertiary);
}

/* topbarの権限（ロール）切替 */
.role-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-end: var(--space-2);
}

.role-switch__label {
  font-size: var(--text-xs);
  color: var(--label-tertiary);
}

.role-switch .select {
  min-height: 32px;
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .role-switch__label {
    display: none;
  }
}

/* ==========================================================================
   デモ側修正: サイドバー固定＋ウィザードの業態アイコン
   ========================================================================== */

/* --------------------------------------------------------------------------
   サイドバーを固定にする（本文＝#view だけスクロール）
   -------------------------------------------------------------------------- */

.app { height: 100vh; overflow: hidden; }
.app__sidebar { height: 100vh; overflow-y: auto; }
.app__main { height: 100vh; min-height: 0; overflow: hidden; }
.topbar { flex: 0 0 auto; }
.app__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* モバイル(<=720px)は従来どおり縦積みスクロールに戻す */
@media (max-width: 720px) {
  .app { height: auto; overflow: visible; }
  .app__sidebar { height: auto; }
  .app__main { height: auto; overflow: visible; }
  .app__content { overflow: visible; }
}

/* --------------------------------------------------------------------------
   ウィザードの業態選択ボタン（アイコン＋ラベル・5業態）
   -------------------------------------------------------------------------- */

.choice__icon { display: inline-flex; }
.choice__icon .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.choice--segment { position: relative; gap: var(--space-2); }

/* 選択中を示すチェックマーク（枠線に加えて形状でも判別できるようにする。色の塗りつぶしはしない） */
.choice__check {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  color: var(--accent-strong);
}
.choice__check .icon { width: 1.125rem; height: 1.125rem; }

/* ウィザードstep3の「すべて選択」小ボタン */
.wizard__selectall-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-1);
}
.wizard__selectall {
  padding: var(--space-1) var(--space-3);
  border: 0;
  background: none;
  color: var(--link);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   架空データの注記（静的テキスト・フッターの両方で使用）
   -------------------------------------------------------------------------- */

.disclaimer {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--label-tertiary);
}

/* ==========================================================================
   ダッシュボードKPI（単一インセットグループ・hairline区切り）
   既存の .choice-grid > .kpi / .card.kpi は色帯・カード影つきの別系統のため
   混ぜず、専用クラスで作る（色帯なし・カード影なし・hairlineのみで区切る）。
   ========================================================================== */

.kpi-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.kpi-cell {
  min-width: 0;
  padding: var(--space-5);
  border-top: 1px solid var(--separator);
  border-left: 1px solid var(--separator);
}

.kpi-group .kpi-cell:nth-child(-n+3) { border-top: 0; }
.kpi-group .kpi-cell:nth-child(3n+1) { border-left: 0; }

.kpi-cell__label {
  margin-bottom: var(--space-1);
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-normal);
}

.kpi-cell__value {
  color: var(--label);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-cell__delta {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kpi-cell__delta--up { color: var(--success); }
.kpi-cell__delta--up::before { content: "\25B2\0020"; font-size: 0.8em; }
.kpi-cell__delta--down { color: var(--danger); }
.kpi-cell__delta--down::before { content: "\25BC\0020"; font-size: 0.8em; }

@media (max-width: 1050px) {
  .kpi-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-group .kpi-cell { border-top: 1px solid var(--separator); border-left: 1px solid var(--separator); }
  .kpi-group .kpi-cell:nth-child(-n+2) { border-top: 0; }
  .kpi-group .kpi-cell:nth-child(2n+1) { border-left: 0; }
}

@media (max-width: 560px) {
  .kpi-group { grid-template-columns: 1fr; }
  .kpi-group .kpi-cell { border-left: 0; border-top: 1px solid var(--separator); }
  .kpi-group .kpi-cell:first-child { border-top: 0; }
}

/* --------------------------------------------------------------------------
   フッター（架空データの注記）
   -------------------------------------------------------------------------- */

.app__footer {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-10);
  border-top: 1px solid var(--separator);
  background: var(--bg-elevated);
}

.app__footer .disclaimer { margin: 0; }

/* 解説ページ（guide.html）への導線。デモから解説へ戻れるようにする。 */
.app__footer-links {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.app__footer-links a { color: var(--link); }

@media (max-width: 720px) {
  .app__footer { padding: var(--space-3) var(--space-4); }
}

/* ==========================================================================
   営業4ビュー（商談パイプライン・顧客・活動履歴・ToDo）
   色帯・カード影は装飾に使わない。アクセントの青は操作（トグル・主要ボタン）だけに使う。
   期限超過・AI由来は色帯ではなく文字色／hairlineの淡いタグだけで示す。
   ========================================================================== */

/* --------------------------------------------------------------------------
   セグメントトグル（ボード／テーブル切り替え）
   -------------------------------------------------------------------------- */

.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.seg-toggle__btn {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  background: var(--bg-elevated);
  border: 0;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.seg-toggle__btn + .seg-toggle__btn {
  border-left: 1px solid var(--separator);
}

.seg-toggle__btn:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.seg-toggle__btn--active,
.seg-toggle__btn--active:hover {
  background: var(--accent-strong);
  color: var(--accent-fg);
}

.seg-toggle__btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.seg-toggle__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ヘッダーの「自分／チーム」。topbar内でメタ表示とボタン群のあいだに置く */
.scope-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.scope-toggle-note {
  color: var(--label-tertiary);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   商談ボード（フェーズ5列のカンバン）
   -------------------------------------------------------------------------- */

.board {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.board__col {
  flex: 1 1 216px;
  min-width: 216px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.board__col-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
}

/* ドロップ先の列ハイライト。装飾的な影・アニメーションは付けず、枠色と薄い背景だけで示す */
.board__col--dropover .board__col-head {
  border-color: var(--accent);
}

.board__col--dropover .board__cards {
  background: var(--bg-hover);
  border-radius: var(--radius-md);
}

.board__col-collapse {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--label-tertiary);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}

.board__col-collapse:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.board__col-collapse:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.board__col-head-main { min-width: 0; }

/* 折りたたんだ列：縦書きのラベルと件数だけを残す */
.board__col--collapsed {
  flex: 0 0 40px;
  min-width: 40px;
}

.board__col--collapsed .board__col-head {
  flex-direction: column;
  padding: var(--space-3) var(--space-2);
}

.board__col-collapsed-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--label-secondary);
  font-size: var(--text-xs);
}

.board__col-collapsed-title {
  font-weight: 650;
  color: var(--label);
}

.board__col-collapsed-count {
  color: var(--label-tertiary);
  font-variant-numeric: tabular-nums;
}

.board__col-title {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--label);
}

.board__col-meta {
  margin-top: 2px;
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.board__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 40px;
}

.board__col-empty {
  margin: 0;
  padding: var(--space-3);
  color: var(--label-tertiary);
  font-size: var(--text-xs);
  text-align: center;
}

.board__card {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: calc(var(--space-4) + 22px);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

/* ドラッグ中のカード。装飾的な影・拡大・回転は付けず、半透明にするだけ */
.board__card--dragging {
  opacity: 0.5;
}

.board__card-menu-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--label-tertiary);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}

.board__card-menu-btn:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.board__card-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* タッチ用フォールバックのフェーズ選択メニュー */
.board__card-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: var(--space-2);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 148px;
  padding: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--separator-opaque);
  border-radius: var(--radius-md);
}

.board__card-menu-item {
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--label);
  text-align: left;
  font-size: var(--text-xs);
  cursor: pointer;
}

.board__card-menu-item:hover {
  background: var(--bg-hover);
}

.board__card-menu-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.board__card:hover {
  background: var(--bg-hover);
  border-color: var(--separator-opaque);
}

.board__card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.board__card-title {
  overflow: hidden;
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__card-sub {
  margin-top: 2px;
  overflow: hidden;
  color: var(--label-secondary);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__card-amount {
  margin-top: var(--space-2);
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   商談詳細パネル（右からのシート。overlay + panel）
   -------------------------------------------------------------------------- */

.panel-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.28);
  z-index: 200;
}

.panel {
  width: min(440px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-left: 1px solid var(--separator);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}

.panel__header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--separator);
  z-index: 1;
}

.panel__header h3 {
  margin: 0;
  overflow: hidden;
  color: var(--label);
  font-size: var(--text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
}

.panel-fields {
  margin: 0;
}

/*
  dt/ddを横並びにすると、3カラムで幅が縮んだ左カラムでは
  「佐々木 涼」のような4文字の値すら省略記号で切れ、プロパティ欄が「値を読む場所」として
  機能しなくなっていた。ラベルを上・値を下に置くスタックへ変更し、値は折り返して全文を読める
  ようにする（HubSpotのプロパティパネルと同じ作法）。幅を広げるだけでは長い社名でいずれ
  再発するため、レイアウトそのものを変える。
*/
.panel-fields__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--separator);
  font-size: var(--text-sm);
}

.panel-fields__row:last-child {
  border-bottom: 0;
}

.panel-fields__row dt {
  flex: 0 0 auto;
  color: var(--label-secondary);
  font-size: var(--text-xs);
}

.panel-fields__row dd {
  margin: 0;
  overflow: visible;
  color: var(--label);
  font-weight: 600;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* dd の中身がインライン編集トリガー／入力欄のときも、省略せず折り返して読める・編集できるようにする
   （.inline-edit-trigger の既定はテーブル行での使用を想定した省略記号付きnowrapのため、
   プロパティ欄の文脈だけ上書きする）。 */
.panel-fields__row dd .inline-edit-trigger,
.panel-fields__row dd .input--inline-edit {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
  word-break: break-word;
}

.panel-advance {
  width: 100%;
}

.panel-section h4 {
  margin: 0 0 var(--space-2);
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 650;
}

.panel-next {
  margin: 0 0 var(--space-1);
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 600;
}

.panel-next-meta {
  margin: 0;
  font-size: var(--text-xs);
}

.panel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.panel-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--separator);
}

.panel-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.panel-list__empty {
  padding: 0;
  border-bottom: 0;
}

.panel-list__date {
  flex: 0 0 auto;
  color: var(--label-tertiary);
  font-variant-numeric: tabular-nums;
}

.panel-todo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.panel-todo input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-strong);
}

/* --------------------------------------------------------------------------
   AI由来の控えめな印（色は使わず、hairlineの淡いタグのみ）
   -------------------------------------------------------------------------- */

.source-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--separator);
  border-radius: var(--radius-full);
  color: var(--label-tertiary);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.03em;
  line-height: 1.6;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   期限超過・完了済み（文字色のみ。背景色の帯は使わない）
   -------------------------------------------------------------------------- */

.due-overdue {
  color: var(--danger);
  font-weight: 650;
}

.task-done {
  color: var(--label-tertiary);
  text-decoration: line-through;
}

/* .data-table tbody td { color: var(--label); } は同じ特異性の別セレクタが
   ファイル内に複数あり、後勝ちでどれが効くか予測しづらい。ToDoテーブルのセル文字色は
   確実に上書きできるよう、テーブル文脈だけ特異性を1段上げておく。 */
.data-table tbody td.due-overdue {
  color: var(--danger);
}

.data-table tbody td.task-done {
  color: var(--label-tertiary);
}

/* --------------------------------------------------------------------------
   テキストリンク風ボタン（表の中で他の商談へ飛ぶ用途）
   -------------------------------------------------------------------------- */

.link-btn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--link);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.link-btn:hover {
  text-decoration: underline;
}

.link-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   選択中の行（顧客一覧）。色ではなく中立トーンのbg-activeのみで示す。
   行頭に選択チェックボックス列が付いてからは、tr全体ではなくクリック可能なセル自体に付ける
   （trに付けるとチェックボックスの列まで「行を開くクリック領域」に含まれてしまうため）。
   -------------------------------------------------------------------------- */

.data-table tbody .is-selected {
  background: var(--bg-active);
}

/* --------------------------------------------------------------------------
   クリック可能なセル（商談名・会社名など）にホバー・フォーカスの手がかりを与える
   -------------------------------------------------------------------------- */

.data-table tbody [data-deal-id],
.data-table tbody [data-customer-id] {
  cursor: pointer;
}

.data-table tbody [data-deal-id]:focus-visible,
.data-table tbody [data-customer-id]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

@media (max-width: 900px) {
  .board__col {
    flex: 1 1 180px;
    min-width: 180px;
  }
}

@media (max-width: 560px) {
  .panel {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seg-toggle__btn,
  .board__card {
    transition: none;
  }
}

/* ==========================================================================
   メモ取込（抽出→差分プレビュー→反映）
   confidenceは装飾バーにせず「読み取れた項目 N/6」の文字で出す。変わる行の強調も
   ブランド色ではなく中立なbg-hover＋太字だけで示す（.data-table tbody tr.is-selected と同じ考え方）。
   ========================================================================== */

.ai-note-textarea {
  min-height: 220px;
  line-height: var(--leading-normal);
  resize: vertical;
}

.ai-diff-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-3);
}

.ai-diff-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr auto 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--separator);
  font-size: var(--text-sm);
}

.ai-diff-row:last-child {
  border-bottom: 0;
}

.ai-diff-row__label {
  color: var(--label-secondary);
  font-weight: 500;
}

.ai-diff-row__before {
  color: var(--label-tertiary);
}

.ai-diff-row__arrow {
  color: var(--label-tertiary);
}

.ai-diff-row__after {
  overflow-wrap: anywhere;
  color: var(--label);
}

/* 変わる行だけ強調する。色帯ではなく中立な背景と太字で示す（ブランド色は使わない） */
.ai-diff-row--changed {
  background: var(--bg-hover);
  border-radius: var(--radius-sm);
}

.ai-diff-row--changed .ai-diff-row__after {
  font-weight: 700;
}

.ai-unknown {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--separator);
}

.ai-unknown h4 {
  margin: 0 0 var(--space-2);
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 650;
}

.ai-unknown ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-unknown li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--separator);
  border-radius: var(--radius-full);
  color: var(--label-secondary);
  font-size: var(--text-xs);
}

.ai-empty {
  margin: 0 0 var(--space-4);
  color: var(--label-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ai-apply-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
}

.ai-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 640px) {
  .ai-diff-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .ai-diff-row__arrow {
    display: none;
  }
}

/* ==========================================================================
   AIアシスタント（自然言語での問い合わせ）
   回答は「答えの1文→表→根拠の注記」の順。装飾は使わず、質問・回答とも通常のテキストで積む。
   ========================================================================== */

.ai-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ai-chat__form {
  display: flex;
  gap: var(--space-3);
}

.ai-chat__form .input {
  flex: 1 1 auto;
}

.ai-chat__privacy-note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
}

.ai-chat__history {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.ai-chat__question {
  margin: 0 0 var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.ai-chat__answer {
  margin: 0 0 var(--space-4);
  color: var(--label);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-normal);
}

.ai-chat__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ai-chat__note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
}

@media (max-width: 640px) {
  .ai-chat__form {
    flex-direction: column;
  }
}

/* ==========================================================================
   マスタ・レポート・設定
   ========================================================================== */

.report-stat-row {
  display: flex;
  gap: var(--space-4);
}

.report-stat {
  flex: 1 1 0;
  padding: var(--space-4);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
}

.report-stat__label {
  margin-bottom: var(--space-1);
  color: var(--label-secondary);
  font-size: var(--text-sm);
}

.report-stat__value {
  color: var(--label);
  font-size: var(--text-lg);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .report-stat-row {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   印刷対応（レポート）：サイドバー・ナビ・ボタン・フッターを消し、本文だけを残す。
   .btn を丸ごと隠すため、印刷結果にはどのビューのボタンも出ない（レポート以外を
   誤って印刷しても操作系が写り込まない、という意味で安全側に倒している）。
   -------------------------------------------------------------------------- */

@media print {
  /* 依頼「印刷しようとすると青色の部分が消える」対応：背景色・塗り色は既定でブラウザに
     間引かれる（インク節約の既定挙動）。print-color-adjust: exact を効かせて、
     バッジ・チャートの塗り・KPIのアクセント等をそのまま印刷に残す。 */
  html {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  * {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .app__sidebar,
  .topbar,
  .app__footer,
  .nav,
  .view-head__actions,
  .btn {
    display: none !important;
  }

  .app {
    display: block !important;
  }

  .app__main {
    display: block !important;
    min-height: 0 !important;
  }

  .app__content {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .card {
    break-inside: avoid;
  }
}

/* ==========================================================================
   13. 一覧の基盤（保存ビュー・フィルター・一括操作・機能色）
   既存のアクセント青（操作用）とは混ぜず、識別専用の新しいトークンを足す。
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 機能色トークン（Light）
   フェーズ5段階は寒色→暖色。確度・期限は既存のsuccess/warning/dangerを再利用し
   （意味がほぼ重なるため新色を増やさない）、フェーズと活動種別だけ新規に定義する。
   -------------------------------------------------------------------------- */

:root {
  --func-phase-lead-fg: #4338ca;
  --func-phase-lead-bg: rgba(99, 102, 241, 0.14);
  --func-phase-hearing-fg: #0e7490;
  --func-phase-hearing-bg: rgba(8, 145, 178, 0.14);
  --func-phase-proposal-fg: #4d7c0f;
  --func-phase-proposal-bg: rgba(101, 163, 13, 0.14);
  --func-phase-quote-fg: #b45309;
  --func-phase-quote-bg: rgba(217, 119, 6, 0.14);
  --func-phase-negotiation-fg: #c2410c;
  --func-phase-negotiation-bg: rgba(234, 88, 12, 0.14);

  --func-due-soon: var(--warning);

  --func-activity-visit: #0d9488;
  --func-activity-call: #7c3aed;
  --func-activity-mail: #c026d3;
  --func-activity-online: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --func-phase-lead-fg: #a5b4fc;
    --func-phase-lead-bg: rgba(129, 140, 248, 0.22);
    --func-phase-hearing-fg: #67e8f9;
    --func-phase-hearing-bg: rgba(34, 211, 238, 0.2);
    --func-phase-proposal-fg: #bef264;
    --func-phase-proposal-bg: rgba(163, 230, 53, 0.18);
    --func-phase-quote-fg: #fcd34d;
    --func-phase-quote-bg: rgba(251, 191, 36, 0.2);
    --func-phase-negotiation-fg: #fdba74;
    --func-phase-negotiation-bg: rgba(251, 146, 60, 0.2);

    --func-activity-visit: #2dd4bf;
    --func-activity-call: #a78bfa;
    --func-activity-mail: #e879f9;
    --func-activity-online: #60a5fa;
  }
}

:root[data-theme="dark"] {
  --func-phase-lead-fg: #a5b4fc;
  --func-phase-lead-bg: rgba(129, 140, 248, 0.22);
  --func-phase-hearing-fg: #67e8f9;
  --func-phase-hearing-bg: rgba(34, 211, 238, 0.2);
  --func-phase-proposal-fg: #bef264;
  --func-phase-proposal-bg: rgba(163, 230, 53, 0.18);
  --func-phase-quote-fg: #fcd34d;
  --func-phase-quote-bg: rgba(251, 191, 36, 0.2);
  --func-phase-negotiation-fg: #fdba74;
  --func-phase-negotiation-bg: rgba(251, 146, 60, 0.2);
  --func-activity-visit: #2dd4bf;
  --func-activity-call: #a78bfa;
  --func-activity-mail: #e879f9;
  --func-activity-online: #60a5fa;
}

:root[data-theme="light"] {
  --func-phase-lead-fg: #4338ca;
  --func-phase-lead-bg: rgba(99, 102, 241, 0.14);
  --func-phase-hearing-fg: #0e7490;
  --func-phase-hearing-bg: rgba(8, 145, 178, 0.14);
  --func-phase-proposal-fg: #4d7c0f;
  --func-phase-proposal-bg: rgba(101, 163, 13, 0.14);
  --func-phase-quote-fg: #b45309;
  --func-phase-quote-bg: rgba(217, 119, 6, 0.14);
  --func-phase-negotiation-fg: #c2410c;
  --func-phase-negotiation-bg: rgba(234, 88, 12, 0.14);
  --func-activity-visit: #0d9488;
  --func-activity-call: #7c3aed;
  --func-activity-mail: #c026d3;
  --func-activity-online: #2563eb;
}

/* --------------------------------------------------------------------------
   13.2 フェーズバッジ（背景は薄く・文字は濃く。テキストのフェーズ名は必ず併記する）
   -------------------------------------------------------------------------- */

.phase-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 650;
  white-space: nowrap;
}

.phase-badge--lead { color: var(--func-phase-lead-fg); background: var(--func-phase-lead-bg); }
.phase-badge--hearing { color: var(--func-phase-hearing-fg); background: var(--func-phase-hearing-bg); }
.phase-badge--proposal { color: var(--func-phase-proposal-fg); background: var(--func-phase-proposal-bg); }
.phase-badge--quote { color: var(--func-phase-quote-fg); background: var(--func-phase-quote-bg); }
.phase-badge--negotiation { color: var(--func-phase-negotiation-fg); background: var(--func-phase-negotiation-bg); }

/* 決着済み（受注／失注）は既存の中立バッジのまま。フェーズの機能色と混同させない */
.phase-badge--closed {
  color: var(--label-secondary);
  background: var(--bg-hover);
}

/* --------------------------------------------------------------------------
   13.3 期限の色（今日〜3日は橙。文字色のみ、帯は使わない）
   -------------------------------------------------------------------------- */

.due-soon {
  color: var(--func-due-soon);
  font-weight: 650;
}

.data-table tbody td.due-soon {
  color: var(--func-due-soon);
}

/* --------------------------------------------------------------------------
   13.4 活動種別（アイコン＋色。文字ラベルは常に併記する）
   -------------------------------------------------------------------------- */

.activity-type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 500;
}

.activity-type__icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.activity-type--visit { color: var(--func-activity-visit); }
.activity-type--call { color: var(--func-activity-call); }
.activity-type--mail { color: var(--func-activity-mail); }
.activity-type--online { color: var(--func-activity-online); }

/* --------------------------------------------------------------------------
   13.5 保存ビュー（横並びタブ）
   -------------------------------------------------------------------------- */

.view-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--separator);
  padding-bottom: 0;
}

.view-tabs__item {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.view-tabs__btn {
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.view-tabs__btn:hover {
  color: var(--label);
  background: var(--bg-hover);
}

.view-tabs__item--active .view-tabs__btn {
  color: var(--label);
  font-weight: 650;
  border-bottom-color: var(--accent-strong);
}

.view-tabs__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--label-tertiary);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.view-tabs__remove:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.view-tabs__add {
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  color: var(--label-tertiary);
  font-size: var(--text-md);
  cursor: pointer;
}

.view-tabs__add:hover {
  color: var(--accent-strong);
}

.view-tabs__addform {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.view-tabs__addinput {
  width: auto;
  min-width: 140px;
}

/* --------------------------------------------------------------------------
   13.6 クイックフィルターバー・件数
   -------------------------------------------------------------------------- */

.list-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.quick-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-1);
}

.quick-filter__select {
  width: auto;
  min-width: 128px;
}

.filter-btn--active {
  background: var(--bg-active);
  color: var(--label);
}

.list-controls__count {
  margin-inline-start: auto;
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13.7 適用中の条件（チップ）
   -------------------------------------------------------------------------- */

.chip-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--separator);
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  color: var(--label);
  font-size: var(--text-xs);
  font-weight: 500;
}

.chip__remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--label-tertiary);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}

.chip__remove:hover {
  color: var(--danger);
}

.chip--clear {
  background: none;
  border-style: dashed;
  color: var(--label-secondary);
  cursor: pointer;
}

.chip--clear:hover {
  color: var(--label);
  border-color: var(--separator-opaque);
}

/* --------------------------------------------------------------------------
   13.8 詳細フィルターパネル（右からのシート。商談詳細パネルの.panelと同系統）
   -------------------------------------------------------------------------- */

.filter-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-elevated);
  border-left: 1px solid var(--separator);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  z-index: 190;
}

.filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-panel__head h3 {
  margin: 0;
}

.filter-panel__mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.seg-toggle--sm .seg-toggle__btn {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.filter-panel__rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.filter-rule {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-2);
  align-items: center;
}

.filter-rule .select,
.filter-rule .input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 560px) {
  .filter-rule {
    grid-template-columns: 1fr;
  }
  .filter-panel {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   13.9 一括操作ツールバー
   -------------------------------------------------------------------------- */

.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--bg-active);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
}

.bulk-toolbar__count {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--label);
}

.bulk-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   13.10 行選択チェックボックス
   -------------------------------------------------------------------------- */

.data-table th.select-col,
.data-table td.select-col {
  width: 40px;
  padding-right: 0;
}

/* --------------------------------------------------------------------------
   13.11 折り返し禁止セル（会社名・担当者名・日付）
   会社名の「株式会」「社」、日付の「2026-07-」「14」のように、単語の途中で
   折り返るのは業務ソフトとして見せられない。列幅が足りない場合は
   .data-table__scroll の横スクロールで逃がす（テーブル全体は既に横スクロール対応済み）。
   -------------------------------------------------------------------------- */

.data-table td.cell-nowrap {
  white-space: nowrap;
}

/* nowrapにはしない（商談名等は本来長くなり得るため）が、隣接するnowrapセルに幅を奪われて
   1〜2文字ごとに折り返る事故を防ぐ最低幅は確保する。 */
.data-table td.cell-minwidth {
  min-width: 15ch;
}

.data-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-strong);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .view-tabs__btn,
  .chip,
  .filter-panel {
    transition: none;
  }
}

/* ==========================================================================
   14. レコード詳細の3カラム・インライン編集・
       顧客の行操作・次のアクションとタイムライン
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1 インライン編集（クリックで編集→Enterで確定・Escで取消）
   -------------------------------------------------------------------------- */

.inline-edit-trigger {
  display: inline-block;
  max-width: 100%;
  padding: 2px 4px;
  margin: -2px -4px;
  overflow: hidden;
  border: 1px dashed transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.inline-edit-trigger:hover,
.inline-edit-trigger:focus-visible {
  border-color: var(--separator-opaque);
  background: var(--bg-hover);
  outline: none;
}

.input--inline-edit {
  min-width: 8ch;
  padding: 4px 8px;
}

/* --------------------------------------------------------------------------
   14.2 顧客一覧の行末「⋮」メニュー
   -------------------------------------------------------------------------- */

.row-menu-col {
  width: 40px;
  padding-inline: 0;
  text-align: center;
}

.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--label-secondary);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}

.row-menu-btn:hover,
.row-menu-btn:focus-visible {
  background: var(--bg-hover);
  color: var(--label);
  outline: none;
}

.row-menu-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.row-menu-item {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--label);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.row-menu-item:hover,
.row-menu-item:focus-visible {
  background: var(--bg-hover);
  outline: none;
}

.row-menu-item--danger {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   14.3 顧客を追加フォーム
   -------------------------------------------------------------------------- */

.customer-add-form {
  margin-bottom: var(--space-5);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 var(--space-4);
}

.customer-add-form__actions {
  display: flex;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   14.4 レコード詳細の3カラム（顧客・商談で共通。ui/record-panel.js）
   -------------------------------------------------------------------------- */

.panel--record {
  width: min(1120px, 96vw);
}

.record-panel__header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.record-panel__header-main h3 {
  margin: 0 0 var(--space-1);
  white-space: normal;
}

.record-panel__header-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-sm);
}

.record-panel__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.record-panel__body {
  display: grid;
  /* 右カラム（関連レコード）は件数チップだけで幅を余らせがちな一方、
     左カラム（プロパティ）は値を読む場所。右から左へ再配分する（260→220 / 280→320）。 */
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(180px, 220px);
  align-items: start;
  gap: var(--space-6);
}

.record-panel__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.record-panel__more {
  margin-top: var(--space-3);
}

.record-panel__more summary,
.record-history summary,
.related-group summary {
  color: var(--label-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.record-panel__more summary:focus-visible,
.record-history summary:focus-visible,
.related-group summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--radius-sm);
}

.record-panel__more .panel-fields {
  margin-top: var(--space-3);
}

@media (max-width: 900px) {
  .panel--record {
    width: min(680px, 96vw);
  }
  .record-panel__body {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   14.5 関連レコード（右カラム。件数つき折りたたみ・クリックで相手のレコードへ移動）
   -------------------------------------------------------------------------- */

.record-panel__related {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.related-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--separator);
}

.related-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--bg-active);
  color: var(--label);
  font-size: var(--text-xs);
  font-weight: 650;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.related-item {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--separator);
}

.related-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   14.6 次のアクション（期日×担当者）
   -------------------------------------------------------------------------- */

.next-action-list {
  gap: var(--space-3);
}

.next-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--separator);
}

.next-action-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.next-action-row__owner {
  flex: 0 0 auto;
  color: var(--label-secondary);
  font-size: var(--text-xs);
}

.next-action-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.next-action-add .input,
.next-action-add .select {
  width: auto;
  flex: 1 1 140px;
}

.next-action-add__actions {
  display: flex;
  gap: var(--space-2);
}

.record-history {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   14.7 タイムライン（活動・メモ取込・フェーズ変更・ToDo完了）
   -------------------------------------------------------------------------- */

.timeline-filter-row {
  margin-bottom: var(--space-3);
}

.chip--filter {
  border: 1px solid var(--separator);
  background: var(--bg-elevated);
  cursor: pointer;
}

.chip--filter-active {
  border-color: var(--accent);
  background: var(--info-bg);
  color: var(--badge-info-fg);
  font-weight: 650;
}

.timeline-list {
  gap: var(--space-3);
}

.timeline-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--separator);
}

.timeline-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.timeline-item__type {
  flex: 0 0 auto;
  color: var(--label-secondary);
  font-size: var(--text-xs);
  font-weight: 650;
}

.timeline-item__summary {
  color: var(--label);
}

/* 種別ごとの識別は色だけに頼らない（テキストの type ラベルを必ず併記済み）。ここでは
   タイムラインの日付部分にだけ、控えめな左ボーダーで種別を補助的に示す（背景は塗らない）。 */
.timeline-item--phase_change .panel-list__date { border-inline-start: 2px solid var(--func-phase-proposal-fg); padding-inline-start: var(--space-2); }
.timeline-item--task_done .panel-list__date { border-inline-start: 2px solid var(--success); padding-inline-start: var(--space-2); }
.timeline-item--note_import .panel-list__date { border-inline-start: 2px solid var(--accent); padding-inline-start: var(--space-2); }
.timeline-item--activity .panel-list__date { border-inline-start: 2px solid var(--separator-opaque); padding-inline-start: var(--space-2); }

/* --------------------------------------------------------------------------
   14.8 顧客詳細ヘッダーのタグチップ（静的表示。削除ボタンは持たない）
   -------------------------------------------------------------------------- */

.chip--static {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .row-menu-btn,
  .inline-edit-trigger,
  .chip--filter {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   商談ボードの横スクロールの手がかり。
   .board は overflow-x: auto で横スクロールできるが、初見では右にもう1列あることに
   気づけない。右端に薄いフェードを重ねて示す（影・アニメーションは付けない。
   実際にスクロールできるときだけ pipeline.js 側が --scrollable を付ける）。
   -------------------------------------------------------------------------- */

.board-scroll {
  position: relative;
}

.board-scroll__fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  opacity: 0;
}

.board-scroll--scrollable .board-scroll__fade {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   15. CSVインポート。ファイル選択→列マッピング→プレビュー→取込の4段ダイアログ。
   商談詳細パネル（.panel-overlay/.panel）と同系統だが、サイドシートではなく中央のダイアログにする。
   -------------------------------------------------------------------------- */

.import-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(0, 0, 0, 0.28);
  z-index: 300; /* 商談・顧客詳細パネル（200）より前面 */
}

.import-dialog {
  width: min(720px, 100%);
  max-height: min(85vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.import-dialog__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--separator);
}

.import-dialog__head h3 {
  margin: 0;
}

.import-dialog__step {
  margin: 2px 0 0;
  color: var(--label-tertiary);
  font-size: var(--text-xs);
}

.import-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6);
}

.import-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--separator-opaque);
  border-radius: var(--radius-md);
  background: var(--bg-grouped);
  color: var(--label-secondary);
  text-align: center;
  cursor: pointer;
}

.import-dropzone:hover {
  background: var(--bg-hover);
}

/* ドラッグ中のハイライト。装飾的な影は付けず、枠色と薄い背景だけで示す（ボードのdropoverと同じ考え方） */
.import-dropzone--over {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.import-dropzone__title {
  color: var(--label);
  font-weight: 650;
}

.import-dropzone__sub {
  font-size: var(--text-sm);
}

.import-error {
  margin: var(--space-3) 0 0;
  color: var(--danger);
  font-size: var(--text-sm);
}

/* エラー行：背景色（--danger-bg）と理由テキストの両方で示す（色だけに意味を持たせない） */
.import-row--error td {
  background: var(--danger-bg);
}

.import-row-errors {
  color: var(--danger);
  font-size: var(--text-xs);
}

.import-preview-table td,
.import-preview-table th {
  white-space: normal;
}

.import-result-summary {
  font-size: var(--text-base);
  font-weight: 650;
}

.import-result-reasons {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--label-secondary);
  font-size: var(--text-sm);
}

.settings-import-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 720px) {
  .import-overlay {
    padding: var(--space-3);
  }
  .import-dialog {
    max-height: 92vh;
  }
}

/* ==========================================================================
   17. 設定：左にセクションのナビ・右に内容の2ペイン。子ページは<details>アコーディオン。
   ========================================================================== */

.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: sticky;
  top: var(--space-4);
}

.settings-nav__item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--label);
  cursor: pointer;
}

.settings-nav__item:hover {
  background: var(--bg-hover);
}

.settings-nav__item--active {
  background: var(--bg-active);
  font-weight: 650;
}

.settings-nav__item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.settings-content {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-width: 0;
}

.settings-content__title {
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}

.settings-child {
  border-top: 1px solid var(--separator);
  padding: var(--space-4) 0;
}

.settings-child:first-of-type {
  border-top: none;
  padding-top: 0;
}

.settings-child > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-child > summary::-webkit-details-marker {
  display: none;
}

.settings-child > summary::before {
  content: '›';
  display: inline-block;
  color: var(--label-tertiary);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.settings-child[open] > summary::before {
  transform: rotate(90deg);
}

.settings-child > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.settings-child__body {
  padding-top: var(--space-4);
}

.settings-readonly-banner {
  background: var(--bg-hover);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--label-secondary);
  margin: 0 0 var(--space-4);
}

.settings-demo-notice {
  color: var(--warning);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.settings-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  cursor: pointer;
}

.settings-checkbox-row--inline {
  margin-bottom: 0;
}

.settings-bizday-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.settings-textarea {
  min-height: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  resize: vertical;
}

.settings-mask {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.settings-url-cell {
  max-width: 260px;
  overflow-wrap: anywhere;
}

.settings-row-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-code-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-3);
}

.settings-code {
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: pre;
  margin: 0;
}

@media (max-width: 860px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
}

/* 表示密度（コンパクト）。設定＞ユーザー設定＞表示から切り替える。一覧の行間だけを詰める。 */
.app--compact .data-table tbody td,
.app--compact .data-table thead th {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.app--compact .card {
  padding: var(--space-4);
}

/* ==========================================================================
   HubSpot実測値への適合・シェル改修（2026-08-03）
   crm/docs/2026-08-03-hubspot-ui-measurements.md の実測値に合わせる。
   ここから下はcascadeの末尾（最終上書き）。フォントファミリーは変えない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン追加・上書き（角丸・パディング・実測カラー）
   -------------------------------------------------------------------------- */

:root {
  /* カード・コンテナの角丸をHubSpot実測の8pxに統一（旧10px） */
  --radius-md: 8px;
  /* ボタン専用の角丸（HubSpot実測4px）。カード・コンテナ用の--radius-mdとは別に持つ */
  --radius-btn: 4px;

  /* シェルの横パディングは、この1トークンだけを全ビューが参照する。
     狭い画面での詰めは、このトークンの値を下の@mediaで差し替えるだけで全ビューに効く。 */
  --shell-px: var(--space-10); /* 40px */

  /* HubSpot実測の枠色・合図色（Light）。既存の--separator系（半透明）とは別に持つ */
  --border-container: #cccccc;    /* カード・コンテナの枠 */
  --border-control: #8a8a8a;      /* 入力欄・ボタンの枠 */
  --border-control-hover: #666666;
  --row-divider: #dfe3eb;         /* プロパティ行の区切り */
  --field-label-color: #516f90;   /* フローティングラベル */
  --edit-affordance: #00a4bd;     /* インライン編集：hover時の下線（ティール） */

  /* プライマリボタン（HubSpot実測：背景ほぼ黒・白文字） */
  --btn-primary-bg: #141414;
  --btn-primary-bg-hover: #2b2b2b;
  --btn-primary-fg: #ffffff;

  /* ボードカードの弱い影（「掴んで動かせる」機能的な浮き。ボードのカードに限って使う） */
  --board-card-shadow: 0 1px 8px rgba(20, 20, 20, 0.08);

  /* HubSpotのアイコンレールは背景#333だが、依頼主の指定で畳んでも白のままにしたため、
     レール専用の配色トークンは持たない。畳んだ状態も展開時と同じ--bg-elevated／--labelを使う。 */
}

@media (max-width: 1050px) {
  :root { --shell-px: var(--space-6); } /* 24px */
}

@media (max-width: 720px) {
  :root { --shell-px: var(--space-4); } /* 16px */
}

/* ダークモードの対応値（実測はライトのみのため、既存のダークトークン体系に沿って用意する） */
@media (prefers-color-scheme: dark) {
  :root {
    --border-container: #48484a;
    --border-control: #6e6e73;
    --border-control-hover: #98989d;
    --row-divider: #3a3a3c;
    --field-label-color: #8fa8c2;
    --edit-affordance: #35c7de;
    --btn-primary-bg: #f5f5f7;
    --btn-primary-bg-hover: #d8d8dc;
    --btn-primary-fg: #0b0b0c;
    --board-card-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --border-container: #48484a;
  --border-control: #6e6e73;
  --border-control-hover: #98989d;
  --row-divider: #3a3a3c;
  --field-label-color: #8fa8c2;
  --edit-affordance: #35c7de;
  --btn-primary-bg: #f5f5f7;
  --btn-primary-bg-hover: #d8d8dc;
  --btn-primary-fg: #0b0b0c;
  --board-card-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  --border-container: #cccccc;
  --border-control: #8a8a8a;
  --border-control-hover: #666666;
  --row-divider: #dfe3eb;
  --field-label-color: #516f90;
  --edit-affordance: #00a4bd;
  --btn-primary-bg: #141414;
  --btn-primary-bg-hover: #2b2b2b;
  --btn-primary-fg: #ffffff;
  --board-card-shadow: 0 1px 8px rgba(20, 20, 20, 0.08);
}

/* --------------------------------------------------------------------------
   2. タイポグラフィ（本文14px/24px・見出し20px/600・ラベル12px。太字を減らす）
   -------------------------------------------------------------------------- */

body {
  font-size: 14px;
  line-height: 24px;
}

.view-head h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   3. ボタン（HubSpot実測：12px/300・padding 8px 16px・高さ32px・角丸4px）
   プライマリはネイビー＋太字をやめ、背景#141414に寄せる。
   -------------------------------------------------------------------------- */

.btn {
  min-height: 32px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-btn);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0;
}

.btn--primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
}

.btn--sm {
  min-height: 28px;
  padding: var(--space-1) var(--space-3);
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   4. カード・コンテナの角丸を8pxに統一（ウィザードの.wizard/.choiceは対象外）
   -------------------------------------------------------------------------- */

.card,
.data-table__wrap,
.app__content > .choice-grid > .card.kpi,
.tile,
.pipeline__stage,
.kpi-group,
.import-dialog,
.settings-content {
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   5. 商談ボード（列の幅280px・カード264px・列ヘッダーは背景も枠も無し14px/300・
      カードには弱い影）
   -------------------------------------------------------------------------- */

.board__col {
  flex: 0 0 280px;
  width: 280px;
  min-width: 280px;
}

.board__col-head {
  background: transparent;
  border: 1px solid transparent;
  padding: 0 8px;
  min-height: 20px;
}

.board__col-title {
  font-size: 14px;
  font-weight: 300;
}

.board__cards {
  padding-inline: 8px;
}

.board__card {
  border-color: var(--border-container);
  border-radius: var(--radius-md);
  box-shadow: var(--board-card-shadow);
}

.board__card:hover {
  border-color: var(--border-control-hover);
}

/* --------------------------------------------------------------------------
   6. レコード詳細の3カラム幅（1200px時：左360px／中央500px／右280px）
      既存の@media(max-width:900px)の単カラム化と競合しないよう、901px以上でのみ効かせる。
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  .panel--record {
    width: min(1200px, 96vw);
  }
  .record-panel__body {
    grid-template-columns: 360px minmax(320px, 1fr) 280px;
  }
}

/* --------------------------------------------------------------------------
   7. インライン編集の合図（最重要）：箱で囲わず、下線で示す。
      hover・:focus-visible・タッチ端末（hover無し）の3経路すべてで同じ合図を出す。
   -------------------------------------------------------------------------- */

.inline-edit-trigger {
  padding: 2px 4px 3px;
  margin: -2px -4px 0;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.inline-edit-trigger:hover {
  border-color: transparent;
  border-bottom-color: var(--edit-affordance);
  background: none;
}

.inline-edit-trigger:focus-visible {
  border-bottom-color: var(--edit-affordance);
  background: none;
}

/* タッチ端末はhoverが発生しないため、編集できる値には常時うっすら下線を出す */
@media (hover: none) {
  .inline-edit-trigger {
    border-bottom-color: color-mix(in srgb, var(--edit-affordance) 45%, transparent);
  }
}

/* プロパティのラベル・値（HubSpotのフローティングラベルに寄せる） */
.panel-fields__row dt {
  color: var(--field-label-color);
  font-size: 12px;
  font-weight: 400;
}

.panel-fields__row dd {
  font-weight: 400;
}

.panel-fields__row {
  border-bottom-color: var(--row-divider);
}

/* --------------------------------------------------------------------------
   8. サイドバーの折りたたみ（畳んだ状態は64pxのアイコンレール）
      畳んだ状態はlocalStorageに保存（ui/shell.js）。モバイル幅（横並びナビ）では無効化する。

      HubSpotのレールは背景#333だが、依頼主の指定で**畳んでも白のまま**にする。
      幅・配色・ラベルの畳み方はこのファイル末尾で定義しており、ここでは
      レイアウトの土台（position）だけを持つ。
   -------------------------------------------------------------------------- */

@media (min-width: 721px) {
  .app__sidebar {
    position: relative;
  }

  .app__sidebar--collapsed {
    min-width: 64px;
  }

  .app__sidebar--collapsed .app__sidebar-brand {
    justify-content: center;
    padding-inline: 0;
    gap: 0;
  }
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: var(--space-1);
  margin: 0 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--label-tertiary);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}

.sidebar-toggle:hover {
  background: var(--bg-hover);
  color: var(--label);
}

.sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* 畳んだ状態の配色は末尾で展開時と同じ（白背景）に揃えている。 */

/* モバイル幅（サイドバーが横並びに変わる既存レイアウト）では折りたたみUIを出さない */
@media (max-width: 720px) {
  .sidebar-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9. 上部検索（横断検索。HubSpot実測：幅548px・高さ30px・padding-left:16px）
   -------------------------------------------------------------------------- */

.topbar__search {
  position: relative;
  flex: 1 1 240px;
  max-width: 548px;
  min-width: 160px;
  margin-inline: var(--space-4);
}

.topbar__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--label-tertiary);
  pointer-events: none;
}

.topbar__search-icon .icon {
  width: 100%;
  height: 100%;
}

.topbar__search-input {
  width: 100%;
  height: 30px;
  padding: 0 var(--space-3) 0 36px;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--label);
  font-size: var(--text-sm);
}

.topbar__search-input::placeholder {
  color: var(--label-tertiary);
}

.topbar__search-input:hover {
  border-color: var(--border-control-hover);
}

.topbar__search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.topbar__search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-container);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 360px;
  overflow-y: auto;
}

.topbar__search-results[hidden] {
  display: none;
}

.topbar__search-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--label);
  font-size: var(--text-sm);
  cursor: pointer;
}

.topbar__search-result:hover,
.topbar__search-result--active {
  background: var(--bg-hover);
}

.topbar__search-result-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--label-tertiary);
}

.topbar__search-result-icon .icon {
  width: 100%;
  height: 100%;
}

.topbar__search-result-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__search-result-kind {
  flex: 0 0 auto;
  color: var(--label-tertiary);
  font-size: var(--text-xs);
}

.topbar__search-empty {
  padding: var(--space-3);
  color: var(--label-tertiary);
  font-size: var(--text-sm);
}

/* 狭幅では検索欄を見出し行の下へ回す。
   flex-basis を 100% にすると、この基底幅が .topbar の内容幅より広く解決され、
   検索欄だけが topbar の外へ184px突き出して画面全体が横スクロールする。
   基底は auto に戻し、幅は width で指定する。min-width:0 は縮小を許すため。 */
@media (max-width: 720px) {
  .topbar__search {
    order: 3;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   10. 横パディングの統一：全ビューが--shell-pxだけを参照する。
       上のトークン差し替え（1050px/720px）で狭い画面では自動的に詰まる。
   -------------------------------------------------------------------------- */

.app__content {
  padding-left: var(--shell-px);
  padding-right: var(--shell-px);
}

.topbar {
  padding-left: var(--shell-px);
  padding-right: var(--shell-px);
}

/* --------------------------------------------------------------------------
   11. 印刷での色残しはこのファイル前方の@media printブロックに実装済み。
   -------------------------------------------------------------------------- */

/* ==========================================================================
   担当者・商材の追加フォーム／MTGリンク／AIに渡す構造化データ（2026-08-04）
   ========================================================================== */

/* 担当者・商材の追加フォームのボタン列（customers.jsの.customer-add-form__actionsと同じ見た目）。
   view固有のprefixは残しつつ、レイアウトのCSSだけ小さく重複させる（クラス名の使い回しはしない）。 */
.owner-add-form__actions,
.product-add-form__actions {
  display: flex;
  gap: var(--space-3);
}

/* 商材カテゴリの「新しいカテゴリです」案内（追加フォーム内）。 */
.field-note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   MTGリンク（商談詳細パネル）
   -------------------------------------------------------------------------- */

.mtg-link-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mtg-link-value {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-container, var(--separator));
  border-radius: var(--radius-md);
  background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.mtg-link-note {
  margin: var(--space-2) 0 0;
}

/* --------------------------------------------------------------------------
   AIに渡す商談データ（商談詳細パネル下部・折りたたみ）。コードブロックはHubSpot実測どおり
   等幅フォント・枠#ccc・角丸8pxに合わせる（crm/docs/2026-08-03-hubspot-ui-measurements.md）。
   -------------------------------------------------------------------------- */

.record-panel__footer {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--separator);
  margin-top: var(--space-2);
}

.record-panel__footer .ai-context {
  padding-top: var(--space-5);
}

.record-panel__footer summary {
  color: var(--label);
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
}

.record-panel__footer summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--radius-sm);
}

.ai-context__body {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ai-context__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ai-context__count {
  margin-inline-end: auto;
}

.ai-context-code-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border-container, var(--separator));
  border-radius: var(--radius-md);
}

.ai-context-code {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  white-space: pre;
}

@media (max-width: 900px) {
  .record-panel__footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ==========================================================================
   P4: 指摘反映（2026-08-04）
   1. サイドバーは畳んでも白のまま・開閉を滑らかに
   2. 横パディングをHubSpot実測（24px・幅いっぱい）に合わせる
   3. ボードの列を畳んだら、実際に左右へ圧縮する
   4. 一覧で触れるセルは、hoverで枠を出す（HubSpot実測 inset 0 0 0 1px #666）
   ========================================================================== */

/* --------------------------------------------------------------------------
   . サイドバーの折りたたみ

   - 畳んでも背景は白（--bg-elevated）のまま。#333のレールは使わない。
   - 幅の変化をアニメーションさせるため、.appのグリッド列は auto にして
     サイドバー自身のwidthを動かす（grid-template-columnsの補間はブラウザ差があるため避ける）。
   - 文字ラベルは display:none だとアニメーションできないので、max-width＋opacityで畳む。
   - 開閉時にシェルを作り直すとtransitionが走らないため、ui/shell.jsはクラスの付け外しだけを行う。
   -------------------------------------------------------------------------- */

@media (min-width: 721px) {
  .app,
  .app--sidebar-collapsed {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .app__sidebar {
    width: 240px;
    min-width: 0;
    overflow-x: hidden;
    background: var(--bg-elevated);
    transition:
      width var(--duration-base) var(--ease-standard),
      padding var(--duration-base) var(--ease-standard);
  }

  /* 畳んだ状態：64pxのアイコンレール。色は白のままにする（依頼主の指定）。 */
  .app__sidebar--collapsed {
    width: 64px;
    padding-inline: var(--space-2);
    background: var(--bg-elevated);
    border-right-color: var(--separator);
  }

  /* 畳んだときの gap: 0 は、幅0にした社名テキストとの隙間が残ると
     ロゴがその半分（4px）だけ左に寄って、下のトグルと軸がずれるため。 */
  .app__sidebar--collapsed .app__sidebar-brand {
    justify-content: center;
    padding-inline: 0;
    gap: 0;
  }

  /* 文字ラベル（ブランド名・グループ名・項目名）は幅と不透明度で畳む */
  .app__sidebar-brand-text,
  .nav__text {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition:
      max-width var(--duration-base) var(--ease-standard),
      opacity calc(var(--duration-base) * 0.6) var(--ease-standard);
  }

  .app__sidebar--collapsed .app__sidebar-brand-text,
  .app__sidebar--collapsed .nav__text {
    max-width: 0;
    opacity: 0;
  }

  .nav-group__label {
    overflow: hidden;
    max-height: 2rem;
    opacity: 1;
    transition:
      max-height var(--duration-base) var(--ease-standard),
      opacity calc(var(--duration-base) * 0.6) var(--ease-standard),
      margin var(--duration-base) var(--ease-standard);
  }

  .app__sidebar--collapsed .nav-group__label {
    max-height: 0;
    margin-block: 0;
    opacity: 0;
  }

  .app__sidebar--collapsed .nav__item {
    justify-content: center;
    padding: var(--space-2);
  }

  /* 白背景のままなので、畳んだ状態でも配色は展開時と同じにする（レール色の上書きを打ち消す） */
  .app__sidebar--collapsed .nav__item,
  .app__sidebar--collapsed .sidebar-toggle {
    color: var(--label-secondary);
  }

  .app__sidebar--collapsed .nav__item:hover,
  .app__sidebar--collapsed .sidebar-toggle:hover {
    background: var(--bg-hover);
    color: var(--label);
  }

  .app__sidebar--collapsed .nav__item--active,
  .app__sidebar--collapsed .nav__item--active:hover {
    background: var(--bg-active, var(--bg-hover));
    color: var(--label);
  }

  .app__sidebar--collapsed .nav__icon,
  .app__sidebar--collapsed .nav__item:hover .nav__icon,
  .app__sidebar--collapsed .nav__item--active .nav__icon,
  .app__sidebar--collapsed .nav__item--active:hover .nav__icon {
    color: inherit;
  }
}

/* --------------------------------------------------------------------------
   . 横パディング（HubSpot実測：本体24px・max-widthによる中央寄せ無し）
   -------------------------------------------------------------------------- */

:root {
  --shell-px: var(--space-6); /* 24px（HubSpot実測） */
}

@media (max-width: 720px) {
  :root { --shell-px: var(--space-4); } /* 16px */
}

.app__content {
  max-width: none;
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   . ボードの列の折りたたみ

   .board__col に width/min-width:280px を後から入れたため、
   前方にある .board__col--collapsed（flex:0 0 40px）が打ち消されていた。
   同じ場所で両方を定義し直し、畳んだ列が本当に細くなるようにする。
   -------------------------------------------------------------------------- */

.board__col {
  transition:
    flex-basis var(--duration-base) var(--ease-standard),
    width var(--duration-base) var(--ease-standard),
    min-width var(--duration-base) var(--ease-standard);
}

.board__col--collapsed {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
}

/* 展開時の列ヘッダーはHubSpotに合わせて背景も枠も持たないが、畳んだ列は
   「閉じてある列」だと分かるように、薄い面と枠を付ける（何も無いと余白に見えるため）。 */
.board__col--collapsed .board__col-head {
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  background: var(--bg-grouped);
  border: 1px solid var(--border-container, var(--separator));
  border-radius: var(--radius-md);
}

.board__col--collapsed .board__col-collapse {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   . 一覧で触れるセルの合図（hoverで枠）

   HubSpotの一覧テーブル実測：
     td[data-editable-cell]:hover { box-shadow: inset 0 0 0 1px #666 }
     td[data-editable-cell]        { cursor: text }
   レコード詳細（プロパティ一覧）はティールの下線のまま。文脈で合図を変えるのはHubSpotも同じ。

   ここでは「その場で書き換えられるセル」と「押すと詳細が開くセル」の両方に枠を出し、
   カーソルの形（text／pointer）で違いを示す。
   -------------------------------------------------------------------------- */

.data-table tbody td:has(> .inline-edit-trigger),
.data-table tbody td:has(> .link-btn) {
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.data-table tbody td:has(> .inline-edit-trigger) { cursor: text; }
.data-table tbody td:has(> .link-btn) { cursor: pointer; }

.data-table tbody td:has(> .inline-edit-trigger):hover,
.data-table tbody td:has(> .link-btn):hover,
.data-table tbody td:has(> .inline-edit-trigger:focus-visible),
.data-table tbody td:has(> .link-btn:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--border-control-hover);
}

/* 編集中のセルは青枠（HubSpot実測 #016de1 相当。既存の--linkを使う） */
.data-table tbody td:has(> .input--inline-edit),
.data-table tbody td:has(> .select.input--inline-edit) {
  box-shadow: inset 0 0 0 1px var(--link);
}

/* 枠の中では、行ごとの下線ではなくセルの枠が合図になるので、下線は出さない */
.data-table tbody td > .inline-edit-trigger,
.data-table tbody td > .inline-edit-trigger:hover,
.data-table tbody td > .inline-edit-trigger:focus-visible {
  border-bottom-color: transparent;
}

.data-table tbody td > .inline-edit-trigger { cursor: text; }

/* hoverの無い端末では枠が出ないため、触れるセルに常時うっすら枠を出す */
@media (hover: none) {
  .data-table tbody td:has(> .inline-edit-trigger),
  .data-table tbody td:has(> .link-btn) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-control-hover) 35%, transparent);
  }
}

/* --------------------------------------------------------------------------
   . ウィザードの着地（guide.html からの導線）

   - .wizard__chosen … ここまでに選んだものを見せる。guide.htmlの「業態を選んで試す」は
     STEP2に着地するため、これが無いと選んだ業態が画面のどこにも出ない。
   - .wizard__resume … 保存データがあるときだけ出す「前回の続きから見る」。
     guideから来た人にはウィザードを出すが、作業途中の人が選び直しを強いられないようにする。
   -------------------------------------------------------------------------- */

.wizard__chosen {
  margin: 0;
  color: var(--label-secondary);
  font-size: var(--text-sm);
}

.wizard__chosen strong {
  color: var(--label);
  font-weight: 600;
}

.wizard__resume {
  margin: 0;
  padding-top: var(--space-2);
  text-align: center;
}

.wizard__resume-btn {
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-btn);
  background: none;
  color: var(--link);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.wizard__resume-btn:hover {
  text-decoration: underline;
}

.wizard__resume-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --------------------------------------------------------------------------
   11. 保存失敗の告知（2026-08-07）
       localStorageへ書けなかったときだけ body 直下に出す。#root の外に置くので
       再描画で消えない。画面を覆わず、下端に固定して操作の邪魔をしない。
   -------------------------------------------------------------------------- */

.save-alert {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  z-index: 200;
  max-width: min(720px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--label);
  font-size: var(--text-sm);
  line-height: 1.6;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
}

/* ダイアログ・ウィザード・メモ取込に出す入力上の注意（2026-08-07）。
   実データや認証情報を入れさせないための注記。目立たせすぎず、読み飛ばされない濃さにする。 */
.input-caution {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--bg-grouped);
  color: var(--label-secondary);
  font-size: var(--text-xs);
  line-height: 1.7;
}

.import-dialog__body > .input-caution,
.ai-note .input-caution {
  margin-top: 0;
  margin-bottom: var(--space-4);
}