:root {
  --bg:#f3f5f7; --fg:#202b3a; --card:#fff; --line:#dce1e6; --accent:#234c86; --muted:#555e67;
  --selected:#e9eff7; --sun-wash:#fff1cb; --sun-ink:#67460e;
  --sun:#f4bf32; --blk:#46506b; --back:#c9ced9; --own:#2f6fed; --bld:#aab2c6; --est:#b76012;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-padding-top:16px; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.6 system-ui,-apple-system,"Noto Sans KR","Malgun Gothic",sans-serif; }
::selection { background:#dce8ff; color:var(--fg); }
input { caret-color:var(--accent); }
button,input,select { font:inherit; }
button,select,input[type=number],input[type=search],input[type=text] { min-height:44px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--fg); }
button { cursor:pointer; padding:10px 14px; line-height:1.4; transition:background-color .15s ease; }
button:hover:not(:disabled) { background:var(--selected); }
button:disabled { color:var(--muted); background:#e8ecf2; cursor:default; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button.danger { color:#b3261e; }
a { color:var(--accent); text-underline-offset:4px; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
header { background:var(--card); border-bottom:1px solid var(--line); padding:calc(16px + env(safe-area-inset-top)) 24px 16px; }
.header-inner,main { width:min(100%, 1080px); margin-inline:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; background:var(--sun-wash); color:var(--sun-ink); border-radius:13px; }
.brand h1 { font-size:20px; line-height:1.3; letter-spacing:-.02em; margin:0; }
.brand p { margin:1px 0 0; color:var(--muted); font-size:12px; }
.app-tabs { display:flex; gap:8px; }
.app-tabs button { border:0; display:flex; align-items:center; gap:6px; color:var(--muted); background:transparent; }
.app-tabs button[aria-current=page] { background:var(--selected); color:var(--accent); font-weight:650; }
#addressSearch { margin-top:16px; }
#searchForm { display:flex; gap:8px; }
.search-field { position:relative; flex:1; min-width:0; }
.search-field svg { position:absolute; inset:0 auto 0 14px; margin:auto 0; pointer-events:none; color:var(--muted); }
#searchForm input { width:100%; padding:10px 12px 10px 42px; background:var(--bg); font-size:16px; }
#searchForm input::placeholder { color:var(--muted); opacity:1; }
#searchForm button[type=submit] { color:white; background:var(--accent); border-color:var(--accent); font-weight:650; }
#gps { padding:10px; }
#results { list-style:none; padding:0; margin:8px 0 0; max-height:min(38svh,360px); overflow-y:auto; overscroll-behavior:contain; }
#results button { width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:12px 8px; }
#results small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
#results .result-pages { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; padding:8px 0; }
#results .result-pages button { width:auto; border:1px solid var(--line); border-radius:8px; }
#searchFeedback { margin:8px 0 0; color:var(--muted); font-size:13px; }
#searchFeedback.err { color:#a5261d; }
main { width:min(100%, 1128px); padding:24px 24px 40px; }
h2,h3 { line-height:1.4; letter-spacing:-.015em; }
h2 { font-size:22px; margin:0 0 16px; }
h3 { font-size:18px; margin:24px 0 10px; }
h3 small { display:block; color:var(--muted); font-size:13px; font-weight:400; margin-top:4px; }
p { margin:8px 0 16px; }
.explorer { display:grid; grid-template-columns:minmax(0, 1fr) minmax(272px, 320px); gap:28px; align-items:start; }
.map-panel { min-width:0; }
.map-selection strong { display:block; font-size:18px; line-height:1.4; font-weight:700; margin-bottom:10px; overflow-wrap:anywhere; }
.map-selection>span { display:block; color:var(--muted); font-size:12px; margin:3px 0 12px; }
.canvasWrap { position:relative; }
canvas { display:block; width:100%; border-radius:12px; touch-action:none; }
#plan { height:clamp(320px,53svh,510px); background:#e9edf5; cursor:grab; }
#plan:active { cursor:grabbing; }
.mapbar,.zoom { position:absolute; display:flex; flex-direction:column; gap:8px; }
.mapbar { top:34px; left:10px; align-items:start; }
.mapbar button { display:flex; align-items:center; gap:6px; background:white; color:var(--fg); font-size:13px; padding:9px 11px; }
.mapbar button[aria-pressed=true] { background:var(--accent); color:white; border-color:var(--accent); }
.zoom { top:10px; right:10px; gap:4px; }
.zoom button { width:44px; height:44px; display:grid; place-items:center; padding:0; background:white; }
.map-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 8px; font-size:11px; color:var(--muted); margin-top:7px; }
.map-attribution { display:flex; flex-wrap:wrap; gap:4px 8px; }
.home-settings { padding:20px; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.home-settings h2 { font-size:19px; margin-bottom:14px; }
label { display:flex; flex-direction:column; gap:5px; font-size:13px; min-width:0; }
select,input[type=number] { width:100%; padding:9px 10px; min-width:0; }
input[type=range] { width:100%; accent-color:var(--accent); }
.home-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.ho-entry { display:flex; gap:6px; }
#ho { width:100%; min-width:0; padding:8px 12px; font-size:18px; font-variant-numeric:tabular-nums; }
#ho::placeholder { color:var(--muted); font-size:15px; }
#applyHoBtn { padding:8px 12px; }
.unit-selection { margin:12px 0; font-size:14px; font-weight:500; color:var(--muted); }
#selectionHint { margin:4px 0 12px; }
#selectionHint:empty { display:none; }
.primary-action { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; font-weight:700; background:var(--accent); color:white; border-color:var(--accent); }
.primary-action:hover:not(:disabled),#searchForm button[type=submit]:hover { background:#193d70; }
.primary-action:disabled { border-color:var(--line); }
.disclosure { border-top:1px solid var(--line); margin-top:20px; }
.disclosure>summary, .advanced-settings>summary { min-height:48px; padding:13px 0; font-size:14px; font-weight:600; cursor:pointer; }
.disclosure[open]>summary { margin-bottom:8px; }
.disclosure p,.disclosure li { max-width:72ch; }
.note { color:var(--muted); font-size:13px; line-height:1.65; }
small.note { display:block; }
.unit-catalog { margin:16px 0; padding:16px 0; border-block:1px solid var(--line); font-size:13px; }
.unit-catalog p { margin:6px 0 10px; }
.unit-catalog summary { padding:12px 0; cursor:pointer; }
.floor-roster,.unit-type-links,.unit-facing-sources { display:flex; flex-wrap:wrap; gap:8px; }
.floor-roster button { font-size:13px; padding:8px 10px; }
.floor-roster button[aria-pressed=true] { color:white; background:var(--accent); border-color:var(--accent); }
.floor-roster.documented-order { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.floor-roster.documented-order button { padding:8px 3px; }
.placement-note { font-size:12px; color:var(--muted); }
.unit-facing-evidence { margin:12px 0; }
.unit-facing-sources a,.unit-type-links a { display:inline-flex; align-items:center; min-height:44px; }
.documented-layout-button { display:block; width:100%; margin:8px 0; text-align:left; }
.layout-evidence { font-size:13px; }
.layout-evidence p { color:var(--muted); }
.layout-evidence details>summary { padding:12px 0; cursor:pointer; }
.layout-evidence ul { padding-left:18px; }
.layout-evidence li { margin-bottom:12px; }
.chk { flex-direction:row; align-items:center; gap:8px; margin:14px 0; }
.chk input { width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; }
.advanced-settings { border-top:1px solid var(--line); margin-top:12px; }
.row,.horow,.bayrow { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:12px 0; }
.row label,.horow label,.bayrow label { flex:1; min-width:90px; }
.poshead { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13px; margin-top:16px; }
.poshead small { color:var(--muted); }
.posval { color:var(--accent); }
.posbtns { display:flex; gap:6px; }
.posbtns button { flex:1; padding:8px; }
.result-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.result-heading .text-button { flex-shrink:0; }
.result-heading h2 { margin-bottom:0; font-size:25px; text-wrap:balance; }
.text-button { border:0; background:transparent; color:var(--accent); }
.result-identity { color:var(--muted); margin:5px 0 20px; overflow-wrap:anywhere; }
#resultPanel,#infoPanel,#detailPanel { max-width:680px; margin:auto; }
.detail-entry { display:flex; align-items:center; width:100%; min-height:48px; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:10px 2px; gap:10px; background:transparent; text-align:left; font-size:14px; font-weight:650; }
.detail-entry span { flex:1; color:var(--muted); font-size:12px; font-weight:400; text-align:right; }
.detail-entry svg { width:16px; height:16px; }
.structure-editor { max-width:600px; }
.structure-choice { max-width:200px; font-weight:650; }
.bay-view-label,.bay-edges { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); }
.bay-view-label { margin:20px 0 8px; }
.bay-view-label span:first-child { color:var(--fg); font-weight:600; }
.bay-preview { display:flex; border:1px solid #c4bcab; border-radius:12px; overflow:hidden; background:var(--card); }
.bay-preview button { flex:1; min-width:0; min-height:56px; padding:10px 2px; border:0; border-right:1px solid #c4bcab; border-radius:0; font-size:15px; font-weight:650; background:transparent; }
.bay-preview button:last-child { border-right:0; }
.bay-preview button:focus-visible { outline-offset:-4px; }
.bay-preview button[aria-pressed=true] { color:var(--sun-ink); background:var(--sun-wash); box-shadow:inset 0 -3px #a56e12; }
.bay-preview button[aria-pressed=true]:focus-visible { outline-color:var(--sun-ink); }
.bay-edges { margin-top:5px; }
.bay-status { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bay-selection-note { margin:0; font-size:13px; font-weight:650; }
#bayPreviewNote { margin:0; }
.posbtns button.on { border-color:var(--accent); background:var(--selected); color:var(--accent); }
.structure-editor>label:not(.chk) { margin-top:24px; }
.structure-editor #wholeHome { font-size:13px; padding:8px 10px; }
.structure-editor #wholeHome[aria-pressed=true] { font-weight:650; }
.position-setting { margin-top:24px; }
.position-setting p { margin:4px 0 8px; font-size:12px; }
.side-window-fields { padding:12px 0; border-block:1px solid var(--line); }
.side-window-fields a { display:inline-flex; align-items:center; min-height:44px; }
.side-window-fields label + label { margin-top:12px; }
.side-window-fields p { margin:6px 0 10px; }
#sideWindowNote:empty { display:none; }
.window-times { margin:10px 0 0; font-size:13px; font-variant-numeric:tabular-nums; }
.window-times > div { display:grid; grid-template-columns:minmax(90px,auto) 1fr; gap:6px 12px; padding:6px 0; }
.window-times dt { font-weight:650; }
.window-times dd { margin:0; color:var(--muted); }
.plan-source { border-top:1px solid var(--line); margin-top:12px; padding-top:10px; color:var(--muted); font-size:13px; }
.plan-source a { color:var(--fg); text-underline-offset:3px; }
.plan-source p { margin:5px 0 0; }
.estimate-note { font-size:13px; margin:14px 0 10px; }
.month-picker { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:14px; }
.month-picker label { font-weight:650; }
.month-picker select { width:auto; min-width:86px; font-size:16px; }
.month-picker span { color:var(--muted); font-size:13px; margin-inline-start:auto; }
.daylight { padding:12px 0 14px; border-bottom:1px solid var(--line); }
.daylight h3 { font-size:17px; margin:0 0 10px; }
.daylight-track { position:relative; height:14px; border-radius:4px; background:#dce1e6; overflow:hidden; }
.daylight-track span { position:absolute; top:0; bottom:0; background:#e8ad2e; border-inline:1px solid #8b5d12; }
.daylight-ticks { display:grid; grid-template-columns:1fr repeat(3, 2fr) 1fr; text-align:center; color:var(--muted); font-size:11px; margin-top:4px; }
.daylight-ticks span:first-child { text-align:start; }
.daylight-ticks span:last-child { text-align:end; }
#daylightIntervals { margin:7px 0 0; font-size:14px; font-weight:650; color:var(--fg); font-variant-numeric:tabular-nums; }
.result-summary { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; }
#resultPanel:has(#resultData:not([hidden])) .result-summary { background:var(--sun-wash); border-color:#e1c88d; color:var(--sun-ink); }
.result-summary h3 { font-size:24px; margin:0 0 8px; text-wrap:balance; font-variant-numeric:tabular-nums; }
.result-summary p { color:inherit; margin:0; }
#resultBlocked { max-width:420px; margin-top:16px; }
#resultData { margin-top:10px; }
#resultData > .detail-entry { border-bottom:0; }
#resultData > .disclosure { margin-top:0; }
#resultData > .disclosure[open] { padding-bottom:16px; }
.summary-section { margin-top:28px; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
th,td { padding:12px 7px; border-bottom:1px solid var(--line); text-align:right; }
th:first-child,td:first-child { text-align:left; }
th { font-size:12px; color:var(--muted); font-weight:500; }
tr.cur td { background:var(--selected); font-weight:650; }
#heat { height:260px; background:white; touch-action:manipulation; }
.between { justify-content:space-between; }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--muted); font-size:12px; margin:10px 0; }
.sw { display:inline-block; width:11px; height:11px; vertical-align:-1px; margin-right:4px; border-radius:2px; }
.sw.own { background:var(--own); }.sw.est { border:2px dashed var(--est); }.sw.win,.sw.sun { background:var(--sun); }.sw.unit { background:#e6ac2b; }.sw.shd,.sw.blk { background:var(--blk); }.sw.back { background:var(--back); }
.chips { display:flex; flex-wrap:wrap; gap:8px; max-height:240px; overflow:auto; margin:16px 0; }
.chips button { text-align:left; font-size:13px; }
.chips small { display:block; color:var(--muted); font-size:12px; }
.chips button.on { border-color:var(--accent); }
.editor-form { padding:16px 0; border-top:1px solid var(--line); }
.editor-form h2 { font-size:16px; }
#catalogRegions { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; }
.ok { color:#176b3a; }.bad { color:#a5261d; }
@media(max-width:800px) {
 header { padding:calc(12px + env(safe-area-inset-top)) 16px 12px; }
 main { padding:16px 16px calc(78px + env(safe-area-inset-bottom)); }
 .explorer { grid-template-columns:minmax(0,1fr); gap:14px; }
 .brand p { display:none; }
 .brand-mark { width:36px; height:36px; }
 #addressSearch { margin-top:12px; }
 .app-tabs { position:fixed; z-index:10; bottom:0; left:0; right:0; border-top:1px solid var(--line); background:var(--card); padding:5px 12px calc(5px + env(safe-area-inset-bottom)); justify-content:space-around; }
 .app-tabs button { flex:1; max-width:160px; flex-direction:column; gap:2px; padding:5px 8px; min-height:50px; font-size:12px; }
 .home-settings { padding:14px; }
 .home-settings h2 { font-size:17px; margin-bottom:9px; }
 .home-fields { gap:10px; }
 #plan { height:clamp(228px,34svh,350px); }
 .map-selection strong { font-size:16px; }
 .unit-selection { margin:8px 0 10px; font-size:13px; }
 .result-heading h2 { font-size:22px; }
 .result-summary { padding:18px; }
}
.app-panel:focus,h2:focus { outline:none; }
@media(prefers-reduced-motion:reduce) { button { transition:none; } }