/* ============================================================
   LumaUI Design System — v1.0
   フラット × 部分的Neumorphism
   ライト / ダーク テーマ対応
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS カスタムプロパティ（テーマトークン）
   ------------------------------------------------------------ */

:root {
  /* ── カラーパレット（ライト） ── */
  --luma-bg:          #f0f0f0;   /* ページ背景（Neumorphism用）*/
  --luma-surface:     #f0f0f0;   /* カード・コンテナ背景 */
  --luma-surface-alt: #e8e8e8;   /* 入れ子コンテナ */
  --luma-fg:          #0d0d0d;   /* プライマリテキスト */
  --luma-fg-muted:    #5a5a5a;   /* セカンダリテキスト */
  --luma-fg-hint:     #9a9a9a;   /* ヒント・プレースホルダ */

  /* ── ステートカラー ── */
  --luma-on:          #2e9e5b;   /* ON / 成功 */
  --luma-on-bg:       #e6f7ed;   /* ON 背景色 */
  --luma-error:       #d63031;   /* エラー */
  --luma-error-bg:    #fce8e8;   /* エラー背景色 */

  /* ── ボーダー ── */
  --luma-border:      rgba(0, 0, 0, 0.12);    /* 標準境界 */
  --luma-border-mid:  rgba(0, 0, 0, 0.20);    /* 強調境界 */
  --luma-border-strong: rgba(0, 0, 0, 0.32);  /* 最強境界 */

  /* ── Neumorphism シャドウ（ライト） ── */
  /* 凸（押し出し）: 明 + 暗 （★ほんの少し薄く調整） */
  --luma-neu-convex:
    4px 4px 10px rgba(0, 0, 0, 0.12),
    -4px -4px 10px rgba(255, 255, 255, 0.85);

  /* 凹（押し込み）: 内側シャドウ （★ほんの少し薄く調整） */
  --luma-neu-inset:
    inset 3px 3px 7px rgba(0, 0, 0, 0.10),
    inset -3px -3px 7px rgba(255, 255, 255, 0.80);

  /* カード用: 弱い凸（ほぼフラット）（★ほんの少し薄く調整） */
  --luma-card-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.06),
    -2px -2px 6px rgba(255, 255, 255, 0.75);

  /* ── タイポグラフィ ── */
  --luma-font-sans:   "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --luma-font-mono:   "JetBrains Mono", "Consolas", monospace;

  /* ── スペーシング ── */
  --luma-space-xs:    4px;
  --luma-space-sm:    8px;
  --luma-space-md:    16px;
  --luma-space-lg:    24px;
  --luma-space-xl:    40px;

  /* ── 角丸 ── */
  --luma-radius-sm:   6px;
  --luma-radius-md:   10px;
  --luma-radius-lg:   16px;
  --luma-radius-xl:   24px;
  --luma-radius-pill: 9999px;

  /* ── トランジション ── */
  --luma-trans-fast:  0.15s ease;
  --luma-trans-base:  0.22s ease;
}

/* ダークテーマ：OS設定に準拠 */
@media (prefers-color-scheme: dark) {
  :root {
    --luma-bg:          #1a1a1a;
    --luma-surface:     #1a1a1a;
    --luma-surface-alt: #242424;
    --luma-fg:          #f0f0f0;
    --luma-fg-muted:    #a0a0a0;
    --luma-fg-hint:     #606060;

    --luma-on:          #3dbb6c;
    --luma-on-bg:       #122b1d;
    --luma-error:       #e05555;
    --luma-error-bg:    #2b1111;

    --luma-border:      rgba(255, 255, 255, 0.10);
    --luma-border-mid:  rgba(255, 255, 255, 0.18);
    --luma-border-strong: rgba(255, 255, 255, 0.28);

    /* ★ダークテーマの影もマイルドに調整 */
    --luma-neu-convex:
      4px 4px 10px rgba(0, 0, 0, 0.35),
      -4px -4px 10px rgba(255, 255, 255, 0.04);

    --luma-neu-inset:
      inset 3px 3px 8px rgba(0, 0, 0, 0.40),
      inset -3px -3px 8px rgba(255, 255, 255, 0.03);

    --luma-card-shadow:
      2px 2px 6px rgba(0, 0, 0, 0.30),
      -2px -2px 6px rgba(255, 255, 255, 0.03);
  }
}

/* 手動テーマ上書き（data-theme属性） */
[data-theme="light"] {
  --luma-bg:          #f0f0f0;
  --luma-surface:     #f0f0f0;
  --luma-surface-alt: #e8e8e8;
  --luma-fg:          #0d0d0d;
  --luma-fg-muted:    #5a5a5a;
  --luma-fg-hint:     #9a9a9a;
  --luma-on:          #2e9e5b;
  --luma-on-bg:       #e6f7ed;
  --luma-error:       #d63031;
  --luma-error-bg:    #fce8e8;
  --luma-border:      rgba(0, 0, 0, 0.12);
  --luma-border-mid:  rgba(0, 0, 0, 0.20);
  --luma-border-strong: rgba(0, 0, 0, 0.32);
  --luma-neu-convex:
    4px 4px 10px rgba(0, 0, 0, 0.12),
    -4px -4px 10px rgba(255, 255, 255, 0.85);
  --luma-neu-inset:
    inset 3px 3px 7px rgba(0, 0, 0, 0.10),
    inset -3px -3px 7px rgba(255, 255, 255, 0.80);
  --luma-card-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.06),
    -2px -2px 6px rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] {
  --luma-bg:          #1a1a1a;
  --luma-surface:     #1a1a1a;
  --luma-surface-alt: #242424;
  --luma-fg:          #f0f0f0;
  --luma-fg-muted:    #a0a0a0;
  --luma-fg-hint:     #606060;
  --luma-on:          #3dbb6c;
  --luma-on-bg:       #122b1d;
  --luma-error:       #e05555;
  --luma-error-bg:    #2b1111;
  --luma-border:      rgba(255, 255, 255, 0.10);
  --luma-border-mid:  rgba(255, 255, 255, 0.18);
  --luma-border-strong: rgba(255, 255, 255, 0.28);
  --luma-neu-convex:
    4px 4px 10px rgba(0, 0, 0, 0.35),
    -4px -4px 10px rgba(255, 255, 255, 0.04);
  --luma-neu-inset:
    inset 3px 3px 8px rgba(0, 0, 0, 0.40),
    inset -3px -3px 8px rgba(255, 255, 255, 0.03);
  --luma-card-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.30),
    -2px -2px 6px rgba(255, 255, 255, 0.03);
}


/* ------------------------------------------------------------
   2. リセット & ベーススタイル
   ------------------------------------------------------------ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--luma-font-sans);
  background-color: var(--luma-bg);
  color: var(--luma-fg);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--luma-on);
  text-decoration: none;
  border-bottom: 1px solid var(--luma-border);
  transition: color var(--luma-trans-fast), border-color var(--luma-trans-fast);
}
a:hover {
  color: var(--luma-fg);
  border-color: var(--luma-border-mid);
}

/* フォーカスリング（アクセシビリティ） */
:focus-visible {
  outline: 2px solid var(--luma-on);
  outline-offset: 2px;
  border-radius: var(--luma-radius-sm);
}


/* ------------------------------------------------------------
   3. タイポグラフィ
   ------------------------------------------------------------ */

.luma-h1 { font-size: 2rem;    font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--luma-fg); }
.luma-h2 { font-size: 1.5rem;  font-weight: 600; line-height: 1.3; color: var(--luma-fg); }
.luma-h3 { font-size: 1.125rem;font-weight: 600; line-height: 1.4; color: var(--luma-fg); }
.luma-h4 { font-size: 0.9375rem;font-weight: 600; line-height: 1.5; color: var(--luma-fg); }

.luma-body    { font-size: 1rem;      line-height: 1.7; color: var(--luma-fg); }
.luma-body-sm { font-size: 0.875rem;  line-height: 1.6; color: var(--luma-fg-muted); }
.luma-caption { font-size: 0.75rem;   line-height: 1.5; color: var(--luma-fg-hint); }
.luma-label   { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--luma-fg-muted); }
.luma-mono    { font-family: var(--luma-font-mono); font-size: 0.875rem; }


/* ------------------------------------------------------------
   4. レイアウト
   ------------------------------------------------------------ */

/* ページラッパー */
.luma-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--luma-space-lg) var(--luma-space-md);
}

/* グリッドシステム */
.luma-grid {
  display: grid;
  gap: var(--luma-space-md);
}
.luma-grid-2 { grid-template-columns: repeat(2, 1fr); }
.luma-grid-3 { grid-template-columns: repeat(3, 1fr); }
.luma-grid-4 { grid-template-columns: repeat(4, 1fr); }
.luma-grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

@media (max-width: 768px) {
  .luma-grid-2,
  .luma-grid-3,
  .luma-grid-4 { grid-template-columns: 1fr; }
}

/* フレックスユーティリティ */
.luma-flex       { display: flex; }
.luma-flex-center { display: flex; align-items: center; justify-content: center; }
.luma-flex-between { display: flex; align-items: center; justify-content: space-between; }
.luma-gap-xs { gap: var(--luma-space-xs); }
.luma-gap-sm { gap: var(--luma-space-sm); }
.luma-gap-md { gap: var(--luma-space-md); }
.luma-gap-lg { gap: var(--luma-space-lg); }

/* スタック（縦並びFlexショートカット） */
.luma-stack {
  display: flex;
  flex-direction: column;
  gap: var(--luma-space-md);
}
.luma-stack-sm { gap: var(--luma-space-sm); }


/* ------------------------------------------------------------
   5. カード（コンテナ）
   フラットベース + ごく弱いNeumorphism
   ------------------------------------------------------------ */

.luma-card {
  background: var(--luma-surface);
  border-radius: var(--luma-radius-lg);
  border: 1px solid var(--luma-border);
  padding: var(--luma-space-lg);
  /* カードは「ごく弱く適用」 */
  box-shadow: var(--luma-card-shadow);
}

.luma-card-sm {
  padding: var(--luma-space-md);
  border-radius: var(--luma-radius-md);
}

/* カードヘッダー区切り */
.luma-card__header {
  padding-bottom: var(--luma-space-md);
  margin-bottom: var(--luma-space-md);
  border-bottom: 1px solid var(--luma-border);
}

/* インナーカード（入れ子コンテナ）*/
.luma-inset {
  background: var(--luma-surface-alt);
  border-radius: var(--luma-radius-md);
  border: 1px solid var(--luma-border);
  padding: var(--luma-space-md);
}


/* ------------------------------------------------------------
   6. ボタン
   Neumorphism適用 + 状態変化オプション
   ------------------------------------------------------------ */

.luma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--luma-space-sm);
  padding: 10px 20px;
  font-family: var(--luma-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--luma-fg);
  background: var(--luma-surface);
  border: 1px solid var(--luma-border-mid);
  border-radius: var(--luma-radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  /* Neumorphism: 凸状態 */
  box-shadow: var(--luma-neu-convex);
  transition:
    box-shadow var(--luma-trans-base),
    color var(--luma-trans-fast),
    background var(--luma-trans-fast),
    border-color var(--luma-trans-fast);
}

/* ホバー: 影が少し強くなる （★ほんの少し薄く調整） */
.luma-btn:hover:not(:disabled) {
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.15),
    -5px -5px 12px rgba(255, 255, 255, 0.88);
}

/* 【✅修正箇所】構文エラーだったメディアクエリとの直接結合を解消 */
[data-theme="dark"] .luma-btn:hover:not(:disabled) {
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.45),
    -5px -5px 12px rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
  .luma-btn:hover:not(:disabled) {
    box-shadow:
      5px 5px 12px rgba(0, 0, 0, 0.45),
      -5px -5px 12px rgba(255, 255, 255, 0.05);
  }
}

/* アクティブ: 凹状態（押し込み） */
.luma-btn:active:not(:disabled) {
  box-shadow: var(--luma-neu-inset);
  border-color: var(--luma-border-strong);
}

/* プライマリボタン（色変化オプション） */
.luma-btn--primary {
  background: var(--luma-on);
  color: #fff;
  border-color: transparent;
  box-shadow:
    4px 4px 10px rgba(46, 158, 91, 0.35),
    -2px -2px 6px rgba(255, 255, 255, 0.20);
}
.luma-btn--primary:hover:not(:disabled) {
  background: #27885a;
  box-shadow:
    5px 5px 12px rgba(46, 158, 91, 0.45),
    -3px -3px 8px rgba(255, 255, 255, 0.25);
}
.luma-btn--primary:active:not(:disabled) {
  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.20);
}

/* デストラクティブボタン */
.luma-btn--danger {
  background: var(--luma-error);
  color: #fff;
  border-color: transparent;
  box-shadow:
    4px 4px 10px rgba(214, 48, 49, 0.30),
    -2px -2px 6px rgba(255, 255, 255, 0.15);
}
.luma-btn--danger:hover:not(:disabled) {
  background: #b52828;
}
.luma-btn--danger:active:not(:disabled) {
  box-shadow: inset 3px 3px 7px rgba(0, 0, 0, 0.20);
}

/* アイコンボタン（正方形） */
.luma-btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--luma-radius-md);
}

/* 無効状態 */
.luma-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}


/* ------------------------------------------------------------
   7. トグル（ON/OFF）
   Neumorphism適用 + ONのみ強調（緑）
   ------------------------------------------------------------ */

.luma-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.luma-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.luma-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: var(--luma-radius-pill);
  background: var(--luma-surface-alt);
  border: 1px solid var(--luma-border-mid);
  /* OFF: Neumorphism 凹 */
  box-shadow: var(--luma-neu-inset);
  transition:
    background var(--luma-trans-base),
    border-color var(--luma-trans-base),
    box-shadow var(--luma-trans-base);
  cursor: pointer;
}

.luma-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--luma-fg-hint);
  border: 1px solid var(--luma-border-mid);
  /* サム自体は小さな凸Neumorphism */
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.20),
    -1px -1px 3px rgba(255, 255, 255, 0.60);
  transition:
    transform var(--luma-trans-base),
    background var(--luma-trans-base),
    border-color var(--luma-trans-base),
    box-shadow var(--luma-trans-base);
  pointer-events: none;
}

/* ON状態: 緑強調 */
.luma-toggle input:checked ~ .luma-toggle__track {
  background: var(--luma-on);
  border-color: var(--luma-on);
  box-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(46, 158, 91, 0.20);
}

.luma-toggle input:checked ~ .luma-toggle__track .luma-toggle__thumb {
  transform: translateX(24px);
  background: #fff;
  border-color: rgba(255, 255, 255, 0.80);
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.18),
    -1px -1px 3px rgba(255, 255, 255, 0.90);
}

/* フォーカス表示 */
.luma-toggle input:focus-visible ~ .luma-toggle__track {
  outline: 2px solid var(--luma-on);
  outline-offset: 2px;
}

/* ラベル付きトグルラッパー */
.luma-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--luma-space-md);
  cursor: pointer;
  user-select: none;
}
.luma-toggle-row .luma-toggle-label {
  font-size: 0.875rem;
  color: var(--luma-fg);
}


/* ------------------------------------------------------------
   8. スライダー
   Neumorphism適用
   ------------------------------------------------------------ */

.luma-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--luma-space-xs);
}

.luma-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.luma-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--luma-radius-pill);
  border: 1px solid var(--luma-border-mid);
  background: var(--luma-surface-alt);
  box-shadow: var(--luma-neu-inset);
  outline: none;
  cursor: pointer;
}

/* サムネイル: Neumorphism 凸 */
.luma-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--luma-surface);
  border: 1px solid var(--luma-border-mid);
  box-shadow:
    3px 3px 7px rgba(0, 0, 0, 0.20),
    -2px -2px 5px rgba(255, 255, 255, 0.75);
  transition: box-shadow var(--luma-trans-fast);
  cursor: grab;
}
.luma-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  box-shadow: var(--luma-neu-inset);
}
.luma-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--luma-surface);
  border: 1px solid var(--luma-border-mid);
  box-shadow:
    3px 3px 7px rgba(0, 0, 0, 0.20),
    -2px -2px 5px rgba(255, 255, 255, 0.75);
  cursor: grab;
}

/* アクセントカラー進行を擬似的に（Chromiumのみ） */
.luma-slider--accent {
  background: linear-gradient(
    to right,
    var(--luma-on) 0%,
    var(--luma-on) var(--luma-progress, 50%),
    var(--luma-surface-alt) var(--luma-progress, 50%),
    var(--luma-surface-alt) 100%
  );
}


/* ------------------------------------------------------------
   9. テキスト入力
   ------------------------------------------------------------ */

.luma-input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--luma-space-xs);
}

.luma-input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--luma-font-sans);
  font-size: 0.9375rem;
  color: var(--luma-fg);
  background: var(--luma-surface);
  border: 1px solid var(--luma-border-mid);
  border-radius: var(--luma-radius-md);
  /* インプットは凹Neumorphism */
  box-shadow: var(--luma-neu-inset);
  outline: none;
  transition:
    border-color var(--luma-trans-fast),
    box-shadow var(--luma-trans-fast);
}

.luma-input::placeholder {
  color: var(--luma-fg-hint);
}

.luma-input:hover {
  border-color: var(--luma-border-strong);
}

.luma-input:focus {
  border-color: var(--luma-on);
  box-shadow:
    var(--luma-neu-inset),
    0 0 0 2px rgba(46, 158, 91, 0.18);
}

/* 数値入力（ダッシュボード） */
.luma-input--number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* エラー状態 */
.luma-input--error {
  border-color: var(--luma-error);
  box-shadow:
    var(--luma-neu-inset),
    0 0 0 2px rgba(214, 48, 49, 0.15);
}

/* 入力グループ（プレフィックス/サフィックス付き） */
.luma-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--luma-border-mid);
  border-radius: var(--luma-radius-md);
  box-shadow: var(--luma-neu-inset);
  overflow: hidden;
}
.luma-input-group .luma-input {
  border: none;
  box-shadow: none;
  border-radius: 0;
  flex: 1;
}
.luma-input-group .luma-input-addon {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--luma-surface-alt);
  border-right: 1px solid var(--luma-border);
  color: var(--luma-fg-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}
.luma-input-group .luma-input-addon--right {
  border-right: none;
  border-left: 1px solid var(--luma-border);
}


/* ------------------------------------------------------------
   10. 進捗バー
   ------------------------------------------------------------ */

.luma-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--luma-space-xs);
}

.luma-progress-track {
  width: 100%;
  height: 10px;
  background: var(--luma-surface-alt);
  border-radius: var(--luma-radius-pill);
  border: 1px solid var(--luma-border);
  box-shadow: var(--luma-neu-inset);
  overflow: hidden;
}

.luma-progress-bar {
  height: 100%;
  border-radius: var(--luma-radius-pill);
  background: var(--luma-on);
  transition: width 0.4s ease;
}

/* エラー状態 */
.luma-progress-bar--error {
  background: var(--luma-error);
}

/* 細めバリアント */
.luma-progress-track--sm {
  height: 6px;
}


/* ------------------------------------------------------------
   11. バッジ / チップ
   ------------------------------------------------------------ */

.luma-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--luma-radius-pill);
  border: 1px solid var(--luma-border);
  background: var(--luma-surface-alt);
  color: var(--luma-fg-muted);
  white-space: nowrap;
}

.luma-badge--on {
  background: var(--luma-on-bg);
  color: var(--luma-on);
  border-color: rgba(46, 158, 91, 0.30);
}

.luma-badge--error {
  background: var(--luma-error-bg);
  color: var(--luma-error);
  border-color: rgba(214, 48, 49, 0.30);
}

/* ステータスドット */
.luma-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.luma-badge--no-dot::before {
  display: none;
}


/* ------------------------------------------------------------
   12. メトリクスカード（数値サマリー）
   ------------------------------------------------------------ */

.luma-metric {
  background: var(--luma-surface);
  border: 1px solid var(--luma-border);
  border-radius: var(--luma-radius-lg);
  padding: var(--luma-space-md) var(--luma-space-lg);
  box-shadow: var(--luma-card-shadow);
}

.luma-metric__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--luma-fg-hint);
  margin-bottom: var(--luma-space-xs);
}

.luma-metric__value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--luma-fg);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.luma-metric__sub {
  font-size: 0.75rem;
  color: var(--luma-fg-muted);
  margin-top: var(--luma-space-xs);
}

.luma-metric__sub--on    { color: var(--luma-on); }
.luma-metric__sub--error { color: var(--luma-error); }


/* ------------------------------------------------------------
   13. グラフコンテナ（詳細は別途実装）
   ------------------------------------------------------------ */

.luma-chart-area {
  background: var(--luma-surface);
  border: 1px solid var(--luma-border);
  border-radius: var(--luma-radius-lg);
  padding: var(--luma-space-lg);
  box-shadow: var(--luma-card-shadow);
  min-height: 200px;
  position: relative;
}

.luma-chart-area__canvas {
  width: 100%;
  height: 100%;
}


/* ------------------------------------------------------------
   14. テーマトグルボタン
   ------------------------------------------------------------ */

.luma-theme-toggle {
  position: fixed;
  top: var(--luma-space-md);
  right: var(--luma-space-md);
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--luma-surface);
  border: 1px solid var(--luma-border-mid);
  box-shadow: var(--luma-neu-convex);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition:
    box-shadow var(--luma-trans-base),
    background var(--luma-trans-fast);
}

/* ★ホバー時の影をマイルドに調整（ライト・ダークを分離） */
.luma-theme-toggle:hover {
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.15),
    -5px -5px 12px rgba(255, 255, 255, 0.88);
}

[data-theme="dark"] .luma-theme-toggle:hover {
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.45),
    -5px -5px 12px rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
  .luma-theme-toggle:hover {
    box-shadow:
      5px 5px 12px rgba(0, 0, 0, 0.45),
      -5px -5px 12px rgba(255, 255, 255, 0.05);
  }
}

.luma-theme-toggle:active {
  box-shadow: var(--luma-neu-inset);
}


/* ------------------------------------------------------------
   15. ナビゲーション（サイドバー / トップバー共通基盤）
   ------------------------------------------------------------ */

.luma-nav {
  background: var(--luma-surface);
  border: 1px solid var(--luma-border);
}

/* サイドバー */
.luma-nav--side {
  width: 240px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  border-right: 1px solid var(--luma-border);
  border-top: none;
  border-bottom: none;
  border-left: none;
  display: flex;
  flex-direction: column;
  padding: var(--luma-space-lg) 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}

/* トップバー */
.luma-nav--top {
  height: 60px;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--luma-space-lg);
  border-right: none;
  border-left: none;
  border-top: none;
  box-shadow: 0 1px 0 var(--luma-border);
  z-index: 50;
}

/* ナビリンク */
.luma-nav__link {
  display: flex;
  align-items: center;
  gap: var(--luma-space-sm);
  padding: 10px var(--luma-space-lg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--luma-fg-muted);
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    color var(--luma-trans-fast),
    background var(--luma-trans-fast),
    border-color var(--luma-trans-fast);
  text-decoration: none;
}

.luma-nav__link:hover {
  color: var(--luma-fg);
  background: var(--luma-surface-alt);
  border-color: transparent;
}

.luma-nav__link--active {
  color: var(--luma-on);
  background: var(--luma-on-bg);
  border-right: 2px solid var(--luma-on);
  font-weight: 600;
}

/* ロゴ */
.luma-nav__brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--luma-fg);
  letter-spacing: -0.02em;
  padding: 0 var(--luma-space-lg) var(--luma-space-md);
  border-bottom: 1px solid var(--luma-border);
  margin-bottom: var(--luma-space-sm);
}

/* ナビセクション見出し */
.luma-nav__section {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--luma-fg-hint);
  padding: var(--luma-space-md) var(--luma-space-lg) var(--luma-space-xs);
}


/* ------------------------------------------------------------
   16. 区切り線
   ------------------------------------------------------------ */

.luma-divider {
  border: none;
  border-top: 1px solid var(--luma-border);
  margin: var(--luma-space-md) 0;
}

.luma-divider--strong {
  border-top-color: var(--luma-border-mid);
}


/* ------------------------------------------------------------
   17. セレクトボックス
   ------------------------------------------------------------ */

.luma-select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  font-family: var(--luma-font-sans);
  font-size: 0.9375rem;
  color: var(--luma-fg);
  background: var(--luma-surface);
  border: 1px solid var(--luma-border-mid);
  border-radius: var(--luma-radius-md);
  box-shadow: var(--luma-neu-inset);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  /* 矢印アイコン */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition:
    border-color var(--luma-trans-fast),
    box-shadow var(--luma-trans-fast);
}

.luma-select:hover {
  border-color: var(--luma-border-strong);
}
.luma-select:focus {
  border-color: var(--luma-on);
  box-shadow:
    var(--luma-neu-inset),
    0 0 0 2px rgba(46, 158, 91, 0.18);
}


/* ------------------------------------------------------------
   18. フォームフィールドラッパー
   ------------------------------------------------------------ */

.luma-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.luma-field__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--luma-fg-muted);
  user-select: none;
}

.luma-field__hint {
  font-size: 0.75rem;
  color: var(--luma-fg-hint);
}

.luma-field__error {
  font-size: 0.75rem;
  color: var(--luma-error);
}


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

.luma-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--luma-border);
  border-radius: var(--luma-radius-lg);
  box-shadow: var(--luma-card-shadow);
}

.luma-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.luma-table thead {
  background: var(--luma-surface-alt);
  border-bottom: 1px solid var(--luma-border-mid);
}

.luma-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--luma-fg-hint);
  white-space: nowrap;
}

.luma-table td {
  padding: 12px 16px;
  color: var(--luma-fg);
  border-bottom: 1px solid var(--luma-border);
}

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

.luma-table tbody tr:hover td {
  background: var(--luma-surface-alt);
}

.luma-table--numeric td,
.luma-table--numeric th {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------
   20. ユーティリティ
   ------------------------------------------------------------ */

/* 視認性補助 */
.luma-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* テキスト */
.luma-text-on    { color: var(--luma-on); }
.luma-text-error { color: var(--luma-error); }
.luma-text-muted { color: var(--luma-fg-muted); }
.luma-text-hint  { color: var(--luma-fg-hint); }

/* 整列 */
.luma-text-center { text-align: center; }
.luma-text-right  { text-align: right; }

/* スペーシング */
.luma-mt-sm { margin-top: var(--luma-space-sm); }
.luma-mt-md { margin-top: var(--luma-space-md); }
.luma-mt-lg { margin-top: var(--luma-space-lg); }
.luma-mb-sm { margin-bottom: var(--luma-space-sm); }
.luma-mb-md { margin-bottom: var(--luma-space-md); }
.luma-mb-lg { margin-bottom: var(--luma-space-lg); }

/* 幅 */
.luma-w-full { width: 100%; }

/* 表示制御 */
.luma-hidden { display: none !important; }

/* 【✅修正箇所】末尾にあった余分な閉じ括弧「}」を削除 */