:root {
  /* 2026-10-17 밝은 테마(사용자: 가시성 최우선) — 바탕은 옅은 회색, 카드는 흰색, 글자는 진하게 */
  --bg: #eef1f5; --panel: #e9edf2; --card: #ffffff; --line: #1f2d4f; --line2: #1f2d4f; --soft: #f6f8fa; --hover: #eaf2ff; --sel: #ddf4ff;
  --fg: #1f2328; --fg2: #424a53; --muted: #59636e; --accent: #0969da; --from: #1a7f37; --to: #cf222e; --warn: #bc4c00; --gold: #9a6700;
  --shadow: 0 1px 2px rgba(31,35,40,.06), 0 1px 4px rgba(31,35,40,.08);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  background: var(--bg); color: var(--fg); display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}
a { color: var(--accent); }
button, input, select {
  font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.hidden { display: none !important; }

/* top bar */
#topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; margin-right: 6px; white-space: nowrap; color: inherit; text-decoration: none; }
.field { position: relative; display: flex; align-items: center; gap: 4px; min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.field input { flex: 1; padding-left: 26px; min-width: 0; }
.field .dot { position: absolute; left: 10px; width: 10px; height: 10px; border-radius: 50%; }
.dot.from { background: var(--from); } .dot.to { background: var(--to); }
.field .pick { padding: 6px 8px; }
.field .pick.on { background: #fff8c5; border-color: #d4a72c; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 0; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 8px; z-index: 50; max-height: 320px; overflow: auto; box-shadow: 0 8px 24px rgba(31,35,40,.18); }
.suggest:empty { display: none; }
.suggest li { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.suggest li:last-child { border-bottom: 0; }
.suggest li:hover, .suggest li.active { background: var(--hover); }
.suggest .nm { font-weight: 600; } .suggest .ad { color: var(--muted); font-size: 12px; }
.suggest .cat { float: right; color: var(--muted); font-size: 11px; }
.spacer { flex: 1; }
.seg { display: flex; } .seg button { border-radius: 0; } .seg button:first-child { border-radius: 8px 0 0 8px; } .seg button:last-child { border-radius: 0 8px 8px 0; }

/* main */
main { flex: 1; display: flex; min-height: 0; }
#left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#map { flex: 1; min-width: 0; min-height: 0; position: relative; }
/* B안(2026-10-14): 지도 아래 가로 띠에 경사 프로파일 카드를 넣는다 */
#bottom-dock { flex: 0 0 auto; height: var(--dock-h, auto); max-height: 80%; overflow-y: auto; border-top: 1px solid var(--line); background: var(--panel); padding: 0 10px 8px; position: relative; }
#dock-handle { height: 8px; margin: 0 -10px 4px; cursor: row-resize; background: var(--line); position: sticky; top: 0; z-index: 5; }
#dock-handle:hover, #dock-handle.on { background: var(--accent); }
body.resizing-v { cursor: row-resize; user-select: none; }
body.resizing-v #map { pointer-events: none; }   /* 띠 자체는 막지 않는다 — 손잡이가 포인터 캡처로 이벤트를 받아야 함 */
.fav-group { font-size: 12px; color: var(--muted); margin-top: 8px; }
/* ⭐ 매물 비교표 행(2026-10-14): 이름 줄 + 통계 줄 */
.fav-item { padding: 6px 6px; border-radius: 6px; margin-top: 4px; border: 1px solid transparent; }
.fav-item:hover { background: var(--soft); border-color: var(--line); }
.fav-top { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.fav-top .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; cursor: pointer; }
.fav-top .nm:hover { color: var(--accent); }
.fav-top .rm { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.fav-stats { font-size: 12px; margin: 4px 0 0 22px; line-height: 1.6; }
.fav-stats .lk { cursor: pointer; } .fav-stats .lk:hover { color: var(--accent); }
.fav-stats .grade { font-weight: 700; padding: 0 5px; border-radius: 4px; color: #fff; font-size: 11px; }
.fav-stats .sep { color: var(--muted); }
/* 🕘 최근 본 경로 */
#recent-card { --c: #1b7c83; }
.recent-row { padding: 6px; border-radius: 6px; margin-top: 4px; cursor: pointer; border: 1px solid transparent; }
.recent-row:hover { background: var(--soft); border-color: var(--line); }
.recent-row .top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.recent-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.recent-row .st { color: var(--muted); white-space: nowrap; }
.recent-row .grade { font-weight: 700; padding: 0 5px; border-radius: 4px; color: #fff; font-size: 11px; }
.recent-row .minip { display: block; width: 100%; height: 30px; margin-top: 4px; background: var(--soft); border-radius: 4px; }
#bottom-dock:has(#profile-card.hidden) { display: none; }   /* 경로가 없으면 띠도 없음 */
#profile-card.docked { margin: 0; }
#splitter { width: 6px; flex: 0 0 6px; cursor: col-resize; background: var(--line); transition: background .15s; }
#splitter:hover, #splitter.on { background: var(--accent); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing #map { pointer-events: none; }
#side { width: var(--side-w, 440px); flex: 0 0 auto; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line)); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 10px; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--line2); }
/* 박스 구분(2026-10-14): 카드 종류별 왼쪽 색띠 — 경로 파랑 · 프로파일 초록 · 장소 주황 · 즐겨찾기 노랑 · 비교 보라 · 상세 회색 */
#routes { --c: #0969da; } #profile-card { --c: #1a7f37; } #stats-card { --c: #6e7781; }
#fav-card { --c: #d4a72c; } #cmp-head, #cmp-overlay { --c: #8250df; }
#cmp-overlay h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#side { gap: 12px; }
.card h3 small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 8px 4px; }

/* route list */
.route-item { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.route-item:hover { border-color: var(--accent); }
.route-item.on { border-color: var(--accent); background: var(--sel); }
.route-item .no { font-weight: 700; width: 22px; text-align: center; }
.route-item .m { flex: 1; font-size: 13px; line-height: 1.4; }
.route-item .m b { font-size: 14px; }
.route-item .minip { display: block; width: 100%; height: 40px; margin-top: 5px; background: var(--soft); border-radius: 4px; }
.route-item .no { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 26px; }
.route-item .no .grade { font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 4px; color: #fff; }
/* A안(2026-10-14): 선택 경로 한 줄 요약 + 요약·길안내는 접힘 */
.brief { font-size: 13px; line-height: 1.5; margin: -2px 0 6px; }
.brief .sep { color: var(--muted); margin: 0 2px; }
details.fold > summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--muted); }
details.fold[open] > summary { margin-bottom: 8px; }
details.fold[open] > summary::before { content: "▾"; }
details.fold > summary small { color: var(--muted); font-weight: 400; margin-left: 6px; }

/* profile */
#profile-wrap { position: relative; }
#profile { width: 100%; height: 260px; display: block; transition: height .25s ease; background: var(--soft); border-radius: 8px; }
.tip { position: absolute; pointer-events: none; background: #000c; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; transform: translate(-50%, -110%); }
.controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.controls button { white-space: nowrap; flex: 0 0 auto; }   /* 👁 1인칭이 세로로 찌그러지지 않게 */
.controls input[type=range] { min-width: 90px; }
.controls input[type=range] { flex: 1; padding: 0; }
.controls label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.walk-status { margin-top: 8px; font-size: 13px; color: var(--muted); min-height: 18px; }
.walk-status b { color: var(--fg); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--soft); border-radius: 8px; padding: 8px; }
.stat .k { color: var(--muted); font-size: 11px; } .stat .v { font-size: 18px; font-weight: 700; margin-top: 2px; } .stat .v small { font-size: 12px; font-weight: 400; color: var(--muted); }
.dist-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 10px; }
.dist-bar div { min-width: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* steps */
#steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--fg2); }
#steps li small { color: var(--muted); }

.credits { color: var(--muted); font-size: 11px; line-height: 1.5; padding: 4px; margin-top: auto; }
.credits details { border-top: 1px solid rgba(139, 148, 158, .25); padding-top: 6px; }
.credits summary { cursor: pointer; font-weight: 600; color: var(--fg); font-size: 11.5px; list-style: none; user-select: none; }
.credits summary::-webkit-details-marker { display: none; }
.credits summary::before { content: '▸ '; display: inline-block; width: 1em; transition: transform .15s; }
.credits details[open] summary::before { transform: rotate(90deg); }
.credits .src { display: grid; grid-template-columns: 6.6em 1fr; gap: 3px 10px; margin: 6px 0 4px; }
.credits .src dt { color: var(--fg); font-weight: 600; white-space: nowrap; }
.credits .src dd { margin: 0; }
.credits .src a { color: inherit; text-decoration: underline; text-decoration-color: rgba(139, 148, 158, .5); text-underline-offset: 2px; }
.credits .src a:hover { color: var(--fg); }
.credits .lic { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: rgba(139, 148, 158, .14); font-size: 10.5px; white-space: nowrap; }
.credits .src small { display: block; font-size: 10.5px; opacity: .85; }
.credits .caveat { margin: 4px 0 0; font-size: 10.5px; opacity: .85; }

/* map markers */
.hover-marker { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 0 0 2px #0008; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #b62324; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; max-width: 80vw; font-size: 13px; box-shadow: 0 6px 20px #0008; }
.toast.info { background: #1f6feb; }
#map.picking { cursor: crosshair; }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-group { background: #ffffffee !important; border: 1px solid var(--line); border-radius: 8px !important; box-shadow: none !important; }
.maplibregl-ctrl-group button { width: 30px !important; height: 30px !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: none; }

@media (max-width: 900px) {
  body { overflow: auto; height: auto; }
  main { flex-direction: column; }
  #left { flex: 0 0 auto; }
  #map { flex: 0 0 auto; height: 60vh; min-height: 320px; }   /* 세로 배치에선 flex:1 이 높이를 0 으로 만든다(휴대폰에서 지도 안 보임 — 2026-10-21) */
  #splitter { display: none; }
  #side { width: auto !important; border-left: 0; border-top: 1px solid var(--line); }
}

/* 스케치 3D */
/* 지도 위 도구 막대(2026-10-14 정리): 모든 단추·선택·입력이 같은 높이 30px·글자 12px·모서리 6px, 하나의 어두운 띠 안에 */
.maptools { position: absolute; right: 10px; top: 10px; z-index: 7; display: flex; gap: 4px; align-items: center; background: #ffffffee; border: 1px solid var(--line); padding: 4px; border-radius: 10px; font-size: 12px; box-shadow: var(--shadow); }
.maptools > button, .maptools > label, .maptools > input { height: 30px; font-size: 12px; border-radius: 6px; padding: 0 10px; display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); color: var(--fg); white-space: nowrap; }
.maptools > label { cursor: default; }
.maptools label select, .maptools label input { height: 22px; font-size: 12px; padding: 0 4px; border-radius: 4px; background: #fff; border: 1px solid var(--line); color: var(--fg); }
.maptools label input[type=number] { width: 64px; }
.maptools > input[type=datetime-local] { width: 170px; padding: 0 6px; }
.maptools > button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sketch canvas.pinning { cursor: crosshair; }
.sk-feat { font: 600 11px/1.2 sans-serif; color: #fff; background: #b62324; border-radius: 10px; padding: 2px 7px; white-space: nowrap; box-shadow: 0 1px 3px #0008; }
.sk-feat.bridge { background: #1f6feb; } .sk-feat.tunnel { background: #6e40c9; } .sk-feat.cross { background: #6e7681; }
.sk-pin { font: 600 12px/1.3 sans-serif; color: #1f2328; background: #fff3b0; border: 1.5px solid #9a6700; border-radius: 4px; padding: 3px 6px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; box-shadow: 1px 1px 0 #9a6700; }
.sk-mark { z-index: 100000 !important; font: 700 12.5px/1.3 sans-serif; color: #1f2328; background: #fff; border: 2px solid #2da44e; border-radius: 12px; padding: 2px 8px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.35); pointer-events: none; }
.sk-mark b { margin-right: 2px; }
.sk-mark-from { border-color: #2da44e; } .sk-mark-from b { color: #1a7f37; }
.sk-mark-to { border-color: #e5534b; } .sk-mark-to b { color: #cf222e; }
.sk-mark-via { border-color: #f0883e; } .sk-mark-via b { color: #bc4c00; }
.sk-pin button { border: 0; background: none; color: #9a6700; padding: 0 0 0 6px; font-size: 12px; cursor: pointer; }
/* 일괄 비교 */
#bulk-in { width: 100%; resize: vertical; font-size: 13px; }
.bulk-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.bulk-table th, .bulk-table td { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.bulk-table th:first-child, .bulk-table td:first-child { text-align: left; white-space: normal; }
.bulk-table .grade { font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #000; }
.bulk-table tr.fail td { color: var(--muted); }
.bulk-table button { padding: 2px 7px; font-size: 11px; }
/* 프로파일 구간 표시 */
.feat-badge { font-size: 11px; margin-left: 4px; }
.sketch { position: absolute; inset: 0; z-index: 4; background: #dbeafb; transition: opacity .32s ease; }
.sketch.fadein { animation: skfade .38s ease; }
.sketch.fadeout { opacity: 0; }
@keyframes skfade { from { opacity: 0; } to { opacity: 1; } }
#snapmap { position: absolute; left: -3000px; top: 0; width: 1024px; height: 1024px; pointer-events: none; }
.sketch canvas { display: block; width: 100%; height: 100%; }
.sk-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }   /* 쌓임 맥락 — CSS2D 가 이름표마다 큰 z-index 를 줘서 도구 막대·배지(30) 위로 올라왔다 */
.sk-label { font: 600 12px/1.2 "Pretendard", "Malgun Gothic", sans-serif; color: #1f2328; background: rgba(255,255,255,.88); border: 1.5px solid #2b2b2b; border-radius: 3px; padding: 2px 6px; white-space: nowrap; box-shadow: 1px 1px 0 #2b2b2b; }

/* 1인칭 */
.sk-fps { position: absolute; left: 10px; top: 10px; z-index: 7; height: 32px; display: inline-flex; align-items: center; background: #ffffffee; box-shadow: var(--shadow); border: 1px solid var(--line); color: var(--muted); font-size: 11px; padding: 0 10px; border-radius: 8px; white-space: nowrap; }
#sk-minimap { position: absolute; left: 12px; bottom: 44px; width: 240px; height: 240px; z-index: 6; border-radius: 50%; box-shadow: 0 4px 14px #0009; pointer-events: none; }
@media (max-width: 900px) { #sk-minimap { width: 150px; height: 150px; } }
#fpvbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
#fpvbtn:disabled { opacity: .45; cursor: not-allowed; }
.sketch canvas.fpv { cursor: grab; }
.fpv-help { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 5; background: #000a; color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.fpv-help b { color: #ffd166; }
.orbit-help { opacity: .75; z-index: 6; }
button.mini { font-size: 11px; padding: 2px 8px; border-radius: 6px; }


/* 경유지 */
.pick.via { white-space: nowrap; }
.via-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff8e6; border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.via-bar .lbl { color: var(--muted); }
.via-bar .chip { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid #d29922; border-radius: 14px; padding: 2px 8px; }
.via-bar .chip b { color: var(--gold); }
.via-bar .chip button { padding: 0 4px; border: 0; background: none; color: var(--muted); }
.via-bar #via-clear { padding: 2px 8px; font-size: 12px; }
#engine { max-width: 230px; }
.route-item .eng { color: var(--muted); font-size: 11px; margin-left: 4px; }

/* 🧭 나침반 · HUD (2026-10-14) */
#sk-compass { position: absolute; left: 10px; top: 48px; width: 46px; height: 46px; z-index: 7; cursor: pointer; }
#sk-compass svg { width: 100%; height: 100%; }
#sk-compass:hover circle { stroke: #ffd166; }
#sk-hud { position: absolute; left: 62px; top: 54px; z-index: 7; background: #000a; color: #ffd166; font: 600 12px/1 ui-sans-serif, sans-serif; padding: 6px 9px; border-radius: 6px; pointer-events: none; white-space: nowrap; }

/* 🗂 경로 비교 페이지 (2026-10-14) — 오른쪽 패널을 통째로 바꾼다 */
#cmp-btn .n { background: #fff; color: var(--accent); border-radius: 9px; font-size: 10px; font-weight: 700; padding: 0 5px; margin-left: 5px; }
#cmp-btn:not(.on) .n { background: var(--accent); color: #fff; }
#routes h3, #cmp-head h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#routes h3 > span, #cmp-head .cmp-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 400; }
#course-chart { width: 100%; height: 300px; display: block; background: var(--soft); border-radius: 8px; }
.course-row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; column-gap: 8px; row-gap: 2px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 4px; }
.course-row .st { grid-column: 1 / -1; padding-left: 30px; }   /* 이름이 잘리지 않게 숫자는 둘째 줄 */
.course-row:hover { background: var(--soft); }
.course-row.on { background: var(--sel); outline: 1px solid var(--accent); }
.course-row .sw, .course-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-row .st { color: var(--muted); white-space: nowrap; }
.course-row .grade, .course-row .rm { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 4px; }
#profile-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#profile-card h3 > span { margin-left: auto; float: none !important; position: relative; z-index: 3; }

/* 🏠 매물·장소(진단+동네 경사 통합) · ⭐ 즐겨찾기 (2026-10-14) */
.band-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.band-legend span { display: inline-flex; align-items: center; gap: 4px; }
.band-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.band-legend i.dash { width: 14px; height: 0; border-top: 2px dashed #1f2d4f; border-radius: 0; }
.fav-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 12px; margin-top: 4px; }
.fav-row:hover { background: var(--soft); }
.fav-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-row .st { color: var(--muted); white-space: nowrap; }
.fav-row .grade { font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fff; }
.fav-row .rm { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 4px; }
/* 🏘 생활권 */
.lf-cat { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.lf-cat:first-child { border-top: none; margin-top: 2px; }
.lf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.lf-cnt { color: var(--muted); font-size: 12px; } .lf-cnt b { color: var(--fg); }
.lf-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; cursor: pointer; border: 1px solid transparent; }
.lf-row:hover { background: var(--card); border-color: var(--line); }
.lf-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-nm small { color: var(--muted); margin-left: 4px; }
.lf-t { font-weight: 600; min-width: 34px; text-align: right; } .lf-d { color: var(--muted); min-width: 44px; text-align: right; }
.lf-climb { color: var(--muted); font-size: 11.5px; min-width: 96px; text-align: right; } .lf-climb.hard { color: var(--warn); }
.lf-sub { font-size: 11.5px; color: var(--muted); margin: 6px 0 2px 6px; }
.lf-g { display: grid; grid-template-columns: 78px 1fr; align-items: baseline; }
.lf-gl { font-size: 11.5px; color: var(--muted); padding-left: 6px; }
.life-src { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.life-mark { font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 2px #000a); cursor: default; }
.life-mark span { display: inline-block; transition: transform .1s; }
.life-mark.home { font-size: 22px; } .life-mark.on span { transform: scale(1.7); }
@media (max-width: 520px) { .lf-row { grid-template-columns: 1fr auto auto; } .lf-climb { grid-column: 1 / -1; text-align: left; } }
/* 🏢 단지 카드 */
.cx-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: -2px 0 8px; }
.mini-link { font-size: 12px; margin-left: 4px; }
.cx-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.cx-tabs button { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 10px; color: var(--muted); }
.cx-tabs button.on { color: var(--fg); border-bottom-color: var(--accent); }
.cx-tabs button:disabled { opacity: .45; cursor: default; }
.cx-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; }
.cx-big .cx-v b { font-size: 16px; }
.cx-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 12px; }
.cx-tile { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px; cursor: pointer; }
.cx-tile:hover { border-color: var(--accent); }
.cx-ti { font-size: 12.5px; } .cx-tn { font-size: 13px; margin-top: 4px; } .cx-tn b { font-size: 16px; } .cx-tx { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lf-note { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
/* 💰 실거래 */
.dl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 14px; } .dl-head small { color: var(--muted); } .dl-head select { margin-left: auto; }
.dl-warn { color: var(--warn); font-size: 12px; margin-top: 6px; }
.dl-cand { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; } .dl-cand select { max-width: 100%; }
.dc-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--muted); margin: 10px 0 2px; }
.dc-legend .dl i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.dc-wrap { position: relative; } #dc-svg { width: 100%; height: auto; display: block; } #dc-svg .ax { fill: var(--muted); font-size: 10px; }
#dc-svg circle { cursor: default; transition: r .08s; }
.dl-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.dl-table th { text-align: left; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); padding: 4px; }
.dl-table td { padding: 4px; border-bottom: 1px solid var(--line2); } .dl-table small { color: var(--muted); }
.dl-recent summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 10px; }
.cx-deal1 { font-size: 13px; color: var(--fg); margin-top: 8px; } .cx-deal1 small { color: var(--muted); }
/* 🏫 학교 */
.sc-route { font-size: 11.5px; color: var(--muted); margin: -2px 0 4px 12px; }
/* 🏢 단지 단추 — 크게, 누르는 맛 */
.pick.card-btn { font-size: 15px; font-weight: 700; padding: 7px 16px; border: 1.5px solid var(--accent); color: var(--accent); background: linear-gradient(#ffffff, #eaf2ff);
  border-radius: 10px; box-shadow: 0 3px 0 #9ec5fe, 0 0 0 0 rgba(9,105,218,.0); transition: transform .08s, box-shadow .08s, background .15s; white-space: nowrap; }
.pick.card-btn:hover { background: linear-gradient(#f3f8ff, #dbeafe); }
.pick.card-btn:active { transform: translateY(3px) scale(.97); box-shadow: 0 0 0 #9ec5fe; }
.pick.card-btn.on { background: var(--accent); color: #fff; animation: cardPulse 1.2s ease-out infinite; }
@keyframes cardPulse { 0% { box-shadow: 0 3px 0 #0550ae, 0 0 0 0 rgba(9,105,218,.5); } 100% { box-shadow: 0 3px 0 #0550ae, 0 0 0 12px rgba(9,105,218,0); } }
body.picking-card #map canvas, body.picking-card #sketch canvas { cursor: crosshair !important; }
/* 누른 자리 물결 */
.tap-ripple { position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 3px solid var(--accent); pointer-events: none; z-index: 9999; animation: tapRipple .65s ease-out forwards; }
.tap-ripple.big { border-color: #ffd34d; }
@keyframes tapRipple { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
/* 선택한 단지 핀 — 떨어지며 튕긴다 */
.cx-pin { display: flex; flex-direction: column; align-items: center; cursor: pointer; animation: pinDrop .55s cubic-bezier(.3,1.6,.5,1) both; }
.cx-pin-b { display: flex; align-items: center; gap: 6px; background: #ffd34d; color: #1b1300; border: 2px solid #fff; border-radius: 22px; padding: 5px 12px 5px 7px;
  box-shadow: 0 4px 12px #000a; font-weight: 800; font-size: 14px; white-space: nowrap; transition: transform .12s; }
.cx-pin-i { font-size: 22px; line-height: 1; } .cx-pin-t { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cx-pin-tail { width: 0; height: 0; border: 9px solid transparent; border-top: 12px solid #fff; margin-top: -1px; }
.cx-pin-shadow { width: 18px; height: 6px; border-radius: 50%; background: #0008; margin-top: 1px; }
.cx-pin:hover .cx-pin-b { transform: translateY(-3px) scale(1.06); }
.cx-pin:active .cx-pin-b { transform: translateY(1px) scale(.96); }
@keyframes pinDrop { 0% { transform: translateY(-60px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); } }
.life-mark { font-size: 20px; } .life-mark span { filter: drop-shadow(0 1px 1px #000); } .life-mark:hover span { transform: scale(1.5); }
/* 통학구역 이름표(학교 탭) */
.zone-label { background: #eaf2ffe6; color: #0550ae; border: 1px dashed #3987e5; border-radius: 6px; padding: 2px 7px; font-size: 12px; font-weight: 600; pointer-events: none; white-space: nowrap; }
/* 🚇 출퇴근 */
.cm-sum { font-size: 13px; line-height: 1.5; } .cm-sum b { font-size: 14px; }
.cm-bar { display: grid; grid-template-columns: 70px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; margin: 3px 0; }
.cm-bt { background: #eaeef2; border-radius: 4px; height: 10px; overflow: hidden; } .cm-bt i { display: block; height: 100%; background: #d95926; border-radius: 4px; }
.cm-bv { text-align: right; color: var(--muted); }
.cm-dests { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; } @media (max-width: 520px) { .cm-dests { grid-template-columns: 1fr; } }
.cm-d { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; padding: 2px 0; border-bottom: 1px solid var(--line2); } .cm-d small { color: var(--muted); }
.cm-wq { position: relative; display: flex; gap: 6px; } .cm-wq input { flex: 1; } .cm-wq .suggest { top: 100%; }
.cm-flow1 { font-size: 12.5px; margin: 8px 0 2px; }
.flow-label { color: #a33c00; border-color: #d95926; background: #fff1e8e6; }

/* ===== 2026-10-16 가시성 개편: 단지 표시 · 단지 카드 ===== */
/* 지도 단지 이름표 — 누를 수 있다는 걸 손가락·떠오름으로 */
.apt-mark { cursor: pointer; }
.apt-pill { display: inline-flex; align-items: center; gap: 3px; background: #fffaf0; color: #3a2a00; border: 1.5px solid #e0a800; border-radius: 12px;
  padding: 1px 7px 1px 4px; font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 5px #0006; transition: transform .1s, box-shadow .1s, background .1s; }
.apt-pill i { font-style: normal; font-size: 12px; }
.apt-mark:hover .apt-pill { transform: translateY(-2px) scale(1.12); background: #ffd34d; box-shadow: 0 5px 12px #0008; z-index: 5; }
.apt-mark:active .apt-pill { transform: translateY(1px) scale(.95); }
body:not(.apt-z15) .apt-pill { font-size: 10.5px; padding: 0 6px 0 3px; }
body.picking-card .apt-mark { pointer-events: none; }   /* 찍기 중엔 지도 클릭이 먼저 */

/* 단지 카드 열면 패널을 넓게 */
body.card-open #side { width: max(var(--side-w, 440px), 540px); }
@media (max-width: 1100px) { body.card-open #side { width: var(--side-w, 440px); } }
#page-card .card { background: var(--card); border-color: var(--line); }
.cx-title { display: flex; align-items: flex-start; gap: 10px; border-bottom: 0 !important; }
.cx-tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-tt b { font-size: 19px; letter-spacing: -.3px; }
.cx-tt small { font-size: 12px; color: var(--muted); margin: 0 !important; }
.cx-meta { font-size: 12.5px; color: var(--gold); font-weight: 600; }
.cx-tabs { position: sticky; top: -12px; z-index: 3; background: var(--card); margin: 0 -12px 12px; padding: 0 12px; }
.cx-tabs button { font-size: 14px; padding: 9px 12px; }
.cx-tabs button.on { font-weight: 700; color: var(--accent); border-bottom-width: 3px; }

/* 요약: 큰 숫자 카드 */
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mc { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 92px; }
.mc[data-tab-go] { cursor: pointer; transition: border-color .12s, transform .08s, background .12s; }
.mc[data-tab-go]:hover { border-color: var(--accent); background: var(--hover); }
.mc[data-tab-go]:active { transform: scale(.98); }
#mc-station { grid-column: 1 / -1; }
.mc-k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.mc-k small { color: var(--gold); font-weight: 600; }
.mc-v { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 3px 0 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.15; }
.mc-v small { font-size: 13px; font-weight: 600; color: var(--muted); }
.mc-s { font-size: 12.5px; color: var(--fg2); line-height: 1.45; }
.mc-s .mini { margin-left: 4px; }
.mc-grade { font-size: 13px; font-weight: 800; color: #0d1117; padding: 2px 9px; border-radius: 6px; letter-spacing: 0; }
.mc-grade.wait { background: #eaeef2; color: var(--muted); }
.mc-tag { font-size: 14px; font-weight: 700; }
.mc-wait { color: #8c959f; }
.ft-head { font-size: 13px; font-weight: 700; margin: 14px 0 6px; } .ft-head small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ft { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; cursor: pointer; transition: border-color .12s, background .12s; }
.ft:hover { border-color: var(--accent); background: var(--hover); }
.ft-k { font-size: 12px; color: var(--muted); font-weight: 600; } .ft-v { font-size: 19px; font-weight: 800; } .ft-v small { font-size: 12px; font-weight: 600; margin-left: 1px; } .ft-s { font-size: 11.5px; color: var(--fg2); }
@media (max-width: 520px) { .mc-grid { grid-template-columns: 1fr; } .ft-grid { grid-template-columns: 1fr 1fr; } }

/* 목록 행: 이름 한 줄 + 숫자 한 줄(잘리지 않게) */
#page-card .lf-row { grid-template-columns: 1fr auto auto; grid-template-areas: "nm t d" "climb climb climb"; row-gap: 1px; padding: 6px 8px; font-size: 13px; border-radius: 8px; }
#page-card .lf-row:hover { background: var(--hover); border-color: #b6d4fe; cursor: pointer; }
#page-card .lf-nm { grid-area: nm; white-space: normal; overflow: visible; font-weight: 600; }
#page-card .lf-t { grid-area: t; font-size: 14px; color: var(--fg); } #page-card .lf-d { grid-area: d; color: var(--fg2); }
#page-card .lf-climb { grid-area: climb; text-align: left; min-width: 0; font-size: 12px; color: var(--muted); }
#page-card .lf-climb.hard { color: var(--warn); }
#page-card .lf-head { font-size: 14px; } #page-card .lf-head b { font-size: 15px; }
#page-card .lf-cat { border-top-color: var(--line2); }
#page-card .lf-sub { color: var(--muted); font-size: 12px; }
#page-card .lf-g { grid-template-columns: 92px 1fr; }
#page-card .life-src { color: var(--muted); }
.cm-hub { border: 1px solid var(--line); border-left: 4px solid #1f2d4f; border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; background: var(--soft); }
.cm-hub.work { border-left-color: #d95926; } .cm-hub.jobs { border-left-color: #e3a33b; } .cm-hub.mixed { border-left-color: #1f2d4f; } .cm-hub.home { border-left-color: #2da44e; }
.cm-hub-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; } .cm-hub-h b { font-size: 16px; }
.cm-hub-r { margin-left: auto; font-size: 18px; font-weight: 700; } .cm-hub-r small { font-size: 11px; font-weight: 400; color: var(--muted); }
.cm-hub-t { font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 4px; } .cm-hub-t b { color: var(--fg); }
.cs-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 8px; }
.cs-big > div { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; text-align: center; }
.cs-big b { display: block; font-size: 20px; } .cs-big small { color: var(--muted); font-size: 11px; }
.cs-big > div.me { border-color: #2da44e; } .cs-big > div.me b { color: var(--from); }
.cs-row { display: grid; grid-template-columns: 62px 1fr 44px 58px; gap: 8px; align-items: center; font-size: 12px; margin: 3px 0; }
.cs-row .cm-bt i { background: #0969da; } .cs-row.walk .cm-bt i, .cs-row.bike .cm-bt i { background: #2da44e; } .cs-row.car .cm-bt i { background: #8b949e; }
.cs-sv { color: var(--muted); font-size: 11px; text-align: right; }
.cs-note { font-size: 12px; margin: 8px 0 2px; line-height: 1.5; }
.bd-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.bd-t { width: 100%; border-collapse: collapse; font-size: 12px; } .bd-t th { position: sticky; top: 0; background: var(--soft); color: var(--muted); font-weight: 600; text-align: right; padding: 4px 6px; }
.bd-t td { text-align: right; padding: 3px 6px; border-top: 1px solid var(--line2); } .bd-t th:first-child, .bd-t td:first-child { text-align: left; } .bd-t small { color: var(--muted); }
.bd-t .bd-st { color: var(--muted); font-size: 11px; text-align: left; } .bd-t tbody tr:hover { background: var(--sel); }

/* ===== 2026-10-17 밝은 테마 · 크기 체계 (사용자: 가시성·박스 구분·버튼 크기·배열의 일관성) =====
   크기 3단계 — 기본 34px(상단·카드 주요 단추·입력) · 작게 28px(카드 안 보조 단추 .mini) · 지도 위 도구 32px(.maptools)
   모서리 — 단추·입력 8px · 카드 12px · 칩/배지 6px. 글자 — 단추 13px · 작은 단추 12px · 카드 제목 15px */
:root { --h: 34px; --h-sm: 28px; --h-tool: 32px; --r: 8px; }
body { background: var(--bg); }
button, select, input:not([type=range]):not([type=checkbox]):not([type=radio]) { min-height: var(--h); font-size: 13px; border-radius: var(--r); }
button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; line-height: 1.2; background: var(--card); color: var(--fg); border: 1px solid var(--line); transition: background .12s, border-color .12s, box-shadow .12s; }
button:hover:not(:disabled) { border-color: var(--accent); background: var(--hover); }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary, button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover:not(:disabled), button.on:hover:not(:disabled) { background: #0860ca; border-color: #0860ca; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.mini, select.mini { min-height: var(--h-sm); font-size: 12px; padding: 0 10px; border-radius: 6px; }
input::placeholder { color: #8c959f; }
input:focus, select:focus, button:focus-visible { outline: 2px solid #54aeff; outline-offset: 1px; }

/* 상단 막대: 세 묶음(경로 찾기 · 단지·비교 · 보기) — 묶음 사이 세로 구분선, 같은 높이 */
#topbar { background: #ffffff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(31,35,40,.06); padding: 8px 14px; gap: 10px; row-gap: 8px; }
.tb-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-group + .tb-group { padding-left: 10px; border-left: 1px solid var(--line); }
.tb-group.view { margin-left: auto; }
.field { min-width: 220px; flex: 1 1 220px; max-width: 320px; }
.field .pick { min-width: var(--h); padding: 0 8px; }
#swap { min-width: var(--h); padding: 0; }
.pick.card-btn { min-height: var(--h); padding: 0 16px; font-size: 14px; }
.seg button { min-width: 64px; }

/* 오른쪽 패널: 옅은 회색 바탕 위 흰 카드 — 카드 간격 12px */
#side { background: var(--panel); padding: 12px; gap: 12px; }
.card h3 small { color: var(--muted); }
.hint { color: var(--muted); }
.route-item { background: var(--card); border-color: var(--line); border-radius: 10px; padding: 10px; }
.route-item.on { border-color: var(--accent); background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.stat { background: var(--soft); border: 1px solid var(--line2); }
#profile, #course-chart { background: #ffffff; border: 1px solid var(--line2); }
.route-item .minip, .recent-row .minip { background: var(--soft); border: 1px solid var(--line2); }
.cx-tabs { border-bottom: 1px solid var(--line); }
.cx-tabs button { min-height: 38px; background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; color: var(--muted); }
.cx-tabs button:hover:not(:disabled) { background: var(--soft); color: var(--fg); border-color: transparent; border-bottom-color: var(--line); }
.cx-tabs button.on, .cx-tabs button.on:hover { background: none; color: var(--accent); border-bottom-color: var(--accent); }
.fav-top .rm, .fav-row .rm, .course-row .rm, .course-row .grade, .via-bar .chip button { min-height: 0; border: none; background: none; padding: 2px 4px; }
.suggest li:hover, .suggest li.active { background: var(--hover); }

/* 지도 위 도구 막대 32px */
.maptools > button, .maptools > label, .maptools > input { height: var(--h-tool); min-height: var(--h-tool); background: #fff; }
.maptools > button.on { background: var(--accent); color: #fff; }
#dock-handle, #splitter { background: var(--line); }
.credits { color: var(--muted); }
.toast.info { background: #0969da; }
.lf-row:hover { background: var(--hover); border-color: #b6d4fe; }
.cx-tile { background: var(--soft); }
.cx-tile:hover { background: var(--hover); }
.fav-item:hover, .recent-row:hover, .fav-row:hover, .course-row:hover { background: var(--hover); border-color: #b6d4fe; }
/* 상단 배열 고정: 경로 찾기 묶음이 첫 줄을 채운다 → 「단지·비교」「보기」는 화면 폭이 모자라면 늘 둘째 줄(초기화 단추가 보였다 숨었다 해도 자리가 안 바뀐다) */
.tb-group.route { flex: 1 1 auto; }
.tb-group.route .field { max-width: 360px; }
/* 지도 위 도구·옵션 판·배지는 3D 건물 이름표(CSS2D)보다 위 */
.maptools, .sk-fps, #sk-compass, #sk-hud { z-index: 30; }
/* 🏢 3D 단지 이름표 — 2D .apt-pill 과 같은 모양 */
.sk-apt { font: 700 12.5px/1.3 "Pretendard", "Malgun Gothic", sans-serif; color: #3a2a00; background: #fffaf0; border: 1.5px solid #e0a800; border-radius: 12px; padding: 2px 9px 2px 6px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: auto; cursor: pointer; transition: transform .12s; }
.sk-apt i { font-style: normal; margin-right: 3px; }
/* 3D 지하철역: 노선 공식 색 배지 + 역 이름 (단지 이름표보다 위·더 진하게) */
.sk-stn { display: flex; align-items: center; gap: 3px; font: 800 13.5px/1.2 "Pretendard", "Malgun Gothic", sans-serif; color: #fff; background: #1f2d4f; border: 2px solid #fff; border-radius: 14px; padding: 3px 10px 3px 4px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.45); pointer-events: auto; z-index: 3; }
.sk-stn .b { display: inline-block; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 12px; line-height: 20px; text-align: center; color: #fff; font-weight: 800; }
.sk-stn b { margin-left: 3px; }
#wm { position: fixed; inset: 0; pointer-events: none; z-index: 9000; background-repeat: repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sk-credit { position: absolute; right: 8px; top: 56px; z-index: 5; font-size: 11px; color: #1f2d4f; background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 4px; } .sk-credit a { color: #0969da; }
.sk-apt:hover { transform: translateY(-2px) scale(1.12); background: #ffd34d; box-shadow: 0 5px 12px #0008; }
.sk-apt:active { transform: translateY(1px); }

/* 🏔 동별 땅높이 · 🧱 축대 이름표 */
.dg-list { display: grid; gap: 4px; margin: 4px 0 6px; }
.dg-row { display: grid; grid-template-columns: 64px 1fr 92px 96px; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; }
.dg-row:hover { background: var(--hover, #eaf2ff); }
.dg-bar { height: 10px; background: #eef1f5; border: 1px solid var(--line, #1f2d4f); border-radius: 5px; overflow: hidden; }
.dg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fd19e, #d29922 70%, #cf222e); }
.dg-v { font-variant-numeric: tabular-nums; text-align: right; } .dg-v small, .dg-s { color: var(--muted, #59636e); font-size: 11.5px; }
.sk-wall { font: 700 11.5px/1.2 "Pretendard", "Malgun Gothic", sans-serif; color: #fff; background: #8b4a1c; border: 1.5px solid #fff; border-radius: 4px; padding: 1px 6px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; }
.sk-dong { font: 800 12px/1.1 "Pretendard", "Malgun Gothic", sans-serif; color: #1f2328; background: rgba(255,255,255,.92); border: 1.5px solid #3a2a00; border-radius: 4px; padding: 1px 5px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none; }

/* 2026-10-21 단지 카드 → 글 페이지(/apt/{id}) 링크 */
.cx-page-link { display: block; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-weight: 700; text-decoration: none; }
.cx-page-link:hover { border-color: var(--accent); background: var(--hover); }

/* 카드 안 상세 숫자: 실거래 월별 추이 · 학교알리미 */
#dl-trend .chart{width:100%;height:auto;font-size:12px;fill:#424a53;margin:4px 0}#dl-trend .chart .lb{font-weight:700;fill:#1f2328}
.dl-trend-h{font-weight:700;margin:4px 0 2px}.dl-trend-h small{font-weight:400;color:#59636e}.dl-trend-s{font-size:13.5px;color:#424a53}
.sc-stat{font-size:12.5px;color:#424a53;margin:0 0 6px 4px}.sc-stat:empty{display:none}
.sc-jinro{margin-top:2px;color:#1f2328}.sc-src{font-size:11.5px;color:#59636e}.sc-src a{color:#0969da}

/* 카드 탭 안 묶음 구분: 묶음마다 흰 상자 · 제목 밑줄 (사용자 요청 2026-10-21 — 지하철역·마트 등이 이어져 보였음) */
#page-card .lf-cat { background: #fff; border: 1.5px solid #1f2d4f; border-radius: 12px; padding: 10px 12px 8px; margin: 0 0 12px; box-shadow: 0 1px 2px rgba(31,35,40,.05); }
#page-card .lf-cat:first-child { margin-top: 2px; border-top: 1.5px solid #1f2d4f; }
#page-card .lf-cat > .lf-head { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line2); }
#page-card .lf-cat:has(#dl-trend:empty) { display: none; }
#page-card .dl-recent { padding: 8px 12px; } #page-card .dl-recent summary { margin-top: 0; }
#page-card .lf-climb, #page-card .lf-climb.hard { color: var(--muted); } .lf-climb b { font-weight: 600; color: var(--fg); } .lf-climb.hard b { color: var(--warn); }
/* 학교 하나 = 한 묶음, 숫자는 칸으로 */
.sc-item { padding: 6px 0 8px; border-bottom: 1px dashed var(--line2); } .sc-item:last-of-type { border-bottom: none; }
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 4px 6px 2px; }
.kv { background: var(--soft, #f6f8fa); border: 1px solid var(--line2); border-radius: 8px; padding: 5px 8px; min-width: 0; }
.kv.wide { grid-column: 1 / -1; background: #f3f8ff; border-color: #cfe2ff; }
.kv-k { font-size: 11px; color: var(--muted); } .kv-v { font-size: 15px; font-weight: 700; line-height: 1.3; } .kv-v small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.kv-s { font-size: 11px; color: var(--muted); } .kv-s b { color: var(--fg); }
.kv-q { display: inline-block; width: 13px; height: 13px; line-height: 13px; text-align: center; border-radius: 50%; background: #e4e8ed; color: #1f2d4f; font-size: 10px; cursor: help; }
.sc-src { margin: 4px 6px 0; }

/* 카드 머리: 단지명 옆 「📊 상세분석」(새 창 리포트) */
.mc-dongst { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line2); } .mc-dongst:empty { display: none; }
.cx-nm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-report { background: #1f2d4f; color: #fff; border: 0; border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cx-report:hover { background: #2c3f6b; }
.st2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 6px; }
.st2 { border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; background: #fff; } .st2-n { font-weight: 700; font-size: 13px; }

/* ---------- 휴대폰 화면(사용자 요청 2026-10-21 "핸드폰 인터페이스가 너무 어려워") — 카카오맵·네이버지도처럼:
   지도 전체 화면 · 위 한 줄(가로로 밀기) · 🔍 길찾기 펼침 · 옆 패널 = 아래에서 올라오는 시트(손잡이 눌러·끌어 높이) ---------- */
@media (max-width: 700px) {
  body.m { height: 100dvh; overflow: hidden; }
  body.m #topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.m #topbar::-webkit-scrollbar { display: none; }
  body.m #topbar .brand { font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
  body.m #topbar .edition-badge { display: none; }
  body.m #topbar .tb-group { flex: 0 0 auto; flex-wrap: nowrap; border: 0; padding: 0; margin: 0; gap: 4px; }
  body.m #topbar .tb-group button, body.m #m-route-btn { height: 34px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
  body.m #m-route-btn { flex: 0 0 auto; background: #1f2d4f; color: #fff; border: 0; border-radius: 8px; font-weight: 700; }
  body.m.m-route #m-route-btn { background: var(--accent); }
  /* 길찾기 칸: 위 줄 바로 아래 펼침 */
  body.m #topbar .tb-group.route { display: none; }
  body.m.m-route #topbar .tb-group.route { display: flex; position: fixed; top: var(--tb-h, 48px); left: 0; right: 0; z-index: 61; flex-wrap: wrap; gap: 6px; padding: 8px; background: #fff; border-bottom: 1.5px solid var(--line); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
  body.m.m-route #topbar .tb-group.route #go { flex: 1 1 auto; }
  /* 지도: 위 줄 아래 전체 */
  body.m main { position: fixed; top: var(--tb-h, 48px); left: 0; right: 0; bottom: 0; flex-direction: column; }
  body.m #left { flex: 1 1 auto; height: 100%; }
  body.m #map { flex: 1 1 auto; height: auto; min-height: 0; }
  body.m #bottom-dock { display: none; } body.m #dock-btn { display: none; }
  /* 옆 패널 → 아래 시트 */
  body.m #side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: var(--sheet-h, 42dvh); width: auto !important; z-index: 55; border: 1.5px solid var(--line); border-bottom: 0;
    border-radius: 16px 16px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.18); padding: 0 10px 14px; transition: height .18s ease; }
  body.m.sheet-drag #side { transition: none; }
  body.m #sheet-handle { position: sticky; top: 0; z-index: 3; height: 26px; margin: 0 -10px 4px; background: var(--panel); display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
  body.m #sheet-handle::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: #1f2d4f; opacity: .55; }
  body.m .cx-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.m .cx-tabs::-webkit-scrollbar { display: none; }
  body.m .cx-tabs button { flex: 0 0 auto; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
  body.m.m-route #topbar .tb-group.route .field { flex: 1 1 calc(100% - 56px); }   /* ⇄ 은 출발지 옆에 */
  body.m.m-route #topbar .tb-group.route #swap { flex: 0 0 44px; height: 40px; }
  body.m .maplibregl-ctrl-bottom-right, body.m .maplibregl-ctrl-bottom-left { bottom: calc(var(--sheet-h, 42dvh) + 4px); }
}