/*
 * 祐ブランド — Apple 系ミニマル基調（Phase 18・2026-06-28）
 *
 * 設計：style-principles.md（祐ブランド規約 2026-06-28 版）
 * 実装計画：docs/superpowers/specs/2026-06-28-phase18-apple-ui-spec.md
 *
 * 構成
 *   §1 トークン（CSS 変数）
 *   §2 リセット・ベース
 *   §3 タイポ
 *   §4 レイアウト・コンテナ
 *   §5 ヘッダー・ナビ
 *   §6 タブ（一次・二次）
 *   §7 カード・セクション
 *   §8 ボタン
 *   §9 フォーム
 *   §10 テーブル
 *   §11 KPI カード
 *   §12 モーダル
 *   §13 トップページ・会社選択
 *   §14 状態表示（警告・成功）
 *   §15 ユーティリティ
 */


/* =========================================================================
 * §1 トークン（CSS 変数）
 * ========================================================================= */

:root {
  /* =====================================================================
   * Phase 21（2026-07-03）：Claude Design handoff「ティール×琥珀」トークン
   * 正本：cd-handoff/ui/project/Design Tokens.dc.html（方向案 1c）
   * ===================================================================== */

  /* ----- ブランド ----- */
  --color-primary:            #158578;  /* 主ボタン・選択状態・ロゴ */
  --color-primary-dark:       #0E6B60;  /* 主ボタンhover・淡色背景上の文字 */
  --color-primary-tint:       #E5F3F0;  /* 選択中ナビ・強調行・ホバー背景 */
  --color-primary-tint-border:#C4E3DC;  /* 強調行の罫線・点線枠 */
  --color-accent:             #DD9A2F;  /* メモ・注記限定 */
  --color-accent-tint:        #FBF1DE;
  --color-accent-dark:        #8A6215;

  /* ----- ベース ----- */
  --color-bg:                 #FAF9F4;
  --color-surface:            #FFFFFF;
  --color-surface-alt:        #F4F2E8;
  --color-surface-dim:        #F8F7F1;
  --color-row-subtotal:       #F8F8F2;
  --color-border:             #E4E2D6;
  --color-border-soft:        #EFEDE2;

  /* ----- テキスト ----- */
  --color-text:               #2E3532;
  --color-text-sub:           #6C7470;
  --color-text-faint:         #8F948E;

  /* ----- 意味色（マイナスは 赤＋△） ----- */
  --color-negative:           #CE4141;
  --color-negative-tint:      #FAECEC;
  --color-positive:           #1E8A55;
  --color-positive-tint:      #E8F5EE;

  /* ----- 形状・影 ----- */
  --radius-sm:        6px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --shadow-card:      0 1px 3px rgba(23, 36, 48, .05);
  --shadow-raise:     0 4px 14px rgba(23, 36, 48, .10);
  --focus-ring:       inset 0 0 0 2px var(--color-primary);

  /* =====================================================================
   * 旧トークンのエイリアス（Phase 18/19.5 の参照 226ヶ所を温存）
   * ===================================================================== */
  --brand-ink:        var(--color-primary);   /* 旧：強調墨 → 新：操作系ティール */
  --brand-gray:       var(--color-text-sub);
  --brand-accent:     var(--color-accent);    /* メモバッジ・コメント印＝琥珀 */

  --ink-1:            var(--color-text);
  --ink-2:            var(--color-text-sub);
  --ink-3:            var(--color-text-faint);
  --ink-4:            var(--color-border);
  --ink-5:            var(--color-border-soft);

  --bg-base:          var(--color-bg);
  --bg-surface:       var(--color-surface);
  --bg-subtle:        var(--color-surface-alt);

  --state-warn:       var(--color-negative);
  --state-info:       var(--color-text-sub);
  --state-success:    var(--color-positive);
  --state-muted:      var(--color-text-faint);

  /* ----- Chart.js／グラフ系列色（役割で固定・R030 機能識別性維持） ----- */
  --chart-1:          #4E86D8;  /* 売上（棒）／BS：総資産 */
  --chart-2:          #34A06E;  /* 限界利益（折れ線）／BS：純資産 */
  --chart-3:          #ED8B33;  /* 営業利益（折れ線）／BS：現預金 */
  --chart-4:          #9b59b6;  /* 労働分配率・純利益（紫・既存踏襲） */
  --chart-5:          #8F948E;  /* 補助（中立グレー） */
  --chart-grid:       #EFEEE6;
  --chart-axis:       #9AA09B;

  /* ----- 影（モーダル・ポップオーバー） ----- */
  --shadow-modal:     0 12px 32px rgba(23, 36, 48, .22);

  /* ----- 書体スタック（和文＝Noto Sans JP・数値＝Inter tabular-nums） ----- */
  --font-sans-jp:     "Noto Sans JP", "Inter", "Helvetica Neue", "Hiragino Kaku Gothic ProN",
                      "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;
  --font-num:         "Inter", "Noto Sans JP", sans-serif;
  --font-mono-num:    "Inter", "SF Mono", "Menlo", "Consolas", monospace;

  /* ----- サイズスケール ----- */
  --font-12:          12px;
  --font-13:          13px;
  --font-14:          14px;
  --font-15:          15px;
  --font-18:          18px;
  --font-22:          22px;
  --font-28:          28px;
  --font-num-display: 24px;

  /* ----- ウェイト3段 ----- */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-bold:      700;

  /* ----- 行間・字間 ----- */
  --line-body:        1.7;
  --line-heading:     1.3;
  --tracking-body:    0;
  --tracking-heading: -0.01em;

  /* ----- 余白（4pt グリッド） ----- */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          24px;
  --space-6:          32px;
  --space-7:          48px;
  --space-8:          64px;
  --space-9:          96px;

  /* ----- レイアウト ----- */
  --container-max:    1200px;
  --container-narrow:  800px;
  --radius:           var(--radius-md);   /* 旧 4px → 8px（ボタン・入力・ピル） */
  --hairline:           1px solid var(--ink-5);
  --rule-strong:        1px solid var(--ink-4);
}


/* =========================================================================
 * §2 リセット・ベース
 * ========================================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--bg-base);
  color: var(--ink-1);
  font-family: var(--font-sans-jp);
  font-size: var(--font-14);
  line-height: var(--line-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--ink-1);
  text-decoration: none;
}

a:hover {
  color: var(--ink-2);
}


/* =========================================================================
 * §3 タイポ
 * ========================================================================= */

/* Inter Variable Font の self-host
   ローカル fonts/ に Inter-Variable.woff2 と Inter-Italic-Variable.woff2 を置く。
   未配置でも OS の既定和文ゴシックにフォールバックして崩れない。 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("/static/fonts/Inter-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Inter-Italic-Variable.woff2") format("woff2-variations"),
       url("/static/fonts/Inter-Italic-Variable.woff2") format("woff2");
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ink-1);
}

h1 { font-size: var(--font-28); margin-bottom: var(--space-3); }
h2 { font-size: var(--font-22); margin-bottom: var(--space-3); }
h3 { font-size: var(--font-18); margin-bottom: var(--space-3); }
h4 { font-size: var(--font-15); margin-bottom: var(--space-2); }

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

small, .hint, .sub {
  font-size: var(--font-12);
  color: var(--ink-2);
}

strong, b { font-weight: var(--weight-bold); }

/* 全数値の縦揃え（死守ライン） */
.num,
.table-num,
.kpi-value,
.kpi-sub,
td,
.chart-axis-label,
input[type="number"],
input[type="text"][inputmode="numeric"] {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}


/* =========================================================================
 * §4 レイアウト・コンテナ
 * ========================================================================= */

.main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-7);
}

.section { display: block; }
.section + .section { margin-top: var(--space-7); }

.section-header {
  margin-bottom: var(--space-5);
}
.section-header h2 {
  font-size: var(--font-22);
  color: var(--ink-1);
  margin-bottom: var(--space-2);
}
.section-header p {
  color: var(--ink-2);
  font-size: var(--font-14);
}
.section-meta {
  color: var(--ink-2);
  font-weight: var(--weight-medium);
  font-size: var(--font-14);
}

@media (max-width: 768px) {
  .main { padding: var(--space-4); }
}


/* =========================================================================
 * §5 ヘッダー・ナビ
 * ========================================================================= */

.header {
  background: var(--color-surface);
  color: var(--ink-1);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  gap: var(--space-5);
}

/* ロゴ：ティール角丸マーク＋アプリ名 */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--font-15);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  color: var(--ink-1);
  cursor: pointer;
  white-space: nowrap;
}
.logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--color-primary);
  color: #FFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-14);
  font-weight: var(--weight-bold);
  flex: none;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

/* ナビ：ピル型（選択中＝ティール淡背景） */
.nav {
  display: flex;
  gap: var(--space-1);
}

.nav-link {
  color: var(--color-text-sub);
  text-decoration: none;
  padding: var(--space-2) 14px;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-link:hover {
  color: var(--ink-1);
  background: var(--color-surface-alt);
}
.nav-link.active {
  color: var(--color-primary-dark);
  font-weight: var(--weight-bold);
  background: var(--color-primary-tint);
}

/* 会社チップ（頭文字アバター＋社名） */
.header-company-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-1);
  font-size: var(--font-13);
  font-weight: var(--weight-medium);
  padding: 5px 12px 5px 6px;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  transition: background 0.15s;
  margin-left: auto;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-company-name:hover {
  background: var(--color-surface-alt);
}
.header-company-avatar {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-bold);
  flex: none;
}

/* 年度ピル（クリックでドロップダウン） */
.header-fiscal-year {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-1);
  font-size: var(--font-13);
  font-weight: var(--weight-medium);
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.header-fiscal-year:hover {
  background: var(--color-surface-alt);
}
.header-fiscal-year::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--color-text-sub);
  border-bottom: 1.6px solid var(--color-text-sub);
  transform: rotate(45deg) translateY(-2px);
  flex: none;
}
.fy-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: var(--space-1);
  z-index: 300;
}
.fy-dropdown-item {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-13);
  color: var(--ink-1);
  cursor: pointer;
  white-space: nowrap;
}
.fy-dropdown-item:hover {
  background: var(--color-surface-alt);
}
.fy-dropdown-item.active {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  font-weight: var(--weight-bold);
}
.fy-dropdown-item.fy-manage {
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-primary-dark);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .header-inner { padding: 0 var(--space-4); }
  .nav { gap: var(--space-3); }
}


/* =========================================================================
 * §6 タブ（一次・二次）
 * ========================================================================= */

/* 一次タブ（損益計画・貸借計画・資金計画・計画指標・計画進捗・計画書・自動分析解説）
   Phase 21：下線タブ → ピル型（選択中＝ティール淡背景） */
.plan-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
  /* 下へスクロールしてもタブを切り替えられるよう、ヘッダー（高さ59px）の
     直下に貼り付ける。背景を敷かないと下の表が透けて見える */
  position: sticky;
  top: 59px;
  z-index: 50;
  background: var(--color-bg);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.plan-tab {
  padding: var(--space-2) 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans-jp);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text-sub);
  border-radius: var(--radius-md);
  transition: color 0.15s, background 0.15s;
}
.plan-tab:hover {
  color: var(--ink-1);
  background: var(--color-surface-alt);
}
.plan-tab.active {
  color: var(--color-primary-dark);
  font-weight: var(--weight-bold);
  background: var(--color-primary-tint);
}

/* 計画コメントタブと PDF 出力ボタンは「右寄せ」の挙動だけ残す */
.plan-tab-comment {
  margin-left: auto;
}
.plan-tab-pdf {
  margin-left: var(--space-3);
  font-weight: var(--weight-medium);
}

/* 二次タブ（損益計画配下の販売・人件費・投資・返済）
   Phase 21：セグメントコントロール型（薄ベージュ地に白ピル）
   2026-07-05：一次タブ（高さ53px）の下に貼り付けてスクロール追従。
   外側は全幅＋ページ背景で透け防止、ピルの見た目は inner に持たせる */
.plan-subtabs {
  position: sticky;
  top: 112px;              /* ヘッダー59px＋一次タブ53px */
  z-index: 49;
  display: flex;
  background: var(--color-bg);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
}
.plan-subtabs-inner {
  display: inline-flex;
  gap: 2px;
  background: #EFEDE0;
  border-radius: 9px;
  padding: 3px;
}
.plan-subtab {
  padding: 6px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans-jp);
  font-size: var(--font-13);
  font-weight: var(--weight-medium);
  color: var(--color-text-sub);
  border-radius: 7px;
  transition: color 0.15s, background 0.15s;
}
.plan-subtab:hover { color: var(--ink-1); }
.plan-subtab.active {
  color: var(--ink-1);
  font-weight: var(--weight-bold);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(23, 36, 48, .08);
}

/* 表示切替（月次推移／前年比較／四半期）— PL/BS 実績画面用セグメント */
.view-toggle {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  background: #EFEDE0;
  border-radius: 9px;
  padding: 3px;
  margin-bottom: var(--space-4);
}
.view-toggle-btn {
  padding: 6px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans-jp);
  font-size: var(--font-13);
  font-weight: var(--weight-medium);
  color: var(--color-text-sub);
  border-radius: 7px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.view-toggle-btn:hover { color: var(--ink-1); }
.view-toggle-btn.active {
  color: var(--ink-1);
  font-weight: var(--weight-bold);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(23, 36, 48, .08);
}
.view-toggle-btn:disabled {
  color: var(--ink-4);
  cursor: not-allowed;
}


/* =========================================================================
 * §7 カード・セクション
 * ========================================================================= */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.card h3 {
  font-size: var(--font-14);
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}

.card h4 {
  font-size: var(--font-15);
  color: var(--ink-1);
  margin-bottom: var(--space-3);
}


/* =========================================================================
 * §8 ボタン
 * ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans-jp);
  font-size: var(--font-14);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  background: var(--bg-surface);
  color: var(--ink-1);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  min-height: 36px;
}

/* 主要アクション＝ティール（Phase 21・デザイン準拠） */
.btn-primary {
  background: var(--color-primary);
  color: #FFF;
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* 成功・確定アクション＝緑 */
.btn-success {
  background: var(--color-positive);
  color: #FFF;
  border-color: var(--color-positive);
}
.btn-success:hover {
  background: #187347;
  border-color: #187347;
}

/* 副アクション：白地＋枠線＋ティール文字 */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  color: var(--color-primary-dark);
  background: var(--color-primary-tint);
  border-color: var(--color-primary-tint-border);
}

/* 破壊（削除）：白＋深紅枠＋深紅文字、ホバーで反転 */
.btn-danger {
  background: var(--bg-surface);
  color: var(--state-warn);
  border-color: var(--state-warn);
}
.btn-danger:hover {
  background: var(--state-warn);
  color: var(--bg-surface);
}

.btn-lg {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-15);
  min-height: 44px;
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-13);
  min-height: 28px;
}

.btn:disabled,
.btn[disabled] {
  background: var(--ink-5);
  color: var(--ink-3);
  border-color: var(--ink-5);
  cursor: not-allowed;
}


/* =========================================================================
 * §9 フォーム
 * ========================================================================= */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-group label {
  display: block;
  font-weight: var(--weight-medium);
  font-size: var(--font-13);
  margin-bottom: var(--space-1);
  color: var(--ink-2);
}

.required {
  color: var(--state-warn);
}

/* Phase 21：下線型 → 箱型（枠線＋角丸。freee 系の分かりやすさ優先） */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-sans-jp);
  font-size: var(--font-14);
  color: var(--ink-1);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 36px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-tint);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}

textarea {
  line-height: var(--line-body);
  resize: vertical;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-5);
}


/* =========================================================================
 * §10 テーブル
 * ========================================================================= */

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.data-table th {
  background: var(--color-surface-alt);
  color: var(--color-text-sub);
  padding: 7px var(--space-3);
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.data-table th:first-child {
  text-align: left;
}

.data-table td {
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
  text-align: right;
  white-space: nowrap;
  height: 32px;
  font-family: var(--font-num);
}
.data-table td:first-child {
  text-align: left;
  font-family: var(--font-sans-jp);
}

.data-table tr:hover td {
  background: var(--color-surface-dim);
}

/* 階層：小計行＝薄ベージュ地、主要行（営業利益・資産合計・純資産）＝ティール淡地 */
.data-table .row-total td {
  font-weight: var(--weight-bold);
  border-top: 1px solid var(--color-primary-tint-border);
  background: var(--color-primary-tint);
}
.data-table .row-total td:first-child {
  color: var(--color-primary-dark);
}
.data-table .row-subtotal td,
.data-table .row-marginal td,
.data-table .row-bs-subtotal td,
.data-table .row-bs-cash td {
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  background: var(--color-row-subtotal);
}
.data-table .row-revenue td {
  font-weight: var(--weight-bold);
  color: var(--ink-1);
}
.data-table .row-operating td,
.data-table .row-ordinary td,
.data-table .row-bs-total td,
.data-table .row-bs-equity td {
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  background: var(--color-primary-tint);
  border-top: 1px solid var(--color-primary-tint-border);
}
.data-table .row-operating td:first-child,
.data-table .row-ordinary td:first-child,
.data-table .row-bs-total td:first-child,
.data-table .row-bs-equity td:first-child {
  color: var(--color-primary-dark);
}
.data-table .category-header td {
  font-weight: var(--weight-medium);
  color: var(--ink-2);
  font-size: var(--font-12);
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}
.data-table .indent {
  padding-left: var(--space-5);
  color: var(--ink-2);
}

/* 異常値（マイナス）— 赤＋△（△は JS 側 fmt で付与） */
.data-table .negative {
  color: var(--color-negative);
}
.data-table td.warn-row {
  border-left: 3px solid var(--state-warn);
}

/* 業種平均列の区切り（背景色を廃し、縦罫線で領域分離） */
.data-table .col-industry,
.data-table th.col-industry {
  border-left: 1px solid var(--ink-4);
}


/* =========================================================================
 * §11 KPI カード
 * ========================================================================= */

/* Phase 21：白カード＋色チップ＋説明文（freee 系の分かりやすさ優先） */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: var(--space-4);
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-4) var(--space-4);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.kpi-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-13);
  color: var(--color-text-sub);
  font-weight: 600;
  margin-bottom: 0;
}
/* 色チップ（グラフ系列色と対応） */
.kpi-chip {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
  display: inline-block;
}

.kpi-value {
  font-size: 26px;
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  line-height: var(--line-heading);
  font-family: var(--font-num);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.kpi-value small {
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text-sub);
  font-family: var(--font-sans-jp);
}

/* 率バッジ・前年比バッジ */
.kpi-badge {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-num);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text-sub);
  white-space: nowrap;
}
.kpi-badge.up {
  background: var(--color-positive-tint);
  color: var(--color-positive);
}
.kpi-badge.down {
  background: var(--color-negative-tint);
  color: var(--color-negative);
}

.kpi-sub {
  font-size: var(--font-12);
  color: var(--ink-2);
  margin-top: 0;
}
/* 説明文（社長向けのひと言） */
.kpi-caption {
  font-size: 11.5px;
  color: var(--color-text-sub);
  line-height: 1.6;
}

/* マイナス値は赤＋△（△は JS 側 fmt で付与） */
.kpi-value.negative {
  color: var(--color-negative);
}

@media (max-width: 768px) {
  .kpi-grid {
    grid-template-columns: 1fr;
    border-top: var(--hairline);
  }
  .kpi-card {
    border-right: none;
    border-bottom: var(--hairline);
  }
  .kpi-card:last-child { border-bottom: none; }
}


/* =========================================================================
 * §12 モーダル
 * ========================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 40, 38, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal-box,
.modal-content {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--hairline);
  background: var(--bg-surface);
}

.modal-title {
  font-size: var(--font-18);
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  letter-spacing: var(--tracking-heading);
}

.modal-sub {
  font-size: var(--font-13);
  color: var(--ink-2);
  margin-left: var(--space-3);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: var(--space-1);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover {
  color: var(--ink-1);
  background: var(--bg-subtle);
}


/* =========================================================================
 * §13 トップページ・会社選択
 * ========================================================================= */

.top-page {
  text-align: center;
  padding: var(--space-9) var(--space-5) var(--space-7);
}
.top-title {
  font-size: var(--font-28);
  color: var(--ink-1);
  margin-bottom: var(--space-3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
}
.top-sub {
  color: var(--ink-2);
  font-size: var(--font-15);
  margin-bottom: var(--space-7);
}
.top-buttons {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  flex-wrap: wrap;
}
.top-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 200px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: var(--bg-surface);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-1);
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.top-btn:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-raise);
}
.top-btn strong {
  display: block;
  font-size: var(--font-18);
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  margin: var(--space-3) 0 var(--space-1);
}
.top-btn small {
  font-size: var(--font-13);
  color: var(--ink-2);
}
.top-btn .lucide {
  width: 32px;
  height: 32px;
  color: var(--ink-1);
}

.company-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
/* Phase 21：頭文字アバター＋社名＋決算月/業種＋取込状況チップ */
.company-select-card {
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.company-select-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-raise);
}
.cs-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cs-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-15);
  font-weight: var(--weight-bold);
  flex: none;
}
.cs-card-name {
  font-size: var(--font-15);
  font-weight: var(--weight-bold);
  color: var(--ink-1);
  margin-bottom: 2px;
}
.cs-card-meta {
  font-size: var(--font-12);
  color: var(--ink-2);
}
.cs-card-industry {
  font-size: var(--font-12);
  color: var(--ink-2);
  margin-top: var(--space-1);
}
.cs-card-date {
  font-size: var(--font-12);
  color: var(--ink-3);
  margin-top: var(--space-1);
}
/* 取込状況チップ */
.cs-card-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cs-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.cs-chip.warn {
  background: var(--color-accent-tint);
  color: var(--color-accent-dark);
}
.cs-chip.muted {
  background: var(--color-surface-alt);
  color: var(--color-text-sub);
}
/* 「会社を登録」破線カード */
.company-add-card {
  border: 2px dashed var(--color-primary-tint-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: 120px;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.company-add-card:hover {
  background: var(--color-primary-tint);
  border-color: var(--color-primary);
}
.company-add-plus {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-family: var(--font-num);
}
.company-add-card strong {
  font-size: var(--font-14);
  font-weight: var(--weight-bold);
  color: var(--color-primary-dark);
}
.company-add-card small {
  font-size: var(--font-12);
  color: var(--color-text-sub);
}
.company-empty {
  text-align: center;
  color: var(--ink-2);
  padding: var(--space-7) var(--space-4);
  font-size: var(--font-14);
  line-height: var(--line-body);
}


/* =========================================================================
 * §14 状態表示（結果メッセージ・警告など）
 * ========================================================================= */

.result-message {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  background: var(--bg-surface);
  color: var(--ink-1);
  font-weight: var(--weight-medium);
  font-size: var(--font-13);
}
.result-success {
  background: var(--color-positive-tint);
  border-color: var(--color-positive-tint);
  color: var(--color-positive);
}
.result-error {
  color: var(--color-negative);
  background: var(--color-negative-tint);
  border-color: var(--color-negative-tint);
}

.bs-note {
  color: var(--color-accent-dark);
  font-size: var(--font-13);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-tint);
  border-radius: var(--radius-md);
}

.loading {
  text-align: center;
  color: var(--ink-2);
  padding: var(--space-5);
  font-size: var(--font-13);
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink-4);
  border-top-color: var(--brand-ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: var(--space-2);
  vertical-align: -2px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =========================================================================
 * §15 ユーティリティ
 * ========================================================================= */

.hint {
  font-size: var(--font-12);
  color: var(--ink-2);
  font-weight: var(--weight-regular);
}

.hairline { border-top: var(--hairline); }
.rule { border-top: var(--rule-strong); }

/* Lucide アイコン（self-host：lucide.min.js が data-lucide 属性を SVG 化する） */
.lucide,
[data-lucide] {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  color: currentColor;
  vertical-align: -3px;
}
.lucide-lg { width: 20px; height: 20px; }
.lucide-xl { width: 24px; height: 24px; }