:root{
  --ink:#1F2B3D;
  --ink-2:#5A6676;
  --paper:#F2F4F3;
  --rule:#D5DBD8;
  --a:#00A84D;      /* 2호선 */
  --b:#996CAC;      /* 5호선 */
  --focus:#0B63CE;
  --font:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
#map{position:fixed;inset:0;background:#E9ECEA}
.leaflet-container{font-family:var(--font)}
.basemap{filter:grayscale(1) contrast(.9) brightness(1.06)}
body.picking #map{cursor:crosshair}

.panel{
  position:fixed;top:16px;left:16px;bottom:16px;width:340px;z-index:1000;
  background:var(--paper);border-radius:14px;
  box-shadow:0 1px 2px rgba(31,43,61,.12),0 8px 24px rgba(31,43,61,.10);
  padding:22px 22px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;
}
.brand h1{font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.brand p{margin:0;color:var(--ink-2);font-size:14px}

/* 노선도처럼 A–B를 잇는 세로선 */
.line{list-style:none;margin:0;padding:0;position:relative}
.line::before{content:"";position:absolute;left:8px;top:14px;bottom:30px;width:4px;border-radius:2px;
  background:linear-gradient(var(--a) 0 50%,var(--b) 50% 100%)}
.stop{display:grid;grid-template-columns:20px 1fr;gap:12px;padding-bottom:16px;position:relative}
.dot{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--a);margin-top:2px;z-index:1}
.stop.b .dot{border-color:var(--b)}
.stop.set .dot{background:var(--a)}
.stop.b.set .dot{background:var(--b)}
.stop-body{min-width:0}
.stop label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.opt{font-weight:500;color:var(--ink-2);font-size:13px;margin-left:4px}
.row{display:flex;gap:6px}
.row input{flex:1;min-width:0;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:#fff;color:var(--ink)}
.pick,.clear{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:8px;padding:0 10px;cursor:pointer;white-space:nowrap}
.pick[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.clear{margin-top:6px;padding:4px 10px;color:var(--ink-2)}
.where{margin:6px 0 0;font-size:13px;color:var(--ink-2)}
.stop.set .where{color:var(--ink)}

.limit label{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.limit output{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.limit input{width:100%;accent-color:var(--ink);margin:8px 0 2px}
.hint{margin:0;font-size:13px;color:var(--ink-2)}

/* 판독창: 이 페이지에서 유일하게 큰 숫자 */
.readout{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;min-height:104px}
.ro-empty{margin:0;color:var(--ink-2);font-size:14px}
.ro{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ro-item{display:flex;flex-direction:column;border-left:4px solid var(--a);padding-left:10px}
.ro-item.b{border-color:var(--b)}
.ro-k{font-size:13px;color:var(--ink-2);font-weight:600}
.ro-v{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:4px 0}
.ro-v small{font-size:18px;font-weight:700;margin-left:2px;letter-spacing:0}
.ro-s{font-size:13px;color:var(--ink-2)}
.ro-item.off .ro-v{color:#A3ACB6}

/* 지도 오른쪽 아래 범례 */
.legend{position:fixed;z-index:900;right:12px;bottom:26px;
  background:rgba(255,255,255,.95);border-radius:10px;padding:10px 14px 9px;width:280px;
  box-shadow:0 1px 2px rgba(31,43,61,.12),0 4px 14px rgba(31,43,61,.10)}
.lg-row{display:flex;flex-direction:column;gap:5px}
.lg-title{font-size:12px;font-weight:700;white-space:nowrap}
.lg-scale{width:100%}
.ramp{display:flex;height:10px;border-radius:5px;overflow:hidden}
.ramp span{flex:1}
.ramp-labels{position:relative;height:14px;font-size:11px;color:var(--ink-2);margin-top:3px;font-variant-numeric:tabular-nums}
.ramp-labels span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.ramp-labels span:first-child{transform:none}
.ramp-labels span:last-child{transform:translateX(-100%)}
.lg-price{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule);gap:4px}
.lg-price:empty{display:none}
.pz{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pz i{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(31,43,61,.55)}
.legend.empty{display:none}
.basis{margin-top:auto;font-size:12px;color:var(--ink-2)}
.basis p{margin:0 0 4px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px}

.wp-marker{width:26px;height:26px;border-radius:50%;border:4px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center}
.wp-marker.a{background:var(--a)} .wp-marker.b{background:var(--b)}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

@media (max-width:720px){
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:52vh;border-radius:16px 16px 0 0;padding:16px 16px 12px;gap:14px}
  .brand p{display:none}
  .brand h1{font-size:20px;margin:0}
  .ro-v{font-size:34px}
  .readout{min-height:84px;order:-1}
  .legend{right:8px;bottom:calc(52vh + 8px);width:176px;padding:7px 9px 6px}
  .lg-title{font-size:11px}
  .legend{width:200px}
  .lg-price{margin-top:6px;padding-top:6px}
  .pmode{font-size:10px;padding:1px 5px}
  .lg-btns{flex-wrap:wrap;justify-content:flex-end;gap:3px}
  .pbar{height:14px;margin-top:4px}
  .pticks,.pnote{font-size:10px}
  .pz{font-size:10.5px}
  .brand{order:-2}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 집 조건 */
.home{display:grid;gap:6px}
.home label{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.home output{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.home input[type=range]{width:100%;accent-color:var(--ink)}
.home select{font:inherit;font-size:14px;padding:7px 8px;border:1px solid var(--rule);border-radius:8px;background:#fff;color:var(--ink)}
.area-l{margin-top:4px}
.seg{display:inline-grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);border-radius:8px;overflow:hidden;width:max-content;margin-bottom:6px}
.seg button{font:inherit;font-size:14px;font-weight:700;padding:6px 18px;background:#fff;color:var(--ink);border:0;cursor:pointer}
.seg button[aria-checked="true"]{background:var(--ink);color:#fff}

/* 단지 목록: 정차역 목록처럼 */
.apts h2{font-size:15px;font-weight:800;margin:0 0 8px}
.apts ol{list-style:none;margin:0;padding:0}
.apt{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-top:1px solid var(--rule);cursor:pointer}
.apt:hover,.apt.sel{background:#E6EBE8}
.apt .nm{font-weight:700;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apt .tm{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.apt .sub{font-size:12px;color:var(--ink-2)}
.apt .pr{font-size:12px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.more{font:inherit;font-size:13px;font-weight:600;margin-top:8px;border:1px solid var(--rule);background:#fff;border-radius:8px;padding:6px 12px;cursor:pointer}
.apts .none{font-size:13px;color:var(--ink-2);margin:0}

/* 우선순위 */
.prio{display:grid;gap:6px}
.prio-l{font-weight:700}
.seg3{grid-template-columns:repeat(3,auto)}
.seg3 button{padding:6px 12px}
#extra-wrap{margin-top:10px}
#extra-wrap label{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
#extra-wrap output{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
#extra-wrap input{width:100%;accent-color:var(--ink)}

/* 직장 검색 제안 목록 */
.stop-body{position:relative}
.sugg{list-style:none;margin:4px 0 0;padding:4px;background:#fff;border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 6px 18px rgba(31,43,61,.14);max-height:300px;overflow-y:auto;position:absolute;left:0;right:0;z-index:20}
.sg{display:grid;grid-template-columns:auto 1fr;gap:0 8px;padding:7px 8px;border-radius:7px;cursor:pointer}
.sg.on,.sg:hover{background:#E6EBE8}
.sg-k{grid-row:span 2;align-self:center;font-size:11px;font-weight:700;color:var(--ink-2);border:1px solid var(--rule);border-radius:5px;padding:1px 5px}
.sg-n{font-size:14px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-s{grid-column:2;font-size:12px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-none{font-size:13px;color:var(--ink-2);padding:8px}

/* 지도 색 진하기 */
.lg-op{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule)}
.lg-op label{display:flex;justify-content:space-between;font-size:12px;font-weight:700}
.lg-op output{font-variant-numeric:tabular-nums}
.lg-op input{width:100%;accent-color:var(--ink);margin:4px 0 0}
@media (max-width:720px){ .lg-op{margin-top:6px;padding-top:6px} .lg-op label{font-size:11px} }

/* 가격 범례: 색 막대 */
.lg-ph{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.lg-btns{display:flex;gap:4px;margin-left:auto}
.pmode:disabled{opacity:.35;cursor:default}
.pmode{font:inherit;font-size:11px;font-weight:700;border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:6px;padding:2px 7px;cursor:pointer;white-space:nowrap}
.pmode[aria-pressed="true"]{background:var(--ink);color:#fff}
.pbar{display:flex;height:14px;border-radius:6px;overflow:hidden;margin-top:6px}
.pbar button{flex:1;border:0;padding:0;margin:0;cursor:pointer;min-width:0;transition:opacity .15s}
.pbar button.off{opacity:.18}
.pbar button.sel{box-shadow:inset 0 -3px 0 #1F2B3D}
.pbar button:hover{filter:brightness(.92)}
.pbar button:focus-visible{outline:2px solid #1F2B3D;outline-offset:-2px}
.pick-all{border:0;background:none;padding:0;font:inherit;color:#1F2B3D;text-decoration:underline;cursor:pointer}
.pticks{position:relative;height:14px;font-size:10.5px;color:var(--ink-2);margin-top:3px;font-variant-numeric:tabular-nums}
.pticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.pticks span.edge-r{transform:translateX(-100%)}
.pnote{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-2);margin-top:2px}
.pz-none{font-size:12px;color:var(--ink-2)}
/* 단지 세부정보 */
.more-d{grid-column:1/-1;justify-self:start;font:inherit;font-size:11px;font-weight:700;border:1px solid var(--rule);background:#fff;border-radius:6px;padding:2px 8px;margin-top:4px;cursor:pointer;color:var(--ink)}
.detail{grid-column:1/-1;margin-top:6px;background:#fff;border:1px solid var(--rule);border-radius:8px;padding:8px}
.detail table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.detail th{font-weight:700;color:var(--ink-2);text-align:right;padding:2px 4px;border-bottom:1px solid var(--rule)}
.detail td{text-align:right;padding:3px 4px}
.detail th:first-child,.detail td:first-child{text-align:left}
.detail tr.dim td{color:#A3ACB6}
.detail p{margin:6px 0 0;font-size:11px;color:var(--ink-2)}


.busy{position:fixed;z-index:1200;left:50%;top:14px;transform:translateX(-50%);background:#1F2B3D;color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.busy[hidden]{display:none}
.beta-tag{font-size:12px;font-weight:700;color:#fff;background:#1F2B3D;border-radius:6px;padding:2px 7px;vertical-align:middle;margin-left:4px}
/* 맨 위로: 조건 창 오른쪽 아래(지도 왼쪽 아래)에 항상 떠 있음 */
.to-top{position:fixed;z-index:1001;left:366px;bottom:16px;font:inherit;font-size:13px;font-weight:700;color:#1F2B3D;background:#fff;border:1px solid var(--rule);border-radius:999px;padding:8px 14px;cursor:pointer;box-shadow:0 2px 8px rgba(31,43,61,.18)}
.to-top:hover{background:#F3F5F8}
@media (max-width:720px){.to-top{left:auto;right:10px;bottom:10px;font-size:12px;padding:7px 12px}}

/* 이동수단 고르기 */
.mode{display:flex;flex-direction:column;gap:8px}
.mode-l{font-weight:700;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--rule);background:#fff;color:var(--ink-2);border-radius:999px;padding:6px 12px;cursor:pointer}
.chips button[aria-pressed="true"]{background:#1F2B3D;border-color:#1F2B3D;color:#fff}
.tr-l{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.tr-l select{font:inherit;font-size:13px;padding:4px 8px;border:1px solid var(--rule);border-radius:8px;background:#fff}
/* 경로 */
.route{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.rt{border:1px solid var(--rule);border-radius:10px;padding:10px 12px;background:#fff}
.rt-h{font-size:13px;line-height:1.5}
.rt-sum{display:inline-block;margin-left:4px;color:var(--ink-2);font-size:12px}
.rt ol{list-style:none;margin:8px 0 0;padding:0 0 0 12px;border-left:2px solid var(--rule);display:flex;flex-direction:column;gap:6px}
.rt li{font-size:13px;line-height:1.45;position:relative}
.rt li::before{content:"";position:absolute;left:-18px;top:6px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #9AA3AF}
.rt-walk{color:var(--ink-2)}
.rt-st{color:var(--ink-2);font-size:12px}
.rt-tag{display:inline-block;font-size:11px;font-weight:700;color:#fff;border-radius:4px;padding:1px 6px;margin-right:2px}
.m1 .rt-tag{background:#2E6BD8}.m1::before{border-color:#2E6BD8!important}
.m2 .rt-tag{background:#6B4FBB}.m2::before{border-color:#6B4FBB!important}
.m3 .rt-tag{background:#C8322E}.m3::before{border-color:#C8322E!important}
.m4 .rt-tag{background:#2E9A57}.m4::before{border-color:#2E9A57!important}
.rt-wait,.rt-note{font-size:12px;color:var(--ink-2);margin:0}
.panel>*{flex-shrink:0}

/* 조건 창 압축 */
.stop{padding-bottom:10px}
.stop .row{align-items:center;gap:6px}
.stop .row label{flex:0 0 auto;margin:0;font-size:14px;font-weight:700;width:44px}
.stop .row input{font-size:13px;padding:6px 8px}
.stop .pick{font-size:12px;padding:6px 8px;align-self:stretch}
.stop .clear{font-size:15px;line-height:1;padding:0 8px;align-self:stretch}
.line::before{top:12px;bottom:22px}
.stop .dot{margin-top:6px}
.mode{gap:6px;margin:4px 0 2px}
.mode-l{font-size:13px}
.chips{gap:4px}
.chips button{font-size:12px;padding:4px 9px}
.tr-l{font-size:13px}
.tr-l select{font-size:12px;padding:3px 6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.two>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.home .two label{font-size:13px}
.home .two select{font-size:12px;padding:5px 6px;min-width:0}

/* 단지 하나만 보기 */
.apt.one{display:flex;flex-direction:column;gap:6px;cursor:default}
.apt.one .nm{font-size:18px}
.back{align-self:flex-start;font:inherit;font-size:12px;font-weight:600;border:1px solid var(--rule);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;margin-bottom:4px}
.one-t{display:flex;gap:16px;margin:4px 0}
.one-t .ro-item b{font-size:26px;font-weight:800;line-height:1.1}
.one-t .ro-item small{font-size:12px;color:var(--ink-2)}
#route-slot .route{margin-top:0}

.readout.in-one{display:none}
.home .tr-l{justify-content:flex-start;font-weight:600}

.mode-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mode .chips{flex-wrap:nowrap}
.mode .chips button{flex:1}
.mode-h{justify-content:flex-start;gap:14px}

/* 휴대폰: 조건 창 높이 끌어서 조절, 가로 범례 */
.sheet-handle,.lg-tog{display:none}
@media (max-width:720px){
  :root{--sheet-h:52vh}
  .panel{height:var(--sheet-h);max-height:none;padding-top:26px;transition:height .22s ease}
  .sheet-handle{display:block;position:fixed;left:0;right:0;z-index:1002;height:30px;bottom:calc(var(--sheet-h) - 30px);
    touch-action:none;cursor:grab;transition:bottom .22s ease;border:0;background:transparent;padding:0}
  .sheet-handle::before{content:"";position:absolute;left:50%;top:9px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:#C3CAD2}
  body.dragging .panel,body.dragging .sheet-handle,body.dragging .legend{transition:none}
  body.sheet-low .to-top{display:none}

  /* 범례: 화면 폭을 가로로 쓰고 높이는 낮게 */
  .legend{left:8px;right:8px;width:auto;bottom:calc(var(--sheet-h) + 8px);padding:7px 10px 6px;border-radius:10px;transition:bottom .22s ease}
  .legend .lg-row:first-of-type{flex-direction:row;align-items:flex-start;gap:8px;padding-right:62px}
  .legend .lg-row:first-of-type .lg-title{padding-top:0;line-height:12px}
  .legend .lg-scale{flex:1;min-width:0}
  .legend .lg-title{font-size:11px}
  .legend .ramp{height:8px;margin-top:2px}
  .legend .ramp-labels{font-size:9.5px;height:12px;margin-top:1px}
  .legend .lg-price{margin-top:5px;padding-top:5px}
  .legend .lg-ph{flex-wrap:nowrap}
  .legend .lg-btns{flex-wrap:nowrap;gap:5px}
  .legend .pmode{min-height:28px;font-size:11px;padding:0 10px}
  .legend .pbar{height:26px;margin-top:5px}
  .legend .pticks{font-size:10px;height:13px}
  .legend .pnote{font-size:10px;margin-top:0}
  .legend .lg-op{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:4px}
  .legend .lg-op label{font-size:11px;white-space:nowrap;gap:6px}
  .legend .lg-op input{flex:1;height:24px;margin:0}
  .lg-tog{display:block;position:absolute;top:5px;right:8px;min-height:26px;padding:0 10px;font:inherit;font-size:11px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:999px;cursor:pointer}
  .legend.min{left:auto;width:auto;padding:0;background:transparent;box-shadow:none}
  .legend.min > :not(.lg-tog){display:none}
  .legend.min .lg-tog{position:static;min-height:34px;padding:0 14px;font-size:12px;box-shadow:0 2px 8px rgba(31,43,61,.18)}
}