.map-explorer-page { background:var(--paper, #f4f0e7); color:var(--ink, #17251f); }
.map-page { --map-green:var(--orange, #8f3d20); --map-light:#fbf1e5; --map-line:var(--line, #d6ddd7); max-width:1240px; margin:0 auto; padding:30px 28px 70px; font-size:16px; }
.map-page *, .home-map-preview * { box-sizing:border-box; }
.map-page [hidden], .home-map-preview [hidden] { display:none!important; }
.map-page button { font:inherit; }
.map-page button,.map-page a { -webkit-tap-highlight-color:transparent; }
.map-page button { cursor:pointer; }
.map-page :focus-visible,.home-map-preview :focus-visible { outline:3px solid #b6532b; outline-offset:3px; }
.map-page-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.map-page h1 { font-size:32px; line-height:1.35; letter-spacing:.03em; margin:0; }
.map-dev-label { color:#655d4b; background:#f3eddd; border:1px solid #e2d6b6; font-size:12px; line-height:1.6; border-radius:6px; padding:3px 8px; white-space:nowrap; }
.map-toolbar { display:flex; gap:12px; align-items:stretch; margin-bottom:18px; }
.map-nearby { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--map-green); color:#fff; background:var(--map-green); padding:10px 22px; border-radius:999px; min-height:52px; font-weight:800!important; white-space:nowrap; }
.map-nearby:hover { background:#6f2f19; }
.map-nearby span { font-size:25px; line-height:1; font-weight:400; }
.map-nearby:disabled { opacity:.7; cursor:wait; }
.map-location-status { margin:-4px 0 16px; color:#5e6d65; font-size:14px; padding:10px 14px; border-radius:8px; background:#fbf1e5; }
.map-explorer-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr); gap:30px; align-items:start; }
.map-visual-column { position:sticky; top:20px; min-width:0; }
.map-canvas-wrap { position:relative; border:1px solid #d6ddd7; border-radius:15px; overflow:hidden; background:#f4f0e7; isolation:isolate; }
#spot-map { height:480px; background:#f4f0e7; z-index:0; font-family:inherit; }
.map-loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,.95); border-radius:8px; padding:12px 16px; font-size:14px; color:#5e6d65; z-index:600; box-shadow:0 2px 10px #334a3420; white-space:nowrap; }
.map-source { font-size:11px; line-height:1.65; color:#5e6d65; margin:5px 0 0; overflow-wrap:anywhere; }
.map-source a { color:inherit; text-decoration:underline; }
.map-results { min-width:0; scroll-margin-top:16px; }
.map-results-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 0 14px; border-bottom:1px solid var(--line, #d6ddd7); }
.map-results-heading h2 { margin:0; font-size:20px; line-height:1.5; }
.map-results-heading strong { color:var(--orange, #8f3d20); font-size:18px; white-space:nowrap; }
.map-order-note { font-size:13px; color:#5e6d65; margin:10px 0 0; }
.map-spot-row { display:flex; align-items:center; gap:0; border-bottom:1px solid #d6ddd7; padding:15px 0; transition:background .12s; }
.map-spot-row.is-selected { background:#fbf1e5; border-left:4px solid var(--orange, #8f3d20); padding-left:9px; margin-left:-13px; }
.map-row-select { min-width:0; flex:1; display:flex; align-items:center; gap:14px; text-align:left; border:0; background:transparent; padding:0; color:inherit; min-height:84px; }
.map-row-select img { width:112px; height:84px; object-fit:cover; border-radius:9px; flex-shrink:0; background:#e9f0eb; }
.map-row-copy { flex:1; min-width:0; }
.map-row-copy strong { display:block; font-size:17px; line-height:1.6; font-weight:700; }
.map-row-meta { display:block; margin-top:5px; font-size:13px; color:#5e6d65; }
.map-row-distance { display:block; font-size:13px; color:var(--orange, #8f3d20); margin-top:3px; }
.map-row-selected { display:inline-block; font-size:11px; color:var(--orange, #8f3d20); font-weight:700; margin-top:3px; }
.map-row-detail { display:flex; align-items:center; justify-content:center; width:48px; min-height:60px; flex-shrink:0; color:#8f3d20; text-decoration:none; font-size:23px; border-radius:8px; }
.map-row-detail:hover { background:#fbf1e5; }
.map-more { width:100%; padding:12px; margin:16px 0; min-height:48px; background:#fff; border:1px solid #d6ddd7; border-radius:8px; color:var(--orange, #8f3d20); font-weight:700; }
.map-selected-card { position:relative; display:flex; align-items:center; gap:16px; margin-top:16px; padding:18px; background:#fff; border:2px solid var(--orange, #8f3d20); border-radius:13px; box-shadow:0 5px 18px #273d2f0b; }
.map-selected-card img { width:116px; height:96px; object-fit:cover; border-radius:9px; }
.map-selected-copy { min-width:0; flex:1; padding-right:8px; }
.map-selected-copy h3 { margin:2px 20px 4px 0; font-size:18px; line-height:1.55; }
.map-selected-copy p { font-size:13px; margin:4px 0 8px; color:#5e6d65; }
.map-selected-copy>a { display:flex; width:max-content; align-items:center; justify-content:center; min-height:48px; border-radius:8px; background:var(--orange, #8f3d20); color:#fff; text-decoration:none; font-size:15px; font-weight:700; padding:9px 16px; }
.map-card-close { position:absolute; right:2px; top:2px; width:48px; height:48px; border:0; background:transparent; color:#8f3d20; font-size:26px!important; border-radius:8px; }
.map-empty { padding:30px 12px; text-align:center; color:#5e6d65; }
.map-empty strong { display:block; font-size:17px; }
.map-empty p { font-size:14px; line-height:1.8; margin:10px 0 18px; }
.map-skip { position:absolute; top:-100px; background:#fff; padding:12px; z-index:2000; }
.map-skip:focus { position:fixed; top:8px; }
.map-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.spot-map-icon { background:transparent; border:0; }
.spot-map-pin { display:flex; align-items:center; justify-content:center; position:absolute; left:6px; top:3px; width:36px; height:36px; border:3px solid #fff; border-radius:50% 50% 50% 6px; transform:rotate(-45deg); background:var(--orange, #8f3d20); color:#fff; box-shadow:0 2px 5px #253c3840; }
.spot-map-pin>span { transform:rotate(45deg); font-size:14px; font-weight:700; line-height:1; }
.spot-map-icon.is-selected .spot-map-pin { background:#17251f; box-shadow:0 0 0 5px #ff964c70,0 2px 6px #263d3550; }
.spot-map-cluster { background:transparent; border:0; }
.spot-map-cluster>span:first-child { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border:4px solid #ffffffd9; border-radius:50%; background:var(--orange, #8f3d20); color:#fff; box-shadow:0 0 0 5px var(--orange, #8f3d20)1e; font-size:16px; font-weight:700; }
.map-page .leaflet-control-zoom { border:1px solid #d6ddd7!important; border-radius:9px; overflow:hidden; box-shadow:0 2px 8px #20352212; }
.map-page .leaflet-control-zoom a { width:46px; height:46px; line-height:46px; color:var(--orange, #8f3d20); font-size:26px; }
.map-page .leaflet-control-attribution { font-size:10px; }
.map-user-dot { width:18px; height:18px; border:3px solid #fff; border-radius:50%; background:#2474b2; box-shadow:0 0 0 6px #2474b22b; }
.home-map-preview { position:relative; }
.home-map-preview-visual { position:relative; border:1px solid var(--line, #d6ddd7); border-radius:16px; overflow:hidden; background:#f4f0e7; isolation:isolate; }
#home-spot-map { height:220px; z-index:0; background:#f4f0e7; }
.home-map-preview-link { position:absolute; inset:0; z-index:500; display:flex; justify-content:center; align-items:center; text-decoration:none; background:linear-gradient(90deg,#f6f9f328,transparent,#f6f9f328); }
.home-map-preview-link>span { display:flex; align-items:center; gap:26px; background:var(--orange, #8f3d20); color:#fff; padding:14px 28px; border-radius:50px; font-weight:700; font-size:18px; min-height:54px; box-shadow:0 6px 16px #6f2f1924; }
.home-map-preview-link:hover>span { background:#6f2f19; }
.home-map-preview .guide-section-head { display:flex; align-items:center; justify-content:space-between; }
.home-map-preview .map-source { margin-top:8px; }
@media(max-width:767px) {
  .map-page { padding:18px 18px 50px; }
  .map-page-heading { margin-bottom:16px; align-items:flex-start; }
  .map-page h1 { font-size:27px; }
  .map-dev-label { font-size:10px; margin-top:4px; padding:3px 6px; }
  .map-toolbar { display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:14px; }
  .map-nearby { grid-column:1/-1; width:100%; min-height:50px; padding:8px 16px; }
  .map-explorer-layout { display:block; }
  .map-visual-column { position:static; }
  #spot-map { height:clamp(260px,35svh,305px); }
  .map-canvas-wrap { border-radius:12px; }
  .map-source { font-size:10px; margin:0 0 14px; }
  .map-results-heading { padding:4px 0 12px; }
  .map-results-heading h2 { font-size:18px; }
  .map-results-heading strong { font-size:17px; }
  .map-row-select { gap:12px; min-height:76px; }
  .map-row-select img { width:98px; height:76px; }
  .map-row-copy strong { font-size:16px; }
  .map-row-meta { font-size:12px; margin-top:4px; }
  .map-spot-row { padding:13px 0; }
  .map-selected-card { gap:12px; padding:13px; margin:0 0 18px; }
  .map-selected-card img { width:96px; height:96px; }
  .map-selected-copy h3 { font-size:16px; margin-right:12px; }
  .map-selected-copy>a { font-size:14px; padding:8px 14px; }
  .map-location-status { font-size:13px; }
  #home-spot-map { height:200px; }
  .home-map-preview-link>span { font-size:16px; padding:12px 24px; }
}
@media(prefers-reduced-motion:reduce) { .map-page * { transition:none!important; scroll-behavior:auto!important; } }

/* Align the map shell with the live photo-led tourism guide. Tile pixels are unchanged. */
.map-page { color:var(--ink); font-family:"Noto Sans JP","Hiragino Sans",sans-serif; max-width:1240px; }
.map-page-heading { margin-bottom:20px; }
.map-page h1 { display:flex; align-items:center; gap:10px; font-size:30px; font-weight:700; letter-spacing:.02em; }
.map-page h1 svg { width:28px; height:28px; flex-shrink:0; color:var(--brand-orange); }
.map-nearby { background:var(--green,#b6532b); border-color:var(--green,#b6532b); box-shadow:0 6px 16px #6f2f1918; }
.map-nearby:hover { background:var(--orange,#8f3d20); }
.map-results-heading { border-bottom:0; padding-bottom:16px; }
.map-results-heading h2 { font-weight:700; }
.map-spot-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px; }
.map-spot-row { display:block; min-width:0; position:relative; align-self:stretch; padding:0 0 12px; border:0; border-radius:0; }
.map-row-select { display:flex; flex-direction:column; align-items:stretch; gap:9px; width:100%; height:100%; border-radius:12px; }
.map-row-select img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:12px; }
.map-row-copy { display:block; padding:0 34px 0 2px; }
.map-row-copy strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font-size:16px; line-height:1.6; }
.map-row-meta { font-size:12px; margin-top:5px; }
.map-row-detail { position:absolute; right:-4px; bottom:4px; min-height:48px; width:48px; border-radius:999px; }
.map-spot-row.is-selected { margin:0; padding:0 0 12px; border:0; background:transparent; }
.map-spot-row.is-selected img { outline:3px solid var(--brand-orange); outline-offset:2px; }
.map-row-selected { color:var(--orange); }
.map-more { grid-column:1/-1; border-radius:999px; border-color:var(--green); background:var(--surface); }
.map-selected-card { border:1px solid #e7cbb6; background:var(--surface,#fffdf8); box-shadow:0 4px 12px #6f2f190b; border-radius:14px; }
.map-selected-card img { border-radius:12px; }
.map-selected-copy>a { border-radius:999px; font-size:16px; background:var(--green,#b6532b); }
.map-selected-card .map-row-selected { padding:2px 8px; border-radius:999px; background:#ff964c25; }
.map-page .leaflet-control-zoom { border-radius:12px; }
.home-map-preview-link>span { background:var(--orange,#8f3d20); }
@media(max-width:767px) {
 .map-page { padding:20px 14px 44px; }
 .map-page h1 { font-size:26px; }
 .map-page h1 svg { width:24px; height:24px; }
 .map-page-heading { margin-bottom:16px; }
 .map-spot-list { gap:20px 12px; }
 .map-row-select { gap:9px; }
 .map-row-select img { width:100%; height:auto; aspect-ratio:3/2; }
 .map-row-copy strong { font-size:16px; }
 .map-selected-copy>a { font-size:16px; }
}

.map-toolbar { display:block; }
.map-source { margin-top:8px; }
.map-unavailable .map-visual-column { display:none; }
.map-unavailable .map-explorer-layout { display:block; max-width:760px; margin:0 auto; }
@media(max-width:767px) { .map-toolbar { display:block; } .map-source { margin:8px 0 16px; } }

@media(min-width:768px) { .map-toolbar .map-nearby { width:max-content; max-width:100%; } }

/* Strong specificity: Leaflet CSS is lazy-loaded after this file. */
#spot-map .leaflet-control-zoom a, #home-spot-map .leaflet-control-zoom a { box-sizing:border-box; width:52px; height:52px; line-height:50px; font-size:30px; font-weight:800; color:#8f3d20; background:#fffdf8; border-color:#d6ddd7; }
#spot-map .leaflet-control-zoom, #home-spot-map .leaflet-control-zoom { border:2px solid #b6532b; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px #17251f30; }
#spot-map .leaflet-control-zoom a:focus-visible, #home-spot-map .leaflet-control-zoom a:focus-visible { outline:3px solid #17251f; outline-offset:-4px; }
.home-map-preview-link { position:static; padding:14px; background:var(--surface,#fffdf8); }

@media(min-width:768px) { #home-spot-map { height:440px; } }

/* The home map uses the same explorer as /map. Only its heading is centered. */
.home-map-heading { display:block!important; text-align:center; margin-bottom:24px; }
.home-map-heading>div { width:100%; }
.home-map-heading h2,.home-map-heading p { text-align:center; }
.home-map-heading .map-dev-label { display:inline-block; margin-top:12px; }
.map-embedded { max-width:none; margin:0; padding:0; }
.map-embedded #spot-map { height:200px; }
.map-results .map-selected-card { margin:0 0 20px; }
.map-results,.map-results-heading h2,.map-selected-copy,.map-row-copy { text-align:left; }
@media(min-width:768px) { .map-embedded #spot-map { height:440px; } }

/* Give both mobile maps room to explore while keeping short screens scrollable. */
@media(max-width:767px) {
  #spot-map,.map-embedded #spot-map { height:clamp(260px,58svh,480px); }
}