:root {
  /* =============================================
   * URAGO Design Tokens v2.0
   * =============================================
   * 命名規則: 用途ベース（role-based）
   * 更新日: 2026-04
   * ============================================= */

  /* --- 背景レイヤー --- */
  --bg-base:     #09090B;  /* アプリ最下層（body背景）        旧: --dark  */
  --bg-surface:  #121217;  /* カード・サイドバーなどの面       旧: --dark2 */
  --bg-elevated: #1C1C24;  /* インプット・浮き上がった要素     旧: --dark3 */
  --qr-code-surface: #FFFFFF; /* 認証アプリが読み取るQRの固定背景 */

  /* --- テキスト --- */
  --text-primary:   #FAFAFA;  /* メインテキスト                  旧: --text     */
  --text-secondary: #C4C4CC;  /* 補助テキスト・説明文            旧: --text-dim */
  --text-muted:     #A1A1AA;  /* ラベル・プレースホルダー        旧: --muted    */

  /* --- アクセント（メインカラー: 紫系） --- */
  --color-primary:     #C4B5FD;               /* ボタン・強調・アクティブ  旧: --gold     */
  --color-primary-dim: rgba(196,181,253,0.25); /* primary の透過・ホバー背景 旧: --gold-dim */

  /* --- セマンティックカラー --- */
  --color-success: #10B981;  /* 成功・正常・完了       旧: --accent（--okは削除）*/
  --color-danger:  #FF2D6B;  /* エラー・削除・警告強   旧: --danger */
  --color-warning: #F59E0B;  /* 注意・要確認           新規追加 */
  --color-info:    #60A5FA;  /* 情報・リンク・ヒント   新規追加 */

  /* --- セマンティック: 薄い背景（バッジ・ラベルなど） --- */
  --color-success-dim: rgba(16, 185, 129, 0.12);
  --color-danger-dim:  rgba(255, 45, 107, 0.12);
  --color-warning-dim: rgba(245, 158, 11, 0.12);
  --color-info-dim:    rgba(96, 165, 250, 0.12);

  /* --- ボーダー --- */
  --border-default: rgba(167, 139, 250, 0.15);  /* 通常のカード・区切り線  旧: --border       */
  --border-subtle:  rgba(255, 255, 255, 0.08);  /* グラス系の薄いボーダー  旧: --glass-border */

  /* --- 単一スケール: 8px base / 1.5 ratio --- */
  --scale-base: 8px;
  --scale-ratio: 1.5;
  --space-0: 4px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 27px;
  --space-5: 40px;
  --space-6: 60px;

  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 18px;
  --radius-4: 27px;
  --radius-pill: 999px;

  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;

  /* --- グラデーション（棒グラフ・アクセント装飾） --- */
  --gradient-bar-vertical: linear-gradient(to top,   #7C3AED, #D946EF);       /* 旧: --grad-bar-v      */
  --gradient-bar-primary:  linear-gradient(to right, #D946EF, #A78BFA);       /* 旧: --grad-bar-h      */
  --gradient-bar-warm:     linear-gradient(to right, #F472B6, #A78BFA);       /* 旧: --grad-bar-warm   */
  --gradient-bar-danger:   linear-gradient(to right, #FF2D6B, #F472B6);       /* 旧: --grad-bar-danger */

  /* --- グラスモーフィズム --- */
  --glass-bg:   rgba(18, 18, 23, 0.7);
  --glass-blur: blur(12px);

  /* --- シャドウ --- */
  --shadow-default: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.5);
  --shadow-surface: 0 12px 28px rgba(0,0,0,0.18);
  --shadow-control: 0 8px 18px rgba(0,0,0,0.18);
  --shadow-focus: 0 0 0 3px rgba(196,181,253,0.18);

  /* --- タイポグラフィ: サイズスケール --- */
  --text-xs:   11px;  /* ランク番号・補足・最小表示         */
  --text-sm:   12px;  /* ラベル・説明文・テーブルヘッダー   */
  --text-base: 13px;  /* 本文・カードタイトル・ボタン       */
  --text-md:   15px;  /* セクション見出し・hero タイトル    */
  --text-lg:   20px;  /* ページタイトル                     */
  --text-xl:   22px;  /* KPI数値・ダッシュボード大数字      */

  /* --- タイポグラフィ: ウェイト --- */
  --font-weight-normal: 500;  /* 通常テキスト  */
  --font-weight-bold:   700;  /* 強調・ボタン・見出し */

  /* --- タイポグラフィ: 行間 --- */
  --leading-tight:  1.5;  /* コンパクトな説明文 */
  --leading-normal: 1.8;  /* 本文・AIボディ     */

  /* --- スクロールバー --- */
  --scrollbar-size: 8px;
  --scrollbar-track: rgba(255,255,255,0.035);
  --scrollbar-thumb: rgba(167,139,250,0.42);
  --scrollbar-thumb-hover: rgba(196,181,253,0.68);

  /* --- タイポグラフィ: 後方互換 --- */
  --font-size-base:        14px;  /* body の基準サイズ（既存互換）*/
  --font-size-min-readable: 12px;

  /* =============================================
   * 後方互換エイリアス
   * 旧トークンを参照しているJSや他CSSが壊れないよう
   * 移行完了後に順次削除する
   * ============================================= */
  --gold:      var(--color-primary);
  --gold-dim:  var(--color-primary-dim);
  --dark:      var(--bg-base);
  --dark2:     var(--bg-surface);
  --dark3:     var(--bg-elevated);
  --text:      var(--text-primary);
  --text-dim:  var(--text-secondary);
  --muted:     var(--text-muted);
  --danger:    var(--color-danger);
  --accent:    var(--color-success);
  --border:    var(--border-default);
  --glass-border: var(--border-subtle);
  --shadow-premium: var(--shadow-default);
  /* --ok は削除。参照箇所は --color-success に手動置換してください */
}

/* ==============================================
 * ライトテーマ — data-theme="light" で適用
 * ============================================== */
[data-theme="light"] {
  /* 背景レイヤー */
  --bg-base:     #F3F2FC;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #EAE8F8;

  /* テキスト */
  --text-primary:   #18181B;
  --text-secondary: #3F3F46;
  --text-muted:     #71717A;

  /* アクセント（白背景で視認できる濃い紫に変更） */
  --color-primary:     #6D28D9;               /* 薄紫 #C4B5FD → 濃紫 */
  --color-primary-dim: rgba(109, 40, 217, 0.12);
  --gold:     #6D28D9;
  --gold-dim: rgba(109, 40, 217, 0.12);

  /* セマンティックカラー（白背景向けに濃い色へ） */
  --color-success: #047857;               /* 薄緑 #10B981 → 濃緑 */
  --color-warning: #B45309;               /* 薄黄 #F59E0B → 濃茶橙 */
  --color-danger:  #BE123C;               /* ピンク #FF2D6B → 濃赤 */
  --color-info:    #1D4ED8;               /* 薄青 #60A5FA → 濃青 */
  --color-success-dim: rgba(4, 120, 87, 0.12);
  --color-warning-dim: rgba(180, 83, 9, 0.12);
  --color-danger-dim:  rgba(190, 18, 60, 0.12);
  --color-info-dim:    rgba(29, 78, 216, 0.12);
  --accent:  #047857;
  --danger:  #BE123C;

  /* ボーダー */
  --border-default: rgba(109, 40, 217, 0.18);
  --border-subtle:  rgba(0, 0, 0, 0.07);

  /* グラスモーフィズム */
  --glass-bg: rgba(255, 255, 255, 0.88);

  /* シャドウ（ライト向けに軽量化） */
  --shadow-default: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-surface: 0 4px 12px rgba(0,0,0,0.07);
  --shadow-control: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-focus:   0 0 0 3px rgba(139,92,246,0.15);

  /* スクロールバー */
  --scrollbar-track:       rgba(0,0,0,0.06);
  --scrollbar-thumb:       rgba(139,92,246,0.30);
  --scrollbar-thumb-hover: rgba(167,139,250,0.55);
}

[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 0% 0%,   rgba(167,139,250,0.08) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(139,92,246,0.04)  0%, transparent 40%);
}

/* ==============================================
 * リセット
 * ============================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ==============================================
 * ビューポート / スクロール土台
 * 方針: body は横スクロール禁止・縦スクロールも持たせず、
 *       実スクロールは .app-main（と .sidebar 内部）に集約する。
 *       これにより「スクロールバーが出たり出なかったり」「意図しない
 *       横スクロール」をなくし、Mac/Windows 双方で安定させる。
 * ============================================== */
html, body {
  height: 100%;
  overflow: hidden;          /* 実スクロールは .app-main が担当 */
  overscroll-behavior: none; /* スクロール連鎖・バウンスを抑制 */
}

/* ==============================================
 * Body
 * ============================================== */
body {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
  background: var(--bg-base);
  background-image:
    radial-gradient(circle at 0% 0%,   rgba(167,139,250,0.10) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(139,92,246,0.05)  0%, transparent 40%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

a {
  color: var(--color-info);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--text-primary);
}

a[style*="text-decoration:none"],
a[style*="text-decoration: none"] {
  text-decoration: underline !important;
  text-underline-offset: 0.18em !important;
}

button,
a,
input,
select,
textarea,
.page,
.card,
.card--flat {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

/* ==============================================
 * ベースタイポグラフィ
 * ============================================== */
h1, h2, h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

/* ==============================================
 * アニメーション
 * ============================================== */
@keyframes fadeIn      { from { opacity: 0; }                        to { opacity: 1; } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOutRight{ from { opacity: 1; transform: translateX(0); }   to { opacity: 0; transform: translateX(20px); } }
@keyframes pulse       { 0%, 100% { opacity: 1; }  50% { opacity: 0.5; } }
@keyframes slideUp     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.animated    { animation-duration: 0.6s; animation-fill-mode: both; }
.fadeIn      { animation-name: fadeIn; }
.fadeInRight { animation-name: fadeInRight; }
.fadeOutRight{ animation-name: fadeOutRight; }
.slideUp     { animation-name: slideUp; }

/* ==============================================
 * スケルトンローディング
 * ============================================== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, #2a2a35 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}
.skeleton-text { height: 12px; margin-bottom: 8px; width: 100%; }
.skeleton-card { height: 100px; width: 100%; border-radius: 12px; }

/* ==============================================
 * 可読性ガードレール（インラインスタイルの小さすぎる文字を補正）
 * ============================================== */
.page :where(
  [style*="font-size:9px"],  [style*="font-size: 9px"],
  [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:11px"], [style*="font-size: 11px"]
) {
  font-size: var(--font-size-min-readable) !important;
}

/* ==============================================
 * 共通スクロールバー（クロスブラウザ）
 * Firefox: scrollbar-width/-color、WebKit(Chrome/Safari/Edge): ::-webkit-scrollbar
 * スクロールする要素は .app-main / .sidebar / 各 *-table-scroll ラッパー。
 * ============================================== */
.app-main,
.sidebar,
.u-scroll-y,
.u-scroll-x {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.app-main::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.u-scroll-y::-webkit-scrollbar,
.u-scroll-x::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
.app-main::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.u-scroll-y::-webkit-scrollbar-track,
.u-scroll-x::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--radius-pill);
}
.app-main::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.u-scroll-y::-webkit-scrollbar-thumb,
.u-scroll-x::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
}
.app-main::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.u-scroll-y::-webkit-scrollbar-thumb:hover,
.u-scroll-x::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* 横長コンテンツ（表・CSV等）専用ラッパー：ページ全体ではなくここだけ横スクロール */
.u-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.u-scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* インラインで overflow-x:auto を持つ横長コンテナが、ページ幅を押し広げて
 * app-main 全体を横スクロールさせないよう封じ込める（JS生成テンプレ対策） */
.page [style*="overflow-x:auto"],
.page [style*="overflow-x: auto"] {
  max-width: 100%;
  overscroll-behavior-x: contain;
}