/* ONLYSEOUL: Seoul blue, porcelain, and ink. Shared shell / atlas hierarchy. */
/* Artwork stays inside real district outlines; names remain readable above it. */
#map[data-district-art=true] .district-label{color:#253a5d;text-shadow:0 1px 3px #fff,0 0 7px #fff,0 0 3px #fff}
:root {
  --seoul-blue:#14745d;
  --seoul-blue-dark:#105a49;
  --seoul-blue-soft:#e0eee8;
  --paper:#edf1ef;
  --ink:#17231e;
  --muted:#57665e;
  --line:#c8d2cc;
  --control-border:#c8d2cc;
  --red:var(--seoul-blue);
  --red-light:var(--seoul-blue-soft);
  --green:#526988;
  --lime:#e0eee8;
  --river:#91acd9;
  --shell-width:1280px;
  --shell-gutter:56px;
}
body{background:#fff}
button:hover{color:var(--seoul-blue)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline-color:var(--seoul-blue)}
.site-header,.explore-panel,.site-footer{width:calc(100% - var(--shell-gutter)*2);max-width:var(--shell-width);margin-inline:auto}
.app-shell{width:100%;max-width:none;margin:0}
.site-header{height:88px;padding:0;gap:24px;background:#fff;border-bottom:0}
.brand,.brand-logo{width:175px}
.main-nav{gap:28px}
.nav-link{font-size:12px}
.nav-link.active:after{background:var(--seoul-blue)}
.header-actions{gap:8px}
.header-icon{background:#fff;border-color:var(--line)}
.header-icon:hover{background:var(--seoul-blue-soft)}
.header-icon[aria-pressed=true],.trip-button,.menu-trip-button{background:var(--seoul-blue);color:#fff;border-color:var(--seoul-blue)}
.trip-button:hover,.menu-trip-button:hover{background:var(--seoul-blue-dark);color:#fff}
.trip-button #header-trip-count{border-color:#ffffff50}
.saved-indicator,.live-dot,.status-dot,.category-dot{background:var(--seoul-blue)}
.mobile-language,.mobile-language button{border-color:var(--line)}
.mobile-language button[aria-pressed=true]{background:var(--seoul-blue-soft);border-color:#9fb8aa;color:var(--seoul-blue)}

/* Header, full-width atlas, then the bounded place collection. */
.atlas-stage{display:block;height:auto;overflow:visible;background:transparent;border:0}
.intro{position:relative;inset:auto;width:100%;padding:0 0 28px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:48px;align-items:center;z-index:auto}
.intro h1{font-size:58px;letter-spacing:-3.2px;line-height:1.16;font-weight:600}
.intro h1 br{display:none}
.highlight-word,.headline-period{color:var(--seoul-blue)}
.highlight-word svg{display:none}
.intro p{margin:0;font-size:17px;line-height:1.8;color:#57665e;justify-self:end;max-width:480px}
.intro-bottom{display:none}
html:not([lang=en]) .intro h1{font-size:42px;letter-spacing:-1.9px;line-height:1.3}
html[lang=ja] .intro h1{font-size:33px;letter-spacing:-1.6px}
html:not([lang=en]) .intro p{line-height:1.85}

.map-panel{position:relative;inset:auto;width:100%;height:auto;margin:0;border:0;border-block:1px solid var(--line);border-radius:0;background:var(--paper);isolation:isolate}
.map-panel:before{display:none}
.atlas-controls{position:relative;inset:auto;order:-1;display:flex;align-items:center;gap:10px;width:calc(100% - var(--shell-gutter)*2);max-width:var(--shell-width);height:80px;padding:16px 0;margin:0 auto;z-index:710;border:0;border-radius:0;background:transparent}
.map-level-slot{position:relative;width:230px;height:48px;flex:0 0 230px}
.map-levels{left:0;top:0;width:100%;background:#fff;border-color:var(--control-border);box-shadow:none}
.map-levels.is-open{box-shadow:0 12px 32px #1d31571c}
.map-levels .map-level-picker:hover,.map-levels .map-level-option:hover{background:#edf1ef}
.map-level-options{border-color:var(--line)}
.map-levels .map-level-option[aria-selected=true]{background:var(--seoul-blue-soft);color:var(--seoul-blue)}
.map-levels button:focus-visible{outline-color:var(--seoul-blue)}
.map-levels .map-level-copy{display:flex;align-items:center;flex-wrap:wrap;gap:3px 6px;min-width:0;visibility:visible;line-height:1.2}
.map-levels .map-level-recommendation{display:inline-flex;align-items:center;flex-shrink:0;border-radius:999px;padding:3px 6px;background:var(--seoul-blue-soft);color:var(--seoul-blue);font-size:9px;font-weight:650;line-height:1;white-space:nowrap}
.map-levels .map-level-recommendation[hidden]{display:none}
.map-levels .map-level-option[data-map-level=neighborhood]{gap:5px}
.map-level-option>span[data-icon=check]{flex-shrink:0}
.all-seoul-button{height:48px;padding-inline:22px;border-color:var(--control-border);box-shadow:none}
.all-seoul-button.active{background:var(--seoul-blue);border-color:var(--seoul-blue);color:#fff}
.all-seoul-button:hover{background:var(--seoul-blue-soft);color:var(--seoul-blue)}
.all-seoul-button.active:hover{background:var(--seoul-blue-dark);color:#fff}
.map-coordinate{margin-left:auto;font-size:9px;font-weight:500;letter-spacing:1.1px;color:#738078}
.map-canvas{position:relative;height:clamp(430px,60vh,680px);min-height:0;overflow:hidden;border-radius:0;isolation:isolate}
#map{height:100%;width:100%;background:var(--paper)}
.map-top{top:22px;left:24px;right:auto;gap:14px}
.map-title-chip{display:flex;color:#57665e;background:#ffffffbd;border-color:var(--line);max-width:170px}
.compass{font-size:24px;color:#738078}
.map-expand-button{position:absolute;right:20px;top:18px;z-index:700;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--control-border);border-radius:var(--control-radius);background:#fff;color:#17231e;font-size:12px;font-weight:550;box-shadow:0 2px 8px #25385706}
.map-expand-button svg{width:17px;height:17px;flex-shrink:0}
.map-expand-button:hover{background:var(--seoul-blue-soft);color:var(--seoul-blue)}
.map-tools{top:88px;right:20px;bottom:auto;gap:8px;flex-direction:column}
.map-tools>button,.zoom-group>button{width:44px;height:44px;color:#17231e}
.map-tools>button,.zoom-group{border-color:var(--control-border);box-shadow:0 2px 8px #25385706}
.zoom-group{display:flex;flex-direction:column}
.zoom-group button:first-child{border-right:0;border-bottom:1px solid var(--line)}
.zoom-group button:disabled{background:#f2f4f8;color:#a3adbd}
.map-data-status{top:75px;left:24px;background:#fff;border-color:var(--line);color:#57665e}
.atlas-loading{background:var(--paper);color:var(--muted)}
.atlas-loading>span{background:var(--seoul-blue)}
.subway-control{right:20px;bottom:26px}
.subway-toggle:hover,.subway-key-toggle:hover{background:var(--seoul-blue-soft)}
.subway-toggle[aria-pressed=true]{background:var(--seoul-blue);border-color:var(--seoul-blue)}
.subway-key-toggle[aria-expanded=true]{background:var(--seoul-blue-soft)}
.subway-switch{background:#e0e5ee}
.subway-key small,.subway-status{color:#57665e}
.subway-station>span{color:var(--ink)}
.subway-station small{color:var(--muted)}
.subway-station:hover>span{background:var(--seoul-blue-soft)}
.subway-station:focus-visible,.subway-exit:focus-visible{outline-color:var(--seoul-blue)}
.transit-exits-button{background:var(--seoul-blue-soft);color:var(--seoul-blue)}
.transit-exits-button:hover{background:#e0eee8}
.transit-popup strong{color:var(--ink)}
.transit-popup small,.transit-popup>span,.transit-popup p{color:var(--muted)}
.transit-popup a{color:var(--seoul-blue)!important}
.transit-line-badge{background:#edf1ef;color:var(--ink);border-top-color:var(--line);border-bottom-color:var(--line);border-right-color:var(--line)}
.map-footnote{position:absolute;inset:auto;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.atlas-controls .search-box{width:360px;flex:1 1 240px;max-width:390px;min-height:48px;border-radius:var(--control-radius);border:1px solid var(--control-border);box-shadow:none;padding:0 18px;gap:10px}
.search-box>span{color:#57665e}
.atlas-controls .search-box input{width:100%;font-size:14px;transform:none;margin:0;line-height:1.5}
.search-box input::placeholder{color:#738078}
.search-box:focus-within{border-color:var(--seoul-blue);box-shadow:0 0 0 3px #14745d15}
.search-box kbd{border-color:var(--line);color:#738078}

/* Keep the geography quiet; saved places and selected districts carry the accent. */
.district-label{color:#7f8eaa;text-shadow:0 1px 3px #edf1ef}
.district-label small{color:#99a5bb}
.city-outline{filter:drop-shadow(0 4px 4px #294b8a0c)}
.river-label{color:#708fbc}
.neighborhood-label{color:#91a0b8;text-shadow:0 1px 3px #edf1ef}
.road-label{color:#8993a5}
.landmark-art>span,.marker-label{background:#ffffffed;color:#415a85}
.landmark-art.compact>svg{background:#fff;border-color:#c8d2cc}
.atlas-pin,.atlas-cluster{background:var(--seoul-blue);color:#fff;border-color:#fff}
.atlas-cluster.single{color:#fff}
.atlas-cluster .cluster-count{color:var(--seoul-blue)}
.leaflet-marker-icon:hover .atlas-cluster,.leaflet-marker-icon:hover .atlas-pin{background:var(--seoul-blue-dark)}
.leaflet-control-attribution{background:#edf1efe8!important;color:#8c98ac!important}
.leaflet-control-attribution a{color:#7888a2!important}
.leaflet-control-scale{margin-left:24px!important;margin-bottom:30px!important}
.leaflet-control-scale-line{background:#ffffff88;color:#7184a4;border-color:#98a9c4}

.explore-panel{padding:36px 0 0;margin-top:0;border-top:0}
.collection-toolbar{margin-bottom:20px}
.section-heading #results-title{font:650 20px/1.5 var(--display);letter-spacing:-.6px;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.section-index,.section-heading #results-count,.card-meta,.collection-footer,.site-footer{color:var(--muted)}
.category-button{font-size:11px;color:#57665e}
.category-button:hover{background:#edf1ef}
.category-button.active,.saved-toggle.active{background:var(--seoul-blue-soft);border-color:#c8d2cc;color:var(--seoul-blue)}
.saved-toggle #saved-count{background:#edf1ef;color:#57665e}
.filter-options,.empty-state{background:#edf1ef}
.empty-state>span,.empty-state p{color:var(--muted)}
.place-grid{grid-auto-columns:calc((100% - 64px)/5);gap:16px;min-height:206px;scrollbar-color:#c8d2cc transparent}
.place-card-image{height:142px;border-radius:16px;background:#edf1ef}
.card-title{font-size:13px}
.save-button{background:#ffffffef;color:var(--ink)}
.save-button.saved{background:var(--seoul-blue);color:#fff}
.image-tag{background:#fffffff0;color:#57665e}
.collection-footer{padding:10px 0 22px}
.site-footer{padding:22px 0 28px;font-size:9px;letter-spacing:.5px}
.mobile-view-toggle,.mobile-trip-button{background:var(--seoul-blue);border-color:var(--seoul-blue);color:#fff;box-shadow:0 4px 18px #14745d26}
.mobile-view-toggle:hover,.mobile-trip-button:hover{background:var(--seoul-blue-dark);color:#fff}
.mobile-menu-nav button svg{color:#57665e}

/* The same controls remain available in the expanded map. */
body:has(.atlas-stage.map-expanded){overflow:hidden}
.atlas-stage.map-expanded{display:flex;flex-direction:column;max-width:none;padding:16px;background:#fff}
.map-expanded .map-panel{position:relative;inset:auto!important;display:flex;flex-direction:column;flex:1;height:auto!important;min-height:0;margin:0}
.map-expanded .atlas-controls{display:flex;flex:0 0 80px}
.map-expanded .map-canvas{height:auto;flex:1;min-height:0}
.map-expanded .map-levels{top:0;left:0}
.map-expanded .map-tools{top:88px;bottom:auto;right:20px;flex-direction:column}
.map-expanded .map-top{top:22px;left:24px;right:auto}
.map-expanded .subway-control{bottom:26px}

@media(max-width:1100px){
  :root{--shell-gutter:32px}
  .site-header{gap:20px}.main-nav{gap:18px}.nav-link{font-size:11px}
  .intro{column-gap:28px}.intro h1{font-size:50px}.intro p{font-size:16px}
  html:not([lang=en]) .intro h1{font-size:36px}html[lang=ja] .intro h1{font-size:27px}
  .map-canvas{height:430px}
  .map-coordinate{display:none}
  .place-grid{grid-auto-columns:calc((100% - 48px)/4)}
}
@media(max-width:850px){
  :root{--shell-gutter:24px}
  .site-header{height:76px}.brand,.brand-logo{width:157px}
  .intro{grid-template-columns:1fr;padding:0 0 24px;row-gap:0}
  .intro p{justify-self:start;max-width:none;margin-top:15px;font-size:16px}
  .intro p br{display:none}
  .place-grid{grid-auto-columns:calc((100% - 32px)/3)}
  .map-coordinate{font-size:8px;letter-spacing:.6px}
}
@media(max-width:640px){
  :root{--shell-gutter:20px}
  .site-header{height:72px;gap:12px}.brand,.brand-logo{width:144px;height:32px}
  .header-actions{gap:6px}.header-icon{width:44px;height:44px;flex-basis:44px}
  .intro{padding:0 0 24px}
  .intro h1{font-size:43px;letter-spacing:-2.4px;line-height:1.2}
  html:not([lang=en]) .intro h1{font-size:35px;letter-spacing:-1.6px;line-height:1.3}
  html[lang=ja] .intro h1{font-size:27px;letter-spacing:-1.3px}
  .intro p,html:not([lang=en]) .intro p{font-size:15px;line-height:1.8;margin-top:14px;word-break:normal}
  html[lang=ko] .intro p{word-break:keep-all;overflow-wrap:anywhere}
  .atlas-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;height:auto;padding:14px 0;gap:10px 8px;border-radius:0}
  .map-level-slot{width:auto;flex:1;min-width:0}
  .map-levels .map-level-picker{padding-inline:13px;gap:7px;font-size:12px}
  .map-levels .map-level-option{font-size:13px;padding-inline:10px}
  .all-seoul-button{flex:0 0 auto;padding-inline:18px;font-size:12px;gap:7px}
  .map-coordinate{display:none}
  .map-canvas{height:360px;border-radius:0}
  .map-top,.map-expanded .map-top{left:15px;top:18px}
  .map-title-chip{display:none}
  .map-expand-button{right:12px;top:12px;min-height:40px;padding-inline:13px;font-size:11px;gap:7px}
  .map-tools,.map-expanded .map-tools{top:auto;right:auto;left:12px;bottom:12px;gap:8px;flex-direction:row}
  .zoom-group{flex-direction:row}.zoom-group button:first-child{border-bottom:0;border-right:1px solid var(--line)}
  .map-tools>button,.zoom-group>button{width:40px;height:40px}
  .map-data-status{left:15px;top:60px;max-width:calc(100% - 75px)}
  .subway-control,.map-expanded .subway-control{right:12px;bottom:12px}
  .subway-actions{flex-direction:column;align-items:flex-end}
  .subway-toggle{font-size:11px;height:40px;padding-inline:10px;gap:5px}
  .leaflet-control-scale{margin-left:14px!important;margin-bottom:64px!important}
  .atlas-controls .search-box{grid-column:1/-1;width:100%;max-width:none;padding-inline:17px}
  .atlas-controls .search-box input{font-size:16px}
  .atlas-controls .search-box kbd{display:none}
  .explore-panel{padding:28px 0 0;margin-top:0}
  .section-heading #results-title{font-size:17px;max-width:230px}.section-heading #results-count{font-size:9px}
  .collection-toolbar{margin-bottom:16px}.category-button{font-size:10px}
  .place-grid{grid-auto-columns:230px;gap:14px;min-height:218px}
  .place-card-image{height:153px}.collection-footer{padding-bottom:18px}
  .site-footer{padding:20px 0 85px;gap:14px;font-size:8px}
  .atlas-stage.map-expanded{padding:8px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .map-expanded .atlas-controls{display:grid;flex:0 0 auto}
}
@media(max-width:370px){
  .section-heading #results-title{max-width:180px}
  :root{--shell-gutter:16px}
  .site-header{gap:8px}.brand,.brand-logo{width:118px}.header-actions{gap:4px}
  .intro h1{font-size:37px}html[lang=ko] .intro h1{font-size:30px}html[lang=ja] .intro h1{font-size:24px}
  .all-seoul-button{padding-inline:13px;font-size:11px}
  .map-levels .map-level-picker{padding-inline:11px;gap:6px;font-size:11px}
  .map-level-picker>span svg{width:15px;height:15px}.map-level-picker .select-chevron svg{width:12px;height:12px}
  .map-canvas{height:340px}
}
@media(min-width:851px) and (max-width:950px){
  .site-header{gap:8px}
  .main-nav{gap:12px}
}

/* INDEX keeps the full-width map divider as its single header boundary. */
body:has(.atlas-stage) .site-header::before{border-bottom:0}