@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: #B0B0B0;   /* (旧 --Black-501) */
  --palette-gray-800: #8a8a8a;   /* (旧 --Black-500) */
  --palette-gray-850: #8c8c8c;   /* (旧 --Black-503) */
  --palette-gray-900: #606060;   /* (旧 --Black-700) */
  --palette-gray-950: #3F3F3F;   /* (旧 --Black-900) */
  
  /* プライマリ (Primary Color Scale) */
  --palette-primary-300: #98E7C6;
  --palette-primary-500: #23A176;
  --palette-primary-700: #167D54;

  /* セカンダリ (Secondary Color Scale) */
  --palette-secondary-300: #A5F8FC;
  --palette-secondary-500: #239BA1;
  --palette-secondary-700: #166B6B;
  
  /* ターシャリ (Tertiary Color Scale) */
  --palette-third-300: #D2E3FF;
  --palette-third-500: #266CA8;
  --palette-third-700: #144D7D;

  /* クォータナリ (Quaternary Color Scale) */
  --palette-fourth-300: #B9E9DF; 
  --palette-fourth-500: #495B9F;
  --palette-fourth-700: #2D3D79;

  /* 状態 (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) */

  /* --- 2. Sequential Scales (BI/チャート用 連番スケール) --- */
  --palette-chart-01: #03714C;
  --palette-chart-02: #23A176;
  --palette-chart-03: #3ACA99;
  --palette-chart-04: #6EE6BD;
  --palette-chart-05: #9DFADA;
  --palette-chart-06: #2C3864;
  --palette-chart-07: #495B9F;
  --palette-chart-08: #788ACA;
  --palette-chart-09: #B0BFF4;
  --palette-chart-10: #CFDAFE;


  /* ============================================= */
  /* 【第2階層】役割定義 (Tailwindが参照する変数)
  /* ============================================= */
  /* 背景色 */
  --page-background-color: var(--palette-gray-50); /* (旧 --palette-page-bg) */
  --background-container: #FFFFFF99;
  --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(--palette-primary-500);
  --DC-normal-2: var(--palette-secondary-500);
  --DC-normal-3: var(--palette-third-500);
  --DC-normal-4: var(--palette-fourth-500);

  /* (ご指示通り、超過色を 700 番台に変更) */
  --DC-over-1: var(--palette-primary-700); 
  --DC-over-2: var(--palette-secondary-700);
  --DC-over-3: var(--palette-third-700);
  --DC-over-4: var(--palette-fourth-700);
  
  /* (ベース色 - 通常色と同じ) */
  --DC-base-1: var(--palette-primary-500);
  --DC-base-2: var(--palette-secondary-500);
  --DC-base-3: var(--palette-third-500);
  --DC-base-4: var(--palette-fourth-500);

  /* 背景トラックの色 */
  --DC-track: var(--palette-gray-600); /* (旧 --palette-black-300) */

  /* チャート関連の色設定 */
  --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;
}


@media print {
  /* * ★ ここが核心: デフォルト用紙サイズをA2に指定
   * Chromeの「PDFとして保存」は、この指定をデフォルト値として認識します。
   */
  @page {
    size: 420mm 594mm; /* A2縦の正確なサイズ */
    margin: 10mm;      /* 余白 */
  }

  /* * A2 (幅約1580px) が確保されるため、
   * width強制やtransform縮小は一切不要になります。
   * 自然なDesktopレイアウトが適用されます。
   */
  /* 1. 全体の背景を透明化（＝紙の白） */
  html, body, #svelte, main {
    background-color: transparent !important;
    background-image: none !important;
  }

  /* 2. 背景色を持つユーティリティクラスを強制透明化
     ただし、チャートの凡例（swatch）などは style 属性で色がつくため、
     !important なクラス指定で構造部分だけを狙い撃ちします。
  */
  .bg-white, 
  .bg-gray-50, .bg-gray-100, .bg-gray-200, 
  .bg-slate-50, .bg-slate-100, .bg-slate-200,
  .bg-zinc-50, .bg-zinc-100,
  .bg-background-page, .bg-background-container {
    background-color: transparent !important;
    border-color: #e5e7eb !important; /* 枠線は薄いグレーにして視認性を残す（お好みで） */
  }

  /* 3. 強制カラー出力設定の調整
     exact だと背景色が全部出てしまうため、economy にするのが本来ですが、
     チャートの色まで消えると困るので、exact のまま背景だけ transparent で打ち消す上記手法が正解です。
  */
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@layer utilities {
  /* 強制改ページ (最強版) */
  .break-before-page {
    break-before: page !important;
    page-break-before: always !important;
    
    /* 余計な干渉を防ぐ設定 */
    break-inside: auto !important;
    page-break-inside: auto !important;
    
    /* 印刷時はブロック要素として振る舞わせると成功率が上がる */
    display: block !important; 
    width: 100% !important;
  }

  /* 切断禁止 */
  .break-inside-avoid {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  
  /* 切断許可 */
  .break-inside-auto {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .break-after-avoid {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }
}


svg text.tickLabel {
    fill: #3F3F3F !important; /* 確実にこの色で塗りつぶす */
    stroke: none !important;    /* 縁取りを消去 */
    stroke-width: 0 !important; /* 線の幅を0に固定 */
    opacity: 1 !important;      /* 透明化を禁止 */
    font-weight: 500 !important; /* 視認性のための太さ確保 */
}
.fill-text-sub {
    fill: #3F3F3F !important; 
}