/* ========== styles/9_quiet_luxury.css ========== */
/* デザイン刷新「静かな計器＋高級感」上書きレイヤー（2026-06-13・調整版案B 社長承認）
   - 既存 CSS 10 本は無傷。このファイル + index.html の <link> 1行を消せば完全に元へ戻る（可逆層）
   - 配色の正: memory project_webapp_design_direction.md（最終値）
   - 損益色は CVD（色覚多様性）監査済み: scripts/design_color_cvd_audit.js
     損益色を変える時は必ず同スクリプトで P型/D型 の明度差を再監査すること
   - 方針: データ域の常時アニメを鎮め、金の艶はタイトルへ集約。ガラスはナビ一枚。
     両モードで同じ色を使わない（黒地=明るい宝石 / 白地=深い宝石） */

/* =====================================================
   1. トークン（両モード別値が肝）
   ===================================================== */
:root {
    /* 損益（意味は不変: 緑=利益/赤=損失。ダーク緑は brand #00ff88 を維持） */
    --profit: #00ff88;
    --profit-deep: #00dd77;
    --profit-glow: rgba(0, 255, 136, 0.2);
    --loss: #ff4d6e;          /* 旧 #ff4466 → 宝石ローズ折衷。CVD P型3.60/D型1.89 */
    --loss-bright: #ff7a91;
    --loss-glow: rgba(255, 77, 110, 0.2);

    /* 金（署名）— 基準 --gold #d4a520 は 1_base.css のまま */
    --gold-bright: #e8c25a;   /* 旧 #e8bf3e */
    --gold-rich: #bd9128;     /* 旧 #b8860b */

    /* 地と面（漆黒の奥行き） */
    --bg-0: #06080d;
    --bg-1: #0b0e15;
    --surface-1: #0d111a;     /* セクション */
    --surface-2: #10141f;     /* カード・統計ボックス */
    --hairline: rgba(255, 255, 255, 0.07);
    --hairline-strong: rgba(255, 255, 255, 0.14);
    --text-dim: #7a8599;
    --sapphire: rgba(90, 168, 255, 0.10);  /* ガラスの縁光 */
    --icon-warn: #EF9F27;  /* 警告アイコンの琥珀（漆黒地で映える明るめ） */
}

body.light-mode {
    /* 白地=深い宝石。ダークと同じ値を使わない（沈むため） */
    --profit: #0f9d6b;
    --profit-deep: #0c7e56;
    --profit-glow: rgba(15, 157, 107, 0.18);
    --loss: #a11c3a;          /* 深ルビー。CVD P型3.17/D型1.79=アンカー級・R/bg 7.21 */
    --loss-bright: #c0244a;
    --loss-glow: rgba(161, 28, 58, 0.14);

    --gold: #a87d14;          /* 金は温色なので白地では深く沈める */
    --gold-bright: #a87d14;
    --gold-rich: #9c7212;
    --gold-glow: rgba(168, 125, 20, 0.18);

    --bg-0: #f3efe6;
    --bg-1: #faf8f3;          /* 温白。真っ白にしない */
    --surface-1: #fffdf8;
    --surface-2: #fffcf5;
    --hairline: #e5dfd0;
    --hairline-strong: #d8d0bd;
    --text-dim: #6b6657;
    --sapphire: rgba(31, 111, 196, 0.16);
    --icon-warn: #B5740B;  /* 温白地では深めの琥珀（明るい琥珀は白で沈む） */
}

/* =====================================================
   2. 地（漆の奥行き / 温白）— サイバーグリッドは鎮める
   ===================================================== */
body {
    background: radial-gradient(1200px 800px at 50% -10%, #10151f 0%, var(--bg-1) 45%, var(--bg-0) 100%) fixed;
    color: #fff;
}

body::before {
    /* 旧: グリッド線 + 強ラジアル → 線を消し、淡い色温度だけ残す */
    background:
        radial-gradient(ellipse 700px 500px at 8% 8%, rgba(0, 255, 136, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse 500px 400px at 92% 85%, rgba(90, 168, 255, 0.025) 0%, transparent 60%),
        radial-gradient(ellipse 300px 250px at 80% 10%, rgba(212, 165, 32, 0.02) 0%, transparent 55%);
    background-size: 100% 100%;
}

body.light-mode {
    background: radial-gradient(1200px 800px at 50% -10%, #fffdf8 0%, var(--bg-1) 50%, var(--bg-0) 100%) fixed;
    color: #1c1a14;
}

body.light-mode::before {
    background: none;
}

body.light-mode::after {
    opacity: 0.012;
}

/* =====================================================
   3. 鎮め — データ域の常時アニメ無効化（keyframes は消さず上書き）
   ===================================================== */
.tab-nav::after {
    display: none;            /* cyberScan 走査線 */
}

.tab-btn.active::after,
.stat-box::after,
.section::after,
.btn-primary::after {
    animation: none;          /* tabGoldSweep / goldShimmer / goldPulseDown / btnGoldSweep */
    opacity: 0;
}

.goal-item {
    animation: none;          /* glow 脈動 */
    background: rgba(0, 255, 136, 0.07);
    border: 1px solid rgba(0, 255, 136, 0.25);
    box-shadow: none;
}

.goal-item:hover {
    transform: translateY(-1px);
    background: rgba(0, 255, 136, 0.12);
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.goal-text {
    text-shadow: none;
    font-weight: 500;
}

body.light-mode .goal-item {
    background: rgba(15, 157, 107, 0.08);
    border: 1px solid rgba(15, 157, 107, 0.35);
    box-shadow: none;
}

.user-icon img {
    border-color: var(--hairline-strong);
    box-shadow: none;
}

/* =====================================================
   4. 素材 — 発光ではなく細枠 + 淡い一段影 + 上辺リム
   ===================================================== */
.section {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.25);
}

.section::before {
    background: linear-gradient(180deg, var(--profit-glow), transparent 80%);
    width: 2px;
}

body.light-mode .section {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 3px rgba(28, 26, 20, 0.07);
}

.stat-box {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
}

/* 上辺ヘアライン: 通常カードは無彩色、収支カード（4枚目）だけ金の署名 */
.stat-box::before {
    background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
    opacity: 1;
    height: 1px;
}

.quick-stats .stats-grid .stat-box:nth-child(4)::before {
    background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
    opacity: 0.9;
}

.stat-box:hover {
    border-color: var(--hairline-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

body.light-mode .stat-box {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 3px rgba(28, 26, 20, 0.06);
}

body.light-mode .stat-box:hover {
    box-shadow: 0 4px 14px rgba(28, 26, 20, 0.12);
}

/* =====================================================
   5. ガラスはナビ一枚（サファイアの縁光・GPU 負荷は @supports で限定）
   ===================================================== */
.tab-nav {
    background: rgba(13, 17, 26, 0.85);
    border: 1px solid var(--sapphire);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 30px rgba(0, 0, 0, 0.35);
}

@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    .tab-nav {
        background: rgba(13, 17, 26, 0.55);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        backdrop-filter: blur(14px) saturate(1.1);
    }

    body.light-mode .tab-nav {
        -webkit-backdrop-filter: blur(14px) saturate(1.05);
        backdrop-filter: blur(14px) saturate(1.05);
    }
}

body.light-mode .tab-nav {
    background: rgba(250, 248, 243, 0.85);
    border: 1px solid var(--sapphire);
    box-shadow: 0 1px 3px rgba(28, 26, 20, 0.07);
}

/* ガラス本体は @supports を最後に置く（同 specificity のため後勝ちで fallback を上書き） */
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    body.light-mode .tab-nav {
        background: rgba(250, 248, 243, 0.65);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .tab-nav,
    body.light-mode .tab-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--surface-1);
    }
}

.tab-btn {
    border-radius: 10px;
}

/* =====================================================
   汎用アイコン .ico（スプライト #ico-* を <use> 参照）
   太さ・色・サイズをここ一箇所で管理（currentColor 継承＝両モード自動追従）
   ===================================================== */
.ico {
    width: 1.05em;
    height: 1.05em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* -----------------------------------------------------
   金の署名＋意味色（社長確定 2026-06-13 案B）
   価値を表すアイコン=金 / 警告=琥珀 / 危険=赤。それ以外は文脈継承（currentColor）。
   HTML は無改造・href 属性セレクタで一括指定（:has は既存 1_base.css でも使用済み）。
   色値はトークン経由＝両モードで自動追従（gold-bright/loss は mode 別値）。
   ----------------------------------------------------- */
.ico:has(use[href="#ico-star"]),
.ico:has(use[href="#ico-coins"]),
.ico:has(use[href="#ico-card"]) {
    color: var(--gold-bright);
}
.ico:has(use[href="#ico-alert"]) {
    color: var(--icon-warn);
}
.ico:has(use[href="#ico-trash"]) {
    color: var(--loss);
}

/* ライトモード署名アイコンの黒化対策（2026-06-20 FAV-STAR-LIGHT）
   上の .ico:has(...) は svg 本体に color を置くが、ライトでは 5_themes.css:968/980 の
   `body.light-mode * { color:#000 }` が SVG 子要素(use/path/circle/line)の color を黒にし、
   stroke="currentColor" が黒く描画される（お気に入り☆が黒い・.tab-ico と同型の罠で 338-341 行と同対策）。
   子要素まで署名色を再宣言して両モードで保つ。specificity (0,3,2) で body.light-mode *(0,1,1) に勝つ。 */
body.light-mode .ico:has(use[href="#ico-star"]),
body.light-mode .ico:has(use[href="#ico-star"]) *,
body.light-mode .ico:has(use[href="#ico-coins"]),
body.light-mode .ico:has(use[href="#ico-coins"]) *,
body.light-mode .ico:has(use[href="#ico-card"]),
body.light-mode .ico:has(use[href="#ico-card"]) * {
    color: var(--gold-bright);
}
body.light-mode .ico:has(use[href="#ico-alert"]),
body.light-mode .ico:has(use[href="#ico-alert"]) * {
    color: var(--icon-warn);
}
body.light-mode .ico:has(use[href="#ico-trash"]),
body.light-mode .ico:has(use[href="#ico-trash"]) * {
    color: var(--loss);
}

/* 見出し（h2/h3/h4）に置くアイコンは少し金寄りの控えめな署名にしない＝見出し色を継承。
   ただしテキストとの間隔を確保 */
h2 .ico, h3 .ico, h4 .ico {
    margin-right: 0.4em;
    vertical-align: -0.12em;
}
/* ボタン内アイコンとテキストの間隔（gap が無い要素向け） */
.btn .ico, .tool-btn .ico, button .ico {
    margin-right: 0.35em;
}
.modal-close .ico, .modal-close-btn .ico, .toggle-password .ico, .favorite-select-btn .ico {
    margin-right: 0;
}

/* 記録カードの状態バッジ（リスク盾/ルール）は小さいと形が判別しづらいので一段大きく */
.risk-badge .ico, .rule-badge .ico {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.22em;
}

/* 段落・表セル・各種ラベル内のアイコンは文字との間隔を確保（h2-4 と .btn は別途定義済み） */
p .ico, td .ico, li .ico, label .ico,
.detail-placeholder .ico,
.note-autosave-indicator .ico,
.tax-carryover-disclaimer .ico,
.tax-carryover-save-status .ico {
    margin-right: 0.4em;
}

/* 細線アイコン（絵文字置換）— currentColor 継承で両モード・active 状態に自動追従 */
.tab-btn .tab-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.25s ease;
}

.tab-btn.active .tab-ico {
    opacity: 1;
}

/* 案B（社長確定 2026-06-14）: 非アクティブタブのアイコンを金の署名に。
   stroke="currentColor" なので color を金にすると線だけ金・文字色は不変。
   active は除外（緑地に黒/白アイコンのまま）。両モード対応=var(--gold-bright) が
   ダーク #e8c25a / ライト #a87d14 に自動追従。
   specificity (0,3,0) で 5_themes.css の `body.light-mode *`{color:#000} (0,1,1) に勝つ。 */
.tab-btn:not(.active) .tab-ico {
    color: var(--gold-bright);
    opacity: 0.92;
}

.tab-btn:hover:not(.active) .tab-ico {
    opacity: 1;
}

/* ライトモードのアイコン金色化（2026-06-17 修正）
   SVG の stroke="currentColor" は presentation 属性（最弱）で、子要素（circle/line）は
   stroke を継承するが currentColor は「各要素自身の color」で再解決される。
   ライトでは 5_themes.css:980 の `body.light-mode * { color:#000 }` が子要素の color を
   黒にするため、親 svg は金でも子の線だけ黒く描画されていた（ダークは *{color:#000} が
   無いので子が金を継承＝正常だった）。非アクティブタブのアイコン本体と子要素の color を
   金に戻す。active は 5_themes.css:988 の white !important のまま（緑地白アイコン）。
   specificity (0,4,1) で body.light-mode *(0,1,1) に勝つ。 */
body.light-mode .tab-btn:not(.active) .tab-ico,
body.light-mode .tab-btn:not(.active) .tab-ico * {
    color: var(--gold-bright);
}

@media (max-width: 480px) {
    .tab-btn .tab-ico {
        width: 15px;
        height: 15px;
    }
}

body.light-mode .tab-btn {
    background: var(--surface-1);
    border: 1px solid var(--hairline-strong);
    color: #4a463c;
    font-weight: 500;
}

.tab-btn.active {
    box-shadow: 0 2px 12px var(--profit-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

body.light-mode .tab-btn.active {
    background: var(--profit);
    color: #ffffff;
    border: 1px solid var(--profit-deep);
    box-shadow: 0 2px 8px var(--profit-glow);
}

body.light-mode .tab-btn:hover:not(.active) {
    background: rgba(15, 157, 107, 0.08);
    border-color: rgba(15, 157, 107, 0.4);
    color: var(--profit-deep);
}

/* =====================================================
   6. 金はタイトルへ集約（唯一の常時アニメ・遅く低く・刻印を撫でる光）
   ===================================================== */
.header-title {
    background: linear-gradient(110deg,
        #f5f2e9 0%, #ffffff 30%,
        var(--gold-bright) 47%, var(--gold) 53%,
        #ffffff 70%, #f5f2e9 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.015em;
    animation: titleGoldSheen 12s ease-in-out infinite;
}

@keyframes titleGoldSheen {
    0%   { background-position: 0% 0; }
    42%  { background-position: 100% 0; }
    58%  { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}

/* 5_themes.css 側が !important なので同強度で受ける（ライトは黒鉄に深金の帯=刻印） */
body.light-mode .header-title {
    background: linear-gradient(110deg,
        #2a2620 0%, #1c1a14 30%,
        var(--gold) 47%, var(--gold-rich) 53%,
        #1c1a14 70%, #2a2620 100%) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: titleGoldSheen 12s ease-in-out infinite;
}

.header-subtitle {
    letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
    .header-title,
    body.light-mode .header-title {
        animation: none;
    }
}

/* =====================================================
   7. 数字を宝飾に（tabular-nums は計器の桁揃え）+ 損益色のトークン化
   ===================================================== */
.stat-number,
.stat-value,
.net-profit-value,
.goal-text {
    font-variant-numeric: tabular-nums;
}

.stat-value.positive { color: var(--profit); }
.stat-value.negative { color: var(--loss); }

/* 5_themes.css の全称黒 `span:not(.goal-text)` (0,2,2) と !important 群に勝つため
   span 付き selector / !important で同強度に揃える（既存ファイルは触らない方針の代償） */
body.light-mode span.stat-number { color: var(--profit); }
body.light-mode .stat-value.positive { color: var(--profit) !important; }
body.light-mode .stat-value.negative { color: var(--loss) !important; }
body.light-mode .section h2 { color: var(--profit-deep) !important; }

/* 旧 #00ff88 直書きユーティリティのライト可読性（白地に蛍光緑 1.26:1 → 深緑 3.27:1） */
body.light-mode .color-accent,
body.light-mode .text-accent {
    color: var(--profit) !important;
}

/* =====================================================
   8. ボタン — 発光を一段引く（色は据え置き）
   ===================================================== */
.btn-primary {
    box-shadow: 0 2px 12px var(--profit-glow);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px var(--profit-glow);
}

body.light-mode .btn-primary {
    background: var(--profit);
    color: #ffffff;
    border: 1px solid var(--profit-deep);
}

body.light-mode .btn-primary:hover {
    background: var(--profit-deep);
    box-shadow: 0 4px 12px var(--profit-glow);
}

/* 設定データタブの export/import ボタン（2026-06-17 修正）:
   5_themes.css:1018 が旧 Material 濃緑(#2E7D32)を !important で当てており、刷新後の静かな配色とも
   ダーク側の控えめ灰とも食い違っていた。さらに中央の「画像も含めて」ボタンは onclick が一致せず緑に
   ならず、3ボタンがバラバラ（緑・素・緑）に見えていた。#settings-data スコープ(ID 特異性で旧 !important
   に勝つ)で3ボタンを控えめ面色+濃い文字に統一（ナビタブと同じ言語・ホバーは緑の極薄）。 */
body.light-mode #settings-data .tool-btn {
    background: var(--surface-1) !important;
    color: #4a463c !important;
    border: 1px solid var(--hairline-strong) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
body.light-mode #settings-data .tool-btn:hover {
    background: rgba(15, 157, 107, 0.08) !important;
    border-color: rgba(15, 157, 107, 0.4) !important;
    color: var(--profit-deep) !important;
    transform: none !important;
}
/* 旧ルール(5_themes.css:1018)は padding:12px 24px を export/import の2つだけに当てており、
   中央の画像版ボタンは base の 10px 16px のまま＝デスクトップのライトで中央だけサイズが違った。
   デスクトップ(>768px)の light で3ボタンの padding を base(=ダークと同じ)に揃える。
   狭幅(≤768px)は 6_responsive.css の #settings-data .tool-btn が既に3つ均一なので対象外。 */
@media (min-width: 769px) {
    body.light-mode #settings-data .tool-btn {
        padding: 10px 16px !important;
    }
}