/* JOIN SHEET light palette, shared by INDEX and every public route. */
:root{color-scheme:light;--bg:#f7f9f8;--surface:#edf1ef;--elevated:#e5ebe7;--ink:#17231e;--muted:#57665e;--faint:#738078;--line:#c8d2cc;--accent:#14745d;--accent-dark:#105a49;--accent-soft:#e0eee8;--paper:var(--surface);--control-border:var(--line);--font:Manrope,'Noto Sans KR','Noto Sans JP','Malgun Gothic',sans-serif;--heading:var(--font);--sans:var(--font);--display:var(--font);--seoul-blue:var(--accent);--seoul-blue-dark:var(--accent-dark);--seoul-blue-soft:var(--accent-soft);--red:var(--accent);--red-light:var(--accent-soft);--green:var(--accent);--lime:var(--accent-soft)}
body{background:var(--bg);color:var(--ink);font-family:var(--font)}
.site-header .brand-logo,.onlyseoul-footer .footer-logo svg{mix-blend-mode:multiply}
.explore-panel{background:var(--bg)}
::selection{background:var(--accent);color:var(--bg)}
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--accent)}
.button-primary,.site-trip-actions button[type=submit],.mobile-view-toggle,.mobile-trip-button{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.button-primary:hover,.site-trip-actions button[type=submit]:hover,.mobile-view-toggle:hover,.mobile-trip-button:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.content-shell .catalog-sort select{background:transparent}
.place-card-image,.card-image,.image-placeholder,.card-photo.miniature-image,.detail-photo>img.miniature-image{background:var(--surface)}
.site-trip-dialog,#place-dialog,#trip-dialog,#info-dialog,#auth-dialog{background:var(--bg);color:var(--ink);border-color:var(--line)}
.atlas-stage.map-expanded{background:var(--bg)}
.map-panel{background:var(--surface)}
.map-levels,.atlas-controls .search-box,.all-seoul-button,.map-expand-button,.map-tools>button,.zoom-group,.subway-actions>button{background:var(--bg);border-color:var(--line);color:var(--ink)}
.map-levels .map-level-picker:hover,.map-levels .map-level-option:hover,.zoom-group button:disabled{background:var(--elevated)}
.atlas-controls .search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #14745d18}
.map-tools>button,.zoom-group>button,.map-expand-button,.search-box>span{color:var(--ink)}
.map-title-chip,.map-data-status{background:var(--bg);color:var(--muted);border-color:var(--line)}
.subway-switch{background:var(--line)}
.subway-key small,.subway-status,.compass,.search-box input::placeholder{color:var(--muted)}
.transit-exits-button:hover{background:var(--elevated)}
.transit-line-badge{background:var(--surface)}
.district-label,.neighborhood-label,.road-label{color:var(--muted);text-shadow:0 1px 3px var(--bg)}
.district-label small{color:var(--faint)}
#map[data-district-art=true] .district-label{color:var(--ink)}
.landmark-art>span,.marker-label{background:#f7f9f8ed;color:var(--ink)}
.landmark-art.compact>svg{background:var(--bg);border-color:var(--line)}
.leaflet-control-attribution{background:#f7f9f8e8!important;color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-control-scale-line{color:var(--muted);border-color:var(--muted)}
.category-button:hover{background:var(--surface)}
.category-button.active,.saved-toggle.active{border-color:var(--line)}
.saved-toggle #saved-count{background:var(--surface);color:var(--muted)}
.empty-state{background:var(--surface)}
.image-tag{background:var(--bg);color:var(--muted)}
.mobile-view-toggle,.mobile-trip-button{box-shadow:0 4px 18px #17231e26}
.site-image-failed{background:var(--surface);color:var(--muted)}
#site-toast{background:var(--ink);color:var(--bg)}

/* Header geometry is independent of the page's map/content CSS. */
.site-header{width:min(1280px,calc(100% - 112px));height:auto;min-height:88px;padding:12px 0;gap:40px;background:var(--bg);font-family:var(--font)}
.site-header .brand{display:flex;align-items:center;width:143px;min-height:44px}
.site-header .brand-logo{width:143px;height:auto;aspect-ratio:288/55}
.site-header .main-nav{gap:24px;margin:0}
.site-header .nav-link{padding:0;font-size:16px;line-height:24px;font-weight:400;color:var(--muted)}
.site-header:is(:lang(ko),:lang(ja)) .nav-link{font-size:15px}
.site-header .nav-link:hover,.site-header .nav-link[aria-current=page]{color:var(--ink)}
.site-header .nav-link[aria-current=page]:after{content:none}
.site-header .header-actions{gap:16px;margin-left:auto}
.site-header .header-utilities{position:relative;display:grid;grid-template-columns:repeat(3,52px);place-items:center;gap:6px;flex-shrink:0}
.site-header .header-icon{width:44px;height:44px;border-color:var(--line);background:var(--surface);color:var(--ink)}
.site-header .header-icon svg{width:18px;height:18px;stroke-width:2}
.site-header .header-icon:hover{background:var(--elevated);border-color:var(--muted)}
.site-header .header-icon[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.site-header .language-picker{display:block}
.site-header .trip-button{display:flex;gap:10px;margin:0;min-height:44px;padding:9px 18px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;line-height:1.5}
.site-header .trip-button:hover{background:var(--accent);transform:none}
.site-header .trip-button>svg,.site-header .trip-button>span[data-icon] svg{width:16px;height:16px}
.site-header .trip-button>span:last-child{margin-left:0}
.site-header #language-options{grid-template-columns:repeat(3,52px);justify-items:center;gap:6px}
.site-header #language-options button{border-color:var(--line);background:var(--surface);color:var(--ink);font-family:var(--font)}
.site-header #language-options button:hover{background:var(--elevated)}
.site-header #language-options [aria-selected=true]{background:var(--accent);color:var(--bg);border-color:transparent}
.site-header #language-toggle[aria-expanded=true]{background:var(--elevated);border-color:var(--muted);color:var(--ink)}
.site-header .saved-indicator{background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.site-header .mobile-menu-toggle{display:none;border:0;background:transparent;border-radius:0}
.site-header .mobile-menu-toggle:hover{background:transparent;border-color:transparent}
#mobile-menu-dialog .menu-utility svg{width:18px;height:18px;stroke-width:2}
@media(max-width:1160px){.site-header .main-nav{display:none}.site-header .mobile-menu-toggle{display:grid}}
@media(max-width:1100px){.site-header{width:calc(100% - 64px);gap:24px}.site-header .main-nav{display:none}.site-header .mobile-menu-toggle{display:grid}.site-header .header-actions{gap:12px}}
@media(max-width:800px){.site-header{width:calc(100% - 24px);min-height:64px;padding:10px 0;gap:0}.site-header .brand{width:125px}.site-header .brand-logo{width:125px;height:auto}.site-header .header-utilities,.site-header .header-actions>.trip-button{display:none}.site-header .mobile-menu-toggle svg{width:16px;height:16px}}

/* KOGL Type 3 photographs: preserve the complete original photograph. */
img[src$="-kogl3.jpg"]{object-fit:contain!important;background:var(--paper,#f3f3f3);filter:none!important;transform:none!important}

/* ONLYSEOUL mint: monochrome artwork, clear interactive/saved states. */
:root{--bg:#f8f8f6;--surface:#efefec;--elevated:#e7e7e3;--ink:#232323;--muted:#606060;--faint:#797979;--line:#d3d3cf;--accent:#a1ead8;--accent-dark:#245b50;--accent-soft:#a1ead8;--accent-ring:#a1ead84d;--seoul-blue:var(--accent-dark);--red:var(--accent-dark);--green:var(--accent-dark)}
::selection{background:var(--accent);color:var(--ink)}
.atlas-controls .search-box:focus-within,.filter-select .filter-select-toggle:is([aria-expanded=true],:focus-visible),body[data-page=list] .catalog-filters .filter-select-toggle[aria-expanded=true]{border-color:var(--accent-dark);box-shadow:0 0 0 3px var(--accent-ring)}
.category-button.active,.saved-toggle.active,.filter-select .filter-select-options>button[aria-selected=true],.map-levels .map-level-option[aria-selected=true]{background:var(--accent-soft);color:var(--accent-dark);border-color:var(--accent)}
.button-primary,.primary-button,.site-trip-actions button[type=submit]{background:var(--accent);border-color:var(--accent-dark);color:var(--ink)}
.button-primary:hover,.primary-button:hover,.site-trip-actions button[type=submit]:hover{background:#87ddc8;border-color:var(--accent-dark);color:var(--ink)}
.site-header .trip-button:hover,.site-header #language-options [aria-selected=true]{background:var(--accent);color:var(--ink)}
.save-button.saved,.card-save[aria-pressed=true],.site-header .header-icon[aria-pressed=true]{background:var(--accent);border-color:var(--accent-dark);color:var(--ink)}
.save-button.saved svg,.card-save[aria-pressed=true] svg{fill:currentColor}
.site-header .saved-indicator{background:var(--accent)}

/* Overlay borders preserve image dimensions, cropping and layout on save/unsave. */
.place-card:has(>.save-button[aria-pressed=true])>.place-card-image::before,
.card-image:has(>.card-save[aria-pressed=true])::after,
body[data-page=detail]:has(.detail-actions [data-save-place][aria-pressed=true]) .detail-photo::after{
  content:"";position:absolute;inset:0;border:3px solid var(--accent);border-radius:inherit;pointer-events:none;z-index:2;
}
.saved-item>img{outline:2px solid var(--accent);outline-offset:-2px}
#place-dialog:has(#detail-save[aria-pressed=true])>.detail-image{outline:3px solid var(--accent);outline-offset:-3px}

/* Trace the transparent artwork silhouette, never tint the building itself. */
#map .landmark-miniature.is-saved>img,
#map .miniature-marker:is(:hover,:focus-visible) .landmark-miniature.is-saved>img,
#map .landmark-art.is-saved>svg{
  filter:grayscale(1) drop-shadow(1px 0 0 #a1ead8) drop-shadow(-1px 0 0 #a1ead8) drop-shadow(0 1px 0 #a1ead8) drop-shadow(0 -1px 0 #a1ead8)!important;
}
#map .landmark-miniature.is-saved>i,#map .landmark-art.is-saved>i{background:var(--accent);color:var(--ink);border-color:#fff}
#map .atlas-illustration-name>.miniature-place-name.is-saved,#map .landmark-art.is-saved>span{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;text-shadow:0 0 3px var(--bg)}
#map .atlas-pin{background:var(--ink);color:#fff}
#map .atlas-pin.is-saved,#map .leaflet-marker-icon:hover .atlas-pin.is-saved{background:var(--accent);color:var(--ink);box-shadow:0 0 0 2px var(--accent-ring)}
#map .atlas-cluster{background:var(--ink);color:#fff}
#map .atlas-cluster .cluster-count{background:var(--surface);color:var(--ink)}

/* The unfiltered state stays neutral; color signals a deliberate selection. */
#explore-panel .category-button.active[data-category=all],.filter-select .filter-select-options>button[aria-selected=true][data-value=all],.filter-select .filter-select-options>button[aria-selected=true][data-value=""]{background:var(--surface);color:var(--ink);border-color:var(--line)}

@media(min-width:801px){
.place-card:has(>.save-button[aria-pressed=true])>.place-card-image::before,
.card-image:has(>.card-save[aria-pressed=true])::after,
body[data-page=detail]:has(.detail-actions [data-save-place][aria-pressed=true]) .detail-photo::after{border-width:2px}
#place-dialog:has(#detail-save[aria-pressed=true])>.detail-image{outline-width:2px;outline-offset:-2px}
}

/* Category counts share a common type scale; grid columns adapt to district shape. */
#map .district-summary{display:grid;grid-template-columns:repeat(var(--summary-columns,3),max-content);gap:2px 4px;height:auto;min-height:0;min-width:0;padding:3px 4px;border:1px solid var(--line);border-radius:9px;background:#fffffff2;color:var(--ink);box-shadow:none;text-shadow:none}
#map .district-category{display:flex;align-items:center;justify-content:flex-start;gap:2px;line-height:14px}
#map .district-category svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#map .district-category b{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;margin:0;min-width:14px;text-align:left}
#map .district-category.is-empty{color:var(--muted)}
#map .city-category-summary{position:absolute;left:24px;top:60px;z-index:700;pointer-events:none}
#map .city-category-summary .district-summary{grid-template-columns:repeat(5,max-content);gap:9px;border-radius:999px}
#map .city-category-summary[hidden]{display:none}
#map .district-caption{line-height:13px;font-size:10px}
@media(max-width:640px){#map .district-caption{line-height:12px;font-size:9px}#map .district-category b{font-size:12px}}
#map .discovery-point-marker>.atlas-pin{width:20px;height:20px;margin:6px;border:2px solid #fff;box-shadow:0 1px 3px #0002}
#map .discovery-point-marker>.atlas-pin svg{width:11px;height:11px}
@media(max-width:640px){#map .discovery-point-marker>.atlas-pin{width:22px;height:22px;margin:5px}#map .discovery-point-marker>.atlas-pin svg{width:12px;height:12px}}

/* Hotel discovery points: the same red in every language, theme and save state. */
#map .discovery-point-marker[data-category="stays"]>.atlas-pin{
  background:#dc3f45!important;color:#fff!important;border-color:#fff!important;
  width:24px;height:24px;margin:4px;
}
#map .discovery-point-marker[data-category="stays"]>.atlas-pin svg{width:13px;height:13px}
#map .discovery-point-marker[data-category="stays"]:focus-visible{outline:2px solid #dc3f45;outline-offset:3px;border-radius:50%}
.hotel-map-detail{padding-top:48px}
.hotel-map-symbol{display:inline-flex;width:28px;height:28px;border-radius:50%;background:#dc3f45;color:#fff;align-items:center;justify-content:center;margin-right:8px}
.hotel-map-symbol svg{width:16px;height:16px}