/*
 * menya-koji-mile 共通スタイル
 * 全画面(ホーム/来店履歴/特典と交換)で共有するCSS変数・共通コンポーネント。
 * 画面固有のスタイル(.card, .hero, .medal 等)は各HTMLのインライン<style>に持つ。
 * 会員証詳細(card.html)は配色パレットが一部異なるため :root は自ページで一部上書きする。
 */

:root {
  --bg: #f7efdc;
  --surface: #ffffff;
  --surface-2: #f2e6c9;
  --ink: #221c14;
  --ink-2: #5c5140;
  --ink-3: #8f8369;
  --line: rgba(34, 28, 20, 0.13);
  --line-strong: rgba(34, 28, 20, 0.22);
  --navy: #1c2c4a;
  --navy-dark: #121d33;
  --gold: #c8981f;
  --gold-soft: #e8c667;
  --gold-pale: #f6e6b8;
  --red: #9e2020;

  /* 会員ランク6段階(指示書2章)のトーン。ゴールド/プラチナ以外は原本デザインに
     色指定が無いため、名称から自然に連想される配色(シルバー=銀、ダイヤモンド=氷青、
     ブロンズ=控えめな真鍮色、エメラルド=深緑)で補っている。判断が必要な場合の
     暫定色として扱うこと。 */
  --tier-bronze: #a08a63; --tier-bronze-soft: #c9b78f; --tier-bronze-pale: #efe6d2;
  --tier-silver: #9aa3ad; --tier-silver-soft: #c7ced4; --tier-silver-pale: #eef1f3;
  --tier-gold: #c2971b; --tier-gold-soft: var(--gold-soft); --tier-gold-pale: var(--gold-pale);
  --tier-platinum: #a3b3b6; --tier-platinum-soft: #c7d2d4; --tier-platinum-pale: #e9eef0;
  --tier-emerald: #3f9d73; --tier-emerald-soft: #8fcbac; --tier-emerald-pale: #e3f2ea;
  --tier-diamond: #7fb8e0; --tier-diamond-soft: #bcdff2; --tier-diamond-pale: #e9f5fb;
}

/* ランクごとの配色を .card(ホーム)や .medal-badge/.rank-name(会員証詳細)に
   一括反映するための間接参照。JS側で .app に tier-<rankKey> クラスを付与するだけで
   会員証まわりの配色が丸ごと切り替わる。 */
.app.tier-bronze { --tier: var(--tier-bronze); --tier-soft: var(--tier-bronze-soft); --tier-pale: var(--tier-bronze-pale); }
.app.tier-silver { --tier: var(--tier-silver); --tier-soft: var(--tier-silver-soft); --tier-pale: var(--tier-silver-pale); }
.app.tier-gold { --tier: var(--tier-gold); --tier-soft: var(--tier-gold-soft); --tier-pale: var(--tier-gold-pale); }
.app.tier-platinum { --tier: var(--tier-platinum); --tier-soft: var(--tier-platinum-soft); --tier-pale: var(--tier-platinum-pale); }
.app.tier-emerald { --tier: var(--tier-emerald); --tier-soft: var(--tier-emerald-soft); --tier-pale: var(--tier-emerald-pale); }
.app.tier-diamond { --tier: var(--tier-diamond); --tier-soft: var(--tier-diamond-soft); --tier-pale: var(--tier-diamond-pale); }

* { box-sizing: border-box; }
/* display を指定したモーダル要素(.redeem-backdrop 等)にも hidden 属性を確実に効かせる */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); }
/* リンクは会員証カードやタブなど色を持つコンポーネントを兼ねているため、
   a 自体には色を持たせない(hover時に文字色が上書きされて読めなくなるのを防ぐ)。 */
a { color: inherit; text-decoration: none; }

/* モバイル基準390pxのデザインを、既存プロジェクト(kumaneko-mile 等)に合わせて
   フルイドな中央寄せコンテナ(最大幅430px)として表示する。
   height(min-heightではなく)で高さを画面ぴったりに固定することで、
   中身が長いページでも .scroll だけが内部スクロールし、
   タブバーは常に画面内(スクロール不要)に固定表示される。 */
.app {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* 万一 .scroll 側で吸収しきれない場合の保険 */
  overflow-x: hidden;
  color: var(--ink);
  position: relative;
}
.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ichimatsu {
  flex: none; height: 7px;
  background-image:
    linear-gradient(45deg, var(--navy) 25%, transparent 25%, transparent 75%, var(--navy) 75%),
    linear-gradient(45deg, var(--navy) 25%, transparent 25%, transparent 75%, var(--navy) 75%);
  background-size: 11px 11px; background-position: 0 0, 5.5px 5.5px;
  background-color: var(--gold-soft);
}

/* ラーメンアイコンの湯気アニメーション(全画面共通コンポーネント) */
.steam-line { animation: steam-drift 3.2s ease-in-out infinite; transform-origin: center bottom; }
@keyframes steam-drift {
  0%, 100% { opacity: .45; transform: translateY(0); }
  50% { opacity: .9; transform: translateY(-1.5px); }
}

.section-title { font-size: 13px; font-weight: 700; color: var(--ink-2); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--surface); border-radius: 12px; padding: 12px 8px; text-align: center; box-shadow: 0 0 0 1px var(--line); }
.stat .k { font-size: 10px; color: var(--ink-3); font-weight: 700; }
.stat .v { font-family: "Shippori Mincho", serif; font-size: 19px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--ink); }

.tabbar { display: flex; flex: none; border-top: 1px solid var(--line); background: var(--surface); padding: 10px 8px 18px; }
/* .tab は <a>(画面遷移)と <button>(モーダルを開くだけ、例: クーポン)の両方で使うため、
   button のデフォルト装飾(背景・枠線・フォント)を打ち消しておく。 */
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.tab span { font-size: 10px; font-weight: 700; color: var(--ink-3); }
.tab.active span { color: var(--navy); }
.tab svg { stroke: var(--ink-3); }
.tab.active svg { stroke: var(--navy); }

/* シンプルなモーダル(店舗情報・クーポンコード入力等)の共通スタイル */
.simple-backdrop {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 24px; overflow-y: auto; background: rgba(20,16,10,.6);
}
.simple-dialog {
  position: relative; width: min(100%, 330px); border-radius: 22px; padding: 20px 18px 18px;
  background: var(--surface); color: var(--ink); box-shadow: 0 25px 60px rgba(0,0,0,.45);
}
.simple-title { font-family: "Shippori Mincho", serif; font-size: 17px; font-weight: 800; text-align: center; }
.simple-note { margin-top: 6px; font-size: 11px; color: var(--ink-3); text-align: center; }
.simple-close {
  width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 999px;
  color: var(--ink-2); background: var(--surface-2); font-weight: 900; font-size: 12px; cursor: pointer;
}

/* クーポンコード入力モーダル(全画面共通。shared/coupon.js が注入する) */
.coupon-input {
  width: 100%; margin-top: 16px; padding: 13px 14px; border-radius: 12px;
  border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink);
  font-size: 15px; font-weight: 700; letter-spacing: .04em; text-align: center;
  font-family: inherit;
}
.coupon-input:focus { outline: none; border-color: var(--gold); }
.coupon-error {
  margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--red); text-align: center; min-height: 1.4em;
}
.coupon-apply {
  width: 100%; margin-top: 6px; padding: 13px; border: 0; border-radius: 999px;
  color: #fbf3e4; background: var(--navy); font-weight: 900; font-size: 13px; cursor: pointer;
}

/* 交換ボタン・注文ボタン等のダミー操作フィードバック用トースト(共通) */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 8px);
  max-width: calc(100% - 40px);
  background: var(--navy); color: #fbf3e4; font-size: 12.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 20px -8px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* デモ操作パネル(モック確認用。本来のデザインには含まれない要素)
   閉じている間はタップ領域が小さな丸ピルだけになるよう、幅は中身(.demo-controls)側に
   持たせ、.demo-panel 自体は summary の内容ぶんだけに縮める(実コンテンツと重ならないため)。 */
.demo-panel {
  /* タブバー(画面下部, 高さ約70px)と重ならないよう、その上に浮かせる */
  position: fixed; right: 12px; bottom: 78px; z-index: 40;
  max-width: calc(100vw - 24px);
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
}
.demo-panel details {
  background: rgba(34,28,20,.92); color: #fff; border-radius: 10px;
  padding: 6px 10px; font-size: 11px; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  max-height: 80vh; overflow-y: auto;
  /* 閉じている間は summary の文字ぶんだけの小さなピルにして、下の画面操作を邪魔しない */
  width: fit-content; margin-left: auto;
}
.demo-panel details[open] { width: 240px; max-width: calc(100vw - 24px); }
.demo-panel summary { cursor: pointer; font-weight: 700; list-style: none; padding: 4px 0; }
.demo-panel summary::-webkit-details-marker { display: none; }
.demo-panel .demo-controls { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 10px; }
.demo-panel .demo-group { display: flex; flex-direction: column; gap: 6px; }
.demo-panel .demo-group + .demo-group { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.demo-panel .demo-group-title { font-size: 10.5px; font-weight: 700; color: #e8c667; }
.demo-panel .demo-field { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: rgba(255,255,255,.8); }
.demo-panel select, .demo-panel input {
  font: inherit; font-size: 11px; color: #221c14; background: #fff;
  border: none; border-radius: 6px; padding: 6px 8px; width: 100%;
}
.demo-panel button {
  font-size: 11px; font-weight: 700; color: #221c14; background: #e8c667;
  border: none; border-radius: 999px; padding: 7px 12px; cursor: pointer;
}
.demo-panel #demo-reset { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }