/* North-up coastline and main-road trace, based on the recorded Naver reference. */
.map-canvas { aspect-ratio:4/3; min-width:900px; }
.map-land { fill:#edf0e2; stroke:#a6b69e; stroke-width:1; stroke-linejoin:round; }
.main-road,.secondary-road,.medium-road { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.main-road { stroke:#fff; stroke-width:5; }
.secondary-road { stroke:#fff; stroke-width:3.5; }
.medium-road { stroke:#fff; stroke-width:2.7; }
.ferry-route { fill:none; stroke:#608e99; stroke-width:2.4; stroke-dasharray:6 7; animation:route-flow 3s linear infinite; }
.ferry-routes circle { fill:#608e99; }
.ferry-routes text { font:12px var(--font-sans); fill:#4b757e; paint-order:stroke; stroke:#dbe9e8; stroke-width:4px; }
.map-home { left:var(--home-x); top:var(--home-y); transform:translate(-50%,-120%); padding:10px 13px; }
.map-home::before { content:''; position:absolute; left:50%; top:calc(100% + 6px); height:10px; border-left:1px solid #404759; }
.map-home small { white-space:nowrap; }
.map-pin .pin-label { margin-left:var(--label-x,0px); margin-top:var(--label-y,8px); }
.map-pin .pin-dot { width:23px; height:23px; }
.pin-udo .pin-label small { color:#4b757e; }
.port-pin { position:absolute; transform:translate(-50%,-50%); z-index:3; color:#477c88; font-size:10px; }
.port-pin i { display:block; width:10px; height:10px; background:#477c88; border:2px solid white; transform:rotate(45deg); }
.port-pin > span { position:absolute; white-space:nowrap; left:16px; top:7px; padding:4px 6px; background:#eef5f2e8; }
.port-pin small { display:block; font-size:8px; }
.port-port > span { left:-70px; top:-27px; }
.port-jongdal > span { top:14px; }
.place-route-meta { color:#7c8374; font-size:11px; line-height:1.8; margin-top:14px; }
.udo-options { margin-top:18px; }
.udo-route { display:block; padding:15px 0; border-top:1px solid #bfc9b6; font-size:12px; }
.udo-route strong,.udo-route small { display:block; }
.udo-route small { margin-top:7px; color:#687763; line-height:1.7; }
.journey-note a { text-decoration:underline; text-underline-offset:3px; }
.place-direct { line-height:1.7; }
@media (max-width:767px) { .map-canvas { min-width:900px; } .place-list { grid-template-columns:1fr 1fr; } }
@media(prefers-reduced-motion:reduce) { .ferry-route { animation:none; } }

/* Keep dense north-coast labels separate while preserving the location dots. */
.pin-byeolbang .pin-label { margin-left:15px; margin-top:5px; }
.pin-sehwa .pin-label { margin-left:-20px; margin-top:7px; }
.pin-hado .pin-label { margin-left:57px; margin-top:-40px; }
.pin-birds .pin-label { margin-left:-65px; margin-top:3px; }
.pin-jimibong .pin-label { margin-left:-65px; margin-top:-5px; }
.pin-udo .pin-label { margin-left:25px; margin-top:-64px; }
.port-car-routes { opacity:0; transition:opacity .4s; pointer-events:none; }
.port-car-routes path { fill:none; stroke:#fff; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.udo-selected .port-car-routes { opacity:.85; }
.place-naver[hidden],.udo-options[hidden] { display:none; }
@media (min-width:1101px) and (max-width:1350px) {
 .east-layout { grid-template-columns:minmax(0,1fr); }
 .place-detail { display:grid; grid-template-columns:210px minmax(0,1fr); }
 .place-detail-art { height:100%; }
 .place-description { min-height:0; }
 .place-time { margin:14px 0; }
 .place-naver { max-width:300px; }
}
.pin-seopji .pin-label { margin-left:55px; margin-top:-44px; }
/* Separate nearby labels without decorative leader dots or lines. */
.pin-hado { margin-left:28px; margin-top:-12px; }
.map-pin .pin-label { pointer-events:auto; }

/* The ring belongs to the dot, so transforms and callout offsets share one center. */
.map-pin .pin-dot { position:relative; }
.map-pin[aria-pressed=true] .pin-dot { box-shadow:none; transform:scale(1.1); }
.map-pin:hover .pin-dot,.map-pin:focus-visible .pin-dot { transform:scale(1.1); }
.map-pin[aria-pressed=true] .pin-dot::after { content:''; position:absolute; inset:-6px; border:1px solid #9c714a; border-radius:50%; pointer-events:none; animation:pin-halo 2.4s ease-out infinite; }
@keyframes pin-halo { 0% { transform:scale(.94); opacity:.65; } 80%,100% { transform:scale(1.28); opacity:0; } }
.map-home { flex-direction:row; gap:7px; padding:6px 11px 6px 5px; }
.map-home img { display:block; width:36px; height:36px; }
.map-home strong { font-size:17px; white-space:nowrap; }
@media(prefers-reduced-motion:reduce) { .map-pin[aria-pressed=true] .pin-dot::after { animation:none; opacity:.5; } }
.map-home::after { left:50%; transform:translateX(-50%); }

/* Standalone house landmark: open lettering and a soft circular spotlight. */
.map-home { width:56px; height:56px; transform:translate(-50%,-50%); padding:0; display:grid; place-items:center; background:transparent; box-shadow:none; border-radius:50%; color:#404759; }
.map-home::before { inset:-6px; width:auto; height:auto; border:1px solid #40475928; border-radius:50%; background:#fffdf599; z-index:-1; box-shadow:0 0 0 7px #fffdf535; }
.map-home::after { content:none; }
.map-home img { width:56px; height:56px; transition:transform .4s; }
.map-home strong { position:absolute; bottom:calc(100% + 10px); font-size:18px; letter-spacing:.09em; text-shadow:0 1px 8px #fff; }
.map-home:hover img,.map-home:focus-visible img { transform:scale(1.08); }
.pin-byeolbang { margin-left:-26px; margin-top:38px; }
.pin-byeolbang .pin-label { margin-left:6px; margin-top:4px; }

/* Each destination is one complete route link, including its surrounding space. */
.place-list-item { padding:0; }
.place-card { display:grid; height:100%; box-sizing:border-box; grid-template-columns:22px minmax(0,1fr) 20px; gap:7px 8px; padding:22px 8px; color:var(--ink); transition:background .25s; }
.place-card > span:first-child { color:#849078; font-size:10px; padding-top:3px; }
.place-card strong { font-size:14px; font-weight:500; }
.place-card small { grid-column:2; font-size:11px; color:#7d806b; }
.place-card > span:last-child { grid-column:3; grid-row:1/3; align-self:center; transition:transform .3s; }
.place-card:hover,.place-card:focus-visible { background:#e6e9dc; }
.place-card:hover > span:last-child { transform:translate(3px,-3px); }
.naver-location-copy address { white-space:nowrap; font-size:clamp(10px,1vw,14px); letter-spacing:-.025em; }
@media(max-width:767px) {
 .place-card { grid-template-columns:16px minmax(0,1fr) 12px; gap:6px; padding:18px 2px; }
 .place-card strong { font-size:12px; }
 .place-card small { font-size:10px; line-height:1.7; }
 .naver-location-copy address { font-size:clamp(9px,2.65vw,13px); }
}

/* Quiet place markers and a symbolic shaded relief layer. */
.map-terrain { pointer-events:none; }
.map-terrain path,.terrain-gradient { stroke:none; }
.oreum-label { font:12px var(--font-sans); text-anchor:middle; fill:#536a49; paint-order:stroke; stroke:#e4ead8; stroke-width:4px; }
.map-pin { width:44px; height:44px; padding:17px; }
.map-pin .pin-dot { width:10px; height:10px; min-width:10px; background:#728268; border:2px solid #fbfaf0; }
.map-pin[aria-pressed=true] .pin-dot { background:#9c714a; }
.map-pin .pin-label { padding:5px 7px; font-size:11px; background:#faf9f0e8; }
.pin-byeolbang { margin-top:33px; }
.pin-hado { margin-left:18px; }
.pin-hado .pin-label { margin-left:47px; margin-top:-26px; }
.pin-birds .pin-label { margin-left:-62px; margin-top:8px; }
.pin-seopji .pin-label { margin-top:-24px; }
.pin-udo .pin-label { margin-top:-35px; }
.pin-woljeong .pin-label,.pin-gimnyeong .pin-label,.pin-pyeongdae .pin-label { margin-top:8px; }
.terrain-key { display:inline-flex; align-items:center; gap:7px; }
.terrain-key i { width:62px; height:7px; border-radius:2px; background:linear-gradient(90deg,#edf0e2,#b6cba0,#7f9c68); }
.map-legend { flex-wrap:wrap; gap:12px 20px; }
.place-detail-art { display:flex; align-items:center; justify-content:center; }
.place-detail-art svg { position:static; width:100%; max-height:150px; }

/* Label edges sit six pixels from their dot; the 44px hit area stays intact. */
.map-pin .pin-label { left:calc(50% + 11px); top:50%; transform:translateY(-50%); margin:0; padding:3px 5px; }
.pin-birds .pin-label,.pin-jimibong .pin-label { left:auto; right:calc(50% + 11px); }
.pin-byeolbang .pin-label { left:50%; top:calc(50% + 11px); transform:translateX(-50%); }
.port-pin > span,.port-jongdal > span { left:15px; top:50%; transform:translateY(-50%); }
.port-port > span { left:auto; right:15px; top:50%; }
/* The coastal cluster stays readable even on the 900px scrollable canvas. */
.pin-byeolbang .pin-label { left:auto; right:calc(50% + 11px); top:50%; transform:translateY(-50%); }

/* Western forest destinations share the same geographic projection. */
.map-canvas { aspect-ratio:11/6; min-width:1200px; }
.oreum-relief ellipse { fill:#c0cda9; stroke:#98ab84; stroke-width:1.2; stroke-opacity:1; }
.pin-byeolbang,.pin-hado { margin:0; }
.map-home { transform:translate(-50%,-140%); width:42px; height:42px; }
.map-home img { width:42px; height:42px; }
.map-home::before { inset:-4px; }
.map-home::after { content:''; position:absolute; left:50%; top:calc(100% + 4px); height:13px; border-left:1px solid #687662; }
.map-home strong { bottom:calc(100% + 8px); font-size:16px; }
.pin-byeolbang .pin-label { top:calc(50% + 10px); right:calc(50% + 5px); transform:none; }
.pin-sehwa .pin-label { left:auto; right:calc(50% + 11px); }
.pin-hado .pin-label { top:calc(50% - 10px); transform:translateY(-100%); }
.pin-birds .pin-label { top:calc(50% + 10px); transform:none; }
.pin-seongsan .pin-label { top:calc(50% - 10px); transform:translateY(-100%); }
.map-home::after { border:0; border-left:1px solid #687662; width:0; }
.east-layout { grid-template-columns:minmax(0,1fr); }
@media(min-width:1101px) { .place-detail { display:grid; grid-template-columns:210px minmax(0,1fr); }.place-detail-art { height:100%; }.place-description { min-height:0; }.place-naver { max-width:300px; } }
@media(min-width:1200px) { .map-canvas { min-width:1100px; } }