/* 실제 송도 지도와 자료 선택·원자료 안내를 좁은 화면에서도 읽기 쉽게 배치한다. */
:root { font-family: system-ui, sans-serif; color: #283e34; background: #f3f4ee; }
* { box-sizing: border-box; } body { margin: 0; } a { color: inherit; }
header { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border-bottom: 1px solid #d9dfd3; }
header span, .eyebrow { font-size: 11px; color: #708172; letter-spacing: .08em; } h1 { margin: 5px 0 0; font-size: 24px; } nav { display: flex; gap: 16px; font-size: 12px; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: calc(100dvh - 91px); min-height: 570px; }
.map-panel { position: relative; min-width: 0; } #map { position: absolute; inset: 0; } canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.map-note { position: absolute; top: 16px; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); background: #fbfcf2e6; padding: 10px 13px; font-size: 11px; line-height: 1.8; pointer-events: none; }
.map-controls { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .map-controls span { font-size: 11px; padding: 7px; background: #fbfcf2e6; }
aside { overflow-y: auto; padding: 22px; background: #fcfcf7; border-left: 1px solid #d9dfd3; } h2 { font-size: 26px; margin: 8px 0 18px; } h3 { font-size: 16px; }
.counts div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #e4e8de; font-size: 12px; } dd { margin: 0; font-variant-numeric: tabular-nums; }
fieldset { border: 1px solid #d9dfd3; margin: 22px 0; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; } legend { padding: 0 5px; }
button, input[type="search"] { font: inherit; font-size: 12px; color: inherit; padding: 10px; border: 1px solid #bac8b7; border-radius: 4px; background: #fff; } button { cursor: pointer; } button:focus-visible, input:focus-visible { outline: 3px solid #c19b42; outline-offset: 2px; }
.search-label { display: block; font-size: 12px; margin-bottom: 8px; } input[type="search"] { width: 100%; } #results { display: grid; gap: 5px; font-size: 12px; margin-top: 8px; } #results button { text-align: left; }
.selection { margin-top: 22px; padding-top: 6px; border-top: 1px solid #d9dfd3; } .selection p { font-size: 12px; line-height: 1.8; }
#status { font-size: 12px; line-height: 1.8; padding: 12px; background: #e6eddf; } #status[data-error="true"] { background: #f1dfd5; }
.notice, footer { font-size: 11px; color: #718073; line-height: 1.8; }
/* (★중요) 출처·범위와 후보 상태를 색상뿐 아니라 글자로 함께 표시한다. */
.walk-panel { border-block: 1px solid #d9dfd3; margin: 18px 0; padding: 10px 0 16px; }
.walk-panel h3 { margin: 14px 0 10px; }.walk-counts { display: flex; gap: 14px; font-size: 12px; flex-wrap: wrap; }
.walk-counts strong { font-variant-numeric: tabular-nums; }.walk-panel fieldset { margin: 14px 0 10px; }
.swatch { display: inline-block; width: 9px; height: 9px; margin-right: 3px; }.sidewalk { background: #c4c6b4; }.water { background: #286c80; }.footbridge { background: #b89b63; }
.walk-filter { display: block; font-size: 12px; margin: 12px 0; }#walk-home { width: 100%; }
#walk-results { display: grid; gap: 5px; max-height: 220px; overflow-y: auto; margin-top: 8px; }
#walk-results button { text-align: left; overflow-wrap: anywhere; }#walk-results button[data-state="review"] { border-left: 4px solid #357b56; }
#walk-results button[data-state="blocked"] { border-left: 4px solid #b57252; }#walk-results button[aria-pressed="true"] { background: #eef2d9; }
#walk-status { font-size: 12px; line-height: 1.7; }#walk-status[data-error="true"] { background: #f1dfd5; padding: 10px; }
button:disabled, input:disabled { cursor: default; opacity: .55; }
@media(max-width:760px) { header { padding: 14px; } h1 { font-size: 19px; } nav { gap: 8px; font-size: 10px; } main { display: block; height: auto; min-height: 0; } .map-panel { height: 60dvh; min-height: 360px; } aside { overflow: visible; border-left: 0; padding: 20px; } }
/* (★중요) 보행 조작은 좁은 화면에서도 단어와 버튼을 쪼개지 않는다. */
#ground-actions:not([hidden]) { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#ground-actions label { display:flex; align-items:center; gap:6px; white-space:nowrap; }

/* (★중요) 조명 프리셋과 화질은 실제 자료 및 생활 시간과 분리된 보기 설정이다. */
.graphics-panel { border-bottom: 1px solid #d9dfd3; padding-bottom: 14px; margin-bottom: 22px; }
.graphics-panel h2 { font-size: 19px; margin-top: 0; }
.lighting-controls { display: flex; gap: 8px; }
.lighting-controls [aria-pressed="true"] { background: #315c52; color: white; border-color: #315c52; }
.graphics-option { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 12px; }
.graphics-option select { font: inherit; padding: 7px 10px; color: inherit; background: #fff; border: 1px solid #bac8b7; border-radius: 4px; }
/* (★중요) 지형 자료의 출처를 실제 지도 화면에 함께 남긴다. */
#landscape-attribution { position:absolute;right:10px;bottom:2px;font-size:9px;padding:3px 6px;background:#f4f6eceb;color:#43554a; }