/* ============================================================
   森、道、市場 2026 ガイドアプリ — スタイル
   公式サイト準拠：赤#de1815 / 黒#222 / 白 / 黄#ffe000 / 藍#114557
   フォント：Montserrat + IBM Plex Sans JP
============================================================ */
:root{
  --red:#de1815;
  --red-d:#ad1707;
  --ink:#222222;
  --paper:#fbf7ef;
  --card:#ffffff;
  --yellow:#ffe000;
  --teal:#114557;
  --teal-l:#588da9;
  --sub:#6b6b66;
  --line:#222222;
  --ink2:#222222;        /* 白・黄背景上で常に濃色を保つ固定インク */
  --soft:#e7e1d4;
  --ok:#1f9d57;
  /* 3軸状態の色を全コンポーネントで共有する変数。
     タイル・モーダル・チップ・マップピン・動線パネルすべてが
     ここを参照することで色のメンタルマップを保つ。 */
  --state-wish:#B5341F;     /* 朱赤：行きたい */
  --state-visited:#5b8a3a;  /* 緑：行った */
  --state-next:#2E4A6B;     /* 群青：来年こそは */
  --tabh:60px;
  --headh:134px;
  --hard:3px 3px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.65;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
body.night{
  --paper:#15171c;--card:#22252d;--ink:#f1ede3;--line:#3a3e48;
  --sub:#9aa0ac;--soft:#2c2f38;--hard:3px 3px 0 #000;
  /* ダークモード時は彩度をやや上げてコントラスト確保 */
  --state-wish:#d65240;
  --state-visited:#7aac5a;
  --state-next:#5a7da8;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:var(--red-d);}
.en{font-family:"Montserrat",sans-serif;}
/* キーボード操作時のみフォーカス位置を明示（タッチ操作には出ない） */
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:2px;}
body.night :focus-visible{outline-color:var(--teal-l);}

/* ---------- ヘッダー ---------- */
.app-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--red);color:#fff;padding:env(safe-area-inset-top) 0 0;
  border-bottom:3px solid var(--ink);
}
.app-header__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px 6px;
}
.app-header__title{font-weight:800;font-size:17px;letter-spacing:.02em;
  display:flex;align-items:center;gap:7px;}
.app-header__title .mark{
  background:var(--yellow);color:var(--ink);font-size:10px;font-weight:800;
  padding:2px 6px;border-radius:3px;border:2px solid var(--ink);
  font-family:"Montserrat",sans-serif;
}
.app-header__title .unofficial-tag{
  background:rgba(255,255,255,.22);color:#fff;font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:3px;letter-spacing:0;white-space:nowrap;
}
.app-header__right{display:flex;align-items:center;gap:8px;}
/* 時計：常時表示するが視覚的優先度は下げる（不透明度を絞り、サイズも縮小） */
.app-header__clock{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:11px;
  background:#fff;color:var(--ink2);padding:2px 8px;border-radius:18px;
  border:2px solid #222;opacity:.7;
}
/* ナイトモードボタン：常時表示するが、時計と同じく優先度を下げる */
.icon-btn{
  width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:14px;opacity:.7;
}
.icon-btn:active,.icon-btn:focus-visible{opacity:1;}
.day-tabs{display:flex;gap:6px;padding:2px 12px 9px;}
.day-tab{
  flex:1;background:#fff;color:var(--ink2);border:2px solid #222;
  border-radius:8px;padding:5px 4px;text-align:center;transition:.12s;
}
.day-tab b{font-family:"Montserrat",sans-serif;font-size:15px;font-weight:800;
  display:block;line-height:1.1;}
.day-tab span{font-size:10px;letter-spacing:.12em;font-weight:700;}
.day-tab.active{background:var(--yellow);color:var(--ink2);
  box-shadow:3px 3px 0 #222;transform:translate(-1px,-1px);}

/* ---------- 電光掲示板（マーキー） ---------- */
.marquee{
  background:#0a0a0a;
  border-top:2px solid #222;
  border-bottom:2px solid #222;
  overflow:hidden;
  position:relative;
  height:28px;
  display:flex;align-items:center;
}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:24px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,#0a0a0a 0%,rgba(10,10,10,0) 100%);}
.marquee::after{right:0;background:linear-gradient(270deg,#0a0a0a 0%,rgba(10,10,10,0) 100%);}
.marquee__track{
  display:flex;flex-shrink:0;gap:64px;
  animation:marquee-scroll 30s linear infinite;
  will-change:transform;
}
.marquee__text{
  display:inline-block;white-space:nowrap;flex-shrink:0;
  color:#ffcc33;
  font-family:"Montserrat","Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.02em;
  text-shadow:0 0 4px rgba(255,204,51,.65),0 0 10px rgba(255,180,40,.35);
  padding-right:64px;
}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation-duration:90s;}
}

/* ---------- メイン ---------- */
main{
  padding:calc(var(--headh) + env(safe-area-inset-top)) 0
          calc(var(--tabh) + env(safe-area-inset-bottom) + 14px);
  min-height:100%;
}
.view{display:none;}
.view.active{display:block;animation:fade .2s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.pad{padding:14px 14px;}
.section-title{
  font-size:13px;font-weight:800;margin:18px 0 9px;
  display:flex;align-items:center;gap:7px;
}
.section-title::before{content:"";width:14px;height:14px;background:var(--red);
  border:2px solid var(--ink);border-radius:3px;}
.section-title .en{font-size:10px;color:var(--sub);font-weight:700;}

/* ---------- カード ---------- */
.card{
  background:var(--card);border:2.5px solid var(--ink);border-radius:12px;
  box-shadow:var(--hard);padding:14px;margin-bottom:12px;
}

/* ---------- ホーム ---------- */
.hero{
  background:var(--red);color:#fff;border:3px solid var(--ink);
  border-radius:14px;box-shadow:var(--hard);padding:16px;margin-bottom:14px;
  position:relative;overflow:hidden;
}
.hero__dots{
  position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(#fff 2px,transparent 2px);
  background-size:16px 16px;pointer-events:none;
}
.hero h2{font-size:21px;font-weight:800;letter-spacing:.02em;position:relative;}
.hero .sub{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1em;opacity:.92;position:relative;}
.hero .venue{font-size:11.5px;margin-top:4px;position:relative;opacity:.95;}
.countdown{display:flex;gap:7px;margin-top:13px;position:relative;}
.cd-box{
  background:#fff;color:var(--ink2);border:2.5px solid #222;border-radius:9px;
  padding:7px 0;text-align:center;flex:1;
}
.cd-box b{font-family:"Montserrat",sans-serif;font-size:23px;font-weight:800;
  display:block;line-height:1;}
.cd-box span{font-size:10px;letter-spacing:.1em;font-weight:700;color:#6b6b66;}
.cd-box.wide{flex:none;width:100%;padding:9px 0;}
.cd-box.wide b{font-size:16px;}

.now-strip{display:flex;gap:10px;}
.now-strip .card{flex:1;margin-bottom:0;padding:12px;}
.tagline{
  font-family:"Montserrat",sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.08em;display:inline-block;padding:2px 7px;border-radius:4px;
  border:2px solid var(--ink);margin-bottom:6px;
}
.tagline.now{background:var(--red);color:#fff;}
.tagline.next{background:var(--yellow);color:var(--ink2);}
.now-name{font-size:15px;font-weight:800;line-height:1.3;}
.now-meta{font-size:11.5px;color:var(--sub);}
.now-empty{font-size:12px;color:var(--sub);padding:4px 0;}

/* アフターパーティ導線バナー（横長・送客用）。テーマカラーは
   afterparty 側の theme_color (#e8694a) に合わせて視覚的に接続する。 */
.afterparty-banner{
  display:flex;align-items:center;gap:12px;width:100%;
  background:#e8694a;color:#fff;
  border:2.5px solid var(--ink);border-radius:12px;
  box-shadow:var(--hard);
  padding:13px 14px;margin-bottom:14px;text-align:left;
  transition:.1s;
}
.afterparty-banner:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.afterparty-banner__ico{font-size:28px;flex-shrink:0;line-height:1;}
.afterparty-banner__body{flex:1;min-width:0;}
.afterparty-banner__title{font-size:14px;font-weight:800;line-height:1.2;}
.afterparty-banner__desc{font-size:11px;font-weight:600;opacity:.96;
  margin-top:3px;line-height:1.4;}
.afterparty-banner__arr{font-size:20px;font-weight:800;flex-shrink:0;}
/* マイページ更新お知らせ版：アフターパーティバナーの構造を流用しつつ、
   別アプリ送客ではなくサイト内導線なので、フェスのテーマ赤に切り替える。 */
.afterparty-banner--myplan{background:var(--red);color:#fff;}

.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px;}
.quick-btn{
  background:var(--card);border:2.5px solid var(--ink);border-radius:11px;
  box-shadow:var(--hard);padding:11px 3px;text-align:center;transition:.1s;
}
.quick-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.quick-btn .ico{font-size:23px;}
.quick-btn .lbl{font-size:11px;font-weight:800;margin-top:2px;}

.info-row{display:flex;gap:10px;padding:9px 0;border-bottom:1.5px dashed var(--soft);}
.info-row:last-child{border-bottom:none;}
.info-row .ico{font-size:20px;flex-shrink:0;}
.info-row .txt b{font-size:13px;}
.info-row .txt p{font-size:11.5px;color:var(--sub);}

.access-item{padding:10px 0;border-bottom:1.5px dashed var(--soft);}
.access-item:last-child{border-bottom:none;}
.access-item b{font-size:13px;display:flex;align-items:center;gap:6px;}
.access-item p{font-size:11.5px;color:var(--sub);margin-top:2px;}
.tag-fare{
  display:inline-block;background:var(--yellow);color:var(--ink2);
  font-size:10px;font-weight:800;padding:2px 8px;border-radius:5px;
  border:2px solid #222;margin-top:5px;
}

.link-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 2px;border-bottom:1.5px dashed var(--soft);
  font-size:13px;font-weight:700;
}
.link-row:last-child{border-bottom:none;}
.link-row .arr{color:var(--red);font-weight:800;}

.checklist label{
  display:flex;align-items:center;gap:9px;padding:8px 2px;
  border-bottom:1.5px dashed var(--soft);font-size:13px;
}
.checklist label:last-child{border-bottom:none;}
.checklist input{width:20px;height:20px;accent-color:var(--red);flex-shrink:0;}
.checklist label.done span{text-decoration:line-through;color:var(--sub);}
/* 折りたたみ版の見出し（タップで展開／閉じる） */
.checklist--collapsible{padding:4px 14px;}
.checklist--collapsible summary{
  list-style:none;cursor:pointer;font-size:13.5px;font-weight:800;
  padding:10px 2px;display:flex;align-items:center;justify-content:space-between;
}
.checklist--collapsible summary::-webkit-details-marker{display:none;}
.checklist--collapsible summary .tgl{font-size:18px;font-weight:800;color:var(--red);}
.checklist--collapsible[open] summary{border-bottom:1.5px dashed var(--soft);margin-bottom:4px;}

.faq-item{border-bottom:1.5px dashed var(--soft);padding:4px 0;}
.faq-item:last-child{border-bottom:none;}
.faq-q{
  display:flex;gap:8px;padding:9px 2px;font-size:13px;font-weight:700;
  align-items:flex-start;
}
.faq-q .qm{color:var(--red);font-weight:800;font-family:"Montserrat",sans-serif;}
.faq-q .tgl{margin-left:auto;color:var(--sub);}
.faq-a{font-size:12px;color:var(--sub);padding:0 2px 10px 22px;display:none;}
.faq-item.open .faq-a{display:block;}

/* ---------- 注意ボックス ---------- */
.notice{
  background:var(--yellow);border:2.5px solid #222;border-radius:10px;
  padding:10px 12px;font-size:11.5px;font-weight:600;color:var(--ink2);
  margin-bottom:12px;line-height:1.55;
}
.notice a{color:var(--ink2);font-weight:800;}

/* 非公式であることの注意書き（ホーム上部） */
.disclaimer{
  background:var(--card);border:2px dashed var(--sub);border-radius:10px;
  padding:10px 12px;font-size:11.5px;font-weight:600;color:var(--sub);
  margin:0 0 14px;line-height:1.6;
}
.disclaimer b{color:var(--red);font-weight:800;}
.disclaimer a{color:var(--ink);font-weight:800;text-decoration:underline;}

/* マイプラン → マップ動線ボタン */
.plan-map-btn{
  display:block;width:100%;margin:2px 0 12px;
  background:var(--red);color:#fff;border:2.5px solid var(--ink);
  border-radius:12px;padding:12px;font-size:13px;font-weight:800;
  box-shadow:var(--hard);cursor:pointer;
}
.plan-map-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}

/* ---------- 検索・フィルタ ---------- */
.searchbar{position:relative;margin-bottom:10px;}
/* 出店・出演者の検索バーはスクロールしても上部に残す（長い一覧で絞り込みやすく） */
#view-shops .searchbar,#view-artists .searchbar{
  position:sticky;top:calc(var(--headh) + env(safe-area-inset-top) + 4px);
  z-index:30;
}
.searchbar input{
  width:100%;border:2.5px solid var(--ink);border-radius:24px;
  padding:11px 16px 11px 40px;font-size:16px;background:var(--card);
  color:var(--ink);box-shadow:var(--hard);-webkit-appearance:none;appearance:none;
}
.searchbar input:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.searchbar::before{content:"🔍";position:absolute;left:14px;top:50%;
  transform:translateY(-50%);font-size:14px;}
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:9px;
  -webkit-overflow-scrolling:touch;}
.chip{
  flex:0 0 auto;background:var(--card);border:2px solid var(--ink);
  border-radius:18px;padding:6px 12px;font-size:11.5px;font-weight:800;
  white-space:nowrap;transition:.1s;
}
.chip.active{background:var(--red);color:#fff;}
.list-count{font-size:11px;color:var(--sub);font-weight:700;margin-bottom:8px;}

/* ---------- マップ ---------- */
.map-wrap{
  border:3px solid var(--ink);border-radius:12px;box-shadow:var(--hard);
  overflow:hidden;background:var(--card);position:relative;
}
.map-canvas{
  position:relative;overflow:hidden;background:#ded8c8;
  touch-action:none;height:62vh;
}
/* 会場マップは全体を一画面に表示（マップ画像の縦横比に合わせる） */
#mapCanvas{height:auto;aspect-ratio:4056 / 5733;}
/* 幅を明示しないと、画像実寸 < 画面幅の端末（Safari等）で
   絶対配置の縮小幅が画像実寸に縮み、画像がはみ出して見切れる。 */
.map-inner{position:absolute;top:0;left:0;width:100%;transform-origin:0 0;}
.map-inner img{width:100%;display:block;pointer-events:none;}
.pin{
  position:absolute;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;cursor:pointer;
  transition:filter .1s;
}
.pin__dot{
  width:21px;height:21px;border-radius:50% 50% 50% 2px;
  border:2.5px solid var(--ink);transform:rotate(45deg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:1px 1px 0 rgba(0,0,0,.35);
}
.pin__dot span{transform:rotate(-45deg);font-size:10px;}
.pin__label{
  margin-top:2px;font-size:9.5px;font-weight:800;background:var(--card);
  border:1.5px solid var(--ink);border-radius:4px;padding:1px 5px;
  white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;
}
.pin.active{filter:none;z-index:5;}
.pin.active .pin__dot{
  width:30px;height:30px;animation:pinpop .5s ease;
  box-shadow:0 0 0 6px rgba(222,24,21,.25),1px 1px 0 rgba(0,0,0,.4);
}
.pin.active .pin__dot span{font-size:13px;}
.pin.active .pin__label{background:var(--red);color:#fff;font-size:10px;}
.pin.dimmed{opacity:.32;}
@keyframes pinpop{0%{transform:rotate(45deg) scale(.4);}60%{transform:rotate(45deg) scale(1.2);}100%{transform:rotate(45deg) scale(1);}}

/* マイプラン動線ピン：行きたい出店があるエリアを件数付きで表示 */
.pin--plan{z-index:7;}
.pin--plan .plan-pin__dot{
  width:26px;height:26px;border-radius:50% 50% 50% 3px;
  background:var(--red);border:2.5px solid var(--ink);transform:rotate(45deg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.pin--plan .plan-pin__dot span{
  transform:rotate(-45deg);color:#fff;
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:12px;
}
.pin--plan .plan-pin__label{
  margin-top:3px;font-size:9.5px;font-weight:800;background:var(--red);color:#fff;
  border:1.5px solid var(--ink);border-radius:4px;padding:1px 6px;
  white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;
}
/* 状態別ピン色（行った=緑、来年=群青、行きたい=赤＝既存） */
.pin--plan-visited  .plan-pin__dot,
.pin--plan-visited  .plan-pin__label{background:var(--state-visited);}
.pin--plan-nextyear .plan-pin__dot,
.pin--plan-nextyear .plan-pin__label{background:var(--state-next);}
.pin--plan-wishlist .plan-pin__dot,
.pin--plan-wishlist .plan-pin__label{background:var(--state-wish);}
/* ピン本体の周りに「他の状態が共存する」サブドットを並べる（最大2個） */
.plan-pin__subs{
  position:absolute;top:-4px;right:-8px;display:flex;gap:2px;
}
.plan-pin__sub{
  width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink);
  background:#fff;display:block;
}
.plan-pin__sub--visited{background:var(--state-visited);}
.plan-pin__sub--nextyear{background:var(--state-next);}
.plan-pin__sub--wishlist{background:var(--state-wish);}
.pin--plan{position:absolute;}

/* マップ上部のマイプラン表示トグル */
.map-plan-toggle{
  display:block;width:calc(100% - 24px);margin:0 12px 10px;
  padding:11px 14px;border:2.5px solid var(--ink);border-radius:11px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:800;
  box-shadow:var(--hard);text-align:left;
}
.map-plan-toggle:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}

/* 動線パネルの凡例 */
.plan-legend{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;}
.plan-legend__chip{
  font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:11px;
  border:1.5px solid var(--ink);color:#fff;line-height:1.45;
}
.plan-legend__chip--visited{background:var(--state-visited);}
.plan-legend__chip--nextyear{background:var(--state-next);}
.plan-legend__chip--wishlist{background:var(--state-wish);}

/* 動線パネル内の店行に状態タグを表示 */
.zone-shop__tags{display:inline-flex;gap:3px;margin-right:6px;}
.zone-shop__tag{
  font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:9px;
  border:1.5px solid var(--ink);color:#fff;line-height:1.4;white-space:nowrap;
}
.zone-shop__tag--visited{background:var(--state-visited);}
.zone-shop__tag--nextyear{background:var(--state-next);}
.zone-shop__tag--wishlist{background:var(--state-wish);}

/* 選択中ショップの会場マップ赤マーキング（SVGオーバーレイ）。
   #areaSvg は #mapInner 内にありマップと一緒に拡縮される。 */
#areaSvg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:3;
}
/* エリア名を丸囲み（出店一覧の見出し＝赤／中央地図上の位置＝赤）*/
.area-circle{
  fill:rgba(222,24,21,.1);stroke:var(--red);stroke-width:3.4;
  vector-effect:non-scaling-stroke;
  animation:areamark 1s ease-in-out infinite alternate;
}
.area-circle--venue{stroke-width:4;fill:rgba(222,24,21,.16);}
/* (1) 店名が記載されている部分：出店一覧の店名を赤枠で囲う */
.area-namebox{
  fill:rgba(255,224,0,.34);stroke:var(--red);stroke-width:2.6;
  vector-effect:non-scaling-stroke;
  animation:areamark 1s ease-in-out infinite alternate;
}
@keyframes areamark{
  from{stroke-opacity:.55;}
  to{stroke-opacity:1;}
}

/* 選択中ショップのピン：店名を指す固定サイズのピン（どの縮尺でも見える）
   先端の▼が店名の中心を指す */
.pin--shop{z-index:9;}
.pin--shop .shop-pin__body{
  background:var(--red);color:#fff;font-size:11px;font-weight:800;
  border:2.5px solid var(--ink);border-radius:8px;padding:5px 9px;
  white-space:nowrap;max-width:172px;overflow:hidden;text-overflow:ellipsis;
  box-shadow:2px 2px 0 var(--ink);
  animation:shopglow 1.1s ease-in-out infinite;
}
.pin--shop .shop-pin__body b{font-family:"Montserrat",sans-serif;}
.pin--shop .shop-pin__tip{
  width:0;height:0;border:9px solid transparent;
  border-top-color:var(--ink);margin-top:-2px;
}
@keyframes shopglow{
  0%,100%{box-shadow:2px 2px 0 var(--ink),0 0 0 3px rgba(255,224,0,.95);}
  50%{box-shadow:2px 2px 0 var(--ink),0 0 0 10px rgba(255,224,0,.2);}
}
/* 選択中ショップのエリア位置ピン：そのエリアが会場マップ上のどこにあるかを示す */
.pin--area-loc{z-index:8;}
.pin--area-loc .area-pin__body{
  background:var(--teal);color:#fff;font-size:10.5px;font-weight:800;
  border:2.5px solid var(--ink);border-radius:8px;padding:4px 9px;
  white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;
  box-shadow:2px 2px 0 var(--ink);
}
.pin--area-loc .area-pin__tip{
  width:0;height:0;border:8px solid transparent;
  border-top-color:var(--ink);margin-top:-2px;
}
.map-zoom{
  position:absolute;right:9px;bottom:9px;display:flex;flex-direction:column;gap:6px;
}
.map-zoom button{
  width:44px;height:44px;background:var(--card);border:2.5px solid var(--ink);
  border-radius:9px;font-size:21px;font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--hard);
}
.map-hint{
  font-size:10.5px;color:var(--sub);padding:8px 4px 0;text-align:center;
}
/* マップ下：選択ゾーン情報 */
.zone-panel{margin-top:12px;}
.zone-panel__head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.zone-panel__head b{font-size:15px;font-weight:800;}
.zone-shop{
  display:flex;align-items:center;gap:9px;padding:9px 2px;
  border-bottom:1.5px dashed var(--soft);
}
.zone-shop:last-child{border-bottom:none;}
.zone-shop .ico{font-size:18px;}
.zone-shop .nm{font-size:13px;font-weight:700;flex:1;}
.zone-shop .arr{color:var(--red);font-weight:800;}

/* ---------- タイムテーブル ---------- */
.tt-stage-group{margin-bottom:15px;}
.tt-stage-head{
  display:flex;align-items:center;gap:8px;margin-bottom:7px;
  font-size:13px;font-weight:800;
}
.tt-stage-dot{width:14px;height:14px;border-radius:4px;border:2px solid var(--ink);
  flex-shrink:0;}
.tt-slot{
  background:var(--card);border:2.5px solid var(--ink);border-radius:10px;
  box-shadow:var(--hard);padding:9px 11px;margin-bottom:8px;
  display:flex;align-items:center;gap:10px;
}
.tt-slot.is-now{background:var(--yellow);color:var(--ink2);}
.tt-slot.is-now .tt-slot__time,
.tt-slot.is-now .tt-slot__name{color:var(--ink2);}
.tt-slot.is-done{opacity:.5;}
.tt-slot__time{
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:13px;
  text-align:center;flex-shrink:0;width:44px;
}
.tt-slot__time small{display:block;font-size:9px;color:var(--sub);font-weight:700;}
.tt-slot__body{flex:1;min-width:0;}
.tt-slot__name{font-size:14px;font-weight:800;}
.tt-slot__tag{font-size:9px;font-weight:800;
  font-family:"Montserrat",sans-serif;color:var(--red);}
.tt-slot__fav{flex-shrink:0;width:34px;height:34px;font-size:21px;
  display:flex;align-items:center;justify-content:center;}

/* ---------- グリッドタイル ---------- */
.list-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tile{
  background:var(--card);border:2.5px solid var(--ink);border-radius:11px;
  box-shadow:var(--hard);padding:11px;position:relative;transition:.1s;
}
.tile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.tile__cat{font-size:19px;}
.tile__name{font-size:12.5px;font-weight:800;margin:4px 0 2px;
  word-break:break-word;line-height:1.35;}
.tile__meta{font-size:11px;color:var(--sub);font-weight:600;}
.tile__fav{position:absolute;top:2px;right:2px;font-size:20px;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  z-index:2;}
/* 出店タイルはカテゴリ絵文字を撤去し、店名を左上に詰める。
   3状態ボタン（行きたい・行った・来年）をタイル下部に並べるため、
   店名・エリア名の右側に大きな余白は不要。メモマークは右上に小さく出す。 */
.tile--shop{padding:11px 11px 7px;display:flex;flex-direction:column;}
.tile--shop .tile__name{margin:0 28px 3px 0;font-size:13.5px;line-height:1.3;}
.tile--shop .tile__meta{font-size:11px;color:var(--sub);font-weight:600;margin-bottom:8px;}
.tile__memo-mark{
  position:absolute;top:6px;right:8px;font-size:14px;line-height:1;pointer-events:none;
}

/* タイル下部 3 状態トグルバー */
.tile__statebar{
  display:flex;gap:4px;margin-top:auto;
}
.state-btn{
  flex:1 1 0;min-width:0;background:var(--card);
  border:2px solid var(--ink);border-radius:8px;
  padding:5px 1px 4px;cursor:pointer;transition:.1s;
  display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1;
  overflow:hidden;
}
.state-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink);}
.state-btn__ico{font-size:15px;line-height:1;}
.state-btn__lbl{font-size:9px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;}
/* 状態 on の各ボタン色（マイページのチップ色と統一） */
.state-btn--fav.on{background:var(--state-wish);color:#fff;border-color:#1a1a1a;}
.state-btn--visited.on{background:var(--state-visited);color:#fff;border-color:#1a1a1a;}
.state-btn--nextyear.on{background:var(--state-next);color:#fff;border-color:#1a1a1a;}
body.night .state-btn{background:#2c2f38;color:#f1ede3;}
.empty{text-align:center;color:var(--sub);font-size:13px;padding:44px 20px;}
.empty .big{font-size:40px;margin-bottom:8px;}

/* ---------- マイプラン ---------- */
.seg-tabs{display:flex;gap:7px;margin-bottom:13px;}
.seg-tabs button{
  flex:1;background:var(--card);border:2.5px solid var(--ink);border-radius:9px;
  padding:8px;font-size:12px;font-weight:800;box-shadow:var(--hard);transition:.1s;
}
.seg-tabs button.active{background:var(--red);color:#fff;}

/* ---------- モーダル ---------- */
.modal-bg{
  position:fixed;inset:0;background:rgba(34,34,34,.55);z-index:100;
  display:none;align-items:flex-end;
}
.modal-bg.open{display:flex;}
.modal{
  background:var(--paper);width:100%;border-radius:18px 18px 0 0;
  border-top:3px solid var(--ink);
  padding:6px 16px calc(env(safe-area-inset-bottom) + 22px);
  max-height:88vh;overflow-y:auto;animation:slideup .22s ease;
}
@keyframes slideup{from{transform:translateY(100%);}to{transform:none;}}
.modal__handle{width:40px;height:4px;background:var(--ink);border-radius:3px;
  margin:8px auto 14px;opacity:.3;}
/* モーダル上部の明示的な「閉じる」ボタン。
   モーダル本体（.modal）の右上に absolute で固定。`.modal` 自体は
   relative ではないため、padding-top の上に乗る形で position する。
   モーダル本文がスクロール可能な場合でも、初期表示時は明確に見える位置。 */
.modal{position:relative;}
.modal__close{
  position:absolute;top:8px;right:10px;z-index:5;
  width:36px;height:36px;border-radius:50%;
  background:var(--card);color:var(--ink);
  border:2.5px solid var(--ink);font-size:16px;font-weight:900;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:1px 1px 0 var(--ink);
}
.modal__close:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink);}
.modal__cat{font-size:30px;}
.modal__title{font-size:21px;font-weight:800;margin:3px 0 2px;line-height:1.3;}
.modal__sub{font-size:11px;color:var(--sub);font-weight:700;margin-bottom:14px;}
.modal__row{
  background:var(--card);border:2px solid var(--ink);border-radius:10px;
  padding:10px 13px;margin-bottom:8px;display:flex;align-items:center;gap:10px;
}
.modal__row .ico{font-size:19px;}
.modal__row .k{font-size:9.5px;color:var(--sub);font-weight:800;}
.modal__row .v{font-size:14px;font-weight:800;}
.modal__btns{display:flex;gap:9px;margin-top:6px;}
.btn{
  flex:1;border-radius:10px;padding:13px;font-size:13px;font-weight:800;
  text-align:center;transition:.1s;border:2.5px solid var(--ink);
  box-shadow:var(--hard);
}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn--primary{background:var(--red);color:#fff;}
.btn--ghost{background:var(--card);color:var(--ink);}
/* 3トグル：色は全コンポーネント共通の3軸色（朱赤・緑・群青）に統一。
   非アクティブはニュートラルな card 色＋ ink 文字。アクティブで状態色＋白文字。 */
.btn--fav{background:var(--card);color:var(--ink);}
.btn--fav.on{background:var(--state-wish);color:#fff;}
.btn--visited{background:var(--card);color:var(--ink);}
.btn--visited.on{background:var(--state-visited);color:#fff;}
.btn--nextyear{background:var(--card);color:var(--ink);}
.btn--nextyear.on{background:var(--state-next);color:#fff;}
/* 3ボタン横並びはモバイルだと文字が詰まるため、font-size をやや絞る */
.modal__btns--triple .btn{padding:11px 6px;font-size:12px;}
/* 狭い画面（〜425px）では 2行レイアウトに切替：
   1行目に「行きたい」「行った」、2行目に「来年」を幅いっぱい */
@media (max-width:425px){
  .modal__btns--triple{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .modal__btns--triple .btn{font-size:13px;padding:12px 8px;}
  .modal__btns--triple .btn:nth-child(3){grid-column:1/-1;}
}

/* タイルの状態バッジ（visited／memo／nextyear）
   ★（.tile__fav、右上 44px）と完全に位置を分け、タイル右下に横並び。
   バッジが1〜3個でもタイル高さに依存せず収まる。 */
.tile__badges{
  position:absolute;bottom:6px;right:6px;display:flex;flex-direction:row;
  gap:3px;align-items:center;pointer-events:none;z-index:1;
}
.tile__badge{
  font-size:12px;line-height:1;background:var(--card);
  border:2px solid var(--ink);border-radius:50%;width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:1px 1px 0 var(--ink);
}
/* バッジを色分けして種類を見分けやすくする（ライト/ダーク両モード対応） */
.tile__badge--visited{background:#d4edda;}
.tile__badge--memo{background:#fff3cd;}
.tile__badge--nextyear{background:#e2d5c0;}
body.night .tile__badge--visited{background:#1e5631;}
body.night .tile__badge--memo{background:#4d3e00;}
body.night .tile__badge--nextyear{background:#5a4a3a;}
/* visited 状態のタイルは背景をうっすら緑にして「行った感」を出す。
   ダークモードでは緑が明るすぎないよう、深い緑にトーンを落とす。 */
.tile--visited{background:linear-gradient(180deg,#f3f8ec 0%,var(--card) 60%);}
body.night .tile--visited{background:linear-gradient(180deg,#2a3a2a 0%,var(--card) 60%);}

/* モーダル：メモブロック */
.note-block{
  margin-top:12px;padding:10px;border:2px solid var(--ink);border-radius:10px;
  background:var(--card);box-shadow:var(--hard);
}
.note-block__head{font-size:12px;font-weight:800;margin-bottom:6px;color:var(--ink);}
.note-block__tags{margin:0 -2px 6px;}
.note-block__body{
  width:100%;min-height:84px;padding:8px;border-radius:8px;
  border:2px solid var(--ink);background:#fff;font-size:16px;line-height:1.55;
  resize:vertical;font-family:inherit;
  /* iOS Safari は font-size 16px 未満の input/textarea をフォーカスすると
     ページを自動ズームしてしまう。これを防ぐため 16px 以上を維持する。 */
}
.note-block__body:focus{outline:2px solid var(--red);outline-offset:1px;}
.note-block__count{
  font-size:10.5px;color:var(--sub);text-align:right;margin-top:4px;font-weight:700;
}

/* マイプラン：第2層チップ群（行きたい／行った／来年）
   未選択は白／暗グレー。選択中は3軸の色で塗り分けて、タイル・モーダル・
   マップピンと同じ色のメンタルマップを保つ。 */
.chips--sub{margin-bottom:10px;}
.chips--sub .chip{background:#ffffff;color:#1a1a1a;border-color:#1a1a1a;}
.chips--sub .chip.active[data-sub="wishlist"]{background:var(--state-wish);color:#fff;}
.chips--sub .chip.active[data-sub="visited"] {background:var(--state-visited);color:#fff;}
.chips--sub .chip.active[data-sub="nextyear"]{background:var(--state-next);color:#fff;}
body.night .chips--sub .chip{background:#2c2f38;color:#f1ede3;border-color:#f1ede3;}
body.night .chips--sub .chip.active{color:#fff;}

/* マイプラン：visited サブタブのタイル本文プレビュー（メモの抜粋） */
.tile__notepreview{
  margin-top:6px;padding-top:6px;border-top:1.5px dashed var(--sub);
  display:flex;flex-direction:column;gap:3px;
}
.tile__notetags{font-size:10px;color:var(--red);font-weight:800;letter-spacing:.02em;}
.tile__notebody{font-size:11px;color:var(--ink);font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}

/* マイプラン：「今年の心残り」サジェストカード
   ライトモードは淡ベージュ＋黒文字、ダークモードは暗ベージュ＋クリーム文字に
   切り替えてコントラスト比を確保する。 */
.regret-card{
  margin:8px 0 14px;padding:12px;border:2.5px solid var(--ink);border-radius:12px;
  background:#fff6e9;box-shadow:var(--hard);color:#1a1a1a;
}
.regret-card__head{font-size:13px;font-weight:800;margin-bottom:4px;color:inherit;}
.regret-card__sub{font-size:11px;color:#5a5a5a;font-weight:600;line-height:1.5;margin-bottom:8px;}
.regret-card__btn{width:100%;}
body.night .regret-card{background:#3a2f24;color:#f1ede3;}
body.night .regret-card__sub{color:#c8b9a3;}

/* ホーム：タイムテーブル誘導カード（ボトムタブ撤去の代替導線） */
.timetable-jump{
  display:flex;align-items:center;gap:12px;width:100%;
  border:2.5px solid var(--ink);border-radius:14px;
  background:var(--card);color:var(--ink);
  padding:14px 16px;box-shadow:var(--hard);transition:.1s;
  margin-bottom:22px;text-align:left;
}
.timetable-jump:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.timetable-jump__ico{font-size:30px;flex-shrink:0;line-height:1;}
.timetable-jump__body{flex:1;min-width:0;}
.timetable-jump__title{display:block;font-size:14.5px;font-weight:800;line-height:1.3;}
.timetable-jump__desc{display:block;font-size:11.5px;color:var(--sub);font-weight:600;margin-top:3px;letter-spacing:.02em;}
.timetable-jump__arr{font-size:22px;font-weight:800;flex-shrink:0;color:var(--red);}

/* ホーム：マイページ機能の紹介セクション
   クイックメニュー直後に配置し、初見ユーザーにも「マイページで何ができるか」を伝える。
   2x2グリッド × 朱赤／群青の交互カラーで、シェア画像と同じトーンを統一。 */
.myplan-intro{
  margin:18px 0 22px;padding:16px 14px 14px;
  border:2.5px solid var(--ink);border-radius:14px;background:var(--card);
  box-shadow:var(--hard);
}
.myplan-intro__kicker{
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--state-wish);
  margin-bottom:4px;
}
.myplan-intro__head{
  font-size:16px;font-weight:800;line-height:1.4;color:var(--ink);
  margin-bottom:14px;
}
.myplan-intro__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px;
}
.myplan-intro__cell{
  border:2px solid var(--ink);border-radius:10px;padding:11px 10px;
  background:#fff;position:relative;color:#1a1a1a;
}
.myplan-intro__cell--indigo .myplan-intro__num{color:var(--state-next);}
.myplan-intro__num{
  font-family:"SF Mono","Menlo",monospace;font-size:11px;font-weight:700;
  color:var(--state-wish);letter-spacing:.05em;margin-bottom:4px;
}
.myplan-intro__lbl{
  font-size:13px;font-weight:800;line-height:1.35;margin-bottom:4px;
  color:#1a1a1a;
}
.myplan-intro__desc{
  font-size:10.5px;font-weight:600;line-height:1.5;color:#5a5a5a;
}
.myplan-intro__btn{
  width:100%;border:2.5px solid var(--ink);border-radius:10px;
  padding:13px;font-size:13.5px;font-weight:800;background:var(--ink);color:#fff;
  box-shadow:var(--hard);transition:.1s;
}
.myplan-intro__btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
/* ダークモード対応：白背景セルは少し暗めに */
body.night .myplan-intro__cell{background:#2c2f38;color:#f1ede3;}
body.night .myplan-intro__lbl{color:#f1ede3;}
body.night .myplan-intro__desc{color:#c8b9a3;}

/* マイプラン：オンボーディング（3軸とも0件のとき表示） */
.myplan-onboard{
  margin:6px 0 22px;padding:14px 14px 12px;
  border:2.5px solid var(--ink);border-radius:14px;background:var(--card);
  box-shadow:var(--hard);
}
.myplan-onboard__head{
  font-size:14px;font-weight:800;margin-bottom:10px;color:var(--ink);
}
.myplan-onboard__list{
  list-style:none;padding:0;margin:0 0 12px;
  display:flex;flex-direction:column;gap:10px;
}
.myplan-onboard__list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:12.5px;line-height:1.5;
}
.myplan-onboard__list li b{font-size:13px;font-weight:800;color:var(--ink);}
.myplan-onboard__list li p{margin:2px 0 0;color:var(--sub);font-size:11.5px;line-height:1.55;}
.myplan-onboard__n{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--state-wish);color:#fff;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  font-family:"SF Pro Display",system-ui,sans-serif;line-height:1;
}
.myplan-onboard__btn{
  width:100%;border:2.5px solid var(--ink);border-radius:10px;
  padding:12px;font-size:13.5px;font-weight:800;background:var(--ink);color:#fff;
  box-shadow:var(--hard);transition:.1s;
}
.myplan-onboard__btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}

/* 画像プレビュー（マイプランカード書き出し用モーダル） */
.image-preview__title{
  font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--sub);
  margin:2px 0 8px;text-transform:none;
}
.image-preview{
  border:2px solid var(--ink);border-radius:8px;overflow:hidden;
  background:#F2EBDC;box-shadow:var(--hard);margin-bottom:10px;
}
.image-preview__img{display:block;width:100%;height:auto;}
.image-preview__hint{
  font-size:11px;color:var(--sub);font-weight:600;line-height:1.55;
  margin:0 4px 10px;
}

/* プレビューモーダル：色テーマ選択チップ群 */
.image-preview__themehead{
  font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink);
  margin:6px 2px 6px;
}
.theme-chips{
  display:flex;gap:8px;margin:0 0 12px;overflow-x:auto;
  padding-bottom:4px;-webkit-overflow-scrolling:touch;
}
.theme-chip{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:4px 2px;border:none;background:transparent;cursor:pointer;
}
.theme-chip__sw{
  width:48px;height:48px;border-radius:50%;border:2px solid;
  display:flex;align-items:center;justify-content:center;
  box-shadow:1px 1px 0 var(--ink);transition:.1s;
}
.theme-chip__dot{
  width:14px;height:14px;border-radius:50%;
}
.theme-chip.is-active .theme-chip__sw{
  outline:2.5px solid var(--red);outline-offset:3px;
  transform:scale(1.04);
}
.theme-chip__lbl{
  font-size:10px;font-weight:800;color:var(--ink);white-space:nowrap;
}

/* マイプラン：設定セクション（エクスポート／インポート） */
.myplan-settings{
  margin-top:28px;padding:14px;border:2px dashed var(--ink);border-radius:10px;
  background:var(--card);
}
.myplan-settings__head{font-size:13px;font-weight:800;margin-bottom:4px;}
.myplan-settings__sub{font-size:11px;color:var(--sub);font-weight:600;line-height:1.55;margin-bottom:10px;}
.myplan-settings__btns{display:flex;gap:9px;}

/* ---------- ボトムタブ ---------- */
/* 共通フッター：非公式表記・制作者クレジット・規約リンクを集約。
   タブバーの上に常に表示するため、main の下／tabbar の上に固定的に置く。
   タブバーが固定（position:fixed）で本体ビューを覆う想定のため、
   フッター末尾と tabbar の間に十分な余白が必要。 */
.app-footer{
  padding:18px 16px 96px;
  background:#fafaf7;border-top:1px solid #e6e2d8;
  color:#5b5b53;font-size:11.5px;line-height:1.65;text-align:center;
}
body.night .app-footer{background:#16161a;border-top-color:#2a2a30;color:#9a9a93;}
.app-footer__notice{margin:0 0 8px;}
.app-footer__notice b{color:var(--red);}
.app-footer__credit{margin:0;color:#7a7a72;font-size:10.5px;}
.app-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.app-footer a:hover{color:var(--red);}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--card);display:flex;border-top:3px solid var(--ink);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1;min-height:56px;padding:8px 0 7px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;color:var(--sub);
  transition:.1s;position:relative;
}
.tabbar button .ico{font-size:21px;}
.tabbar button .lbl{font-size:10.5px;font-weight:800;}
.tabbar button.active{color:var(--red);}
.tabbar button.active::before{
  content:"";position:absolute;top:0;left:22%;right:22%;height:3px;
  background:var(--red);
}
/* 中央の「わたしの森道」タブ：
   赤丸／インジ点は廃止。ラベルの赤太字＋わずかに字間を詰めて、
   フラットなナビの中で「自分のページ」と分かる程度に控えめに強調する。
   ラベルが6文字（「わたしの森道」）と他より長いので font-size と
   letter-spacing で収まりを良くする。 */
.tabbar__center .lbl{
  color:var(--red);font-weight:900;
  font-size:10px;letter-spacing:-.04em;
}
.tabbar button .badge{
  position:absolute;top:3px;right:50%;margin-right:-22px;
  background:var(--red);color:#fff;font-size:8px;font-weight:800;
  border-radius:9px;padding:0 4px;border:1.5px solid var(--card);
}

/* ---------- トースト ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabh) + 22px);
  transform:translateX(-50%) translateY(16px);
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;
  padding:10px 18px;border-radius:22px;z-index:200;opacity:0;
  transition:.22s;pointer-events:none;border:2px solid #fff;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* リマインダーバナー */
.reminder{
  background:var(--red);color:#fff;border:2.5px solid var(--ink);
  border-radius:10px;padding:10px 12px;margin-bottom:12px;
  display:flex;align-items:center;gap:9px;box-shadow:var(--hard);
}
.reminder .ico{font-size:20px;}
.reminder b{font-size:12.5px;}
.reminder p{font-size:10.5px;opacity:.92;}

/* ---------- マップ：ショップ検索 ---------- */
.map-search{position:relative;}
.map-sug{margin-bottom:4px;}
.map-sug__item{
  background:var(--card);border:2px solid var(--ink);border-radius:9px;
  padding:9px 12px;margin-bottom:6px;display:flex;justify-content:space-between;
  align-items:center;gap:8px;font-size:12.5px;font-weight:700;box-shadow:var(--hard);
}
.map-sug__item:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.map-sug__item > span:first-child{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.map-sug__zone{font-size:10px;color:var(--sub);font-weight:700;flex-shrink:0;}
.map-sug__head{
  font-size:10.5px;color:var(--sub);font-weight:800;
  margin:2px 2px 6px;
}
.map-sug__empty{font-size:11px;color:var(--sub);padding:6px 4px 10px;}

/* マップ：選択中ショップ */
.map-selected{
  background:var(--red);color:#fff;border:2.5px solid var(--ink);
  border-radius:10px;box-shadow:var(--hard);padding:9px 11px;margin-bottom:10px;
  display:flex;align-items:center;gap:9px;
}
.map-selected .ico{font-size:21px;flex-shrink:0;}
.map-selected .t{flex:1;min-width:0;}
.map-selected .t b{font-size:13px;}
.map-selected .t p{font-size:10px;opacity:.93;}
.map-selected .x{
  width:28px;height:28px;background:#fff;color:var(--ink2);
  border:2px solid var(--ink);border-radius:50%;font-weight:800;flex-shrink:0;
}


/* タイムテーブル：拡大表示キャンバス（画像全体が見切れず収まる） */
.tt-canvas{height:auto;aspect-ratio:1 / 1;background:#cfe3ef;}


/* ===== 初回お礼ポップアップ（モーダル内に埋め込み） ===== */
.thanks-popup{font-family:inherit;}
.thanks-popup__title{
  font-size:17px;font-weight:800;line-height:1.5;
  margin:0 0 14px;color:var(--ink);letter-spacing:.01em;
}
.thanks-popup__body{
  max-height:50vh;overflow-y:auto;
  padding-right:4px;margin-bottom:18px;
  font-size:14px;line-height:1.85;color:var(--ink);
}
.thanks-popup__body p{margin:0 0 12px;}
.thanks-popup__body p:last-child{margin-bottom:0;}
.thanks-popup__list{
  list-style:none;padding:0;margin:0 0 14px;
  display:flex;flex-direction:column;gap:8px;
}
.thanks-popup__list li{
  font-size:13px;line-height:1.55;padding:9px 11px;
  border:2px solid var(--ink);border-radius:9px;background:var(--card);
}
.thanks-popup__list li b{font-weight:800;}
.thanks-popup__actions{
  display:flex;flex-direction:column;gap:10px;
}
.thanks-popup__btn{
  display:block;width:100%;
  font-family:inherit;font-size:14px;font-weight:800;
  text-align:center;text-decoration:none;
  padding:13px 14px;border-radius:999px;
  cursor:pointer;border:2px solid transparent;
  transition:opacity .15s,background .15s;
  line-height:1.3;letter-spacing:.04em;
}
.thanks-popup__btn--primary{
  background:var(--red);color:#fff;
  box-shadow:var(--hard);
}
.thanks-popup__btn--ghost{
  background:#fff;color:var(--red);
  border-color:var(--red);
}
.thanks-popup__btn--close{
  background:transparent;color:var(--ink);
  border-color:var(--line);
}
.thanks-popup__btn:active{opacity:.85;}
body.night .thanks-popup__btn--ghost{background:transparent;}
body.night .thanks-popup__btn--close{
  color:var(--ink);border-color:rgba(255,255,255,.2);
}