:root {
  --ink: #243129;
  --muted: #637168;
  --paper: #fffdf6;
  --paper-deep: #f3eddc;
  --green: #386b47;
  --green-dark: #234c31;
  --blue: #286a86;
  --gold: #e1a72a;
  --line: #d9d3c3;
  --shadow: 0 18px 55px rgba(46, 57, 42, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #eeeadf;
  color: var(--ink);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.8;
}
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 200;
  padding: .7rem 1rem;
  background: #fff;
  border: 2px solid var(--green-dark);
  border-radius: .5rem;
}
.skip-link:focus { top: 1rem; }

.site-shell { min-height: 100vh; background: var(--paper); }
.nav-active { background: var(--paper-deep) !important; color: var(--green-dark); }
.static-note { color: var(--muted); font-size: .9rem; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  align-items: center;
  gap: 1.3rem;
  min-height: 92px;
  padding: .8rem clamp(1rem, 4vw, 4rem);
  background: rgba(255, 253, 246, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { border: 0; background: none; padding: 0; cursor: pointer; }
.brand img { width: 230px; max-height: 70px; object-fit: contain; object-position: left center; }
.primary-nav { display: flex; justify-content: center; gap: .35rem; }
.primary-nav button {
  position: relative;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: .55rem .9rem;
  cursor: pointer;
  font-weight: 700;
}
.primary-nav button:hover, .primary-nav button:focus-visible, .primary-nav button.active { background: var(--paper-deep); color: var(--green-dark); }
.primary-nav button::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: .28rem; height: 2px; border-radius: 99px; background: var(--green); transform: scaleX(0); transform-origin: center; transition: transform .24s ease; }
.primary-nav button.active::after, .primary-nav button.nav-active::after { transform: scaleX(1); }

main { min-height: 70vh; }
.view-stage { min-height: 70vh; }
.view-stage.motion-forward { animation: page-forward .5s cubic-bezier(.16,.82,.23,1) both; }
.view-stage.motion-back { animation: page-back .44s cubic-bezier(.16,.82,.23,1) both; }
@keyframes page-forward { from { opacity: 0; transform: translateX(38px) scale(.985); filter: blur(3px); } }
@keyframes page-back { from { opacity: 0; transform: translateX(-38px) scale(.985); filter: blur(3px); } }
.view-stage .intro-panel h1 { animation: title-arrive .62s cubic-bezier(.16,.82,.23,1) .08s both; }
@keyframes title-arrive { from { opacity: 0; transform: translateY(24px); letter-spacing: .015em; } }
.intro-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
  gap: 2rem;
  align-items: end;
  padding: clamp(2.8rem, 7vw, 6.5rem) clamp(1rem, 7vw, 7rem) clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 9% 5%, rgba(225,167,42,.22), transparent 28%),
    linear-gradient(135deg, #fffaf0, #eef5e6 70%, #e6f1f3);
  border-bottom: 1px solid var(--line);
}
.eyebrow { margin: 0 0 .45rem; color: var(--green); font-size: .78rem; font-weight: 800; letter-spacing: .14em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
.keep-together { white-space: nowrap; }
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 4.7vw, 4rem); line-height: 1.25; letter-spacing: -.03em; }
h2 { line-height: 1.35; }
.intro-panel > div > p:last-child { max-width: 720px; margin: 0; color: var(--muted); }
.index-shortcut {
  display: grid;
  gap: .15rem;
  padding: 1.2rem 1.35rem;
  text-align: left;
  background: var(--green-dark);
  color: #fff;
  border: 0;
  border-radius: 1.2rem;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.index-shortcut span { font-size: .78rem; opacity: .8; }
.index-shortcut strong { font-size: 1.15rem; }
.index-shortcut:hover, .index-shortcut:focus-visible { background: var(--green); transform: translateY(-2px); }

.map-section, .district-view, .content-page { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.4rem; }
.section-heading h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.5rem); }
.section-heading > p { max-width: 460px; margin: 0; color: var(--muted); }
.main-map-frame, .district-map-scroll {
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  box-shadow: var(--shadow);
}
.view-stage .main-map-frame, .view-stage .district-map-scroll { animation: unfold-map .68s cubic-bezier(.16,.82,.23,1) .04s both; transform-origin: 50% 0%; }
@keyframes unfold-map { from { opacity: 0; clip-path: inset(0 0 84% 0 round 1.4rem); transform: perspective(1100px) rotateX(-7deg) scale(.95) translateY(-12px); box-shadow: 0 4px 18px rgba(46,57,42,.06); } to { clip-path: inset(0 0 0 0 round 1.4rem); } }
.map-canvas { position: relative; width: 100%; min-width: 0; overflow: visible; }
.map-canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.map-spot {
  position: absolute;
  z-index: 2;
  min-width: 18px;
  min-height: 18px;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
}
.map-spot.round { border-radius: 999px; }
.map-spot::after { content: ""; position: absolute; inset: -7px; }
.map-spot .spot-label, .main-map-spot > span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: 220px;
  transform: translateX(-50%) translateY(5px);
  opacity: 0;
  pointer-events: none;
  padding: .35rem .6rem;
  background: var(--green-dark);
  color: #fff;
  border-radius: .45rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 7px 18px rgba(0,0,0,.22);
  transition: .15s ease;
}
.map-spot:hover, .map-spot:focus-visible { outline: 0; border-color: #fff; background: rgba(239, 184, 48, .76); box-shadow: 0 0 0 4px rgba(35,76,49,.76); }
.map-spot:hover .spot-label, .map-spot:focus-visible .spot-label, .main-map-spot:hover > span, .main-map-spot:focus-visible > span { opacity: 1; transform: translateX(-50%) translateY(0); }
.main-map-spot { border-radius: .4rem; }

.district-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1.25rem; }
.district-grid button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: #fff;
  cursor: pointer;
}
.district-grid button:hover, .district-grid button:focus-visible { border-color: var(--green); box-shadow: 0 8px 22px rgba(47,72,50,.12); transform: translateY(-2px); }
.district-grid strong, .district-grid small { display: block; }
.district-grid small { color: var(--muted); }
.district-card-copy { min-width: 0; }
.progress-track { display: block; height: 5px; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: var(--paper-deep); }
.progress-track > span { position: relative; display: block; height: 100%; overflow: hidden; border-radius: inherit; background: var(--green); transition: width .55s cubic-bezier(.16,.82,.23,1); }
.progress-track > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(-110%); animation: progress-shine .85s ease .35s both; }
@keyframes progress-shine { to { transform: translateX(110%); } }
.progress-number, .district-progress { animation: progress-settle .28s ease both; }
@keyframes progress-settle { from { opacity: 0; transform: translateY(5px); } }
.district-dot { width: .75rem; height: .75rem; border-radius: 999px; background: var(--green); }
.district-one, .district-higashi { background: #448c70; }
.district-honcho, .district-kita { background: #d28b32; }
.district-minami, .district-nishi, .district-kami { background: #4b87a2; }

.breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; color: var(--muted); font-size: .9rem; }
.breadcrumb button { border: 0; background: none; color: var(--blue); padding: 0; cursor: pointer; text-decoration: underline; }
.district-title-row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.district-title-row h1 { margin-bottom: .6rem; }
.district-title-row p:last-child { color: var(--muted); margin: 0; }
.zoom-button { border: 1px solid var(--green); border-radius: 999px; background: #fff; color: var(--green-dark); padding: .65rem 1rem; cursor: pointer; white-space: nowrap; }
.zoom-button:hover, .zoom-button:focus-visible { background: var(--green-dark); color: #fff; }
.district-map-scroll.zoomed .district-map { min-width: 1050px; }
.district-list-section { margin-top: 4rem; }
.district-explorer { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 1.4rem; background: #e8e4d8; box-shadow: var(--shadow); }
.district-explorer .district-map-scroll { height: clamp(440px, 68vw, 760px); overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
.interactive-map { position: relative; touch-action: none; cursor: grab; overscroll-behavior: contain; }
.interactive-map:active { cursor: grabbing; }
.interactive-map .district-map { transform-origin: 0 0; will-change: transform; user-select: none; }
.interactive-map .district-map > img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.map-control-dock { position: absolute; z-index: 18; right: .8rem; top: .8rem; display: grid; gap: .35rem; padding: .4rem; border: 1px solid rgba(255,255,255,.65); border-radius: .9rem; background: rgba(255,253,246,.9); box-shadow: 0 8px 24px rgba(30,48,34,.22); backdrop-filter: blur(10px); }
.map-control-dock button { display: grid; place-items: center; min-width: 2.7rem; height: 2.7rem; padding: 0 .55rem; border: 0; border-radius: .65rem; background: #fff; color: var(--green-dark); cursor: pointer; font-weight: 900; box-shadow: 0 2px 8px rgba(30,48,34,.12); }
.map-control-dock button:first-child, .map-control-dock button:nth-child(2) { font-size: 1.35rem; }
.map-control-dock button:last-child { font-size: .72rem; }
.map-control-dock button:hover, .map-control-dock button:focus-visible { background: var(--green-dark); color: #fff; }
.map-magnifier { position: absolute; z-index: 16; width: 156px; height: 156px; margin: -186px 0 0 -78px; overflow: hidden; border: 5px solid #fff; border-radius: 50%; background: var(--paper-deep); box-shadow: 0 16px 38px rgba(0,0,0,.36), 0 0 0 3px var(--gold); pointer-events: none; animation: magnifier-arrive .2s cubic-bezier(.17,.89,.26,1.3) both; }
.map-magnifier::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border: 2px solid rgba(35,76,49,.75); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.map-magnifier img { position: absolute; max-width: none; height: auto; pointer-events: none; }
@keyframes magnifier-arrive { from { opacity: 0; transform: scale(.6); } }
.explorer-key { position: absolute; z-index: 12; left: .8rem; bottom: 4.4rem; max-width: calc(100% - 8rem); margin: 0; padding: .5rem .7rem; border-radius: .7rem; background: rgba(255,253,246,.9); box-shadow: 0 5px 16px rgba(30,48,34,.18); backdrop-filter: blur(8px); }
.map-drawer-toggle { position: relative; z-index: 21; display: block; width: min(360px, calc(100% - 2rem)); margin: 1rem auto 0; padding: .78rem 1.1rem; border: 1px solid var(--green-dark); border-radius: 999px; background: var(--green-dark); color: #fff; box-shadow: 0 10px 28px rgba(20,53,31,.22); cursor: pointer; font-weight: 800; }
.map-drawer-toggle:active { transform: translateY(2px); }
.map-drawer { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: min(68%, 560px); overflow: auto; padding: 1.1rem 1.1rem 5rem; border-top: 1px solid var(--line); border-radius: 1.3rem 1.3rem 0 0; background: rgba(255,253,246,.98); box-shadow: 0 -24px 60px rgba(29,48,34,.25); backdrop-filter: blur(15px); transform: translateY(105%); opacity: 0; pointer-events: none; transition: transform .42s cubic-bezier(.16,.82,.23,1), opacity .28s ease; }
.map-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.drawer-heading { position: sticky; z-index: 3; top: -1.1rem; display: flex; justify-content: space-between; align-items: center; margin: -1.1rem -1.1rem 1rem; padding: 1rem 1.1rem .8rem; background: rgba(255,253,246,.97); border-bottom: 1px solid var(--line); }
.drawer-heading h2 { margin: 0; font-size: 1.35rem; }
.drawer-heading button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--green-dark); color: #fff; cursor: pointer; font-size: 1.25rem; }
.map-drawer .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.map-drawer .place-card { grid-template-columns: 96px 1fr; grid-template-rows: 1fr; min-height: 96px; }
.map-drawer .place-card img, .map-drawer .place-card-placeholder { width: 96px; height: 100%; min-height: 96px; }
.district-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1rem; }
.district-progress { display: inline-flex; align-items: center; min-height: 2.2rem; padding: .35rem .75rem; border: 1px solid #9bb7a1; border-radius: 999px; background: #f0f7ee; color: var(--green-dark); font-size: .88rem; font-weight: 800; }
.district-progress.complete { background: var(--green-dark); color: #fff; }
.safety-link { border: 0; border-bottom: 1px solid currentColor; padding: .2rem 0; background: transparent; color: var(--blue); cursor: pointer; font-size: .85rem; }
.map-key { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin: .8rem .25rem 0; color: var(--muted); font-size: .82rem; }
.map-key span { font-weight: 800; color: var(--green-dark); }
.map-key i { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; }
.map-key p { margin: 0; }
.place-map-spot.viewed { border-color: rgba(255,255,255,.75); background: rgba(56,107,71,.1); box-shadow: 0 0 0 3px rgba(56,107,71,.2); }
.place-map-spot:not(.viewed)::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border: 2px solid #fff; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(225,167,42,.5), 0 3px 8px rgba(80,61,18,.25); pointer-events: none; animation: discovery-beacon 2.8s ease-in-out infinite; }
.place-map-spot:nth-of-type(3n)::before { animation-delay: .55s; }
.place-map-spot:nth-of-type(4n)::before { animation-delay: 1.1s; }
@keyframes discovery-beacon { 0%, 72%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225,167,42,.42), 0 3px 8px rgba(80,61,18,.25); } 84% { transform: scale(1.18); box-shadow: 0 0 0 9px rgba(225,167,42,0), 0 5px 12px rgba(80,61,18,.3); } }
.visited-check { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; place-items: center; width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px; border: 2px solid #fff; border-radius: 50%; background: rgba(39,111,62,.9); color: #fff; box-shadow: 0 3px 8px rgba(19,60,29,.28); font: 800 14px/1 sans-serif; pointer-events: none; }
.place-map-spot.just-viewed::before { content: ""; position: absolute; z-index: 3; inset: 50% auto auto 50%; width: 22px; height: 22px; margin: -11px; border: 2px solid rgba(56,107,71,.7); border-radius: 50%; animation: map-ripple .6s ease-out both; pointer-events: none; }
.place-map-spot.tap-ripple::before { content: ""; position: absolute; z-index: 3; inset: 50% auto auto 50%; width: 22px; height: 22px; margin: -11px; border: 2px solid rgba(56,107,71,.7); border-radius: 50%; animation: map-ripple .6s ease-out both; pointer-events: none; }
@keyframes map-ripple { 0% { background: rgba(225,167,42,.38); box-shadow: 0 0 0 4px rgba(255,255,255,.8); } 100% { transform: scale(4.8); opacity: 0; background: rgba(56,107,71,.08); box-shadow: 0 0 0 12px rgba(56,107,71,0); } }
.visited-check { animation: check-arrive .52s cubic-bezier(.17,.89,.26,1.35) both; }
@keyframes check-arrive { 0% { opacity: 0; transform: scale(.15) rotate(-24deg); } 58% { transform: scale(1.28) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.section-heading.compact { align-items: center; }
.section-heading.compact > span { color: var(--muted); }

.place-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.place-card {
  overflow: hidden;
  display: grid;
  grid-template-rows: 150px auto;
  min-height: 240px;
  padding: 0;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
}
.card-visual { position: relative; display: block; overflow: hidden; background: var(--paper-deep); }
.card-check { position: absolute; right: .55rem; top: .55rem; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border: 2px solid #fff; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 3px 9px rgba(0,0,0,.2); font-weight: 900; }
.place-card.viewed { background: #fbfff9; }
.place-card:hover, .place-card:focus-visible { border-color: var(--green); box-shadow: 0 24px 55px rgba(38,70,45,.2); transform: translateY(-7px) scale(1.012); }
.place-card img { width: 100%; height: 150px; object-fit: cover; background: var(--paper-deep); transition: transform .36s cubic-bezier(.2,.7,.25,1), filter .3s ease; }
.place-card:hover img, .place-card:focus-visible img { transform: scale(1.025); filter: saturate(1.04); }
.view-stage .place-card { animation: card-reveal .52s cubic-bezier(.16,.82,.23,1) both; }
.view-stage .place-card:nth-child(2n) { animation-delay: .035s; }
.view-stage .place-card:nth-child(3n) { animation-delay: .07s; }
.view-stage .place-card:nth-child(4n) { animation-delay: .105s; }
@keyframes card-reveal { from { opacity: 0; transform: translateY(28px) scale(.965); } }
.place-card-placeholder { display: grid; place-items: center; height: 150px; background: linear-gradient(135deg, var(--paper-deep), #e5efd9); color: var(--green); font-size: 3rem; font-family: serif; }
.place-card-copy { display: grid; align-content: start; gap: .25rem; padding: .9rem 1rem 1rem; }
.place-card-copy small { color: var(--green); }
.place-card-copy strong { font-size: 1rem; line-height: 1.5; }

.content-page { max-width: 1100px; }
.content-page > h1 { max-width: 850px; }
.content-page > p:not(.eyebrow) { color: var(--muted); }
.search-box {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  margin: 2.2rem 0 1.5rem;
  padding: .7rem 1rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 1rem;
}
.search-box:focus-within { border-color: var(--green); }
.search-box span { font-weight: 800; }
.search-box input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1.05rem; }
.search-box button { border: 0; border-radius: 999px; background: var(--paper-deep); width: 2rem; height: 2rem; cursor: pointer; }
.empty-message { grid-column: 1/-1; padding: 4rem 1rem; text-align: center; color: var(--muted); }

.modern-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.5rem 0; }
.modern-guide article { padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; }
.modern-guide article > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--green-dark); color: #fff; font-weight: 800; }
.modern-guide h2 { margin: .8rem 0 .35rem; font-size: 1.2rem; }
.modern-guide p { margin: 0; color: var(--muted); }
.safety-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; margin: 2rem 0; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #d9c78e; border-radius: 1.1rem; background: #fffaf0; }
.safety-card > span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--gold); color: #332b14; font-weight: 900; }
.safety-card h2 { margin: 0 0 .45rem; font-size: 1.3rem; }
.safety-card p:last-child { margin: 0; color: #4f554e; }
.home-safety-card { margin-bottom: 0; }
.place-notice { margin: 1rem 0 1.5rem; border-color: #d5bd70; background: #fff9e9; }
.place-notice > div { min-width: 0; }
.notice-label { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .25rem .65rem; border: 1px solid #d2ad3e; border-radius: 999px; background: #fff1bd; color: #644c0c; font-size: .78rem; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.place-notice h3 { margin: 0 0 .45rem; color: #3e351c; font-size: 1.18rem; line-height: 1.45; }
.record-settings { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
.record-settings h2 { margin: 0; font-size: 1rem; }
.record-settings p { margin: .15rem 0 0; color: var(--muted); font-size: .82rem; }
.reset-button { border: 1px solid #b8aaa3; border-radius: 999px; padding: .45rem .75rem; background: transparent; color: #6e4f43; cursor: pointer; font-size: .78rem; white-space: nowrap; }
.source-text { white-space: normal; }
.source-text p { margin: 0 0 1.15rem; }
.references-page .source-text { margin-top: 2.5rem; padding: clamp(1rem, 4vw, 2.5rem); background: #fff; border: 1px solid var(--line); border-radius: 1rem; }

.site-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 2.3rem clamp(1rem, 6vw, 6rem); background: var(--green-dark); color: #fff; }
.site-footer p { margin: 0; opacity: .75; }
.site-footer button { border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: .55rem .85rem; background: transparent; color: #fff; cursor: pointer; }

.site-shell:has(.modal-backdrop) main { transform: scale(.975); filter: saturate(.78) blur(2px); transition: transform .38s cubic-bezier(.16,.82,.23,1), filter .38s ease; }
.modal-backdrop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1rem; background: rgba(22,36,27,.74); backdrop-filter: blur(8px); animation: backdrop-in .3s ease both; }
@keyframes backdrop-in { from { opacity: 0; backdrop-filter: blur(0); background: rgba(22,36,27,0); } }
.place-dialog { position: relative; width: min(980px, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1.2rem, 4vw, 3rem); background: var(--paper); border-radius: 1.25rem; box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.place-dialog { animation: dialog-rise .5s cubic-bezier(.16,.86,.23,1) both; }
.sheet-handle { display: none; }
@keyframes dialog-rise { from { opacity: 0; transform: translateY(64px) scale(.94); } }
.dialog-close { position: sticky; top: 0; z-index: 2; float: right; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 0; border-radius: 999px; background: var(--green-dark); color: #fff; font-size: 1.5rem; cursor: pointer; }
.dialog-heading { padding-right: 3.5rem; margin-bottom: 1.5rem; }
.dialog-heading span { color: var(--green); font-weight: 800; }
.dialog-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .75rem; }
.dialog-heading h2 { margin: .25rem 0 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.dialog-heading .notice-label { margin-top: .25rem; color: #644c0c; }
.viewed-note { display: inline-flex; margin: .7rem 0 0; padding: .25rem .6rem; border-radius: 999px; background: #e8f4e7; color: var(--green-dark); font-size: .78rem; font-weight: 800; }
.dialog-images { margin: 1.5rem 0 2rem; }
.dialog-images.multiple { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.dialog-images a { display: block; background: var(--paper-deep); border-radius: .8rem; overflow: hidden; }
.dialog-images img { width: 100%; max-height: 620px; object-fit: contain; }
.dialog-images img { animation: image-develop .42s ease .08s both; }
@keyframes image-develop { from { opacity: 0; transform: scale(.988); filter: saturate(.7); } }
.dialog-images.multiple img { height: 360px; object-fit: contain; }
.place-dialog .source-text { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 1.08rem; line-height: 2; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.dialog-actions button, .dialog-actions a { border: 1px solid var(--green); border-radius: 999px; padding: .65rem 1rem; background: var(--green-dark); color: #fff; text-decoration: none; cursor: pointer; }
.dialog-actions a { background: #fff; color: var(--green-dark); }
.dialog-actions .disabled { display: none; }
.dialog-sequence { position: sticky; z-index: 3; bottom: -.1rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: .55rem; margin: 2rem -.4rem 0; padding: .75rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255,253,246,.95); box-shadow: 0 -8px 25px rgba(42,58,45,.12); backdrop-filter: blur(12px); }
.dialog-sequence button { min-height: 2.8rem; border: 1px solid var(--green); border-radius: 999px; padding: .55rem .85rem; background: #fff; color: var(--green-dark); cursor: pointer; font-weight: 800; }
.dialog-sequence button:nth-child(2) { background: var(--green-dark); color: #fff; }
.dialog-sequence button:disabled { opacity: .34; cursor: default; }
.achievement-dialog, .confirm-dialog { width: min(520px, calc(100% - 2rem)); padding: clamp(1.5rem, 5vw, 2.7rem); text-align: center; border: 1px solid rgba(225,167,42,.7); border-radius: 1.3rem; background: var(--paper); box-shadow: 0 0 85px rgba(225,167,42,.36), 0 36px 100px rgba(0,0,0,.42); animation: achievement-arrive .56s cubic-bezier(.17,.89,.26,1.22) both; }
@keyframes achievement-arrive { from { opacity: 0; transform: translateY(38px) scale(.82); } 70% { transform: translateY(-4px) scale(1.025); } }
.achievement-characters { display: flex; justify-content: center; align-items: end; gap: .8rem; height: 92px; margin-bottom: .8rem; }
.achievement-characters img { max-width: 82px; max-height: 86px; object-fit: contain; }
.achievement-characters img:first-child { animation: character-left .42s cubic-bezier(.2,.8,.25,1) .08s both; }
.achievement-characters img:last-child { animation: character-right .42s cubic-bezier(.2,.8,.25,1) .08s both; }
@keyframes character-left { from { opacity: 0; transform: translateX(-18px); } }
@keyframes character-right { from { opacity: 0; transform: translateX(18px); } }
.achievement-characters span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; margin-bottom: 1.2rem; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.25rem; font-weight: 900; }
.achievement-dialog h2 { margin: .3rem 0 .7rem; font-size: clamp(1.7rem, 6vw, 2.5rem); }
.achievement-dialog > button { margin-top: 1rem; border: 0; border-radius: 999px; padding: .7rem 1.25rem; background: var(--green-dark); color: #fff; cursor: pointer; font-weight: 800; }
.confirm-dialog { border-color: var(--line); }
.confirm-dialog h2 { margin-top: 0; }
.confirm-dialog > div { display: flex; justify-content: center; gap: .7rem; margin-top: 1.3rem; }
.confirm-dialog button { border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1rem; background: #fff; cursor: pointer; }
.confirm-dialog button.danger { border-color: #875d4c; background: #875d4c; color: #fff; }
.sr-only { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
button, .place-card, .district-grid button, .index-shortcut { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
button:active { transform: translateY(2px); }

@media (max-width: 1000px) {
  .site-header { grid-template-columns: 190px 1fr; }
  .district-grid, .place-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .site-header { position: static; grid-template-columns: 1fr; gap: .6rem; padding: .75rem 1rem; }
  .brand img { width: 190px; margin: auto; }
  .primary-nav { overflow-x: auto; justify-content: start; padding-bottom: .2rem; }
  .primary-nav button { flex: 0 0 auto; }
  .intro-panel { grid-template-columns: 1fr; }
  .section-heading, .district-title-row { display: grid; align-items: start; }
  .main-map-frame { overflow-x: auto; }
  .main-map-frame .map-canvas { min-width: 720px; }
  .district-grid, .place-grid { grid-template-columns: repeat(2, 1fr); }
  .place-card { grid-template-rows: 120px auto; min-height: 210px; }
  .place-card img, .place-card-placeholder { height: 120px; }
  .modern-guide { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .site-footer button { justify-self: center; }
  .dialog-images.multiple { grid-template-columns: 1fr; }
  .dialog-images.multiple img { height: auto; max-height: 420px; }
  .record-settings { align-items: start; }
  .map-drawer .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  .district-grid, .place-grid { grid-template-columns: 1fr; }
  .district-grid button { min-height: 68px; }
  .place-card { grid-template-columns: 118px 1fr; grid-template-rows: 1fr; min-height: 120px; }
  .place-card img, .place-card-placeholder { width: 118px; height: 100%; min-height: 120px; }
  .modal-backdrop { padding: 0; }
  .modal-backdrop { place-items: end center; }
  .place-dialog { max-height: 92vh; min-height: 0; padding-top: .75rem; border-radius: 1.2rem 1.2rem 0 0; }
  .sheet-handle { display: block; width: 3rem; height: 4px; margin: 0 auto .7rem; border-radius: 999px; background: #c4c0b5; }
  .achievement-backdrop { place-items: center; padding: 1rem; }
  .record-settings { display: grid; }
  .reset-button { justify-self: start; }
  .map-key { display: grid; gap: .2rem; }
  .district-view { width: 100%; padding-top: 1rem; }
  .district-view > .breadcrumb, .district-view > .district-title-row { margin-left: 1rem; margin-right: 1rem; }
  .district-explorer { border-left: 0; border-right: 0; border-radius: 0; }
  .district-explorer .district-map-scroll { height: 68vh; min-height: 470px; }
  .map-drawer .place-grid { grid-template-columns: 1fr; }
  .map-drawer { height: 72%; }
  .explorer-key p { display: none; }
  .dialog-sequence { grid-template-columns: 1fr 1fr; }
  .dialog-sequence button:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}