/* ===== 首都圏あそびマップ — 共有デザイントークン & 部品 ===== */
:root{
  --ground:#f6f5f1; --panel:#fff; --rule:#e2ddd3; --rule-soft:#efebe3;
  --ink:#211c16; --ink-mid:#564e44; --ink-soft:#6c6256; --accent:#a83c22; --accent-soft:#f6e4de;
  --urgent:#a8321e; --urgent-bg:#f8e2dc; --soon:#785000; --soon-bg:#f6ecd6; --calm:#5f574c; --calm-bg:#eee9e0;
  --g-exhibition:#2E5AAC; --g-izakaya:#aa3826; --g-gourmet:#985000; --g-escape:#5741c2; --g-taiken:#087a59; --g-event:#855800;
  --g-hanabi:#ad1f5c; --g-facility:#087888; --g-animal:#914b16; --g-sightseeing:#496580;
  --g-sports:#2E7D32; --g-matsuri:#A12B35; --g-music:#813087; --g-market:#666515;
  --gold:#755300; --gold-bg:#f6ecd2;
}

/* Privacy choices: optional analytics is off until the visitor opts in. */
.privacy-choices{position:fixed;inset:0;z-index:12000;display:none;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.48);padding:16px}
.privacy-choices.on{display:flex}
.privacy-choices-card{width:min(680px,100%);background:var(--paper,#fff);color:var(--ink,#172033);border:1px solid var(--rule,#d9dde5);border-radius:16px;padding:18px;box-shadow:0 16px 48px rgba(0,0,0,.28)}
.privacy-choices-card h2{font-size:18px;margin:0 0 8px}
.privacy-choices-card p{font-size:13px;line-height:1.65;margin:7px 0}
.privacy-choices-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.privacy-choices-actions .btn{min-height:44px;min-width:150px}
.privacy-choice-link{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.privacy-fab{position:fixed;left:8px;bottom:8px;z-index:1100;min-width:44px;min-height:44px;padding:8px 11px;border:1px solid var(--rule,#d9dde5);border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink-soft,#4b5563);font:600 11px/1 system-ui;box-shadow:0 2px 8px rgba(0,0,0,.16);cursor:pointer}
body.pwa-standalone .privacy-fab{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
@media(max-width:480px){.privacy-choices-actions{display:grid;grid-template-columns:1fr 1fr}.privacy-choices-actions .btn{min-width:0}}
@media (prefers-color-scheme: dark){
  :root{ --ground:#14120e; --panel:#1e1a15; --rule:#342c22; --rule-soft:#282219;
    --ink:#f0eade; --ink-mid:#c2b7a5; --ink-soft:#aaa091; --accent:#ec7a57; --accent-soft:#38231b;
    --urgent:#f0805f; --urgent-bg:#38231c; --soon:#e0b04e; --soon-bg:#322813; --calm:#a99d8b; --calm-bg:#282219;
    --g-exhibition:#4169a8; --g-izakaya:#a83b29; --g-gourmet:#a75a10; --g-escape:#5844b7; --g-taiken:#0c7959; --g-event:#805800;
    --g-hanabi:#a62b61; --g-facility:#0b7482; --g-animal:#a85e26; --g-sightseeing:#58728b;
    --g-sports:#347738; --g-matsuri:#96313b; --g-music:#79327e; --g-market:#626315;
    --gold:#e0b94e; --gold-bg:#322a12; }
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
body{ background:var(--ground); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif; }

/* 駅名・路線は残し、色付きのスポットマーカーと競合しない明るい白黒背景にする。 */
.station-basemap .leaflet-tile{
  filter:grayscale(1) saturate(0) brightness(1.08) contrast(.78);
  /* Leafletが読込完了時に付ける inline opacity:1 より常に優先する。 */
  opacity:.82!important;
}

/* ---- サイト共通ヘッダー ---- */
.site-nav{ display:flex; align-items:center; gap:14px; padding:8px 14px; background:var(--panel);
  border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.site-nav .brand{ font-weight:800; font-size:14px; color:var(--ink); text-decoration:none; letter-spacing:.02em; }
.site-nav .brand{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
.site-nav .brand small{ font-weight:500; color:var(--ink-soft); font-size:11px; margin-left:6px; }
.site-nav a.navlink{ font-size:12.5px; color:var(--ink-mid); text-decoration:none; }
.site-nav a.navlink{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.site-nav a.navlink:hover{ color:var(--accent); }
.site-nav .spacer{ margin-left:auto; }
.app-bottom-nav{ display:none; }
.btn{ font:inherit; font-size:12.5px; min-height:44px; padding:7px 14px; border-radius:999px; border:1px solid var(--rule);
  background:transparent; color:var(--ink-mid); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn.primary{ background:var(--accent); color:#fff; border-color:transparent; font-weight:600; }
.btn.primary:hover{ opacity:.92; color:#fff; }
.chip{ font:inherit; font-size:12.5px; min-height:44px; padding:7px 12px; border-radius:999px;
  border:1.5px solid var(--rule); background:transparent; color:var(--ink-mid); cursor:pointer; font-weight:600; }
.lim{ font:inherit; font-size:12.5px; min-height:44px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--rule); background:transparent; color:var(--ink-mid); cursor:pointer; }
.lim[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); font-weight:600; background:var(--accent-soft); }

/* ---- コンパクトな共有ボタン & トースト ---- */
.share-btn-group{ display:inline-flex; gap:4px; align-items:center; flex-wrap:nowrap; }
.share-btn-group .share-action{ width:44px; height:44px; min-height:44px; padding:0; border-radius:12px;
  justify-content:center; gap:0; border-color:var(--rule); background:var(--ground); color:var(--ink-mid);
  box-shadow:none; }
.share-btn-group .share-action:hover{ transform:translateY(-1px); box-shadow:var(--pop-shadow);
  border-color:var(--accent); color:var(--accent); }
.share-action-icon{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.share-btn-group .share-line{ background:#06c755; border-color:#06c755; color:#fff; }
.share-btn-group .share-line:hover{ background:#05b64e; border-color:#05b64e; color:#fff; }
.share-line-icon{ width:25px; height:20px; }
.share-line-icon path{ fill:currentColor; }
.share-line-icon text{ fill:#06c755; font-family:Arial,sans-serif; font-size:7px; font-weight:900;
  letter-spacing:-.2px; }
.share-toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%,10px); z-index:2000;
  background:var(--ink); color:var(--ground); font-size:12.5px; font-weight:600; padding:10px 18px;
  border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.28); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; }
.share-toast.on{ opacity:1; transform:translate(-50%,0); }
.count.results-updated{ animation:resultsCountPulse .6s ease; border-radius:999px; }
#filterToggle.results-updated{ color:#fff; border-color:#176b42; background:#176b42; }
@keyframes resultsCountPulse{
  35%{ color:#176b42; background:#e3f5ea; box-shadow:0 0 0 5px #e3f5ea; }
}
@media (prefers-reduced-motion:reduce){
  .count.results-updated{ transition:none; animation:none; }
}

/* ---- 汎用ページ本文 ---- */
.wrap{ max-width:960px; margin:0 auto; padding:22px 18px 60px; }
.wrap.narrow{ width:100%; max-width:680px; min-width:0; }
h1.pagettl{ font-size:22px; margin:6px 0 4px; }
.lead{ color:var(--ink-mid); font-size:13.5px; line-height:1.7; }
.ranking-filterbar{ margin:12px 0 16px; padding:9px; width:min(100%,820px);
  border:1px solid var(--rule); border-radius:12px; background:var(--panel); }
.ranking-filter-grid{ display:grid;
  grid-template-columns:minmax(180px,1.5fr) minmax(120px,1fr) minmax(125px,1fr) minmax(95px,.7fr) minmax(125px,1fr);
  gap:8px; align-items:end; }
.ranking-filter-control{ position:relative; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:3px; }
.ranking-filter-control::after{ content:""; position:absolute; right:12px; bottom:18px; width:7px; height:7px;
  border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg); pointer-events:none; }
.ranking-filter-control > span,.ranking-filter-result > span{ color:var(--ink-soft); font-size:10.5px; font-weight:700; }
.ranking-filter-control select{ min-width:0; width:100%; min-height:44px; padding:7px 30px 7px 10px;
  border:1px solid var(--rule); border-radius:9px; background:var(--ground); color:var(--ink);
  appearance:none; -webkit-appearance:none; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.ranking-filter-control select:disabled{ cursor:wait; opacity:.68; }
.ranking-filter-control select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ranking-filter-result{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.ranking-filter-result strong{ min-height:44px; padding:7px 8px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:9px; background:var(--accent-soft); color:var(--accent);
  font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ranking-location-status{ margin:8px 2px 0; padding:8px 10px; border-radius:9px;
  color:var(--ink-mid); background:var(--ground); font-size:11.5px; line-height:1.55;
  scroll-margin-bottom:calc(72px + env(safe-area-inset-bottom)); }
.ranking-location-status[role="alert"]{ color:var(--urgent); background:var(--urgent-bg); }
.spot-facts{ width:100%; table-layout:fixed; }
.spot-facts td:first-child{ width:68px; }
.spot-facts td:last-child{ overflow-wrap:anywhere; }

@media (max-width:760px){
  .ranking-filterbar{ width:100%; }
  .ranking-filter-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .ranking-filter-category{ grid-column:1/-1; }
}
@media (max-width:520px){
  .site-nav{ flex-wrap:nowrap; gap:6px; padding:6px 8px; }
  .site-nav #navShareArea{ display:none; }
  .site-nav .spacer{ flex:1 1 auto; min-width:0; margin-left:0; }
  .site-nav .brand{ font-size:14px; }
  .site-nav a.navlink{ font-size:11.5px; white-space:nowrap; }
  .site-nav #authArea .btn{ padding-inline:11px; font-size:11.5px; }
  .site-nav #authArea .auth-email{ display:none; }
  .wrap{ padding-inline:14px; }
  .ranking-filterbar{ padding:7px; }
  .ranking-filter-control select{ font-size:16px; }
  .ranking-filter-result strong{ font-size:10.5px; }
}

/* インストールしたPWAはブラウザのURL・お気に入りバーがないため、狭い画面だけ
   アプリ内の主要導線を下部へ補う。通常ブラウザのコンパクトな上部は変えない。 */
body.pwa-standalone{
  padding-top:env(safe-area-inset-top); padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom); padding-left:env(safe-area-inset-left);
}
body.pwa-standalone .modal-bg{
  padding-top:max(16px,env(safe-area-inset-top));
  padding-right:max(16px,env(safe-area-inset-right));
  padding-bottom:max(16px,env(safe-area-inset-bottom));
  padding-left:max(16px,env(safe-area-inset-left));
}
@media (max-width:820px){
  body.pwa-standalone{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
  body.pwa-standalone .site-nav .navlink{ display:none; }
  body.pwa-standalone .app-bottom-nav{
    position:fixed; left:env(safe-area-inset-left); right:env(safe-area-inset-right); bottom:0; z-index:1300;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px;
    min-height:58px; padding:3px 6px calc(3px + env(safe-area-inset-bottom));
    border-top:1px solid var(--rule); background:var(--panel);
    background:color-mix(in srgb,var(--panel) 96%,transparent);
    box-shadow:0 -5px 18px rgba(30,20,10,.12); backdrop-filter:blur(12px);
  }
  body.pwa-standalone .app-bottom-nav a{
    min-width:0; min-height:48px; padding:4px 2px; border-radius:10px;
    color:var(--ink-soft); text-decoration:none; font-size:10.5px; font-weight:700;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    white-space:nowrap;
  }
  body.pwa-standalone .app-bottom-nav a > span:first-child{ font-size:19px; line-height:1.1; }
  body.pwa-standalone .app-bottom-nav a.active{ color:var(--accent); background:var(--accent-soft); }
  body.pwa-standalone .app-bottom-nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
  body.pwa-standalone #filterPanel:not(.hidden){
    left:env(safe-area-inset-left); right:env(safe-area-inset-right);
  }
  body.pwa-standalone .mobile-results-action{
    left:calc(14px + env(safe-area-inset-left)); right:calc(14px + env(safe-area-inset-right));
  }
  body.pwa-standalone #mapFab{
    right:calc(14px + env(safe-area-inset-right)); bottom:calc(72px + env(safe-area-inset-bottom));
  }
  body.pwa-standalone .share-toast,
  body.pwa-standalone .auth-toast{ bottom:calc(72px + env(safe-area-inset-bottom)); }
  body.pwa-standalone .share-toast,
  body.pwa-standalone .auth-toast{
    max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 28px);
  }
  body.pwa-standalone:has(#filterPanel:not(.hidden)) .app-bottom-nav{ display:none; }
}

/* ---- バッジ・ジャンル ---- */
.gbadge{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px; color:#fff; }
.bdg{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; white-space:nowrap;
  background:var(--calm-bg); color:var(--calm); font-variant-numeric:tabular-nums; }
.bdg[data-l="urgent"]{ background:var(--urgent-bg); color:var(--urgent); }
.bdg[data-l="soon"]{ background:var(--soon-bg); color:var(--soon); }
.bdg[data-l="open"]{ background:transparent; color:var(--ink-soft); font-weight:400; }
.pr-badge{ background:var(--gold-bg); color:var(--gold); font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:5px; letter-spacing:.04em; }

/* ---- お気に入りスター ---- */
.fav{ border:none; background:transparent; cursor:pointer; font-size:20px; line-height:1; padding:2px; color:var(--ink-soft);
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.fav[aria-pressed="true"]{ color:var(--gold); }
.fav:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.save-actions{ display:inline-flex; align-items:center; gap:2px; flex:none; }
.visit-toggle{ appearance:none; width:44px; min-width:44px; height:44px; min-height:44px; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--ink-soft); font:inherit; font-size:18px;
  line-height:1; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.visit-toggle:hover{ background:var(--accent-soft); }
.visit-toggle[aria-pressed="true"]{ border-color:#39745a; background:#e5f3eb; color:#245b43; }
.visit-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.archive-toggle{ appearance:none; width:44px; min-width:44px; height:44px; min-height:44px; padding:0;
  border:0; border-radius:50%; background:transparent; color:var(--ink-soft); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.archive-toggle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.archive-toggle:hover{ background:#f0f1f3; }
.archive-toggle[aria-pressed="true"]{ background:#e9eaed; color:#374151; }
.archive-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- カード（ランキング・詳細関連）---- */
.card{ background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:14px 16px; }
.card + .card{ margin-top:10px; }
.spot-card{ display:flex; flex-direction:column; gap:8px; min-width:0; max-width:100%; }
.spot-card-head{ display:flex; gap:8px; align-items:flex-start; }
.spot-card-tools{ display:flex; align-items:center; flex:none; margin:-6px -6px 0 0; }
.spot-card-link{ display:flex; gap:12px; align-items:flex-start; flex:1; min-width:0; text-decoration:none; color:inherit; }
.spot-card-rank{ font-weight:800; font-size:20px; color:var(--ink-soft); min-width:28px; text-align:center; font-variant-numeric:tabular-nums; }
.spot-card-copy{ flex:1; min-width:0; }
.spot-card-badges{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.spot-card-stat{ font-size:11px; color:var(--ink-soft); margin-left:auto; }
.spot-card-name{ display:block; font-weight:700; font-size:14px; margin:5px 0 2px; }
.spot-card-meta{ display:block; font-size:12px; color:var(--ink-soft); overflow-wrap:anywhere; }
.card-actions{ width:100%; display:grid; grid-template-columns:none; grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr); gap:6px; margin-top:5px; }
.card-actions a{ min-width:0; min-height:44px; padding:6px 8px; display:inline-flex; align-items:center; justify-content:center;
  text-align:center; border:1px solid var(--rule); border-radius:9px; background:var(--ground); color:var(--accent);
  font-size:11.5px; font-weight:700; line-height:1.25; text-decoration:none; white-space:nowrap; }
.card-actions a:hover{ background:var(--accent-soft); text-decoration:none; }

/* ---- マイリスト検索・おすすめ ---- */
.mylist-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0; }
.mylist-tabs .lim{ min-width:0; padding-inline:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mylist-search{ margin:0 0 10px; padding:12px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); }
.mylist-search[hidden],.mylist-recommendations[hidden]{ display:none; }
.mylist-search label{ display:block; margin:0 0 6px; color:var(--ink-mid); font-size:12.5px; font-weight:700; }
.mylist-search-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.mylist-search-row .inp{ min-width:0; }
.mylist-query-status{ min-height:18px; margin:5px 2px 0; color:var(--ink-soft); font-size:11.5px; line-height:1.55; }
.mylist-empty p{ margin:0 0 10px; line-height:1.65; }
.mylist-recommendations{ margin-top:30px; padding-top:22px; border-top:1px solid var(--rule); }
.mylist-recommendations > h2{ margin:0 0 5px; font-size:18px; }
.mylist-recommendations > p{ max-width:720px; margin:0 0 14px; color:var(--ink-soft); font-size:12px; line-height:1.7; }
.recommendation-item{ min-width:0; max-width:100%; }
.recommendation-item + .recommendation-item{ margin-top:12px; }
.recommendation-reason{ display:inline-flex; align-items:center; min-height:30px; margin:0 0 5px 5px; padding:4px 9px;
  max-width:calc(100% - 10px); border-radius:999px; background:var(--accent-soft); color:var(--accent);
  font-size:11.5px; font-weight:700; line-height:1.45; white-space:normal; overflow-wrap:anywhere; }
@media (max-width:820px){
  .card-actions{ gap:4px; }
  .card-actions a{ min-height:44px; padding:4px 2px; border-radius:7px; font-size:10.5px; white-space:nowrap; }
  .leaflet-control-zoom a{ width:44px!important; height:44px!important; line-height:44px!important; }
  .leaflet-popup-close-button{ width:44px!important; height:44px!important; font-size:24px!important; line-height:40px!important; }
}
@media (max-width:360px){
  .site-nav .brand::before{ content:none; }
  .mylist-tabs{ gap:4px; }
  .mylist-tabs .lim{ font-size:11px; padding-inline:3px; }
  .mylist-search{ padding:10px; }
  .mylist-search-row{ gap:5px; }
  .mylist-search-row .btn{ padding-inline:10px; }
}

/* ---- フォーム ---- */
label.field{ display:block; margin:12px 0 4px; font-size:12.5px; font-weight:600; color:var(--ink-mid); }
input.inp, select.inp, textarea.inp{ width:100%; font:inherit; font-size:13px; padding:8px 10px;
  min-height:44px; border:1px solid var(--rule); border-radius:8px; background:var(--panel); color:var(--ink); }
textarea.inp{ min-height:96px; resize:vertical; }
input.inp:focus-visible, textarea.inp:focus-visible, select.inp:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.hint{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; }

/* ---- モーダル（ログイン）---- */
.auth-reason{ margin:0 0 12px; padding:10px 12px; border-radius:10px; background:#f2f7ff; color:var(--ink-mid); font-size:13px; line-height:1.55 }
.auth-toast{ position:fixed; left:50%; bottom:20px; z-index:2500; max-width:min(92vw,460px); padding:11px 14px; border-radius:10px; background:#7f1d1d; color:#fff; box-shadow:0 8px 28px #0003; font-size:13px; line-height:1.5; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:.18s ease }
.auth-toast.on{ opacity:1; transform:translate(-50%,0) }
@media (prefers-color-scheme:dark){ .auth-reason{ background:#17243a; color:#e5efff } }
.modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:2000; padding:16px; }
.modal-bg.on{ display:flex; }
.modal{ background:var(--panel); border-radius:14px; padding:22px; max-width:360px; width:100%; max-height:calc(100vh - 32px);
  overflow:auto; border:1px solid var(--rule); }
.modal h2{ font-size:16px; margin:0 0 6px; }
.modal p{ font-size:12.5px; color:var(--ink-mid); margin:0 0 14px; line-height:1.6; }

/* ===== 🎉 Playful theme upgrade (2026-07) ===== */
:root{
  --brand-g1:#b64018; --brand-g2:#b91c62; --brand-g3:#5145cd;
  --pop-shadow:0 3px 14px rgba(30,20,10,.08); --pop-shadow-h:0 8px 22px rgba(255,79,154,.18);
  --joy-bg1:#fff4ef; --joy-bg2:#fdf0f6;
}
@media (prefers-color-scheme: dark){ :root{
  --pop-shadow:0 3px 14px rgba(0,0,0,.35); --pop-shadow-h:0 8px 22px rgba(255,79,154,.22);
  --joy-bg1:#1b1712; --joy-bg2:#1a1418; } }

body{ background:
  radial-gradient(1200px 380px at 12% -8%, var(--joy-bg1), transparent 60%),
  radial-gradient(1100px 360px at 92% -6%, var(--joy-bg2), transparent 62%),
  var(--ground); }

/* ブランド：グラデ文字＋絵文字 */
.site-nav{ position:relative; }
.site-nav::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg,var(--brand-g1),var(--brand-g2),var(--brand-g3)); opacity:.9; }
.site-nav .brand{ font-weight:900; font-size:15px; letter-spacing:.01em;
  background:linear-gradient(92deg,var(--brand-g1),var(--brand-g2) 55%,var(--brand-g3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.site-nav .brand::before{ content:"🗺️ "; -webkit-text-fill-color:initial; }
.site-nav .brand small{ -webkit-text-fill-color:initial; color:var(--ink-soft); }
.site-nav a.navlink{ font-weight:600; transition:transform .12s, color .12s; }
.site-nav a.navlink:hover{ transform:translateY(-1px); }

/* プライマリボタン：グラデ＋ふわっと */
.btn.primary{ background:linear-gradient(92deg,var(--brand-g1),var(--brand-g2)); box-shadow:0 2px 10px rgba(255,79,154,.25); }
.btn.primary:hover{ transform:translateY(-1px); box-shadow:var(--pop-shadow-h); }
.btn{ transition:transform .12s, box-shadow .12s, border-color .12s, color .12s; }
button:focus-visible, a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* カードに立体感とホバー */
.card{ box-shadow:var(--pop-shadow); border-radius:14px; transition:transform .14s, box-shadow .14s; }
a.card:hover{ transform:translateY(-3px); box-shadow:var(--pop-shadow-h); }

/* お気に入りスターが弾む */
.fav[aria-pressed="true"]{ animation:pop .3s ease; }
@keyframes pop{ 0%{transform:scale(1)} 45%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ===== 共通フッター ===== */
.site-footer{ border-top:1px solid var(--rule); background:var(--panel); margin-top:40px; }
.foot-inner{ max-width:960px; margin:0 auto; padding:24px 18px 34px; }
.foot-brand{ font-weight:800; font-size:14px; margin-bottom:10px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:12px; }
.foot-links a{ font-size:12.5px; color:var(--ink-mid); text-decoration:none; }
.foot-links a{ min-height:44px; display:inline-flex; align-items:center; }
.foot-links a:hover{ color:var(--accent); text-decoration:underline; }
.foot-note{ font-size:11.5px; color:var(--ink-soft); line-height:1.8; margin:0 0 10px; }
.foot-copy{ font-size:11px; color:var(--ink-soft); margin:0; }

/* 法務・説明系ページの読みやすさ */
.doc h2{ font-size:16px; margin:26px 0 8px; }
.doc h3{ font-size:14px; margin:18px 0 6px; }
.doc p, .doc li{ font-size:13.5px; line-height:1.9; color:var(--ink-mid); }
.doc ul{ padding-left:20px; }
.doc .updated{ font-size:12px; color:var(--ink-soft); }
.doc table{ width:100%; border-collapse:collapse; font-size:13px; margin:10px 0; }
.doc th, .doc td{ border:1px solid var(--rule); padding:8px 10px; text-align:left; vertical-align:top; }
.doc th{ background:var(--ground); font-weight:700; width:30%; }
.cal-menu [role="menuitem"]{ min-height:44px; }

/* 言語切替。旗だけだと「今どちらの言語か」「押すとどうなるか」が伝わらないため
   （2026-08-10 owner指摘）、広い画面では現在の言語と切替先を並べて出す。
   狭い画面はヘッダーの横幅が足りず、並べると320pxで溢れてタップ領域も44px未満に
   なったので、切替先の言語名だけを44px角で出す。旗より言葉の方が意味が伝わる。 */
.site-nav .lang-toggle{ display:inline-flex; align-items:center; border:1px solid var(--rule);
  border-radius:999px; overflow:hidden; min-height:44px; font-size:11.5px; font-weight:700; flex:none; }
.site-nav .lang-toggle .lang-current{ padding:0 9px; align-self:stretch; display:flex; align-items:center;
  color:var(--ink-soft); background:var(--rule-soft,#f0efec); }
.site-nav .lang-toggle .lang-other{ padding:0 10px; min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); text-decoration:none; white-space:nowrap; }
.site-nav .lang-toggle .lang-other:hover{ text-decoration:underline; }
.site-nav .lang-toggle .lang-other:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
@media (max-width:820px){
  .site-nav .lang-toggle{ border:none; }
  .site-nav .lang-toggle .lang-current{ display:none; }
  .site-nav .lang-toggle .lang-other{ padding:0 4px; border:1px solid var(--rule); border-radius:999px; }
}

/* 言語切替を足したぶんヘッダーが詰まり、狭い画面でログインボタンが44px未満に
   なった（2026-08-10のタッチ領域テストで検出）。タップ領域は削らずに幅を確保する。 */
.site-nav #authArea .btn{ min-width:44px; }