/* style.css — 素のCSS。フレームワーク・プリプロセッサ・ビルド不使用（CLAUDE.md 制約9）。
   ★クラシックRPG（王道8bit/16bit風）デザイン改修（2026-08-08）：
     tedori-quest-ui-spec.md（王道クラシックRPGスタイル編）準拠。
     黒背景＋太い白の二重枠＋わずかな角丸の「コマンドウィンドウ」様式を全コンテナに徹底し、
     ドット絵フォント「DotGothic16」（index.html/privacy.htmlでGoogle Fontsから読み込み）を採用する。 */

/* ===== ① デザイントークン（すべてここで一元管理） ===== */
:root{
  /* 色：tedori-quest-ui-spec.md §2 準拠。HEX固定・oklch()等は使わない（CLAUDE.md 制約10） */
  --window-bg:     #000000;   /* コマンドウィンドウ・ボタンの背景（完全な黒） */
  --window-border: #FFFFFF;   /* ウィンドウの枠線・区切り線 */
  --text-main:     #FFFFFF;   /* 通常のテキスト（白） */
  --text-gold:     #F8D820;   /* レベル・称号・金額などのポジティブな強調 */
  --text-danger:   #E60012;   /* 警告・エラー・マイナス要素 */
  --bar-exp:       #2080D0;   /* 経験値・進捗バーの塗り（青系） */
  --bg-body:       #111111;   /* 画面全体の背景。ウィンドウ（真っ黒）より少し浮かせた色 */
  --text-muted:    #8A8A8A;   /* ★仕様書に無い補助色。注記・非活性・控えめな枠線用（実務上必要な最小限の追加） */

  /* 間隔：4px グリッド（仕様書に規定なし。既存の間隔設計を踏襲する） */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem;
  --sp-4:1rem;   --sp-6:1.5rem; --sp-8:2rem;

  /* 文字サイズ：tedori-quest-ui-spec.md §3 準拠（H1/H2=24px、本文/ボタン=16px、注記=12px） */
  --fs-h1: 24px;
  --fs-h2: 24px;
  --fs-h3: 18px;               /* ★仕様書に無い中間見出し。H1/H2とのバランスで設定 */
  --fs-body: 16px;
  --fs-data: 24px;              /* 強調値（レベル・金額表示など）＝H1/H2と同格 */
  --fs-button: 16px;
  --fs-label: 12px;
  --fs-label-lg: 14px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --ls-base: 2px;               /* ★仕様書 §3：letter-spacing 2px 程度 */

  --radius: 8px;                 /* ★仕様書 §4.1：わずかな角丸 */
  --radius-full: 999px;
  --dur:180ms; --ease:cubic-bezier(.4,0,.2,1);
  --win-border-w: 6px;           /* ★仕様書 §4.1：可能であれば double 6px の二重枠 */
  --bar-h: 18px;                 /* ★仕様書 §4.3：EXPゲージは16〜20px程度の厚み */
}

/* ===== ② リセット（最小限） ===== */
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,figure,ul{margin:0;padding:0;}
ul{list-style:none;}
img,svg{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;}
[hidden]{display:none !important;}   /* ★他のdisplay指定に負けないよう明示する */

/* ===== ③ ベース ===== */
body{
  /* ★仕様書 §2：画面全体の背景（--bg-body）はウィンドウの背景（--window-bg＝純黒）より
     少し明るく浮かせることで、ウィンドウが画面の上に「浮いて見える」奥行きを出す */
  background:var(--bg-body); color:var(--text-main);
  font-family:'DotGothic16', sans-serif;
  font-weight:400;                          /* ★DotGothic16はRegularの1ウェイトのみ */
  font-size:var(--fs-body); line-height:1.5;
  letter-spacing:var(--ls-base);
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));   /* ボトムナビ分の余白 */
}
main{display:block; max-width:640px; margin:0 auto; padding:0 var(--sp-4);}
h1{font-size:var(--fs-h1); font-weight:400; letter-spacing:var(--ls-base); color:var(--text-gold);}
h2{font-size:var(--fs-h2); font-weight:400; letter-spacing:var(--ls-base); color:var(--text-gold);}
h3{font-size:var(--fs-h3); font-weight:400; letter-spacing:var(--ls-base);}
h4{font-size:var(--fs-body); font-weight:400;}
p{font-weight:400; line-height:1.5;}
section{padding:var(--sp-6) 0; border-bottom:1px solid var(--text-muted);}
section:last-of-type{border-bottom:none;}
.section-lead{color:var(--text-muted); font-size:var(--fs-sm); margin-top:var(--sp-1);}

/* ★強調値（金額・レベル表示など）。ゴールドで目立たせる */
.data-value{font-size:var(--fs-data); font-weight:400; color:var(--text-gold);}

/* ===== ④ コンポーネント（BEM風の命名。ユーティリティを乱造しない） =====
   ★「コマンドウィンドウ」様式：黒背景＋白の太い二重線＋わずかな角丸を全コンテナに徹底する
     （tedori-quest-ui-spec.md §4.1）。 */
.card{
  background:var(--window-bg); color:var(--text-main);
  border:var(--win-border-w) double var(--window-border);
  border-radius:var(--radius);
  padding:var(--sp-4);
}
.card + .card{margin-top:var(--sp-4);}
.card__title{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-body); font-weight:400;}

/* --- ボタン（.btn／コマンド選択）。tedori-quest-ui-spec.md §4.2 準拠 ---
   ★ホバー時も背景は黒のまま反転させない。「▶」カーソルを左側に出現させて選択を示す。
     左側にカーソル分の余白を常に確保しておき、出現時にラベルが動かないようにする。 */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:44px; padding:var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 1.3em);
  border:2px solid var(--window-border);
  border-radius:var(--radius);
  background:var(--window-bg); color:var(--text-main);
  font-family:'DotGothic16', sans-serif;
  font-size:var(--fs-button); font-weight:400; letter-spacing:var(--ls-base);
  cursor:pointer; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::before{
  content:'▶';
  position:absolute; left:var(--sp-3); top:50%; transform:translateY(-50%);
  color:var(--text-gold);
  opacity:0;
}
.btn:hover, .btn:focus-visible{
  background:var(--window-bg);              /* ★背景は反転させない（黒のまま） */
  color:var(--text-gold); border-color:var(--text-gold); outline:none;
}
.btn:hover::before, .btn:focus-visible::before{
  opacity:1;
  animation:cursor-blink 700ms steps(1,end) infinite;   /* ★選択中カーソルの点滅（RPGの定番演出） */
}
@keyframes cursor-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
.btn:disabled{opacity:.4; cursor:not-allowed;}
.btn:disabled:hover{color:var(--text-main); border-color:var(--window-border);}
.btn:disabled:hover::before{opacity:0; animation:none;}
/* --- 副次アクション（戻る・キャンセル等）。枠線を控えめなグレーにして優先度を下げる --- */
.btn--ghost{border-color:var(--text-muted); color:var(--text-muted);}
.btn--ghost:hover, .btn--ghost:focus-visible{background:var(--window-bg); color:var(--text-gold); border-color:var(--text-gold);}
/* --- 主要アクション（送信・確定等）。デフォルトからゴールド枠にして「既定の選択肢」を示す ---
   ★背景は他のボタン同様、反転させず黒のまま統一する（仕様書 §4.2）。 */
.btn--accent{border-color:var(--text-gold); color:var(--text-gold);}
.btn--accent:hover, .btn--accent:focus-visible{background:var(--window-bg); color:var(--text-gold); border-color:var(--text-gold);}
.btn--block{width:100%;}
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; border:2px solid var(--window-border);
  border-radius:var(--radius);
  background:var(--window-bg); color:var(--text-main); cursor:pointer;
}
.btn-icon:hover, .btn-icon:focus-visible{color:var(--text-gold); border-color:var(--text-gold); outline:none;}
.btn.is-loading{position:relative; color:transparent;}
.btn.is-loading::after{
  content:''; position:absolute; width:1.1em; height:1.1em;
  border:2px solid var(--text-main); border-top-color:transparent; border-radius:50%;
  animation:spin .7s linear infinite;
}
.btn.is-copied{color:var(--text-gold); border-color:var(--text-gold);}
@keyframes spin{to{transform:rotate(360deg);}}

/* --- 入力欄（tedori-quest-ui-spec.md §4.5）。ブラウザ標準の白背景を廃止し、
   黒背景・白文字・細い白枠のドット風デザインにリセットする --- */
.input, select{
  width:100%; min-height:44px; padding:var(--sp-3);
  background:var(--window-bg); border:2px solid var(--window-border); color:var(--text-main);
  border-radius:var(--radius);
  font-family:'DotGothic16', sans-serif;
  font-size:16px;                                     /* ★iOS の自動ズーム防止。16px 未満にしない */
  font-weight:400;
  text-align:right; font-variant-numeric:tabular-nums;
  -webkit-appearance:none; appearance:none;            /* ★ネイティブの白背景・標準UIを除去 */
}
.input:focus-visible, select:focus-visible{outline:2px solid var(--text-gold); outline-offset:2px;}
.input--label{text-align:left; font-variant-numeric:normal;}
.input--select, select{text-align:left;}
/* ★select はネイティブの矢印も appearance:none で消えるため、SVGのデータURIで白い三角を描き直す
   （外部アイコンファイルを増やさない。favicon.svg同様インライン埋め込みでNode-Ready原則を保つ） */
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpolygon points='0,0 10,0 5,6' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--sp-3) center; background-size:10px 6px;
  padding-right:calc(var(--sp-3) * 2 + 10px);
}
/* ★プレースホルダー（例）と実際に入力済みの値を見分けやすくする（改善要望対応）。
   プレースホルダーは控えめなグレー、入力済みの値は白でくっきり表示する。 */
.input::placeholder{color:var(--text-muted); opacity:1;}
.input:not(:placeholder-shown){color:var(--text-main);}
.field{display:flex; flex-direction:column; gap:var(--sp-1); margin-top:var(--sp-3);}
.field:first-child{margin-top:0;}
.field__label{font-size:var(--fs-sm); color:var(--text-muted);}
.field-row{display:flex; align-items:center; gap:var(--sp-2); min-height:44px;}
.field-check{display:flex; align-items:center; gap:var(--sp-2); min-height:44px;}
.field-check input{width:20px; height:20px; accent-color:var(--text-gold);}

/* ===== Tips アイコン（？マーク。タップでツールチップ表示・外側タップ/バックドロップで確実に閉じる） =====
   ★ユーザーテストフィードバック改修：外側タップ・native toggleイベント連動で確実に閉じる方式は維持し、
     見た目のみコマンドウィンドウ様式（黒背景・白枠・わずかな角丸）に統一する。 */
.field__label-row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);}
.field__label-row .field__label{margin:0;}
details.tip{position:relative; display:inline-block;}
details.tip[open]{z-index:16;}                 /* ★backdrop(z-index:15)より確実に手前に出す */
details.tip > summary{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; border:2px solid var(--window-border); border-radius:50%;
  background:var(--window-bg); color:var(--text-main);
  font-size:var(--fs-xs); font-weight:400; line-height:1;
  cursor:pointer; list-style:none; user-select:none;
}
details.tip > summary::-webkit-details-marker{display:none;}
details.tip > summary:hover{color:var(--text-gold); border-color:var(--text-gold);}
details.tip > .tip__text{display:none;}
details.tip[open] > .tip__text{
  display:block;
  position:absolute; right:0; top:calc(100% + 6px); z-index:16;
  width:220px; max-width:70vw;
  background:var(--window-bg); border:2px solid var(--window-border); border-radius:var(--radius);
  padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-xs); color:var(--text-main); text-align:left; font-weight:400;
}

/* Tips用の透明バックドロップ。開いている間だけ表示し、外側タップで確実に閉じられるようにする */
.tip-backdrop{position:fixed; inset:0; z-index:15; background:transparent;}

.field-hint{margin-top:var(--sp-2);}
.field-hint summary{
  cursor:pointer; min-height:44px; display:flex; align-items:center;
  font-size:var(--fs-sm); color:var(--text-muted);
}
.field-hint p{margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--text-muted);}

.cost-card__reveal-btn{margin-top:var(--sp-3);}
.cost-card__optimized{
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px dashed var(--text-muted);
}

.before-after{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-3);}
.before-after .field{margin-top:0;}

/* ===== ⑤ プログレスバー（レベル進捗ゲージ）。tedori-quest-ui-spec.md §4.3 準拠 =====
   ★枠線は白、背景は黒、伸びる中身は青（--bar-exp）。視認性を高めるため厚め（--bar-h）にとる。 */
.progress{height:var(--bar-h); background:var(--window-bg); border:2px solid var(--window-border); border-radius:var(--radius); overflow:hidden;}
.progress__fill{
  height:100%; background:var(--bar-exp);
  width:var(--progress, 0%);
  transition:width var(--dur) var(--ease);
  border-right:2px solid var(--text-gold);   /* ★進捗の先端マーカー。0%時は幅0のため見えない */
}

/* ===== ⑤a 家賃の常時比較メーター ===== */
.rent-meter__verdict{font-weight:400; margin-top:.75rem; color:var(--text-main);}
.rent-meter__verdict[data-level="appropriate"]{color:var(--text-gold);}
.rent-meter__verdict[data-level="over_average"]{color:var(--text-muted);}
.rent-meter__verdict[data-level="over_limit"]{color:var(--text-danger);}

.rent-meter{margin-top:var(--sp-2);}
.rent-meter__bar{
  position:relative; height:var(--bar-h); background:var(--window-bg);
  border:2px solid var(--window-border); border-radius:var(--radius); overflow:hidden;
}
.rent-meter__fill{
  height:100%; background:var(--bar-exp);
  width:var(--progress, 0%);
  transition:width var(--dur) var(--ease);
}
.rent-meter__bar[data-level="over_limit"] .rent-meter__fill{background:var(--text-danger);}

.rent-meter__marker{
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--text-main);
  transform:translateX(-50%);
}
.rent-meter__legend{
  display:flex; gap:var(--sp-4); margin-top:var(--sp-2);
  font-size:var(--fs-xs); color:var(--text-muted);
}
.rent-meter__legend span{display:inline-flex; align-items:center; gap:4px;}
.rent-meter__dot{width:8px; height:8px; border-radius:50%; background:var(--text-muted);}
.rent-meter__dot--limit{background:var(--text-danger);}

/* ===== ⑥ ヘッダー（常時可視・sticky追従）。RPGのステータス画面を模した黒帯 ===== */
.app-header{
  position:sticky; top:0; z-index:10;
  background:var(--window-bg);
  border-bottom:var(--win-border-w) double var(--window-border);
  padding:var(--sp-3) var(--sp-4);
}
.app-header__inner{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-2);}
.app-header__row{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);}
.app-header__level{font-size:var(--fs-data); font-weight:400; color:var(--text-gold);}
.app-header__rank{font-size:var(--fs-sm); font-weight:400; color:var(--text-main);}
.app-header__badge{
  display:inline-flex; align-items:center; padding:0 var(--sp-2); height:20px;
  border:1px solid var(--text-muted); border-radius:var(--radius-full);
  background:transparent; color:var(--text-muted);
  font-size:var(--fs-label); font-weight:400; letter-spacing:var(--ls-base);
}
.app-header__gap{font-size:var(--fs-xs); color:var(--text-muted);}

/* ===== ⑦ ボトムナビ（iOS セーフエリア対応） ===== */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:flex; justify-content:space-around;
  background:var(--window-bg); border-top:var(--win-border-w) double var(--window-border);
  padding:var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
}
.bottom-nav__item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:44px; min-height:44px; padding:var(--sp-1) var(--sp-2);
  color:var(--text-muted); font-size:var(--fs-xs); font-weight:400;
  text-decoration:none; background:transparent;
}
.bottom-nav__item[aria-current="page"]{color:var(--text-gold);}

/* ===== ⑧ ボトムシート（iOS対応。§3.5） ===== */
.bottom-sheet{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:flex-end; justify-content:center;
  background:var(--window-bg);
}
.bottom-sheet__panel{
  width:100%; max-width:640px;
  height:auto; max-height:90dvh;      /* ★vhではなくdvh（キーボード出現時のズレ防止） */
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--window-bg); border-top:var(--win-border-w) double var(--window-border);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:var(--sp-6) var(--sp-4);
  padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.bottom-sheet__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4);}

/* ===== ⑨ フィードバックUI（§3.6） ===== */
.emotion-buttons{display:flex; gap:var(--sp-2);}
.emotion-buttons .btn{flex:1; flex-direction:column; padding-left:var(--sp-4); font-weight:400;}
.emotion-buttons .btn::before{display:none;}   /* ★3択の並びではカーソル演出は省略し選択状態のみで示す */
.emotion-buttons .btn[aria-pressed="true"]{color:var(--text-gold); border-color:var(--text-gold);}

.chip-group{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3);}
.chip{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--sp-3);
  border:2px solid var(--text-muted); border-radius:var(--radius-full);
  background:var(--window-bg); color:var(--text-main); font-size:var(--fs-sm); font-weight:400; cursor:pointer;
}
.chip[aria-pressed="true"]{color:var(--text-gold); border-color:var(--text-gold);}

.feedback-note{font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--sp-2);}
textarea.input{text-align:left; resize:vertical; min-height:88px; font-weight:400;}

/* ===== ⑩ サブスクリプション階層UI（§3.9） ★機能一時凍結中（非表示）だがスタイルは維持する ===== */
.sub-category > summary{
  display:flex; justify-content:space-between; align-items:center;
  min-height:44px; padding:var(--sp-3); cursor:pointer;
  list-style:none;                          /* デフォルトの三角を消す */
}
.sub-category > summary::-webkit-details-marker{display:none;}
.sub-category > summary::after{content:'▼'; transition:transform var(--dur) var(--ease);}
.sub-category[open] > summary::after{transform:rotate(180deg);}
.sub-category{border:2px solid var(--text-muted); border-radius:var(--radius); margin-top:var(--sp-3);}
.sub-category:first-child{margin-top:0;}

.sub-badge{font-size:var(--fs-xs); color:var(--text-gold); font-weight:400;}

.sub-service{padding:0 var(--sp-3) var(--sp-4);}
.sub-service h4{margin-bottom:var(--sp-2);}

.plan-chips{display:flex; flex-wrap:wrap; gap:var(--sp-2);}
.plan-chips label{position:relative;}
.plan-chips input{position:absolute; opacity:0; width:0; height:0;}
.plan-chips span{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:44px; padding:var(--sp-2) var(--sp-3);
  border:2px solid var(--text-muted); border-radius:var(--radius);
  font-size:var(--fs-xs); line-height:1.3; font-weight:400;
}
/* ★キーボード操作でも選択位置が分かるようにする */
.plan-chips input:focus-visible + span{outline:2px solid var(--text-gold); outline-offset:2px;}
.plan-chips input:checked + span{
  color:var(--text-gold); border-color:var(--text-gold);
}

.audience-toggle{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3); font-size:var(--fs-sm); color:var(--text-muted);}

/* ★「ファミリー・学生プランも表示する」が未チェックの間は student/family 向けプランを隠す。
   #toggle-audience はStateを持たない一時的なUI設定のため、CSSの:has()のみで完結させる
   （JS側でrender()のたびに同期する必要が無く、チェック操作に即座に追従する）。
   #toggle-audience は一意なIDのため、それを含む.cardが常に一意に特定できる。 */
.card:has(#toggle-audience:not(:checked)) .plan-chips label:has(input[data-audience="student"]),
.card:has(#toggle-audience:not(:checked)) .plan-chips label:has(input[data-audience="family"]){
  display:none;
}

/* 主要サービスの直接表示エリア（選択疲れ対策） */
.sub-primary-group{display:flex; flex-direction:column; gap:var(--sp-4);}
.sub-primary-group .sub-service{padding:0;}
.sub-primary-group .sub-service + .sub-service{margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--text-muted);}

/* 「その他のサブスクを表示」アコーディオン */
.sub-more{margin-top:var(--sp-4); border:2px solid var(--text-muted); border-radius:var(--radius);}
.sub-more > summary{
  cursor:pointer; min-height:44px; padding:var(--sp-3); display:flex; align-items:center;
  color:var(--text-gold); font-weight:400; list-style:none;
}
.sub-more > summary::-webkit-details-marker{display:none;}
.sub-more .sub-accordion-group{padding:0 var(--sp-3) var(--sp-3);}
.sub-more .sub-accordion-group .sub-category:first-child{margin-top:0;}

.empty-state{color:var(--text-muted); font-size:var(--fs-sm); padding:var(--sp-3);}

/* ===== ⑪ クエスト一覧 =====
   ★罫線は使わず、アイテム間の大きな余白（margin-bottom:56px）だけで区切る。 */
.quest-list{display:flex; flex-direction:column; margin-top:var(--sp-3);}
.quest-item{padding:0; margin-bottom:56px;}
.quest-item:last-child{margin-bottom:0;}
.quest-item__head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3);}
.quest-item__title{font-size:var(--fs-h3); font-weight:400; letter-spacing:var(--ls-base); line-height:1.6; color:var(--text-main);}
.quest-item__toggle{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); white-space:nowrap;}
.quest-item__toggle input{width:20px; height:20px; flex-shrink:0; accent-color:var(--text-gold);}
.quest-item__summary{color:var(--text-muted); font-size:var(--fs-sm); margin-top:var(--sp-2);}
.quest-item__description{margin-top:var(--sp-2);}
.quest-item__basis{margin-top:var(--sp-3); border-top:1px solid var(--text-muted); padding-top:var(--sp-2);}
.quest-item__basis summary{cursor:pointer; color:var(--text-gold); font-size:var(--fs-sm); font-weight:400; min-height:44px; display:flex; align-items:center;}
.quest-item__basis p{margin-top:var(--sp-2); color:var(--text-main);}
.quest-item__talkscript{margin-top:var(--sp-2); padding-left:var(--sp-4); list-style:disc;}
.quest-item__talkscript li{margin-top:var(--sp-1);}
.quest-item__disclaimer{margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--text-muted);}
/* ★アイコン絵文字は装飾なしでプレーンに表示する */
.quest-item__icon{font-size:24px; line-height:1;}

/* ===== ⑫ アラート・メッセージボックス（tedori-quest-ui-spec.md §4.4） =====
   ★RPGの「会話ウィンドウ」風。背景は黒、枠は白、左側にのみ赤の警告線を添える。 */
.alert, .revolving-alert{
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--window-bg); border:2px solid var(--window-border); border-left:4px solid var(--text-danger);
  border-radius:var(--radius);
  padding:var(--sp-3); margin-top:var(--sp-3);
  color:var(--text-main); font-weight:400;
}
.alert__mark, .revolving-alert__mark{color:var(--text-danger);}

/* ===== ⑫a トースト通知 ===== */
.toast{
  position:fixed; left:50%; bottom:calc(72px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  max-width:90vw; z-index:30;
  background:var(--window-bg); border:2px solid var(--window-border); border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); font-weight:400; color:var(--text-main);
}
.toast--warn{border-color:var(--text-danger); color:var(--text-danger);}
.toast--levelup{border-color:var(--text-gold); color:var(--text-gold);}

/* ===== ⑬ 最終結果（あなたの称号）画面 ===== */
.karte{text-align:center;}
.karte__level{font-size:var(--fs-h1); font-weight:400; letter-spacing:var(--ls-base); color:var(--text-gold);}
.karte__rank{font-size:var(--fs-h3); font-weight:400; letter-spacing:var(--ls-base); margin-top:var(--sp-1); color:var(--text-main);}
.karte__amount{font-size:var(--fs-body); font-weight:400; color:var(--text-main); margin-top:var(--sp-3);}
.karte__amount-value{font-size:var(--fs-data); font-weight:400; color:var(--text-gold);}
.karte__disclaimer{display:block; font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--sp-2);}
.karte-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-4); justify-content:center;}
.btn-copy-spell{min-width:14rem; justify-content:center;}  /* ラベル長変化での伸縮を防ぐ */
.spell-restore{display:flex; gap:var(--sp-2); margin-top:var(--sp-3);}
.spell-restore .input{text-align:left; font-size:var(--fs-sm);}

/* ===== ⑬a キャプチャ安全CSS（§4.4）：html2canvas 非対応プロパティを無効化 ===== */
.capture-safe, .capture-safe *{
  backdrop-filter:none !important; filter:none !important; box-shadow:none !important;
}
.capture-safe{ background-color:#111111 !important; color:#FFFFFF !important; }
.capture-safe .card{ background-color:#000000 !important; border-color:#FFFFFF !important; }
.capture-safe .karte__level,
.capture-safe .karte__amount-value{ color:#F8D820 !important; }
.capture-safe .karte__rank{ color:#FFFFFF !important; }

/* ===== ⑬b 画像モーダル（iOS長押し保存の案内） ===== */
.image-modal__img{width:100%; margin-top:var(--sp-3); border-radius:var(--radius);}

/* ===== ⑬c プリントCSSフォールバック：黒背景のまま印刷すると判読不能・インク消費が激しいため反転 ===== */
@media print{
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;}
  body{background:#fff !important; color:#000000 !important;}
  .karte{background:#fff !important; border:2px solid #000000 !important;
         break-inside:avoid; page-break-inside:avoid;}
  .karte__level, .karte__amount-value{color:#8A6D00 !important;}
  .bottom-nav, .btn, .toast, .app-header__badge{display:none !important;}
  @page{margin:12mm;}
}

/* ===== ⑬d フッター（§7.4：法定表示への導線。全ページ共通） ===== */
.app-footer{
  margin-top:var(--sp-8); padding-top:var(--sp-6);
  border-top:1px solid var(--text-muted);
  text-align:center;
}
.app-footer__link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--sp-3);
  color:var(--text-muted); font-size:var(--fs-sm); font-weight:400; text-decoration:underline;
}
.app-footer__link:hover, .app-footer__link:focus-visible{color:var(--text-gold);}
.app-footer__note{margin-top:var(--sp-1); font-size:var(--fs-xs); color:var(--text-muted);}

/* ===== ⑬e privacy.html 専用の簡易レイアウト（index.htmlと統一感のあるトークンを流用） ===== */
.policy-section{margin-top:var(--sp-6);}
.policy-section:first-of-type{margin-top:0;}
.policy-section h2{font-size:var(--fs-h3); letter-spacing:var(--ls-base); color:var(--text-gold); margin-bottom:var(--sp-2);}
.policy-section p, .policy-section li{color:var(--text-main); font-size:var(--fs-sm);}
.policy-section ul{list-style:disc; padding-left:var(--sp-6); margin-top:var(--sp-2);}
.policy-section li + li{margin-top:var(--sp-1);}
.policy-back{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:44px; padding:0 var(--sp-2);
  color:var(--text-gold); font-weight:400; text-decoration:none;
}
.policy-updated{color:var(--text-muted); font-size:var(--fs-xs); margin-top:var(--sp-1);}

/* ===== ⑮ 固定費の2段階目標バー（Phase2.1改修） ===== */
.cost-bar{margin-top:var(--sp-3);}
.cost-bar__track{
  position:relative; height:var(--bar-h); background:var(--window-bg);
  border:2px solid var(--window-border); border-radius:var(--radius); overflow:hidden;
}
.cost-bar__fill{
  height:100%; background:var(--bar-exp);
  width:var(--progress, 0%);
  transition:width var(--dur) var(--ease);
}
.cost-bar__marker{
  position:absolute; top:0; bottom:0; width:2px;
  background:var(--text-main); transform:translateX(-50%);
}
.cost-bar__marker--ideal{background:var(--text-danger);}
.cost-bar__legend{
  display:flex; justify-content:space-between; margin-top:var(--sp-1);
  font-size:var(--fs-xs); color:var(--text-muted);
}

/* ===== ⑯ クレジットカード選択UI（Phase1.5改修） ★機能一時凍結中（非表示）だがスタイルは維持する ===== */
.card-checklist{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-2);}
.card-checklist label{display:flex; align-items:center; gap:var(--sp-2); min-height:44px;}
.card-checklist input{width:20px; height:20px; flex-shrink:0; accent-color:var(--text-gold);}

/* ===== ⑰ クエスト一覧の追加要素（Phase2〜3改修） ===== */
.quest-item__saving{
  font-size:var(--fs-body); font-weight:400; color:var(--text-gold); white-space:nowrap;
}
.quest-item__toggle{margin-top:var(--sp-3);}

/* ===== ⑱「伝説の勇者」専用カード（Phase4.1） =====
   ★通常カードよりさらに太い二重線のゴールド枠で「特別感」を出す。 */
.card--legendary{
  border:var(--win-border-w) double var(--text-gold); border-radius:var(--radius);
  text-align:center; margin-top:var(--sp-3);
}
.card--legendary__title{font-size:var(--fs-h3); font-weight:400; letter-spacing:var(--ls-base); color:var(--text-gold);}
.card--legendary__subtitle{margin-top:var(--sp-2); color:var(--text-muted); font-size:var(--fs-sm);}

/* ===== ⑲ ウィザードUI改修（2026-08-08） ===== */

/* 画面切り替え。表示制御自体は [hidden] の既存グローバルルール（① リセット）に委譲する。
   .screen は section 要素のため section の余白・区切り線をそのまま継承する。 */
.screen{animation:screen-in var(--dur) var(--ease);}
@keyframes screen-in{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* --- ヘッダーのレベル進捗ゲージ（画面3・4専用）---
   ★STEP1・STEP2で入力するたびに動くEXPゲージ演出は廃止した。
     画面1・2では [data-level-gauge] 自体を hidden にする（js/ui.js 側で制御）。 */
/* ★レベルアップ時の巻き戻り（右から左へ縮んで見える）対策。0%へ瞬間リセットする間だけ付与する */
.progress__fill.no-transition{transition:none !important;}

/* --- レベル公開演出オーバーレイ（画面1→2・画面2→3の遷移時） --- */
.level-reveal{
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-body); padding:var(--sp-4);
}
.level-reveal__panel{
  width:100%; max-width:360px; text-align:center;
  background:var(--window-bg); border:var(--win-border-w) double var(--window-border);
  border-radius:var(--radius);
  padding:var(--sp-8) var(--sp-6);
  animation:level-reveal-in 480ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes level-reveal-in{
  0%   { opacity:0; transform:scale(.7); }
  60%  { opacity:1; transform:scale(1.08); }
  100% { opacity:1; transform:scale(1); }
}
.level-reveal__label{color:var(--text-muted); font-size:var(--fs-body); font-weight:400;}
.level-reveal__value{
  margin-top:var(--sp-2); font-size:56px; font-weight:400;
  color:var(--text-gold);
}
.level-reveal__sub{margin-top:var(--sp-2); min-height:1.5em; color:var(--text-main); font-size:var(--fs-sm);}
.level-reveal .btn{margin-top:var(--sp-6);}

/* --- クエスト解呪時のレベルアップ演出（ヘッダーのレベル表示・ゲージを強調する） --- */
.app-header__level.is-leveling{animation:level-bump 550ms cubic-bezier(.34,1.56,.64,1);}
@keyframes level-bump{
  0%   { transform:scale(1); }
  35%  { transform:scale(1.3); }
  100% { transform:scale(1); }
}
[data-level-gauge].is-leveling .progress__fill{animation:gauge-flash 550ms var(--ease);}
@keyframes gauge-flash{
  0%   { opacity:1; }
  40%  { opacity:.5; }
  100% { opacity:1; }
}

/* --- ボトムナビ：まだ到達していない画面はグレーアウトする --- */
.bottom-nav__item[disabled]{opacity:.35; cursor:not-allowed;}

/* ===== ⑭ アクセシビリティ／モーション配慮 ===== */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}