:root {
    color-scheme: dark; /* スクロールバー等のネイティブUIをテーマに合わせる */
    /* Base palette (user-specified) */
    --bg-base:        #0a1419;
    --bg-card:        #0d2a3a;
    --bg-card-2:      #112f40;
    --bg-soft:        #122833;
    --bg-deepest:     #06101a;

    --teal:           #1d6175;
    --teal-light:     #2a8a9e;
    --teal-glow:      rgba(42, 138, 158, 0.18);

    --coral:          #e8725f;
    --coral-soft:     #f4a08e;
    --lavender:       #a89ac8;
    --gold:           #d4b87f;

    --cream:          #f5f5f0;
    --muted:          #9aa8b0;
    --muted-2:        #6b7980;
    --divider:        rgba(245, 245, 240, 0.06);
    --border:         rgba(29, 97, 117, 0.45);
    --border-strong:  rgba(29, 97, 117, 0.85);

    /* rgba() の色成分(テーマ追従用)。rgba(var(--gold-rgb), 0.14) の形で使う */
    --gold-rgb:       212, 184, 127;
    --coral-rgb:      232, 114, 95;
    --teal-light-rgb: 42, 138, 158;
    --cream-rgb:      245, 245, 240;
    --fade-rgb:       10, 20, 25;      /* ページ色へのフェード(グラデ) */
    --page-gutter:    #04090c;         /* PC表示の外周 */
    --card-rgb:       13, 42, 58;      /* ホバー面・カード系の色成分 */
    --gyoshuin:       #8fd7ef;         /* 魚朱印アクセント */
    --gyoshuin-rgb:   143, 215, 239;
  }

  /* ライトモード「昼の浅瀬」(mockups/lightmode-preview-v2.html 準拠・WCAG AA検証済) */
  html[data-theme="light"] {
    color-scheme: light;
    --bg-base:        #f6f8f5;
    --bg-card:        #ffffff;
    --bg-card-2:      #ecf3f1;
    --bg-soft:        #e9eeed;
    --bg-deepest:     #dfe6e4;

    --teal:           #1d6175;
    --teal-light:     #3a8a9e;
    --teal-glow:      rgba(29, 97, 117, 0.12);

    --coral:          #b74d40;
    --coral-soft:     #c8584a;
    --lavender:       #6f5fa0;
    --gold:           #927039;

    --cream:          #16272b;
    --muted:          #576269;
    --muted-2:        #6f7f85;
    --divider:        rgba(22, 39, 43, 0.08);
    --border:         rgba(29, 97, 117, 0.32);
    --border-strong:  rgba(29, 97, 117, 0.55);

    --gold-rgb:       146, 112, 57;
    --coral-rgb:      183, 77, 64;
    --teal-light-rgb: 29, 97, 117;
    --cream-rgb:      22, 39, 43;
    --fade-rgb:       246, 248, 245;
    --page-gutter:    #dfe6e4;
    --card-rgb:       210, 222, 219;
    --gyoshuin:       #2e7d99;
    --gyoshuin-rgb:   46, 125, 153;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
    background: var(--bg-base);
    color: var(--cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;
    overflow-x: hidden;
    font-feature-settings: "palt";
  }

  /* Subtle washi-like texture overlay */
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
  }

  /* Subtle radial glow accent */
  body::after {
    content: "";
    position: fixed;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, var(--teal-glow) 0%, transparent 65%);
    opacity: 0.6;
  }

  .mincho { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; font-weight: 500; }
  .mincho-bold { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; font-weight: 700; }
  .label-mono {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
  }
  .label-mono.warm { color: var(--coral-soft); }
  .label-mono.cool { color: var(--lavender); }

  /* Material Symbols defaults */
  .ms {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
  }
  .ms.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  .ms.sm { font-size: 16px; }
  .ms.md { font-size: 20px; }

  /* App container — phone-shaped on desktop */
  .app {
    position: relative;
    margin: 0 auto;
    max-width: 460px;
    min-height: 100dvh;
    background: var(--bg-base);
    padding-bottom: 96px;
  }
  @media (min-width: 768px) {
    body { background: var(--page-gutter); padding: 24px 0; }
    .app {
      box-shadow: 0 24px 80px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.03);
      border-radius: 12px;
      overflow: hidden;
    }
  }

  /* Top bar */
  .topbar {
    position: sticky; top: 0;
    z-index: 50;
    height: 64px;
    padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, var(--bg-base) 70%, rgba(var(--fade-rgb),0.9));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .topbar h1 {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.04em;
    color: var(--cream);
  }
  .topbar .icon-btn {
    background: transparent;
    color: var(--cream);
    border: none; padding: 8px;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s;
  }
  .topbar .icon-btn:hover { opacity: 1; }
  .topbar .avatar {
    width: 30px; height: 30px;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    color: var(--muted);
    font-size: 13px;
  }

  /* Bottom tab bar */
  .tabbar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    height: 76px;
    background: var(--bg-deepest);
    border-top: 1px solid var(--divider);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .tabbar-inner {
    max-width: 460px;
    margin: 0 auto;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 4px;
  }
  .tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s;
    padding: 8px 0;
  }
  .tab:hover { color: var(--cream); }
  .tab .ms { font-size: 22px; }
  .tab span { font-size: 10px; letter-spacing: 0.06em; }
  .tab.active { color: var(--cream); }
  .tab.active .ms { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  .tab.active::after {
    content: "";
    position: absolute;
    bottom: 8px;
    width: 28px; height: 2px;
    background: var(--coral);
    border-radius: 999px;
  }

  /* Screens */
  .screen { display: none; }
  .screen.active { display: block; animation: fade 0.4s ease; }
  @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  .pad { padding-left: 20px; padding-right: 20px; }

  /* ---------- HOME ---------- */
  .home-meta {
    display: flex; align-items: center; gap: 10px;
    margin-top: 24px;
  }
  .home-meta .dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--teal-light);
  }
  .home-meta .label-mono { color: var(--muted); }

  .home-hero {
    position: relative;
    margin-top: 16px;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1/1;
    border: 1px solid var(--border);
    background: var(--bg-card);
  }
  .home-hero img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
  }
  .home-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(var(--fade-rgb),0.85));
  }

  .home-memo {
    margin: 22px 0 18px;
    font-family: 'Shippori Mincho', serif;
    font-size: 20px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    color: var(--cream);
  }

  .chips {
    display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  }
  .chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: var(--bg-card);
    color: var(--cream);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
  }
  .chip:hover { background: var(--bg-card-2); border-color: var(--coral); }
  .chip .ms { font-size: 14px; color: var(--coral-soft); }
  .chip.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    padding-left: 4px;
  }
  .chip.ghost:hover { color: var(--cream); }

  .section-divider {
    margin: 56px 20px 40px;
    width: 48px; height: 1px;
    background: var(--border-strong);
  }

  .section-head {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 20px;
  }
  .section-head h2 {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.08em;
    color: var(--cream);
  }
  .section-head .sub { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }

  /* Horizontal scroll */
  .h-scroll {
    display: flex; gap: 14px;
    overflow-x: auto;
    padding: 4px 20px 20px;
    margin: 0 -20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .h-scroll::-webkit-scrollbar { display: none; }

  /* Next-visit cards on info */
  .nv-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.25s;
  }
  .nv-card:hover { border-color: var(--coral); transform: translateY(-2px); }
  .nv-card .thumb {
    width: 100%; aspect-ratio: 16/10;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--bg-soft);
  }
  .nv-card .thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); transition: filter 0.4s; }
  .nv-card:hover .thumb img { filter: brightness(1); }
  .nv-card .tags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
  .pill {
    display: inline-flex; padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: var(--muted);
  }
  .pill.teal { color: var(--teal-light); border-color: var(--teal-light); }
  .pill.coral { color: var(--coral-soft); border-color: rgba(var(--coral-rgb),0.6); }
  .pill.lav { color: var(--lavender); border-color: rgba(168,154,200,0.5); }
  .pill.gold { color: var(--gold); border-color: rgba(var(--gold-rgb),0.5); }
  .pill.gyoshuin {
    color: var(--gyoshuin);
    border-color: rgba(var(--gyoshuin-rgb),0.62);
    background: rgba(var(--teal-light-rgb),0.10);
  }
  .pill.gyoshuin.candidate {
    color: var(--muted);
    border-style: dashed;
    border-color: rgba(var(--gyoshuin-rgb),0.34);
    background: transparent;
  }

  .nv-card h3 {
    margin: 0 0 6px;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--cream);
  }
  .nv-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Event list */
  .events { border-top: 1px solid var(--divider); margin-top: 8px; }
  .event {
    display: flex; gap: 14px; align-items: center;
    padding: 18px 4px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    color: inherit;
  }
  .event:hover { background: rgba(var(--card-rgb),0.4); }
  .event .date { color: var(--teal-light); font-size: 11px; letter-spacing: 0.06em; min-width: 100px; }
  .event .body { flex: 1; }
  .event .body h4 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--cream); }
  .event .body p { margin: 0; font-size: 12px; color: var(--muted); }

  /* Legacy footer link */
  .home-footer-link {
    text-align: center;
    padding: 24px 0 8px;
  }
  .home-footer-link a {
    display: inline-flex; gap: 6px; align-items: center;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.08em;
    transition: color 0.2s;
  }
  .home-footer-link a:hover { color: var(--cream); }

  /* ---------- RECORDS ---------- */
  .records-head {
    text-align: center;
    padding: 24px 20px 8px;
  }
  .records-head h2 {
    margin: 0 0 4px;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--cream);
    letter-spacing: 0.06em;
  }
  .records-head p { margin: 0; font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }

  /* ---------- 図鑑タブ ---------- */
  .zukan-wrap { padding-top: 4px; }
  .zukan-intro { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 0 0 16px; }
  .zukan-intro b { color: var(--cream); font-weight: 600; }
  .zukan-label { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; font-weight: 600; margin: 4px 2px 10px; }
  .zukan-card { display: flex; align-items: center; gap: 14px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 15px; padding: 15px; margin-bottom: 12px;
    text-decoration: none; color: var(--cream); transition: transform 0.14s, border-color 0.14s; }
  .zukan-card:hover { border-color: var(--coral); transform: translateY(-2px); }
  .zukan-ic { width: 56px; height: 56px; border-radius: 15px; flex: none; display: flex;
    align-items: center; justify-content: center; }
  .zukan-ic .ms { font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
  .zukan-life .zukan-ic { background: linear-gradient(150deg, rgba(var(--gold-rgb),0.30), rgba(var(--gold-rgb),0.06) 72%);
    border: 1px solid rgba(var(--gold-rgb),0.48); box-shadow: inset 0 0 16px rgba(var(--gold-rgb),0.12); }
  .zukan-life .zukan-ic .ms { color: var(--gold); }
  .zukan-meib .zukan-ic { background: linear-gradient(150deg, rgba(var(--coral-rgb),0.28), rgba(var(--coral-rgb),0.06) 72%);
    border: 1px solid rgba(var(--coral-rgb),0.48); box-shadow: inset 0 0 16px rgba(var(--coral-rgb),0.12); }
  .zukan-meib .zukan-ic .ms { color: var(--coral); }
  .zukan-hozen .zukan-ic { background: linear-gradient(150deg, rgba(var(--teal-light-rgb),0.30), rgba(var(--teal-light-rgb),0.07) 72%);
    border: 1px solid rgba(var(--teal-light-rgb),0.52); box-shadow: inset 0 0 16px rgba(var(--teal-light-rgb),0.13); }
  .zukan-hozen .zukan-ic .ms { color: var(--teal-light); }
  .zukan-b { flex: 1; min-width: 0; }
  .zukan-t { display: block; font-family: 'Shippori Mincho', serif; font-size: 17px; letter-spacing: 0.03em; }
  .zukan-d { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.55; }
  .zukan-arw { color: var(--coral); font-size: 18px; flex: none; }
  .zukan-hook { display: block; background: linear-gradient(160deg, rgba(var(--gold-rgb),0.10), transparent 70%), var(--bg-card);
    border: 1px solid rgba(var(--gold-rgb),0.34); border-radius: 15px; padding: 15px; margin: 0 0 16px;
    text-decoration: none; color: var(--cream); }
  .zukan-hook:hover { border-color: var(--gold); }
  .zukan-hook-lbl { display: block; font-size: 10.5px; letter-spacing: 0.12em; color: var(--gold); font-weight: 700; }
  .zukan-hook-ttl { display: block; font-family: 'Shippori Mincho', serif; font-size: 17px; margin: 5px 0 2px; }
  .zukan-hook-sub { display: block; color: var(--muted); font-size: 12px; }
  .zukan-hook-go { display: inline-block; color: var(--coral); font-size: 12.5px; font-weight: 600; margin-top: 9px; }
  .zukan-note { position: relative; background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: 10px; padding: 11px 34px 11px 14px; margin: 0 0 16px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
  .zukan-note b { color: var(--cream); font-weight: 600; }
  .zukan-note-x { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; border: none;
    background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; }
  .zukan-note-x:hover { color: var(--cream); }
  /* デスクトップ: カード列を可読幅で左寄せ（他タブと同じ「左寄せ＋右に余白」の構図） */
  @media (min-width: 768px) {
    #screen-zukan .zukan-intro,
    #screen-zukan .zukan-label,
    #screen-zukan .zukan-note,
    #screen-zukan .zukan-hook,
    #screen-zukan .zukan-card { max-width: 620px; }
  }
  @media (min-width: 1024px) {
    /* .screen.active は margin-inline:auto で中身幅に縮む。図鑑は中身が細いので、
       メイン列いっぱいに伸ばして左寄せにする（記録タブの地図と同じ接地）。 */
    #screen-zukan.screen.active { margin-inline: 0; }
  }

  .subtab-bar {
    display: flex; justify-content: center; gap: 28px;
    border-bottom: 1px solid var(--divider);
    margin: 16px 20px 24px;
    padding-bottom: 8px;
  }
  .subtab {
    position: relative;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 0 6px;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
  }
  .subtab:hover { color: var(--cream); }
  .subtab.active { color: var(--cream); }
  .subtab.active::after {
    content: "";
    position: absolute;
    bottom: -9px; left: 50%;
    transform: translateX(-50%);
    width: 100%; height: 2px;
    background: var(--coral);
    border-radius: 999px;
  }

  .subview { display: none; }
  .subview.active { display: block; animation: fade 0.3s ease; }

  /* Visit cards (一覧) */
  .visit-list { display: flex; flex-direction: column; gap: 28px; padding: 0 20px; }
  /* 年の区切り。件数は添えない — 足跡の居場所を示す目印であって、集計表ではない(DESIGN §4) */
  .visit-year {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    color: var(--muted);
    letter-spacing: 0.14em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--divider);
    margin-top: 8px;
  }
  .visit-list > .visit-year:first-child { margin-top: 0; }
  .visit-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s;
  }
  .visit-card:hover { border-color: var(--coral); transform: translateY(-2px); }
  .visit-card-inner { padding: 20px; }
  .visit-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .visit-meta time { font-family: 'Shippori Mincho', serif; font-size: 16px; color: var(--teal-light); letter-spacing: 0.04em; }
  .visit-meta .sep { color: var(--border-strong); }
  .visit-meta h3 { margin: 0; font-family: 'Shippori Mincho', serif; font-weight: 600; font-size: 17px; color: var(--cream); }
  .visit-card .photo {
    width: 100%; aspect-ratio: 16/10;
    background: var(--bg-soft);
    overflow: hidden;
    margin-bottom: 16px;
    border-radius: 4px;
  }
  .visit-card .photo img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.92;
    transition: all 0.6s;
  }
  .visit-card:hover .photo img { opacity: 1; }
  /* 自分が撮った写真。読み込み前は枠だけが静かに置かれる(画像なしでも崩れない) */
  .visit-card .photo.own { margin-bottom: 0; }
  .visit-card .photo.own img { opacity: 1; }
  /* 写真から、その日の記録へ戻る導線。カード全体(館詳細)とは別の、明示された行 */
  .visit-own-link {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 44px;
    margin: 0 0 16px;
    padding: 10px 2px;
    background: none; border: none; border-bottom: 1px solid var(--divider);
    color: var(--teal-light);
    font-family: inherit; font-size: 12.5px; letter-spacing: 0.06em;
    text-align: left; cursor: pointer;
    transition: color 0.2s;
  }
  .visit-own-link .lbl { flex: 1; }
  .visit-own-link .ms { font-size: 15px; }
  .visit-own-link .go { font-size: 14px; opacity: 0.7; }
  .visit-own-link:hover { color: var(--cream); }
  .visit-own-link:hover .go { opacity: 1; }
  .visit-card .memo {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    line-height: 1.85;
    color: var(--cream);
    margin: 0 0 16px;
    letter-spacing: 0.02em;
  }
  .visit-card .visit-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
  .visit-card .visit-meta h3 {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--cream);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }
  .visit-card .visit-region {
    font-size: 11px; color: var(--muted);
    letter-spacing: 0.08em;
  }
  .visit-card .visit-count {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--muted);
    letter-spacing: 0.04em;
  }
  .visit-card .visit-tags { display: inline-flex; gap: 4px; }
  .visit-card .visit-tags .pill { font-size: 10px; padding: 2px 8px; }
  .visit-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
  }
  .visit-card-foot .tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .visit-card-foot .count {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px;
    color: var(--muted);
  }

  /* Photo grid */
  .photo-filters {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding: 0 20px 16px;
    scrollbar-width: none;
  }
  .photo-filters::-webkit-scrollbar { display: none; }
  .photo-filter {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .photo-filter:hover { color: var(--cream); }
  .photo-filter.active { color: var(--cream); border-color: var(--coral); background: rgba(var(--coral-rgb),0.08); }

  .photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 0 20px;
  }
  .photo-grid > div {
    aspect-ratio: 1;
    background: var(--bg-soft);
    overflow: hidden;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
  }
  .photo-grid img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: all 0.4s; }
  .photo-grid > div:hover img { opacity: 1; transform: scale(1.04); }
  .photo-grid > div.tall { aspect-ratio: 1/1.4; grid-row: span 2; }

  .photo-share-foot {
    margin: 32px 20px 8px;
    text-align: center;
  }
  .photo-share-foot button {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .photo-share-foot button:hover { color: var(--cream); border-color: var(--coral); }

  /* 年表(.year-block / .mini-visit-row)は 2026-07-27 に削除した。
     どこからも呼ばれない死にコードで、古い年ほど薄く表示する作りが
     DESIGN §3「十年と積み重なることで味わいが増す」と逆行していた。
     年の眺めは下の .visit-year（一覧に挟む静かな区切り）が担う。 */

  /* Map */
  .map-wrap {
    margin: 0 20px;
    aspect-ratio: 3/4;
    background: var(--bg-deepest);
    border: 1px solid var(--border);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    /* Leaflet内部のz-index(最大1000)を封じ込め、オーバーレイ(z-index:105)より下に保つ */
    z-index: 0;
  }
  #kag-map { position: absolute; inset: 0; }

  /* Leaflet dark-theme overrides */
  .leaflet-container {
    background: var(--bg-deepest);
    font: inherit;
    outline: none;
  }
  /* 夜の海トーン: グレーのタイルを青く着色し、陸をシルエットに。地名なしタイルとセット */
  .leaflet-tile {
    filter: brightness(1.85) sepia(0.65) hue-rotate(162deg) saturate(2.4) contrast(1.08);
  }
  /* ライトは素の Positron(2026-07-03 モック比較で案2を採用: 陸が生成りグレーで地図らしい)。
     夜用フィルターを打ち消すだけで色調整はしない */
  html[data-theme="light"] .leaflet-tile {
    filter: none;
  }
  .leaflet-bar a,
  .leaflet-control-zoom a {
    background: rgba(var(--fade-rgb),0.86);
    color: var(--cream);
    border-color: var(--border);
  }
  .leaflet-bar a:hover { background: rgba(var(--card-rgb),0.92); }
  .leaflet-control-attribution {
    background: rgba(var(--fade-rgb),0.72) !important;
    color: var(--muted) !important;
    font-size: 9.5px;
  }
  .leaflet-control-attribution a { color: var(--teal-light) !important; }
  .leaflet-popup-content-wrapper,
  .leaflet-popup-tip {
    background: var(--bg-card);
    color: var(--cream);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .leaflet-popup-content-wrapper { border-radius: 10px; }
  .leaflet-popup-content { margin: 12px 14px; font-size: 12px; line-height: 1.5; }
  .leaflet-popup-close-button { color: var(--muted) !important; }
  /* popup サムネ(Google Maps風カードプレビュー・2026-06-29) */
  .kag-pop-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    background: var(--bg-soft);
    position: relative;
  }
  .kag-pop-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; display: block; }
  .kag-pop-thumb.placeholder { display: flex; align-items: center; justify-content: center; }
  .kag-pop-thumb.placeholder .creature-wm {
    width: 56%; height: 56%;
    background-color: var(--muted); opacity: 0.22;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
  }
  .kag-pop .name {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    color: var(--cream);
    display: block;
    margin-bottom: 4px;
  }
  .kag-pop .meta { color: var(--muted); font-size: 11px; display: block; margin-bottom: 9px; }
  .kag-pop .acts { display: flex; gap: 8px; flex-wrap: wrap; }
  /* 自分の写真から、その日の記録へ。一覧の .visit-own-link と同じ文法(日付を添えるのは
     自分の写真のときだけ)。popup の高さを増やさないよう、行を足さず写真に重ねる。 */
  .kag-pop button.kag-pop-thumb.own {
    /* button は既定で内容幅になるので、サムネの寸法をここで取り戻す */
    display: block; width: 100%; aspect-ratio: 16/9;
    padding: 0; border: none; border-radius: 6px;
    background: var(--bg-soft);
    cursor: pointer; font-family: inherit;
  }
  .kag-pop .kag-pop-thumb.own .cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 4px;
    padding: 4px 7px 5px;
    background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
    color: var(--cream);
    font-size: 10.5px; letter-spacing: 0.04em;
    text-align: left;
  }
  .kag-pop .kag-pop-thumb.own .cap .ms { font-size: 12px; }
  .kag-pop .acts + .acts { margin-top: 6px; }
  .kag-pop button {
    font: inherit;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(var(--card-rgb),0.6);
    color: var(--cream);
    cursor: pointer;
  }
  .kag-pop button.primary { border-color: rgba(var(--gold-rgb),0.6); color: var(--gold); }
  .kag-pop button[data-action="popup-add-visit"] {
    border-color: rgba(var(--coral-rgb),0.6);
    color: var(--coral);
  }
  /* Leaflet pin markers (reuse dot colors) */
  .leaf-pin { width: 14px; height: 14px; display: grid; place-items: center; }
  .leaf-pin .pin-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--coral);
    border: 1px solid rgba(var(--fade-rgb),0.55);
    box-shadow: 0 0 0 3px rgba(var(--coral-rgb),0.30), 0 0 16px rgba(var(--coral-rgb),0.65);
  }
  .leaf-pin.want .pin-dot {
    width: 8px; height: 8px;
    background: rgba(var(--gold-rgb),0.18);
    border: 1.5px solid rgba(var(--gold-rgb),0.95);
    box-shadow: 0 0 10px rgba(var(--gold-rgb),0.35);
  }
  .leaf-pin.gyoshuin .pin-dot {
    background: var(--gyoshuin);
    border: 1px solid rgba(var(--cream-rgb),0.5);
    box-shadow: 0 0 0 3px rgba(var(--teal-light-rgb),0.26), 0 0 18px rgba(var(--gyoshuin-rgb),0.55);
  }
  .leaf-pin.normal .pin-dot {
    width: 7px; height: 7px;
    background: rgba(var(--cream-rgb),0.55);
    border: 1px solid rgba(var(--fade-rgb),0.5);
    box-shadow: 0 0 6px rgba(var(--cream-rgb),0.25);
  }
  /* ライト時の未訪問ピン: 墨色0.55だと泥はねに見える。紙に落ちた水滴=墨青で密度を主役に */
  html[data-theme="light"] .leaf-pin.normal .pin-dot {
    background: rgba(29,97,117,0.62);
    box-shadow: 0 0 6px rgba(29,97,117,0.30);
  }
  .leaflet-tooltip.kag-label {
    background: rgba(var(--fade-rgb),0.9);
    border: 1px solid rgba(var(--cream-rgb),0.22);
    color: var(--cream);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    white-space: nowrap;
  }
  .leaflet-tooltip.kag-label::before { display: none; }

  /* Map mode segment */
  .map-mode {
    display: inline-flex;
    margin: 0 20px 6px;
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-soft);
  }
  .map-mode-btn {
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
  }
  .map-mode-btn.active {
    background: rgba(var(--gold-rgb),0.14);
    color: var(--gold);
  }
  .map-mode-btn .badge {
    display: inline-block;
    margin-left: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gold-rgb),0.4);
    font-size: 10.5px;
    color: var(--gold);
    opacity: 0.85;
  }
  .map-mode-btn .badge:empty { display: none; }
  .theme-mode { margin: 0; }
  .map-mode-hint {
    margin: 0 20px 12px;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  .map-options {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: -4px 20px 16px;
  }
  .map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
  }
  .map-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .map-toggle .track {
    width: 32px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    position: relative;
    transition: all 0.2s;
  }
  .map-toggle .track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--muted);
    transition: all 0.2s;
  }
  .map-toggle input:checked + .track {
    border-color: rgba(var(--gold-rgb),0.72);
    background: rgba(var(--gold-rgb),0.08);
  }
  .map-toggle input:checked + .track::after {
    transform: translateX(14px);
    background: var(--gold);
  }
  .map-toggle:hover { color: var(--cream); }

  /* GPS ボタン: 既存トグル列に並べる("近くの館"・現在地から) */
  .map-gps-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px 4px 8px;
    color: var(--muted);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
  }
  .map-gps-btn .ms {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 14px;
    vertical-align: middle;
    margin-right: 4px;
  }
  .map-gps-btn:hover:not(:disabled) {
    color: var(--cream);
    border-color: rgba(var(--gold-rgb),0.55);
  }
  .map-gps-btn:disabled { opacity: 0.5; cursor: wait; }

  /* GPS popup: 現在地から近い館3つを表示 */
  .leaflet-popup.gps-popup .leaflet-popup-content-wrapper {
    background: rgba(8, 18, 24, 0.96);
    border: 1px solid rgba(45,212,191,0.35);
  }
  .gps-pop h4 {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--teal-200, #99d8d0);
    font-weight: 500;
  }
  .gps-nearby-row { border-top: 1px solid var(--divider); }
  .gps-nearby-row:first-of-type { border-top: none; }
  .gps-nearby-link {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 0;
    cursor: pointer;
    color: var(--cream);
  }
  .gps-nearby-link .name { display: block; font-size: 13px; }
  .gps-nearby-link .meta { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
  .gps-nearby-link:hover .name { color: var(--gold); }
  .gps-nearby-empty { color: var(--muted); font-size: 12px; padding: 4px 0; }

  .map-legend {
    margin: 16px 20px 0;
    display: flex; gap: 18px; flex-wrap: wrap;
    font-size: 11px;
    color: var(--muted);
  }
  .map-legend .item { display: inline-flex; align-items: center; gap: 6px; }
  .map-legend .swatch {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 2px rgba(var(--coral-rgb),0.20);
  }
  .map-legend .swatch.want { background: transparent; border: 1px solid rgba(var(--gold-rgb),0.78); box-shadow: none; }
  .map-legend .swatch.gyoshuin { background: var(--gyoshuin); box-shadow: 0 0 0 2px rgba(var(--teal-light-rgb),0.20); }
  .map-legend .swatch.unvisited { background: rgba(var(--cream-rgb),0.34); box-shadow: none; }


  /* FAB (post-visit add — subtle, bottom-right, NOT center) */
  [hidden] { display: none !important; }
  .fab {
    position: fixed;
    right: max(20px, calc(50vw - 230px + 16px));
    bottom: 96px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--cream);
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 55;
    transition: all 0.25s;
    opacity: 0.85;
  }
  .fab:hover { opacity: 1; border-color: var(--coral); }
  .fab .ms { font-weight: 200; font-size: 22px; }

  /* ---------- NEXT TAB ---------- */
  .next-hero {
    padding: 24px 20px 32px;
  }
  .next-hero h2 {
    margin: 0 0 8px;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 22px;
    color: var(--cream);
    letter-spacing: 0.06em;
  }
  .next-hero p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7; }

  .want-card {
    flex: 0 0 76vw;
    max-width: 320px;
    scroll-snap-align: start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s;
  }
  .want-card:hover { border-color: var(--gold); }
  .want-card .thumb {
    width: 100%; aspect-ratio: 4/3;
    background: var(--bg-soft);
    position: relative;
  }
  .want-card .thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.92); }
  .want-card .heart {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(var(--fade-rgb),0.6);
    border: none;
    color: var(--cream);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
  }
  .want-card .heart.on { color: var(--gold); }
  .want-card .heart.on .ms { font-variation-settings: 'FILL' 1; }
  .want-card .body { padding: 18px 18px 20px; }
  .want-card h4 { margin: 0 0 8px; font-family: 'Shippori Mincho', serif; font-weight: 600; font-size: 18px; color: var(--cream); }
  .want-card p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.7; }

  .event-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--divider);
  }
  .event-row .thumb {
    width: 56px; height: 56px;
    background: var(--bg-soft);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .event-row .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
  .event-row .body { flex: 1; }
  .event-row .body h4 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--cream); }
  .event-row .body p { margin: 0; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
  .event-row .toggle {
    width: 36px; height: 20px;
    border-radius: 999px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .event-row .toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--muted);
    transition: all 0.25s;
  }
  .event-row .toggle.on {
    background: rgba(var(--coral-rgb),0.15);
    border-color: var(--coral);
  }
  .event-row .toggle.on::after {
    transform: translateX(16px);
    background: var(--coral);
  }

  .yt-card {
    flex: 0 0 80vw;
    max-width: 320px;
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 10px;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
  }
  .yt-card .thumb {
    aspect-ratio: 16/9;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  .yt-card .thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.78); transition: filter 0.3s; }
  .yt-card:hover .thumb img { filter: brightness(0.95); }
  .yt-card .media-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: radial-gradient(ellipse at 30% 30%, rgba(29,97,117,0.36), rgba(var(--card-rgb),0.96) 82%);
    font-family: 'Shippori Mincho', serif;
    font-size: 28px;
    letter-spacing: 0.08em;
    color: var(--cream);
  }
  .yt-card .platform-badge {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(6,16,26,0.72);
    border: 1px solid rgba(var(--cream-rgb),0.12);
    color: var(--cream);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .yt-card .platform-badge .ms { font-size: 13px; }
  .yt-card .platform-badge.youtube { color: var(--coral-soft); }
  .yt-card .platform-badge.x { color: var(--cream); }
  .yt-card .platform-badge.instagram { color: var(--lavender); }
  .yt-card .play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    pointer-events: none;
  }
  .yt-card .play span {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(var(--fade-rgb),0.5);
    border: 1px solid var(--teal-light);
    backdrop-filter: blur(4px);
    display: grid; place-items: center;
    color: var(--cream);
  }
  .yt-card .play .ms { font-variation-settings: 'FILL' 1; }
  .yt-card .duration {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(var(--fade-rgb),0.85);
    padding: 2px 6px;
    font-size: 10px;
    color: var(--cream);
    border-radius: 3px;
  }
  .yt-card .title { font-size: 13px; line-height: 1.5; color: var(--cream); }
  .yt-card .author { font-size: 11px; color: var(--muted); }

  .sns-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sns-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider);
  }
  .sns-row:first-child { border-top: 1px solid var(--divider); }
  .sns-title {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    color: var(--cream);
    letter-spacing: 0.04em;
    line-height: 1.5;
  }
  .sns-meta {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }
  .sns-actions {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .sns-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    transition: all 0.2s;
  }
  .sns-chip:hover {
    border-color: var(--coral);
    color: var(--cream);
  }
  .sns-chip .ms { font-size: 14px; }
  .sns-chip.instagram .ms { color: var(--lavender); }
  .sns-chip.x .ms { color: var(--cream); opacity: 0.72; }

  /* ---------- KAG TAB ---------- */
  .kag-hero {
    text-align: center;
    padding: 64px 20px 56px;
    position: relative;
  }
  .kag-hero h2 {
    margin: 0;
    position: relative; z-index: 1;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.5;
    color: var(--cream);
    letter-spacing: 0.04em;
  }
  .kag-hero h2 em { font-style: normal; color: var(--gold); }
  .kag-hero p {
    margin: 16px 0 0;
    position: relative; z-index: 1;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .search-hero {
    position: relative;
    padding: 34px 20px 22px;
    overflow: hidden;
  }
  .search-hero h2 {
    position: relative;
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.52;
    letter-spacing: 0.05em;
    color: var(--cream);
  }
  .search-hero h2 em {
    font-style: normal;
    color: var(--gold);
  }
  .search-hero p {
    position: relative;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.85;
    letter-spacing: 0.04em;
  }

  .kag-section {
    padding: 40px 20px;
    border-top: 1px solid var(--divider);
  }
  .kag-section h3 {
    margin: 0 0 20px;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    color: var(--cream);
  }
  .kag-section h3 small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: none; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; }

  .manifesto-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    position: relative;
  }
  .manifesto-box p {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    line-height: 2;
    color: var(--cream);
    letter-spacing: 0.04em;
  }
  .manifesto-box .sig {
    margin-top: 16px;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-align: right;
  }

  /* Progress card */
  .progress-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 22px;
  }
  .progress-card .lead {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .progress-card .stat-row {
    display: flex; align-items: baseline; gap: 8px;
    font-family: 'Shippori Mincho', serif;
  }
  .progress-card .big {
    font-size: 44px; font-weight: 600;
    color: var(--cream); letter-spacing: 0.02em;
  }
  .progress-card .frac { color: var(--muted); font-size: 18px; }
  .progress-card .pct { margin-left: 10px; color: var(--gold); font-size: 18px; }
  .progress-card .progress-bar {
    margin-top: 14px;
    height: 6px; border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
  }
  .progress-card .progress-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--teal-light), var(--coral));
    transition: width 0.6s ease;
  }
  .progress-card .by-region {
    margin-top: 22px; display: flex; flex-direction: column; gap: 8px;
  }
  .progress-card .by-region .row {
    display: grid; grid-template-columns: 56px 1fr 64px;
    align-items: center; gap: 12px;
    font-size: 11.5px; color: var(--muted);
  }
  .progress-card .by-region .row .name { letter-spacing: 0.08em; }
  .progress-card .by-region .row .bar {
    height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    overflow: hidden;
  }
  .progress-card .by-region .row .bar > div {
    height: 100%; background: var(--teal-light);
    transition: width 0.6s ease;
  }
  .progress-card .by-region .row .count {
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--cream); font-size: 11px;
  }
  .progress-cta {
    margin-top: 20px;
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--gold-rgb),0.4);
    background: rgba(var(--gold-rgb),0.07);
    color: var(--gold);
    font: inherit; font-size: 12.5px; letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .progress-cta:hover { background: rgba(var(--gold-rgb),0.14); border-color: rgba(var(--gold-rgb),0.6); }
  .progress-cta .ms { font-size: 17px; }

  /* "もっと見る" pagination */
  .show-more-wrap {
    margin-top: 16px;
    display: flex; justify-content: center;
  }
  .show-more-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--cream);
    padding: 10px 22px;
    border-radius: 999px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }
  .show-more-btn:hover { border-color: var(--coral); color: var(--coral-soft); }
  .show-more-btn .ms { font-size: 16px; }
  .show-more-btn .rest { font-size: 10.5px; color: var(--muted-2); margin-left: 4px; }
  .show-more-end {
    text-align: center;
    font-size: 11px;
    color: var(--muted-2);
    letter-spacing: 0.06em;
    padding: 12px;
  }

  /* Search bar */
  .search-bar {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
  }
  .search-bar:focus-within { border-color: var(--teal-light); }
  .search-bar .ms { color: var(--muted); font-size: 18px; }
  .search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--cream);
    font-family: inherit;
    font-size: 13px;
    outline: none;
  }
  .search-bar input::placeholder { color: var(--muted-2); }
  .search-bar .clear {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 999px;
  }
  .search-bar .clear:hover { color: var(--cream); }

  /* Filter tabs */
  .filter-tabs {
    display: flex; gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11.5px;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: all 0.2s;
  }
  .filter-tab:hover { color: var(--cream); }
  .filter-tab.active {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--bg-deepest);
  }

  /* Member aquariums grid */
  .member-count {
    color: var(--gold);
    font-family: 'Shippori Mincho', serif;
    margin-left: 6px;
    letter-spacing: 0.04em;
  }
  .region-tabs {
    display: flex; gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 14px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .region-tabs::-webkit-scrollbar { display: none; }
  .region-tab {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.06em;
    transition: all 0.2s;
  }
  .region-tab:hover { color: var(--cream); }
  .region-tab.active {
    background: var(--teal-glow);
    border-color: var(--teal-light);
    color: var(--cream);
  }
  .region-tab .count {
    margin-left: 4px;
    color: var(--muted-2);
    font-size: 10px;
  }
  .region-tab.active .count { color: var(--gold); }

  .members-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .member-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s;
    display: flex; flex-direction: column;
  }
  .member-card:hover { border-color: var(--coral); transform: translateY(-2px); }
  .member-card .photo {
    width: 100%; aspect-ratio: 4/3;
    background: var(--bg-soft);
    overflow: hidden;
    display: grid; place-items: center;
    color: var(--teal-light);
  }
  /* フォールバック: 明朝2文字 + 生き物シルエット透かし + 均一な地(地域色は右上にかすかに) */
  .member-card .photo.placeholder {
    background:
      radial-gradient(120% 95% at 85% 12%, var(--rc, rgba(29,97,117,0.13)), transparent 48%),
      linear-gradient(155deg, #102b39 0%, #0b1f2b 100%);
  }
  .member-card .photo.placeholder.r-北海道 { --rc: rgba(var(--teal-light-rgb),0.16); }
  .member-card .photo.placeholder.r-東北   { --rc: rgba(58,78,122,0.18); }
  .member-card .photo.placeholder.r-関東   { --rc: rgba(168,154,200,0.15); }
  .member-card .photo.placeholder.r-中部   { --rc: rgba(var(--gold-rgb),0.14); }
  .member-card .photo.placeholder.r-近畿   { --rc: rgba(var(--coral-rgb),0.14); }
  .member-card .photo.placeholder.r-中国   { --rc: rgba(90,74,42,0.20); }
  .member-card .photo.placeholder.r-四国   { --rc: rgba(58,122,74,0.15); }
  .member-card .photo.placeholder.r-九州   { --rc: rgba(232,170,95,0.14); }
  .member-card .photo.placeholder.r-沖縄   { --rc: rgba(95,232,200,0.15); }
  /* 無画像カードの主役: 水族館の生き物シルエット(PhyloPic)。館IDで固定選択・文字なし */
  .member-card .photo .creature-wm {
    position: absolute; inset: 16%;
    background: var(--cream);
    opacity: 0.22;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    pointer-events: none;
  }
  /* ライト時: 地は紙色グラデ、シルエットは墨青14-18%(v2 mock 準拠) */
  html[data-theme="light"] .member-card .photo.placeholder {
    background:
      radial-gradient(120% 95% at 85% 12%, var(--rc, rgba(29,97,117,0.13)), transparent 48%),
      linear-gradient(155deg, #eef4f2 0%, #dfe8e5 100%);
  }
  html[data-theme="light"] .member-card .photo .creature-wm {
    background: #1d6175;
    opacity: 0.16;
  }
  html[data-theme="light"] .kag-pop-thumb.placeholder .creature-wm {
    background-color: #1d6175;
    opacity: 0.16;
  }
  .member-card .photo img.thumb-img {
    width: 100%; height: 100%; object-fit: cover; opacity: 0.92;
    transition: opacity 0.4s;
  }
  .member-card:hover .photo img.thumb-img { opacity: 1; }
  .member-card .photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: all 0.4s; }
  .member-card:hover .photo img { opacity: 1; transform: scale(1.06); }
  .member-card .body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
  .member-card .body h4 { margin: 0 0 4px; font-family: 'Shippori Mincho', serif; font-weight: 600; font-size: 13px; color: var(--cream); line-height: 1.35; }
  .member-card .body p { margin: 0; font-size: 10px; color: var(--muted); }
  .member-card .meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
  }
  .member-card .visit-badge {
    margin-top: auto;
    padding-top: 8px;
    font-size: 10px;
    color: var(--coral-soft);
    letter-spacing: 0.06em;
    display: flex; align-items: center; gap: 4px;
  }
  .member-card .visit-badge .ms { font-size: 12px; }
  .member-card.visited .photo {
    background: linear-gradient(135deg, rgba(var(--coral-rgb),0.18), rgba(29,97,117,0.18));
  }
  .member-card.visited .photo .placeholder { color: var(--coral-soft); opacity: 0.7; }
  .member-card .stamp {
    position: absolute;
    bottom: 8px; right: 8px;
    background: var(--coral);
    color: var(--bg-deepest);
    border-radius: 50%;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(var(--coral-rgb),0.4);
    z-index: 1;
  }
  .member-card .stamp .num {
    position: absolute;
    top: -6px; right: -6px;
    background: var(--bg-deepest);
    color: var(--cream);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 9.5px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border: 1px solid var(--coral);
  }
  .member-card .fav-btn {
    position: absolute;
    top: 8px; left: 8px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(6,16,26,0.7);
    border: 1px solid var(--divider);
    color: var(--muted);
    display: grid; place-items: center;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .member-card .fav-btn:hover { color: var(--gold); }
  .member-card .fav-btn.want.on { color: var(--gold); border-color: var(--gold); }
  .member-card .fav-btn.loved.on { color: var(--gold); border-color: var(--gold); }
  .member-card .fav-btn.loved:hover { color: var(--gold); }
  .member-card .fav-btn .ms { font-size: 16px; }
  /* 栞メタファー: カード右端から下に垂れる紙の栞 */
  .member-card .shiori {
    position: absolute;
    top: 0;
    right: 18px;
    width: 14px;
    height: 18px;
    background: rgba(255,255,255,0.05);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    transition: all 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
  }
  .member-card .shiori:hover {
    background: rgba(var(--gold-rgb),0.4);
    height: 22px;
  }
  .member-card .shiori.on {
    background: linear-gradient(180deg, var(--gold) 0%, #a09060 100%);
    height: 32px;
    box-shadow: 0 2px 6px rgba(var(--gold-rgb),0.3);
  }
  .member-card .shiori.on:hover {
    height: 36px;
  }
  .member-card .photo { position: relative; }

  /* Empty state */
  .empty-state {
    padding: 36px 28px;
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 12px;
    margin: 4px 20px;
  }
  .empty-state .ms {
    font-size: 36px; color: var(--muted-2);
    margin-bottom: 12px;
  }
  .empty-state h4 {
    margin: 0 0 8px;
    font-family: 'Shippori Mincho', serif;
    font-weight: 500;
    font-size: 15px;
    color: var(--cream);
    letter-spacing: 0.06em;
  }
  .empty-state p {
    margin: 0 0 18px;
    font-size: 12px; color: var(--muted);
    line-height: 1.7;
  }
  .empty-state .cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px;
    background: var(--coral);
    border: none;
    border-radius: 999px;
    color: var(--bg-deepest);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
  }
  .empty-state .cta:hover { background: var(--coral-soft); }

  /* Guidebook */
  .guidebook {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
  }
  .guidebook .photo {
    width: 60%;
    max-width: 220px;
    margin: 0 auto 20px;
    aspect-ratio: 11/16;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    background: var(--bg-deepest);
  }
  .guidebook .photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
  .guidebook h4 {
    margin: 0 0 8px;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--cream);
    letter-spacing: 0.06em;
  }
  .guidebook p {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
    font-family: 'Shippori Mincho', serif;
  }
  .goshuincho-mini-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-top: 16px;
  }
  .goshuincho-mini-gallery > div {
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
  }
  .goshuincho-mini-gallery img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: opacity 0.3s; }
  .goshuincho-mini-gallery > div:hover img { opacity: 1; }

  .binder-showcase {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
  }
  .binder-showcase img {
    width: 100%; height: auto;
    display: block;
    opacity: 0.94;
  }
  .binder-showcase figcaption {
    text-align: center;
    padding: 14px 16px 18px;
    font-family: 'Shippori Mincho', serif;
    font-size: 12px;
    line-height: 1.85;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* Card gallery */
  .card-gallery {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .creature-card {
    aspect-ratio: 5/7;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
  }
  .creature-card:hover { border-color: var(--gold); transform: translateY(-3px); }
  .creature-card.empty {
    background: transparent;
    border-style: dashed;
    border-color: rgba(154,168,176,0.2);
  }
  .creature-card.empty::before {
    content: "?";
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: 'Shippori Mincho', serif;
    color: var(--muted-2);
    font-size: 28px;
    opacity: 0.4;
  }
  .creature-card .photo { width: 100%; height: 100%; }
  .creature-card .photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
  .creature-card .info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px 10px 10px;
    background: linear-gradient(180deg, transparent, rgba(var(--fade-rgb),0.92));
  }
  .creature-card .info .no { font-size: 9px; color: var(--gold); letter-spacing: 0.15em; }
  .creature-card .info .name { font-family: 'Shippori Mincho', serif; font-size: 13px; color: var(--cream); margin-top: 2px; }
  .creature-card .info .src { font-size: 9px; color: var(--muted); margin-top: 2px; }

  /* YouTube list (KAG) */
  .yt-list { display: flex; flex-direction: column; gap: 10px; }
  .yt-list-item {
    display: flex; gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .yt-list-item:hover { border-color: var(--coral); }
  .yt-list-item .thumb {
    width: 96px; aspect-ratio: 16/9;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bg-soft);
    overflow: hidden;
    position: relative;
  }
  .yt-list-item .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
  .yt-list-item .thumb::after {
    content: "play_arrow";
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1, 'wght' 400;
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--cream);
    font-size: 20px;
    opacity: 0.85;
  }
  .yt-list-item .body { flex: 1; }
  .yt-list-item h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--cream); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yt-list-item p { margin: 0; font-size: 10.5px; color: var(--muted); }

  .kag-footer {
    text-align: center;
    padding: 40px 20px 20px;
    border-top: 1px solid var(--divider);
  }
  .kag-footer .mark {
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--cream);
    letter-spacing: 0.15em;
  }
  .kag-footer .copy { margin-top: 8px; font-size: 10px; color: var(--muted-2); letter-spacing: 0.12em; }
  .kag-footer .moto { margin-top: 24px; font-family: 'Shippori Mincho', serif; font-size: 13px; color: var(--gold); letter-spacing: 0.06em; }
  .kag-footer .attrib { margin-top: 28px; font-size: 9.5px; color: var(--muted-2); letter-spacing: 0.04em; line-height: 1.6; opacity: 0.7; }

  /* ---------- Visit add sheet ---------- */
  .sheet {
    position: fixed; inset: 0; z-index: 110;
    background: rgba(6,16,26,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
  }
  .sheet.active { display: block; animation: fade 0.25s ease; }
  .sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-width: 460px; margin: 0 auto;
    max-height: 92dvh;
    background: var(--bg-base);
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 60px rgba(0,0,0,0.6);
    overflow-y: auto;
    animation: slideup 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes slideup { from { transform: translateY(40px); opacity: 0.0; } to { transform: translateY(0); opacity: 1; } }
  .sheet-header {
    position: sticky; top: 0;
    background: linear-gradient(180deg, var(--bg-base) 78%, transparent);
    padding: 18px 20px 12px;
    display: flex; align-items: center; justify-content: space-between;
    z-index: 2;
  }
  .sheet-header h3 {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.06em;
  }
  .sheet-header .close {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; padding: 6px; border-radius: 999px;
  }
  .sheet-header .close:hover { color: var(--cream); }
  .sheet-body { padding: 4px 20px 24px; }
  .field { margin-bottom: 18px; }
  .field label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 600;
  }
  .field label .req { color: var(--coral); margin-left: 4px; }
  .field input[type=text], .field input[type=date], .field textarea, .field select {
    width: 100%;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--cream);
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    transition: border-color 0.2s;
  }
  .field input:disabled {
    color: var(--muted-2);
    opacity: 0.65;
    cursor: not-allowed;
  }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--teal-light);
  }
  .field textarea { min-height: 80px; resize: vertical; line-height: 1.6; }
  .field .hint { margin-top: 6px; font-size: 11px; color: var(--muted-2); line-height: 1.5; }
  .field .err { margin-top: 6px; font-size: 11px; color: var(--coral); }
  .field .check-row {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px;
    font-size: 12px; color: var(--muted);
    cursor: pointer;
    user-select: none;
  }
  .field .check-row input[type=checkbox] {
    width: 16px; height: 16px;
    accent-color: var(--coral);
    cursor: pointer;
  }
  .field .check-row:hover { color: var(--cream); }
  .sheet-actions {
    position: sticky; bottom: 0;
    background: linear-gradient(0deg, var(--bg-base) 70%, transparent);
    padding: 12px 20px 18px;
    display: flex; gap: 10px;
  }
  .sheet-actions button {
    flex: 1; padding: 12px 16px; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    letter-spacing: 0.06em; cursor: pointer;
    transition: all 0.2s;
  }
  .sheet-actions .cancel {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .sheet-actions .cancel:hover { color: var(--cream); }
  .sheet-actions .save {
    background: var(--coral);
    border: 1px solid var(--coral);
    color: var(--bg-deepest);
  }
  .sheet-actions .save:hover { background: var(--coral-soft); }
  .sheet-actions .save:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ---------- Aquarium detail overlay ---------- */
  .aq-overlay {
    position: fixed; inset: 0; z-index: 105;
    background: rgba(6,16,26,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    overflow-y: auto;
  }
  .aq-overlay.active { display: block; animation: fade 0.25s ease; }
  .aq-card {
    max-width: 460px;
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--bg-base);
    position: relative;
    padding-bottom: 120px;
  }
  .aq-close {
    position: absolute; top: 14px; right: 14px;
    z-index: 5;
    background: rgba(6,16,26,0.55);
    border: 1px solid var(--border);
    color: var(--cream);
    width: 36px; height: 36px;
    border-radius: 999px;
    display: grid; place-items: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
  }
  .aq-close:hover { border-color: var(--coral); }
  .aq-head {
    padding: 0 0 20px;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-base) 100%);
    border-bottom: 1px solid var(--divider);
    position: relative;
  }
  .aq-head .aq-region,
  .aq-head .aq-name,
  .aq-head .aq-locality { padding-left: 24px; padding-right: 24px; }
  .aq-head .aq-region { padding-top: 24px; }
  .aq-hero-img {
    width: 100%; aspect-ratio: 16/10;
    background: var(--bg-deepest);
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
  }
  .aq-hero-img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(var(--fade-rgb),0.85) 100%);
    pointer-events: none;
  }
  .aq-hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
  .aq-region {
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .aq-name {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    font-size: 26px;
    color: var(--cream);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }
  .aq-locality {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }
  .aq-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--divider);
  }
  .aq-stats .stat-stamp {
    background: var(--coral);
    color: var(--bg-deepest);
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: 'Shippori Mincho', serif;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(var(--coral-rgb),0.4);
  }
  .aq-stats .stat-text {
    flex: 1;
    font-size: 13px;
    color: var(--cream);
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.04em;
  }
  .aq-stats .stat-text .small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.06em;
    margin-top: 2px;
  }
  .aq-section {
    padding: 24px;
    border-bottom: 1px solid var(--divider);
  }
  .aq-section h4 {
    margin: 0 0 14px;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 600;
  }
  .aq-section h4 .muted-num {
    margin-left: 8px;
    color: var(--gold);
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.04em;
  }
  .aq-desc {
    margin: 0 0 16px;
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    line-height: 2;
    color: var(--cream);
    letter-spacing: 0.04em;
  }
  .aq-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--coral-soft);
    text-decoration: none;
    font-size: 12.5px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: all 0.2s;
  }
  .aq-link:hover { border-color: var(--coral); color: var(--coral); }
  .aq-attraction-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 7px 0;
  }
  .aq-attraction-row + .aq-attraction-row { border-top: 1px solid var(--divider); }
  .aq-attraction-text {
    flex: 1;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    line-height: 1.9;
    color: var(--cream);
    letter-spacing: 0.03em;
  }
  .aq-attraction-text::before {
    content: '・';
    color: var(--gold);
    margin-right: 2px;
  }
  .aq-attraction-src {
    flex-shrink: 0;
    font-size: 10.5px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dotted var(--muted-2);
    padding-bottom: 1px;
  }
  a.aq-attraction-src:hover { color: var(--coral-soft); border-color: var(--coral-soft); }
  .aq-attraction-quote {
    margin: 12px 0 0;
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--coral);
  }
  .aq-attraction-row + .aq-attraction-quote { margin-top: 16px; }
  .aq-attraction-quote-text {
    display: block;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    line-height: 2;
    color: var(--cream);
    letter-spacing: 0.02em;
  }
  .aq-attraction-quote-src {
    display: block;
    margin-top: 8px;
    text-align: right;
    font-size: 10.5px;
    color: var(--gold);
    letter-spacing: 0.04em;
  }
  /* ユーザー投稿（visit引用と同系統だが、操作と表示名を持つ） */
  .aq-post {
    margin: 16px 0 0;
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--coral);
  }
  .aq-attraction-row + .aq-post,
  .aq-attraction-quote + .aq-post { margin-top: 18px; }
  .aq-post-text {
    display: block;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    line-height: 2;
    color: var(--cream);
    letter-spacing: 0.02em;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .aq-post-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 8px;
  }
  .aq-post-src {
    font-size: 10.5px;
    color: var(--gold);
    letter-spacing: 0.04em;
  }
  .aq-post-actions { display: flex; gap: 14px; }
  .aq-post-action {
    background: none; border: none; padding: 0;
    cursor: pointer;
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.04em;
    font-family: inherit;
  }
  .aq-post-action:hover { color: var(--coral-soft); }
  .aq-attractions-empty {
    margin: 2px 0 0;
    font-family: 'Shippori Mincho', serif;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.03em;
  }
  .aq-post-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px;
    color: var(--coral-soft);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
  }
  .aq-post-btn:hover { border-color: var(--coral); color: var(--coral); }
  .aq-post-btn .ms { font-size: 16px; }
  .post-guide {
    margin: 0 0 18px;
    font-family: 'Shippori Mincho', serif;
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted);
    letter-spacing: 0.03em;
  }
  .post-consent {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 4px;
    font-size: 12px; line-height: 1.7; color: var(--muted);
    letter-spacing: 0.02em; cursor: pointer;
  }
  .post-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--coral); }
  .post-consent a { color: var(--coral-soft); }
  .about-policy-link {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
  }
  .about-policy-link:hover { color: var(--cream); }
  .menu-install-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 0 0 20px; padding: 14px;
    background: rgba(var(--gold-rgb),0.12);
    border: 1px solid var(--gold); color: var(--gold);
    border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 600;
    letter-spacing: 0.04em; cursor: pointer; transition: all 0.2s;
  }
  .menu-install-btn:hover { background: rgba(var(--gold-rgb),0.20); }
  .menu-install-btn .ms { font-size: 19px; }
  .menu-install-hint { margin: 0 0 18px; font-size: 12px; color: var(--muted); line-height: 1.7; }
  /* アバターはボタン化したのでデフォルトのボタン装飾を消す */
  .topbar button.avatar { cursor: pointer; padding: 0; outline: none; }
  /* アカウントパネル: 自分の投稿 */
  .my-posts { margin-top: 4px; }
  .my-posts-empty {
    margin: 0;
    font-family: 'Shippori Mincho', serif;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.03em;
  }
  .my-post-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 10px 0;
  }
  .my-post-row + .my-post-row { border-top: 1px solid var(--divider); }
  .my-post-main { flex: 1; min-width: 0; }
  .my-post-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 13.5px; line-height: 1.8;
    color: var(--cream); letter-spacing: 0.02em;
    word-break: break-word;
  }
  .my-post-aq {
    display: block; margin-top: 3px;
    font-size: 10.5px; color: var(--gold); letter-spacing: 0.04em;
  }
  .my-post-del {
    flex-shrink: 0;
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em;
    font-family: inherit;
  }
  .my-post-del:hover { color: var(--coral-soft); }
  /* メニューパネル: アプリについて */
  .about-text {
    margin: 0 0 22px;
    font-family: 'Shippori Mincho', serif;
    font-size: 14px; line-height: 2;
    color: var(--cream); letter-spacing: 0.03em;
  }
  .about-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 0;
    border-top: 1px solid var(--divider);
  }
  .about-label {
    font-size: 10.5px; color: var(--muted);
    letter-spacing: 0.22em; text-transform: uppercase;
  }
  .about-val { font-size: 13px; color: var(--cream); letter-spacing: 0.03em; }
  .aq-nearby-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%;
    padding: 11px 2px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--divider);
    color: var(--text);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
  }
  .aq-nearby-row:last-child { border-bottom: none; }
  .aq-nearby-row:hover .aq-nearby-name { color: var(--gold); }
  .aq-nearby-name {
    flex: 1;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.03em;
    transition: color 0.2s;
  }
  .aq-nearby-stamp {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--coral);
    flex-shrink: 0;
  }
  .aq-nearby-meta {
    display: inline-flex; align-items: center; gap: 8px;
    flex-shrink: 0;
  }
  .aq-nearby-dist {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  .aq-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .aq-social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--cream);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s;
  }
  .aq-social-link:hover { border-color: var(--coral); color: var(--coral-soft); }
  .aq-social-link .ms { font-size: 15px; color: var(--muted); }
  .aq-gyoshuin-box {
    border: 1px solid rgba(var(--gyoshuin-rgb),0.36);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--teal-light-rgb),0.12), rgba(var(--card-rgb),0.42));
    padding: 14px;
  }
  .aq-gyoshuin-box.candidate {
    border-style: dashed;
    border-color: rgba(var(--gyoshuin-rgb),0.24);
    background: rgba(var(--card-rgb),0.24);
  }
  .aq-gyoshuin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .aq-gyoshuin-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    color: var(--cream);
    letter-spacing: 0.06em;
  }
  .aq-gyoshuin-title .ms {
    color: var(--gyoshuin);
    font-size: 18px;
  }
  .aq-gyoshuin-meta {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
  }
  .aq-gyoshuin-note {
    margin: 0 0 12px;
    color: var(--cream);
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    line-height: 1.8;
  }
  .aq-gyoshuin-caution {
    margin: 0 0 12px;
    color: var(--gold);
    font-size: 11px;
    line-height: 1.65;
    opacity: 0.78;
  }
  .aq-attrib {
    margin-top: 14px;
    font-size: 10px;
    color: var(--muted-2);
    opacity: 0.7;
    letter-spacing: 0.04em;
  }
  .aq-history-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.15s;
  }
  .aq-history-row:hover { background: var(--bg-soft); margin: 0 -12px; padding: 12px; border-radius: 6px; }
  .aq-history-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .aq-history-body { min-width: 0; }
  .aq-history-thumb {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-soft);
  }
  .aq-history-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
  .aq-history-row .date {
    font-family: 'Shippori Mincho', serif;
    font-size: 14px; color: var(--cream); letter-spacing: 0.04em;
  }
  .aq-history-row .memo-snip {
    grid-column: 1 / -1;
    font-size: 12px; color: var(--muted);
    line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .aq-history-row .ms { color: var(--muted); font-size: 14px; }
  /* 公開ずみの記録は本文を繰り返さない(同じ文章が「この館の魅力」と二重に出ていた) */
  .aq-history-row .aq-history-pub {
    grid-column: 1 / -1;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--muted); line-height: 1.6;
  }
  .aq-history-row .aq-history-pub .ms { font-size: 13px; }
  .aq-history-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .aq-history-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(var(--card-rgb),0.45);
    color: var(--muted);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .aq-history-action:hover {
    border-color: var(--teal-light);
    color: var(--cream);
  }
  .aq-history-action.danger:hover {
    border-color: var(--coral);
    color: var(--coral);
    background: rgba(var(--coral-rgb),0.08);
  }
  .aq-history-action .ms { font-size: 14px; }
  .aq-history-empty {
    font-size: 12px;
    color: var(--muted);
    padding: 12px 0;
    text-align: center;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.04em;
  }
  .aq-actions {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px 24px 0;
  }
  /* 旧: 小さな toggle ボタン（後方互換のため残し） */
  .aq-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 10px;
    padding: 12px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: all 0.2s;
  }
  .aq-toggle .ms { font-size: 22px; }
  .aq-toggle:hover { color: var(--cream); }
  .aq-toggle.on.want { border-color: var(--gold); color: var(--gold); }
  .aq-toggle.on.loved { border-color: var(--gold); color: var(--gold); }
  /* 新: 大きなテキストCTA (B案) */
  .aq-cta-stack { display: flex; flex-direction: column; gap: 10px; padding: 18px 24px 0; }
  .aq-cta {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--cream);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.25s;
  }
  .aq-cta .ms { font-size: 20px; opacity: 0.8; }
  .aq-cta:hover { border-color: var(--cream); }
  .aq-cta.want.on {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(var(--gold-rgb),0.06);
  }
  .aq-cta.loved.on {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(var(--gold-rgb),0.06);
  }
  /* 旧「いつ行こうかな」メモ。入力欄は廃止し、書いてある館だけ読み取り専用で見せる */
  .aq-note-old {
    margin: 0;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    color: var(--cream);
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    line-height: 1.9;
    white-space: pre-wrap;
  }
  .aq-note-hint {
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  /* 記録シート内の旧「思い出したいこと」。読み取り専用で、写すのは明示操作だけ */
  .legacy-memo {
    margin: 0 0 10px;
    padding: 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--cream);
    font-family: 'Shippori Mincho', serif;
    font-size: 14px;
    line-height: 1.9;
    white-space: pre-wrap;
  }
  .detail-legacy-note {
    margin-left: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  /* ---- 公開の契約(P4) ---- */
  /* 保存の二択。押すボタンで契約を分ける(小さなトグルにしない) */
  /* 2段になるので、背景は透けさせない(下のボタンが重なって見えるのを防ぐ) */
  .sheet-actions-stack { flex-direction: column; gap: 8px; background: var(--bg-base); padding-top: 14px; }
  .sheet-actions-row { display: flex; gap: 10px; }
  .sheet-actions-row button { flex: 1; }
  .sheet-publish-hint {
    font-size: 10.5px; line-height: 1.7; color: var(--muted);
    letter-spacing: 0.02em;
  }
  .sheet-publish {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--teal-light-rgb), 0.6);
    background: none;
    color: var(--teal-light);
    font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
    cursor: pointer; transition: all 0.2s;
  }
  .sheet-publish:hover { background: rgba(var(--teal-light-rgb), 0.12); }
  .sheet-publish .ms { font-size: 17px; }

  /* 公開の確認 */
  .publish-warn {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--coral-rgb), 0.5);
    border-radius: 8px;
    color: var(--cream);
    font-size: 12.5px; line-height: 1.7;
  }
  .publish-warn .ms { font-size: 17px; color: var(--coral); flex-shrink: 0; }
  .publish-preview {
    margin: 0;
    padding: 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--cream);
    font-family: 'Shippori Mincho', serif;
    font-size: 14px; line-height: 1.9;
    white-space: pre-wrap;
  }
  .publish-preview.old { color: var(--muted); }
  .publish-pick {
    display: block; width: 100%; text-align: left;
    margin-bottom: 8px; padding: 10px 12px;
    background: var(--bg-soft);
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--cream); font-family: inherit; cursor: pointer;
  }
  .publish-pick:hover { border-color: var(--teal-light); }
  .publish-pick .d {
    display: block; font-family: 'Shippori Mincho', serif;
    font-size: 13px; color: var(--teal-light); letter-spacing: 0.04em;
  }
  .publish-pick .t { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
  .publish-pick .p {
    display: inline-block; margin-top: 5px;
    font-size: 10px; color: var(--gold); letter-spacing: 0.04em;
  }

  /* 記録詳細の公開状態 */
  .detail-publish-state { margin: 0 0 10px; font-size: 12.5px; line-height: 1.8; color: var(--cream); }
  .detail-publish-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .detail-publish-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 6px;
    border: 1px solid var(--border); background: none;
    color: var(--cream); font-family: inherit; font-size: 11.5px;
    cursor: pointer; transition: all 0.2s;
  }
  .detail-publish-btn .ms { font-size: 15px; }
  .detail-publish-btn:hover { border-color: var(--teal-light); }
  .detail-publish-btn.danger { color: var(--muted); }
  .detail-publish-btn.danger:hover { border-color: var(--coral); color: var(--coral); }

  /* アカウント: Google 連携 */
  .account-auth-state {
    margin: 0 0 10px; padding: 10px 12px;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px;
    font-size: 12px; line-height: 1.7; color: var(--cream);
  }
  .account-auth-acts { display: flex; gap: 8px; flex-wrap: wrap; }
  .account-auth-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 6px;
    border: 1px solid var(--border); background: none;
    color: var(--cream); font-family: inherit; font-size: 12px;
    cursor: pointer; transition: all 0.2s;
  }
  .account-auth-btn .ms { font-size: 16px; }
  .account-auth-btn:hover { border-color: var(--teal-light); }
  .account-auth-btn[disabled] { opacity: 0.45; cursor: default; }
  .account-auth-btn[disabled]:hover { border-color: var(--border); }
  /* 取り消せない操作だけ、色で警告する(§12: 赤は汎用のセマンティック色として状態色と混ぜない) */
  .account-auth-btn.danger { color: var(--incorrect, #d98a80); }
  .account-auth-btn.danger:hover { border-color: var(--incorrect, #d98a80); }

  /* 記録を預ける同意・初回の受け取りかた */
  .sync-lead { margin: 0 0 16px; font-size: 13px; line-height: 1.8; color: var(--cream); }
  .sync-block { margin: 0 0 18px; }
  .sync-block h4 {
    margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--gold);
  }
  .sync-list { margin: 0; padding-left: 1.2em; }
  .sync-list li { font-size: 12.5px; line-height: 1.75; color: var(--cream); margin: 0 0 5px; }
  .sync-list.muted li { color: var(--muted); }
  .sync-list b { color: var(--cream); font-weight: 600; }
  .sync-count {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 12.5px; line-height: 1.9; color: var(--muted);
    padding: 3px 0; border-bottom: 1px solid var(--divider);
  }
  .sync-count b { color: var(--cream); font-weight: 600; }

  .aq-stamp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 18px 24px 0;
    width: calc(100% - 48px);
    padding: 16px;
    background: var(--coral);
    border: 1px solid var(--coral);
    color: var(--bg-deepest);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .aq-stamp-btn:hover { background: var(--coral-soft); }
  .aq-stamp-btn .ms { font-size: 20px; }

  /* ---------- Detail overlay ---------- */
  .detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(6,16,26,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    overflow-y: auto;
  }
  .detail-overlay.active { display: block; animation: fade 0.3s ease; }
  .detail-card {
    max-width: 460px;
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--bg-base);
    position: relative;
  }
  .detail-close {
    position: absolute; top: 16px; right: 16px;
    z-index: 5;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(var(--fade-rgb),0.7);
    border: 1px solid var(--border);
    color: var(--cream);
    display: grid; place-items: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
  }
  .detail-hero {
    width: 100%; aspect-ratio: 4/5;
    overflow: hidden;
    position: relative;
    background: var(--bg-soft);
  }
  .detail-hero img { width: 100%; height: 100%; object-fit: cover; }
  .detail-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(var(--fade-rgb),0.95)); }
  .detail-hero .meta { position: absolute; bottom: 24px; left: 24px; right: 24px; z-index: 2; }
  .detail-hero .meta .date { font-family: 'Shippori Mincho', serif; font-size: 28px; color: var(--cream); letter-spacing: 0.04em; }
  .detail-hero .meta .place { font-family: 'Shippori Mincho', serif; font-size: 18px; color: var(--gold); margin-top: 4px; letter-spacing: 0.08em; }

  .detail-section { padding: 32px 20px; border-bottom: 1px solid var(--divider); }
  .detail-section h4 { margin: 0 0 16px; font-size: 11px; letter-spacing: 0.22em; color: var(--muted); text-transform: uppercase; font-weight: 600; }
  .detail-memo { font-family: 'Shippori Mincho', serif; font-size: 16px; line-height: 2; color: var(--cream); letter-spacing: 0.04em; }
  .detail-photos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .detail-photos::-webkit-scrollbar { display: none; }
  .detail-photos > div { flex: 0 0 75%; aspect-ratio: 1; background: var(--bg-soft); border-radius: 4px; overflow: hidden; }
  .detail-photos img { width: 100%; height: 100%; object-fit: cover; }

  /* 記録シート内の写真ピッカー(選択中＋保存済みを同じ枠で見せる) */
  .visit-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .visit-photos:empty { display: none; }
  .visit-photo {
    position: relative; aspect-ratio: 1;
    background: var(--bg-soft); border-radius: 4px; overflow: hidden;
  }
  .visit-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .visit-photo-x {
    position: absolute; top: 2px; right: 2px;
    width: 24px; height: 24px; padding: 0;
    display: grid; place-items: center;
    border: none; border-radius: 50%;
    background: rgba(var(--fade-rgb), 0.72);
    color: var(--cream); cursor: pointer;
  }
  .visit-photo-x .ms { font-size: 16px; }

  .detail-companions { display: flex; gap: 8px; flex-wrap: wrap; }
  .detail-companions .pill { font-size: 12px; padding: 6px 14px; }

  .detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 24px 20px 80px;
  }
  .detail-action {
    display: flex; align-items: center; gap: 8px;
    justify-content: center;
    padding: 14px 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--cream);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .detail-action:hover { border-color: var(--teal-light); background: rgba(73,166,185,0.08); }
  .detail-action .ms { color: var(--coral-soft); }
  .detail-action.danger:hover { border-color: var(--coral); background: rgba(var(--coral-rgb),0.08); }
  .detail-action.danger .ms { color: var(--coral); }

  /* ============================================================
     キーボードフォーカス: 全幅で控えめなティール輪郭で統一。
     DESIGN §3 静謐: 発光・派手なリングは使わない。
     ============================================================ */
  :focus-visible {
    outline: 2px solid var(--teal-light);
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* hover をホバー可能デバイスに限定(タップで sticky な :hover を防ぐ) */
  @media (hover: none) {
    a:hover, button:hover, .tab:hover { transition: none; }
  }

  /* ============================================================
     脇道(aside) — タブ別の補助列(B案)。
     PC 中間幅(768〜1023px)で主列の右側に並置される。
     1024px+ は既存の2カラム sidebar 化に役割を譲り、非表示。
     ============================================================ */
  .screen-aside { display: none; }
  .screen-aside .aside-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
  }
  .screen-aside .aside-card + .aside-card { margin-top: 18px; }
  .screen-aside h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 500; font-size: 10.5px;
    color: var(--gold); letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 10px;
  }
  .screen-aside .aside-item {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; line-height: 1.55; padding: 6px 0;
    border-bottom: 1px solid var(--divider);
  }
  .screen-aside .aside-item:last-child { border-bottom: none; }
  .screen-aside .aside-item .name {
    font-family: 'Shippori Mincho', serif; color: var(--cream);
  }
  .screen-aside .aside-item .pref {
    display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.04em; margin-top: 2px;
  }
  .screen-aside .aside-item .date { color: var(--muted); font-size: 11px; }
  .screen-aside .aside-empty {
    color: var(--muted-2); font-size: 12px; padding: 8px 0 4px;
  }
  .screen-aside .aside-stat {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 5px 0; font-size: 12.5px;
  }
  .screen-aside .aside-stat .key {
    color: var(--muted); letter-spacing: 0.06em; font-size: 11px;
  }
  .screen-aside .aside-stat .val {
    font-family: 'Shippori Mincho', serif; font-weight: 500; font-size: 16px;
  }
  .screen-aside .aside-pref-row {
    display: flex; justify-content: space-between; padding: 5px 0;
    border-bottom: 1px solid var(--divider); font-size: 12.5px;
  }
  .screen-aside .aside-pref-row:last-child { border-bottom: none; }
  .screen-aside .aside-pref-row .cnt { color: var(--muted); font-size: 11px; }
  .screen-aside .aside-pref-row .cnt b { color: var(--coral); font-weight: 500; }
  .screen-aside .aside-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; color: var(--cream); text-decoration: none; font-size: 12.5px;
    border-bottom: 1px solid var(--divider);
    transition: color 150ms;
  }
  .screen-aside .aside-link:last-child { border-bottom: none; }
  .screen-aside .aside-link:hover { color: var(--gold); }
  .screen-aside .aside-link .arrow { color: var(--gold); }
  .screen-aside .aside-link .icon {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bg-soft); color: var(--gold);
    display: inline-grid; place-items: center; font-size: 10px;
    margin-right: 8px; flex-shrink: 0;
  }

  /* ============================================================
     768〜1023px: 中間幅 1.5列レイアウト(B案)
     主列(1fr 上限560) + 脇道(240) を grid で並置。
     既存の 768px breakpoint(shadow のみ)を保ちつつ、上書き。
     ============================================================ */
  @media (min-width: 768px) and (max-width: 1023.98px) {
    /* 2026-06-29: B案(1.5列+脇道)→ D寄り止揚案(単一カラム広め)に振り直し。
       理由: 990px帯で「主列+右脇道+下部タブ」は3領域化して窮屈/ちぐはぐ。
       水族館マップは個人状態を持つ軽量アプリだが、中間幅では情報サイト寄りで読ませる方が静謐。
       脇道(.screen-aside)はこの帯では非表示。JS の renderAside は無害に走るが描画されない。 */
    body {
      padding: 24px;
      /* 2026-07-04 PC UI刷新: グラデーション廃止・単一色(この帯もPCと統一) */
      background: var(--bg-base);
    }
    .app {
      max-width: 820px;
      padding-bottom: 96px; /* タブバー回避 */
      /* 2026-07-04: 浮遊カード(角丸+影)を撤去して接地(PCと思想を統一)。 */
    }
    .screen.active {
      padding: 0 28px 12px;
    }
    /* 中間幅では脇道を隠す(grid解除済み・display:none で念のため明示) */
    .screen.active > aside.screen-aside {
      display: none;
    }
    /* 中間幅での余白調整(main 領域の左右 padding は .screen.active 側で持つので個別を抑える) */
    .records-head,
    .search-hero,
    .kag-hero {
      padding-left: 0; padding-right: 0;
    }
    .kag-section { padding-left: 0; padding-right: 0; }
    .pad { padding-left: 0; padding-right: 0; }
    .h-scroll {
      /* 横スクロール禁止(Codex指摘) → grid に切替 */
      margin: 0;
      padding: 0;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      overflow: visible;
    }
    .nv-card { flex: 1 1 auto; min-width: 0; }
    .section-divider { margin-left: 0; }
    /* 地図はこの中間幅でも縦に潰さない */
    .map-wrap { width: 100%; aspect-ratio: 16/10; max-height: 60vh; }
    /* タイポ階層: 見出しを少しだけ大きく */
    .records-head h2,
    .search-hero h2 { font-size: 32px; line-height: 1.4; }
    .kag-section h3 { font-size: 13px; }
    /* PC本文フォント底上げ(2026-06-29 Codex②指摘): 13→15px。見出し・タグ・メタは触らない。 */
    .nv-card p,
    .want-card p,
    .yt-card .title,
    .event .body p,
    .chip { font-size: 15px; }
    /* hover/focus を低彩度・短時間で統一 */
    .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  }

  @media (min-width: 1024px) {
    /* 2026-07-04 PC UI刷新(案A: フル高サイドバー型)。
       浮遊カード(角丸+影+外周余白)とグラデーションを廃止し、
       左ナビが画面端まで接地するデスクトップネイティブな骨格に。
       設定(#menu-btn)・アカウント(#avatar-btn)はサイドバー最下部に常設。 */
    body {
      padding: 0;
      background: var(--bg-base);
    }
    .app {
      max-width: none;
      min-height: 100dvh;
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      grid-template-rows: auto 1fr;
      padding-bottom: 0;
      overflow: hidden;
    }
    .topbar {
      position: relative;
      top: auto;
      grid-column: 1;
      grid-row: 1;
      height: auto;
      min-height: 0;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 12px;
      padding: 34px 26px 22px;
      border-right: 1px solid var(--divider);
      background: var(--bg-deepest);
      /* backdrop-filter は fixed/absolute 子孫の containing block を作り
         下部の設定/アカウントの位置を狂わせるため無効化 */
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 70; /* .tabbar(60) より上: fixed の設定/アカウントを見せる */
    }
    .topbar h1 { font-size: 30px; letter-spacing: 0.08em; }
    .topbar h1::after {
      content: "全国の水族館をさがす・記録する";
      display: block;
      margin-top: 8px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.12em;
    }
    /* 設定・アカウントはサイドバー最下部にラベル付きの行で常設。
       上のナビタブ(さがす/記録/便り)と同じ見た目に揃える。
       サイドバー幅 280px に合わせ left:16px + width:248px で全幅行に。 */
    .topbar .icon-btn,
    .topbar .avatar {
      display: flex;
      position: fixed;
      top: auto;
      z-index: 70;
      left: 16px;
      width: 248px;
      height: 48px;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      padding: 0 16px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      opacity: 1;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 15px;
      letter-spacing: 0.08em;
      transition: background 0.18s, color 0.18s;
    }
    .topbar .icon-btn:hover,
    .topbar .avatar:hover { background: var(--bg-soft); color: var(--cream); }
    .topbar .icon-btn .ms,
    .topbar .avatar .ms { font-size: 24px; } /* 上のナビタブ(24px)とアイコン列を揃える */
    /* .topbar button.avatar の基底 padding:0(要素込みで詳細度が高い)を上書きし、
       アイコン開始位置を設定ボタン・ナビタブと同じ 16px に揃える */
    .topbar button.avatar { padding: 0 16px; }
    .topbar .icon-btn::after { content: "設定"; }
    .topbar .avatar::after { content: "ユーザー"; }
    .topbar .avatar { bottom: 20px; }
    .topbar .icon-btn { bottom: 74px; }
    .tabbar {
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      grid-column: 1;
      grid-row: 2;
      height: auto;
      border-top: 0;
      border-right: 1px solid var(--divider);
      background: var(--bg-deepest);
    }
    .tabbar-inner {
      max-width: none;
      height: auto;
      display: grid;
      grid-template-columns: 1fr;
      align-content: start;
      gap: 8px;
      padding: 6px 16px 148px; /* 下部の設定/アカウント2行ぶんの余白 */
    }
    .tab {
      min-height: 56px;
      flex-direction: row;
      justify-content: flex-start;
      gap: 12px;
      padding: 0 16px;
      border-radius: 8px;
    }
    .tab .ms { font-size: 24px; }
    .tab span { font-size: 15px; letter-spacing: 0.08em; }
    .tab.active { background: rgba(29,97,117,0.18); }
    .tab.active::after {
      left: 0;
      bottom: auto;
      top: 16px;
      width: 3px;
      height: 24px;
      transform: none;
    }
    .screen.active {
      grid-column: 2;
      grid-row: 1 / 3;
      min-width: 0;
      max-height: 100dvh;
      overflow-y: auto;
      padding-bottom: 42px;
      /* 全幅レイアウトでもコンテンツ列は上限幅で止め、超ワイドでは中央寄せ。
         列ごと1点で中央化するので内部の左揃え・区切り線・余白は一貫する。 */
      max-width: 1400px;
      margin-inline: auto;
    }
    .kag-hero {
      text-align: left;
      padding: 82px 72px 66px;
    }
    .kag-hero h2 { font-size: 44px; line-height: 1.45; }
    .search-hero {
      padding: 56px 72px 28px;
    }
    .search-hero h2 {
      font-size: 40px;
      line-height: 1.42;
    }
    .search-hero p {
      max-width: 560px;
      font-size: 14px;
    }
    .kag-section {
      padding: 48px 72px;
    }
    .kag-section h3 {
      text-align: left;
      font-size: 14px;
    }
    .records-head {
      text-align: left;
      padding: 54px 72px 10px;
    }
    .records-head h2 { font-size: 34px; }
    .pad {
      padding-left: 72px;
      padding-right: 72px;
    }
    .members-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .member-card .body h4 { font-size: 15px; }
    .member-card .body p { font-size: 12px; }
    /* 地図は左寄せで広く(旧: 520px 中央寄せの名残を解消)。「密度こそ価値」の地図をPCで映す。
       ただし基底の aspect-ratio:3/4(縦長)のまま幅を広げると高さが画面を超えるため、
       PCでは高さ基準(ビューポート比)でキャップし、常に1画面に収める。 */
    .map-wrap {
      width: 100%;
      max-width: 900px;
      aspect-ratio: auto;
      height: 58vh;
      max-height: 600px;
      min-height: 400px;
      margin: 0;
      border-radius: 12px;
    }
    .map-options {
      justify-content: flex-start;
      margin: -8px 0 16px;
    }
    .map-legend {
      margin: 18px 0 0;
      justify-content: flex-start;
    }
    .progress-card {
      max-width: 900px;
      margin: 0;
    }
    .visit-list,
    .timeline {
      padding-left: 0;
      padding-right: 0;
    }
    .visit-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .h-scroll {
      margin: 0;
      padding-left: 72px;
      padding-right: 72px;
    }
    .nv-card { flex-basis: 300px; }
    .section-divider { margin-left: 72px; }
    .guidebook {
      display: grid;
      grid-template-columns: minmax(180px, 0.62fr) 1fr;
      gap: 24px;
      align-items: center;
      text-align: left;
    }
    .guidebook .photo {
      width: 100%;
      max-width: none;
      margin: 0;
      grid-row: span 3;
    }
    .goshuincho-mini-gallery { grid-template-columns: repeat(3, 1fr); }
    .fab {
      right: 32px;
      bottom: 32px;
    }
    .sheet-panel { max-width: 640px; }
    .aq-card { max-width: 720px; }
    /* PC本文フォント底上げ(2026-06-29 Codex②指摘): 1024+ で 16px。 */
    .nv-card p,
    .want-card p,
    .yt-card .title,
    .event .body p,
    .chip { font-size: 16px; }

    /* ③操作・ラベル層のデスクトップ底上げ(2026-07-05)。
       本文(16px)は既にPC級だが、操作系・付随ラベルはモバイルの 11〜13px の
       ままだったため一段引き上げ、左ナビ(15px)と拡大率を揃える。モバイルは不変。 */
    .search-bar input { font-size: 15px; }
    .filter-tab { font-size: 13px; }
    .region-tab { font-size: 12px; }
    .region-tab .count { font-size: 11px; }
    .map-mode-btn { font-size: 13px; }
    .map-mode-hint { font-size: 12px; }
    .map-toggle { font-size: 13px; }
    .map-legend { font-size: 12px; }
    .records-head p,
    .section-head .sub { font-size: 12px; }
    /* セクション見出しを1系統に統一: 便り(NEXT/MOVIE/SNS)の 18px太字 を、
       さがす・記録の 14px キッカー(字間広め・大文字)に合わせる。 */
    .section-head h2 {
      font-size: 14px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }
  }

  /* 1440px+ 帯: 大画面では地図・進捗をさらに広げ、訪問一覧を3列に。 */
  @media (min-width: 1440px) {
    .map-wrap { max-width: 1000px; } /* 高さは 1024+ の 58vh を継承(見出し・操作込みで1画面に収める) */
    .progress-card { max-width: 1100px; }
    .visit-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* 1600px+ 帯: カード一覧は4列に(コンテンツ列 1400px 内で自然に収まる)。 */
  @media (min-width: 1600px) {
    .members-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }