/* Shared capsule controls and a quiet, icon-led header. */
:root{--control-radius:999px;--control-height:48px;--control-border:#dce1d8}
.site-header{height:84px;padding-inline:40px;gap:24px}
.header-actions{gap:8px}
.header-icon{width:44px;height:44px;flex:0 0 44px;padding:0;border:1px solid #e7eae3;border-radius:var(--control-radius);display:grid;place-items:center;background:#fafbf8;color:var(--ink);position:relative}
.header-icon svg{width:19px;height:19px;stroke-width:1.65}
.header-icon:hover{background:#edf1e7;color:var(--ink)}
.header-icon[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}
.saved-indicator{width:6px;height:6px;border-radius:50%;background:#8ca747;position:absolute;right:9px;top:8px;box-shadow:0 0 0 2px #fafbf8}
.header-icon[aria-pressed=true] .saved-indicator{background:var(--lime);box-shadow:0 0 0 2px var(--ink)}
.trip-button{height:44px;border-radius:var(--control-radius);padding:0 18px;margin-left:6px;font-size:12px}
.trip-button #header-trip-count{border-radius:var(--control-radius)}
.mobile-menu-toggle{display:none}
.intro-bottom{margin-top:32px}
.headline-ending{display:inline-block;white-space:nowrap}
.atlas-controls{position:absolute;left:40px;bottom:24px;z-index:710;display:flex;align-items:center;gap:10px;width:min(560px,calc(100% - 140px))}
.all-seoul-button,.atlas-controls .search-box{height:var(--control-height);border:1px solid var(--control-border);border-radius:var(--control-radius);background:#fff;box-shadow:0 3px 14px #23321b05}
.all-seoul-button{display:flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto;padding:0 21px;font-size:13px;font-weight:550;white-space:nowrap}
.all-seoul-button svg{width:17px;height:17px}
.all-seoul-button.active{background:var(--ink);border-color:var(--ink);color:white}
.all-seoul-button:hover{background:#e9eee1;color:var(--ink)}
.all-seoul-button.active:hover{background:#354331;color:white}
.atlas-controls .search-box{margin:0;flex:1;min-width:0;gap:11px;padding:0 18px}
.atlas-controls .search-box input{font-size:14px;transform:none;transform-origin:initial;width:100%;margin:0;line-height:1.5}
.atlas-controls .search-box input::placeholder{color:#899080}
.atlas-controls .search-box kbd{border-radius:5px;padding:1px 5px}
.atlas-controls .search-box:focus-within{border-color:#8a9b70;box-shadow:0 0 0 3px #d8f36a30}
.map-levels{display:block;width:200px;padding:0;border:1px solid var(--control-border);border-radius:calc(var(--control-height) / 2);background:#fff;box-shadow:0 3px 14px #23321b05;left:27px;top:22px;overflow:hidden}
.map-levels.is-open{box-shadow:0 12px 32px #23321b14;animation:map-level-unfold .22s ease-out}
.map-levels .map-level-picker{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:calc(var(--control-height) - 2px);padding:0 16px;border:0;border-radius:var(--control-radius);background:transparent;color:var(--ink);font-size:13px;font-weight:550;text-align:left}
.map-level-picker>span{pointer-events:none}
.map-level-picker>span svg{width:17px;height:17px}
.map-level-picker .select-chevron{display:flex;margin-left:auto;transition:transform .2s ease}
.map-level-picker .select-chevron svg{width:14px;height:14px}
.map-level-picker[aria-expanded=true] .select-chevron{transform:rotate(180deg)}
.map-levels .map-level-picker:hover{background:#f8faf4}
.map-level-options{padding:6px 8px 10px;border-top:0}
.map-levels .map-level-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:44px;padding:0 14px;border:0;border-radius:16px;background:transparent;color:var(--ink);font-size:13px;font-weight:450;text-align:left}
.map-level-option>span{display:flex;visibility:hidden}
.map-level-option svg{width:16px;height:16px}
.map-levels .map-level-option[aria-selected=true]{background:#edf3df;font-weight:600}
.map-level-option[aria-selected=true]>span{visibility:visible}
.map-levels .map-level-option:hover{background:#f4f7ee}
.map-levels button:focus-visible{outline:2px solid #749342;outline-offset:-3px}
@keyframes map-level-unfold{from{max-height:48px}to{max-height:250px}}
@media(prefers-reduced-motion:reduce){.map-levels.is-open{animation:none}.map-level-picker .select-chevron{transition:none}}
.map-footnote{top:80px}
.map-data-status{top:107px}
.map-tools>button,.zoom-group{border-radius:var(--control-radius);overflow:hidden}
.map-tools>button,.zoom-group>button{width:40px;height:40px}
.map-tools{bottom:94px}
.leaflet-control-scale{margin-bottom:89px!important}
.map-expanded .atlas-controls{display:none}
.map-expanded .map-footnote{top:80px}
.category-button,.saved-toggle,.text-icon-button{border-radius:var(--control-radius)}
.place-card-image{border-radius:12px}
.mobile-menu-dialog{position:fixed;inset:12px 12px 12px auto;margin:0;width:min(360px,calc(100vw - 24px));height:calc(100dvh - 24px);max-height:none;max-width:none;padding:24px;border:1px solid var(--line);border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 20px 80px #17231024;overflow:auto}
.mobile-menu-dialog[open]{display:flex;flex-direction:column}
.mobile-menu-dialog::backdrop{background:#18221755;backdrop-filter:none}
body:has(.mobile-menu-dialog[open]){overflow:hidden}
.mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;font-weight:650;letter-spacing:1.7px}
.mobile-menu-nav{display:flex;flex-direction:column;margin-top:32px}
.mobile-menu-nav button{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);font:500 21px/1.3 var(--display);letter-spacing:-.7px}
.mobile-menu-nav button svg{width:19px;height:19px;color:#8a9480}
.mobile-menu-bottom{margin-top:auto;padding-top:40px}
.mobile-menu-bottom p{font:500 26px/1.3 var(--display);letter-spacing:-.8px;margin:0 0 22px}
.menu-trip-button{display:flex;align-items:center;gap:11px;width:100%;height:48px;padding:0 19px;border-radius:var(--control-radius);background:var(--ink);color:white;font-size:13px}
.menu-trip-button>span:last-child{margin-left:auto}
.menu-trip-button:hover{background:#354331;color:white}
.mobile-menu-bottom>span{display:block;margin-top:16px;font-size:11px;color:var(--muted)}
@media(min-width:1600px){.atlas-controls{left:56px;bottom:26px;width:620px}}
@media(max-width:1100px){.site-header{padding-inline:28px;gap:18px}.main-nav{gap:20px}.trip-button{padding-inline:13px;font-size:11px;gap:7px}.atlas-controls{left:28px;width:min(520px,calc(100% - 120px))}.map-levels{left:20px;top:19px}}
@media(max-width:850px){.site-header{height:74px;padding-inline:24px}.main-nav,.header-actions>.trip-button{display:none}.mobile-menu-toggle{display:grid}.header-actions{margin-left:auto;gap:8px}.atlas-controls{left:25px;bottom:20px;width:min(480px,calc(100% - 105px))}}
@media(max-width:640px){
  .site-header{height:72px;padding-inline:20px;gap:12px}.brand,.brand-logo{width:144px;height:32px}.header-actions{gap:6px}.header-icon{width:44px;height:44px;flex-basis:44px;background:transparent;border-color:#e5e9e0}.header-icon svg{width:18px;height:18px}
  .intro{order:0;padding-bottom:0}.intro p{margin-bottom:0}
  .atlas-controls{order:1;position:relative;inset:auto;width:100%;padding:0 20px;margin-top:24px;gap:8px;flex-shrink:0}
  .all-seoul-button{padding:0 16px;gap:7px;font-size:12px}.all-seoul-button svg{width:16px;height:16px}
  .atlas-controls .search-box{padding-inline:15px;gap:8px}.atlas-controls .search-box input{font-size:16px}.atlas-controls .search-box kbd{display:none}
  .map-panel{order:2;margin-top:16px;height:430px}.map-levels{left:20px;top:14px}.map-levels .map-level-picker,.map-levels .map-level-option{font-size:14px}.map-top{top:25px;right:22px}
  .map-footnote,.map-expanded .map-footnote{top:74px;left:22px;right:30px;font-size:9px}.map-data-status{top:98px;left:20px}
  .map-tools,.map-expanded .map-tools{top:100px;bottom:auto;right:20px;gap:8px;flex-direction:column}.map-tools>button,.zoom-group>button{width:40px;height:40px}.zoom-group{flex-direction:column}.zoom-group button:first-child{border-right:0;border-bottom:1px solid #e6e9e0}.leaflet-control-scale{margin-bottom:48px!important;margin-left:20px!important}
  .map-expanded .map-panel{margin:0}.map-expanded .map-levels{top:18px}.map-expanded .map-footnote{top:78px}
}
@media(max-width:370px){.site-header{padding-inline:16px;gap:8px}.brand,.brand-logo{width:118px}.header-actions{gap:4px}.atlas-controls{padding-inline:16px;gap:7px}.all-seoul-button{padding-inline:13px;font-size:11px;gap:6px}.atlas-controls .search-box{padding-inline:12px;gap:7px}.mobile-menu-dialog{padding:20px}.mobile-menu-nav button{font-size:19px}}