:root {
  --bg: #F8FBF8;
  --bg2: #FFFEFA;
  --card: #FFFEFA;
  --card-hover: #F3FAF7;
  --nav-bg: rgba(255,254,250,0.94);
  --border: rgba(73,128,186,0.18);
  --border-focus: #5B8DEE;
  --blue: #4F7FD8;
  --blue-dark: #2F65C7;
  --blue-light: #EDF6FF;
  --blue-glow: rgba(79,127,216,0.12);
  --text: #1E2845;
  --text-muted: #6B7A99;
  --text-dim: #9AA5BF;
  --cat-food: #FF6B35;
  --cat-mohinga: #00B4D8;
  --cat-museum: #9B5DE5;
  --cat-event: #06D6A0;
  --cat-entertainment: #F72585;
  --cat-nature: #2A9D8F;
  --cat-book: #EE9B00;
  --cat-shop: #BB3E03;
  --cat-view: #94D2BD;
  --cat-relax: #005F73;
  --paper: #FFFEFA;
  --ink-soft: #435472;
  --hand-accent: #2A9D8F;
  --r: 18px; --r-sm: 12px;
  --shadow: 0 10px 30px rgba(43,67,120,0.09);
  --shadow-lg: 0 18px 46px rgba(43,67,120,0.14);
}

[data-theme="dark"] {
  --bg: #0B0F19;
  --bg2: #111827;
  --card: #162238;
  --card-hover: #1D2E4B;
  --nav-bg: rgba(17, 24, 39, 0.94);
  --border: rgba(91, 141, 238, 0.2);
  --border-focus: #7BA4FF;
  --blue: #60A5FA;
  --blue-dark: #3B82F6;
  --blue-light: rgba(96, 165, 250, 0.12);
  --blue-glow: rgba(96, 165, 250, 0.25);
  --text: #F3F4F6;
  --text-muted: #9CA3AF;
  --text-dim: #6B7280;
  --paper: #162238;
  --ink-soft: #CBD5E1;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.55);
}

/* Dark mode Leaflet tile inversion for a premium dark map theme */
[data-theme="dark"] .leaflet-tile-container {
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
[data-theme="dark"] .leaflet-container {
  background: #0B0F19 !important;
}
[data-theme="dark"] .leaflet-bar a,
[data-theme="dark"] .leaflet-bar a:hover,
[data-theme="dark"] .leaflet-control-attribution {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
[data-theme="dark"] .leaflet-control-attribution a {
  color: var(--blue) !important;
}

/* Dark mode form element overrides */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--border-focus) !important;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans JP','Outfit',sans-serif;background:radial-gradient(circle at 12% 4%,rgba(255,207,112,0.1),transparent 24%),radial-gradient(circle at 90% 12%,rgba(94,194,189,0.11),transparent 28%),repeating-linear-gradient(0deg,rgba(79,127,216,0.035) 0 1px,transparent 1px 34px),var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--blue-dark);}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:12px 28px;border-radius:999px;background:linear-gradient(135deg,var(--blue),#2a9d8f);color:#fff;font-weight:700;font-size:0.95rem;transition:all .3s;box-shadow:0 10px 24px rgba(79,127,216,0.24);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(79,127,216,0.32);}
.btn-outline{display:inline-flex;align-items:center;gap:6px;padding:12px 28px;border-radius:999px;border:1.5px dashed rgba(79,127,216,0.42);color:var(--blue);font-weight:600;font-size:0.95rem;transition:all .3s;background:rgba(255,254,250,0.86);}
.btn-outline:hover{background:var(--blue-light);transform:translateY(-2px);}
.btn-ghost{padding:12px 20px;border-radius:999px;color:var(--text-muted);font-size:0.9rem;transition:all .2s;border:1px dashed var(--border);background:rgba(255,254,250,0.72);}
.btn-ghost:hover{background:var(--bg);color:var(--text);}
.btn-post-nav{padding:9px 20px;border-radius:50px;background:var(--blue);color:#fff;font-weight:700;font-size:0.85rem;transition:all .3s;}
.btn-post-nav:hover{background:var(--blue-dark);transform:translateY(-1px);}
.btn-add-spot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1.5px dashed rgba(79,127,216,0.45);
  color: var(--blue);
  font-weight: 700;
  font-size: 0.88rem;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background: rgba(237,246,255,0.92);
  box-shadow: 0 2px 10px rgba(91,141,238,0.1);
}
.btn-add-spot:hover {
  background: #fff;
  border-color: var(--blue-dark);
  color: var(--blue-dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(91,141,238,0.22);
}
.btn-icon {
  display: inline-block;
  transition: transform 0.3s;
}
.btn-add-spot:hover .btn-icon {
  animation: btn-sparkle 0.6s ease-in-out infinite alternate;
}
@keyframes btn-sparkle {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.3) rotate(15deg); }
}
.add-spot-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.add-spot-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.btn-add-want {
  border-color: rgba(42,157,143,0.45);
  color: #2a7d74;
  background: rgba(237,250,247,0.92);
  box-shadow: 0 2px 10px rgba(42,157,143,0.1);
}
.btn-add-want:hover {
  border-color: #1f6f66;
  color: #1f6f66;
  box-shadow: 0 8px 24px rgba(42,157,143,0.22);
}
.add-spot-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  opacity: 0.8;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .add-spot-container {
    align-items: center;
    width: 100%;
  }
  .add-spot-buttons {
    justify-content: center;
    width: 100%;
  }
}
.btn-section-more{display:none;justify-content:center;}

#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(20px);border-bottom:1px solid rgba(73,128,186,0.14);transition:box-shadow .3s;}
#navbar.scrolled{box-shadow:0 8px 28px rgba(43,67,120,0.1);}
.nav-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:14px 20px;}
.nav-logo{display:flex;flex-direction:column;line-height:1.1;}
.logo-main{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:700;color:var(--blue);letter-spacing:2px;}
.logo-sub{font-size:0.62rem;color:var(--text-muted);letter-spacing:1px;}
.nav-links{display:flex;gap:4px;margin-left:auto;}
.nav-link{padding:8px 10px;border-radius:999px;color:var(--text-muted);font-size:0.84rem;transition:all .2s;white-space:nowrap;}
.nav-link:hover{color:var(--blue);background:var(--blue-light);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.hamburger{display:none;flex-direction:column;gap:5px;padding:6px;border-radius:var(--r-sm);}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
.nav-mobile{display:none;flex-direction:column;gap:4px;padding:12px 24px 16px;border-top:1px solid var(--border);background:var(--paper);}
.nav-mobile.open{display:flex;}
.nav-mobile-link{padding:12px 16px;border-radius:var(--r-sm);color:var(--text-muted);font-size:0.95rem;transition:all .2s;}
.nav-mobile-link:hover{color:var(--blue);background:var(--blue-light);}

#hero{min-height:100svh;display:flex;align-items:flex-start;justify-content:center;position:relative;overflow:clip;padding:104px 24px 56px;background:radial-gradient(circle at 20% 15%,rgba(255,207,112,0.26),transparent 24%),radial-gradient(circle at 82% 18%,rgba(94,194,189,0.2),transparent 30%),radial-gradient(circle at 50% 82%,rgba(79,127,216,0.14),transparent 34%),linear-gradient(135deg,#fffefa 0%,#f1fbff 58%,#fff4e2 100%);}
#hero::before{content:'';position:absolute;inset:-7%;z-index:0;background:radial-gradient(ellipse at center,rgba(255,254,250,0.94) 0%,rgba(255,254,250,0.88) 38%,rgba(255,254,250,0.58) 72%,rgba(255,254,250,0.44) 100%),url('assets/popopo-map-visual-20260518.png') center 46% / cover no-repeat;opacity:0.24;filter:saturate(0.96) contrast(1);pointer-events:none;}
html[lang="en"] #hero::before{background:radial-gradient(ellipse at center,rgba(255,254,250,0.94) 0%,rgba(255,254,250,0.88) 38%,rgba(255,254,250,0.58) 72%,rgba(255,254,250,0.44) 100%),url('assets/popopo-map-visual-en.jpg') center 46% / cover no-repeat;}
#hero::after{content:'';position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(79,127,216,0.055) 0 1px,transparent 1px 34px);pointer-events:none;}
.hero-orbs{position:absolute;inset:0;pointer-events:none;z-index:0;}
.hero-showcase{display:none;}
.hero-float-card{position:absolute;border-radius:24px 18px 26px 20px;background:rgba(255,254,250,0.92);border:1.5px solid rgba(79,127,216,0.15);box-shadow:0 12px 30px rgba(43,67,120,0.12);backdrop-filter:blur(8px);padding:14px 15px;color:var(--text);opacity:0;transform:rotate(var(--card-rot)) scale(var(--card-scale,1));will-change:transform,opacity;animation:heroCardFadeIn 0.9s cubic-bezier(0.2,0.8,0.2,1) forwards;}
@keyframes heroCardFadeIn{from{opacity:0;transform:rotate(var(--card-rot)) scale(0.92) translateY(15px);}to{opacity:var(--card-opacity,0.75);transform:rotate(var(--card-rot)) scale(var(--card-scale,1)) translateY(0);}}
.hero-float-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;border-radius:22px 22px 0 0;background:var(--hero-accent,#2a9d8f);opacity:0.6;}
.hero-float-card-inner{display:flex;flex-direction:column;gap:6px;animation:heroFloatDrift 8s ease-in-out infinite;animation-delay:var(--float-delay);}
.hero-float-kind{display:inline-flex;align-self:flex-start;padding:3px 10px;border-radius:999px;background:rgba(237,246,255,0.84);font-size:0.67rem;font-weight:700;letter-spacing:0;color:var(--blue);}
.hero-float-title{font-size:0.94rem;font-weight:700;line-height:1.35;color:var(--text);}
.hero-float-text{font-size:0.78rem;line-height:1.55;color:#53627f;}
.hero-float-meta{font-size:0.72rem;line-height:1.5;color:#7a86a3;}
@keyframes heroFloatDrift{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:0.3;animation:orbFloat 8s ease-in-out infinite;}
.orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,0.84),transparent);top:-100px;right:-100px;animation-delay:0s;}
.orb-2{width:350px;height:350px;background:radial-gradient(circle,#ffd6e7,transparent);bottom:-80px;left:-80px;animation-delay:-3s;}
.orb-3{width:400px;height:400px;background:radial-gradient(circle,#c2f0eb,transparent);top:30%;left:-120px;animation-delay:-1s;}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(20px,-30px) scale(1.05);}66%{transform:translate(-20px,20px) scale(0.95);}}
.hero-content{position:relative;z-index:2;text-align:center;max-width:1120px;width:min(100%,1120px);padding:0 20px;animation:fadeUp .8s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.hero-badge{display:inline-block;padding:8px 20px;border-radius:999px;background:rgba(255,255,255,0.72);border:1.5px dashed rgba(42,157,143,0.36);color:#2a7d74;font-size:0.85rem;font-weight:700;margin-bottom:20px;backdrop-filter:blur(8px);}
.hero-chat-ticker{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:min(520px,calc(100% - 24px));padding:7px 18px;margin:0 0 10px;text-decoration:none;cursor:pointer;background:rgba(255,254,250,0.86);box-shadow:0 10px 24px rgba(43,67,120,0.12);transition:border-color 0.3s, background 0.3s, transform 0.3s;position:relative;z-index:6;flex:0 0 auto;}
.hero-chat-icon{font-size:0.85rem;line-height:1;}
.hero-chat-arrow{font-size:0.8rem;opacity:0.7;line-height:1;}
.ticker-content{display:block;min-width:0;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-map-stage{position:relative;width:min(1500px,calc(100vw + 120px));margin:0 50%;transform:translateX(-50%);padding:0 0 34px;max-height:clamp(560px,76svh,840px);overflow:hidden;}
.hero-map-stage::before{content:'';position:absolute;inset:-22px -36px 4px;border-radius:42px 30px 46px 32px;background:rgba(255,254,250,0.24);backdrop-filter:blur(1px);z-index:-1;}
.hero-map-stage::after{content:'';position:absolute;left:10%;right:10%;bottom:16px;height:28px;border-radius:50%;background:rgba(43,67,120,0.1);filter:blur(22px);z-index:-1;}
.hero-gallery-band{width:100%;max-width:none;margin:0;}
.hero-gallery-marquee{overflow:hidden;padding:4px 0;cursor:grab;touch-action:pan-y;user-select:none;}
.hero-gallery-marquee.is-dragging{cursor:grabbing;}
.hero-gallery-track{display:flex;align-items:center;gap:12px;width:max-content;transform:translateX(var(--hero-gallery-offset,0px));will-change:transform;}
.hero-gallery-item{width:58px;height:58px;flex:0 0 auto;padding:0;border-radius:18px;background:rgba(255,255,255,0.74);border:1.5px solid rgba(79,127,216,0.18);box-shadow:0 8px 22px rgba(28,39,92,0.13);overflow:hidden;transition:transform .2s, box-shadow .2s, border-color .2s;position:relative;user-select:none;-webkit-user-select:none;}
.hero-gallery-item:hover{transform:translateY(-2px) scale(1.03);border-color:rgba(42,157,143,0.5);box-shadow:0 12px 26px rgba(28,39,92,0.18);}
.hero-gallery-action{text-align:center;margin-top:6px;}
.btn-gallery-all{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.85);border:1.5px dashed rgba(79,127,216,0.4);color:var(--blue);font-size:0.8rem;font-weight:700;padding:8px 20px;border-radius:999px;backdrop-filter:blur(8px);transition:all 0.2s;cursor:pointer;box-shadow:0 4px 12px rgba(43,67,120,0.05);}
.btn-gallery-all:hover{background:#fff;border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 16px rgba(43,67,120,0.1);}
.hero-gallery-action .btn-post-nav{font-size:0.75rem;padding:6px 14px;}
.hero-gallery-item.is-locked .hero-gallery-thumb{filter:blur(4px);transform:scale(1.1);}
.hero-gallery-item[data-lock-answer] .hero-gallery-thumb{filter:blur(2.5px);transform:scale(1.08);}
.hero-gallery-item[data-lock-answer]::after{content:'🔒';position:absolute;right:4px;bottom:4px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.88);font-size:0.62rem;box-shadow:0 4px 10px rgba(30,40,69,0.18);}
.hero-gallery-thumb{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.hero-gallery-thumb.is-document-thumb{object-position:50% 18%;}
.hero-label{display:block;font-size:0.9rem;font-weight:700;color:var(--blue);letter-spacing:1px;margin-bottom:8px;text-transform:uppercase;}
.hero-title{font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:clamp(2.6rem,6.2vw,4.35rem);font-weight:400;line-height:1.2;margin-bottom:10px;color:#1f2a45;letter-spacing:0;text-shadow:none;}
.hero-accent{color:#2a7d74;}
.hero-sub{color:#53627f;font-size:1.05rem;margin-bottom:16px;line-height:1.6;}
.hero-map-visual{position:relative;width:100%;height:clamp(420px,72svh,820px);margin:0 auto;padding:0;border-radius:34px 24px 38px 26px;background:transparent;border:0;box-shadow:none;overflow:hidden;}
.hero-image-box{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:inherit;display:flex;align-items:center;justify-content:center;}
.hero-map-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;border-radius:inherit;filter:saturate(1.04) contrast(1.01);box-shadow:0 16px 48px rgba(43,67,120,0.1);}
.hero-map-overlay{position:absolute;left:18px;right:18px;z-index:3;pointer-events:none;}
.hero-map-overlay > *{pointer-events:auto;}
.hero-map-overlay--top{top:10px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.hero-map-overlay--bottom{bottom:46px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.hero-story-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,0.82);border:1.5px dashed rgba(42,157,143,0.36);color:#2a7d74;font-size:0.86rem;font-weight:700;backdrop-filter:blur(8px);transition:all .25s;box-shadow:0 8px 20px rgba(43,67,120,0.08);}
.hero-story-link:hover{color:#2a7d74;background:rgba(255,255,255,0.9);transform:translateY(-1px);}
.hero-quick-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:0;}
.hero-quick-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 14px;border-radius:999px;border:1.5px solid rgba(79,127,216,0.16);background:rgba(255,255,255,0.72);color:#42516e;font-size:0.8rem;font-weight:700;text-decoration:none;backdrop-filter:blur(10px);box-shadow:0 8px 18px rgba(43,67,120,0.08);transition:all .22s ease;}
.hero-quick-link:hover{border-color:rgba(42,157,143,0.36);background:rgba(255,255,255,0.86);color:#2a7d74;transform:translateY(-1px);}
button.hero-quick-link{cursor:pointer;font-family:inherit;}
.hero-gacha-label--compact{display:none;}
.hero-quick-link--gacha{border-color:rgba(200,182,150,0.42);background:linear-gradient(165deg,rgba(255,252,246,0.95),rgba(255,255,255,0.72));color:#5c5346;}
.hero-quick-link--gacha:hover{border-color:rgba(168,148,120,0.55);color:#3d3830;}
.hero-quick-link--game{border-color:rgba(91,141,238,0.22);background:rgba(255,255,255,0.72);color:#4f7fd8;}
.hero-quick-link--game:hover{border-color:rgba(91,141,238,0.45);color:#2b5db3;background:rgba(255,255,255,0.86);}
.gacha-modal .modal-box{overflow:hidden;}
.gacha-modal-box{position:relative;transition:border-color .5s ease,box-shadow .5s ease;}
.gacha-modal-lead{font-size:0.86rem;color:var(--text-muted);line-height:1.75;margin:-6px auto 18px;padding:0 12px;max-width:36em;}
.gacha-body{min-height:196px;padding:0 20px 24px;}
.gacha-phase{text-align:center;transition:opacity .35s ease;}
.gacha-orbit{font-size:2.85rem;line-height:1;margin:6px 0 12px;animation:gacha-orbit-bob 3.2s ease-in-out infinite;opacity:0.92;}
@keyframes gacha-orbit-bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-4px) rotate(2deg);}}
.gacha-spin-main{min-width:200px;font-weight:700;letter-spacing:0.02em;}
.gacha-spinner-display{font-size:1.08rem;font-weight:700;color:#4a5f8a;min-height:2.75em;display:flex;align-items:center;justify-content:center;padding:14px 16px;border-radius:22px;background:linear-gradient(180deg,rgba(246,249,255,0.98),rgba(237,246,255,0.92));border:1px solid rgba(79,127,216,0.14);box-shadow:inset 0 1px 0 rgba(255,255,255,0.75);}
.gacha-spin-hint{font-size:0.8rem;color:var(--text-muted);margin-top:14px;line-height:1.55;}
.gacha-result-badge{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;padding:0 8px;}
.gacha-badge-title{font-size:1.28rem;font-weight:700;color:var(--text);font-family:'Yomogi','Noto Sans JP',sans-serif;line-height:1.35;letter-spacing:0.01em;}
.gacha-badge-sub{font-size:0.84rem;color:var(--text-muted);font-weight:500;line-height:1.55;max-width:28em;}
.gacha-result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:14px;text-align:left;}
.gacha-result-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;padding:14px 15px;border-radius:18px 14px 20px 16px;border:1px solid rgba(79,127,216,0.14);background:rgba(255,254,250,0.97);cursor:pointer;font-family:inherit;text-align:left;transition:transform .2s cubic-bezier(0.22,1,0.36,1),box-shadow .2s ease,border-color .2s ease;opacity:0;transform:translateY(10px);animation:gacha-card-rise .5s cubic-bezier(0.22,1,0.36,1) forwards;}
.gacha-result-card:hover,.gacha-result-card:focus-visible{border-color:rgba(91,141,238,0.45);box-shadow:0 10px 26px rgba(91,141,238,0.1);transform:translateY(-2px);}
.gacha-result-card:focus-visible{outline:2px solid rgba(91,141,238,0.55);outline-offset:2px;}
.gacha-result-src{font-size:0.66rem;font-weight:800;color:var(--blue);letter-spacing:0.02em;}
.gacha-result-title{font-size:0.9rem;font-weight:700;color:var(--text);line-height:1.4;}
.gacha-result-text{font-size:0.77rem;color:var(--text-muted);line-height:1.55;}
.gacha-result-foot{font-size:0.78rem;color:var(--text-muted);line-height:1.55;margin:0 0 16px;padding:0 6px;}
.gacha-again-btn{margin-top:2px;}
.gacha-modal-box.is-jackpot{border-color:rgba(200,170,120,0.45);animation:gacha-warm-settle 1.05s ease-out forwards;}
.gacha-modal-box.is-jackpot::before{content:'';pointer-events:none;position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,transparent 0%,rgba(255,241,210,0.22) 42%,rgba(255,255,255,0.4) 50%,rgba(255,241,210,0.22) 58%,transparent 100%);background-size:200% 100%;animation:gacha-warm-sheen 2.4s ease-in-out 2;opacity:0.75;}
@keyframes gacha-warm-settle{
  0%{box-shadow:0 12px 28px rgba(43,67,120,0.08);border-color:rgba(79,127,216,0.12);}
  45%{box-shadow:0 14px 36px rgba(190,155,95,0.14),0 0 0 1px rgba(255,228,180,0.35);border-color:rgba(210,175,120,0.5);}
  100%{box-shadow:0 12px 30px rgba(43,67,120,0.1),0 0 0 1px rgba(255,224,170,0.22);border-color:rgba(195,165,110,0.38);}
}
@keyframes gacha-warm-sheen{0%{background-position:120% 0;opacity:0.5;}100%{background-position:-120% 0;opacity:0.65;}}
@keyframes gacha-card-rise{to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .gacha-orbit{animation:none;}
  .gacha-modal-box.is-jackpot{animation:none;box-shadow:0 12px 28px rgba(43,67,120,0.08),0 0 0 1px rgba(255,224,170,0.2);border-color:rgba(195,165,110,0.35);}
  .gacha-modal-box.is-jackpot::before{animation:none;opacity:0.28;}
  .gacha-result-card{animation:none;opacity:1;transform:none;}
}
.hero-stats{display:inline-flex;align-items:center;background:rgba(255,254,250,0.86);border:1.5px solid rgba(79,127,216,0.16);border-radius:999px;padding:8px 18px;margin:0 0 16px;backdrop-filter:blur(12px);box-shadow:0 10px 26px rgba(43,67,120,0.1);position:relative;z-index:5;}
.stat{text-align:center;padding:0 18px;min-width:74px;}
a.stat{text-decoration:none;color:inherit;transition:transform 0.2s, opacity 0.2s;}
a.stat:hover{transform:translateY(-2px);opacity:0.8;}
.stat-num{display:block;font-family:'Outfit',sans-serif;font-size:1.45rem;font-weight:700;color:var(--blue);line-height:1.05;}
.stat-num.is-loading{font-family:'Noto Sans JP',sans-serif;font-size:0.85rem;line-height:1.8;white-space:nowrap;}
.stat-label{display:block;font-size:0.7rem;color:var(--text-muted);line-height:1.25;}
.stat-divider{width:1px;height:28px;background:rgba(79,127,216,0.16);}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.hero-btns .btn-primary{background:linear-gradient(135deg,var(--blue),#2a9d8f);color:#fff;}
.hero-btns .btn-primary:hover{background:linear-gradient(135deg,var(--blue-dark),#258f82);}
.hero-btns .btn-outline{padding:9px 20px;border-color:rgba(79,127,216,0.26);color:#53627f;background:rgba(255,255,255,0.52);font-size:0.86rem;box-shadow:0 8px 18px rgba(43,67,120,0.05);}
.hero-btns .btn-outline:hover{background:rgba(237,246,255,0.92);}
.scroll-hint{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--blue);font-size:0.75rem;font-weight:700;letter-spacing:2px;animation:bounce 2s ease-in-out infinite;background:rgba(255,254,250,0.8);padding:10px 24px;border-radius:999px;backdrop-filter:blur(12px);z-index:900;box-shadow:0 8px 24px rgba(43,67,120,0.14);transition:opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;}
.scroll-hint.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(20px);}
.scroll-line{width:2px;height:16px;background:linear-gradient(to bottom,var(--blue),transparent);border-radius:2px;}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}

section{padding:80px 0;scroll-margin-top:120px;}
.nav-discovery{border-top:1px solid rgba(79,127,216,0.1);background:rgba(255,254,250,0.9);box-shadow:0 8px 18px rgba(43,67,120,0.06);}
.nav-discovery-row{max-width:1200px;margin:0 auto;display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:4px 8px 4px 12px;}
.nav-discovery-link{flex:1 1 260px;min-width:0;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text);font-size:0.78rem;line-height:1.45;}
.nav-gacha-btn{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(190,170,140,0.35);background:linear-gradient(165deg,#fffdf8,#faf8f4);color:#5a5348;font-size:0.7rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:0 4px 12px rgba(43,67,120,0.06);transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;}
.nav-gacha-btn:hover{border-color:rgba(160,140,115,0.45);background:#fff;box-shadow:0 6px 16px rgba(43,67,120,0.08);transform:translateY(-1px);}
.nav-gacha-btn-label--compact{display:none;}
.nav-gacha-btn:active{transform:scale(0.96);}
.nav-discovery-link span{transition:opacity .28s ease,transform .28s ease;}
.nav-discovery-link.is-switching span{opacity:0;transform:translateY(3px);}
.nav-discovery-category{flex:0 0 auto;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,0.82);color:var(--blue);font-weight:800;border:1px solid rgba(79,127,216,0.18);box-shadow:0 4px 12px rgba(43,67,120,0.05);}
.nav-discovery-title{flex:0 1 auto;font-weight:800;min-width:0;max-width:24em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-discovery-text{color:var(--text-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(prefers-reduced-motion:reduce){
  .nav-discovery-link span{transition:none;}
  .nav-discovery-link.is-switching span{opacity:1;transform:none;}
}
#visited,#community{background:linear-gradient(180deg,rgba(248,251,248,0.88),rgba(241,249,255,0.78));}
#spots{background:rgba(255,254,250,0.78);}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.sec-header{text-align:center;margin-bottom:48px;}
.sec-title{font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:clamp(1.8rem,4.2vw,2.55rem);font-weight:400;margin-bottom:10px;color:var(--text);line-height:1.45;}
.sec-title::after{content:'';display:block;width:7em;max-width:72%;height:8px;margin:4px auto 0;background:linear-gradient(90deg,rgba(255,183,77,0.38),rgba(42,157,143,0.22),transparent);border-radius:999px;transform:rotate(-1deg);}
.sec-header-row .sec-title::after{margin-left:0;margin-right:0;}
.sec-sub{color:var(--text-muted);font-size:1rem;}
.sec-header-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:48px;}
.sec-header-row .sec-header{text-align:left;margin-bottom:0;}
.tabs-outer-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
  padding: 0 4px;
}
.tabs-inner-container {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 30px;
}
.tabs-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(79, 127, 216, 0.22);
  color: var(--blue);
  box-shadow: 0 4px 12px rgba(43, 67, 120, 0.08);
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  flex-shrink: 0;
}
.tabs-scroll-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 6px 16px rgba(91, 141, 238, 0.25);
}
.tabs-scroll-btn:active {
  transform: translateY(0) scale(0.96);
}
.tabs-scroll-btn--left {
  margin-right: 8px;
}
.tabs-scroll-btn--right {
  margin-left: 8px;
}
.tabs-fade-left, .tabs-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tabs-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(255, 254, 250, 0.96) 20%, transparent);
}
.tabs-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(255, 254, 250, 0.96) 20%, transparent);
}
.tabs-outer-wrapper.has-overflow-left .tabs-fade-left {
  opacity: 1;
}
.tabs-outer-wrapper.has-overflow-right .tabs-fade-right {
  opacity: 1;
}
@media (min-width: 769px) {
  .tabs-outer-wrapper.has-overflow-left:hover .tabs-scroll-btn--left,
  .tabs-outer-wrapper.has-overflow-left .tabs-scroll-btn--left:focus-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
  .tabs-outer-wrapper.has-overflow-right:hover .tabs-scroll-btn--right,
  .tabs-outer-wrapper.has-overflow-right .tabs-scroll-btn--right:focus-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }
}
@media (max-width: 768px) {
  .tabs-outer-wrapper {
    margin-bottom: 28px;
  }
  .tabs-scroll-btn {
    display: none !important;
  }
  .tabs-fade-left, .tabs-fade-right {
    width: 32px;
  }
}

.tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0;}
.tabs::-webkit-scrollbar{display:none;}
.tab{flex:0 0 auto;padding:10px 20px;border-radius:999px;border:1.5px dashed var(--border);color:var(--text-muted);font-size:0.88rem;font-weight:600;transition:all .25s;background:rgba(255,254,250,0.9);cursor:pointer;}
.tab:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}
.tab.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700;box-shadow:0 4px 16px rgba(91,141,238,0.3);}
.area-filter{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;margin:-22px auto 30px;max-width:900px;}
.area-filter[hidden]{display:none;}
.area-filter-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;}
.area-filter-row-sub{max-width:760px;padding:8px 10px;border-radius:22px;background:rgba(255,255,255,0.58);border:1px dashed rgba(79,127,216,0.14);}
.area-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:7px 14px;border-radius:999px;border:1.5px dashed rgba(42,157,143,0.24);background:rgba(255,254,250,0.88);color:#53627f;font-size:0.78rem;font-weight:700;transition:all .2s;box-shadow:0 6px 14px rgba(43,67,120,0.04);}
.area-chip span{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;height:1.5em;padding:0 5px;border-radius:999px;background:rgba(79,127,216,0.1);color:var(--blue);font-size:0.7rem;}
.area-chip:hover,.area-chip.active{border-color:rgba(42,157,143,0.5);background:var(--blue-light);color:var(--blue);}
.area-chip-main{min-height:38px;padding:8px 16px;background:rgba(255,254,250,0.94);font-size:0.82rem;}
.area-chip-sub{min-height:30px;padding:5px 11px;font-size:0.74rem;background:rgba(255,254,250,0.74);box-shadow:none;}
.spot-list-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:-20px 0 30px;}
.want-list-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:9px 18px;border-radius:999px;border:1.5px dashed rgba(79,127,216,0.34);background:rgba(255,254,250,0.9);color:var(--blue);font-size:0.86rem;font-weight:700;box-shadow:0 8px 18px rgba(43,67,120,0.08);transition:all .2s;}
.want-list-toggle:hover,.want-list-toggle.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 22px rgba(91,141,238,0.22);}
.barrier-free-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:9px 18px;border-radius:999px;border:1.5px dashed rgba(123,31,162,0.34);background:rgba(255,254,250,0.9);color:#7b1fa2;font-size:0.86rem;font-weight:700;box-shadow:0 8px 18px rgba(43,67,120,0.08);transition:all .2s;}
.barrier-free-toggle:hover,.barrier-free-toggle.active{background:#7b1fa2;border-color:#7b1fa2;color:#fff;box-shadow:0 10px 22px rgba(123,31,162,0.22);}
.want-add-btn{border-color:rgba(42,157,143,0.34);color:#2a7d74;}
.want-add-btn:hover{background:rgba(42,157,143,0.1);border-color:rgba(42,157,143,0.5);color:#2a7d74;}
.want-list-hint{max-width:760px;margin:-12px auto 28px;padding:14px 16px;border-radius:24px 18px 26px 20px;background:rgba(237,246,255,0.82);border:1.5px dashed rgba(79,127,216,0.2);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 8px 18px rgba(43,67,120,0.08);}
.want-list-hint[hidden]{display:none;}
.want-list-hint span{font-size:0.9rem;font-weight:700;line-height:1.6;}

.spots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.spot-card{background:rgba(255,254,250,0.9);border:1.5px solid var(--border);border-radius:26px 20px 28px 22px;padding:24px;transition:all .3s;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.spot-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:var(--r) var(--r) 0 0;}
.spot-card[data-cat="food"]::before{background:var(--cat-food);}
.spot-card[data-cat="mohinga"]::before{background:var(--cat-mohinga);}
.spot-card[data-cat="museum"]::before{background:var(--cat-museum);}
.spot-card[data-cat="event"]::before{background:var(--cat-event);}
.spot-card[data-cat="nature"]::before{background:var(--cat-nature);}
.spot-card[data-cat="book"]::before{background:var(--cat-book);}
.spot-card[data-cat="shop"]::before{background:var(--cat-shop);}
.spot-card[data-cat="view"]::before{background:var(--cat-view);}
.spot-card[data-cat="relax"]::before{background:var(--cat-relax);}
.spot-card[data-cat="entertainment"]::before{background:var(--cat-entertainment);}
.spot-card[data-cat="suggest"]::before{background:linear-gradient(90deg,var(--blue),#a78bfa);}
.spot-card:hover{border-color:rgba(42,157,143,0.42);background:var(--card-hover);transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.spot-card.is-discovery-target{border-color:var(--blue);background:var(--card-hover);transform:translateY(-4px);box-shadow:0 0 0 4px rgba(91,141,238,0.16),var(--shadow-lg);}
.spot-card.is-discovery-target::after{content:'今日の発見';position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:999px;background:var(--blue);color:#fff;font-size:0.72rem;font-weight:800;box-shadow:0 8px 18px rgba(91,141,238,0.22);}
.spot-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap;row-gap:8px;}
.spot-card-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-shrink:0;}
.spot-card-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.spot-intent-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(42,157,143,0.1);color:#2a7d74;font-size:0.74rem;font-weight:800;border:1px dashed rgba(42,157,143,0.28);white-space:nowrap;}
.spot-emoji{font-size:1.8rem;line-height:1;}
.spot-like-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;border:1.5px dashed var(--border);color:var(--text-muted);font-size:0.8rem;font-weight:700;transition:all .2s;background:rgba(255,255,255,0.86);white-space:nowrap;}
.spot-like-btn:hover,.spot-like-btn.liked{border-color:rgba(91,141,238,0.52);color:var(--blue);background:var(--blue-light);}
.spot-like-icon{font-size:0.88rem;}
.spot-like-count{min-width:1.2em;text-align:center;}
.spot-share-btn{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;border:1.5px dashed rgba(42,157,143,0.28);color:#2a7d74;font-size:0.8rem;font-weight:700;transition:all .2s;background:rgba(255,255,255,0.86);white-space:nowrap;}
.spot-share-btn:hover{border-color:rgba(42,157,143,0.5);background:rgba(42,157,143,0.1);transform:translateY(-1px);}
.spot-share-icon{font-size:0.95rem;line-height:1;}
.spot-name{font-weight:700;font-size:1.1rem;margin-bottom:4px;color:var(--text);}
.spot-preview-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);margin-bottom:14px;border:1px solid var(--border);background:var(--blue-light);}
.resource-preview-button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:transparent;border-radius:var(--r-sm);cursor:zoom-in;text-align:inherit;transition:transform .2s ease, filter .2s ease;}
.resource-preview-button:hover{transform:translateY(-1px);filter:saturate(1.04);}
.resource-preview-button .spot-preview-img{display:block;margin-bottom:0;}
.spot-area{font-size:0.82rem;color:var(--text-muted);margin-bottom:10px;}
.spot-area span{background:var(--blue-light);color:var(--blue);padding:3px 10px;border-radius:999px;font-weight:600;}

.spot-card-weather {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
  background: var(--bg-notebook-paper, #fdfbfa);
  border: 1px dashed var(--border, #d1c7bd);
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.spot-card-weather:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.spot-card-weather:empty {
  display: none !important;
}
.spot-memo{font-size:0.85rem;color:var(--text-muted);margin-bottom:14px;line-height:1.6;}
.spot-resources{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.spot-latest-review{width:100%;display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 12px;border-radius:16px 14px 18px 14px;border:1.5px dashed rgba(42,157,143,0.24);background:rgba(248,251,248,0.82);color:var(--text);text-align:left;transition:all .2s ease;box-shadow:0 6px 14px rgba(43,67,120,0.04);}
.spot-latest-review span{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:rgba(42,157,143,0.1);color:#2a7d74;font-size:0.72rem;font-weight:800;}
.spot-latest-review strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.82rem;font-weight:700;color:#42516e;}
.spot-latest-review:hover{border-color:rgba(42,157,143,0.46);background:#fff;transform:translateY(-1px);}
.spot-footer{display:flex;gap:8px;flex-wrap:wrap;}
.spot-link{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:999px;border:1.5px dashed var(--border);color:var(--text-muted);font-size:0.8rem;transition:all .2s;background:#fff;}
button.spot-link{font-family:inherit;cursor:zoom-in;}
.spot-link:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}
.spot-reviews-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:999px;border:1.5px dashed var(--border);color:var(--text-muted);font-size:0.8rem;font-weight:600;transition:all .2s;background:#fff;}
.spot-reviews-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light);}
.spot-post-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:999px;border:1.5px dashed var(--blue);color:var(--blue);font-size:0.8rem;font-weight:600;transition:all .2s;background:#fff;}
.spot-post-btn:hover{background:var(--blue-light);}
.spots-empty-card{grid-column:1/-1;padding:30px 22px;border-radius:var(--r);border:1.5px dashed var(--border);background:#fff;text-align:center;color:var(--text-muted);box-shadow:var(--shadow);line-height:1.7;}
.spots-empty-card strong{display:block;margin-bottom:6px;color:var(--text);font-size:1rem;}
.suggest-badge{display:inline-block;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,var(--blue-light),#f4fbf4);color:var(--blue);font-size:0.72rem;font-weight:700;border:1px dashed var(--border);white-space:nowrap;}

.visited-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px;}
.visited-card{background:rgba(255,254,250,0.92);border:1.5px solid var(--border);border-radius:26px 20px 28px 22px;overflow:hidden;transition:all .3s;box-shadow:var(--shadow);}
.visited-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(42,157,143,0.42);}
.visited-card-body{padding:24px;}
.visited-category-badge{display:inline-block;padding:4px 12px;border-radius:50px;font-size:0.75rem;font-weight:600;margin-bottom:12px;white-space:nowrap;}
.visited-category-badge.food{background:#fff3ee;color:var(--cat-food);}
.visited-category-badge.museum{background:#f5f0ff;color:var(--cat-museum);}
.visited-name{font-size:1.25rem;font-weight:700;margin-bottom:4px;color:var(--text);}
.visited-area{font-size:0.85rem;color:var(--text-muted);margin-bottom:12px;}
.visited-rating{color:#f59e0b;font-size:1.1rem;margin-bottom:12px;}
.visited-review{font-size:0.9rem;color:var(--text-muted);line-height:1.7;padding:14px;background:rgba(237,246,255,0.8);border-radius:18px 14px 20px 15px;border-left:3px solid var(--hand-accent);margin-bottom:16px;}
.visited-photos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.visited-photo-link{padding:6px 14px;border-radius:999px;background:var(--blue-light);border:1.5px dashed var(--border);color:var(--blue);font-size:0.8rem;font-weight:600;transition:all .2s;}
button.visited-photo-link{font-family:inherit;cursor:zoom-in;}
.visited-photo-link:hover{background:#dbeafe;}
.review-reactions{display:flex;justify-content:flex-end;margin-top:14px;}
.review-seen-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1.5px dashed rgba(79,127,216,0.28);background:#fff;color:var(--text-muted);font-size:0.78rem;font-weight:700;transition:all .2s;box-shadow:0 5px 14px rgba(43,67,120,0.08);}
.review-seen-btn:hover{transform:translateY(-1px);border-color:rgba(91,141,238,0.5);color:var(--blue);box-shadow:0 8px 18px rgba(91,141,238,0.16);}
.review-seen-btn.is-seen{background:var(--blue-light);color:var(--blue);border-color:rgba(91,141,238,0.38);}
.review-seen-icon{font-size:0.9rem;}
.review-seen-count{min-width:1.2em;text-align:center;}
.visited-book{padding:12px 14px;border-radius:var(--r-sm);background:#f5f0ff;border:1px solid #e9d5ff;color:#7c3aed;font-size:0.82rem;line-height:1.6;}
.visited-book a{color:#7c3aed;}
.section-actions{display:flex;justify-content:center;margin-top:28px;}

.community-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.daily-prompt-card{max-width:800px;margin:0 auto 22px;padding:18px 20px;border-radius:28px 22px 30px 20px;background:linear-gradient(135deg,rgba(255,255,255,0.9),rgba(245,251,247,0.9));border:1.5px dashed rgba(42,157,143,0.24);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:18px;}
.daily-prompt-kicker{display:inline-flex;padding:4px 10px;border-radius:999px;background:rgba(237,246,255,0.9);color:#2a7d74;font-size:0.75rem;font-weight:800;margin-bottom:8px;}
.daily-prompt-text{color:var(--text);font-weight:800;line-height:1.65;}
.firebase-notice{padding:12px 20px;border-radius:var(--r-sm);background:#fffbeb;border:1px solid #fcd34d;color:#92400e;font-size:0.85rem;margin-bottom:24px;}
.firebase-notice a{color:var(--blue);}
.filter-bar{display:flex;gap:20px;flex-wrap:wrap;padding:16px 20px;border-radius:24px 18px 26px 20px;background:rgba(255,254,250,0.9);border:1.5px solid var(--border);margin-bottom:32px;box-shadow:var(--shadow);}
.filter-group{display:flex;align-items:center;gap:10px;}
.filter-group label{font-size:0.85rem;color:var(--text-muted);white-space:nowrap;}
.filter-select{padding:8px 14px;border-radius:var(--r-sm);background:#fff;border:1.5px solid var(--border);color:var(--text);font-size:0.88rem;cursor:pointer;transition:border .2s;}
.filter-select:focus{outline:none;border-color:var(--blue);}

.chats-grid { display:flex; flex-direction:column; gap:16px; max-width:800px; margin:0 auto; }
.chat-card { background:rgba(255,254,250,0.92); border:1.5px solid var(--border); border-radius:26px 20px 28px 22px; padding:20px; box-shadow:0 8px 24px rgba(43,67,120,0.07); animation:fadeUp .4s ease both; display:flex; gap:16px; transition:all 0.3s; }
.chat-card:hover { border-color:rgba(42,157,143,0.42); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.chat-avatar { width:44px; height:44px; border-radius:48% 52% 45% 55% / 50% 44% 56% 50%; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; font-weight:700; border:1px dashed rgba(79,127,216,0.26); }
.chat-content { flex:1; min-width:0; }
.chat-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:8px; }
.chat-nick { font-weight:700; font-size:0.95rem; color:var(--text); }
.chat-date { font-size:0.75rem; color:var(--text-dim); }
.chat-msg { font-size:0.92rem; color:var(--text-muted); line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.chat-reactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.chat-reaction-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1.5px dashed rgba(79,127,216,0.28);background:#fff;color:var(--text-muted);font-size:0.78rem;font-weight:700;transition:all .2s;box-shadow:0 5px 14px rgba(43,67,120,0.08);}
.chat-reaction-btn:hover{transform:translateY(-1px);border-color:rgba(91,141,238,0.5);color:var(--blue);box-shadow:0 8px 18px rgba(91,141,238,0.16);}
.chat-reaction-btn.is-reacted{background:var(--blue-light);color:var(--blue);border-color:rgba(91,141,238,0.38);}
.chat-reaction-count{min-width:1.2em;text-align:center;}
/* 返信機能用スタイル（会話が追いやすいツリー形式） */
.chat-thread{
  margin-bottom:22px;
  padding:12px;
  border-radius:28px 22px 30px 24px;
  border:1.5px solid rgba(79,127,216,0.08);
  background:linear-gradient(180deg,rgba(255,255,255,0.52),rgba(255,255,255,0.28));
}
.chat-branch{position:relative;}
.chat-replies{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:12px 0 2px 22px;
  padding:10px 0 0 22px;
  border-left:2px solid rgba(42,157,143,0.22);
}
.chat-replies-label{
  align-self:flex-start;
  margin:0 0 2px -10px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.86);
  border:1px dashed rgba(42,157,143,0.24);
  color:var(--text-dim);
  font-size:0.72rem;
  font-weight:700;
}
.chat-card.is-reply{
  position:relative;
  padding:14px 16px;
  border-radius:18px 14px 20px 16px;
  background:rgba(255,255,255,0.96);
  box-shadow:0 5px 16px rgba(43,67,120,0.05);
  border:1.5px solid rgba(42,157,143,0.14);
}
.chat-card.is-reply::before{
  content:"";
  position:absolute;
  left:-24px;
  top:24px;
  width:24px;
  height:2px;
  background:rgba(42,157,143,0.22);
}
.chat-card.is-reply .chat-avatar{
  width:34px;
  height:34px;
  font-size:0.9rem;
  background:#eefbf8;
  color:#2a9d8f;
}
.chat-reply-context{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  margin:0 0 8px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(91,141,238,0.1);
  color:var(--blue);
  font-size:0.74rem;
  font-weight:700;
}
.chat-reply-info{margin-bottom:12px;padding:10px 14px;background:var(--blue-light);border-radius:12px;font-size:0.88rem;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(91,141,238,0.2);}
.chat-reply-info strong{color:var(--blue);}
.chat-reply-clear{background:rgba(255,255,255,0.6);border:none;color:var(--blue);width:24px;height:24px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.8rem;}
.chat-reply-clear:hover{background:#fff;}
.btn-reply{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;border:1.5px solid rgba(79,127,216,0.12);background:#fff;color:var(--text-muted);font-size:0.75rem;font-weight:700;transition:all .2s;cursor:pointer;}
.btn-reply:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px);}
@media (max-width: 560px){
  .chat-thread{padding:8px;border-radius:22px 18px 24px 20px;}
  .chat-replies{margin-left:12px;padding-left:16px;}
  .chat-card.is-reply{padding:13px 14px;}
  .chat-card.is-reply::before{left:-18px;width:18px;}
}

.story-kicker{display:inline-flex;align-self:flex-start;padding:5px 12px;border-radius:999px;background:var(--blue-light);color:var(--blue);font-size:0.78rem;font-weight:700;}
.about-page{background:radial-gradient(circle at 14% 16%,rgba(94,194,189,0.14),transparent 30%),radial-gradient(circle at 86% 8%,rgba(238,155,0,0.13),transparent 28%),linear-gradient(180deg,#fffefa 0%,#f7fbff 48%,#fffaf0 100%);}
.about-hero{padding:132px 24px 64px;text-align:center;}
.about-hero-luxury{min-height:auto;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:84px 24px 16px;background:radial-gradient(circle at 22% 18%,rgba(255,207,112,0.24),transparent 24%),radial-gradient(circle at 78% 22%,rgba(94,194,189,0.17),transparent 28%),linear-gradient(135deg,#fffefa 0%,#f3fbff 56%,#fff6e8 100%);color:var(--text);}
.about-hero-luxury::before{content:'';position:absolute;inset:-8%;z-index:0;background:radial-gradient(ellipse at center,rgba(255,254,250,0.92) 0%,rgba(255,254,250,0.82) 36%,rgba(255,254,250,0.48) 68%,rgba(255,254,250,0.34) 100%),url('assets/popopo-map-visual-20260518.png') center 48% / cover no-repeat;opacity:0.38;filter:saturate(0.92) contrast(0.98);pointer-events:none;}
html[lang="en"] .about-hero-luxury::before{background:radial-gradient(ellipse at center,rgba(255,254,250,0.92) 0%,rgba(255,254,250,0.82) 36%,rgba(255,254,250,0.48) 68%,rgba(255,254,250,0.34) 100%),url('assets/popopo-map-visual-en.png') center 48% / cover no-repeat;}
.about-hero-luxury::after{content:'';position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(0deg,rgba(91,141,238,0.075) 0 1px,transparent 1px 34px);pointer-events:none;}
.about-hero-inner{position:relative;z-index:1;max-width:920px;margin:0 auto;}
.about-luxury-label{display:inline-flex;align-items:center;justify-content:center;padding:6px 16px;border-radius:52% 48% 46% 54% / 50% 54% 46% 50%;border:1.5px dashed rgba(42,157,143,0.5);background:rgba(255,255,255,0.68);color:#2a7d74;font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:0.94rem;font-weight:400;letter-spacing:0.12em;margin-bottom:16px;transform:rotate(-2deg);}
.about-luxury-title{position:relative;max-width:1180px;margin:0 auto 16px;color:#1f2a45;font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:clamp(2.35rem,5.1vw,4.7rem);font-weight:400;line-height:1.2;letter-spacing:0;}
.about-luxury-title::after{content:'';display:block;width:min(460px,64vw);height:12px;margin:14px auto 0;background:linear-gradient(90deg,transparent,rgba(255,183,77,0.42),rgba(91,141,238,0.25),transparent);border-radius:999px;transform:rotate(-1deg);}
.about-luxury-title,.about-chapter-copy h2{text-wrap:balance;}
.about-title-mobile-break{display:block;}
.about-luxury-lead{max-width:780px;margin:0 auto;padding:16px 24px;border:1px solid rgba(91,141,238,0.16);border-radius:28px 22px 30px 24px;background:rgba(255,255,255,0.72);box-shadow:0 18px 48px rgba(43,67,120,0.1);color:#465676;font-size:clamp(0.95rem,1.7vw,1.12rem);line-height:1.7;}
.about-story-section{position:relative;overflow:hidden;padding:92px 0 104px;background:linear-gradient(180deg,rgba(255,255,255,0.68),rgba(245,251,255,0.8));}
.about-story-section::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 32px,rgba(91,141,238,0.055) 32px 33px);pointer-events:none;}
.about-story-heading{position:relative;z-index:1;text-align:center;margin:0 auto 52px;max-width:760px;}
.about-story-eyebrow{display:block;font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:1rem;font-weight:400;color:#2a9d8f;letter-spacing:0.12em;margin-bottom:12px;transform:rotate(-1deg);}
.about-story-heading p{color:#53627f;font-size:1.05rem;line-height:1.9;}
.about-story-card{position:relative;z-index:1;}
.about-story-card.about-story-editorial{display:block;max-width:880px;margin:0 auto;padding:0 20px;border:0;border-radius:0;background:transparent;box-shadow:none;}
.about-story-chapter{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr);gap:28px;margin-bottom:34px;padding:32px 36px 36px;border:1.5px solid rgba(91,141,238,0.2);border-radius:30px 22px 34px 24px;background:rgba(255,255,255,0.82);box-shadow:0 18px 46px rgba(43,67,120,0.09);transform:rotate(0.35deg);}
.about-story-chapter:nth-child(even){background:rgba(255,252,244,0.86);border-color:rgba(42,157,143,0.22);transform:rotate(-0.45deg);}
.about-story-chapter::before{content:'';position:absolute;top:28px;bottom:28px;left:122px;border-left:1px dashed rgba(91,141,238,0.22);}
.about-story-chapter:last-child{margin-bottom:0;border-bottom:1.5px solid rgba(42,157,143,0.22);}
.about-chapter-number{align-self:start;display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;margin-top:4px;border-radius:52% 48% 42% 58% / 44% 56% 44% 56%;background:rgba(235,242,255,0.9);border:1.5px solid rgba(91,141,238,0.28);color:var(--blue);font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:1.25rem;font-weight:400;letter-spacing:0;}
.about-chapter-copy h2{position:relative;margin:0 0 18px;color:#1e2845;font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:clamp(1.55rem,3.2vw,2.3rem);font-weight:400;line-height:1.45;letter-spacing:0;}
.about-chapter-copy h2::after{content:'';display:block;width:9.5em;max-width:100%;height:8px;margin-top:4px;background:linear-gradient(90deg,rgba(255,183,77,0.42),rgba(42,157,143,0.22),transparent);border-radius:999px;transform:rotate(-1.2deg);}
.about-chapter-copy p{margin:0;color:#3f4e6f;font-size:1rem;line-height:2.05;}
.about-chapter-copy p + p{margin-top:18px;color:#7a86a3;font-family:'Outfit','Noto Sans JP',sans-serif;font-size:0.92rem;line-height:1.9;}
.about-story-finale{padding-bottom:0;}
.about-story-closing{color:#2a7d74 !important;font-weight:400;}
.about-story-closing-luxury{max-width:820px;margin:54px auto 0;padding:24px 28px;border:1.5px dashed rgba(42,157,143,0.34);border-radius:28px 24px 30px 22px;background:rgba(255,255,255,0.76);box-shadow:0 14px 40px rgba(43,67,120,0.08);text-align:center;font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:1.16rem;line-height:1.9;transform:rotate(-0.6deg);}

.guide-hero{padding:132px 24px 56px;background:radial-gradient(circle at 20% 18%,rgba(255,207,112,0.25),transparent 25%),radial-gradient(circle at 80% 18%,rgba(94,194,189,0.2),transparent 30%),repeating-linear-gradient(0deg,rgba(79,127,216,0.055) 0 1px,transparent 1px 34px),linear-gradient(135deg,#fffefa 0%,#f1fbff 62%,#fff4e2 100%);color:var(--text);text-align:center;}
.guide-hero-inner{max-width:820px;margin:0 auto;}
.guide-kicker{display:inline-block;margin-bottom:16px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,0.7);border:1.5px dashed rgba(42,157,143,0.36);color:#2a7d74;font-size:0.82rem;font-weight:700;}
.guide-title{font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:clamp(2.1rem,6vw,3.45rem);font-weight:400;line-height:1.35;margin-bottom:16px;letter-spacing:0;}
.guide-lead{font-size:1rem;color:#53627f;line-height:1.9;}
.guide-section{padding:64px 0;background:rgba(255,254,250,0.78);}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.guide-card{background:rgba(255,254,250,0.92);border:1.5px solid var(--border);border-radius:26px 20px 28px 22px;padding:22px;box-shadow:var(--shadow);}
.guide-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50% 46% 54% 50%;background:var(--blue-light);color:var(--blue);font-family:'Yomogi','Noto Sans JP',sans-serif;font-weight:400;margin-bottom:14px;border:1px dashed rgba(79,127,216,0.24);}
.guide-card h2{font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:1.2rem;font-weight:400;margin-bottom:8px;color:var(--text);}
.guide-card p{font-size:0.9rem;color:var(--text-muted);line-height:1.75;}
.guide-note{margin-top:28px;padding:18px 20px;border-radius:24px 18px 26px 20px;background:var(--blue-light);border:1.5px dashed rgba(79,127,216,0.18);color:var(--text-muted);line-height:1.8;}
.guide-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
.intent-segment{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:5px;border-radius:18px;background:rgba(237,246,255,0.72);border:1.5px dashed rgba(79,127,216,0.2);}
.intent-option{position:relative;display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:14px;color:var(--text-muted);font-size:0.88rem;font-weight:800;cursor:pointer;transition:all .2s;}
.intent-option input{position:absolute;opacity:0;pointer-events:none;}
.intent-option:has(input:checked){background:#fff;color:var(--blue);box-shadow:0 8px 18px rgba(43,67,120,0.08);}
.location-picker{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:10px;}
.location-custom-input,.location-note-input{margin-top:10px;}
.form-help{margin-top:8px;color:var(--text-muted);font-size:0.78rem;line-height:1.6;}
.seo-spot-page{background:radial-gradient(circle at 12% 4%,rgba(255,207,112,0.12),transparent 24%),radial-gradient(circle at 92% 12%,rgba(94,194,189,0.13),transparent 28%),repeating-linear-gradient(0deg,rgba(79,127,216,0.04) 0 1px,transparent 1px 34px),var(--bg);}
.seo-spot-hero{position:relative;padding:132px 24px 74px;background:linear-gradient(180deg,rgba(255,254,250,0.92),rgba(242,250,255,0.78));overflow:hidden;}
.seo-spot-hero::before{content:'';position:absolute;inset:-8% -4%;background:url('assets/popopo-map-visual-20260518.png') center/cover no-repeat;opacity:0.12;filter:saturate(1.05);pointer-events:none;}
html[lang="en"] .seo-spot-hero::before{background:url('assets/popopo-map-visual-en.png') center/cover no-repeat;}
.seo-spot-inner{position:relative;z-index:1;max-width:820px;text-align:center;}
.seo-breadcrumb{display:inline-flex;margin-bottom:18px;color:var(--text-muted);font-size:0.84rem;font-weight:700;}
.seo-spot-title{font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:clamp(2.2rem,6vw,3.8rem);font-weight:400;line-height:1.28;margin:12px 0 10px;color:var(--text);}
.seo-spot-meta{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 18px;padding:6px 14px;border-radius:999px;background:rgba(237,246,255,0.9);color:var(--blue);font-size:0.88rem;font-weight:700;border:1px dashed rgba(79,127,216,0.22);}
.seo-spot-lead{max-width:680px;margin:0 auto;color:#53627f;font-size:1.03rem;line-height:1.9;}
.seo-spot-review{max-width:620px;margin:22px auto 0;padding:18px 22px;border-left:4px solid rgba(42,157,143,0.42);border-radius:22px 16px 24px 18px;background:rgba(255,255,255,0.78);color:var(--text);font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:1.12rem;line-height:1.75;box-shadow:0 14px 36px rgba(43,67,120,0.08);}
.seo-spot-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
.seo-spot-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.seo-spot-note h2{font-size:1.3rem;}
.seo-index-hero{padding-bottom:58px;}
.seo-index-grid{align-items:stretch;}
.seo-index-card{display:block;color:var(--text);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s;}
.seo-index-card:hover{color:var(--text);transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(42,157,143,0.34);}
.seo-index-card p + p{margin-top:8px;}

.modal-bg{position:fixed;inset:0;z-index:2000;background:rgba(30,40,69,0.55);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;}
#galleryModal{z-index:2100;}
.modal-bg.is-open{display:flex;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{background:var(--paper);border:1.5px solid var(--border);border-radius:28px 22px 30px 24px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease;box-shadow:var(--shadow-lg);}
@keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:24px 28px 20px;border-bottom:1.5px solid var(--border);position:sticky;top:0;background:var(--paper);z-index:1;}
.modal-title{font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:1.35rem;font-weight:400;color:var(--text);}
.modal-close{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:0.85rem;transition:all .2s;}
.modal-close:hover{background:var(--bg);color:var(--text);}
.gallery-modal-box{background:var(--paper);border:1.5px solid var(--border);border-radius:28px 22px 30px 24px;width:100%;max-width:960px;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;animation:slideUp .3s ease;box-shadow:var(--shadow-lg);}
.gallery-modal-box.is-resource-image-mode{max-width:min(920px,94vw);}
.gallery-modal-box.is-resource-image-mode #galleryBtnPrev,
.gallery-modal-box.is-resource-image-mode #galleryBtnNext,
.gallery-modal-box.is-resource-image-mode #galleryPanelPageNum{display:none;}
.gallery-modal-box.is-resource-image-mode .gallery-modal-caption{white-space:pre-wrap;}
.gallery-modal-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,0.85fr);}
.gallery-modal-visual {
  position: relative;
  background: #fdfdfd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* ズーム時の制御のため */
  padding: 18px 18px 86px 18px; /* 縦長画像でも下部の操作パネルと絶対に被らないようクリアランスを確保 */
  touch-action: pan-y;
}
.gallery-modal-visual.is-gallery-zoomed{
  touch-action:none;
}

.gallery-modal-image {
  max-width: 100%;
  max-height: calc(75vh - 64px); /* パネル分の高さを引いて全体が綺麗に収まるよう自動調整 */
  object-fit: contain;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: zoom-in;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(91,141,238,0.08);
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
  will-change: auto;
}

/* ズーム状態：JSが transform を毎フレーム更新するため transition は切る（モバイルのカクつき防止） */
.gallery-modal-image.is-zoomed {
  cursor: grab;
  z-index: 120;
  touch-action: none;
  transition: none !important;
  will-change: transform;
}
.gallery-modal-image.is-zoomed:active {
  cursor: grabbing;
}

/* 操作ヒント */
.gallery-action-hint {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-action-hint.is-visible {
  opacity: 1;
}

.gallery-modal-visual.is-locked .gallery-modal-image{display:none;}
.gallery-lock-visual[hidden],.gallery-lock-panel[hidden]{display:none!important;}
.gallery-lock-visual{width:100%;min-height:320px;border-radius:18px;border:1px dashed rgba(91,141,238,0.38);background:rgba(255,255,255,0.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--blue);font-weight:700;letter-spacing:0;}
.gallery-lock-icon{width:54px;height:54px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);}
.gallery-modal-copy{padding:24px 26px 28px;display:flex;flex-direction:column;gap:12px;}
.gallery-modal-caption{color:var(--text-muted);font-size:0.92rem;line-height:1.8;}
.gallery-lock-panel{border:1.5px solid var(--border);border-radius:18px;padding:18px;background:linear-gradient(180deg,#fff,#f7faff);}
.gallery-lock-label{font-size:0.78rem;font-weight:700;color:var(--blue);margin-bottom:8px;}
.gallery-lock-hint{font-weight:700;color:var(--text);line-height:1.6;margin-bottom:14px;}
.gallery-lock-row{display:flex;gap:8px;}
.gallery-lock-input{min-width:0;flex:1;border:1.5px solid var(--border);border-radius:999px;padding:11px 14px;font:inherit;}
.gallery-lock-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(91,141,238,0.14);}
.gallery-lock-submit{flex:0 0 auto;border-radius:999px;padding:11px 18px;background:var(--blue);color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(91,141,238,0.22);}
.gallery-lock-message{min-height:1.5em;color:#f97316;font-size:0.85rem;line-height:1.6;margin-top:10px;}
.gallery-lock-message.is-success{color:#16a34a;}
.kiriban-modal{padding:22px;}
.kiriban-card{position:relative;width:min(100%,560px);padding:38px 30px 32px;border-radius:28px;background:radial-gradient(circle at 22% 10%,rgba(255,255,255,0.95),rgba(255,255,255,0.78) 38%,rgba(239,246,255,0.94)),linear-gradient(135deg,#fff,#eef4ff);border:1.5px solid rgba(255,255,255,0.82);box-shadow:0 28px 80px rgba(19,31,69,0.34);text-align:center;overflow:hidden;animation:kiribanPop .42s cubic-bezier(.2,.9,.25,1.2);}
.kiriban-card::before{content:'';position:absolute;inset:10px;border-radius:22px;border:1px solid rgba(91,141,238,0.16);pointer-events:none;}
.kiriban-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:#fff;border:1.5px solid rgba(91,141,238,0.18);color:var(--text-muted);display:flex;align-items:center;justify-content:center;z-index:1;}
.kiriban-kicker{font-family:'Outfit',sans-serif;font-size:0.78rem;font-weight:800;letter-spacing:0;color:var(--blue);margin-bottom:14px;}
.kiriban-title{font-size:clamp(1.65rem,6vw,2.55rem);line-height:1.25;color:var(--text);margin-bottom:18px;}
.kiriban-title span{font-family:'Outfit',sans-serif;color:var(--blue);}
.kiriban-count{display:inline-flex;align-items:center;justify-content:center;min-width:168px;min-height:86px;margin-bottom:18px;padding:10px 28px;border-radius:999px;background:var(--blue);color:#fff;font-family:'Outfit',sans-serif;font-size:clamp(2.35rem,12vw,4.25rem);font-weight:800;box-shadow:0 18px 38px rgba(91,141,238,0.28);}
.kiriban-copy,.kiriban-share-note{color:var(--text-muted);line-height:1.85;font-size:0.96rem;}
.kiriban-share-note{margin-top:10px;color:var(--text);}
.kiriban-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px;position:relative;z-index:1;}
@keyframes kiribanPop{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.intro-story-modal{padding:18px;background:rgba(30,40,69,0.48);}
.intro-story-card{position:relative;width:min(100%,760px);padding:30px;border-radius:30px 22px 32px 24px;background:radial-gradient(circle at 18% 8%,rgba(255,207,112,0.2),transparent 28%),repeating-linear-gradient(0deg,rgba(79,127,216,0.045) 0 1px,transparent 1px 34px),var(--paper);border:1.5px solid rgba(255,255,255,0.9);box-shadow:0 30px 90px rgba(13,24,52,0.3);overflow:hidden;}
.intro-story-card::before{content:'STORY';position:absolute;right:-18px;bottom:-24px;font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:clamp(4.5rem,18vw,9rem);font-weight:400;line-height:1;color:rgba(79,127,216,0.08);pointer-events:none;}
.intro-story-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:#fff;border:1.5px solid rgba(91,141,238,0.18);color:var(--text-muted);display:flex;align-items:center;justify-content:center;z-index:2;}
.intro-story-frame{position:relative;min-height:330px;display:grid;align-items:center;padding:24px 18px 12px;}
.intro-story-slide{grid-area:1/1;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .42s ease,transform .42s ease;}
.intro-story-slide.is-active{opacity:1;transform:translateY(0);pointer-events:auto;}
.intro-story-kicker{font-family:'Yomogi','Noto Sans JP',sans-serif;color:#2a9d8f;font-size:0.95rem;font-weight:400;margin-bottom:18px;}
.intro-story-slide h3{max-width:620px;color:var(--text);font-family:'Yomogi','Noto Sans JP',sans-serif;font-size:clamp(1.85rem,6vw,3.2rem);font-weight:400;line-height:1.35;margin-bottom:18px;letter-spacing:0;text-wrap:balance;}
.intro-story-slide p{max-width:620px;color:#53627f;font-size:1rem;line-height:1.9;}
.intro-story-slide p[lang="en"]{margin-top:14px;color:#7a86a3;font-family:'Outfit','Noto Sans JP',sans-serif;font-size:0.92rem;}
.intro-story-dots{display:flex;gap:8px;justify-content:center;margin:6px 0 22px;position:relative;z-index:1;}
.intro-story-dots button{width:34px;height:8px;border-radius:999px;background:rgba(91,141,238,0.18);transition:all .25s;}
.intro-story-dots button.is-active{width:54px;background:var(--blue);}
.intro-story-dots span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.intro-story-actions{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.modal-form{padding:24px 28px;}
.spot-reviews-body{padding:24px 28px 8px;}
.spot-review-list{display:flex;flex-direction:column;gap:14px;}
.spot-review-card{border:1.5px solid var(--border);border-radius:22px 18px 24px 18px;padding:16px;background:var(--bg2);}
.spot-review-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.spot-review-rating{color:#f59e0b;font-size:1rem;white-space:nowrap;}
.spot-review-meta{font-size:0.82rem;color:var(--text-muted);margin-bottom:10px;line-height:1.6;}
.spot-review-comment{font-size:0.9rem;color:var(--text-muted);line-height:1.7;padding:12px;background:var(--blue-light);border-radius:18px 14px 20px 15px;border-left:3px solid var(--hand-accent);margin-bottom:12px;}
.spot-review-empty{text-align:center;color:var(--text-muted);padding:24px 8px 30px;line-height:1.8;}
.spot-reviews-actions{display:flex;justify-content:flex-end;gap:12px;padding:16px 28px 24px;}
.form-group{margin-bottom:20px;}
.form-label{display:block;font-size:0.88rem;font-weight:600;color:var(--text-muted);margin-bottom:8px;}
.req{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--blue-light);color:var(--blue);font-size:0.72rem;margin-left:6px;}
.form-input,.form-textarea{width:100%;padding:12px 16px;border-radius:18px 14px 20px 15px;background:#fff;border:1.5px solid var(--border);color:var(--text);font-size:0.9rem;font-family:inherit;transition:border-color .2s;}
.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);}
.form-input.has-error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.1);}
.form-textarea{min-height:100px;resize:vertical;}
.resource-inputs{display:flex;flex-direction:column;gap:10px;}
.resource-row{display:grid;grid-template-columns:minmax(118px,138px) minmax(0,1fr);gap:10px;align-items:center;}
.resource-kind-select{min-width:0;}
.form-hint{margin-top:8px;color:var(--text-dim);font-size:0.78rem;line-height:1.6;}
.form-assurance{margin:-4px 0 18px;padding:11px 14px;border-radius:18px 14px 20px 15px;background:rgba(237,246,255,0.72);border:1.5px dashed rgba(79,127,216,0.22);color:#53627f;font-size:0.82rem;font-weight:700;line-height:1.6;}
.form-error{min-height:1.4em;margin-top:6px;color:#dc2626;font-size:0.8rem;font-weight:600;line-height:1.5;}
.char-count{font-size:0.78rem;color:var(--text-dim);display:block;text-align:right;margin-top:6px;}
.star-picker{display:flex;gap:8px;}
.star-btn{font-size:1.6rem;color:#d1d5db;transition:all .15s;padding:4px;border-radius:4px;}
.star-btn:hover,.star-btn.active{color:#f59e0b;transform:scale(1.2);}
.form-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:8px;}

footer{background:linear-gradient(160deg,#1e2845 0%,#243954 58%,#234d53 100%);padding:60px 24px;border-top:none;text-align:center;}
.footer-inner{max-width:600px;margin:0 auto;}
.footer-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;}
.footer-logo .logo-main{font-size:1.5rem;color:#93c5fd;}
.footer-logo .logo-sub{font-size:0.75rem;color:#94a3b8;}
.footer-desc{color:#94a3b8;font-size:0.9rem;margin-bottom:12px;}
.footer-update{color:#64748b;font-size:0.82rem;margin-bottom:8px;}
.footer-credit{color:#64748b;font-size:0.78rem;}
.footer-spots-link{margin-top:18px;text-align:center;font-size:0.68rem;line-height:1.4;}
.footer-spots-link a{color:#94a3b8;text-decoration:none;opacity:0.75;transition:opacity .2s ease;}
.footer-spots-link a:hover{opacity:1;text-decoration:underline;}
.footer-admin{margin:22px auto 0;display:flex;align-items:center;justify-content:center;gap:14px;max-width:380px;padding:12px 14px;background:rgba(255,255,255,0.08);border:1px dashed rgba(255,255,255,0.18);border-radius:24px 18px 26px 20px;}
.footer-admin-avatar{width:76px;height:76px;object-fit:cover;border-radius:22px;border:2px solid rgba(255,255,255,0.7);box-shadow:0 14px 28px rgba(15,23,42,0.28);flex:0 0 auto;}
.footer-admin-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;}
.footer-admin-label{margin:0;color:#e2e8f0;font-size:0.76rem;font-weight:700;letter-spacing:0.08em;}
.footer-admin-link{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);border-radius:999px;color:#cbd5e1;font-size:0.8rem;line-height:1.3;text-decoration:none;transition:all 0.2s;}
.footer-admin-link:hover{background:rgba(255,255,255,0.16);color:#f8fafc;transform:translateY(-1px);}

@media(max-width:768px){
  #hero{align-items:flex-start;padding:104px 16px 76px;}
  #hero::before{inset:-10%;opacity:0.18;background-position:center 42%;}
  .hero-content{margin-top:0;padding:0;max-width:100%;}
  .hero-badge{font-size:0.75rem;padding:6px 12px;margin-bottom:10px;}
  .hero-chat-ticker{max-width:calc(100vw - 44px);padding:6px 12px;margin:0 0 8px;font-size:0.72rem;}
  .ticker-content{max-width:220px;}
  .hero-map-stage{width:calc(100vw + 42px);margin:0 50%;transform:translateX(-50%);padding-bottom:28px;overflow:hidden;}
  .hero-map-stage::before{inset:-12px -12px 6px;border-radius:26px 20px 30px 22px;}
  .hero-map-stage::after{bottom:12px;}
  .hero-map-overlay{left:6px;right:6px;}
  .hero-map-overlay--bottom{left:50%;right:auto;width:calc(100vw - 12px);transform:translateX(-50%);}
  .hero-map-overlay--top{top:8px;gap:4px;}
  .hero-map-overlay--bottom{bottom:10px;gap:6px;}
  .hero-gallery-band{margin:0;}
  .hero-gallery-track{gap:8px;animation-duration:28s;}
  .hero-gallery-item{width:42px;height:42px;border-radius:12px;}
  .hero-gallery-action{margin-top:5px;}
  .btn-gallery-all{font-size:0.72rem;padding:6px 14px;}
  .hero-title{font-size:1.75rem;overflow-wrap:anywhere;margin-bottom:8px;}
  .hero-sub{font-size:0.88rem;margin-bottom:12px;}
  .hero-map-visual{position:relative;width:100%;height:min(68svh,520px);margin:0;padding:0;border-radius:22px 18px 26px 18px;}
  .hero-image-box{position:absolute;inset:0;width:100%;height:100%;}
  .hero-story-link{margin:0 0 6px;font-size:0.75rem;padding:5px 10px;}
  .hero-quick-links{gap:5px;margin:0;}
  .hero-quick-link{min-height:28px;padding:5px 9px;font-size:0.70rem;}
  .hero-gacha-label--full{display:none;}
  .hero-gacha-label--compact{display:inline;}
  .hero-quick-link--gacha{padding:6px 12px;}
  .hero-btns{flex-direction:column;align-items:center;gap:10px;}
  .nav-links,.btn-post-nav{display:none;}
  .nav-actions{margin-left:auto;}
  .footer-admin{max-width:100%;justify-content:flex-start;padding:12px;border-radius:18px;}
  .footer-admin-avatar{width:64px;height:64px;border-radius:18px;}
  .hamburger{display:flex;}
  .nav-mobile .btn-post-nav{display:inline-flex;justify-content:center;margin-top:6px;}
  .hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:calc(100vw - 28px);max-width:410px;gap:0;padding:8px 6px;border-radius:999px;margin:8px auto 14px;}
  .stat{display:block;width:auto;min-width:0;padding:1px 5px;}
  .stat:not(:last-child){border-right:1px solid rgba(79,127,216,0.14);}
  .stat-num{font-size:1.05rem;line-height:1.05;}
  .stat-num.is-loading{font-size:0.62rem;line-height:1.2;white-space:normal;}
  .stat-label{font-size:0.58rem;line-height:1.25;white-space:nowrap;}
  .stat-divider{display:none;}
  .nav-discovery-row{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:5px 8px 7px 10px;}
  .nav-discovery-link{flex:1 1 auto;min-width:0;justify-content:flex-start;padding:7px 6px 7px 8px;gap:8px;overflow:hidden;}
  .nav-gacha-btn-label--full{display:none;}
  .nav-gacha-btn-label--compact{display:flex;align-items:center;justify-content:center;}
  .nav-gacha-btn{flex-shrink:0;margin:0;padding:0;width:44px;height:44px;border-radius:50%;font-size:1.18rem;line-height:1;box-shadow:0 2px 10px rgba(43,67,120,0.07);}
  .nav-gacha-btn:hover{transform:none;box-shadow:0 4px 14px rgba(43,67,120,0.1);}
  .nav-discovery-category{flex:0 0 auto;font-size:0.7rem;max-width:none;white-space:nowrap;}
  .nav-discovery-title{flex:1 1 0;max-width:none;}
  .nav-discovery-text{display:none;}
  .spots-grid{grid-template-columns:1fr;}
  .spot-latest-review{align-items:flex-start;flex-direction:column;gap:6px;padding:10px 11px;}
  .spot-latest-review strong{width:100%;}
  .want-list-hint{align-items:stretch;flex-direction:column;margin:-10px 0 24px;}
  .want-list-hint .btn-outline{justify-content:center;width:100%;}
  .visited-grid{grid-template-columns:1fr;}
  .community-header{flex-direction:column;align-items:flex-start;}
  .daily-prompt-card{align-items:stretch;flex-direction:column;}
  .daily-prompt-card .btn-outline{justify-content:center;width:100%;}
  .location-picker{grid-template-columns:1fr;}
  .about-hero-luxury{min-height:auto;padding:96px 18px 40px;}
  .about-hero-luxury::before{inset:-10%;opacity:0.28;background-position:center 42%;}
  .about-hero-luxury::after{bottom:42px;width:70vw;}
  .about-luxury-label{margin-bottom:20px;font-size:0.82rem;}
  .about-luxury-title{font-size:2.35rem;line-height:1.42;}
  .about-title-mobile-break{display:block;}
  .about-luxury-title::after{width:74vw;margin-top:10px;}
  .about-luxury-lead{padding:18px 18px;font-size:0.95rem;line-height:1.9;border-radius:22px 18px 24px 18px;}
  .about-story-section{padding:64px 0;}
  .about-story-heading{margin-bottom:38px;padding:0 12px;}
  .about-story-heading p{font-size:0.95rem;}
  .about-story-card.about-story-editorial{padding:0;}
  .about-story-chapter{grid-template-columns:1fr;gap:14px;margin-bottom:26px;padding:24px 20px 26px;border-radius:24px 18px 26px 20px;transform:none;}
  .about-story-chapter:nth-child(even){transform:none;}
  .about-story-chapter::before{display:none;}
  .about-chapter-number{width:auto;height:auto;justify-content:flex-start;margin-top:0;padding:4px 12px;border-radius:999px;font-size:1rem;}
  .about-chapter-copy h2{margin-bottom:14px;font-size:1.55rem;}
  .about-chapter-copy p{font-size:0.95rem;line-height:1.95;}
  .about-chapter-copy p + p{font-size:0.86rem;}
  .about-story-closing-luxury{margin-top:42px;padding:20px 16px;font-size:1.02rem;transform:none;}
  .modal-form{padding:20px;}
  .modal-head{padding:20px;}
  .gallery-modal-layout{grid-template-columns:1fr;}
  .gallery-modal-visual{padding:14px;}
  .gallery-modal-image{max-height:52vh;border-radius:14px;}
  .gallery-modal-copy{padding:18px 20px 22px;}
  .gallery-lock-visual{min-height:220px;}
  .gallery-lock-row{flex-direction:column;}
  .gallery-lock-submit{width:100%;}
  .spot-reviews-body{padding:20px 20px 8px;}
  .spot-reviews-actions{padding:14px 20px 20px;flex-direction:column-reverse;}
  .spot-reviews-actions .btn-primary,.spot-reviews-actions .btn-ghost{justify-content:center;width:100%;}
  .sec-header-row{flex-direction:column;align-items:flex-start;}
  .scroll-hint{position:fixed;bottom:80px;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(255,255,255,0.85);border:1px solid rgba(79,127,216,0.3);box-shadow:0 8px 24px rgba(43,67,120,0.2);gap:0;opacity:1;visibility:visible;transition:opacity .25s, visibility .25s, transform .25s;backdrop-filter:blur(8px);}
  .scroll-hint.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(8px);}
  .scroll-hint span{font-size:0;letter-spacing:0;}
  .scroll-hint span::before{content:'↓';font-size:1.35rem;line-height:1;color:var(--blue);font-weight:bold;}
  .scroll-line{display:none;}
  .guide-hero{padding:112px 18px 44px;}
  .guide-title{font-size:1.85rem;overflow-wrap:anywhere;}
  .guide-actions{flex-direction:column;align-items:center;}
  .guide-actions .btn-primary,.guide-actions .btn-outline{width:min(100%,280px);justify-content:center;}
  .guide-section{padding:48px 0;}
}

@media(max-width:430px){
  .nav-discovery-row{padding:4px 6px 6px;}
  .nav-discovery-link{padding:6px 4px 6px 6px;gap:5px;font-size:0.7rem;}
  .nav-discovery-category{font-size:0.64rem;max-width:none;padding:2px 6px;white-space:nowrap;}
  .nav-discovery-title{font-size:0.7rem;}
}
@media(min-width:769px) and (max-width:1120px){
  .nav-links{display:none;}
  .nav-actions{margin-left:auto;}
  .hamburger{display:flex;}
}
@media(min-width:769px) and (max-width:1024px){
  .hero-showcase{display:none;}
}
@media(max-width:768px){
  .hero-showcase{display:none;}
  .hero-float-card{padding:10px 11px;border-radius:18px;backdrop-filter:blur(8px) saturate(110%);}
  .hero-float-card::before{border-radius:18px 18px 0 0;}
  .hero-float-card-inner{gap:4px;}
  .hero-float-kind{font-size:0.58rem;padding:2px 8px;}
  .hero-float-title{font-size:0.74rem;line-height:1.3;}
  .hero-float-text,.hero-float-meta{font-size:0.62rem;line-height:1.35;}
}
@media(max-width:520px){
  .container,.hero-content,.guide-hero-inner,.about-hero-inner{max-width:360px;width:100%;}
  .hero-sub,.guide-lead{overflow-wrap:anywhere;word-break:break-word;}
  .hero-stats{width:100%;}
  .resource-row{grid-template-columns:1fr;}
  .resource-kind-select{width:100%;}
}
@media(max-width:480px){
  .tabs{gap:6px;}
  .tab{padding:8px 14px;font-size:0.82rem;}
}

/* フリートーク視認性向上（ティッカー＆フローティングボタン） */
#chatTicker:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}
.fab-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 8px 24px rgba(91,141,238,0.4);
  z-index: 900;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  border: none;
}
.fab-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(91,141,238,0.5);
}
.fab-btn:active {
  transform: translateY(0);
}
.carrot-guide {
  position: fixed;
  right: 24px;
  bottom: 104px;
  z-index: 980;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.carrot-guide-bubble {
  position: relative;
  width: min(318px, calc(100vw - 32px));
  padding: 16px 17px 15px;
  border-radius: 24px 18px 26px 20px;
  border: 1.5px dashed rgba(42,157,143,0.35);
  background: rgba(255,254,250,0.95);
  box-shadow: 0 14px 34px rgba(43,67,120,0.16);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  pointer-events: auto;
  transform-origin: right bottom;
  animation: carrotBubbleIn 0.24s ease both;
}
.carrot-guide-bubble[hidden] {
  display: none !important;
}
.carrot-guide-bubble::after {
  content: '';
  position: absolute;
  right: 26px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: rgba(255,254,250,0.95);
  border-right: 1.5px dashed rgba(42,157,143,0.28);
  border-bottom: 1.5px dashed rgba(42,157,143,0.28);
  transform: rotate(45deg);
}
.carrot-guide-kicker {
  margin-bottom: 5px;
  color: #2a7d74;
  font-size: 0.72rem;
  font-weight: 700;
}
.carrot-guide-title {
  color: var(--text);
  font-family: 'Yomogi','Noto Sans JP',sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.45;
  margin-bottom: 7px;
}
.carrot-guide-text {
  color: #52617c;
  font-size: 0.86rem;
  line-height: 1.75;
}
.carrot-guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.carrot-guide-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 999px;
  background: linear-gradient(135deg,var(--blue),#2a9d8f);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(79,127,216,0.2);
}
.carrot-guide-action:hover {
  color: #fff;
  transform: translateY(-1px);
}
.carrot-guide-link {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px dashed rgba(79,127,216,0.28);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(237,246,255,0.68);
}
.carrot-guide-link:hover {
  color: var(--blue);
  background: var(--blue-light);
}
.carrot-guide-btn {
  width: 74px;
  min-height: 86px;
  padding: 7px 6px 8px;
  border-radius: 26px 20px 28px 22px;
  border: 1.5px solid rgba(79,127,216,0.16);
  background: rgba(255,254,250,0.9);
  box-shadow: 0 12px 30px rgba(43,67,120,0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  pointer-events: auto;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: carrotGuideWalk 5.6s ease-in-out infinite;
}
.carrot-guide-btn:hover {
  border-color: rgba(42,157,143,0.42);
  box-shadow: 0 16px 34px rgba(43,67,120,0.2);
  transform: translateY(-3px);
}
.carrot-guide-btn img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 18px 14px 18px 14px;
  border: 1px solid rgba(73,128,186,0.16);
  background: #fff;
}
.carrot-guide.is-open .carrot-guide-btn {
  animation-play-state: paused;
  border-color: rgba(42,157,143,0.42);
}
@keyframes carrotGuideWalk {
  0%,100% { transform: translate(0,0) rotate(-1deg); }
  34% { transform: translate(-8px,-3px) rotate(1deg); }
  68% { transform: translate(5px,-1px) rotate(-0.5deg); }
}
@keyframes carrotBubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 768px) {
  #chatTicker {
    margin-top: -12px;
    padding: 8px 12px;
  }
  .fab-btn {
    display: none !important; /* スマホはbottom navの「つぶやく」で代替 */
  }
  .carrot-guide {
    right: 12px;
    bottom: 78px;
    gap: 8px;
  }
  .carrot-guide-bubble {
    width: min(306px, calc(100vw - 24px));
    padding: 14px 15px 14px;
  }
  .carrot-guide-title {
    font-size: 0.98rem;
  }
  .carrot-guide-text {
    font-size: 0.82rem;
  }
  .carrot-guide-btn {
    width: 64px;
    min-height: 76px;
    padding: 6px 5px 7px;
    font-size: 0.68rem;
  }
  .carrot-guide-btn img {
    width: 48px;
    height: 48px;
    border-radius: 15px 12px 15px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .carrot-guide-btn,
  .carrot-guide-bubble {
    animation: none;
  }
}

/* 天気バー 都市設定ボタン */
.weather-settings-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  margin-left: 8px;
}
.weather-settings-btn:hover {
  background: var(--blue-light);
  color: var(--blue);
}

/* 天気 都市選択モーダル */
.weather-city-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(30,40,69,0.55);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.weather-city-modal.is-open {
  display: flex;
}
.weather-city-box {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
}
.weather-city-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.weather-city-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.weather-city-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.weather-city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
@media (max-width: 480px) {
  .weather-city-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.weather-city-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.weather-city-chip.is-selected {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}
.weather-city-chip .chip-check {
  display: none;
  font-size: 0.75rem;
}
.weather-city-chip.is-selected .chip-check {
  display: inline;
}
.weather-city-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* 天気情報バー */
.weather-bar-wrap {
  width: 100%;
  padding: 0;
  margin: -4px 0 22px;
  background: transparent;
}
/* 気象警報・注意報のアラート帯（発表中のみ表示） */
.weather-alert-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
  padding: 9px 14px;
  border-radius: 14px;
  border: 1.5px solid;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}
.weather-alert-bar[hidden] { display: none; }
/* コラプシブル（アコーディオン）アラートバー */
.weather-alert-bar--collapsible {
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.weather-alert-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  color: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  outline: none;
  gap: 12px;
}
.weather-alert-toggle-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.weather-alert-toggle-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  opacity: 0.8;
  font-weight: 700;
}
.weather-alert-toggle-arrow {
  display: inline-block;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.9rem;
}
.weather-alert-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.weather-alert-details-inner {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  margin-top: 2px;
}
[data-theme="dark"] .weather-alert-details-inner {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.weather-alert-bar--expanded .weather-alert-toggle-arrow {
  transform: rotate(180deg);
}
.weather-alert-icon { font-size: 1rem; }
.weather-alert-title { font-weight: 800; white-space: nowrap; }
.weather-alert-cities { display: flex; flex-wrap: wrap; gap: 7px 14px; min-width: 0; }
.weather-alert-city { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; min-width: 0; }
.weather-alert-city-name { white-space: nowrap; }
.weather-alert-types { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: 600; opacity: 0.95; min-width: 0; }
.weather-alert-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
}
.weather-alert-type-name {
  overflow-wrap: anywhere;
}
.weather-level-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1.35;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.weather-alert-note {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0.82;
  overflow-wrap: anywhere;
}
.weather-alert-more { margin-left: auto; font-size: 0.76rem; font-weight: 700; color: inherit; text-decoration: underline; white-space: nowrap; }
/* 重大度カラー: 注意報=黄 / 警報=赤 / 危険=濃赤 / 特別警報=赤紫 */
.weather-alert-bar--advisory { background: rgba(245,200,66,0.15); border-color: rgba(214,158,46,0.5); color: #715812; }
.weather-alert-bar--warning { background: rgba(229,90,67,0.12); border-color: rgba(214,69,46,0.55); color: #a33222; }
.weather-alert-bar--danger { background: rgba(194,48,48,0.14); border-color: rgba(178,34,34,0.58); color: #8f1f1f; }
.weather-alert-bar--emergency { background: rgba(146,64,190,0.14); border-color: rgba(124,46,170,0.6); color: #6b2596; }
.weather-alert-bar--notice { background: rgba(91,141,238,0.12); border-color: rgba(91,141,238,0.38); color: #31558f; }
.w-alert-badge { margin-left: 5px; font-size: 0.82em; }

/* 緊急警報グローバルバナー (Warning以上のみ最上部に表示) */
.navbar-alert-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  animation: alertSlideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  z-index: 1001;
}
.navbar-alert-strip[hidden] {
  display: none !important;
}
.navbar-alert-strip--warning {
  background: #dc2626; /* 鮮やかな赤 */
  color: #ffffff;
}
.navbar-alert-strip--danger {
  background: #991b1b; /* 濃い赤 */
  color: #ffffff;
}
.navbar-alert-strip--emergency {
  background: #7c3aed; /* 特別警報（紫） */
  color: #ffffff;
}
.navbar-alert-strip--advisory {
  background: #facc15; /* 明るい黄色 */
  color: #422006; /* 濃い茶色 */
}
.navbar-alert-strip--notice {
  background: #2563eb; /* お知らせ（青） */
  color: #ffffff;
}
.alert-strip-icon {
  font-size: 0.9rem;
}
.alert-strip-text {
  flex-grow: 0;
}
.alert-strip-link {
  color: #ffffff;
  text-decoration: underline;
  margin-left: 8px;
  font-size: 0.72rem;
  opacity: 0.9;
  white-space: nowrap;
}
.alert-strip-link:hover {
  opacity: 1;
  text-decoration: none;
}
@keyframes alertSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
/* ナビゲーションバーに警報が表示されている場合、ヒーローセクションのpadding-topを増やして#chatTickerの隠れを防ぐ */
.has-navbar-alert #hero {
  padding-top: calc(104px + 52px);
}
@media (max-width: 768px) {
  .has-navbar-alert #hero {
    padding-top: calc(104px + 52px);
  }
}
@media (max-width: 480px) {
  .has-navbar-alert #hero {
    padding-top: calc(104px + 72px);
  }
}
@media (max-width: 768px) {
  .weather-alert-bar { font-size: 0.76rem; padding: 8px 12px; }
  .weather-level-chip { font-size: 0.64rem; }
  .weather-alert-note { flex-basis: 100%; font-size: 0.68rem; }
  .weather-alert-more { margin-left: 0; }
}
.weather-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,252,255,0.88));
  border: 1.5px solid rgba(91,141,238,0.22);
  border-radius: 22px 18px 24px 20px;
  padding: 13px 14px;
  box-shadow: 0 12px 28px rgba(91,141,238,0.1);
  gap: 10px;
  overflow: hidden;
  position: relative;
}
.weather-bar::before {
  content: '';
  position: absolute;
  inset: 8px auto 8px 8px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blue), #79c7a8);
  opacity: 0.72;
}
.weather-bar::-webkit-scrollbar {
  display: none;
}
.weather-bar-label {
  font-family: 'Yomogi','Noto Sans JP',sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
  white-space: nowrap;
  z-index: 1;
  background: transparent;
}
.weather-marquee {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  /* デスクトップのみフェードグラデを適用（iOSでのアニメーション干渉を防ぐためモバイルは@mediaで除去） */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.weather-items {
  display: flex;
  gap: 0;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.weather-unavailable {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
}
.weather-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  padding: 0 18px;
  border-right: 1px dashed rgba(91,141,238,0.2);
}
.weather-item .w-icon {
  font-size: 1rem;
}
.weather-item .w-temp {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.weather-item .w-name {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.weather-item .w-pop {
  color: #6eb0ff;
  font-size: 0.78rem;
}
@media (max-width: 768px) {
  .weather-bar {
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    padding: 12px 12px 11px;
  }
  .weather-bar-label {
    min-width: 0;
    white-space: normal;
    line-height: 1.35;
  }
  .weather-marquee {
    grid-column: 1 / -1;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .weather-settings-btn {
    margin-left: 0;
  }
  .weather-item {
    padding: 0 16px;
  }
}

/* ============================================================
   スマホ用 Bottom Navigation Bar
   ============================================================ */
.bottom-nav {
  display: none; /* PCでは非表示 */
}

@media (max-width: 768px) {
  /* コンテンツがナビに隠れないよう余白を追加 */
  body {
    padding-bottom: 68px;
  }

  .bottom-nav {
    display: flex;
    align-items: stretch;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 950;
    height: 60px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(30, 40, 69, 0.08);
  }

  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 0;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .bottom-nav-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 32px;
    height: 3px;
    background: var(--blue);
    border-radius: 0 0 3px 3px;
    transition: transform 0.2s;
  }

  .bottom-nav-item.is-active::after {
    transform: translateX(-50%) scaleX(1);
  }

  .bottom-nav-item.is-active {
    color: var(--blue);
  }

  .bottom-nav-item:active {
    transform: scale(0.92);
  }

  .bottom-nav-icon,
  .bottom-nav-post-icon {
    font-size: 1.3rem;
    line-height: 1;
  }

  .bottom-nav-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  /* 中央の「つぶやく」ボタン — 現フェーズは主張を抑えた中立ピルスタイル */
  .bottom-nav-post {
    color: var(--text-muted);
    position: relative;
    flex: 1.2;
  }

  .bottom-nav-post::before {
    content: '';
    position: absolute;
    inset: 8px 10px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    z-index: -1;
    transition: border-color 0.2s, background 0.2s;
  }

  .bottom-nav-post:active {
    color: var(--blue);
  }

  .bottom-nav-post:active::before {
    background: var(--blue-light);
    border-color: var(--blue);
    transform: scale(0.94);
  }

  .bottom-nav-post::after {
    display: none;
  }
}

/* 投稿アクション（編集・削除） */
.post-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  opacity: 1;
  z-index: 10;
}
/* チャットカードでは日時の重なりを避けるため右下に配置 */
.chat-card .post-actions {
  top: auto;
  bottom: 12px;
}
/* スポットカードでは「行きたい」ボタンの隣に並べるため絶対配置を解除 */
.spot-card .post-actions {
  position: static;
}
.btn-post-action {
  height: 34px;
  padding: 0 14px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  gap: 4px;
}
.btn-post-action:hover {
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.btn-post-action.is-delete:hover {
  color: #ff4d4d;
  border-color: #ffcccc;
  background: #fff5f5;
}
.btn-post-action.is-edit:hover {
  color: var(--blue);
  border-color: var(--blue-light);
  background: var(--blue-light);
}

@media (max-width: 768px) {
  .post-actions {
    top: 8px;
    right: 8px;
  }
  .btn-post-action {
    height: 32px;
    padding: 0 10px;
    font-size: 0.78rem;
  }
}

.visited-card, .chat-card {
  position: relative; /* アクションボタンの基準点 */
}

/* ------------------------------
   Gallery & Dictionary Modal
   ------------------------------ */
.modal-box-large {
  max-width: 900px;
  width: 95%;
  height: 85vh;
  display: flex;
  flex-direction: column;
}
.gallery-tabs {
  display: flex;
  gap: 16px;
  padding: 0 32px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.gallery-tab {
  padding: 16px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
}
.gallery-tab.active {
  color: var(--text-main);
  border-bottom-color: var(--text-main);
}
.gallery-grid-container {
  padding: 32px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 24px;
  flex: 1;
  background: #fafafa;
}
.gallery-grid-item {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  position: relative;
  background: #fff;
}
.gallery-grid-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.gallery-item-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(30, 40, 69, 0.85);
  color: #fff;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  letter-spacing: 0.05em;
}
.gallery-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-grid-item:hover img {
  transform: scale(1.03);
}
.gallery-grid-item[data-lock-answer] img { filter: blur(3px); transform: scale(1.1); }
.gallery-grid-item[data-lock-answer]::after { content: '🔒'; position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,0.95); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.modal-img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.05);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 110;
}
.modal-img-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.modal-img-nav.prev { left: 24px; }
.modal-img-nav.next { right: 24px; }

.gallery-modal-pagenum {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  z-index: 105;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ギャラリー操作パネル */
.gallery-modal-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(28, 36, 56, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 200;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-ctrl-btn {
  min-width: 56px;
  height: 50px;
  padding: 0 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font-size: 1.05rem;
  border-radius: 18px;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  cursor: pointer !important;
}
.gallery-ctrl-btn:disabled,
.gallery-ctrl-btn[aria-disabled="true"] {
  cursor: default !important;
}
.gallery-ctrl-icon{font-size:1.05rem;line-height:1;}
.gallery-ctrl-label{font-size:0.66rem;line-height:1;letter-spacing:0.02em;font-weight:700;opacity:0.92;}
.gallery-ctrl-close {
  background: rgba(255, 255, 255, 0.10);
}

.gallery-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.gallery-ctrl-btn:active {
  transform: translateY(0) scale(0.97);
}
.gallery-ctrl-btn:focus-visible{
  outline:2px solid rgba(255,255,255,0.7);
  outline-offset:2px;
}

.gallery-ctrl-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 2px;
}

@media (max-width: 768px) {
  .gallery-modal-controls {
    bottom: max(14px, env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    justify-content: space-between;
    padding: 6px;
    gap: 0;
  }
  .gallery-ctrl-btn{
    min-width:auto;
    flex:1;
    height:46px;
    padding:0 4px;
    font-size:0.95rem;
    border-radius:14px;
  }
  .gallery-ctrl-label{font-size:0.62rem;}
  .gallery-ctrl-divider{margin:0 2px;height:24px;}
  .gallery-action-hint{top:64px;font-size:0.76rem;padding:7px 12px;}
  .gallery-modal-pagenum {
    bottom: 80px !important; /* パネルと被らないように上にずらす */
  }
  .modal-img-nav { display: none !important; }
}

@media (max-width: 768px) {
  .gallery-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    padding: 20px;
  }
  .gallery-tabs {
    padding: 0 20px;
  }
  .gallery-modal-box {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .gallery-modal-layout {
    grid-template-columns: 1fr;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .gallery-modal-visual {
    flex: 1;
    min-height: 0;
    padding: 0 0 84px 0; /* スマホ全画面時も下部の操作バーと被らないよう余白を確保 */
    background: #000; /* モバイル全画面時は黒背景で没入感を */
    box-sizing: border-box;
  }
  .gallery-modal-image {
    max-height: calc(100% - 12px);
    border-radius: 0;
    border: none;
  }
  .gallery-modal-copy {
    background: #fff;
    padding: 20px;
    border-top: 1px solid var(--border);
  }
  .gallery-modal-pagenum {
    bottom: 20px;
    background: rgba(0, 0, 0, 0.6);
  }
  .modal-img-nav {
    display: none; /* スワイプがメインになるためボタンは隠すか控えめに */
  }
}

/* 全画面フォーカスモード（文字を隠して画像を最大化） */
.gallery-modal-box.is-focus-mode {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  z-index: 2200 !important;
  overflow: hidden !important;
}

.gallery-modal-box.is-focus-mode .modal-head,
.gallery-modal-box.is-focus-mode .gallery-modal-copy {
  display: none !important;
}

.gallery-modal-box.is-focus-mode .gallery-modal-visual {
  height: 100vh;
  width: 100vw;
  padding: 0; /* 下部クリアランスは fixed 配置のコントロールバーで解決するため0に */
  background: #000;
  box-sizing: border-box;
}

.gallery-modal-box.is-focus-mode .gallery-modal-image {
  max-height: 100vh;
  border-radius: 0;
}

.gallery-modal-box.is-focus-mode .gallery-modal-pagenum {
  top: 20px;
  bottom: auto;
}

.gallery-modal-box.is-focus-mode .gallery-modal-controls {
  position: fixed !important;
  bottom: max(32px, env(safe-area-inset-bottom) + 20px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2300 !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important;
  width: auto !important;
  display: flex !important;
}

/* スマホ用レスポンシブ上書き */
@media (max-width: 768px) {
  .gallery-modal-box.is-focus-mode .gallery-modal-controls {
    bottom: max(20px, env(safe-area-inset-bottom) + 12px) !important;
    width: calc(100% - 32px) !important;
    max-width: 480px !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
  }
}

.gallery-modal-box.is-dictionary-mode {
  max-width: min(1120px, 96vw);
}
.gallery-modal-box.is-dictionary-mode .gallery-modal-layout {
  grid-template-columns: 1fr;
}
.gallery-modal-box.is-dictionary-mode .gallery-modal-visual {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-height: calc(90vh - 88px);
  overflow: auto;
  padding: 22px 22px 136px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.88), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #faf7f0 0%, #f4efe4 100%);
}
.gallery-modal-box.is-dictionary-mode .gallery-modal-image {
  width: auto;
  max-width: min(100%, 980px);
  max-height: calc(75vh - 40px); /* 縦長・大判ページでも画面内に全体が綺麗に収まるよう自動調整 */
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(92, 72, 45, 0.16);
  box-shadow: 0 18px 48px rgba(65, 47, 25, 0.16);
  transform-origin: center top;
}
.gallery-modal-box.is-dictionary-mode .gallery-modal-copy {
  padding: 16px 26px 22px;
  border-top: 1px solid rgba(92, 72, 45, 0.12);
}
.gallery-modal-box.is-dictionary-mode .gallery-modal-caption {
  color: #6b5b45;
}
.gallery-modal-box.is-dictionary-mode .gallery-modal-pagenum {
  top: 18px;
  bottom: auto;
  background: rgba(255,255,255,0.88);
  color: #4a3a28;
  border: 1px solid rgba(92,72,45,0.16);
}
.gallery-modal-box.is-dictionary-mode .gallery-modal-controls {
  position: absolute;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  margin: 0;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(92,72,45,0.18);
  box-shadow: 0 14px 36px rgba(65,47,25,0.16);
}
.gallery-modal-box.is-dictionary-mode .gallery-ctrl-btn {
  min-width: 64px;
  height: 50px;
  padding: 0 12px;
  border-radius: 16px;
  color: #4a3a28;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
}
.gallery-modal-box.is-dictionary-mode .gallery-ctrl-icon{color:#3f5274;}
.gallery-modal-box.is-dictionary-mode .gallery-ctrl-label{color:#5f4e39;opacity:0.95;}
.gallery-modal-box.is-dictionary-mode .gallery-ctrl-btn:hover {
  background: rgba(91,141,238,0.12);
}
.gallery-modal-box.is-dictionary-mode .gallery-ctrl-divider {
  background: rgba(92,72,45,0.18);
}
.gallery-dict-thumbs[hidden] {
  display: none !important;
}
.gallery-dict-thumbs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  z-index: 204;
  display: flex;
  justify-content: center;
  gap: 10px;
  width: min(100%, 980px);
  padding: 10px;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: 999px;
  border: 1px solid rgba(92,72,45,0.16);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 34px rgba(65,47,25,0.14);
  backdrop-filter: blur(12px);
}
.gallery-dict-thumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 86px;
  padding: 7px 10px 7px 7px;
  border-radius: 999px;
  color: #5a4935;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 700;
  flex: 0 0 auto;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.gallery-dict-thumb:hover,
.gallery-dict-thumb.is-active {
  background: rgba(91,141,238,0.12);
  border-color: rgba(91,141,238,0.26);
}
.gallery-dict-thumb.is-active {
  color: var(--blue);
}
.gallery-dict-thumb:active {
  transform: scale(0.98);
}
.gallery-dict-thumb img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(92,72,45,0.16);
  background: #fff;
}

@media (max-width: 768px) {
  .gallery-modal-box.is-dictionary-mode .modal-head {
    flex: 0 0 auto;
  }
  .gallery-modal-box.is-dictionary-mode .gallery-modal-visual {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: 12px 10px 140px;
    background:
      radial-gradient(circle at 12% 8%, rgba(255,255,255,0.92), rgba(255,255,255,0) 36%),
      linear-gradient(180deg, #faf7f0 0%, #f1eadc 100%);
  }
  .gallery-modal-box.is-dictionary-mode .gallery-modal-image {
    width: auto;
    max-width: 100%;
    max-height: calc(70vh - 40px); /* スマホ画面でも大きくなりすぎず全体が見渡せるよう最適化 */
    object-fit: contain;
    border-radius: 12px;
  }
  .gallery-modal-box.is-dictionary-mode .gallery-modal-copy {
    flex: 0 0 auto;
    padding: 14px 18px 16px;
  }
  .gallery-modal-box.is-dictionary-mode .gallery-modal-controls {
    bottom: 72px;
    width: calc(100% - 24px);
    justify-content: center;
    padding: 6px;
  }
  .gallery-modal-box.is-dictionary-mode .gallery-ctrl-btn {
    min-width: 54px;
    height: 40px;
    padding: 0 9px;
    font-size: 0.85rem;
  }
  .gallery-modal-box.is-dictionary-mode .gallery-modal-pagenum {
    top: 12px;
    bottom: auto !important;
  }
  .gallery-modal-box.is-dictionary-mode .gallery-dict-thumbs {
    bottom: 10px;
    width: calc(100% - 20px);
    justify-content: flex-start;
  }
}

/* スライド切り替えアニメーション */
.gallery-modal-image.slide-left {
  animation: slideLeft 0.3s ease-out;
}
.gallery-modal-image.slide-right {
  animation: slideRight 0.3s ease-out;
}

@keyframes slideLeft {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideRight {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ============================================================
   ギャラリー：ページ番号は下部コントロールパネルに統合（v20260510-2）
   フローティングのページバッジは廃止（作品との重なりを回避）
   ============================================================ */
.gallery-modal-pagenum{ display:none !important; }

.gallery-panel-pagenum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:30px;
  padding:0 12px;
  margin:0 4px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  color:#fff;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
  user-select:none;
}
.gallery-panel-pagenum[hidden]{display:none !important;}
.gallery-modal-box.is-dictionary-mode .gallery-panel-pagenum{
  background:rgba(91,141,238,0.14);
  color:#3759a8;
}
@media (max-width:768px){
  .gallery-panel-pagenum{min-width:auto;padding:0 8px;font-size:0.74rem;height:28px;}
}
.gallery-dict-thumb{
  position:relative;
}
.gallery-dict-thumb span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  padding:0 4px;
  height:18px;
  border-radius:999px;
  background:rgba(91,141,238,0.14);
  color:#3759a8;
  font-size:0.72rem;
  font-weight:800;
}
.gallery-dict-thumb.is-active span{
  background:var(--blue);
  color:#fff;
}
.gallery-modal-bg-close{
  position:absolute;
  top:12px;
  left:12px;
  z-index:160;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(28,36,56,0.78);
  color:#fff;
  font-size:0.74rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  letter-spacing:0.02em;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.gallery-modal-bg-close:hover{background:rgba(28,36,56,0.92);transform:translateY(-1px);}
.gallery-modal-bg-close:focus-visible{outline:2px solid rgba(255,255,255,0.6);outline-offset:2px;}
@media (max-width:768px){
  .gallery-modal-bg-close{top:max(10px,env(safe-area-inset-top));left:10px;font-size:0.72rem;padding:6px 10px;}
}

/* ============================================================
   みんなのお題（投票式）
   ============================================================ */
.daily-prompt-card{
  flex-direction:column;
  align-items:stretch;
  gap:0;
}
.daily-prompt-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.daily-prompt-body{
  flex:1 1 280px;
  min-width:0;
}
.daily-prompt-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.daily-prompt-meta{
  margin-top:6px;
  font-size:0.78rem;
  color:var(--text-muted);
  font-weight:600;
  line-height:1.5;
}
.daily-prompt-meta .pill{
  display:inline-block;
  padding:2px 8px;
  margin-right:6px;
  border-radius:999px;
  background:rgba(42,157,143,0.12);
  color:#2a7d74;
  font-size:0.72rem;
  font-weight:800;
}
.daily-prompt-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(237,246,255,0.7);
  color:var(--blue);
  border:1px dashed rgba(91,141,238,0.32);
  font-size:0.82rem;
  font-weight:700;
  transition:background .2s ease, transform .2s ease;
}
.daily-prompt-toggle:hover{background:#fff;transform:translateY(-1px);}
.daily-prompt-toggle:focus-visible{outline:2px solid rgba(91,141,238,0.5);outline-offset:2px;}
.daily-prompt-toggle-caret{transition:transform .25s ease;display:inline-block;}
.daily-prompt-toggle[aria-expanded="true"] .daily-prompt-toggle-caret{transform:rotate(180deg);}
.daily-prompt-candidates{
  margin-top:18px;
  padding-top:18px;
  border-top:1px dashed rgba(91,141,238,0.22);
  animation:daily-prompt-fade .35s ease;
}
.daily-prompt-candidates[hidden]{display:none;}
@keyframes daily-prompt-fade{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
.daily-prompt-candidates-lead{
  font-size:0.84rem;
  color:var(--text-muted);
  line-height:1.7;
  margin-bottom:14px;
}
.daily-prompt-suggest{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,250,235,0.84),rgba(238,250,244,0.78));
  border:1px dashed rgba(42,157,143,0.28);
}
.daily-prompt-suggest-btn{padding:9px 18px;font-size:0.85rem;}
.daily-prompt-suggest-hint{
  flex:1 1 200px;
  font-size:0.78rem;
  color:var(--text-muted);
  line-height:1.6;
  margin:0;
}
.daily-prompt-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.daily-prompt-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.86);
  border:1px solid var(--border);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.daily-prompt-item:hover{
  border-color:rgba(91,141,238,0.36);
  background:#fff;
  transform:translateY(-1px);
}
.daily-prompt-item.is-leading{
  border-color:rgba(42,157,143,0.4);
  background:linear-gradient(135deg,rgba(255,255,255,0.96),rgba(232,247,243,0.92));
  box-shadow:0 6px 18px rgba(42,157,143,0.1);
}
.daily-prompt-item-rank{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(91,141,238,0.14);
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Yomogi','Noto Sans JP',sans-serif;
  font-weight:400;
  font-size:0.86rem;
}
.daily-prompt-item.is-leading .daily-prompt-item-rank{
  background:rgba(42,157,143,0.18);
  color:#2a7d74;
}
.daily-prompt-item-body{flex:1 1 auto;min-width:0;}
.daily-prompt-item-text{
  font-size:0.92rem;
  color:var(--text);
  line-height:1.6;
  font-weight:600;
  margin:0;
  word-break:break-word;
}
.daily-prompt-item-foot{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
  color:var(--text-muted);
  font-size:0.74rem;
  font-weight:600;
}
.daily-prompt-item-nick{
  display:inline-block;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.daily-prompt-item-date{
  display:inline-flex;
  align-items:center;
  color:#6a7c86;
  font-size:0.72rem;
  font-weight:700;
}
.daily-prompt-item-leading-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(42,157,143,0.16);
  color:#2a7d74;
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:0.02em;
}
.daily-prompt-vote-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,238,238,0.72);
  border:1px solid rgba(231,76,60,0.18);
  color:#d4452f;
  font-size:0.82rem;
  font-weight:700;
  transition:background .2s ease, transform .2s ease;
}
.daily-prompt-vote-btn:hover{background:#fff;transform:translateY(-1px);}
.daily-prompt-vote-btn.is-voted{
  background:linear-gradient(135deg,#ff8d8d,#e85a4f);
  color:#fff;
  border-color:rgba(231,76,60,0.0);
  box-shadow:0 6px 14px rgba(231,76,60,0.22);
}
.daily-prompt-vote-btn[disabled]{opacity:0.6;cursor:default;}
.daily-prompt-vote-icon{
  display:inline-block;
  transition:transform .25s ease;
}
.daily-prompt-vote-btn:hover .daily-prompt-vote-icon{transform:scale(1.18);}
.daily-prompt-vote-count{font-variant-numeric:tabular-nums;}
.daily-prompt-empty{
  margin:8px 0 0;
  padding:14px;
  border-radius:14px;
  border:1px dashed var(--border);
  background:rgba(255,254,250,0.68);
  color:var(--text-muted);
  font-size:0.86rem;
  text-align:center;
  line-height:1.7;
}
.daily-prompt-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(91,141,238,0.18);
}
.daily-prompt-pagination[hidden]{display:none;}
.daily-prompt-page-numbers{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.daily-prompt-page-btn{
  min-width:34px;
  height:34px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(91,141,238,0.22);
  background:rgba(255,255,255,0.84);
  color:#4b5f78;
  font-size:0.78rem;
  font-weight:800;
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.daily-prompt-page-btn:hover:not(:disabled){
  background:#fff;
  color:#2a7d74;
  border-color:rgba(42,157,143,0.32);
  transform:translateY(-1px);
}
.daily-prompt-page-btn.is-current{
  background:linear-gradient(135deg,#2a9d8f,#5b8dee);
  color:#fff;
  border-color:transparent;
  box-shadow:0 5px 14px rgba(42,157,143,0.18);
}
.daily-prompt-page-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}
.daily-prompt-page-status{
  color:var(--text-muted);
  font-size:0.74rem;
  font-weight:700;
}
/* 自分の投稿 */
.daily-prompt-item.is-mine{
  border-left:3px solid #6c63ff;
  background:rgba(108,99,255,0.04);
}
/* 未反映バッジ */
.prompt-sync-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,140,0,0.14);
  color:#b5631a;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.02em;
}
/* 自分のアクションボタン群 */
.prompt-my-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.prompt-action-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.74rem;
  font-weight:600;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.8);
  color:var(--text-muted);
  cursor:pointer;
  transition:background .18s,transform .18s;
}
.prompt-action-btn:hover{background:#f0eeff;color:#6c63ff;transform:translateY(-1px);}
.prompt-edit-btn{color:#5a5adc;}
.prompt-delete-btn{color:#c0392b;}
.prompt-retry-btn{color:#27ae60;}
.prompt-action-btn[disabled]{opacity:0.5;cursor:not-allowed;}

@media (max-width:768px){
  .daily-prompt-actions{flex-direction:row;flex-wrap:wrap;align-items:stretch;}
  .daily-prompt-actions .btn-outline,
  .daily-prompt-actions .daily-prompt-toggle{flex:1 1 140px;justify-content:center;}
  .daily-prompt-item{flex-wrap:wrap;}
  .daily-prompt-item-body{order:2;flex:1 1 100%;}
  .daily-prompt-vote-btn{order:3;margin-left:auto;}
  .daily-prompt-item-rank{order:1;}
  .daily-prompt-pagination{justify-content:space-between;}
  .daily-prompt-page-numbers{order:3;width:100%;justify-content:center;}
  .daily-prompt-page-status{order:4;width:100%;text-align:center;}
}

/* ============================================================
   サイト全体の心地よさ（フォーカスリング・アニメーションの調律）
   ============================================================ */
:where(button, a, input, textarea, select):focus-visible{
  outline:2px solid rgba(91,141,238,0.55);
  outline-offset:2px;
  border-radius:8px;
}
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible{
  outline-offset:3px;
}
.btn-primary:active,
.btn-outline:active,
.btn-ghost:active{
  transform:translateY(0) scale(0.985);
}
button{ -webkit-tap-highlight-color: transparent; }

/* スクロール中のフェードイン余韻 */
@media (prefers-reduced-motion: no-preference){
  .spots-grid > *,
  .visited-grid > *,
  .chats-grid > *{
    animation: gentle-rise 0.5s ease both;
  }
}
@keyframes gentle-rise{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

/* prefers-reduced-motion: 控えめな世界 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05s !important;
    scroll-behavior: auto !important;
  }
  html{scroll-behavior:auto;}
}

/* セクションへのアンカー移動時、ヘッダーに被らないように余白を持たせる */
#spots, #visited, #community, #hero{
  scroll-margin-top: 88px;
}
@media (max-width: 768px){
  #spots, #visited, #community, #hero{ scroll-margin-top: 72px; }
}

/* 投稿ボタン群のクリック感を少し優しく */
.btn-add-spot:active{ transform: translateY(-1px) scale(0.985); }
.weather-settings-btn:active{ transform: scale(0.94); }

/* ============================================================
   見やすさ・快適さの底上げ（v20260510-3）
   ============================================================ */

/* iOSで入力時に自動ズームされないよう、フォームの最低フォントサイズを16pxへ */
@media (max-width: 768px){
  .form-input, .form-textarea, select.form-input, .gallery-lock-input{
    font-size: 16px;
    padding: 13px 16px;
  }
  .form-textarea{ min-height: 110px; }
  .form-label{ font-size: 0.92rem; }
}

/* タブはスマホで指でつまみやすく */
@media (max-width: 768px){
  .tabs{ gap: 6px; padding: 0 4px; margin-bottom: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .tabs::-webkit-scrollbar{ display: none; }
  .tabs{ scrollbar-width: none; }
  .tab{ flex: 0 0 auto; padding: 10px 16px; min-height: 40px; scroll-snap-align: start; }
}

/* セクション余白をスマホで詰めて、コンテンツに集中しやすく */
@media (max-width: 768px){
  section{ padding: 56px 0; scroll-margin-top: 76px; }
  .container{ padding: 0 16px; }
  .sec-header{ margin-bottom: 18px; }
  .daily-prompt-card{ padding: 16px; }
}

/* カードの押下フィードバック（タップ感） */
.spot-card:active, .visited-card:active, .chat-card:active{
  transform: translateY(-1px) scale(0.997);
  transition: transform .12s ease;
}

/* ボタンのdisabled時を見て分かるように */
button:disabled, .btn-primary:disabled, .btn-outline:disabled, .btn-ghost:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.7);
  box-shadow: none;
  transform: none !important;
}

/* 統計ナンバーのローディング感を少しやさしく */
.stat-num.is-loading{
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  animation: stat-pulse 1.6s ease-in-out infinite;
}
@keyframes stat-pulse{ 0%,100%{ opacity: 0.55 } 50%{ opacity: 1 } }
@media (prefers-reduced-motion: reduce){
  .stat-num.is-loading{ animation: none; opacity: 0.7; }
}

/* リンクの下線をホバー時に優しく出す（ナビ以外） */
.gallery-modal-caption a, .footer-credit a, .guide-note a, .nav-mobile-link:not(:hover){ text-decoration: none; }

/* 「もっと見る」をスマホで押しやすく */
@media (max-width: 768px){
  .btn-section-more{ width: 100%; max-width: 320px; padding: 14px 18px; }
}

/* 掲示板のチャット入力欄を読みやすく */
@media (max-width: 768px){
  #cMsg, #fComment, #asReason, #psText{ line-height: 1.7; }
}

/* スマホでヒーローのスクロールヒントは早めに退避 */
@media (max-width: 768px){
  .scroll-hint{ font-size: 0.72rem; }
}

/* スマホで天気バーの可読性 */
@media (max-width: 768px){
  .weather-bar-label{ font-size: 0.78rem; }
  .weather-items{ font-size: 0.82rem; }
}

/* ============================================================
   スマホ：上部ナビの自動退避（下スクロールで隠す）
   ============================================================ */
#navbar{ transition: transform 0.32s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.3s; }
@media (max-width: 768px){
  #navbar.is-stowed{ transform: translateY(-100%); }
  /* 退避中は影も消して気配をなくす */
  #navbar.is-stowed.scrolled{ box-shadow: none; }
}
/* 復帰時に視認性を少しだけ強める */
#navbar.scrolled{ background: rgba(255,254,250,0.97); }
@media (prefers-reduced-motion: reduce){
  #navbar{ transition: none; }
}

/* ============================================================
   みんなが喜ぶお題ボードのプレミアム機能 CSS
   ============================================================ */
/* お題ガチャ・めくりアニメーション */
.daily-prompt-body.is-flipping {
  animation: prompt-flip 0.4s ease-in-out;
}
@keyframes prompt-flip {
  0% { transform: perspective(600px) rotateX(0deg); opacity: 1; }
  50% { transform: perspective(600px) rotateX(90deg); opacity: 0.2; }
  100% { transform: perspective(600px) rotateX(0deg); opacity: 1; }
}

/* 殿堂入りスタンプ・記念リボン */
.daily-prompt-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.daily-prompt-stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px dashed #e84393;
  background: rgba(232,67,147,0.06);
  color: #d63031;
  font-family: 'Yomogi', 'Noto Sans JP', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  transform: rotate(-2deg);
}

/* リアクションの花束エフェクト・メッセージバブル */
.prompt-reaction-wrapper {
  position: relative;
  display: inline-block;
}
.reaction-particle {
  position: absolute;
  pointer-events: none;
  font-size: 1rem;
  animation: float-particle 1s ease-out forwards;
  z-index: 20;
}
@keyframes float-particle {
  0% { transform: translate(0, 0) scale(0.5); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(var(--rot)); opacity: 0; }
}
.reaction-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(45,52,54,0.95);
  color: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: pop-bubble 1.6s ease-in-out forwards;
}
.reaction-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: rgba(45,52,54,0.95) transparent transparent transparent;
}
@keyframes pop-bubble {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -4px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -12px) scale(0.9); }
}

/* 候補アイテムのメッセージカード・レターセット風デザイン */
.daily-prompt-item {
  position: relative;
  background: #fffbf5;
  border: 1px solid rgba(212,197,178,0.6);
  box-shadow: 2px 3px 8px rgba(184,166,144,0.12);
  margin-top: 6px;
}
.daily-prompt-item::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 40px;
  height: 12px;
  background: rgba(235,225,210,0.85);
  border-left: 1px dashed rgba(180,165,145,0.4);
  border-right: 1px dashed rgba(180,165,145,0.4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  z-index: 5;
  border-radius: 1px;
}
.daily-prompt-item.is-leading {
  background: linear-gradient(135deg, #fffcf8, #f4fbf8);
  border-color: rgba(42,157,143,0.4);
}
.daily-prompt-item.is-mine {
  background: linear-gradient(135deg, #fffcf8, #fbf8ff);
  border-left: 3px solid #6c63ff;
}
.daily-prompt-vote-btn {
  position: relative;
}

/* 投票送信中（Firestore 反映待ち）— やわらかく脈打つ */
.daily-prompt-vote-btn.is-pending .daily-prompt-vote-icon {
  animation: votePendingPulse 1.2s ease-in-out infinite;
}
@keyframes votePendingPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.78; }
}

/* 投票直後にふわっと浮かぶ「+1」 */
.vote-plus-one {
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-weight: 800;
  font-size: 1.1rem;
  color: #e85a4f;
  text-shadow: 0 1px 0 #fff, 0 0 6px rgba(232,90,79,0.45);
  z-index: 9999;
  animation: votePlusOneFloat 1.2s cubic-bezier(0.25, 0.85, 0.4, 1) forwards;
}
@keyframes votePlusOneFloat {
  0%   { transform: translate(-50%, -50%) scale(0.6);  opacity: 0; }
  18%  { transform: translate(-50%, -68%) scale(1.08); opacity: 1; }
  60%  { transform: translate(-50%, -130%) scale(1);   opacity: 0.95; }
  100% { transform: translate(-50%, -190%) scale(0.9); opacity: 0; }
}

/* リアクション粒子用の固定オーバーレイ（再描画でも消えないように body 直下に置く） */
.reaction-overlay {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9998;
}

/* ダークモードでの調整 */
[data-theme="dark"] .vote-plus-one {
  color: #ff8d8d;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 0 8px rgba(255,141,141,0.45);
}

/* ============================================================
   Interactive Map & Leaflet Custom Styles
   ============================================================ */

/* 1. Hero Map Clickable Card & Stamp Badge */
.clickable-map-card {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
  outline: none;
}
.clickable-map-card:hover {
  transform: translateY(-4px) scale(1.01);
}
.clickable-map-card:focus-visible {
  box-shadow: 0 0 0 4px var(--blue-light), 0 16px 48px rgba(43, 67, 120, 0.2) !important;
}

.map-watercolor-label {
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translateX(calc(-50% - 210px)) rotate(-4deg);
  background: rgba(253, 251, 247, 0.96); /* Warm watercolor paper tone */
  border: 2px dashed rgba(79, 127, 216, 0.45);
  border-radius: 12px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 20px rgba(43, 67, 120, 0.12);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none; /* Let click pass through */
  z-index: 5;
}
.label-emoji {
  font-size: 1.1rem;
  display: inline-block;
  animation: stamp-wiggle-anim 3s infinite ease-in-out;
}
.label-text {
  font-family: 'Yomogi', 'Noto Sans JP', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Label interactive reactions to parent card hover */
.clickable-map-card:hover .map-watercolor-label {
  transform: translateX(calc(-50% - 210px)) rotate(0deg) scale(1.08);
  border-color: var(--blue);
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(220, 160, 40, 0.25); /* Elegant gold sunset glow */
}
.clickable-map-card:active {
  transform: translateY(-2px) scale(0.995);
}

@keyframes stamp-wiggle-anim {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}

/* 2. Custom Leaflet Markers */
.custom-leaflet-marker {
  background: transparent !important;
  border: none !important;
}
.custom-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid var(--border-color, #5b8dee);
  box-shadow: 0 4px 16px rgba(43, 67, 120, 0.16);
  font-size: 1.25rem;
  transition: all 0.25s cubic-bezier(0.2, 1, 0.2, 1);
  cursor: pointer;
  position: relative;
}
.custom-marker:hover {
  transform: scale(1.2) translateY(-4px);
  box-shadow: 0 8px 24px rgba(43, 67, 120, 0.24);
  border-color: var(--blue) !important;
  z-index: 99999 !important;
}

/* Pulse animation for current location or highlight */
.custom-marker.is-pulse::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #5b8dee);
  opacity: 0.8;
  animation: marker-pulse-anim 1.8s infinite;
  pointer-events: none;
}
@keyframes marker-pulse-anim {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* 3. Custom Leaflet Popup Bubble Styling */
.leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(79, 127, 216, 0.15) !important;
  border-radius: 20px 16px 22px 18px !important;
  box-shadow: 0 12px 36px rgba(43, 67, 120, 0.15) !important;
  padding: 8px !important;
  backdrop-filter: blur(8px);
}
.leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 36px rgba(43, 67, 120, 0.15) !important;
}
.leaflet-popup-content {
  margin: 10px 12px !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  color: var(--text) !important;
}

/* Popup Inner Contents */
.map-popup-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 250px;
}
.map-popup-cat {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--blue);
  background: var(--blue-light);
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.02em;
}
.map-popup-title {
  font-family: 'Yomogi', 'Noto Sans JP', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1f2a45;
}
.map-popup-area {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}
.map-popup-memo {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #4a5a78;
  border-top: 1px dashed rgba(79, 127, 216, 0.12);
  padding-top: 8px;
  margin-top: 4px;
}
.map-popup-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.map-popup-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.map-popup-btn--primary {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(91, 141, 238, 0.15);
}
.map-popup-btn--primary:hover {
  background: #4b7dd6;
  border-color: #4b7dd6;
  transform: translateY(-1px);
}
.map-popup-btn--ghost {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(79, 127, 216, 0.22);
  color: #4a5a78 !important;
}
.map-popup-btn--ghost:hover {
  background: #ffffff;
  border-color: var(--blue);
  color: var(--blue) !important;
  transform: translateY(-1px);
}

/* 4. Map Control Overrides & Navigation Shortcuts */
.map-quick-nav {
  position: absolute;
  top: 16px;
  right: calc(320px + 16px);
  z-index: 14;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - 390px);
}
.map-nav-btn {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(79, 127, 216, 0.16);
  border-radius: 999px;
  color: #42516e;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(43, 67, 120, 0.08);
  transition: all 0.2s ease;
}
.map-nav-btn:hover {
  background: #ffffff;
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(43, 67, 120, 0.13);
}
.map-nav-btn:active {
  transform: translateY(0);
}

/* Custom Zoom Control Styling */
.leaflet-bar {
  border: 1px solid rgba(79, 127, 216, 0.16) !important;
  box-shadow: 0 4px 14px rgba(43, 67, 120, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.leaflet-bar a {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #42516e !important;
  border-bottom: 1px solid rgba(79, 127, 216, 0.12) !important;
  transition: all 0.2s;
}
.leaflet-bar a:hover {
  background-color: #ffffff !important;
  color: var(--blue) !important;
}

/* Responsive adjustment for Mobile screens */
@media (max-width: 768px) {
  .map-watercolor-label {
    top: auto;
    bottom: 36%;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    padding: 5px 12px;
    border-radius: 10px;
    border-width: 1.5px;
  }
  .label-text {
    font-size: 0.75rem;
  }
  .label-emoji {
    font-size: 0.95rem;
  }
  .clickable-map-card:hover .map-watercolor-label {
    transform: translateX(-50%) rotate(0deg) scale(1.06);
    box-shadow: 0 8px 24px rgba(220, 160, 40, 0.22);
  }
  .map-quick-nav {
    top: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
    z-index: 1000;
  }
  .map-nav-btn {
    font-size: 0.7rem;
    padding: 5px 10px;
  }
}

/* ============================================================
   写真アップロード関連スタイル
   ============================================================ */
.image-upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
.image-upload-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--blue-light);
  border: 1.5px dashed var(--blue);
  border-radius: 18px 14px 20px 15px;
  color: var(--blue);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.image-upload-trigger:hover {
  background: rgba(79, 127, 216, 0.15);
  transform: translateY(-1px);
}
.image-upload-preview-container {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 20px 16px 22px 18px;
  overflow: hidden;
  border: 2px solid var(--border);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
  background: #fff;
  align-self: flex-start;
}
.image-upload-preview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 140px));
  gap: 12px;
  align-items: start;
}
.image-upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-upload-clear-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.image-upload-clear-btn:hover {
  background: #ffedea;
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
}

/* ============================================================
   インバウンド多言語対応 ＆ リアルタイム翻訳 CSS (v20260520)
   ============================================================ */

/* 言語切り替えトグル（デスクトップ） */
.lang-toggle-btn {
  background: rgba(255, 254, 250, 0.92);
  border: 1.5px solid rgba(79, 127, 216, 0.22);
  border-radius: 20px 16px 22px 18px; /* ぬくもりのある手書き風バブル形状 */
  padding: 6px 14px;
  color: var(--blue);
  font-family: 'Yomogi', cursive, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(43, 67, 120, 0.05);
  backdrop-filter: blur(8px);
  text-decoration: none; /* 静的スポットページの<a>タグ用 */
  white-space: nowrap;
}
.lang-toggle-btn:hover {
  background: #fff;
  border-color: rgba(42, 157, 143, 0.45); /* 優しい水彩風グリーン */
  color: var(--hero-accent, #2a9d8f);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 14px rgba(43, 67, 120, 0.12);
}
.lang-toggle-btn:active {
  transform: translateY(0) scale(0.98);
}
.lang-toggle-btn .lang-icon {
  font-size: 0.95rem;
  transition: transform 0.3s ease;
}
.lang-toggle-btn:hover .lang-icon {
  transform: rotate(15deg) scale(1.1);
}

/* 言語切り替え（モバイル） */
.nav-mobile-lang {
  padding: 8px 16px 16px 16px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  margin-top: 10px;
}
.lang-toggle-btn-mobile {
  width: 100%;
  background: rgba(255, 254, 250, 0.9);
  border: 1.5px dashed var(--text-dim);
  border-radius: 12px;
  padding: 10px;
  font-family: 'Yomogi', cursive, sans-serif;
  font-size: 0.9rem;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.lang-toggle-btn-mobile:active {
  background: #fff;
  transform: scale(0.98);
}

/* テーマ切り替えトグル（デスクトップ） */
.theme-toggle-btn {
  background: rgba(255, 254, 250, 0.92);
  border: 1.5px solid rgba(79, 127, 216, 0.22);
  border-radius: 18px 22px 16px 20px; /* ぬくもりのある手書き風バブル形状 */
  padding: 6px 10px;
  color: var(--blue);
  font-size: 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(43, 67, 120, 0.05);
  backdrop-filter: blur(8px);
  width: 36px;
  height: 36px;
}
[data-theme="dark"] .theme-toggle-btn {
  background: rgba(22, 34, 56, 0.85);
  border-color: rgba(96, 165, 250, 0.3);
  color: var(--blue);
}
.theme-toggle-btn:hover {
  background: #fff;
  border-color: rgba(42, 157, 143, 0.45);
  color: var(--hero-accent, #2a9d8f);
  transform: translateY(-2px) rotate(15deg) scale(1.05);
  box-shadow: 0 6px 14px rgba(43, 67, 120, 0.12);
}
[data-theme="dark"] .theme-toggle-btn:hover {
  background: var(--card-hover);
  border-color: var(--blue);
}
.theme-toggle-btn:active {
  transform: translateY(0) scale(0.98);
}
.theme-toggle-btn .theme-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* テーマ切り替え（モバイル） */
.theme-toggle-btn-mobile {
  width: 100%;
  background: rgba(255, 254, 250, 0.9);
  border: 1.5px dashed var(--text-dim);
  border-radius: 12px;
  padding: 10px;
  font-family: 'Yomogi', cursive, sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  margin-top: 8px;
}
[data-theme="dark"] .theme-toggle-btn-mobile {
  background: rgba(22, 34, 56, 0.85);
  border-color: var(--border);
  color: var(--text);
}
.theme-toggle-btn-mobile:active {
  background: #fff;
  transform: scale(0.98);
}
[data-theme="dark"] .theme-toggle-btn-mobile:active {
  background: var(--card-hover);
}

/* インバウンド向けタグバッジ */
.spot-inbound-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px 0;
}
.inbound-tag {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.04);
  border: 1px dashed rgba(0,0,0,0.06);
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
}
.inbound-tag--vegan {
  background-color: #e8f5e9;
  color: #2e7d32;
}
.inbound-tag--card {
  background-color: #e3f2fd;
  color: #1565c0;
}
.inbound-tag--wifi {
  background-color: #f3e5f5;
  color: #6a1b9a;
}
.inbound-tag--traditional {
  background-color: #fff3e0;
  color: #d84315;
}
.inbound-tag--power {
  background-color: #fffde7;
  color: #f57f17;
}
.inbound-tag--parking {
  background-color: #efebe9;
  color: #4e342e;
}
.inbound-tag--pet {
  background-color: #f1f8e9;
  color: #33691e;
}
.inbound-tag--toilet {
  background-color: #e0f7fa;
  color: #006064;
}
.inbound-tag--accessibleToilet {
  background-color: #fce4ec;
  color: #c2185b;
}
.inbound-tag--barrierFree {
  background-color: #e8eaf6;
  color: #303f9f;
}
.inbound-tag--nursingRoom {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

/* Dark theme overrides for inbound tags */
[data-theme="dark"] .inbound-tag {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
[data-theme="dark"] .inbound-tag--vegan {
  background-color: rgba(46, 125, 50, 0.18);
  color: #81c784;
}
[data-theme="dark"] .inbound-tag--card {
  background-color: rgba(21, 101, 192, 0.18);
  color: #90caf9;
}
[data-theme="dark"] .inbound-tag--wifi {
  background-color: rgba(106, 27, 154, 0.18);
  color: #e1bee7;
}
[data-theme="dark"] .inbound-tag--traditional {
  background-color: rgba(216, 67, 21, 0.18);
  color: #ffb74d;
}
[data-theme="dark"] .inbound-tag--power {
  background-color: rgba(245, 127, 23, 0.18);
  color: #fff176;
}
[data-theme="dark"] .inbound-tag--parking {
  background-color: rgba(78, 52, 46, 0.18);
  color: #d7ccc8;
}
[data-theme="dark"] .inbound-tag--pet {
  background-color: rgba(51, 105, 30, 0.18);
  color: #c5e1a5;
}
[data-theme="dark"] .inbound-tag--toilet {
  background-color: rgba(0, 96, 100, 0.18);
  color: #80deea;
}
[data-theme="dark"] .inbound-tag--accessibleToilet {
  background-color: rgba(194, 24, 91, 0.18);
  color: #f48fb1;
}
[data-theme="dark"] .inbound-tag--barrierFree {
  background-color: rgba(48, 63, 159, 0.18);
  color: #9fa8da;
}
[data-theme="dark"] .inbound-tag--nursingRoom {
  background-color: rgba(123, 31, 162, 0.18);
  color: #ce93d8;
}

/* Google Maps 連携ボタン */
.spot-gmaps-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--text-dim);
  text-decoration: none;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.02);
  transition: all 0.2s;
  font-family: 'Yomogi', 'Noto Sans JP', sans-serif;
  width: fit-content;
}
.spot-gmaps-btn:hover {
  color: #34a853;
  background: rgba(52, 168, 83, 0.06);
}

/* リアルタイム翻訳UI */
.translate-btn-container {
  margin-top: 6px;
  display: flex;
  justify-content: flex-start;
}
.translate-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-dim);
  font-size: 0.74rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  transition: all 0.2s ease;
  font-family: 'Yomogi', sans-serif;
}
.translate-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-dark);
  border-color: rgba(0, 0, 0, 0.15);
}
.translated-box {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(255, 235, 160, 0.12); /* ほのかな温かみのある水彩画風黄色ハイライト */
  border-left: 3px solid #ffe082;
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5d4037;
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
  animation: fadeInTranslate 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fadeInTranslate {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.translation-loading {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-left-color: var(--text-dim);
  border-radius: 50%;
  animation: spinLoading 0.8s linear infinite;
  margin-right: 4px;
}
@keyframes spinLoading {
  to { transform: rotate(360deg); }
}

/* ============================================================
   お出かけマップ：オンラインおすすめパネル
   ============================================================ */
.map-online-panel {
  width: 320px;
  height: 100%;
  border-left: 1.5px solid var(--border);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 15;
  position: relative;
  transition: all 0.3s ease;
}

.map-panel-tabs {
  display: flex;
  padding: 12px 16px 0;
  gap: 8px;
  background: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.map-panel-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px 12px 0 0;
  font-family: 'Yomogi', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  border-bottom: none;
  text-align: center;
}

.map-panel-tab:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
}

.map-panel-tab.active {
  background: rgba(255, 255, 255, 0.85);
  color: var(--primary);
  border-color: rgba(79, 127, 216, 0.2);
  box-shadow: 0 -2px 8px rgba(79, 127, 216, 0.05);
}

.map-online-header {
  padding: 12px 20px;
  border-bottom: 1px dashed var(--border);
  flex-shrink: 0;
  border-bottom: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.3);
}

.map-online-icon {
  font-size: 1.25rem;
}

.map-online-title {
  font-family: 'Yomogi', 'Noto Sans JP', sans-serif;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.map-online-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Custom Scrollbar for Online List */
.map-online-list::-webkit-scrollbar {
  width: 6px;
}
.map-online-list::-webkit-scrollbar-track {
  background: transparent;
}
.map-online-list::-webkit-scrollbar-thumb {
  background: rgba(79, 127, 216, 0.15);
  border-radius: 99px;
}
.map-online-list::-webkit-scrollbar-thumb:hover {
  background: rgba(79, 127, 216, 0.3);
}

/* Online Recommendation Cards */
.map-online-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 12px rgba(43, 67, 120, 0.02);
  text-align: left;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
  width: 100%;
}

.map-online-card:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(91, 141, 238, 0.28);
  box-shadow: 0 8px 20px rgba(43, 67, 120, 0.08);
}

.map-online-card:active {
  transform: translateY(0);
}

.map-online-card-emoji {
  font-size: 1.4rem;
  line-height: 1;
  padding-top: 2px;
}

.map-online-card-content {
  flex: 1;
  min-width: 0;
}

.map-online-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.map-online-card-cat {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.map-online-card-area {
  color: var(--text-muted);
}

.map-online-card-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
  word-break: break-word;
}

.map-online-card-memo {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.5;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.map-online-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 32px 16px;
  font-family: 'Yomogi', 'Noto Sans JP', sans-serif;
}

/* Category Left-Border Accents */
.map-online-card.category-food { border-left: 4.5px solid var(--cat-food); }
.map-online-card.category-mohinga { border-left: 4.5px solid var(--cat-mohinga); }
.map-online-card.category-museum { border-left: 4.5px solid var(--cat-museum); }
.map-online-card.category-event { border-left: 4.5px solid var(--cat-event); }
.map-online-card.category-entertainment { border-left: 4.5px solid var(--cat-entertainment); }
.map-online-card.category-nature { border-left: 4.5px solid var(--cat-nature); }
.map-online-card.category-book { border-left: 4.5px solid var(--cat-book); }
.map-online-card.category-shop { border-left: 4.5px solid var(--cat-shop); }
.map-online-card.category-view { border-left: 4.5px solid var(--cat-view); }
.map-online-card.category-relax { border-left: 4.5px solid var(--cat-relax); }

/* ============================================================
   スマートフォン表示用メディアクエリ
   ============================================================ */
@media (max-width: 768px) {
  .map-modal-content-wrapper {
    flex-direction: column !important;
  }
  
  .map-online-panel {
    width: 100% !important;
    height: 180px !important;
    border-left: none !important;
    border-top: 1.5px solid var(--border);
    background: rgba(255, 255, 255, 0.7);
  }
  
  .map-panel-tabs {
    padding: 8px 12px 0 !important;
  }
  
  .map-panel-tab {
    font-size: 0.85rem !important;
    padding: 6px 8px !important;
  }
  
  .map-online-header {
    padding: 8px 16px 4px !important;
    border-bottom: none !important;
  }
  
  .map-online-icon {
    font-size: 1.1rem !important;
  }
  
  .map-online-title {
    font-size: 0.95rem !important;
  }
  
  .map-online-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 16px 12px !important;
    gap: 12px !important;
    height: calc(100% - 32px) !important;
    display: flex !important;
  }
  
  .map-online-list::-webkit-scrollbar {
    height: 4px;
    width: auto;
  }
  .map-online-list::-webkit-scrollbar-thumb {
    background: rgba(79, 127, 216, 0.12);
  }
  
  .map-online-card {
    flex: 0 0 240px !important;
    height: calc(100% - 4px) !important;
    padding: 8px 12px !important;
    align-items: center !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  
  .map-online-card-emoji {
    font-size: 1.2rem !important;
    padding-top: 0 !important;
  }
  
  .map-online-card-name {
    font-size: 0.84rem !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .map-online-card-memo {
    display: none !important;
  }
  
  .map-online-card-meta {
    margin-bottom: 2px !important;
    font-size: 0.68rem !important;
  }
}

/* ==========================================================================
   PREMIUM WEATHER BACKDROP & UX STYLES
   ========================================================================== */

/* Weather backdrop overrides */
#hero.weather-sunny {
  background: radial-gradient(circle at 20% 15%, rgba(255, 235, 180, 0.32), transparent 28%),
              radial-gradient(circle at 82% 18%, rgba(255, 220, 150, 0.24), transparent 34%),
              radial-gradient(circle at 50% 82%, rgba(255, 200, 120, 0.18), transparent 38%),
              linear-gradient(135deg, #fffef7 0%, #fffcf2 58%, #fff8e8 100%) !important;
}
#hero.weather-sunny .orb-1 { background: radial-gradient(circle, rgba(255,250,220,0.92), transparent) !important; }
#hero.weather-sunny .orb-2 { background: radial-gradient(circle, #ffe3bd, transparent) !important; }
#hero.weather-sunny .orb-3 { background: radial-gradient(circle, #ffd0a8, transparent) !important; }

#hero.weather-cloudy {
  background: radial-gradient(circle at 20% 15%, rgba(210, 220, 230, 0.3), transparent 26%),
              radial-gradient(circle at 82% 18%, rgba(190, 205, 220, 0.26), transparent 32%),
              radial-gradient(circle at 50% 82%, rgba(180, 195, 215, 0.2), transparent 36%),
              linear-gradient(135deg, #fbfcfd 0%, #edf1f6 58%, #eef3f7 100%) !important;
}
#hero.weather-cloudy .orb-1 { background: radial-gradient(circle, rgba(230,238,245,0.9), transparent) !important; }
#hero.weather-cloudy .orb-2 { background: radial-gradient(circle, #dbe4ef, transparent) !important; }
#hero.weather-cloudy .orb-3 { background: radial-gradient(circle, #cfdbeb, transparent) !important; }

#hero.weather-rainy {
  background: radial-gradient(circle at 20% 15%, rgba(170, 190, 210, 0.35), transparent 26%),
              radial-gradient(circle at 82% 18%, rgba(150, 175, 200, 0.28), transparent 32%),
              radial-gradient(circle at 50% 82%, rgba(135, 160, 185, 0.22), transparent 36%),
              linear-gradient(135deg, #f3f6f9 0%, #e1e7f0 58%, #d8e2eb 100%) !important;
}
#hero.weather-rainy .orb-1 { background: radial-gradient(circle, rgba(200,215,230,0.85), transparent) !important; }
#hero.weather-rainy .orb-2 { background: radial-gradient(circle, #c7d5e6, transparent) !important; }
#hero.weather-rainy .orb-3 { background: radial-gradient(circle, #b8cbdc, transparent) !important; }

#hero.weather-snowy {
  background: radial-gradient(circle at 20% 15%, rgba(240, 245, 255, 0.4), transparent 28%),
              radial-gradient(circle at 82% 18%, rgba(220, 235, 255, 0.32), transparent 34%),
              radial-gradient(circle at 50% 82%, rgba(205, 220, 245, 0.24), transparent 38%),
              linear-gradient(135deg, #ffffff 0%, #f5f8fc 58%, #edf3fa 100%) !important;
}
#hero.weather-snowy .orb-1 { background: radial-gradient(circle, rgba(255,255,255,0.95), transparent) !important; }
#hero.weather-snowy .orb-2 { background: radial-gradient(circle, #eaf1fb, transparent) !important; }
#hero.weather-snowy .orb-3 { background: radial-gradient(circle, #dbe7f7, transparent) !important; }

/* --------------------------------------------------------------------------
   Whole-page weather-linked watercolor background (body)
   👑1番目の都市の天気を body 全体の水彩背景に連動させる
   -------------------------------------------------------------------------- */
body.weather-sunny {
  background:
    radial-gradient(circle at 12% 3%, rgba(255,209,120,0.20), transparent 26%),
    radial-gradient(circle at 90% 10%, rgba(255,224,150,0.16), transparent 30%),
    radial-gradient(circle at 50% 97%, rgba(255,206,128,0.13), transparent 44%),
    repeating-linear-gradient(0deg, rgba(79,127,216,0.035) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(255,243,216,0.55), rgba(255,248,232,0.40)),
    var(--bg) !important;
}
body.weather-cloudy {
  background:
    radial-gradient(circle at 12% 3%, rgba(206,216,228,0.22), transparent 26%),
    radial-gradient(circle at 90% 10%, rgba(190,203,218,0.18), transparent 30%),
    radial-gradient(circle at 50% 97%, rgba(196,208,222,0.14), transparent 44%),
    repeating-linear-gradient(0deg, rgba(79,127,216,0.035) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(237,241,246,0.60), rgba(241,244,248,0.45)),
    var(--bg) !important;
}
body.weather-rainy {
  background:
    radial-gradient(circle at 12% 3%, rgba(150,178,206,0.26), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(132,162,194,0.20), transparent 32%),
    radial-gradient(circle at 50% 97%, rgba(140,168,198,0.16), transparent 46%),
    repeating-linear-gradient(0deg, rgba(79,127,216,0.04) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(222,231,240,0.62), rgba(228,235,243,0.48)),
    var(--bg) !important;
}
body.weather-snowy {
  background:
    radial-gradient(circle at 12% 3%, rgba(214,230,248,0.30), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(224,236,252,0.24), transparent 32%),
    radial-gradient(circle at 50% 97%, rgba(220,233,250,0.18), transparent 46%),
    repeating-linear-gradient(0deg, rgba(79,127,216,0.03) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, rgba(244,249,255,0.66), rgba(248,251,255,0.50)),
    var(--bg) !important;
}

/* Weather particles containers & animations */
.hero-weather-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.weather-particle {
  position: absolute;
  will-change: transform, opacity;
}

/* Sunny Particles: golden slow floating dots */
.sunny-particle {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255,225,140,0.85) 0%, rgba(255,210,100,0) 80%);
  border-radius: 50%;
  animation: floatSunny 12s linear infinite;
}
@keyframes floatSunny {
  0% {
    transform: translate3d(0, 105%, 0) scale(0.4);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--drift-x, 40px), -5%, 0) scale(1.2);
    opacity: 0;
  }
}

/* Cloudy Particles: massive slow passing mist shadows */
.cloudy-particle {
  width: 520px;
  height: 380px;
  background: radial-gradient(ellipse, rgba(226, 235, 246, 0.26) 0%, rgba(226, 235, 246, 0) 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: driftCloudy 48s linear infinite;
}
@keyframes driftCloudy {
  0% {
    transform: translate3d(-105%, 0, 0);
  }
  100% {
    transform: translate3d(105%, var(--drift-y, 20px), 0);
  }
}

/* Rainy Particles: fast vertical/diagonal slashes */
.rainy-particle {
  width: 1.5px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(140, 170, 205, 0.45), rgba(140, 170, 205, 0.05));
  animation: fallRain 1.4s linear infinite;
}
@keyframes fallRain {
  0% {
    transform: translate3d(0, -40px, 0) rotate(12deg);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--drift-x, -30px), 105vh, 0) rotate(12deg);
    opacity: 0;
  }
}

/* Snowy Particles: fluttering crystal flakes */
.snowy-particle {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.85);
  animation: flutterSnow 9s linear infinite;
}
@keyframes flutterSnow {
  0% {
    transform: translate3d(0, -10px, 0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--drift-x, 60px), 105vh, 0) scale(1.1);
    opacity: 0;
  }
}

/* ==========================================================================
   PREMIUM GACHA WHEEL & WATERCOLOR SPLASH UX STYLES
   ========================================================================== */

/* Gacha Wheel UI */
.gacha-wheel-wrapper {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 10px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gacha-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  font-size: 2.1rem;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
  animation: pointerWiggle 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pointerWiggle {
  0%, 100% { transform: translateX(-50%) rotate(180deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(180deg) translateY(-2px); }
}

.gacha-wheel-shadow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 126, 107, 0.14) 40%, rgba(140, 126, 107, 0.04) 70%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.gacha-wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #FFFEFA;
  box-shadow: 0 6px 20px rgba(140, 126, 107, 0.22), inset 0 2px 5px rgba(255,255,255,0.8);
  position: relative;
  z-index: 2;
  transform: rotate(0deg);
  transition: transform 3.5s cubic-bezier(0.15, 0.85, 0.35, 1);
  will-change: transform;
}

.gacha-wheel-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Watercolor Splash Splat effect inside modal */
.gacha-splash-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gacha-splash-blob {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  filter: blur(12px);
  will-change: transform, opacity;
}

.gacha-splash-blob.animate {
  animation: watercolorSplat 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes watercolorSplat {
  0% {
    transform: scale(0) translate3d(0, 0, 0);
    opacity: 0.9;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    transform: scale(2.4) translate3d(var(--splash-dx, 20px), var(--splash-dy, -20px), 0);
    opacity: 0;
  }
}

/* Premium 3D Card Rise override */
.gacha-result-card.premium-3d-rise {
  opacity: 0;
  transform: perspective(800px) rotateX(16deg) rotateY(-8deg) translateY(24px) scale(0.92);
  box-shadow: 0 15px 35px rgba(43, 67, 120, 0.16), 0 0 0 1px rgba(79, 127, 216, 0.08) !important;
  animation: premium3DCardRise 0.75s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
}

@keyframes premium3DCardRise {
  to {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1);
    box-shadow: 0 8px 24px rgba(43, 67, 120, 0.08), 0 0 0 1px rgba(79, 127, 216, 0.12);
  }
}

/* Amenities Premium UI */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.amenity-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-card, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.85rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.amenity-checkbox:hover {
  background: rgba(79, 127, 216, 0.06);
  border-color: rgba(79, 127, 216, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.amenity-checkbox input[type="checkbox"] {
  accent-color: var(--blue, #4f7fd8);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Toilet Rating Stars styling */
.toilet-rating-stars {
  display: flex;
  gap: 6px;
  padding: 4px 0;
}

.toilet-star-btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--text-dim, #8f9bb3);
  cursor: pointer;
  padding: 0 4px;
  transition: transform 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.toilet-star-btn:hover {
  transform: scale(1.2);
}

.toilet-star-btn.active {
  color: #ffc107;
  text-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

/* Spot Card Amenities Badge Display */
.spot-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.amenity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(79, 127, 216, 0.06);
  color: var(--blue, #4f7fd8);
  border: 1px solid rgba(79, 127, 216, 0.15);
  font-weight: 500;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
}

.amenity-badge:hover {
  transform: translateY(-1.5px);
  background: rgba(79, 127, 216, 0.1);
  border-color: rgba(79, 127, 216, 0.3);
  box-shadow: 0 4px 8px rgba(79, 127, 216, 0.08);
}

.amenity-badge--budget {
  background: rgba(207, 157, 82, 0.11);
  color: #8a5a1f;
  border-color: rgba(207, 157, 82, 0.24);
}

/* ============================================================
   ダークモード：主要コンポーネントの仕上げ（v20260520-dark）
   ここから下は [data-theme="dark"] 限定の上書き。
   light テーマには一切影響しません。
   ============================================================ */
[data-theme="dark"] {
  --hand-accent: #4FD1C5;
  --teal-text: #5FCFC1;            /* ダークで読める теаль文字 */
  --surface-1: #162238;            /* カード標準面 */
  --surface-2: #1D2E4B;            /* 少し浮いた面 */
  --surface-sunken: #0F1626;       /* 沈んだ面（引用・入力など） */
  --tint-blue: rgba(96,165,250,0.14);
  --tint-teal: rgba(79,209,197,0.14);
}

/* --- 背景・セクション --- */
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 4%, rgba(96,165,250,0.07), transparent 26%),
    radial-gradient(circle at 90% 12%, rgba(79,209,197,0.06), transparent 28%),
    var(--bg);
}

/* ダークモードでも body 全体の水彩背景を天気に連動（暗さは保ったまま色味だけ寄せる） */
[data-theme="dark"] body.weather-sunny {
  background:
    radial-gradient(circle at 12% 3%, rgba(255,198,110,0.11), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(255,182,96,0.085), transparent 34%),
    radial-gradient(circle at 50% 97%, rgba(255,176,92,0.06), transparent 48%),
    linear-gradient(180deg, rgba(60,46,22,0.32), rgba(36,30,18,0.18)),
    var(--bg) !important;
}
[data-theme="dark"] body.weather-cloudy {
  background:
    radial-gradient(circle at 12% 3%, rgba(150,165,186,0.085), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(138,154,176,0.07), transparent 34%),
    radial-gradient(circle at 50% 97%, rgba(140,156,178,0.05), transparent 48%),
    linear-gradient(180deg, rgba(36,42,52,0.34), rgba(24,28,36,0.20)),
    var(--bg) !important;
}
[data-theme="dark"] body.weather-rainy {
  background:
    radial-gradient(circle at 12% 3%, rgba(96,150,210,0.12), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(84,134,194,0.09), transparent 36%),
    radial-gradient(circle at 50% 97%, rgba(88,140,200,0.065), transparent 50%),
    linear-gradient(180deg, rgba(20,32,48,0.40), rgba(14,22,34,0.22)),
    var(--bg) !important;
}
[data-theme="dark"] body.weather-snowy {
  background:
    radial-gradient(circle at 12% 3%, rgba(170,200,235,0.12), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(186,212,240,0.095), transparent 36%),
    radial-gradient(circle at 50% 97%, rgba(180,206,236,0.07), transparent 50%),
    linear-gradient(180deg, rgba(28,38,54,0.36), rgba(18,26,38,0.20)),
    var(--bg) !important;
}
[data-theme="dark"] #hero {
  background:
    radial-gradient(circle at 20% 15%, rgba(96,165,250,0.13), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(79,209,197,0.10), transparent 30%),
    radial-gradient(circle at 50% 82%, rgba(96,165,250,0.08), transparent 34%),
    linear-gradient(135deg, #0B0F19 0%, #111827 58%, #0E1A24 100%);
}
[data-theme="dark"] #hero::before {
  background:
    radial-gradient(ellipse at center, rgba(11,15,25,0.88) 0%, rgba(11,15,25,0.80) 38%, rgba(11,15,25,0.56) 72%, rgba(11,15,25,0.42) 100%),
    url('assets/popopo-map-visual-20260518.png') center 46% / cover no-repeat;
  opacity: 0.55;
}
[data-theme="dark"] #spots { background: rgba(17,24,39,0.35); }
[data-theme="dark"] #visited,
[data-theme="dark"] #community {
  background: linear-gradient(180deg, rgba(17,24,39,0.5), rgba(11,15,25,0.66));
}

/* --- 背景オーブ --- */
[data-theme="dark"] .orb { opacity: 0.14; }
[data-theme="dark"] .orb-1 { background: radial-gradient(circle, rgba(96,165,250,0.55), transparent); }
[data-theme="dark"] .orb-2 { background: radial-gradient(circle, rgba(167,139,250,0.45), transparent); }
[data-theme="dark"] .orb-3 { background: radial-gradient(circle, rgba(79,209,197,0.45), transparent); }

/* --- ボタン --- */
[data-theme="dark"] .btn-outline { background: rgba(96,165,250,0.06); }
[data-theme="dark"] .btn-outline:hover { background: var(--tint-blue); }
[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text); }
[data-theme="dark"] .btn-add-spot { background: var(--tint-blue); }
[data-theme="dark"] .btn-add-spot:hover { background: var(--surface-2); }
[data-theme="dark"] .btn-add-want { background: rgba(42,157,143,0.16); color: #7fd4c9; border-color: rgba(42,157,143,0.5); }
[data-theme="dark"] .btn-add-want:hover { background: rgba(42,157,143,0.26); color: #a6e6dd; border-color: rgba(42,157,143,0.7); }
[data-theme="dark"] .btn-gallery-all { background: var(--surface-1); }
[data-theme="dark"] .btn-gallery-all:hover { background: var(--surface-2); }

/* --- ナビ（発見カード行） --- */
[data-theme="dark"] #navbar.scrolled {
  background: rgba(17, 24, 39, 0.97);
}
[data-theme="dark"] .nav-discovery {
  background: rgba(17,24,39,0.92);
  border-top-color: rgba(96,165,250,0.12);
}
[data-theme="dark"] .nav-discovery-category {
  background: var(--surface-2);
  border-color: rgba(96,165,250,0.22);
}
[data-theme="dark"] .nav-gacha-btn {
  background: linear-gradient(165deg, #1D2E4B, #162238);
  border-color: rgba(170,150,120,0.35);
  color: #E8DEC9;
}
[data-theme="dark"] .nav-gacha-btn:hover { background: var(--surface-2); }

/* --- ヒーロー内パーツ --- */
[data-theme="dark"] .hero-float-card {
  background: rgba(22,34,56,0.92);
  border-color: rgba(96,165,250,0.18);
}
[data-theme="dark"] .hero-float-text { color: #AEB9CF; }
[data-theme="dark"] .hero-float-meta { color: #9FB0C9; }
[data-theme="dark"] .hero-float-kind { background: var(--tint-blue); }
[data-theme="dark"] .hero-badge,
[data-theme="dark"] .hero-chat-ticker {
  background: rgba(22,34,56,0.86);
  color: var(--teal-text);
}
[data-theme="dark"] .hero-gallery-item { background: var(--surface-2); }
[data-theme="dark"] .hero-title { color: #F3F4F6; }
[data-theme="dark"] .hero-accent { color: var(--teal-text); }
[data-theme="dark"] .hero-sub { color: #AEB9CF; }
[data-theme="dark"] .hero-story-link {
  background: rgba(22,34,56,0.82);
  color: var(--teal-text);
}
[data-theme="dark"] .hero-story-link:hover { background: var(--surface-2); color: var(--teal-text); }
[data-theme="dark"] .hero-quick-link {
  background: rgba(22,34,56,0.7);
  color: #C7D0E2;
  border-color: rgba(96,165,250,0.18);
}
[data-theme="dark"] .hero-quick-link:hover { background: var(--surface-2); color: var(--teal-text); }
[data-theme="dark"] .hero-quick-link--gacha {
  background: linear-gradient(165deg, #21304d, #1a2740);
  color: #E8DEC9;
  border-color: rgba(170,150,120,0.4);
}
[data-theme="dark"] .hero-quick-link--game {
  background: rgba(22,34,56,0.7);
  color: var(--blue);
}
[data-theme="dark"] .hero-stats {
  background: rgba(22,34,56,0.82);
  border-color: rgba(96,165,250,0.18);
}
[data-theme="dark"] .hero-btns .btn-outline {
  background: rgba(22,34,56,0.55);
  color: #AEB9CF;
}
[data-theme="dark"] .hero-btns .btn-outline:hover { background: var(--tint-blue); }
[data-theme="dark"] .scroll-hint { background: rgba(22,34,56,0.85); }

/* --- ガチャ --- */
[data-theme="dark"] .gacha-spinner-display {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border-color: rgba(96,165,250,0.16);
  color: #C7D0E2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .gacha-result-card {
  background: var(--surface-1);
  border-color: rgba(96,165,250,0.16);
}

/* --- タブ・フィルター --- */
[data-theme="dark"] .tab { background: rgba(22,34,56,0.7); }
[data-theme="dark"] .tabs-scroll-btn {
  background: var(--surface-2);
  border-color: rgba(96,165,250,0.22);
}
[data-theme="dark"] .tabs-fade-left { background: linear-gradient(to right, var(--bg) 20%, transparent); }
[data-theme="dark"] .tabs-fade-right { background: linear-gradient(to left, var(--bg) 20%, transparent); }
[data-theme="dark"] .area-filter-row-sub {
  background: rgba(255,255,255,0.03);
  border-color: rgba(96,165,250,0.14);
}
[data-theme="dark"] .area-chip {
  background: rgba(22,34,56,0.8);
  color: #AEB9CF;
}
[data-theme="dark"] .area-chip-main { background: var(--surface-1); }
[data-theme="dark"] .area-chip-sub { background: rgba(22,34,56,0.6); }
[data-theme="dark"] .want-list-toggle { background: rgba(22,34,56,0.8); }
[data-theme="dark"] .barrier-free-toggle { background: rgba(22,34,56,0.8); }
[data-theme="dark"] .want-list-hint {
  background: var(--tint-blue);
  border-color: rgba(96,165,250,0.22);
}

/* --- スポットカード --- */
[data-theme="dark"] .spot-card { background: var(--surface-1); }
[data-theme="dark"] .spot-card:hover { background: var(--surface-2); }
[data-theme="dark"] .spot-intent-badge {
  background: var(--tint-teal);
  color: var(--teal-text);
}
[data-theme="dark"] .spot-like-btn { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .spot-share-btn { background: rgba(255,255,255,0.04); color: var(--green); border-color: rgba(42,157,143,0.32); }
[data-theme="dark"] .spot-card-weather {
  background: var(--surface-sunken);
  border-color: rgba(96,165,250,0.2);
}
[data-theme="dark"] .spot-latest-review {
  background: rgba(255,255,255,0.03);
}
[data-theme="dark"] .spot-latest-review span { background: var(--tint-teal); color: var(--teal-text); }
[data-theme="dark"] .spot-latest-review strong { color: #C7D0E2; }
[data-theme="dark"] .spot-latest-review:hover { background: var(--surface-2); }
[data-theme="dark"] .spot-link,
[data-theme="dark"] .spot-reviews-btn,
[data-theme="dark"] .spot-post-btn { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .spots-empty-card { background: var(--surface-1); }

/* --- 感想カード --- */
[data-theme="dark"] .visited-card { background: var(--surface-1); }
[data-theme="dark"] .visited-category-badge.food { background: rgba(255,107,53,0.16); }
[data-theme="dark"] .visited-category-badge.museum { background: rgba(155,93,229,0.18); }
[data-theme="dark"] .visited-review {
  background: var(--surface-sunken);
}
[data-theme="dark"] .visited-photo-link:hover { background: var(--surface-2); }
[data-theme="dark"] .review-seen-btn { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .visited-book {
  background: rgba(167,139,250,0.12);
  border-color: rgba(167,139,250,0.3);
  color: #C4B5FD;
}
[data-theme="dark"] .visited-book a { color: #C4B5FD; }

/* --- 掲示板・お題 --- */
[data-theme="dark"] .daily-prompt-card {
  background: linear-gradient(135deg, var(--surface-1), rgba(29,46,75,0.85));
  border-color: rgba(79,209,197,0.26);
}
[data-theme="dark"] .daily-prompt-kicker { background: var(--tint-teal); color: var(--teal-text); }
[data-theme="dark"] .firebase-notice {
  background: rgba(252,211,77,0.1);
  border-color: rgba(252,211,77,0.32);
  color: #FCD34D;
}
[data-theme="dark"] .filter-bar { background: var(--surface-1); }
[data-theme="dark"] .filter-select { background: var(--surface-sunken); }
[data-theme="dark"] .chat-card { background: var(--surface-1); }
[data-theme="dark"] .chat-reaction-btn { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .chat-thread {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border-color: rgba(96,165,250,0.1);
}
[data-theme="dark"] .chat-replies-label {
  background: var(--surface-2);
  color: var(--text-dim);
}
[data-theme="dark"] .chat-card.is-reply {
  background: var(--surface-2);
  border-color: rgba(79,209,197,0.16);
}
[data-theme="dark"] .chat-card.is-reply .chat-avatar {
  background: rgba(79,209,197,0.16);
  color: var(--teal-text);
}
[data-theme="dark"] .chat-reply-clear { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .chat-reply-clear:hover { background: rgba(255,255,255,0.16); }
[data-theme="dark"] .btn-reply { background: rgba(255,255,255,0.04); }
/* お題・投票（v20260510で追加した部分） */
[data-theme="dark"] .daily-prompt-toggle { background: rgba(96,165,250,0.1); }
[data-theme="dark"] .daily-prompt-toggle:hover { background: var(--surface-2); }
[data-theme="dark"] .daily-prompt-suggest {
  background: linear-gradient(135deg, rgba(29,46,75,0.7), rgba(22,34,56,0.7));
  border-color: rgba(79,209,197,0.26);
}
[data-theme="dark"] .daily-prompt-item { background: var(--surface-2); }
[data-theme="dark"] .daily-prompt-item:hover { background: #233655; }
[data-theme="dark"] .daily-prompt-item.is-leading {
  background: linear-gradient(135deg, var(--surface-2), rgba(79,209,197,0.12));
}
[data-theme="dark"] .daily-prompt-empty { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .daily-prompt-item-date,
[data-theme="dark"] .daily-prompt-page-status { color: var(--text-dim); }
[data-theme="dark"] .daily-prompt-page-btn {
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  border-color: rgba(96,165,250,0.2);
}
[data-theme="dark"] .daily-prompt-page-btn:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--teal-text);
}

/* --- フォーム --- */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea { background: var(--surface-sunken); }
[data-theme="dark"] .form-assurance {
  background: var(--tint-blue);
  border-color: rgba(96,165,250,0.22);
  color: #AEB9CF;
}
[data-theme="dark"] .star-btn { color: #3A4860; }
[data-theme="dark"] .star-btn.active,
[data-theme="dark"] .star-btn:hover {
  color: #fbbf24 !important;
  transform: scale(1.2);
}
[data-theme="dark"] .form-input[type="date"] {
  color-scheme: dark !important;
}
[data-theme="dark"] .form-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.9) !important;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
[data-theme="dark"] .form-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
[data-theme="dark"] .filter-select,
[data-theme="dark"] .btn-post-action { background: var(--surface-sunken); }
[data-theme="dark"] .btn-post-action { border-color: var(--border); }
[data-theme="dark"] .btn-post-action.is-delete:hover {
  background: rgba(255,77,77,0.14);
  border-color: rgba(255,120,120,0.4);
  color: #FF8585;
}

/* --- モーダル類 --- */
[data-theme="dark"] .gallery-modal-visual { background: var(--surface-sunken); }
[data-theme="dark"] .gallery-modal-image { background: #1A2740; }
[data-theme="dark"] .gallery-lock-visual { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .gallery-lock-icon { background: var(--surface-2); }
[data-theme="dark"] .gallery-lock-panel {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
[data-theme="dark"] .gallery-grid-container { background: var(--surface-sunken); }
[data-theme="dark"] .gallery-grid-item { background: var(--surface-1); }
[data-theme="dark"] .gallery-tabs { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .gallery-tab.active { color: var(--text); border-bottom-color: var(--blue); }
[data-theme="dark"] .gallery-modal-box.is-dictionary-mode .gallery-modal-visual {
  background:
    radial-gradient(circle at 18% 12%, rgba(96,165,250,0.07), transparent 34%),
    linear-gradient(180deg, #141d30 0%, #0F1626 100%);
}
[data-theme="dark"] .kiriban-card {
  background:
    radial-gradient(circle at 22% 10%, rgba(96,165,250,0.18), transparent 40%),
    linear-gradient(135deg, #1D2E4B, #162238);
  border-color: rgba(96,165,250,0.3);
}
[data-theme="dark"] .kiriban-close { background: var(--surface-2); }
[data-theme="dark"] .intro-story-card {
  background:
    radial-gradient(circle at 18% 8%, rgba(96,165,250,0.12), transparent 30%),
    var(--paper);
  border-color: rgba(96,165,250,0.22);
}
[data-theme="dark"] .intro-story-close { background: var(--surface-2); }
[data-theme="dark"] .intro-story-kicker { color: var(--teal-text); }
[data-theme="dark"] .intro-story-slide p { color: #AEB9CF; }
[data-theme="dark"] .intro-story-slide p[lang="en"] { color: #9FB0C9; }

/* --- 天気バー --- */
[data-theme="dark"] .weather-bar {
  background: linear-gradient(135deg, var(--surface-1), rgba(29,46,75,0.85));
  border-color: rgba(96,165,250,0.22);
}
[data-theme="dark"] .weather-city-chip { background: var(--surface-sunken); }
[data-theme="dark"] .weather-alert-bar--advisory { background: rgb(69,53,18); border-color: rgba(245,200,66,0.62); color: #ffe7a3; }
[data-theme="dark"] .weather-alert-bar--warning { background: rgb(72,32,28); border-color: rgba(248,113,113,0.62); color: #ffd5cb; }
[data-theme="dark"] .weather-alert-bar--danger { background: rgb(74,26,31); border-color: rgba(248,113,113,0.7); color: #ffe0d9; }
[data-theme="dark"] .weather-alert-bar--emergency { background: rgb(48,34,83); border-color: rgba(196,181,253,0.68); color: #eadcff; }
[data-theme="dark"] .weather-alert-bar--notice { background: rgb(23,39,66); border-color: rgba(147,197,253,0.55); color: #d7e8ff; }
[data-theme="dark"] .weather-alert-type { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .weather-level-chip { background: rgba(255,255,255,0.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); color: inherit; }
[data-theme="dark"] .weather-alert-note { opacity: 0.92; }
[data-theme="dark"] .weather-unavailable { color: #b9c7dc; }
[data-theme="dark"] .navbar-alert-strip--warning { background: #991b1b; }
[data-theme="dark"] .navbar-alert-strip--danger { background: #7f1d1d; }
[data-theme="dark"] .navbar-alert-strip--emergency { background: #5b21b6; }
[data-theme="dark"] .navbar-alert-strip--advisory { background: #a16207; color: #fef9c3; }
[data-theme="dark"] .navbar-alert-strip--notice { background: #1e3a8a; }

/* --- スマホ Bottom Nav --- */
[data-theme="dark"] .bottom-nav {
  background: rgba(17,24,39,0.94);
  border-top-color: var(--border);
}
[data-theme="dark"] .bottom-nav-post::before { background: rgba(255,255,255,0.04); }

/* --- 人参鹿ガイド --- */
[data-theme="dark"] .carrot-guide-bubble {
  background: rgba(22,34,56,0.96);
  border-color: rgba(79,209,197,0.4);
}
[data-theme="dark"] .carrot-guide-bubble::after {
  background: rgba(22,34,56,0.96);
  border-color: rgba(79,209,197,0.32);
}
[data-theme="dark"] .carrot-guide-kicker { color: var(--teal-text); }
[data-theme="dark"] .carrot-guide-text { color: #AEB9CF; }
[data-theme="dark"] .carrot-guide-link { background: rgba(96,165,250,0.1); }
[data-theme="dark"] .carrot-guide-btn { background: var(--surface-1); }
[data-theme="dark"] .carrot-guide-btn img { background: var(--surface-2); }

/* --- about（この場所を作った理由）ページ --- */
[data-theme="dark"] .about-page {
  background:
    radial-gradient(circle at 14% 16%, rgba(79,209,197,0.08), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(96,165,250,0.08), transparent 28%),
    linear-gradient(180deg, #0B0F19 0%, #111827 48%, #0E1A24 100%);
}
[data-theme="dark"] .about-hero-luxury {
  background:
    radial-gradient(circle at 22% 18%, rgba(96,165,250,0.12), transparent 24%),
    radial-gradient(circle at 78% 22%, rgba(79,209,197,0.1), transparent 28%),
    linear-gradient(135deg, #0B0F19 0%, #111827 56%, #0E1A24 100%);
}
[data-theme="dark"] .about-hero-luxury::before {
  background:
    radial-gradient(ellipse at center, rgba(11,15,25,0.64) 0%, rgba(11,15,25,0.54) 36%, rgba(11,15,25,0.32) 68%, rgba(11,15,25,0.18) 100%),
    url('assets/popopo-map-visual-20260518.png') center 48% / cover no-repeat;
  opacity: 0.85;
  filter: saturate(1.05) contrast(0.95) brightness(1.15);
}
[data-theme="dark"] html[lang="en"] .about-hero-luxury::before {
  background:
    radial-gradient(ellipse at center, rgba(11,15,25,0.64) 0%, rgba(11,15,25,0.54) 36%, rgba(11,15,25,0.32) 68%, rgba(11,15,25,0.18) 100%),
    url('assets/popopo-map-visual-en.jpg') center 48% / cover no-repeat;
  opacity: 0.85;
  filter: saturate(1.05) contrast(0.95) brightness(1.15);
}
[data-theme="dark"] .about-luxury-label {
  background: rgba(22,34,56,0.7);
  color: var(--teal-text);
}
[data-theme="dark"] .about-luxury-title { color: #F3F4F6; }
[data-theme="dark"] .about-luxury-lead {
  background: rgba(22,34,56,0.7);
  border-color: rgba(96,165,250,0.18);
  color: #C7D0E2;
}
[data-theme="dark"] .about-story-section {
  background: linear-gradient(180deg, rgba(17,24,39,0.6), rgba(11,15,25,0.78));
}
[data-theme="dark"] .about-story-eyebrow { color: var(--teal-text); }
[data-theme="dark"] .about-story-heading p { color: #AEB9CF; }
[data-theme="dark"] .about-story-chapter {
  background: var(--surface-1);
  border-color: rgba(96,165,250,0.2);
}
[data-theme="dark"] .about-story-chapter:nth-child(even) {
  background: var(--surface-2);
  border-color: rgba(79,209,197,0.22);
}
[data-theme="dark"] .about-chapter-number {
  background: var(--tint-blue);
  border-color: rgba(96,165,250,0.3);
}
[data-theme="dark"] .about-chapter-copy h2 { color: #F3F4F6; }
[data-theme="dark"] .about-chapter-copy p { color: #C7D0E2; }
[data-theme="dark"] .about-chapter-copy p + p { color: #9FB0C9; }
[data-theme="dark"] .about-story-closing { color: var(--teal-text) !important; }
[data-theme="dark"] .about-story-closing-luxury {
  background: var(--surface-1);
  border-color: rgba(79,209,197,0.34);
}

/* --- how-to（使い方）ページ --- */
[data-theme="dark"] .guide-hero {
  background:
    radial-gradient(circle at 20% 18%, rgba(96,165,250,0.12), transparent 25%),
    radial-gradient(circle at 80% 18%, rgba(79,209,197,0.1), transparent 30%),
    linear-gradient(135deg, #0B0F19 0%, #111827 62%, #0E1A24 100%);
}
[data-theme="dark"] .guide-kicker {
  background: rgba(22,34,56,0.7);
  color: var(--teal-text);
}
[data-theme="dark"] .guide-lead { color: #AEB9CF; }
[data-theme="dark"] .guide-section { background: rgba(17,24,39,0.4); }
[data-theme="dark"] .guide-card { background: var(--surface-1); }
[data-theme="dark"] .intent-segment {
  background: rgba(255,255,255,0.03);
  border-color: rgba(96,165,250,0.2);
}
[data-theme="dark"] .intent-option:has(input:checked) { background: var(--surface-2); }

/* --- SEOスポット個別ページ --- */
[data-theme="dark"] .seo-spot-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(96,165,250,0.07), transparent 24%),
    radial-gradient(circle at 92% 12%, rgba(79,209,197,0.06), transparent 28%),
    var(--bg);
}
[data-theme="dark"] .seo-spot-hero {
  background: linear-gradient(180deg, rgba(17,24,39,0.6), rgba(11,15,25,0.5));
}
[data-theme="dark"] .seo-spot-meta {
  background: var(--tint-blue);
  border-color: rgba(96,165,250,0.22);
}
[data-theme="dark"] .seo-spot-lead { color: #AEB9CF; }
[data-theme="dark"] .seo-spot-review {
  background: var(--surface-1);
}

/* --- リアルタイム翻訳UI（英語翻訳テキストの視認性） --- */
[data-theme="dark"] .translate-btn {
  border-color: rgba(255,255,255,0.14);
  color: var(--text-muted);
}
[data-theme="dark"] .translate-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: rgba(255,255,255,0.26);
}
[data-theme="dark"] .translated-box {
  background: rgba(255,224,130,0.09);
  border-left-color: #D4A843;
  color: #ECDFC6;            /* 暖かみを残した明るい文字（ダークでもくっきり読める） */
}
[data-theme="dark"] .translation-loading {
  border-color: rgba(255,255,255,0.18);
  border-left-color: var(--text-muted);
}

/* --- 汎用：暖色テキストと共通バッジの微調整 --- */
[data-theme="dark"] .story-kicker { background: var(--tint-blue); }
[data-theme="dark"] .suggest-badge {
  background: linear-gradient(135deg, var(--tint-blue), rgba(79,209,197,0.12));
}

/* --- 選択中・ホバー状態の保護 ---
   上の [data-theme="dark"] .xxx ルールと同じ詳細度で衝突するため、
   active / selected / hover を高い詳細度で再宣言して見た目を守る --- */
[data-theme="dark"] .tab:hover { background: var(--tint-blue); color: var(--blue); }
[data-theme="dark"] .tab.active { background: var(--blue); color: #0B0F19; }
[data-theme="dark"] .spot-like-btn:hover,
[data-theme="dark"] .spot-like-btn.liked { background: var(--tint-blue); color: var(--blue); }
[data-theme="dark"] .spot-share-btn:hover { background: rgba(42,157,143,0.18); color: var(--green); }
[data-theme="dark"] .want-list-toggle:hover,
[data-theme="dark"] .want-list-toggle.active { background: var(--blue); color: #0B0F19; }
[data-theme="dark"] .barrier-free-toggle:hover,
[data-theme="dark"] .barrier-free-toggle.active { background: #ce93d8; color: #0B0F19; border-color: #ce93d8; }
[data-theme="dark"] .area-chip:hover,
[data-theme="dark"] .area-chip.active { background: var(--tint-blue); color: var(--blue); }
[data-theme="dark"] .review-seen-btn.is-seen { background: var(--tint-blue); color: var(--blue); }
[data-theme="dark"] .chat-reaction-btn.is-reacted { background: var(--tint-blue); color: var(--blue); }
[data-theme="dark"] .spot-card.is-discovery-target { background: var(--surface-2); }
[data-theme="dark"] .gallery-grid-item:hover { background: var(--surface-2); }

/* --- ダークモード時のトップ画像色味調整 --- */
#heroImage {
  transition: filter 0.3s ease;
}
[data-theme="dark"] #heroImage {
  filter: brightness(0.82) saturate(0.88);
}

/* --- 設備・対応サービス（アメニティ）のダークモード表示バグ修正 --- */
[data-theme="dark"] .amenities-segment {
  background: rgba(22, 34, 56, 0.4);
  border-color: rgba(91, 141, 238, 0.1);
}
[data-theme="dark"] .amenity-checkbox {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}

/* --- 地図モーダル注釈テキスト用スタイル --- */
.map-modal-notice {
  margin: 4px 0 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
}

/* ダークモード時の地図モーダル要素の完璧な最適化 */
[data-theme="dark"] .map-modal-notice {
  color: #94a3b8 !important;
}

[data-theme="dark"] .map-modal-body {
  background: var(--surface-sunken) !important;
}

[data-theme="dark"] .map-online-panel {
  background: rgba(15, 23, 42, 0.78) !important;
  border-left-color: var(--border) !important;
}

[data-theme="dark"] .map-panel-tabs {
  background: rgba(15, 23, 42, 0.4) !important;
}

[data-theme="dark"] .map-panel-tab {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .map-panel-tab:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

[data-theme="dark"] .map-panel-tab.active {
  background: var(--surface-2) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-theme="dark"] .map-online-header {
  background: rgba(15, 23, 42, 0.4) !important;
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .map-online-title {
  color: #fff !important;
}

[data-theme="dark"] .map-online-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .map-online-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .map-online-card-name {
  color: #fff !important;
}

[data-theme="dark"] .map-online-card-memo {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .map-online-empty {
  color: #64748b !important;
}

/* 地図上のクイックナビボタンのダークモード最適化 */
[data-theme="dark"] .map-quick-nav {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .map-nav-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .map-nav-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

/* 地図ポップアップのダークモード最適化 */
[data-theme="dark"] .map-popup-card {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .map-popup-title {
  color: #fff !important;
}

[data-theme="dark"] .map-popup-memo {
  color: #cbd5e1 !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* お題候補リストの「このお題でつぶやく」アクションボタン */
.prompt-post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: rgba(91, 141, 238, 0.08);
  border: 1px solid rgba(91, 141, 238, 0.2);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}
.prompt-post-action-btn:hover {
  background: var(--blue-light);
  border-color: rgba(91, 141, 238, 0.4);
}
[data-theme="dark"] .prompt-post-action-btn {
  background: rgba(91, 141, 238, 0.15) !important;
  border-color: rgba(91, 141, 238, 0.3) !important;
  color: #60a5fa !important;
}
[data-theme="dark"] .prompt-post-action-btn:hover {
  background: rgba(91, 141, 238, 0.25) !important;
  border-color: rgba(91, 141, 238, 0.5) !important;
}

/* ==========================================================================
   WATERCOLOR FX 追加スタイル
   (時間帯パレット / クリックにじみ / 水彩スタンプ / reduced-motion対応)
   ========================================================================== */

/* --- 時間帯パレット: bodyの水彩背景の上にうっすら色調を重ねる --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  transition: background 1.5s ease;
}
body.time-morning::before {
  background: linear-gradient(180deg, rgba(255, 219, 176, 0.16), rgba(255, 238, 214, 0.05) 60%, transparent);
}
body.time-evening::before {
  background: linear-gradient(180deg, rgba(255, 178, 128, 0.16), rgba(150, 110, 180, 0.08));
}
body.time-night::before {
  background: linear-gradient(180deg, rgba(38, 56, 104, 0.12), rgba(24, 34, 64, 0.07));
}
/* ダークテーマでは時間帯の色重ねは行わない（夜の暗さと干渉するため） */
[data-theme="dark"] body::before {
  background: transparent !important;
}

/* --- クリック時の水彩にじみ --- */
.ink-bleed {
  position: fixed;
  pointer-events: none;
  z-index: 12000;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 0.9;
  animation: inkBleedSpread 0.8s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes inkBleedSpread {
  60% { opacity: 0.55; }
  100% {
    transform: translate(-50%, -50%) scale(1.7) rotate(8deg);
    opacity: 0;
  }
}

/* --- 行きたい登録時の水彩スタンプ --- */
.watercolor-stamp {
  position: fixed;
  pointer-events: none;
  z-index: 12001;
  font-size: 30px;
  line-height: 1;
  transform: translate(-50%, -50%) scale(0.2) rotate(-14deg);
  animation: watercolorStampPop 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 2px 6px rgba(43, 67, 120, 0.25));
}
@keyframes watercolorStampPop {
  35% { transform: translate(-50%, -80%) scale(1.15) rotate(6deg); opacity: 1; }
  70% { transform: translate(-50%, -110%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -150%) scale(0.95) rotate(0deg); opacity: 0; }
}

/* --- アクセシビリティ: 動きを減らす設定では装飾アニメーションを無効化 --- */
@media (prefers-reduced-motion: reduce) {
  .ink-bleed,
  .watercolor-stamp {
    display: none !important;
  }
  .weather-particle {
    animation: none !important;
    opacity: 0 !important;
  }
  body::before {
    transition: none;
  }
}

/* ==========================================================================
   WATERCOLOR FX 第2弾
   (セクション境界のにじみ / View Transitions / ローディングウォッシュ /
    カーソル筆跡 / トグルボタン)
   ========================================================================== */

/* --- セクション境界: 上端を水彩の縁のような不規則な形に --- */
#spots, #visited, #community {
  position: relative;
}
#spots::before, #visited::before, #community::before {
  content: '';
  position: absolute;
  top: -23px;
  left: 0;
  right: 0;
  height: 24px;
  background: inherit;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='24' viewBox='0 0 1200 24'><path d='M0,24 L0,12 C40,4 80,16 120,9 C160,3 200,15 240,8 C280,2 320,14 360,10 C400,5 440,16 480,9 C520,3 560,13 600,8 C640,4 680,15 720,10 C760,4 800,14 840,8 C880,3 920,15 960,10 C1000,5 1040,16 1080,9 C1120,4 1160,13 1200,11 L1200,24 Z' fill='black'/><ellipse cx='150' cy='4' rx='7' ry='2.5' fill='black'/><ellipse cx='520' cy='3' rx='5' ry='2' fill='black'/><ellipse cx='880' cy='4' rx='8' ry='2.5' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='24' viewBox='0 0 1200 24'><path d='M0,24 L0,12 C40,4 80,16 120,9 C160,3 200,15 240,8 C280,2 320,14 360,10 C400,5 440,16 480,9 C520,3 560,13 600,8 C640,4 680,15 720,10 C760,4 800,14 840,8 C880,3 920,15 960,10 C1000,5 1040,16 1080,9 C1120,4 1160,13 1200,11 L1200,24 Z' fill='black'/><ellipse cx='150' cy='4' rx='7' ry='2.5' fill='black'/><ellipse cx='520' cy='3' rx='5' ry='2' fill='black'/><ellipse cx='880' cy='4' rx='8' ry='2.5' fill='black'/></svg>");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 1200px 24px;
  mask-size: 1200px 24px;
  -webkit-mask-position: bottom;
  mask-position: bottom;
}

/* --- View Transitions: ページ間は「紙に水が広がる」、モーダルはやわらかなフェード --- */
@view-transition {
  navigation: auto;
}
@keyframes vtPaperFadeOut {
  to { opacity: 0; }
}
@keyframes vtWaterSpread {
  from {
    clip-path: circle(0% at 50% 30%);
    opacity: 0.4;
    filter: blur(8px) saturate(1.25);
  }
  60% { filter: blur(2px) saturate(1.1); }
  to {
    clip-path: circle(135% at 50% 30%);
    opacity: 1;
    filter: blur(0) saturate(1);
  }
}
@keyframes vtModalFadeIn {
  from { opacity: 0.4; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}
html::view-transition-old(root) {
  animation: vtPaperFadeOut 0.4s ease both;
}
html::view-transition-new(root) {
  animation: vtWaterSpread 0.6s ease-out both;
}
/* モーダル開閉(同一ページ内)は短いフェードに留める */
html.vt-modal::view-transition-old(root) {
  animation: vtPaperFadeOut 0.22s ease both;
}
html.vt-modal::view-transition-new(root) {
  animation: vtModalFadeIn 0.28s ease both;
}

/* --- ローディング: 水彩ウォッシュがじわっと流れるスケルトン --- */
.watercolor-loading {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 10px;
  padding: 2px 12px;
}
.watercolor-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 15%,
    rgba(180, 205, 235, 0.28) 35%,
    rgba(255, 214, 224, 0.28) 50%,
    rgba(213, 240, 222, 0.28) 65%,
    transparent 85%);
  background-size: 250% 100%;
  animation: watercolorWash 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes watercolorWash {
  0% { background-position: 110% 0; }
  100% { background-position: -110% 0; }
}

/* --- カーソル筆跡 (PCのみ・トグルON時) --- */
.cursor-trail-blob {
  position: fixed;
  pointer-events: none;
  z-index: 11999;
  border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%;
  transform: translate(-50%, -50%) scale(0.55);
  opacity: 1;
  /* ライトモード: 絵の具が紙に染みるイメージ */
  mix-blend-mode: multiply;
  animation: cursorTrailFade 1.3s ease-out forwards;
  will-change: transform, opacity;
}
/* 色バリエーション（ライトモード: しっかり発色する顔料カラー） */
.cursor-trail-blob.trail-c1 { background: radial-gradient(circle, rgba(255, 140, 172, 0.6) 0%, rgba(255, 255, 255, 0) 72%); }
.cursor-trail-blob.trail-c2 { background: radial-gradient(circle, rgba(110, 165, 235, 0.6) 0%, rgba(255, 255, 255, 0) 72%); }
.cursor-trail-blob.trail-c3 { background: radial-gradient(circle, rgba(110, 195, 145, 0.55) 0%, rgba(255, 255, 255, 0) 72%); }
.cursor-trail-blob.trail-c4 { background: radial-gradient(circle, rgba(175, 145, 230, 0.55) 0%, rgba(255, 255, 255, 0) 72%); }
@keyframes cursorTrailFade {
  25% { opacity: 0.85; }
  100% {
    transform: translate(-50%, -42%) scale(1.7);
    opacity: 0;
  }
}
/* ダークモード: 加算系ブレンドでふわっと光る筆あとに切替 */
[data-theme="dark"] .cursor-trail-blob {
  mix-blend-mode: screen;
  filter: blur(0.5px);
}
[data-theme="dark"] .cursor-trail-blob.trail-c1 { background: radial-gradient(circle, rgba(255, 158, 190, 0.5) 0%, rgba(0, 0, 0, 0) 72%); }
[data-theme="dark"] .cursor-trail-blob.trail-c2 { background: radial-gradient(circle, rgba(135, 190, 255, 0.5) 0%, rgba(0, 0, 0, 0) 72%); }
[data-theme="dark"] .cursor-trail-blob.trail-c3 { background: radial-gradient(circle, rgba(135, 225, 175, 0.45) 0%, rgba(0, 0, 0, 0) 72%); }
[data-theme="dark"] .cursor-trail-blob.trail-c4 { background: radial-gradient(circle, rgba(195, 165, 250, 0.45) 0%, rgba(0, 0, 0, 0) 72%); }

/* --- フッターの筆あとトグル --- */
.cursor-trail-toggle {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 16px;
  font-size: 0.78rem;
  color: var(--text-muted, #6b7a99);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(91, 141, 238, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.cursor-trail-toggle:hover {
  border-color: rgba(91, 141, 238, 0.55);
}
.cursor-trail-toggle.is-on {
  color: var(--blue, #5b8dee);
  background: rgba(205, 228, 250, 0.45);
  border-color: rgba(91, 141, 238, 0.6);
}
[data-theme="dark"] .cursor-trail-toggle {
  background: rgba(17, 24, 39, 0.55);
  border-color: rgba(96, 165, 250, 0.3);
}

/* --- reduced-motion: 第2弾の装飾も無効化 --- */
@media (prefers-reduced-motion: reduce) {
  html::view-transition-old(root),
  html::view-transition-new(root),
  html.vt-modal::view-transition-old(root),
  html.vt-modal::view-transition-new(root) {
    animation: none !important;
  }
  .watercolor-loading::after,
  .cursor-trail-blob {
    animation: none !important;
    display: none;
  }
}

/* ==========================================================================
   モダンUX 追加スタイル
   (スポット検索 / フィルタピル / スクロールリビール / モバイルタブバー /
    テーマ切替円形ワイプ)
   ========================================================================== */

/* --- スポット検索 --- */
.spot-search-wrap {
  margin: 14px 0 10px;
}
.spot-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid rgba(79, 127, 216, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.spot-search-box:focus-within {
  border-color: rgba(79, 127, 216, 0.6);
  box-shadow: 0 6px 20px rgba(43, 67, 120, 0.12);
}
.spot-search-input {
  flex: 1;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.spot-search-input::placeholder { color: var(--text-muted, #8a97b5); }
.spot-search-kbd {
  font-size: 0.68rem;
  color: var(--text-muted, #8a97b5);
  border: 1px solid rgba(79, 127, 216, 0.25);
  border-radius: 6px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.6);
}
@media (max-width: 768px) { .spot-search-kbd { display: none; } }
[data-theme="dark"] .spot-search-box {
  background: rgba(17, 24, 39, 0.6);
  border-color: rgba(96, 165, 250, 0.28);
}
[data-theme="dark"] .spot-search-kbd {
  background: rgba(17, 24, 39, 0.6);
  border-color: rgba(96, 165, 250, 0.25);
}

/* --- フィルタ状態ピル＋件数 --- */
.spot-filter-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-height: 26px;
}
.spot-filter-count {
  font-size: 0.78rem;
  color: var(--text-muted, #6b7a99);
}
.spot-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue, #5b8dee);
  background: rgba(205, 228, 250, 0.45);
  border: 1px solid rgba(91, 141, 238, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.spot-filter-pill:hover { background: rgba(205, 228, 250, 0.75); transform: translateY(-1px); }
.spot-filter-pill-x { font-size: 0.68rem; opacity: 0.7; }
.spot-filter-clear {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7a99);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
}
[data-theme="dark"] .spot-filter-pill {
  background: rgba(30, 58, 95, 0.5);
  border-color: rgba(96, 165, 250, 0.45);
  color: #93c5fd;
}

/* --- スクロールリビール --- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scroll-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* --- モバイル下部ナビ: 既存bottom-navに地図・ガチャを追加した6項目用の微調整 --- */
@media (max-width: 768px) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* 6項目になってもラベルが収まるように */
  .bottom-nav-label {
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .bottom-nav-label {
    font-size: 0.58rem;
  }
  .bottom-nav-icon,
  .bottom-nav-post-icon {
    font-size: 1.18rem;
  }
}

/* --- ポポッと選ぶ: 結果カードのスワイプカルーセル --- */
/* 縦に伸びてスクロールできなくなる問題の解消（縦スクロール許可） */
.gacha-modal .modal-box {
  overflow-x: hidden;
  overflow-y: auto;
}
.gacha-result-grid.is-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gacha-result-grid.is-carousel .gacha-result-card {
  flex: 0 0 min(82%, 300px);
  scroll-snap-align: center;
}
.gacha-result-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}
.gacha-result-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(91, 141, 238, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}
.gacha-result-dot.is-active {
  background: var(--blue, #5b8dee);
  transform: scale(1.3);
}
.gacha-result-swipe-hint {
  font-size: 0.7rem;
  color: var(--text-muted, #8a97b5);
  margin-left: 8px;
}
[data-theme="dark"] .gacha-result-dot { background: rgba(147, 197, 253, 0.25); }
[data-theme="dark"] .gacha-result-dot.is-active { background: #93c5fd; }

/* --- テーマ切替: ボタン位置から新テーマが円形に広がる --- */
@keyframes vtThemeWipe {
  from { clip-path: circle(0 at var(--vt-origin-x, 50%) var(--vt-origin-y, 0%)); }
  to { clip-path: circle(150% at var(--vt-origin-x, 50%) var(--vt-origin-y, 0%)); }
}
html.vt-theme::view-transition-old(root) {
  animation: none;
}
html.vt-theme::view-transition-new(root) {
  animation: vtThemeWipe 0.55s ease-out both;
}

/* --- reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.vt-theme::view-transition-old(root),
  html.vt-theme::view-transition-new(root) {
    animation: none !important;
  }
}

/* --- 人参鹿さんヒント: ホームバー端末で下部ナビと詰まらないようセーフエリア対応 --- */
@media (max-width: 768px) {
  .carrot-guide {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}