/* =====================================================================
   NACOS 観光周遊デモ — styles.css
   §5 デザイントークン / 共通コンポーネント / 印刷CSS
   ===================================================================== */

:root{
  --primary:#1F6FEB; --primary-dark:#1554B8; --primary-soft:#E8F0FE;
  --accent:#FFB300;  --accent-soft:#FFF4D6; --accent-dark:#B37B00;
  --success:#16A34A; --success-soft:#E6F6EC; --danger:#DC2626;
  --bg:#F4F8FF; --card:#FFFFFF; --text:#1B2A41; --muted:#6B7A90; --border:#DCE6F5;
  --radius:16px; --radius-sm:12px; --shadow:0 4px 16px rgba(31,111,235,.10);
  --shadow-lg:0 12px 32px rgba(31,111,235,.18);
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Segoe UI",Roboto,sans-serif;
  --header-h:56px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); font-size:15px; line-height:1.6; color:var(--text);
  background:var(--bg); overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.3; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; }
img,svg{ display:block; }
img{ width:100%; height:auto; }
.icon{ width:24px; height:24px; flex:none; }
.icon--sm{ width:18px; height:18px; }
.icon--lg{ width:32px; height:32px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none !important; }

/* ---------- shell（スマホ幅中央寄せ。PCは斜めストライプ背景） ---------- */
@media (min-width:431px){
  body{
    background-color:var(--bg);
    background-image:repeating-linear-gradient(135deg, rgba(31,111,235,.045) 0 10px, transparent 10px 24px);
  }
}
.shell{
  max-width:430px; margin:0 auto; min-height:100vh; min-height:100dvh; background:#fff;
  position:relative; display:flex; flex-direction:column;
}
@media (min-width:431px){
  .shell{ border-left:1px solid var(--border); border-right:1px solid var(--border); box-shadow:0 0 60px rgba(31,111,235,.08); }
}
.shell--qr{ max-width:860px; background:var(--bg); }
@media (min-width:431px){ .shell--qr{ border:0; box-shadow:none; } }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:20; height:var(--header-h);
  display:grid; grid-template-columns:56px 1fr auto; align-items:center;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border); padding-right:12px;
}
.header__back{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; color:var(--primary); border-radius:12px; }
.header__back:active{ background:var(--primary-soft); }
.header__title{
  display:flex; align-items:center; justify-content:center; gap:6px; height:100%;
  font-weight:700; font-size:16px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header__title .icon{ width:18px; height:18px; color:var(--primary); }
.header__title--link{ color:var(--text); }
.header__title--link:active{ opacity:.7; }
.header__brand{ font-size:13px; letter-spacing:.14em; color:var(--muted); font-weight:700; }
.lang{ display:inline-flex; background:var(--primary-soft); border-radius:999px; padding:3px; }
.lang__btn{ min-width:40px; height:30px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--primary); }
.lang__btn[aria-pressed="true"]{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(31,111,235,.35); }

/* ---------- notice (京都イメージバナー) ---------- */
.notice{
  position:sticky; top:var(--header-h); z-index:19;
  background:#FFF4D6; color:#7A4B00; font-size:12px; line-height:1.5; padding:8px 16px;
  border-bottom:1px solid #F5DFA4; display:flex; gap:8px; align-items:flex-start;
}
.notice .icon{ width:16px; height:16px; margin-top:2px; }

/* ---------- page / footer ---------- */
.page{ padding:20px 16px 32px; flex:1; }
.page > * + *{ margin-top:20px; }
.page > .showing{ margin-top:0; }
.section-title{ font-size:17px; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.section-title .icon{ color:var(--primary); width:20px; height:20px; }
.section-sub{ font-size:13px; color:var(--muted); }
.footer{
  padding:24px 16px 28px; border-top:1px solid var(--border); text-align:center;
  font-size:12px; color:var(--muted); background:var(--bg);
}
.footer__brand{ letter-spacing:.2em; font-weight:700; font-size:12px; color:var(--muted); margin-bottom:6px; }
.footer__note{ font-weight:700; color:#7A4B00; margin-top:4px; }
.footer__links{ margin-top:10px; display:flex; justify-content:center; gap:14px; }
.footer__links a{ color:var(--primary); display:inline-flex; align-items:center; gap:4px; }
.footer__links .icon{ width:14px; height:14px; }

/* ---------- components ---------- */
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
.card--flat{ box-shadow:none; border:1px solid var(--border); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  height:48px; padding:0 18px; border-radius:12px; font-weight:700; font-size:15px;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.98); }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 6px 14px rgba(31,111,235,.28); }
.btn--primary:hover{ background:var(--primary-dark); }
.btn--outline{ background:#fff; color:var(--primary); border:2px solid var(--primary); }
.btn--outline:hover{ background:var(--primary-soft); }
.btn--accent{ background:var(--accent); color:#3A2A00; box-shadow:0 6px 14px rgba(255,179,0,.35); }
.btn--white{ background:#fff; color:var(--primary); }
.btn--ghost{ background:var(--primary-soft); color:var(--primary); }
.btn--text{ width:auto; height:44px; color:var(--danger); font-size:14px; }
.btn--sm{ height:40px; font-size:14px; }
.btn .icon{ width:20px; height:20px; }
.btn-row{ display:grid; gap:10px; }

.chip{
  display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 10px; border-radius:999px;
  font-size:12px; font-weight:700; line-height:1; white-space:nowrap;
}
.chip .icon{ width:14px; height:14px; }
.chip--green{ background:var(--success-soft); color:var(--success); }
.chip--gray{ background:#EEF2F7; color:var(--muted); }
.chip--accent{ background:var(--accent-soft); color:var(--accent-dark); }
.chip--blue{ background:var(--primary-soft); color:var(--primary); }
.chip--outline{ background:#fff; border:1px solid var(--border); color:var(--muted); }

.num{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:26px; height:26px; border-radius:999px; background:var(--primary); color:#fff;
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
}
.num--done{ background:var(--accent); color:#3A2A00; }
.num--muted{ background:#EEF2F7; color:var(--muted); }

/* 景品アイコン（§5.3 代替描画: 色付き丸＋白シンボル） */
.prize-icon{
  width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; flex:none; box-shadow:inset 0 -6px 0 rgba(0,0,0,.10), 0 6px 14px rgba(0,0,0,.12);
  position:relative;
}
.prize-icon::after{ content:""; position:absolute; inset:7px; border-radius:50%; border:2px dashed rgba(255,255,255,.55); }
.prize-icon svg{ width:50%; height:50%; }
.prize-icon--sm{ width:40px; height:40px; box-shadow:none; }
.prize-icon--sm::after{ inset:3px; border-width:1.5px; }
.prize-icon--md{ width:56px; height:56px; box-shadow:0 4px 10px rgba(0,0,0,.12); }
.prize-icon--md::after{ inset:4px; }
.prize-icon--xl{ width:120px; height:120px; }
.prize-icon--xl::after{ inset:9px; }
.prize-icon--photo{ border-radius:24%; overflow:hidden; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.14); }
.prize-icon--photo::after{ display:none; }
.prize-icon--photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.prize-icon--sm.prize-icon--photo{ box-shadow:0 2px 6px rgba(0,0,0,.14); }
.prize-icon--xl.prize-icon--photo{ box-shadow:0 12px 28px rgba(0,0,0,.28); }
.mini-stamp .prize-icon--photo{ border-radius:50%; }
.prize-icon--img{ background:transparent !important; box-shadow:none; }
.prize-icon--img::after{ display:none; }
.prize-icon--img img{ width:100%; height:100%; object-fit:contain; }

/* ---------- home ---------- */
.home-head{ padding-top:8px; }
.home-head__eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--primary); background:var(--primary-soft); padding:4px 10px; border-radius:999px; }
.home-head h1{ font-size:28px; margin-top:10px; letter-spacing:-.01em; }
.home-head__sub{ font-size:14px; color:var(--muted); margin-top:6px; }
.home-head__lead{ margin-top:14px; font-size:14px; }
.region-list{ display:grid; gap:14px; }
.region-card{ display:block; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .12s ease, box-shadow .12s ease; }
.region-card:active{ transform:scale(.985); }
.region-card__hero{ height:140px; position:relative; overflow:hidden; background:var(--primary-soft); }
.region-card__hero img{ width:100%; height:100%; object-fit:cover; }
.region-card__badge{ position:absolute; top:10px; left:10px; }
.region-card__body{ padding:14px 16px 16px; display:flex; align-items:center; gap:12px; }
.region-card__name{ font-size:20px; }
.region-card__tag{ font-size:13px; color:var(--muted); margin-top:2px; }
.region-card__chip{ margin-left:auto; flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; }
.region-card__chevron{ color:var(--muted); }
.steps{ display:grid; gap:10px; }
.step{ display:flex; gap:12px; align-items:center; background:var(--bg); border-radius:var(--radius-sm); padding:12px 14px; }
.step__icon{ width:44px; height:44px; border-radius:12px; background:#fff; color:var(--primary); display:flex; align-items:center; justify-content:center; flex:none; box-shadow:var(--shadow); }
.step__n{ font-size:11px; font-weight:700; color:var(--primary); letter-spacing:.1em; }
.step__text{ font-size:14px; font-weight:700; }

/* ---------- region top ---------- */
.hero{ position:relative; margin:-20px -16px 0; overflow:hidden; background:var(--primary); }
.hero img{ width:100%; height:200px; object-fit:cover; }
.hero__text{ position:absolute; left:0; right:0; bottom:0; padding:48px 20px 18px; color:#fff; background:linear-gradient(to top, rgba(12,44,100,.72), rgba(12,44,100,0)); }
.hero__name{ font-size:32px; line-height:1.15; text-shadow:0 2px 8px rgba(0,0,0,.25); }
.hero__tag{ font-size:13px; margin-top:6px; opacity:.95; text-shadow:0 1px 4px rgba(0,0,0,.3); }
.hero__badge{ position:absolute; top:12px; right:12px; }
.progress-card{ display:block; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; border:1px solid transparent; }
.progress-card--done{ background:linear-gradient(135deg,#FFC533,#FFB300); border-color:transparent; }
.progress-card__head{ display:flex; align-items:baseline; gap:8px; }
.progress-card__label{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:6px; }
.progress-card__label .icon{ width:18px; height:18px; color:var(--primary); }
.progress-card--done .progress-card__label .icon{ color:#3A2A00; }
.progress-card__count{ margin-left:auto; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.progress-card__count small{ font-size:13px; color:var(--muted); font-weight:700; }
.progress-card--done .progress-card__count small{ color:#5A4300; }
.progress-card__done{ margin-top:6px; font-size:14px; font-weight:700; color:#3A2A00; display:flex; align-items:center; gap:6px; }
.mini-stamps{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:12px; }
.mini-stamp{ aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px dashed var(--border); color:var(--border); }
.mini-stamp .prize-icon{ width:100%; height:100%; }
.mini-stamp--done{ border:0; }
.mini-stamp .icon{ width:16px; height:16px; }
.progress-card--done .mini-stamp{ border-color:rgba(58,42,0,.3); }
.next-card{ display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; }
.next-card__body{ flex:1; min-width:0; }
.next-card__name{ font-weight:700; font-size:15px; }
.next-card__prize{ font-size:12px; color:var(--muted); margin-top:2px; }
.next-card .icon{ color:var(--muted); }
.next-label{ font-size:12px; font-weight:700; color:var(--primary); letter-spacing:.06em; margin-bottom:8px; display:flex; align-items:center; gap:6px; }

/* ---------- spots + map ---------- */
.map{
  position:relative; width:100%; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background-color:var(--primary-soft); background-size:cover; background-position:center; box-shadow:var(--shadow);
}
.pin{
  position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:2px;
  width:44px; -webkit-tap-highlight-color:transparent;
}
.pin__head{ position:relative; width:36px; height:36px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); transition:transform .12s ease; }
.pin:active .pin__head{ transform:scale(1.1); }
.pin__head svg.pin-shape{ width:36px; height:36px; }
.pin__check{ position:absolute; top:6px; left:10px; width:16px; height:16px; color:#3A2A00; }
.pin__n{ width:22px; height:22px; font-size:11px; background:#fff; color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.25); }
.pin--done .pin__n{ background:var(--accent); }
.legend{ font-size:12px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.legend__note{ margin-left:auto; }
/* 画像マップ用の番号バッジ（描き込み済みピンの上に重ねる） */
.mbadge{
  position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%;
  background:var(--primary); color:#fff; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent; transition:transform .12s ease;
}
.mbadge::before{ content:""; position:absolute; inset:-8px; border-radius:50%; }
.mbadge:active{ transform:translate(-50%,-50%) scale(1.15); }
.mbadge--done{ background:var(--accent); color:#3A2A00; }
.mbadge__check{ position:absolute; right:-7px; top:-7px; width:16px; height:16px; border-radius:50%; background:var(--success); color:#fff; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.mbadge__check .icon{ width:10px; height:10px; }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:50%; }
.spot-list{ display:grid; gap:12px; }
.spot-card{ display:flex; gap:12px; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 14px 14px 16px; transition:transform .12s ease; }
.spot-card:active{ transform:scale(.985); }
.spot-card__body{ flex:1; min-width:0; }
.spot-card__top{ display:flex; align-items:center; gap:8px; }
.spot-card__name{ font-size:15px; font-weight:700; flex:1; }
.spot-card__addr{ font-size:12px; color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:4px; }
.spot-card__addr .icon{ width:14px; height:14px; }
.spot-card__prize{ font-size:13px; margin-top:8px; display:flex; align-items:center; gap:8px; }
.spot-card__prize b{ color:var(--primary); font-size:11px; letter-spacing:.04em; }
.spot-card__side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; flex:none; }

/* ---------- spot detail ---------- */
.spot-head{ display:flex; align-items:flex-start; gap:12px; }
.spot-head h1{ font-size:22px; flex:1; }
.spot-head .num{ margin-top:4px; width:32px; height:32px; font-size:14px; }
.band{ display:flex; align-items:center; gap:12px; border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; font-weight:700; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.band--todo{ background:var(--primary-soft); color:var(--primary-dark); }
.band--done{ background:var(--success-soft); color:var(--success); }
.band__icon{ width:36px; height:36px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.band__text{ flex:1; }
.band__sub{ display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:2px; }
.band time{ font-weight:400; font-size:13px; }
.addr{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.addr .icon{ width:18px; height:18px; color:var(--primary); }
.prize-card{ border-radius:var(--radius); padding:18px 16px; display:flex; gap:16px; align-items:center; border:1px solid var(--border); }
.prize-card__body{ flex:1; min-width:0; }
.prize-card__label{ font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--muted); }
.prize-card__name{ font-size:18px; margin-top:2px; }
.prize-card__desc{ font-size:13px; color:var(--muted); margin-top:6px; }
.prize-card .chip{ margin-top:8px; }
.prize-card .prize-icon--photo{ width:112px; height:112px; }
.tabs{ display:flex; background:var(--bg); border-radius:12px; padding:4px; gap:4px; margin-bottom:10px; }
.tab{ flex:1; height:38px; border-radius:9px; font-weight:700; font-size:14px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; }
.tab .icon{ width:18px; height:18px; }
.tab[aria-selected="true"]{ background:#fff; color:var(--primary); box-shadow:0 2px 8px rgba(31,111,235,.15); }
.nearby-list{ display:grid; gap:8px; }
.nearby{ display:flex; gap:12px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; }
.nearby__icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
.nearby__icon--sight{ background:var(--primary-soft); color:var(--primary); }
.nearby__icon--food{ background:#FFF1E6; color:#F97316; }
.nearby__icon .icon{ width:20px; height:20px; }
.nearby__name{ font-weight:700; font-size:14px; }
.nearby__desc{ font-size:12px; color:var(--muted); margin-top:2px; }
.coupon-list{ display:grid; gap:10px; }
.ticket{ display:flex; background:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow); overflow:hidden; position:relative; }
.ticket__stub{ width:52px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; border-right:2px dashed rgba(255,255,255,.7); }
.ticket__stub .icon{ width:22px; height:22px; }
.ticket__body{ flex:1; padding:12px 14px; min-width:0; }
.ticket__title{ font-weight:700; font-size:14px; }
.ticket__meta{ font-size:12px; color:var(--muted); margin-top:3px; }
.ticket__arrow{ display:flex; align-items:center; padding-right:10px; color:var(--muted); }
.ticket::before,.ticket::after{ content:""; position:absolute; left:44px; width:16px; height:16px; border-radius:50%; background:var(--card); }
.ticket::before{ top:-8px; } .ticket::after{ bottom:-8px; }
.venue-box{ background:#F5F7FA; border-radius:var(--radius-sm); padding:12px 14px; font-size:12px; color:var(--muted); display:flex; gap:10px; }
.venue-box .icon{ width:18px; height:18px; flex:none; color:var(--muted); margin-top:2px; }
.venue-box__hits{ margin-top:6px; font-weight:700; color:var(--text); }
.venue-box__hits b{ color:var(--primary); font-size:14px; }

/* ---------- rally ---------- */
.rally-head h1{ font-size:24px; }
.rally-bar{ height:12px; background:var(--primary-soft); border-radius:999px; overflow:hidden; margin-top:12px; }
.rally-bar__fill{ height:100%; background:linear-gradient(90deg,#FFC533,var(--accent)); border-radius:999px; transition:width .5s ease; }
.rally-count{ display:flex; align-items:baseline; gap:6px; margin-top:8px; font-size:14px; font-weight:700; }
.rally-count b{ font-size:28px; font-variant-numeric:tabular-nums; }
.rally-count small{ color:var(--muted); font-weight:700; }
.stamp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stamp-cell{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:16px 10px 14px;
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); position:relative; min-height:150px;
}
.stamp-cell--todo{ background:transparent; box-shadow:none; border:2px dashed var(--border); }
.stamp-cell__ph{ width:56px; height:56px; border-radius:50%; background:#EEF2F7; color:#B4BFCE; display:flex; align-items:center; justify-content:center; }
.stamp-cell__ph .icon{ width:28px; height:28px; }
.stamp-cell__name{ font-size:12px; font-weight:700; line-height:1.35; }
.stamp-cell__time{ font-size:11px; color:var(--success); font-weight:700; font-variant-numeric:tabular-nums; }
.stamp-cell__hint{ font-size:11px; color:var(--muted); }
.stamp-cell .num{ position:absolute; top:8px; left:8px; width:22px; height:22px; font-size:11px; }
.reward-card{ border-radius:var(--radius); padding:18px 16px; background:#fff; box-shadow:var(--shadow); display:flex; gap:14px; align-items:center; }
.reward-card--locked{ background:#F5F7FA; box-shadow:none; color:var(--muted); }
.reward-card--done{ background:linear-gradient(135deg,#FFC533,#FFB300); color:#3A2A00; box-shadow:0 10px 24px rgba(255,179,0,.35); flex-direction:column; align-items:stretch; text-align:center; }
.reward-card__icon{ width:56px; height:56px; border-radius:16px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; color:var(--accent-dark); }
.reward-card--locked .reward-card__icon{ background:#E6EAF0; color:#B4BFCE; }
.reward-card--done .reward-card__icon{ width:72px; height:72px; margin:0 auto; color:var(--accent-dark); }
.reward-card--done .reward-card__icon .icon{ width:36px; height:36px; }
.reward-card__label{ font-size:11px; font-weight:700; letter-spacing:.06em; }
.reward-card__name{ font-weight:700; font-size:15px; margin-top:2px; }
.reward-card__remain{ font-size:13px; margin-top:4px; }
.reward-card--done .reward-card__name{ font-size:18px; margin-top:8px; }
.reward-card__desc{ font-size:13px; margin-top:6px; }
.reward-card__how{ font-size:12px; margin-top:8px; opacity:.85; }
.reward-card--done .btn{ margin-top:14px; }
.history{ display:grid; gap:0; }
.history__item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; align-items:center; }
.history__item:last-child{ border-bottom:0; }
.history__time{ color:var(--muted); font-variant-numeric:tabular-nums; flex:none; width:118px; font-size:12px; }
.history__empty{ font-size:13px; color:var(--muted); padding:8px 0; }
.reset-row{ text-align:center; padding-top:8px; }
.reset-row .btn{ margin:0 auto; }

/* ---------- coupon ---------- */
.coupon-ticket{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.coupon-ticket__head{ background:var(--primary); color:#fff; padding:14px 18px; display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.08em; }
.coupon-ticket__body{ padding:20px 18px; }
.coupon-ticket__title{ font-size:20px; }
.coupon-ticket__venue{ font-size:13px; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:6px; }
.coupon-ticket__venue .icon{ width:16px; height:16px; }
.coupon-ticket__desc{ font-size:14px; margin-top:14px; }
.coupon-ticket__rows{ margin-top:14px; border-top:1px dashed var(--border); padding-top:12px; display:grid; gap:8px; font-size:13px; }
.coupon-ticket__rows div{ display:grid; grid-template-columns:72px 1fr; gap:8px; }
.coupon-ticket__rows dt{ color:var(--muted); font-weight:700; }
.coupon-ticket__rows dd{ margin:0; }
.coupon-note{ font-size:12px; color:var(--muted); }
/* 提示中 */
.showing{ position:fixed; inset:0; z-index:40; background:var(--accent); color:#3A2A00; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; animation:fadeIn .25s ease; }
.showing__check{ width:120px; height:120px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--success); box-shadow:0 12px 30px rgba(0,0,0,.15); animation:pop .5s cubic-bezier(.2,1.4,.4,1); }
.showing__check .icon{ width:64px; height:64px; }
.showing__label{ font-size:14px; font-weight:700; letter-spacing:.14em; margin-top:22px; }
.showing__title{ font-size:22px; font-weight:700; margin-top:8px; }
.showing__time{ font-size:40px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:8px; letter-spacing:.02em; }
.showing__venue{ font-size:14px; margin-top:6px; opacity:.85; }
.showing .btn{ max-width:320px; margin-top:28px; }

/* ---------- stamp overlay (QR着地演出) ---------- */
.stamp-overlay{
  position:fixed; inset:0; z-index:50; background:rgba(31,111,235,.96); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; animation:fadeIn .2s ease;
}
.stamp-overlay--out{ animation:fadeOut .25s ease forwards; }
.stamp-overlay__inner{ width:100%; max-width:360px; }
.stamp-anim{ position:relative; width:180px; height:180px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.stamp-anim .prize-icon{ animation:pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.stamp-ring{
  position:absolute; inset:0; border-radius:50%; border:4px solid var(--accent);
  animation:ring .3s ease-out .5s both;
}
.stamp-ring::before{
  content:""; position:absolute; inset:8px; border-radius:50%; border:2px dashed rgba(255,179,0,.7);
}
.stamp-overlay__title{ font-size:30px; font-weight:800; margin-top:22px; letter-spacing:.02em; animation:rise .4s ease .6s both; }
.stamp-overlay__prize{ font-size:16px; font-weight:700; margin-top:8px; opacity:.95; animation:rise .4s ease .7s both; }
.stamp-overlay__count{ display:inline-flex; align-items:baseline; gap:4px; margin-top:14px; background:rgba(255,255,255,.16); padding:6px 16px; border-radius:999px; font-weight:700; font-size:15px; animation:rise .4s ease .8s both; }
.stamp-overlay__count b{ font-size:22px; color:var(--accent); }
.stamp-overlay .btn{ margin-top:26px; animation:rise .4s ease .9s both; }
.stamp-overlay .btn--white{ box-shadow:0 8px 20px rgba(0,0,0,.18); }
.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti i{ position:absolute; top:-12px; width:8px; height:14px; border-radius:2px; opacity:0; animation:fall 1.6s ease-in .35s both; }

/* ---------- reward modal ---------- */
.modal{ position:fixed; inset:0; z-index:45; background:rgba(27,42,65,.6); display:flex; align-items:center; justify-content:center; padding:24px; animation:fadeIn .2s ease; }
.modal__box{ background:#fff; border-radius:20px; padding:26px 22px; width:100%; max-width:340px; text-align:center; box-shadow:var(--shadow-lg); animation:pop .35s cubic-bezier(.2,1.2,.4,1); }
.modal__gift{ width:96px; height:96px; margin:0 auto; border-radius:50%; background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; }
.modal__gift .icon{ width:52px; height:52px; }
.modal__title{ font-size:18px; margin-top:16px; }
.modal__code{ margin-top:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:22px; font-weight:800; letter-spacing:.08em; background:var(--bg); border:1px dashed var(--border); border-radius:12px; padding:12px; color:var(--primary-dark); }
.modal__how{ font-size:12px; color:var(--muted); margin-top:12px; }
.modal .btn{ margin-top:14px; }
.modal__close{ margin-top:8px; color:var(--muted); font-size:14px; height:40px; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:60;
  background:rgba(27,42,65,.94); color:#fff; padding:12px 18px; border-radius:999px; font-size:13px; font-weight:700;
  max-width:calc(100% - 32px); text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.25); animation:toastIn .25s ease;
}
.toast--out{ animation:fadeOut .25s ease forwards; }

/* ---------- animations ---------- */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fadeOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes pop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.1); } 100%{ transform:scale(1); } }
@keyframes ring{ from{ transform:scale(1.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes rise{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes toastIn{ from{ transform:translate(-50%,12px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }
@keyframes fall{ 0%{ transform:translateY(0) rotate(0); opacity:1; } 100%{ transform:translateY(110vh) rotate(540deg); opacity:.6; } }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---------- 位置情報チェック（docs/06）: 既存のスタンプ演出と同じトーン ---------- */
.geo-overlay{
  position:fixed; inset:0; z-index:50; background:rgba(31,111,235,.96); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px 20px; overflow-y:auto; animation:fadeIn .2s ease;
}
.geo-overlay__inner{ width:100%; max-width:360px; margin:auto; }
.geo-close{ position:absolute; top:max(8px, env(safe-area-inset-top)); right:8px; width:44px; height:44px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; opacity:.85; }
.geo-close:active{ background:rgba(255,255,255,.15); }
.geo-spot{ display:inline-flex; align-items:center; gap:10px; max-width:100%; background:rgba(255,255,255,.14); border-radius:999px; padding:5px 16px 5px 5px; }
.geo-spot .prize-icon--sm{ width:36px; height:36px; border-radius:50%; }
.geo-spot .prize-icon--photo{ box-shadow:none; }
.geo-spot__name{ font-size:13px; font-weight:700; text-align:left; line-height:1.35; }
.geo-body{ margin-top:26px; }
.geo-title{ font-size:22px; font-weight:800; margin-top:22px; line-height:1.4; }
.geo-text{ font-size:14px; line-height:1.7; margin-top:10px; opacity:.95; }
.geo-text--strong{ font-weight:700; font-size:16px; }
.geo-actions{ display:grid; gap:10px; margin-top:26px; }
.geo-actions .btn--white{ box-shadow:0 8px 20px rgba(0,0,0,.18); }
.btn--ghost-white{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.75); }
.btn--ghost-white:active{ background:rgba(255,255,255,.12); }
/* マーク */
.geo-mark{ width:112px; height:112px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; animation:pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.geo-mark .icon{ width:52px; height:52px; }
.geo-mark--pin{ background:#fff; color:var(--primary); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.geo-mark--ok{ background:#fff; color:var(--success); box-shadow:0 0 0 10px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.18); }
.geo-mark--ng{ background:#E5484D; color:#fff; box-shadow:0 0 0 10px rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.18); }
/* レーダー風パルス */
.geo-radar{ position:relative; width:180px; height:180px; margin:-34px auto -34px; }
.geo-radar i{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.85); background:rgba(255,255,255,.06); opacity:0; animation:radar 2.1s cubic-bezier(.2,.6,.3,1) infinite; }
.geo-radar i:nth-child(2){ animation-delay:.7s; }
.geo-radar i:nth-child(3){ animation-delay:1.4s; }
.geo-radar__core{ position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:#fff; color:var(--primary); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.2); animation:bob 1.4s ease-in-out infinite; }
.geo-radar__core .icon{ width:32px; height:32px; }
@keyframes radar{ 0%{ transform:scale(.3); opacity:.9; } 100%{ transform:scale(1); opacity:0; } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
/* デモ用ボタン: 点線枠＋DEMOラベル（本番機能ではないことを明示） */
.geo-demo{
  position:relative; margin-top:18px; width:100%; min-height:48px; padding:12px 14px 10px; border-radius:12px;
  border:1.5px dashed rgba(255,255,255,.7); color:rgba(255,255,255,.92); font-size:12.5px; font-weight:700; line-height:1.45; background:transparent;
}
.geo-demo:active{ background:rgba(255,255,255,.08); }
.geo-demo__label{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%); padding:1px 8px; border-radius:999px;
  background:#FFB300; color:#3A2A00; font-size:10px; font-weight:800; letter-spacing:.16em; line-height:16px;
}
/* 施設向けボックスの1行・来訪記録の方法 */
.venue-box__geo{ display:flex; gap:6px; align-items:flex-start; margin-top:6px; color:var(--text); }
.venue-box__geo .icon{ width:14px; height:14px; margin-top:2px; color:var(--primary); }
.history__item > span:last-child{ min-width:0; }
.history__how{ display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.history__how--geo{ color:var(--success); font-weight:700; }

/* ---------- QR page ---------- */
.qr-page{ padding:20px 16px 40px; }
.qr-panel{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; display:grid; gap:12px; margin-bottom:20px; }
.qr-panel__title{ font-size:18px; display:flex; align-items:center; gap:8px; }
.qr-panel__title .icon{ color:var(--primary); }
.qr-panel__row{ display:grid; gap:6px; font-size:13px; }
.qr-panel__row label{ font-weight:700; color:var(--muted); font-size:12px; }
.qr-panel select,.qr-panel input{ font:inherit; height:44px; border:1px solid var(--border); border-radius:10px; padding:0 12px; width:100%; background:#fff; color:var(--text); }
.qr-panel__warn{ color:var(--danger); font-size:12px; font-weight:700; }
.qr-panel__actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qr-sheet{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qr-sheet + .qr-sheet{ margin-top:20px; }
.qr-label{
  background:#fff; border:1px dashed #BBB; border-radius:6mm; padding:18px 12px 14px; display:flex; flex-direction:column; align-items:center;
  justify-content:space-between; text-align:center; gap:8px; min-height:330px;
}
.qr-label__region{ font-size:11px; color:var(--primary); font-weight:700; letter-spacing:.14em; }
.qr-label__name{ font-size:16px; font-weight:700; line-height:1.3; }
.qr-label__en{ font-size:10px; color:var(--muted); margin-top:2px; }
.qr-label__code{ width:100%; max-width:50mm; aspect-ratio:1; }
.qr-label__code svg{ width:100%; height:100%; }
.qr-label__hint{ font-size:11px; font-weight:700; display:flex; align-items:center; gap:4px; }
.qr-label__hint .icon{ width:14px; height:14px; color:var(--primary); }
.qr-label__no{ font-size:11px; font-weight:700; background:var(--primary-soft); color:var(--primary); padding:2px 10px; border-radius:999px; }
.qr-label__brand{ font-size:8pt; letter-spacing:.2em; color:var(--muted); font-weight:700; }
.qr-label__url{ font-size:8px; color:#AAB4C3; word-break:break-all; font-family:ui-monospace,Menlo,monospace; }
.qr-sheet__title{ grid-column:1/-1; font-size:14px; color:var(--muted); font-weight:700; }
@media (max-width:480px){ .qr-sheet{ grid-template-columns:1fr; } .qr-panel__actions{ grid-template-columns:1fr; } }

@page{ size:A4; margin:10mm; }
@media print{
  body{ background:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .shell, .shell--qr{ max-width:none; border:0; box-shadow:none; min-height:0; background:#fff; }
  .qr-page{ padding:0; }
  .qr-panel, .qr-sheet__title{ display:none !important; }
  .qr-sheet{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:88mm; gap:4mm; margin:0; }
  .qr-sheet + .qr-sheet{ margin-top:0; break-before:page; page-break-before:always; }
  /* 1面 = 88mm に収める（3行×88 + 4×2 = 272mm ≤ A4 有効 277mm） */
  .qr-label{ break-inside:avoid; height:88mm; overflow:hidden; border:1px dashed #BBB; border-radius:6mm; padding:5mm 6mm; display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-height:0; gap:1.5mm; }
  .qr-label__region{ font-size:8pt; }
  .qr-label__name{ font-size:14pt; line-height:1.25; }
  .qr-label__name--long{ font-size:11.5pt; }
  .qr-label__en{ font-size:9pt; margin-top:1mm; }
  .qr-label__code{ width:42mm; max-width:42mm; height:42mm; }
  .qr-label__hint{ font-size:10pt; }
  .qr-label__no{ font-size:8pt; }
  .qr-label__url{ display:none; }
}