:root {
  --crimson: #8B1A1A;
  --crimson-light: #A52020;
  --crimson-faint: #F8EFEF;
  --ink: #1A1208;
  --ink-soft: #5A4A3A;
  --cream: #FAF8F5;
  --mist: #F2EFE9;
  --border: #E8E3DB;
  --white: #FFFFFF;
  --nav-h: 0px;
  --header-h: 56px;
  --map-h: 44vh;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  background: var(--ink);
  color: var(--ink);
}

/* ── HEADER ── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--crimson);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  z-index: 1100;
  box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.header-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.header-icon:hover { background: rgba(255,255,255,.25); }
.header-icon svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: white;
  letter-spacing: .02em;
  text-decoration: none;
}
.lang-select-wrap { position: relative; }
.lang-select-wrap::after {
  content: '';
  position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 5px solid rgba(255,255,255,.7);
  pointer-events: none;
}
.lang-select {
  -webkit-appearance: none; appearance: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  padding: 5px 26px 5px 9px;
  cursor: pointer; outline: none;
  transition: background .15s;
}
.lang-select:hover { background: rgba(255,255,255,.22); }
.lang-select option { color: var(--ink); background: white; }

/* ── MAP ── */
#map {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  height: var(--map-h);
  z-index: 1;
}
/* Leaflet overrides */
.leaflet-control-zoom { display: none; }
.leaflet-control-attribution { font-size: 9px; opacity: .5; }

/* Custom pin */
.custom-pin {
  position: relative;
}
.custom-pin-dot {
  width: 12px; height: 12px;
  background: var(--crimson);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(139,26,26,.5);
}
/* Active pin: teardrop shape */
.custom-pin-active-wrap {
  position: relative;
  width: 32px; height: 44px;
  animation: pin-drop .35s cubic-bezier(.2,1.4,.5,1) both;
}
.custom-pin-active-body {
  width: 32px; height: 32px;
  background: var(--crimson);
  border: 3px solid white;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 16px rgba(139,26,26,.6);
  position: absolute;
  top: 0; left: 0;
}
.custom-pin-active-body::after {
  content: '';
  position: absolute;
  inset: 6px;
  background: white;
  border-radius: 50%;
  opacity: .35;
}
.custom-pin-active-ripple {
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 6px;
  background: rgba(139,26,26,.25);
  border-radius: 50%;
  filter: blur(3px);
}
.custom-pin-active-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 48px; height: 48px;
  border: 2px solid rgba(139,26,26,.5);
  border-radius: 50%;
  animation: pin-ring 1.4s ease-out infinite;
}
@keyframes pin-drop {
  0%   { transform: translateY(-20px) scale(.6); opacity: 0; }
  100% { transform: translateY(0)     scale(1);  opacity: 1; }
}
@keyframes pin-ring {
  0%   { transform: translate(-50%,-50%) scale(.3); opacity: .8; }
  100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; }
}
.custom-pin-label {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: var(--crimson);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  pointer-events: none;
}

/* ── CONTENT PANEL (fixed below map) ── */
.content-panel {
  position: fixed;
  top: calc(var(--header-h) + var(--map-h));
  left: 0; right: 0;
  bottom: var(--nav-h);
  background: var(--white);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 500;
}
.panel-peek {
  padding: 10px 18px 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}
.peek-close-btn {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background .18s;
}
.peek-close-btn:hover { background: var(--crimson-faint); }
.peek-close-btn svg {
  width: 16px; height: 16px;
  stroke: var(--crimson); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .18s;
}

/* Peek button in sheet header (same as .peek-close-btn) */
.sheet-peek-btn {
  position: relative;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background .18s;
}
.sheet-peek-btn:hover { background: var(--crimson-faint); }
.sheet-peek-btn svg {
  width: 16px; height: 16px;
  stroke: var(--crimson); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s;
}
@media (orientation: portrait) {
  .content-panel.panel-ready .peek-close-btn { display: flex; }
  .content-panel.detail-open .peek-close-btn { display: flex; }
  .content-panel.detail-open .peek-close-btn svg { transform: rotate(180deg); }

  /* Sheet header peek button rotates same as carousel peek button */
  .content-panel.detail-open .sheet-peek-btn svg { transform: rotate(180deg); }
}
.panel-kw {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.panel-kw em { font-style: italic; color: var(--crimson); }
.panel-divider {
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── CAROUSEL ── */
.carousel {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: none; /* enabled via JS after load */
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding: 10px 16px;
  min-height: 0;
}
.carousel.snap-on { scroll-snap-type: x proximity; }
.carousel::-webkit-scrollbar { display: none; }

/* ── POST CARDS ── */
.post-card {
  flex: 0 0 290px;
  min-height: 390px;
  scroll-snap-align: center;
  background: var(--cream);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
  position: relative;
}
.post-card.focused {
  box-shadow: 0 4px 20px rgba(139,26,26,.3);
}
/* outline drawn inside the card so parent overflow:hidden can't clip it */
.post-card.focused::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--crimson);
  border-radius: 14px;
  pointer-events: none;
  z-index: 20;
}
.post-ig-wrap {
  flex: 1;
  min-height: 320px;
  overflow: hidden;
  position: relative;
}
.ig-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: pointer;
  background: transparent;
}
.ig-overlay.unlocked {
  display: none;
}

/* ── Instagram skeleton placeholder ── */
.ig-skeleton {
  display: flex;
  position: absolute;
  inset: 0;
  flex-direction: column;
  z-index: 0;
  pointer-events: none;
  background: #fff;
}
.ig-sk-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e8e8e8;
}
.ig-sk-av {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid #c8c8c8; flex-shrink: 0;
}
.ig-sk-bar {
  height: 8px; border-radius: 3px;
  background: #d8d8d8;
}
.ig-sk-bar.w52 { width: 52%; }
.ig-sk-bar.w30 { width: 30%; }
.ig-sk-bar.w22 { width: 22%; }
.ig-sk-body {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #e8e8e8;
}
.ig-sk-body svg {
  width: 54px; height: 54px;
  stroke: #c0c0c0; fill: none; stroke-width: 1.4;
}
.ig-sk-foot {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px;
}

.post-ig-wrap blockquote.instagram-media,
.post-ig-wrap iframe {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: unset !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
.post-likes {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.post-likes.high { color: var(--crimson); font-weight: 500; }
.post-likes svg { width: 13px; height: 13px; }


/* ── DETAIL MODE: content panel slides up ── */
.content-panel {
  transition: top .42s cubic-bezier(.32,.72,0,1);
}
.content-panel.detail-open {
  top: max(calc(var(--header-h) + 56px), calc(100vh - 600px));
  box-shadow: 0 -6px 32px rgba(0,0,0,.18);
}
.content-panel.detail-open .carousel {
  flex: 0 0 46vh;
}

/* ── TAB BAR (portrait detail mode) ── */
.detail-tab-bar {
  display: none;
  flex-shrink: 0;
}
.content-panel.detail-open .detail-tab-bar {
  display: none;
}
@media (orientation: landscape) {
  .detail-tab-bar { display: none !important; }
}
.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: background .15s;
}
.tab-btn:active { background: var(--mist); }
.tab-btn svg {
  width: 16px; height: 16px;
  stroke: var(--crimson); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.tab-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  flex-shrink: 0;
}

/* ── SHEET BACKDROP ── */
.sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 640;
}
.sheet-backdrop.active { display: block; }

/* ポートレートdetail-openではpost-cardがカルーセル内に収まるよう制限 */
@media (orientation: portrait) {
  .content-panel.detail-open .carousel {
    align-items: stretch;
  }
  .content-panel.detail-open .post-card {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
  .content-panel.detail-open .post-ig-wrap {
    min-height: 0;
  }
}

/* ── SHEET HEADER ── */
.sheet-header { display: none; }
.detail-info-area.sheet-open .sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
}
.sheet-close-btn {
  width: 40px; height: 40px;
  border: none;
  background: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.sheet-close-btn:hover { background: var(--crimson-faint); }
.sheet-close-btn svg {
  width: 16px; height: 16px;
  stroke: var(--crimson); fill: none; stroke-width: 2;
  stroke-linecap: round;
}

/* ── 2-COLUMN INFO AREA ── */
.detail-info-area {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
  flex-direction: column;
}
.detail-cols-row {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

/* Portrait bottom sheet */
@media (orientation: portrait) {
  @keyframes sheet-slide-up {
    from { transform: translateY(50%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }
  .detail-info-area.sheet-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 650;
    background: var(--white);
    border-radius: 20px 20px 0 0;
    top: var(--sheet-top, 40vh);
    overflow: hidden;
    box-shadow: 0 -8px 32px rgba(0,0,0,.2);
    border-top: none;
    animation: sheet-slide-up .3s cubic-bezier(.32,.72,0,1);
    transition: top .3s cubic-bezier(.32,.72,0,1);
  }
  .detail-info-area.sheet-open .detail-cols-row {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .content-panel {
    border-top: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  }
  .panel-peek {
    border-radius: 16px 16px 0 0;
  }
  /* Portrait detail-open: sheet overlays carousel, carousel stays full-height */
  .content-panel.detail-open .carousel {
    flex: 1;
    padding-bottom: 0;
  }
  /* Strip header at top of expanded sheet (replaces sheet-header) */
  .detail-strip-header {
    display: none;
    flex-shrink: 0;
    padding: 0 16px;
    flex-direction: row;
    align-items: center;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    gap: 0;
  }
  .detail-info-area.sheet-open .detail-strip-header {
    display: flex;
  }
  /* Reuse strip button styles for arrow and close buttons */
  .strip-arrow-btn,
  .strip-close-btn {
    position: relative;
    width: 40px; height: 40px;
    background: none; border: none;
    cursor: pointer;
    display: flex;
    align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    transition: background .18s;
  }
  .strip-arrow-btn:hover,
  .strip-close-btn:hover { background: var(--crimson-faint); }
  .strip-arrow-btn svg,
  .strip-close-btn svg {
    width: 16px; height: 16px;
    stroke: var(--crimson); fill: none; stroke-width: 2;
    transition: transform .3s cubic-bezier(.32,.72,0,1);
  }
  /* When sheet is open, arrow points up (tap to expand further) */
  .detail-info-area.sheet-open .strip-arrow-btn svg,
  .detail-info-area.sheet-open .strip-close-btn svg {
    transform: rotate(0deg);
  }
  /* When sheet is fully expanded, arrow points down (tap to collapse back) */
  .detail-info-area.sheet-expanded .strip-arrow-btn svg,
  .detail-info-area.sheet-expanded .strip-close-btn svg {
    transform: rotate(180deg);
  }
  /* Hide column labels in portrait when strip header shows */
  .detail-info-area.sheet-open .col-label {
    display: none;
  }
  .content-panel.detail-open .col-arrow-btn {
    display: block;
  }
  /* Portrait detail-open overrides: top of panel = 30px below map-badge bottom */
  .content-panel.detail-open {
    top: calc(var(--header-h) + 78px);
  }
  /* Caption heading strip (stage 1: after dot tap) */
  .caption-heading-strip {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 635;
    background: var(--white);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.18);
    padding: 0 20px calc(14px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    animation: sheet-slide-up .25s cubic-bezier(.32,.72,0,1);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    transform: translateY(0);
  }
  .caption-heading-strip.visible { display: flex; }
  .caption-heading-strip.slide-up { transform: translateY(100%); }
  /* Solid background behind border-radius corners */
  #panelBg {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--white);
    z-index: 499;
    pointer-events: none;
    top: calc(var(--header-h) + var(--map-h));
    transition: top .42s cubic-bezier(.32,.72,0,1);
  }
  .content-panel.detail-open ~ #panelBg {
    top: calc(var(--header-h) + 78px);
  }
  .strip-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--crimson); flex: 1; cursor: pointer;
  }
  .strip-sep {
    width: 1px; height: 16px;
    background: var(--border); margin: 0 12px;
  }
}
@media (orientation: landscape) {
  .caption-heading-strip { display: none !important; }
}

.detail-col {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-col + .detail-col {
  border-left: 1px solid var(--border);
}
.col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--crimson);
  flex-shrink: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.col-arrow-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.col-arrow-btn svg {
  width: 16px; height: 16px;
  stroke: var(--muted); fill: none; stroke-width: 2;
  display: block;
}
.strip-caption-btn,
.strip-open-btn {
  position: relative;
  width: 40px; height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background .18s;
}
.strip-caption-btn:hover,
.strip-open-btn:hover { background: var(--crimson-faint); }
.strip-caption-btn svg,
.strip-open-btn svg {
  width: 16px; height: 16px;
  stroke: var(--crimson); fill: none; stroke-width: 2;
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.col-airport {
  font-size: 11px;
  font-weight: 600;
  color: var(--crimson);
  flex-shrink: 0;
}
.col-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.col-text.loading {
  color: transparent;
  font-size: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-text.loading::before {
  content: '';
  display: block;
  width: 22px; height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--crimson);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.col-original {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
.col-via {
  font-size: 11px;
  font-weight: 500;
  color: var(--crimson);
  flex-shrink: 0;
  margin-bottom: 2px;
}
#accessText {
  font-size: 13px;
  line-height: 1.65;
}
.detail-right {
  display: contents;
}
.panel-body {
  display: contents;
}

.detail-close-bar {
  display: none;
  flex-shrink: 0;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}
.content-panel.detail-open .detail-close-bar {
  display: none;
}
.detail-close-btn {
  width: 100%;
  height: 46px;
  background: var(--mist);
  border: none;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, color .15s;
}
.detail-close-btn:hover { background: var(--crimson-faint); color: var(--crimson); }
.detail-close-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── LANDSCAPE: left map / right vertical carousel ── */
@media (orientation: landscape) {
  #map {
    right: auto;
    width: 50%;
    height: calc(100vh - var(--header-h));
  }
  .map-badge {
    left: 25%;
  }
  .content-panel {
    top: var(--header-h);
    left: 50%;
    border-top: none;
    border-left: 1px solid var(--border);
  }
  .carousel {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none; /* enabled via JS after load */
    align-items: normal;
    padding: 10px 12px;
  }
	  .carousel.snap-on { scroll-snap-type: y proximity; }
  .post-card {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
  }
  .post-ig-wrap {
    flex: none;
    max-height: 52vh;
  }
  .detail-right {
    display: contents;
  }
  .content-panel.detail-open {
    top: var(--header-h);
    box-shadow: none;
  }
  .content-panel.detail-open .panel-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
  }
  .content-panel.detail-open .carousel {
    flex: 0 0 50%;
    max-height: none;
    overflow-y: auto;
    border-right: 1px solid var(--border);
  }
  .content-panel.detail-open .detail-right {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }
  .content-panel.detail-open .detail-info-area {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-top: none;
  }
  .content-panel.detail-open .detail-cols-row {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
  }
  .content-panel.detail-open .detail-col + .detail-col {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* ── MAP BADGE (floating) ── */
.map-badge-row {
  position: fixed;
  top: calc(var(--header-h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.map-badge {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.map-badge strong { color: var(--crimson); }
.map-share-btn {
  pointer-events: auto;
  width: 32px;
  height: 32px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background .15s;
}
.map-share-btn:hover { background: #fff; }
.map-share-btn svg { width: 15px; height: 15px; fill: currentColor; }
.content-panel.detail-open .map-share-btn { display: none; }
@media (orientation: landscape) {
  .map-badge-row { left: 25%; }
}

/* ── KEYWORD INTRO ── */
.kw-intro {
  position: fixed;
  top: calc(var(--header-h) + 52px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 399;
  max-width: 600px;
  width: calc(100% - 24px);
  padding: 12px 16px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: center;
  pointer-events: none;
}
.kw-intro p { margin: 0; }
.kw-intro strong { color: var(--crimson); font-weight: 600; }
.kw-intro-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--crimson);
  text-decoration: none;
  pointer-events: auto;
}
.kw-intro-link:hover { text-decoration: underline; }
/* Hide intro when detail panel is open so badge-close can overlap */
.content-panel.detail-open .kw-intro { opacity: 0; pointer-events: none; }
@media (orientation: landscape) {
  .kw-intro { left: 25%; }
}
/* Map badge becomes a close button when detail panel is open */
.content-panel.detail-open .map-badge {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1200;
  transition: background .18s, box-shadow .18s;
}
.content-panel.detail-open .map-badge:active {
  background: rgba(200,200,200,.92);
  box-shadow: 0 1px 8px rgba(0,0,0,.08);
}
.site-footer { display: none; }

/* ── KEYWORD DRAWER ── */
.kw-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,18,8,.4);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  z-index: 1900;
}
.kw-drawer-backdrop.open { opacity: 1; visibility: visible; }
.kw-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 82vw);
  background: var(--cream);
  z-index: 2000;
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  box-shadow: 4px 0 32px rgba(0,0,0,.18);
}
.kw-drawer.open { transform: translateX(0); }
.kw-drawer-head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.kw-drawer-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--crimson);
}
.kw-drawer-close {
  width: 34px; height: 34px;
  border: none; background: var(--mist);
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.kw-drawer-close:hover { background: var(--crimson-faint); }
.kw-drawer-close svg { width: 16px; height: 16px; stroke: var(--crimson); fill: none; stroke-width: 2; stroke-linecap: round; }
.kw-drawer-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 24px;
}
.kw-drawer-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.kw-drawer-item:hover { background: var(--crimson-faint); }
.kw-drawer-item.current {
  background: var(--crimson-faint);
  pointer-events: none;
  border-left: 3px solid var(--crimson);
}
.kw-drawer-jp {
  font-family: 'Shippori Mincho', serif;
  font-size: 18px; font-weight: 700;
  color: var(--ink); flex-shrink: 0;
}
.kw-drawer-label {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kw-drawer-cnt {
  font-size: 11px; font-weight: 600;
  color: var(--crimson); flex-shrink: 0;
}