@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  /* デフォルトのフォントスタック (変更なし) */
  --font-family-sans: "Source Han Sans JP",'Noto Sans JP', "ヒラギノ角ゴシック", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  --font-family-numeric: 'Roboto', sans-serif;


  /* ============================================= */
  /* 【第1階層】パレット定義 (ハイブリッド・スケール)
  /* ============================================= */
  --palette-white: #FFFFFF;
  --palette-black: #000000;

  /* --- 1. Tonal Scales (UI/ブランド用 濃淡スケール) --- */

  /* グレー (Gray Scale) */
  --palette-gray-50: #fcfcfc;    /* (旧 --Gray-BG-500) */
  --palette-gray-100: #f8f8f8;   /* (旧 --Gray-BG-700) */
  --palette-gray-200: #f7f7f7;   /* (旧 --Black-100) */
  --palette-gray-300: #f0f0f0;   /* (旧 --Black-150) */
  --palette-gray-350: #EEE;      /* (旧 --Gray-BG-900) */
  --palette-gray-400: #e8e8e8;   /* (旧 --Black-180) */
  --palette-gray-450: #E2ECEC;   /* (旧 --table-bg) */
  --palette-gray-500: #E1E1E1;   /* (旧 --Graph-Gray, --grad-wh) */
  --palette-gray-600: #D9D9D9;   /* (旧 --Black-200 / --palette-black-300) */
  --palette-gray-700: #a0aec0;   /* (旧 --Black-501) */
  --palette-gray-800: #718096;   /* (旧 --Black-500) */
  --palette-gray-850: #8c8c8c;   /* (旧 --Black-503) */
  --palette-gray-900: #606060;   /* (旧 --Black-700) */
  --palette-gray-950: #2d3748;   /* (旧 --Black-900) */
  
 /* Primary: 基準色そのものと、その直近の濃淡 (維持) */
  --palette-primary-300: #81E6D9; /* Soft Mint */
  --palette-primary-500: #4FD1C5; /* ★ Hero Color (Teal) */
  --palette-primary-700: #319795; /* Solid Teal */

  /* Secondary: Navy(#313860)をベースにしつつ、紫味を抜いた「Cool Blue Gray」 */
  /* 赤み(紫)を消すため、色相を少し緑側に寄せたダークブルーグレーを採用 */
  --palette-secondary-300: #8DA3B8; /* Cool Blue Gray: 冷たく知的なグレー */
  --palette-secondary-500: #4A6076; /* Muted Navy: 紫味のない、深い青灰色 */
  --palette-secondary-700: #313860; /* ★ User's Dark Color (Deep Navy) */

  /* Tertiary: Primary(Teal)の彩度を極限まで落とした「Grayish Teal」 */
  /* 無彩色に近いが、わずかに緑を含ませることで全体の一体感を出す */
  --palette-third-300: #C4D4D6; /* Foggy Mint: 霧のような薄い青緑 */
  --palette-third-500: #6B888C; /* Stone Teal: 落ち着いた鉱物的な色 */
  --palette-third-700: #385A5E; /* Deep Moss: 黒に近いが緑のニュアンス */

  /* Quaternary: 透明感のある「Pure Ice」 */
  /* 紫寄りの白(AliceBlue等)を避け、Cyan寄りの白を採用 */
  --palette-fourth-300: #E0F2F1; /* Ice Water */
  --palette-fourth-500: #F0FDFA; /* Mint Snow: ほぼ白 */
  --palette-fourth-700: #B2F5EA; /* Aqua Mist (Primary寄り) *//

  /* 状態 (Status Scale) */
  --palette-error-500: #FF5C00;
  --palette-error-700: #FAB400;
  --palette-alert-800: #C65400; /* (旧 --Women, --icon-color-alert) */
  
  /* 汎用 (Utility Scale) - (旧定義から維持) */
  --palette-blue-200: #EEF8FF;
  --palette-blue-700: #58A7D9;
  --palette-blue-800: #1C81C1;   /* (旧 --Graph-Blue) */
  --palette-blue-900: #3292CF;
  --palette-blue-950: #243762;   /* (旧 --grad-bl) */
  --palette-blue-alt-700: #176288; /* (旧 --Men) */

  /* System A: Teal Gradient (明るい緑 -> 白緑)
      赤みを一切入れず、純粋なミントグリーン系で統一 */
  --palette-chart-01: #4FD1C5; /* ★ Base Teal */
  --palette-chart-02: #70D9D1;
  --palette-chart-03: #8EE1DC;
  --palette-chart-04: #ABE9E6;
  --palette-chart-05: #C8F1F0; /* Lightest Mint */

  /* System B: Navy Gradient (ネイビー -> 青灰色)
      ※修正点: 淡い色を「ラベンダー系」ではなく「スレート(青緑グレー)系」に変更し、
      赤みを完全に排除しました。 */
  --palette-chart-06: #313860; /* ★ Base Navy */
  --palette-chart-07: #465073; /* Navy Blue */
  --palette-chart-08: #5D6B87; /* Slate Navy */
  --palette-chart-09: #75879B; /* Cool Slate */
  --palette-chart-10: #8EA4B0; /* Lightest Blue-Grey (Green寄り) */


  /* ============================================= */
  /* 【第2階層】役割定義 (Tailwindが参照する変数)
  /* ============================================= */
  /* 背景色 */
  --page-background-color: var(--palette-white); /* (旧 --palette-page-bg) */
  --background-container: var(--palette-white);
  --background-container-sub: var(--palette-gray-50); /* (既存だが参照先を変更) */
  --header-background: #FFFFFF19; /* (旧 --header-bg) */
  --table-background: var(--palette-gray-450); /* (旧 --palette-table-bg) */
  
  /* 文字色 */
  --text-main: var(--palette-gray-950);
  --text-sub: var(--palette-gray-900);
  --text-muted: var(--palette-gray-800);
  --text-link: var(--palette-blue-700);
  --text-on-primary: var(--palette-white);
  
  /* ボーダー色 */
  --border-primary: var(--palette-gray-800); /* (旧 --palette-black-500) */
  --border-muted: var(--palette-gray-400); /* (旧 --palette-gray-200) */

  /* プライマリーカラー (ブランド) */
  --color-brand: var(--palette-primary-500); /* (旧 --palette-teal-500) */

  /* エラー・警告色 */
  --color-error: var(--palette-error-500);
  --color-warning: var(--palette-error-700);

  /* グラデーション */
  --gradient-brand: linear-gradient(95deg, var(--palette-chart-01) -20%, var(--palette-chart-04) 100%);
  
  /* インジケータ */
  --indicator-background: rgba(255, 255, 255, 0.70);
  --indicator-text-inactive: var(--palette-gray-850);
  --indicator-track-inactive: var(--palette-gray-700);
  --indicator-track-active: var(--palette-primary-500);
  
  /* 特殊グラデーション */
  --gradient-gpt: linear-gradient(95deg, #09B495 -20%, #3237AF 100%);
  --gradient-sp: linear-gradient(168deg, #109582 8%, #33A3EA 100%);
  
  /* シャドウ */
  --shadow-field: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);

  /* 背景ブラー */
  --background-blur-pattern: radial-gradient(50% 50% at 50% 50%, #0AC1BA 0%, #B0D2FF 35%);

  /* モーダル */
  --modal-background-color: rgba(237, 237, 237, .15);
  --modal-background-blur: blur(10px);
  --modal-container-background: rgba(255, 255, 255, 0.6);

  /* ★★★ DC (円グラフ) カラー ★★★ */
  /* (参照先を Tonal Scale (primary等) に修正) */
  --DC-normal-1: var(--chart-06);          /* Base Navy (#313860) - どっしりした濃紺 */
  --DC-normal-2: var(--chart-08);          /* Slate Navy (#5D6B87) - 中間の青灰色 */
  --DC-normal-3: var(--chart-10);          /* Light Slate (#8EA4B0) - 明るいグレー */
  --DC-normal-4: var(--palette-blue-200);  /* Ice Blue (#EEF8FF) - 非常に淡い青 */

  /* 【超過時 (Over)】: 「Normal」よりもさらに濃く、強い色 ("Super" Navy & Green) */
  /* 100%を超えた部分が、通常時よりも「深く」「強い」色になることで達成を強調します */
  --DC-over-1: var(--palette-blue-950);    /* Midnight (#243762) - Normalより深い漆黒の紺 */
  --DC-over-2: var(--palette-secondary-700);/* Deep Navy (#313860) - Normal-1と同じ濃さへ昇格 */
  --DC-over-3: var(--palette-third-700);    /* Deep Moss (#385A5E) - 緑味を帯びた濃色へ変化 */
  --DC-over-4: var(--palette-primary-500);  /* Base Teal (#4FD1C5) - 最後は鮮やかなティールで祝う */
  
  /* 【ベース色 (Base)】: 通常時と同じ階調を使用 */
  --DC-base-1: var(--chart-06);
  --DC-base-2: var(--chart-08);
  --DC-base-3: var(--chart-10);
  --DC-base-4: var(--palette-blue-200);

  /* 【背景トラック】: 紺色が映える、少し濃いめのグレー */
  /* 薄すぎると白背景と同化し、濃すぎるとチャートと喧嘩するため450を採用 */
  --DC-track: var(--palette-gray-450);

  /* チャート関連の色設定 */
  --chart-01: var(--palette-chart-01);
  --chart-02: var(--palette-chart-02);
  --chart-03: var(--palette-chart-03);
  --chart-04: var(--palette-chart-04);
  --chart-05: var(--palette-chart-05);
  --chart-06: var(--palette-chart-06);
  --chart-07: var(--palette-chart-07);
  --chart-08: var(--palette-chart-08);
  --chart-09: var(--palette-chart-09);
  --chart-10: var(--palette-chart-10);
  
  /* ★ KPIカードの小項目の背景 */
  --KPI-smallwrapper: var(--palette-gray-200);


  /* モバイルサイズ (~640px) の基本の高さ (変更なし) */
  --grid-row-height: 25px;
}

/* メディアクエリ (既存) */
@media (min-width: 640px) {
  :root { --grid-row-height: 36px; }
}
@media (min-width: 1024px) {
  :root { --grid-row-height: 40px; }
}
@media (min-width: 1920px) {
  :root { --grid-row-height: 44px; }
}

/* スクロールバー (既存) */
::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ▼▼▼ ダークモード用のスタイル (既存) ▼▼▼ */
[data-theme="dark"] {
  /* ============================================= */
  /* 【CSS 第1階層】パレット定義 (ダークモード)
  /* ============================================= */
  /* 既存のパレット */
  --palette-dark-900: #121212;
  --palette-dark-800: #1f1f1f;
  --palette-dark-700: #212121;
  --palette-dark-600: #2e2e2e;
  --palette-dark-500: #3a3a3a;
  --palette-dark-400: #555555;
  --palette-dark-300: #606060;
  --palette-dark-blue-700: #87C4ED;
  --palette-dark-teal-500: #46E06A;
  --palette-dark-error-900: #FF8A65;
  --palette-dark-error-700: #FFCA28;

  /* モード別カラー */
  --palette-primary-500: #4C8AB3;
  --palette-primary-700: #407497;
  --palette-second-500: #4CAFB5;
  --palette-second-700: #409397;
  --palette-third-500: #4CB57D;
  --palette-third-700: #409769;
  --palette-fourth-500: #4CB5A0;
  --palette-fourth-700: #409786;
  --palette-dark-theme-300: #E6E6E6;
  --palette-dark-theme-500: #8A8A8A;
  --palette-dark-theme-700: #3D3D3D;

  /* グラフ・グラデーションカラー */
  --palette-graph-dark-1: #02A837;
  --palette-graph-dark-2: #06E04A;
  --palette-graph-dark-3: #39E770;
  --palette-graph-dark-4: #7CFF9F;
  --palette-graph-dark-5: #4FFF84;
  --palette-graph-dark-6: #2D9D5D;
  --palette-graph-dark-7: #23AE7C;
  --palette-graph-dark-8: #27A99C;
  --palette-graph-dark-9: #57BFB7;
  --palette-graph-dark-10: #9AADCA;
  
  /* =C S S   第 2   階 層 】 役 割 定 義   ( ダ ー ク モ ー ド )
  /* ============================================= */
  /* 背景色 */
  --page-background-color: var(--palette-dark-900); /* :root の --background-page を上書き */
  --background-container: #ffffff0f;
  --background-container-sub: var(--palette-dark-700);
  --header-background: #00000080; /* :root の --background-header を上書き */

  /* 文字色 */
  --text-main: var(--palette-white);
  --text-sub: var(--palette-white);
  --text-muted: var(--palette-dark-300);
  --text-link: var(--palette-dark-blue-700);
  --text-on-primary: var(--palette-dark-900);

  /* ボーダー色 */
  --border-primary: #58a8d900;
  --border-muted: var(--palette-dark-500);

  /* プライマリーカラー (主要なアクション) */
  --color-brand: var(--palette-dark-teal-500);

  /* エラー・警告色 */
  --color-error: var(--palette-dark-error-900);
  --color-warning: var(--palette-dark-error-700);

}