/* 레이아웃: 데스크톱은 왼쪽 패널(필터·목록) + 오른쪽 지도, 모바일은 위 지도 + 아래 패널 */
:root{
  --bg:#f4f5f1; --surface:#fff; --sunk:#eff1ec; --ink:#14201c; --muted:#5a6762; --line:#d8ddd6;
  /* 로고 색: 진초록(지붕·글자) + 노랑(바탕). 진초록은 버튼·선택, 노랑은 '지금 눌러야 할 것'과 브랜드 강조에만 */
  --accent:#17503f; --accent-ink:#fff; --accent-soft:#e2ede8;
  --brand:#f5b900; --brand-ink:#123f36; --brand-soft:#fff3c4;
  --good:#2b7a3e; --good-soft:#e2f0e5; --warn:#a1561b; --warn-soft:#f8ebdf; --bad:#a53939; --bad-soft:#f6e2e2;
  --font:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:var(--font);  /* 숫자도 본문 글꼴(자릿수 맞춤은 tabular-nums) */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-variant-numeric:tabular-nums;font-size:14.5px;line-height:1.55;-webkit-text-size-adjust:100%;word-break:keep-all;overflow-wrap:break-word}  /* 한국어는 단어(띄어쓰기) 단위로 줄바꿈: '용적/률' 처럼 끊지 않게, 너무 긴 단어만 끊음 */
.app{display:grid;grid-template-columns:var(--lw,330px) 1fr var(--rw,400px);height:100%}
.side{display:flex;flex-direction:column;min-height:0;background:var(--surface)}
.side.left{border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}
.side.left>header{position:sticky;top:0;z-index:3;background:var(--surface)}
@media (min-width:861px){ html,body{overflow:hidden} .app{height:calc(100vh - var(--tbh));height:calc(100dvh - var(--tbh))} .side,#mapWrap{min-height:0;overflow:hidden} .side.left{overflow-y:auto} .fscroll{overflow:visible} }
.side.right{border-left:1px solid var(--line);position:relative}
.fscroll{overflow:auto;min-height:0;flex:1}
.mobile-fold{display:flex;flex-direction:column;min-height:0;flex:1}
.mobile-fold>summary{display:none}
.fs{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.fs h2{font-size:12.5px;margin:0;color:var(--accent);letter-spacing:.02em}
.fs details summary{cursor:pointer}
.fs details[open]{display:flex;flex-direction:column;gap:9px}
.row2{display:flex;flex-direction:column;gap:5px}
.row2 .lbl{font-size:12.5px;font-weight:600;color:var(--ink)}
.row2 .hint{font-weight:400;color:var(--muted);margin-left:6px;font-size:11.5px}
.seg{display:flex;flex-wrap:wrap;gap:5px}
.seg button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.seg button:hover{border-color:var(--accent)}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.dsearch{position:relative}
.spots{display:flex;flex-direction:column;gap:8px}
.spot{border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.spot .top{display:flex;gap:6px;align-items:center}
.spot .top .seg{flex:1}
.spot .rm{border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;padding:0 4px}
.spot .rm:hover{color:var(--bad)}
.spot .seg button{padding:3px 8px;font-size:12px}
.smax{display:flex;gap:6px;align-items:center} .smax>span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.smax .seg{display:flex;flex-wrap:wrap;gap:3px} .smax .seg button{padding:2px 6px;font-size:11.5px}
.addspot{border:1px dashed var(--accent);background:none;color:var(--accent);border-radius:8px;padding:6px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.addspot:disabled{opacity:.4;cursor:default}
.dsearch input{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13.5px}
.dres{position:absolute;left:0;right:0;top:100%;margin-top:3px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:20;max-height:280px;overflow:auto}
.dres button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 10px;font:inherit;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line)}
.dres button:hover{background:var(--accent-soft)}
.dres small{display:block;color:var(--muted);font-size:11.5px}
.dpick{display:flex;flex-wrap:wrap;gap:5px}
.dpick span{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 4px 2px 10px;font-size:12.5px;font-weight:600}
.dpick button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 4px}
.custom{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.custom input{width:96px;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit}
.sws{display:flex;flex-direction:column;gap:6px}
.sw{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.sw input{appearance:none;width:34px;height:20px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:none;margin:0;transition:background .15s}
.sw input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw input:checked{background:var(--accent)} .sw input:checked::after{left:16px}
.active{display:flex;flex-wrap:wrap;gap:4px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--sunk)}
.active span{font-size:11.5px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--ink)}
select{padding:6px 8px;border-radius:8px}
.applyrow{flex-direction:row!important;align-items:center;gap:8px}
.applybtn{display:none}
@media (max-width:860px){
  .applybtn{display:block;flex:1;border:0;background:var(--accent);color:#fff;border-radius:10px;padding:11px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
  .applyrow{position:sticky;bottom:0;background:var(--surface);z-index:5;box-shadow:0 -4px 10px rgba(0,0,0,.06)}
}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:5px 10px;cursor:pointer;font-size:13px;align-self:flex-start}
@media (max-width:1100px){ .app{grid-template-columns:var(--lw,300px) 1fr var(--rw,360px)} }
/* 사이드바 폭 조절·접기 (넓은 화면에서만) */
.grip{display:none}
@media (min-width:861px){
  .grip{display:block;position:absolute;top:0;bottom:0;width:10px;z-index:960;cursor:col-resize;touch-action:none}
  .grip::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;background:transparent;transition:background .15s}
  .grip:hover::after,.grip.drag::after{background:var(--accent)}
  .grip.l{left:-5px} .grip.r{right:-5px}
  .app.lcol .grip.l,.app.rcol .grip.r{display:none}
  .side{transition:transform .2s ease}
  .app.lcol{--lw:12px!important} .app.rcol{--rw:12px!important}
  .app.lcol .side.left{width:var(--lw-open,330px);position:relative;z-index:1500;transform:translateX(calc(-100% + 12px));box-shadow:2px 0 10px rgba(0,0,0,.12)}
  .app.lcol .side.left:not(.nohov):hover,.app.lcol .side.left:not(.nohov):focus-within{transform:none}
  .app.rcol .side.right{width:var(--rw-open,400px);position:relative;z-index:1500;box-shadow:-2px 0 10px rgba(0,0,0,.12)}
  .app.rcol .side.right:not(.nohov):hover,.app.rcol .side.right:not(.nohov):focus-within{transform:translateX(calc(-100% + 12px))}
  .app.lcol .side.left>*,.app.rcol .side.right>*{transition:opacity .15s}
  .app.lcol .side.left:is(.nohov,:not(:hover):not(:focus-within))>*,.app.rcol .side.right:is(.nohov,:not(:hover):not(:focus-within))>*{opacity:0}
}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 62vh auto;height:auto;min-height:100%}
  .app>*{min-width:0;max-width:100vw}  /* 안쪽의 긴 줄(버스 노선 칩 등) 때문에 패널이 화면보다 넓어지지 않게 */
  .side.left{border-right:0;border-bottom:1px solid var(--line)}
  .side.right{border-left:0;border-top:1px solid var(--line);min-height:70vh}
  .mobile-fold>summary{display:block;padding:9px 14px;font-weight:600;cursor:pointer;border-top:1px solid var(--line);color:var(--accent)}
  .fscroll{max-height:65vh}
  #mapWrap{height:62vh;height:62svh}
}
#mapWrap{position:relative;min-height:0;height:100%}
#map{width:100%;height:100%;position:relative;z-index:0}
.ctbtn{position:absolute;left:10px;top:10px;z-index:650;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.ctbtn[aria-pressed="true"]{background:#5b3a1e;color:#fff;border-color:#5b3a1e}
.ctlegend{position:absolute;left:10px;top:50px;z-index:650;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;width:190px}
.ctbar{height:10px;border-radius:4px;margin:4px 0 2px;background:linear-gradient(90deg,rgb(37,99,235),rgb(22,163,74),rgb(234,179,8),rgb(249,115,22),rgb(220,38,38))}
.ctlab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted)}
.ctl{font-family:var(--mono);font-size:10.5px;color:#1b2220;font-weight:600;background:rgba(255,255,255,.85);padding:0 3px;border-radius:3px;white-space:nowrap;pointer-events:none}
#t3d{position:absolute;inset:0;z-index:900;background:#eef1ef}
.fsbtn{left:auto;right:52px;z-index:950}
/* 나침반: 평면 지도는 늘 북쪽이 위, 3D는 돌린 만큼 같이 돌아감(누르면 북쪽으로) */
.compass{position:absolute;right:12px;bottom:34px;width:58px;height:58px;z-index:660;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.compass svg{width:100%;height:100%;display:block}
.compass .needle{transition:transform .15s linear}
#t3d .compass{z-index:910}
/* 햇빛: 3D 도구 줄 바로 아래 줄(날짜 · 시각 두 줄), 지도 아래쪽 범례·나침반과 겹치지 않게 */
.t3br{flex-basis:100%;height:0}
.t3br:has(+ .sunbar[hidden]){display:none}
.sunbar{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:12px;padding:7px 10px;font-size:12.5px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sunr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sunk{font-weight:700;font-size:12px;color:var(--muted);min-width:24px}
.sunbar input[type=range]{width:180px;accent-color:#f59e0b}
.sunbar #sunLbl{font-family:var(--mono);font-size:12px}
.gradeseg button small{font-size:10.5px;opacity:.7;font-weight:400}
.sunbar .seg button{padding:2px 8px;font-size:12px}
.ttbtn{left:var(--ttl,140px)}
/* 지도 위 단지 검색: 평면·전체화면·3D 모두에서 보이게(3D 화면보다 위) */
.msearch{position:absolute;right:52px;top:48px;z-index:955;width:230px}
.msearch input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:inherit;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.msearch .cqf button{box-shadow:0 1px 4px rgba(0,0,0,.15)}
.msearch .cres{left:0;right:0;top:38px}
.poibar{position:absolute;left:10px;top:48px;z-index:650;display:flex;gap:4px;flex-wrap:wrap;max-width:calc(100% - 80px)}
.poibar button{border:1px solid var(--line);background:rgba(255,255,255,.95);border-radius:999px;padding:3px 9px;font:inherit;font-size:12px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.poibar button[aria-pressed="true"]{background:#1b2220;color:#fff;border-color:#1b2220}
.poi{font-size:15px;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;border:1.5px solid #1b2220;box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:default}
.mk-wrap .poiw{transform:translate(-50%,-50%)}
.poi.cvs{border-color:#2563eb}
.poi.brand{width:auto;height:18px;border-radius:5px;padding:0 4px;font:800 10.5px/1 Arial,Helvetica,sans-serif;letter-spacing:-.2px;border-width:1.5px}
/* 시설 아이콘: 크기를 같은 틀(36×22)에 맞추고, 주변은 흰 안개로 흐리게 + 테두리에 은은한 빛 */
.poiw{position:relative;isolation:isolate;display:inline-flex}
.poiw>.poi{position:relative;z-index:1}
.poiw::before{content:"";position:absolute;inset:-9px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,.55) 60%,rgba(255,255,255,0));
  -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);-webkit-mask:radial-gradient(closest-side,#000 65%,transparent);mask:radial-gradient(closest-side,#000 65%,transparent)}
@keyframes poiGlow{0%,100%{box-shadow:0 0 0 1.5px #fff,0 0 6px 1px rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.35)}50%{box-shadow:0 0 0 1.5px #fff,0 0 12px 4px rgba(255,255,255,1),0 1px 4px rgba(0,0,0,.35)}}
.poi.logo{width:36px;height:22px;padding:2px 3px;border-radius:7px;border:1px solid #d5dbd9;background:#fff;box-sizing:border-box;animation:poiGlow 2.6s ease-in-out infinite}
.poi.logo.mart{position:relative}
.poi.logo.mart.big{width:46px;height:26px;border:2px solid #f59e0b}
.poi.logo.mart em{position:absolute;right:-6px;top:-8px;font:700 9px/1 var(--font);font-style:normal;background:#1b2220;color:#fff;padding:2px 3px;border-radius:4px}
.poi.logo.mart.big em{background:#d97706}
.poi.logo .mt{font:700 10px/1 var(--font);color:#1b2220;white-space:nowrap}
.poi.logo img{width:100%;height:100%;object-fit:contain;display:block}
.poi.logo.l-s711 img,.poi.logo.l-cu img{transform:scale(1.15)}
.poi.sch{width:24px;height:24px;font:800 12px/1 var(--font);color:#fff;border:2px solid #fff;animation:poiGlow 2.6s ease-in-out infinite}
.poi.s-kid{background:#f472b6;font-size:13px} .poi.s-elem{background:#16a34a} .poi.s-mid{background:#2563eb} .poi.s-high{background:#7c3aed} .poi.s-univ{background:#b45309;font-size:13px}
.poi.acad{font:800 11px/1 var(--font);color:#fff;background:#0f766e;border:2px solid #fff;box-shadow:0 0 0 1px #0f766e,0 1px 3px rgba(0,0,0,.3)}
.poi.cl{width:auto;min-width:26px;height:24px;padding:0 7px 0 3px;gap:3px;border-radius:12px;background:var(--pc,#1b2220);color:#fff;border:2px solid #fff;font:700 12px/1 var(--mono);cursor:pointer;box-shadow:0 0 0 1px var(--pc,#1b2220),0 1px 4px rgba(0,0,0,.4)}
.poi.cl:hover{filter:brightness(1.12)}
/* 묶음 안의 종류 아이콘: 흰 동그라미에 낱개 점과 같은 그림(학원은 "학", 학교는 초·중·고) */
.poi.cl>i{width:16px;height:16px;flex:none;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font:800 10px/1 var(--font);font-style:normal;color:var(--pc,#1b2220)}
.poi.cl>i .pic{width:12px;height:12px;margin:0}
.poipop{background:#fff;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.25);padding:8px 10px 6px;min-width:190px;max-width:260px;font-size:12px;transform:translate(-50%,calc(-100% - 18px));position:relative}
.mk-wrap .poipop{transform:translate(-50%,calc(-100% - 18px))}
.poipop .x{position:absolute;right:4px;top:2px;border:0;background:none;font-size:16px;cursor:pointer;color:var(--muted)}
.poipop .cnt{display:flex;flex-wrap:wrap;gap:3px 8px;padding-right:14px;margin-bottom:4px;font-weight:600}
.poipop .cnt b{color:var(--accent)}
.poipop ul{list-style:none;margin:0;padding:0;max-height:180px;overflow:auto}
.poipop li{padding:2px 0;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poipop li .k{display:inline-block;min-width:44px;color:var(--muted);margin-right:4px}
.poi.hk{color:#fff;border-color:#fff;font:700 10.5px/1 var(--font);min-width:30px;height:20px;justify-content:center;animation:poiGlow 2.6s ease-in-out infinite}
.poi.hk.big{height:22px;font-size:12px;padding:0 6px;box-shadow:0 0 0 2px #7f1d1d,0 1px 4px rgba(0,0,0,.4)}
.poi.hk.big::before{content:"";width:11px;height:11px;margin-right:3px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217.5%22%20rx%3D%222%22%20fill%3D%22%23fff%22%20stroke%3D%22%23d9534f%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M12%208v9M7.5%2012.5h9%22%20stroke%3D%22%23d9534f%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat;display:inline-block}
.poi.b-gs{background:#00a9e0;color:#fff;border-color:#fff;box-shadow:0 0 0 1px #00a9e0,0 1px 3px rgba(0,0,0,.3)}
.poi.b-cu{background:#652f8d;color:#a4cf3c;border-color:#fff;box-shadow:0 0 0 1px #652f8d,0 1px 3px rgba(0,0,0,.3)}
.poi.b-s711{background:#fff;color:#e3001b;border-color:#008163;box-shadow:inset 0 -3px 0 #f58220,0 1px 3px rgba(0,0,0,.3)}
.poi.b-e24{background:#ffb81c;color:#1b1b1b;border-color:#fff;box-shadow:0 0 0 1px #ffb81c,0 1px 3px rgba(0,0,0,.3)}
.poi.b-ms{background:#003f8a;color:#fff;border-color:#fff;box-shadow:0 0 0 1px #003f8a,0 1px 3px rgba(0,0,0,.3)} .poi.hosp{border-color:#dc2626} .poi.pharm{border-color:#16a34a} .poi.mart{border-color:#ea8a0c}
.poinote{position:absolute;left:10px;top:80px;z-index:650;font-size:11.5px;background:rgba(255,255,255,.92);border-radius:6px;padding:2px 8px;color:var(--muted)}
.ctlegend{top:84px}
#mapWrap.fullmap{position:fixed;inset:0;z-index:2000;height:auto;background:var(--bg)}
#mapWrap:fullscreen{padding:0;width:100%;height:100%}
body.fs-on{overflow:hidden}
#t3map{position:absolute;inset:0}
/* 휴대폰: 처음 지도 위를 쓸면 페이지가 스크롤되게 지도를 덮는 투명 막(한 번 쓸고 나면 걷힘) */
.maplock{position:absolute;inset:0;z-index:640;touch-action:pan-y;background:transparent}
#t3d .maplock{z-index:1}
.maplock span{display:none}
.maplocktip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:960;background:rgba(27,34,32,.75);color:#fff;font-size:12.5px;padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.maplocktip.on{opacity:1}
.t3bar{position:absolute;left:10px;top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;z-index:2}
.t3bar .ctbtn{position:static}
.t3ex{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:3px 6px;display:flex;gap:4px;align-items:center;font-size:12.5px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.t3ex span{color:var(--muted);margin-right:2px}
.t3ex button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:3px 8px;font:inherit;cursor:pointer}
.t3ex button[aria-pressed="true"]{background:#5b3a1e;color:#fff;border-color:#5b3a1e}
.t3leg{top:auto;bottom:24px;z-index:2}
.t3reload{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;border:0;background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:700;padding:12px 20px;border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.35);cursor:pointer}
.t3reload[hidden]{display:none}
.t3reload:disabled{opacity:.7;cursor:wait}
.t3reload.soon{background:rgba(27,34,32,.82);font-size:14px;pointer-events:none}
.t3mk .nm{display:none;margin-left:5px;font-family:var(--font);font-weight:600}
.t3mk.named .nm,#t3map.allnames .t3mk .nm{display:inline}
.t3mk.out .nm{color:#2a2f2d}
.stn{display:flex;align-items:center;gap:3px;font-size:11.5px;color:#1b2220;background:#fff;border:1.5px solid #1b2220;border-radius:999px;padding:1px 6px 1px 2px;white-space:nowrap;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.stn .lns{display:flex;gap:1px} .stn .lns i{font-style:normal;font:700 9.5px/1 var(--font);color:#fff;min-width:15px;height:15px;padding:0 3px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.stn b{font-weight:700}
.stn em{font-style:normal;font-size:9.5px;font-weight:700;color:#fff;background:#1b2220;border-radius:4px;padding:1px 3px}
.stn.xfer{border-width:2px;font-size:12.5px;padding:2px 7px 2px 3px}
.exitno{width:15px;height:15px;border-radius:50%;background:#fde047;border:1.5px solid #1b2220;font:700 9.5px/1 var(--font);color:#1b2220;display:flex;align-items:center;justify-content:center;pointer-events:none}
#t3map.noexit .exitno{display:none}
.dongno{font:700 10.5px/1 var(--font);color:#fff;background:rgba(27,34,32,.82);border-radius:4px;padding:2px 4px;pointer-events:none;white-space:nowrap}
#t3map.nodong .dongno{display:none}
#t3map.nostn .stn:not(.xfer){display:none}
@media (max-width:860px){ .t3leg .note{display:none} }
.range2{display:flex;flex-direction:column;gap:4px;padding:2px 2px 0}
.rval{font-weight:700;font-size:15px;color:var(--accent)}
.rtrack{position:relative;height:28px}
.rtrack::before{content:"";position:absolute;left:0;right:0;top:12px;height:5px;border-radius:3px;background:var(--line)}
.rfill{position:absolute;top:12px;height:5px;border-radius:3px;background:var(--accent)}
.rtrack input[type=range]{position:absolute;left:0;top:0;width:100%;height:28px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.rtrack input[type=range]::-webkit-slider-runnable-track{background:none;height:28px}
.rtrack input[type=range]::-moz-range-track{background:none}
.rtrack input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:22px;height:22px;margin-top:3px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:grab}
.rtrack input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:grab}
.rtrack input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid rgba(31,107,92,.35)}
.rticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.ptbl tr.dim td{opacity:.45}
.trip{display:flex;flex-direction:column;gap:6px}
.rlab{width:max-content;transform:translate(-50%,-50%);background:#fff;border:2px solid #1b2220;border-radius:10px;padding:4px 8px;font-size:13px;line-height:1.35;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 2px #fff;pointer-events:none;color:#1b2220;font-weight:600}
.rlab b{font-size:14px;font-weight:800}
.rl-k{display:inline-block;color:#fff;border-radius:6px;padding:1px 7px;font-weight:800;margin-right:5px;font-size:13px}
.rl-s{color:var(--muted);font-weight:600}
.rl-x i{font-style:normal;color:#fff;border-radius:5px;padding:0 6px;font-weight:800;margin:0 2px}
.mk-wrap .rlab{transform:translate(-50%,-50%)}
#map.tripmode .mk:not(.sel){opacity:.22}
#map .mk.decl-hide{visibility:hidden}
#map.tripmode .mk:not(.sel):hover{opacity:1}
.rlab small{display:block;color:#3f4744;font-size:12px;font-weight:600;margin-top:1px}
.rlab.ride i{font-style:normal;color:#fff;border-radius:5px;padding:0 5px;font-weight:700;margin-right:2px}
.rlab.walk{background:#fff;border-style:dashed;border-color:#64748b;font-size:12.5px} .rlab.walk.steep{border-color:#ea580c;background:#fff7ed}
.rlab.xfer{background:#1b2220;color:#fff;border-color:#fde047;font-size:13px}
.rlab.dest{font-size:14px;border:3px solid #1b2220;padding:5px 10px} .rlab .tot{color:#fff;border-radius:999px;padding:0 7px;margin-left:4px;font-weight:700}
.tripgo{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:9px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.tripgo:hover{background:var(--accent);color:#fff}
.alts{display:flex;flex-direction:column;gap:4px}
.alt{display:flex;gap:8px;align-items:baseline;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}
.alt{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative;align-items:center}
.alt .grip{margin-left:auto;flex:none;width:34px;height:30px;margin-right:-6px;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:#8a958f;cursor:grab;touch-action:none;border-radius:6px}
.alt .grip:hover{background:var(--sunk);color:var(--ink)}
.alt.dragging{box-shadow:0 8px 20px rgba(0,0,0,.18);border-color:var(--accent);z-index:3;background:#f2faf6}
.alt.dragging .grip{cursor:grabbing;color:var(--accent)}
.alt span{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alt[aria-pressed="true"]{border-color:var(--accent);background:#eef6f3}
.alt[aria-pressed="true"] b{color:var(--accent)}
.trip .tabsx{display:flex;gap:6px;flex-wrap:wrap}
.trip .sum{font-size:15px;font-weight:700}
.dh{padding:10px 14px;border-bottom:1px solid var(--line);align-items:center!important}
.dh h1{font-size:17px;margin:0;line-height:1.3}
.dh .close{font-size:16px;padding:2px 10px}
.tldr{font-size:13px;line-height:1.6;background:#f3f7f5;border-left:3px solid var(--accent);border-radius:6px;padding:6px 9px;margin:2px 0 8px;color:#1b2220}
.tldr-all{background:linear-gradient(135deg,#eef6f3,#fff)!important;border-bottom:1px solid var(--line)}
.tldr-all .tl-h{font-size:12px;font-weight:800;color:var(--accent);margin-bottom:2px}
.tldr-all p{margin:0;font-size:14px;line-height:1.7}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px}
.stats .st{background:var(--sunk);border-radius:8px;padding:5px 8px;display:flex;flex-direction:column;min-width:0}
.stats .st span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats .st b{font-family:var(--mono);font-size:14px;white-space:nowrap}
.stats .st>span{line-height:16px;height:16px}  /* 이모지가 있는 제목도 같은 높이(카드끼리 줄 맞춤) */
/* 카드 안 작은 보조 글(최근 거래·거점별 시간)은 줄바꿈해서 카드 밖으로 안 나가게 */
.stats .st b .invx .neu{color:var(--muted);font-size:12px;margin-left:4px}
.lastdeal{white-space:normal;overflow-wrap:anywhere;word-break:keep-all;line-height:1.35}
.stats .st b .lastdeal span{display:block;white-space:normal;overflow:visible;text-overflow:clip;font-size:inherit;color:inherit}
.stats .st.wr b{white-space:normal;display:flex;flex-wrap:wrap;align-items:center;gap:2px}  /* 역 노선 배지가 많으면 줄바꿈 */
.stats .st.good{background:var(--good-soft)} .stats .st.good b{color:var(--good)}
.stats .st.warn{background:var(--warn-soft)} .stats .st.warn b{color:var(--warn)}
.stats .reasons{grid-column:1/-1}
.busline{grid-column:1/-1;font-size:12.5px;background:#eef6ff;border-radius:8px;padding:6px 8px;line-height:1.8}
.bn{font-style:normal;font-weight:800;font-size:11.5px;color:#fff;border-radius:5px;padding:1px 6px;margin-left:3px}
.bn.trunk{background:#3d5bab} .bn.branch{background:#47a33f} .bn.wide{background:#e60012} .bn.town{background:#f2b70a;color:#1b2220}
.info{display:inline-block;color:var(--muted);font-size:12px;cursor:pointer;font-weight:400;margin-left:2px}
.info:hover{color:var(--accent)}
.kblink{color:inherit;text-decoration:none;border-bottom:1px dashed currentColor}
.near{display:flex;flex-direction:column;gap:6px}
.near .nr{display:grid;grid-template-columns:62px 1fr;gap:6px;align-items:start;font-size:12.5px}
.near .nc{color:var(--muted);font-size:12px;padding-top:2px}
.near .ni{display:flex;flex-wrap:wrap;gap:4px}
.infotip{position:fixed;z-index:5000;background:rgba(27,34,32,.95);color:#fff;font-size:12.5px;line-height:1.55;font-weight:400;padding:8px 10px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.25);white-space:normal}
.more{margin-top:6px} .more summary{cursor:pointer;font-size:12.5px;color:var(--accent);font-weight:600;padding:2px 0}
.linkbtn{border:0;background:none;color:var(--accent);font:inherit;font-size:12.5px;font-weight:600;padding:6px 0 0;cursor:pointer}
.ig{display:inline-block;font-style:normal;font:700 10.5px/1 var(--mono);padding:2px 5px;border-radius:4px;margin-left:4px;vertical-align:1px;color:#fff}
.ig.g-S{background:#7c3aed} .ig.g-A{background:#16a34a} .ig.g-B{background:#65a30d} .ig.g-C{background:#d97706} .ig.g-D{background:#9ca3af}
.infbig{font-family:var(--mono);font-size:18px;margin-left:4px}
.infbars{display:flex;flex-direction:column;gap:4px}
.ib{display:grid;grid-template-columns:56px 1fr 28px;gap:8px;align-items:center;font-size:12.5px}
.ib .bar{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden} .ib .bar i{display:block;height:100%;border-radius:4px}
.ib b{font-family:var(--mono);text-align:right}
.ib.off{opacity:.35}
.infenv{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .infenv span{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--sunk)}
.infenv .eg{background:#ecf7ef;border-color:#cfe8d6;color:#1d5c34} .infenv .eb{background:#fdf3ea;border-color:#f1dcc6;color:#7a4313}
.fits{display:flex;flex-direction:column;gap:4px}
.fr{display:grid;grid-template-columns:118px 1fr 74px;gap:8px;align-items:center;font-size:12.5px;min-height:20px}
.fr>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr>b{white-space:nowrap}
.fr i{font-style:normal;font-size:10.5px;color:var(--muted)} .fr b{font-family:var(--mono);text-align:right;font-size:12px}
.fr .bar{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden} .fr .bar i{display:block;height:100%;border-radius:4px}
.lose{margin-top:6px;font-size:12px;background:var(--warn-soft);border-radius:8px;padding:6px 8px;line-height:1.6}
.ipdet{border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.ipdet summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent)}
.ippre{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.ippre button{border:1px solid var(--line);background:var(--sunk);border-radius:999px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer}
.infnear,.infcnt{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:12px;color:var(--muted);margin-top:6px} .infnear b,.infcnt b{color:var(--ink);font-family:var(--mono)}
.kgrp{margin-bottom:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.kgrp:last-child{margin-bottom:0}
/* 호재·악재: 지도 노선·역·구역 이름표, 팝업, 상세 카드 */
.momlab{display:inline-block;background:#fff;border:2px solid var(--c);border-radius:6px;padding:0 6px;font-size:11.5px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2);color:var(--ink)}
.momlab b{color:var(--c)} .momlab i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.momst{display:inline-flex;align-items:center;gap:3px;background:#fff;border:2px solid var(--c);border-radius:999px;padding:0 6px 0 2px;font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25);line-height:1.5}
.momst b{background:var(--c);color:#fff;border-radius:999px;padding:0 4px;font-size:9.5px;letter-spacing:.02em}
.momst i{font-style:normal;color:var(--muted);font-family:var(--mono);font-size:10px}
.momst.x{border-width:1.5px;font-size:10px;opacity:.9} .momst.x b{background:#fff;color:var(--c);border:1px solid var(--c)}
.momst.est{border-style:dashed} .momst.mini{padding:0 2px} .momst.mini span,.momst.mini i{display:none}
.momz{display:inline-block;font-size:10.5px;font-weight:600;background:rgba(255,255,255,.92);border:1px solid var(--c);color:var(--c);border-radius:4px;padding:0 4px;white-space:nowrap;cursor:pointer}
.momz.cons{border:1.5px solid #dc2626}
.mk-wrap .momlab,.mk-wrap .momst,.mk-wrap .momz{transform:translate(-50%,-50%)}
.ctlegend.momleg{top:auto;bottom:52px;width:auto;max-width:300px}
.momleg .lg{display:flex;align-items:center;gap:6px;margin-top:2px;white-space:nowrap} .momleg .sw2{display:inline-block;width:22px;height:0;border-top:3px dashed #7c3aed}
.momleg .bx{display:inline-block;width:14px;height:10px;border-radius:2px}
.stg{display:inline-block;font-size:10.5px;font-weight:700;border-radius:4px;padding:0 5px;color:#fff;background:#9ca3af;white-space:nowrap}
.stg.st-planned{background:#64748b} .stg.st-confirmed{background:#2563eb} .stg.st-started{background:#ea580c} .stg.st-done{background:#16a34a} .stg.st-cancelled{background:#6b7280;text-decoration:line-through}
.mompop{max-width:300px;white-space:normal} .mompop .mt{font-weight:700;font-size:13px;padding-right:16px;margin-bottom:3px}
.mompop .mr{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:3px}
.mompop ul{max-height:120px} .mompop li{white-space:normal} .mompop a{color:var(--accent)}
.momb{white-space:nowrap} .momb b{color:#7c3aed}
.invb{white-space:nowrap} .invb b{color:#b45309}
#invSec .ib{grid-template-columns:104px 1fr 28px} #invSec .ib span{white-space:nowrap}
#invSec .inv3 .ib{grid-template-columns:84px 1fr 28px 136px;font-size:13px} #invSec .inv3 .bar{height:10px} #invSec .ib em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invband{margin-top:8px;font-size:12.5px;background:var(--sunk);border-radius:8px;padding:6px 8px;line-height:1.6} .invband span{display:block;font-size:11.5px;color:var(--muted)}
#invSec .invx>div>span:last-child{display:flex;flex-wrap:wrap;gap:3px 10px} #invSec .invx .k{flex:0 0 82px} #invSec .invx span.up{color:var(--good);font-weight:600} #invSec .invx span.dn{color:var(--bad);font-weight:600} #invSec .invx small{color:var(--muted);font-weight:400}
.invx{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:12.5px} .invx div{display:flex;gap:6px;align-items:baseline} .invx .k{flex:0 0 72px;color:var(--muted)} .invx .up{color:var(--good);font-weight:700} .invx .dn{color:var(--bad);font-weight:700} .invx .eq{color:var(--muted)}
.railx{margin-top:8px;font-size:12.5px;background:#eef4ff;border-radius:8px;padding:6px 9px;line-height:1.6}
.railx small{color:var(--muted);margin-left:4px} .railx span{display:block;margin-top:2px}
.railx.hi{background:var(--warn-soft)} .railx.lo{background:#e8f5ec}
.pricepos{margin-top:8px;font-size:12.5px;background:var(--sunk);border-radius:8px;padding:6px 8px;line-height:1.6}
.pricepos span{display:block;font-size:11.5px;color:var(--muted)}
.pricepos.hi{background:var(--warn-soft)} .pricepos.hi b:last-of-type{color:var(--warn)}
.pricepos.lo{background:var(--good-soft)} .pricepos.lo b:last-of-type{color:var(--good)}
.idis{margin-top:8px;padding:7px 9px;border-radius:6px;background:#fff7ed;color:#7c2d12;font-size:11.5px;line-height:1.45}
.mitems{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.mref{margin-top:8px}.mref summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:4px 0}.mref .mitems{opacity:.8}
.mi{display:grid;grid-template-columns:22px 1fr auto;gap:6px;align-items:start;font-size:12.5px;padding:4px 0;border-top:1px solid var(--line);cursor:pointer}
.mi:hover{background:var(--sunk)} .mi .ic{text-align:center} .mi .ms{font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center}
.mi .ms a{color:var(--accent)} .mi>b{font-family:var(--mono);font-size:12px;white-space:nowrap} .mi>b.neg{color:var(--bad)}
.mi .old{color:#9ca3af;font-weight:600}
.mi.stale>div,.mi.stale>.ic{opacity:.55} .mi.stale>div>b{color:#6b7280}
.mupd{font-size:11.5px;color:#b45309;margin-top:1px} .mupd a{color:var(--accent)}
.poibar button.momnews{background:#fff7ed;border-color:#f59e0b;color:#92400e;font-weight:600} .poibar button.momnews b{background:#f59e0b;color:#fff;border-radius:999px;padding:0 5px;margin-left:3px;font-size:11px}
.momnewsp{position:absolute;left:10px;top:84px;z-index:660;background:#fff;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);width:min(340px,calc(100% - 20px));max-height:min(60%,420px);overflow:auto;font-size:12.5px;padding:8px 10px}
.momnewsp h3{margin:0 0 4px;font-size:13px;display:flex;align-items:center} .momnewsp h3 button{margin-left:auto;border:0;background:none;font-size:16px;cursor:pointer;color:var(--muted)}
.momnewsp .nw{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:6px 2px;font:inherit;cursor:pointer}
.momnewsp .nw:hover{background:var(--sunk)} .momnewsp .nw small{display:block;color:var(--muted)}
.mtl{margin-top:8px} .mtl svg{width:100%;height:auto;display:block}
.mdis{margin-top:8px;font-size:11.5px;color:var(--muted);background:var(--sunk);border-radius:8px;padding:6px 8px;line-height:1.5}
.kgrp h3{display:flex;align-items:center;gap:6px;font-size:13px;margin:0 0 8px;color:var(--ink)}
.kgrp h3 i{font-style:normal;width:24px;height:24px;border-radius:7px;background:var(--accent-soft);display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.kgrp h3 .note{font-weight:400;margin-left:auto}
.kgrp .kvg{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12.5px}
.kgrp .kvg dt{display:none}
.kgrp .kvg dd{margin:0;background:var(--sunk);border-radius:8px;padding:6px 8px;min-width:0;line-height:1.4}
.kgrp .kvg dd::before{content:attr(data-l);display:block;font-size:10.5px;color:var(--muted);margin-bottom:1px}
.kgrp .kvg dd.wide{grid-column:1/-1}
.kgrp .kvg dd.clip{white-space:normal}
.wfs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wf{display:flex;gap:6px;align-items:center;background:var(--sunk);border-radius:8px;padding:6px 8px;font-size:12.5px}
.wf .ic{font-size:17px} .wf b{display:block;font-weight:600} .wf small{display:block;font-size:10.5px;color:var(--muted);line-height:1.3}
.wf.hi{grid-column:1/-1;background:var(--accent-soft)}
.feeitems{display:flex!important;flex-direction:column;gap:3px;margin:8px 0 4px!important}
.fi{display:grid;grid-template-columns:84px 1fr 60px;gap:6px;align-items:center;font-size:12px}
.fi .bar{height:6px;background:var(--sunk);border-radius:3px;overflow:hidden} .fi .bar i{display:block;height:100%;background:#d4a017;border-radius:3px}
.fi b{font-family:var(--mono);text-align:right}
.feebig{background:linear-gradient(135deg,#fff8e6,#fff);border-radius:10px;padding:8px 10px}
.fchips{display:flex;flex-wrap:wrap;gap:4px} .fchip{font-size:12px;background:var(--sunk);border-radius:999px;padding:1px 8px}
.warnline{color:var(--warn);margin-top:2px}
.feebig{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline}
.feebig b{font-family:var(--mono);font-size:17px} .feebig span{font-size:12px;color:var(--muted)}
.feeitems{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;margin:4px 0 2px} .feeitems b{font-family:var(--mono)}
.kvg{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:12.5px}
.kvg dt{color:var(--muted)} .kvg dd{margin:0;min-width:0}
.kvg dd.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trip .sum b{font-family:var(--mono);font-size:18px}
.leg{display:grid;grid-template-columns:62px 1fr auto;gap:8px;align-items:center;font-size:13px;padding:4px 0;border-bottom:1px dashed var(--line)}
.leg:last-child{border-bottom:0}
.lb{display:inline-block;color:#fff;font-weight:700;font-size:11.5px;border-radius:999px;padding:1px 8px;text-align:center;white-space:nowrap}
.lb.walk{background:#9aa5a1}
.leg .m{font-family:var(--mono);color:var(--muted);font-size:12.5px}
.rlab.tdim,.tripdot.tdim{display:none!important}  /* 다른 경로에 마우스를 올린 동안 숨김 */
.trow.tfoc{border-color:var(--ink)!important;box-shadow:0 1px 6px rgba(0,0,0,.15)}
.tripdot{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #c2410c;box-shadow:0 0 0 3px rgba(194,65,12,.25);transform:translate(-50%,-50%)}
.ttbar{position:absolute;left:10px;right:60px;bottom:52px;z-index:660;max-width:560px;margin:0 auto;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:10px;padding:8px 12px;box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:13px}
.tthead{display:flex;align-items:center;gap:6px} .tthead b{flex:1;min-width:0;color:#5b3a1e}
.tthead button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 10px;font:inherit;font-size:12px;cursor:pointer;flex:none}
#ttRange{display:block;width:100%;margin:6px 0 0;accent-color:#5b3a1e}
.ttscale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)} .ttnote{font-size:11.5px;color:var(--muted)}
.ttd{font-family:var(--mono);font-weight:700} .ttd.up{color:#d6302b} .ttd.dn{color:#1f5fd6}
.mk .ttd{margin-left:4px;padding:0 5px;border-radius:999px;background:#fff;font-size:10.5px} .mk .ttd.eq{color:#5d6864}
.lastdeal{display:block;font-size:10.5px;font-weight:500;color:var(--muted);font-family:var(--font);margin-top:1px}
.trows{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.trow{display:grid;grid-template-columns:10px minmax(0,1.3fr) auto minmax(0,1.6fr);gap:8px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 9px;font:inherit;font-size:12.5px;cursor:pointer}
.trow:hover{border-color:var(--accent)}
.trow i{width:10px;height:10px;border-radius:50%}
.trow .tn{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trow .tn small{font-weight:400;color:var(--muted)}
.trow .tico{font-size:12px;margin-left:2px}
.trow .tm{font-family:var(--mono);font-weight:700}
.trow .td{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttvs{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:0 6px;margin-left:3px;background:var(--sunk);color:var(--muted)}
.ttvs.up{background:#fdecec;color:#c62828} .ttvs.dn{background:#e8f0fd;color:#1d4ed8}
.ttline{font-size:12.5px;margin-top:2px}
.ttbox{background:#fbf6ee;border:1px solid #e8d9c3;border-radius:8px;padding:8px 10px;margin:8px 12px;font-size:13px}
.ttproof{margin:6px 10px;padding:9px 11px;background:#fbf6ee;border:1px solid #e8d9c3;border-radius:10px;font-size:13px;line-height:1.5}
.ttq{font-size:12.5px;margin-top:3px} .ttq .up{color:#d6302b} .ttq .dn{color:#1f5fd6}
.ttbig{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0} .ttbig b{font-size:17px;font-family:var(--mono)} .ttbig .up{color:#d6302b} .ttbig .dn{color:#1f5fd6}
@media (max-width:860px){ .ttbar{left:8px;right:54px;bottom:8px;padding:6px 9px;font-size:12px} #mapWrap.tton .msearch{bottom:118px} }
.mapnote{position:absolute;left:10px;bottom:22px;z-index:600;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;color:var(--muted)}
header{padding:12px 14px 8px;border-bottom:1px solid var(--line)}
h1{font-size:17px;margin:0;letter-spacing:-.01em}
.sub{font-size:12px;color:var(--muted)}
.f{display:grid;grid-template-columns:112px 1fr auto;gap:8px;align-items:center;font-size:13px}
.f label{color:var(--muted);font-weight:600}
.f input[type=range]{width:100%}
.f output{font-family:var(--mono);font-size:12.5px;min-width:54px;text-align:right}
select,button,input{font:inherit;color:var(--ink)}
select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:var(--surface);min-width:0;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.tempgu{width:100%;margin-top:6px;font-size:12px;background:#fff7e0;border:1px solid #f5d27a;border-radius:8px;padding:6px 8px;line-height:1.7}
.tempgu button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:1px 8px;font:inherit;font-size:11.5px;cursor:pointer}
.dongpick{margin-top:8px;font-size:12.5px}
.dongpick summary{cursor:pointer;font-weight:600}
.dongpick summary .note{font-weight:400;margin-left:4px}
.dongpick #dongBox{max-height:280px;overflow:auto;margin-top:6px;padding-right:4px}
.dongpick .dg{margin-bottom:8px}
.dongpick .dgh{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:12px}
.dongpick .dgall{border:1px dashed var(--line);background:none;border-radius:999px;padding:0 8px;font:inherit;font-size:11px;cursor:pointer;color:var(--muted)}
.dongpick .chip{font-size:12px;padding:1px 8px}
.dongpick .chip[aria-pressed="false"]{text-decoration:line-through;color:var(--muted)}
.chip.allchip{border-style:dashed;font-weight:700}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 10px;font-size:12.5px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.toggle{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted)}
.foldbtn{display:none}
@media (min-width:861px){
  .foldbtn{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:8px;right:8px;z-index:7;height:26px;min-width:30px;padding:0 7px;border:1px solid var(--line);background:var(--surface);border-radius:6px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:-2px;cursor:pointer}
  .foldbtn:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
  .side.left>header{padding-right:46px}
  .foldbtn.r{right:auto;left:8px}
  .side.right .summary{padding-left:46px}
  .side.right .detail .dh{padding-left:46px}
  /* 접힌 상태: 버튼이 '펼치기'로 바뀌고 강조 */
  .app.lcol #foldL,.app.rcol #foldR{background:var(--accent);color:#fff;border-color:var(--accent)}
}
.favbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 14px 0}
.fb{border:1px solid #f0c040;background:#fffbea;color:#8a6100;border-radius:999px;padding:3px 10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fb.on{background:#f0b400;color:#fff;border-color:#f0b400} .fb.cmp{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.star{border:0;background:none;padding:0 3px 0 0;font-size:17px;line-height:1;color:#c9a227;cursor:pointer;vertical-align:-1px}
.star[aria-pressed="false"]{color:#b8bfbc} .star:hover{transform:scale(1.2)}
.star.big{font-size:22px}
.star.wide{width:100%;border:1px dashed #f0c040;background:#fffbea;color:#8a6100;border-radius:8px;padding:8px;font:inherit;font-size:13px;font-weight:700}
.favmemo{font-size:11.5px;color:#6b5a1e;background:#fffbea;border-radius:6px;padding:2px 6px;margin-top:3px;display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.favmemo span{background:#f7e3a1;border-radius:4px;padding:0 5px;font-weight:600}
.memo h2{color:#8a6100} .memo textarea{width:100%;box-sizing:border-box;border:1px solid #f0d68a;border-radius:8px;padding:8px;font:inherit;font-size:13.5px;background:#fffdf5;resize:vertical}
.mtags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.lst{margin-top:10px;border-top:1px dashed #f0d68a;padding-top:8px;font-size:13px}
.lsh{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.lsh b{margin-right:4px;color:#8a6100}
.lsh button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 10px;font:inherit;font-size:12px;cursor:pointer}
.lsh button[aria-pressed="true"]{background:#f0b400;border-color:#f0b400;color:#fff;font-weight:700}
.lst table{width:100%;border-collapse:collapse;font-size:12.5px;background:#fffdf5;border-radius:8px}
.lst th{text-align:left;font-weight:600;color:var(--muted);padding:3px 7px;font-size:11.5px}
.lst td{padding:3px 7px;border-top:1px solid #f5e6b8;font-family:var(--mono)}
.lst td:first-child{font-family:var(--font)} .lst td small{color:var(--muted)}
.lst td.z{color:#b9b9b9} .lst td.new{font-weight:700;color:#b45309} .lst td i{font-style:normal;font-size:10.5px;background:#fde68a;border-radius:4px;padding:0 4px;margin-left:2px;font-family:var(--font)}
.lsf{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.lsf a{font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none}
.mtags button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer}
.mtags button[aria-pressed="true"]{background:#f0b400;border-color:#f0b400;color:#fff;font-weight:700}
.memo.off{padding-top:6px;padding-bottom:6px}
.cmpbg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px}
.cmpbg[hidden]{display:none!important}
.cmpbox{background:var(--surface);border-radius:14px;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cmphead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)} .cmphead h2{margin:0;font-size:16px}
.cmphead button{margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:4px 10px;font:inherit;cursor:pointer}
.cmpwrap{overflow:auto;padding:0 6px 10px}
.cmpt{border-collapse:separate;border-spacing:0;font-size:13px}
.cmpt th,.cmpt td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:normal;vertical-align:top;min-width:120px}
.cmpt thead th{position:sticky;top:0;background:var(--surface);z-index:1;text-align:left}
.cmpt tbody th{position:sticky;left:0;background:var(--surface);color:var(--muted);font-weight:600;min-width:90px;white-space:nowrap}
.cmpt td.best{background:var(--good-soft);color:var(--good);font-weight:700}
.cmpt small{display:block;color:var(--muted);font-weight:400}
.cmpgo{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent);cursor:pointer;text-align:left}
.ctag{display:inline-block;background:#f7e3a1;border-radius:4px;padding:0 5px;font-size:11.5px;margin:1px}
.csearch{position:relative;padding:8px 14px 0}
.cqf{display:flex;gap:4px} .cqf button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:0 10px;cursor:pointer;font-size:14px}
.csearch input{flex:1;min-width:0;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13.5px}
.cres{position:absolute;left:14px;right:14px;top:44px;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.15);max-height:320px;overflow:auto}
.cres button{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:7px 10px;font:inherit;font-size:13px;cursor:pointer}
.cres button:hover{background:var(--sunk)} .cres small{color:var(--muted);white-space:nowrap}
.widebtn{position:absolute;top:8px;right:8px;z-index:7;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;font-size:15px!important;line-height:1;border:1px solid var(--line);background:var(--surface);border-radius:6px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.widebtn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.side.right .csearch{padding-right:80px;padding-left:46px}
/* 오른쪽 크게 보기: 화면 가득, 상세는 여러 단으로 */
.side.right.wide{position:fixed!important;inset:0;z-index:2100;width:auto!important;transform:none!important;border:0}
.side.right.wide .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));align-content:start}
.side.right.wide .list .divider{grid-column:1/-1}
/* 크게 보기: 칸 높이가 달라도 빈 곳이 안 생기게 세로로 차곡차곡(신문 단) 채운다. 맨 위 요약·핵심 숫자·맨 아래 링크는 가로 전체 */
.side.right.wide .detail{display:block;column-count:3;column-gap:12px;padding:0 12px 24px;position:relative;inset:auto;height:auto;overflow:visible}
/* 높이를 고정하면 단이 옆으로 넘쳐 숨으므로, 상세는 높이 자동 + 패널 전체가 스크롤. 상세를 볼 땐 목록 쪽은 숨김 */
.side.right.wide{overflow:auto}
body.dopen .side.right.wide :is(.list,.summary,.sortbar,.favbar,#ttProof){display:none}
.side.right.wide .detail>header,.side.right.wide .detail>section.memo,.side.right.wide .detail>section.tldr-all,.side.right.wide .detail>section.stats,.side.right.wide .detail>section.links,.side.right.wide .detail>.ttbox{column-span:all}
.side.right.wide .detail>section{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;box-sizing:border-box;min-width:0;break-inside:avoid;display:block;width:100%}
.side.right.wide .detail>section.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.side.right.wide .detail>section.tldr-all{max-width:none}
@media (max-width:1500px){ .side.right.wide .detail{column-count:2} }
@media (max-width:1000px){ .side.right.wide .detail{column-count:1} }
.side.right.wide #foldR{display:none}
.side.right.wide .csearch{padding-left:14px} .side.right.wide .summary,.side.right.wide .detail .dh{padding-left:14px}
.side.right.wide .widebtn{background:var(--accent);color:#fff;border-color:var(--accent)}
.acct{display:flex;gap:6px;align-items:center;margin-top:4px;font-size:12px}
.acct button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 10px;font:inherit;font-size:12px;cursor:pointer}
.acct button.pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.lnb{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;border-radius:50%;color:#fff;font-style:normal;font-size:10px;font-weight:700;line-height:1;margin-right:2px;vertical-align:1px;font-family:var(--font)}
.lnb.w{border-radius:8px;padding:0 4px;font-size:9.5px}
.lnb:last-of-type{margin-right:4px}
.arank{display:inline-block;font-size:12px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:2px}
.arank small{font-weight:500;opacity:.75;font-size:11px}
.presets #presetBox{display:flex;flex-wrap:wrap;gap:5px}
.presets .pr{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:12.5px;overflow:hidden}
.presets .pr button{border:0;background:none;font:inherit;cursor:pointer;padding:3px 4px 3px 10px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.presets .preup{border:1px solid var(--accent);background:#fff;color:var(--accent);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;margin-left:2px}
.presets .preup:hover{background:var(--accent);color:#fff}
.presets .pr button.x{padding:3px 8px 3px 4px;color:var(--muted);font-size:11px}
.presets .pr.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));font-weight:700}
.sharebtn{display:block;margin-top:8px;width:100%;border:1px solid var(--accent);background:var(--surface);color:var(--accent);border-radius:8px;padding:5px 10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.sharebtn:hover{background:var(--accent);color:#fff}
#shareMsg{display:block;margin-top:4px;color:var(--accent)}
.sharedbar{margin:6px 14px 0;padding:7px 10px;background:#eef6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:12.5px;line-height:1.5}
.sharedbar button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:1px 9px;font:inherit;font-size:11.5px;cursor:pointer;margin-left:4px}
.presets .add{border:1px dashed var(--accent);color:var(--accent);background:none;border-radius:999px;padding:3px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.acct .who{font-weight:700} .acct .st{color:var(--muted)}
.acct button.bell[aria-pressed="true"]{background:#f0b400;border-color:#f0b400;color:#fff;font-weight:700}
.pushbox{margin-top:6px;padding:8px 10px;border:1px solid #f0d68a;background:#fffdf5;border-radius:10px;font-size:12.5px;line-height:1.5}
.pushbox .row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.pushbox button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 11px;font:inherit;font-size:12px;cursor:pointer}
.pushbox button.pri{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.lst .pushon{margin-top:6px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:999px;padding:3px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.busy{position:fixed;inset:0;z-index:4000;background:rgba(255,255,255,.55);backdrop-filter:blur(1.5px);display:flex;align-items:center;justify-content:center;cursor:wait}
.busy[hidden]{display:none!important}
.busybox{background:var(--surface);border-radius:14px;padding:18px 22px;box-shadow:0 8px 28px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:8px;min-width:240px}
.busybox b{font-size:14px} .busybox small{font-size:12px;color:var(--muted)}
.spin{width:34px;height:34px;border-radius:50%;border:4px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bbar{width:200px;height:6px;background:var(--sunk);border-radius:3px;overflow:hidden} .bbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.loginbg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px}
.loginbg[hidden]{display:none!important}
.loginbox{background:var(--surface);border-radius:14px;padding:18px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.loginbox h2{margin:0;font-size:17px}
.loginbox label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600}
.loginbox input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:15px}
.lgbtns{display:flex;gap:6px;flex-wrap:wrap} .lgbtns button{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px;font:inherit;font-weight:600;cursor:pointer}
.lgbtns .pri{background:var(--accent);color:#fff;border-color:var(--accent)}
.lgok{color:var(--good);font-size:12.5px;background:var(--good-soft);border-radius:6px;padding:6px 8px;font-weight:600}
.loginbox[hidden]{display:none}
.lgswitch{margin:0;text-align:center;font-size:12.5px;color:var(--muted)} .lgswitch button{border:0;background:none;color:var(--accent);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.lgerr{color:var(--bad);font-size:12.5px;background:var(--bad-soft);border-radius:6px;padding:6px 8px}
.morebtn{display:block;width:100%;padding:12px;text-align:center}
.sortbar{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:6px 14px 0;font-size:12px;color:var(--muted)}
.sortbar > span{font-weight:600} .sortbar > span small{font-weight:400;margin-left:4px}
.sortbar .seg button.all{font-weight:700}
.orderbar{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:6px 14px 0;font-size:12px;color:var(--muted)}  /* 순위 기준처럼 제목 아래 버튼 */
.orderbar>span{font-weight:600} .orderbar>span small{font-weight:400;margin-left:4px}
.ordbtns{display:flex;gap:4px}
.ordbtns button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:2px 8px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink)}
.ordbtns button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.ordbtns button[data-dir="asc"]::after{content:" ↑"} .ordbtns button[data-dir="desc"]::after{content:" ↓"}
.sortbar .sortsep{align-self:center;font-size:11px;color:var(--muted);margin:0 2px 0 6px;padding-left:8px;border-left:1px solid var(--line)}
.sortbar .seg{display:flex;gap:3px;flex-wrap:wrap} .sortbar .seg button{padding:2px 8px;font-size:12px}
.summary{padding:8px 14px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line)}
.list{overflow:auto;flex:1;min-height:0}
.item{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.item:hover,.item[aria-current="true"]{background:var(--accent-soft)}
.item.out{opacity:.55}
.rk{font-family:var(--mono);font-weight:700;color:var(--accent);font-size:13.5px}
.nm{font-weight:700}
.kv{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--muted);margin-top:2px}
.kv b{color:var(--ink);font-family:var(--mono);font-weight:600}
.kv .kvdim{color:#9aa5a1}
.scp{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.sp{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--sunk);border-radius:999px;padding:1px 3px 1px 8px;font-size:11.5px;line-height:18px}
.sp em{font-style:normal;color:var(--muted)}
.sp b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.sp.noi{padding-right:8px}
.sp i{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;border-radius:999px;min-width:16px;text-align:center;padding:0 4px;background:#8a958f}
.sp.g-S i{background:#7c3aed} .sp.g-A i{background:#16a34a} .sp.g-B i{background:#65a30d} .sp.g-C i{background:#d97706} .sp.g-D i{background:#9ca3af}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:0 7px;border-radius:999px;white-space:nowrap}
.p-good{background:var(--good-soft);color:var(--good)} .p-warn{background:var(--warn-soft);color:var(--warn)} .p-bad{background:var(--bad-soft);color:var(--bad)} .p-neu{background:var(--sunk);color:var(--muted)}
.reasons{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.detail{position:absolute;inset:0;background:var(--surface);z-index:5;overflow:auto}

.detail header{position:sticky;top:0;background:var(--surface);z-index:1;display:flex;gap:10px;align-items:flex-start}
.detail section{padding:10px 14px;border-bottom:1px solid var(--line)}
.detail h2{font-size:14px;margin:0 0 6px}
.close{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:2px 9px;cursor:pointer}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:11.5px}
td.n{font-family:var(--mono)}
tr.sel td{background:var(--accent-soft)}
tbody tr{cursor:pointer}
.tbl{overflow-x:auto}
.note{font-size:12px;color:var(--muted)}
.lkh{font-size:12px;color:var(--muted);margin-bottom:6px}
.lkg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lk{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;text-decoration:none;color:#1b2220;border:1px solid var(--line);background:var(--surface);transition:transform .1s, box-shadow .1s}
.lk:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.12)}
.lk img,.lk i{width:28px;height:28px;border-radius:7px;flex:none;object-fit:contain;display:flex;align-items:center;justify-content:center;font-style:normal}
.lk span{display:flex;flex-direction:column;line-height:1.25;min-width:0} .lk b{font-size:13px} .lk small{font-size:11px;color:var(--muted)}
.lk.naver{background:#eafaf1;border-color:#03c75a} .lk.naver img{background:#fff;padding:2px;box-sizing:border-box;border:1px solid #c9eed8;width:46px}
.lk.kakao{background:#fffbe0;border-color:#f5d800}
.lk.kb{background:#fff6dc;border-color:#ffbc00} .lk.kb i{background:#ffbc00;color:#5a4636;font:900 13px/1 Arial,sans-serif}
.lk.rv{background:#eef4ff;border-color:#93b4f5} .lk.rv img{background:#2563eb;padding:4px;box-sizing:border-box;filter:none}
.mk{background:var(--accent);color:#fff;font-family:var(--mono);font-weight:600;font-size:12px;border-radius:999px;padding:1px 7px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap}
.mk.mid{background:#5f8f84}
.mk.low{background:#fff;color:#6b7471;border:1px solid #c3cbc8;box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:500}
.mk.low .pr{border-left-color:#d5dbd9}
.mk.out{background:#d9dedc;color:#7d8784;border-color:#fff}
.mk.m1,.mk.m2,.mk.m3{border-width:3px;padding:1px 8px;font-size:12.5px}
.mk.m1{border-color:#e0a800;box-shadow:0 0 0 2px rgba(224,168,0,.35),0 2px 6px rgba(0,0,0,.35)}
.mk.m2{border-color:#a9b3bd;box-shadow:0 0 0 2px rgba(169,179,189,.4),0 2px 6px rgba(0,0,0,.35)}
.mk.m3{border-color:#b8733a;box-shadow:0 0 0 2px rgba(184,115,58,.35),0 2px 6px rgba(0,0,0,.35)}
.mk.sel{background:#1d4ed8}
.mk .rkt.medal{font-size:16px;line-height:1;vertical-align:-1px}
.mk .fvs{display:inline-flex;margin-left:1px;vertical-align:-1px} .mk .fvs svg{width:11px;height:11px;filter:drop-shadow(0 0 1px rgba(0,0,0,.45))}  /* 찜한 단지 별 */
.item.r1{box-shadow:inset 4px 0 0 #e0a800} .item.r2{box-shadow:inset 4px 0 0 #a9b3bd} .item.r3{box-shadow:inset 4px 0 0 #b8733a}
.item.beyond{background:#f6f7f6} .item.beyond .nm{color:#5b6461}
.item .rk.medal{font-size:24px;line-height:1.1}
.item .rk{white-space:nowrap}
.mk{position:relative}
.mk .hn{display:none;position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:#1b2220;color:#fff;font:600 12px/1.3 var(--font);padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mk:hover .hn{display:block}
.mk:hover{z-index:9999}
.mk.ghost{display:block;width:12px;height:12px;box-sizing:border-box;padding:0;border:2px solid #fff;background:#6b7471;opacity:.85;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.mk.ghost.pdot{background:#5f8f84;opacity:1}  /* 겹쳐서 점으로 줄인 조건 통과 단지 */
.mk.gname{background:rgba(255,255,255,.92);color:#6b7471;border:1px dashed #9aa5a1;font-weight:500;font-size:11px;padding:1px 6px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.mk.gname:hover{color:#1b2220;border-style:solid}
.mk.ghost:hover{opacity:1;background:#5f6b67;transform:scale(1.4)}
.mk-wrap .mk.ghost{transform:translate(-50%,-50%)}
.mk-wrap .mk.ghost:hover{transform:translate(-50%,-50%) scale(1.4)}
.mk .pr.solo{margin-left:0;padding-left:0;border-left:0}
.mk .pr{margin-left:4px;padding-left:5px;border-left:1px solid rgba(255,255,255,.55);font-weight:700}
.divider{padding:6px 14px;font-size:12px;font-weight:700;color:var(--muted);background:var(--sunk);border-bottom:1px solid var(--line)}
.divider span{font-weight:400;margin-left:4px}
.item.beyond .rk{font-size:12px;color:var(--muted)}
.mk .pr.none{font-weight:400;font-size:10.5px;opacity:.85;font-family:var(--font)}
.trend svg{width:100%;height:auto;display:block;touch-action:pan-y}
.tchart{position:relative}
.ttip{position:absolute;background:rgba(27,34,32,.92);color:#fff;border-radius:8px;padding:6px 9px;font-size:12px;pointer-events:none;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:2}
.ttip .tm{font-weight:700;margin-bottom:2px}
.ttip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.ttip b{font-family:var(--mono);margin:0 3px}
.ttip span{opacity:.7}
.trend .tl{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;margin-top:4px}
.trend .tl i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.tspan{display:flex;align-items:center;gap:4px;margin-bottom:5px;flex-wrap:wrap}
.tspan button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:1px 8px;font:inherit;font-size:12px;cursor:pointer}
.tspan button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tspan small{color:var(--muted);font-size:11px;margin-left:4px}
.ttype{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;margin-bottom:4px;scrollbar-width:thin}
.ttype button{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.ttype button i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.ttype button small{color:var(--muted);font-size:10.5px}
.ttype button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));font-weight:700}
.dealtbl{max-height:196px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:6px;position:relative;overscroll-behavior:contain}
.dealtbl table{width:100%;border-collapse:collapse;font-size:12px}
.dealtbl th{position:sticky;top:0;background:var(--sunk);text-align:left;font-weight:600;padding:5px 7px;z-index:1}
.dealtbl td{padding:4px 7px;border-top:1px solid var(--line);white-space:nowrap;cursor:pointer}
.dealtbl td.num{font-family:var(--mono);text-align:right}
.dealtbl td i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}
.dealtbl td small{color:var(--muted)}
.dealtbl tr.cx td{color:var(--muted);text-decoration:line-through}
.dealtbl tr.ox td{color:#9ca3af;font-style:italic}
.dealtbl tr.on td{background:#fff3c4;font-weight:700}
.tdeal{display:inline-flex;gap:4px;margin-left:6px;vertical-align:1px}
.tdeal button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:1px 8px;font:inherit;font-size:12px;cursor:pointer}
.tdeal button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.err{padding:20px;color:var(--bad)}
.leaflet-div-icon{background:none;border:0}
.mk-wrap{width:0;height:0}.mk-wrap .mk{transform:translate(-50%,-50%);display:inline-block}
.mapsrc{position:absolute;right:10px;bottom:10px;z-index:3;font-size:11px;color:var(--muted);background:rgba(255,255,255,.9);padding:2px 6px;border-radius:6px}
/* ---------- 휴대폰: 겹침 정리 ---------- */
/* 화면 전체는 두 손가락 확대 금지, 지도만 확대 */
html,body{touch-action:pan-x pan-y}
#map,#t3map{touch-action:none}
@media (max-width:860px){
  /* 입력칸 글자가 16px 미만이면 아이폰이 화면을 자동 확대하므로 16px */
  input[type=search],input[type=text],input[type=password],input:not([type]),select{font-size:16px!important}
  /* 지도 위 도구: 한 줄 가로 스크롤 바 두 개(보기 / 시설) */
  .ctbtn{top:8px;padding:4px 9px;font-size:12px;border-radius:7px}
  #t3dBtn{left:8px}
  /* 전체화면 버튼: 지도 오른쪽 아래 작은 아이콘 (확대 버튼·3D 도구와 안 겹치게) */
  .msearch{display:none}  /* 휴대폰은 지도가 좁아 지도 위 단지 찾기는 숨김(목록 위 검색창 사용) */
  .compass{right:8px;bottom:136px;width:46px;height:46px}
  .sunbar{max-width:100%;box-sizing:border-box} .sunbar input[type=range]{width:150px}
  .fsbtn{right:8px;left:auto;top:auto;bottom:44px;width:38px;height:38px;padding:0;font-size:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .fsbtn .pic{width:18px;height:18px;margin:0}
  .fsbtn[aria-pressed="true"]::before{content:"✕";font-size:17px}
  .t3bar{right:8px}
  .poibar{top:42px;left:8px;right:8px;max-width:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .poibar::-webkit-scrollbar{display:none}
  .poibar button{white-space:nowrap;padding:2px 8px;font-size:11.5px;flex:none}
  .poinote{top:42px;left:8px;font-size:11px}
  .ctlegend{top:44px;left:8px;width:160px;font-size:11px;padding:4px 8px} .ctlegend .note{display:none}
  .mapnote{display:none}
  /* 카카오 확대 버튼과 겹치지 않게 오른쪽 여백 */
  .poibar{top:8px} .poibar .ctbtn{position:static;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .poibar{flex-wrap:wrap;overflow:visible;padding-bottom:0} .poibar>.tool,.poibar>.ctbtn{flex:none}
  .poirow{flex-basis:100%;display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:-2px -2px 0} .poirow::-webkit-scrollbar{display:none}
  .poirow .pbr{display:none}
  #compass2d{display:none}  /* 평면 지도는 늘 북쪽이 위 */
  /* 3D 화면 */
  .t3bar{top:8px;left:8px;right:8px;gap:4px} .t3bar .ctbtn{padding:4px 8px}
  .t3ex{padding:2px 4px;font-size:11.5px} .t3ex button{padding:2px 6px}
  .t3leg{top:auto!important;bottom:92px;left:auto;right:8px;width:118px;padding:4px 6px;font-size:10px}
  .t3leg b{font-size:10.5px} .t3leg .ctbar{height:6px;margin:2px 0 1px} .t3leg .ctlab{font-size:9px} .t3leg .ctlab span:nth-child(2),.t3leg .ctlab span:nth-child(4){display:none}
  .t3leg .note{display:none}
  /* 오른쪽 목록 */
  .widebtn{display:none}
  .side.right .csearch{padding:8px 12px 0}
  .summary{flex-wrap:wrap;gap:4px;padding:6px 12px}
  .item{grid-template-columns:34px 1fr;padding:9px 12px}
  .kv{gap:2px 10px}
  /* 상세: 열려 있으면 목록 대신 상세만 */
  .detail{position:relative;inset:auto;overflow:visible}
  .detail header{position:static}  /* 휴대폰은 바로가기 줄만 화면 위에 붙임 */  /* 휴대폰은 페이지가 스크롤(바로가기 줄이 화면 위에 붙게) */
  body.dopen .side.right :is(.list,.csearch,.summary,.favbar,.sortbar,.orderbar,#ttProof){display:none}
  .fscroll{max-height:none;overflow:visible} .side.left{overflow:visible} .side.left>header{position:static}
  .dh{padding:8px 12px}
  .detail section{padding:10px 12px}
  .stats{grid-template-columns:repeat(3,1fr)} .stats .st b{font-size:13px}
  .fr{grid-template-columns:108px 1fr 80px;gap:6px} .fr>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tdeal button{padding:1px 6px}
  .kgrp .kvg{grid-template-columns:1fr}
  .wfs{grid-template-columns:1fr 1fr}
  /* 왼쪽 필터 */
  .seg{flex-wrap:wrap}
  .acct{flex-wrap:wrap}
  .spot .top{flex-wrap:wrap}
}
.sw .swhint{color:var(--muted);font-size:11px;font-weight:400;margin-left:2px}
#invSec .invx span.neu{color:var(--muted);font-weight:400}
.trow .lnb{min-width:17px;height:17px;font-size:11px}
/* 단지 상세 바로가기 (요약·점수·시세…) — 상세가 길어 휴대폰에서 한 번에 이동 */
.djump{position:sticky;top:var(--dhh,0px);z-index:1;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:6px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.djump::-webkit-scrollbar{display:none}
.djump button{flex:none;font-size:12.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.djump button:hover{border-color:var(--accent);color:var(--accent)}
.detail section{scroll-margin-top:calc(var(--dhh,0px) + 46px)}
.side.right.wide .detail>nav.djump{column-span:all;margin:0 0 10px}
/* 첫 방문 안내 (이동거점을 아직 안 넣었을 때 목록 맨 위) */
.guide{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:8px 12px;padding:10px 36px 10px 12px;border-radius:10px;background:var(--accent-soft);border:1px solid #c7ddd6}
.guide b{font-size:14px;color:var(--accent)} .guide span{font-size:12.5px;color:var(--muted);flex:1 1 180px}
.guide .pri{border:0;background:var(--accent);color:#fff;font:inherit;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer}
.guide .gx{position:absolute;right:6px;top:6px;border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;padding:4px}
/* 서비스 이름(로고 + 딱그집) */
h1.brand{display:flex;align-items:center;gap:8px;letter-spacing:-.3px} h1.brand img{border-radius:7px;flex:none}

/* ===== 상업용 화면 (딱그집) : 위 막대 · 부드러운 카드 · 아이콘 버튼 ===== */
:root{--tbh:56px; --bg:#f5f7f6; --line:#e4e8e6; --sunk:#f1f4f2; --muted:#66716d; --radius:12px}
body{font-size:14px;letter-spacing:-.1px}
.topbar{height:var(--tbh);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:1000}
.tb-brand{display:flex;align-items:center;gap:9px;min-width:0}
.tb-brand img{border-radius:8px;flex:none}
.tb-brand h1{font-size:19px;font-weight:700;margin:0;letter-spacing:-.6px;color:var(--ink)}
.tb-tag{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:10px;margin-left:2px;border-left:1px solid var(--line)}
.tb-act{display:flex;align-items:center;gap:6px}
.tb-ic{width:38px;height:38px;border-radius:50%;border:0;background:none;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.tb-ic:hover{background:var(--sunk)}
.tb-ic svg,.tb-login svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb-ic.bell[aria-pressed="true"]{color:var(--accent)}
.tb-ic.bell[aria-pressed="false"]{color:var(--muted)}
#inboxBtn.new::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:#e5484d;border:2px solid var(--surface)}
.tb-menu.inbox{width:min(340px,calc(100vw - 24px));max-height:min(480px,70vh);padding:12px 0 6px;gap:0}
.tb-menu.inbox>b,.tb-menu.inbox>.st{padding:0 14px 8px}
.ibl{overflow:auto;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ibx{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 14px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.ibx:hover{background:var(--sunk)}
.ibx .t{font-size:13px;font-weight:600;min-width:0}
.ibx .w{grid-column:2;grid-row:1;font-size:11.5px;color:var(--muted);white-space:nowrap}
.ibx .b{grid-column:1/-1;font-size:12.5px;color:var(--ink);opacity:.85}
.ibx.new{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.tb-login{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.tb-login svg{width:17px;height:17px}
.tb-login:hover{filter:brightness(1.08)}
.tb-me{position:relative}
.tb-av{width:36px;height:36px;border-radius:50%;border:0;background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.tb-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(20,40,34,.16);padding:12px;display:flex;flex-direction:column;gap:6px;z-index:1100}
.tb-menu b{font-size:14.5px} .tb-menu .st{font-size:12px;color:var(--muted)}
.tb-menu button{margin-top:4px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px;font:inherit;font-size:13px;cursor:pointer}
.tb-menu button:hover{background:var(--sunk)}
.topbar .pushbox{position:absolute;right:12px;top:calc(100% + 6px);width:min(340px,calc(100vw - 24px));margin:0;box-shadow:0 12px 32px rgba(20,40,34,.16);z-index:1100}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#1b2220;color:#fff;padding:10px 16px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5000;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* 왼쪽 조건 패널 */
.side.left>header{padding:10px 16px}
.side.left>header .sub{font-size:12px}
.fs{padding:14px 16px;gap:10px}
.fs h2{font-size:14px;color:var(--ink);font-weight:700;letter-spacing:-.2px}
.fs h2 .note,.row2 .hint{display:none}  /* 제목 옆 회색 설명은 숨김(필요한 설명은 버튼 title) */
.row2 .lbl{font-size:13px;color:var(--muted);font-weight:600}
.seg{gap:6px}
.seg button,.chip{border-radius:999px;border-color:var(--line);padding:6px 13px;font-size:13px;transition:background .12s,border-color .12s}
.seg button:hover,.chip:hover{border-color:#b9c7c2;background:var(--sunk)}
.seg button[aria-pressed="true"],.chip[aria-pressed="true"]{box-shadow:0 1px 3px rgba(31,107,92,.25)}
.seg button[aria-pressed="true"]:hover,.chip[aria-pressed="true"]:hover{background:var(--accent)}
.spot,.dsearch input,.csearch input,.cqf button{border-radius:10px}
.active{background:var(--surface);padding:10px 16px}
.sharebtn{border-radius:10px;padding:8px 10px}
/* 오른쪽 목록 */
.side.right{background:var(--bg)}
.csearch,.favbar,.sortbar,.orderbar{background:var(--surface)}
.csearch{padding:12px 16px 0} .favbar{padding:8px 16px 0} .sortbar,.orderbar{padding:8px 16px 0}
.summary{background:var(--surface);padding:10px 16px}
.list{padding:10px 10px 16px;display:flex;flex-direction:column;gap:8px}
.item{background:var(--surface);border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;transition:box-shadow .15s,border-color .15s}
.item:hover,.item[aria-current="true"]{background:var(--surface);border-color:#9fc4b8;box-shadow:0 4px 14px rgba(20,60,50,.10)}
.item.r1{box-shadow:inset 4px 0 0 #e0a800} .item.r2{box-shadow:inset 4px 0 0 #a9b3bd} .item.r3{box-shadow:inset 4px 0 0 #b8733a}
.item.beyond{background:var(--surface)}
.list .divider{margin:6px 4px 0}
.rkwait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 16px;color:var(--muted);font-size:13px;font-weight:600}
.guide{margin:0}
@media (max-width:860px){
  .topbar{padding:0 12px}
  .tb-tag{display:none}
  .list{padding:8px}
}
/* 선 아이콘 */
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:5px;flex:none}
.ic.s{width:18px;height:18px;margin:0;vertical-align:middle}
.cqf button{display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
@media (max-width:860px){
  body.foldshut #activeSum{display:none}
  .mobile-fold>summary{display:flex;align-items:center;justify-content:center;gap:2px;margin:10px 12px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;list-style:none;box-shadow:0 1px 3px rgba(0,0,0,.05)}
  .mobile-fold>summary::-webkit-details-marker{display:none}
  .mobile-fold>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:-3px 0 0 8px;transition:transform .15s}
  .mobile-fold[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
}

#rvP{position:fixed;inset:0;z-index:3000;background:var(--surface);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#rvP[hidden]{display:none}
#rvP .rvh{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
#rvP .rvh b{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rvP .rvh a{font-size:13px;color:var(--muted)}
#rvP .rvh button{border:0;background:none;font-size:20px;padding:4px 8px;cursor:pointer;color:inherit}
#rvB{flex:1;min-height:0;position:relative;--mw:min(42vw,300px);--mh:min(26vh,190px)}
#rvV,#rvM{position:absolute;inset:0}
/* 작은 화면: 기본은 지도, '바꾸기'면 로드뷰 */
#rvP:not(.swap) #rvM,#rvP.swap #rvV,.rvctl{inset:auto;right:12px;bottom:12px;width:var(--mw);height:var(--mh)}
#rvP:not(.swap) #rvM,#rvP.swap #rvV{border-radius:10px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.35);border:2px solid #fff;z-index:5}
.rvctl{position:absolute;z-index:6;pointer-events:none}
.rvctl button{pointer-events:auto;position:absolute;cursor:pointer;border:1px solid #93b4e3;background:#e8f1fd;color:#123a6b;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.rvctl .rsz{left:-10px;top:-10px;width:26px;height:26px;border-radius:50%;padding:0;cursor:nwse-resize;display:grid;place-items:center;touch-action:none}
.rvctl .swp{right:6px;top:6px;border-radius:999px;padding:3px 9px 3px 7px;font:inherit;font-size:12px;font-weight:600;display:flex;align-items:center;gap:3px}
.rvctl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#rvMsg{position:absolute;left:0;right:0;top:0;z-index:4;padding:24px;text-align:center;color:var(--muted);background:var(--surface)}

/* 버스정류장 점·정보 카드·노선도 */
.bdot{position:relative;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--c);cursor:pointer;transition:transform .12s}
.bdot::before{content:"";position:absolute;inset:-6px;border-radius:50%}  /* 누르기 쉬운 범위 */
.bdot:hover{transform:scale(1.45)}
#map.bdense .bdot:not(.on){width:5px;height:5px;border-width:1.5px}  /* 축소해서 정류장이 촘촘하면 작게(방향 '>>' 가 보이게) */
/* 고른 정류장: 크게 + 노선 색 고리 + 퍼지는 고리 + 이름표 */
.bdot.on{width:20px;height:20px;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 3px var(--c),0 3px 10px rgba(0,0,0,.4);cursor:default}
.bdot.on:hover{transform:none}
.bdot.on::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--c);animation:bpulse 1.6s ease-out infinite;pointer-events:none}
@keyframes bpulse{from{transform:scale(.6);opacity:.9}to{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.bdot.on::after{display:none}}
.bnm{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--c);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.3);pointer-events:none}
.bnm.l{left:auto;right:calc(100% + 10px)}
/* 노선 위 정류장 이름(겹치지 않는 곳만): 지도 글자에 묻히지 않게 흰 바탕 + 노선 색 테두리 */
.bnl{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;line-height:18px;padding:0 6px;color:#1b2220;background:#fff;border:1.5px solid var(--c);border-radius:6px;
  white-space:nowrap;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.28)}
.bnl.r{left:calc(100% + 5px)} .bnl.l{right:calc(100% + 5px)}
/* 노선 방향 '>>'(선 안) */
.barrow{width:11px;height:6px;line-height:0;pointer-events:none}
.barrow svg{display:block;width:11px;height:6px}
#busCard{position:absolute;left:16px;top:-22px;z-index:20;width:min(320px,70vw);max-height:260px;cursor:default;text-align:left;white-space:normal;overflow:auto;background:var(--surface);color:var(--ink,inherit);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.2);padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.buspin{position:relative;width:0;height:0}
#busCard.flip{left:auto;right:16px}
#busCard .bch{display:flex;align-items:center;gap:8px}
#busCard .bch b{flex:1;min-width:0;font-size:14px}
#busCard .bch span{color:var(--muted);font-size:12px}
#busCard .bcx{border:0;background:none;font-size:16px;cursor:pointer;color:inherit;padding:2px 4px}
#busCard .bcs{display:flex;flex-wrap:wrap;gap:5px}
#busCard .bn2{border:1.5px solid var(--c);color:var(--c);background:transparent;border-radius:6px;padding:2px 7px;font-weight:700;font-size:12px;cursor:pointer}
#busCard .bn2.on{background:var(--c);color:#fff}
#busCard .bcr{color:var(--muted)}
#busTip{position:absolute;z-index:21;pointer-events:none;background:#1f2a44;color:#fff;font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}

.mvtag{display:inline-block;background:#fee2e2;color:#b91c1c;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;margin-left:4px;white-space:nowrap;vertical-align:middle}
.mvrow{margin-top:4px}.mvrow .mvtag{margin-left:0;font-size:12px}
#busCard.dock{left:12px;top:96px;margin:0}
#map.busfocus .mk{display:none!important}

.cmpbox{width:min(1100px,100%)}
#cmpBody{overflow:auto;padding:0 0 6px}
.cpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:12px 16px 6px}
.cpick button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.cpick button[aria-pressed="true"]{border-color:var(--ink);font-weight:700}
.cpick button:disabled{opacity:.45;cursor:default}
.cdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;vertical-align:middle;margin-right:4px}
.cctl{display:flex;flex-wrap:wrap;gap:8px 14px;padding:4px 16px 10px;border-bottom:1px solid var(--line)}
.cctl .seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.csec{padding:12px 16px;border-bottom:1px solid var(--line);min-width:0}
.csec h3{margin:0 0 8px;font-size:14.5px}.csec h3 small{font-weight:400;color:var(--muted);font-size:12px;margin-left:6px}
.cverdict{margin:0 0 10px;line-height:1.7;max-width:75ch}
.ctally{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.ctally span{border:1.5px solid var(--c);border-radius:999px;padding:3px 10px;font-size:13px}
.clead{border-collapse:collapse;width:100%;font-size:13px}
.clead th,.clead td{border-top:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
.clead th{font-weight:600;width:34%}.clead small{display:block;color:var(--muted);font-weight:400;font-size:11.5px}
.clead td.cw{white-space:nowrap;font-weight:700;width:1%}
.cret td.gu,.cret th.gu{color:var(--muted)}
.cchart{position:relative}
.clegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;margin-bottom:4px}
.clegend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.cplot{position:relative}.cplot svg{width:100%;height:240px;display:block;touch-action:pan-y}
.ctip{position:absolute;top:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.12);pointer-events:none;white-space:nowrap}
.ctip .tm{font-weight:700;margin-bottom:2px}.ctip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.cbars{display:flex;gap:6px;align-items:flex-end;height:130px}
.cb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;min-width:0}
.cbs{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.cbs i{flex:1;max-width:14px;min-height:1px;border-radius:2px 2px 0 0}
.cb small{color:var(--muted);font-size:11px}
@media (max-width:600px){
  .clead tr{display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--line);padding:6px 0}
  .clead th,.clead td{border:0;padding:2px 4px}
  .clead th{grid-column:1/-1;width:auto}
  .clead tr{grid-template-columns:1fr}.clead td{min-width:0}.clead td.cw{display:none}  /* 휴대폰: 앞선 단지가 줄 맨 앞이라 오른쪽 칸은 뺌 */
  .cpick,.cctl,.csec{padding-left:12px;padding-right:12px}
}
.memo h2 .refav{margin-left:auto;width:auto;height:auto;font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:8px;padding:2px 9px;background:var(--surface);color:var(--ink);cursor:pointer}
.memo h2:has(.refav){display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.memo h2 .refav{white-space:nowrap;flex:none}.memo h2:has(.refav) .note{order:3;flex-basis:100%;margin:0}
.cdash{display:inline-block;width:16px;height:0;border-top:2px dashed var(--c);opacity:.75;margin-right:5px;vertical-align:middle}
.clegend i.cdash{height:0;background:none}
.cret thead small{display:block;color:var(--muted);font-weight:400;font-size:11px}
.cmphead #cmpFull{margin-left:auto}.cmphead #cmpFull+#cmpClose{margin-left:0}
.cmpbg.full{padding:0}.cmpbg.full .cmpbox{width:100%;max-width:100%;height:100%;border-radius:0}
.cmpbg.full .cchart .cplot svg{height:300px}
/* 비교 표: 첫 칸(항목 이름)은 좁게, 단지 칸은 같은 너비 */
#cmpBody .cmpt{table-layout:fixed;width:100%}
#cmpBody .cmpt th:first-child{width:120px;min-width:0}
#cmpBody .cmpt td,#cmpBody .cmpt thead th:not(:first-child){min-width:0;overflow-wrap:anywhere}
@media (max-width:600px){#cmpBody .cmpt{table-layout:auto;width:auto}#cmpBody .cmpt td,#cmpBody .cmpt thead th{min-width:110px}}
.lsa{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0}
.lsa button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer}
.lsa button small{color:var(--muted);margin-left:2px}
.lsa button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.lsa button[aria-pressed="true"] small{color:#fff;opacity:.8}
.lst tr.off td{opacity:.4}
.lsa .lsr{border:0;background:none;color:var(--accent);padding:0 2px;font-size:11.5px;text-decoration:underline}

/* ===== 버튼·정렬 통일 =====
   버튼은 한 모양(둥근 알약, 같은 높이·글자)으로, 고른 것은 초록 채움.
   조건 고르기 버튼은 같은 너비 칸에 줄 맞춰 놓고, 탭·면적처럼 개수가 많은 줄은 한 줄로 옆으로 밀어 보기. */
:root{--pill-h:30px;--pill-fs:13px}
@media (max-width:860px){:root{--pill-h:34px;--pill-fs:13.5px}}
:is(.seg,.tspan,.ttype,.tdeal,.djump,.mtags,.lsh,.lsa,.poibar,.cctl,.chips) button,.chip,.fb{
  min-height:var(--pill-h);padding:0 12px;border-radius:999px;font:inherit;font-size:var(--pill-fs);line-height:1.15;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;box-sizing:border-box;transition:background .12s,border-color .12s}
:is(.seg,.tspan,.tdeal,.mtags,.lsh,.lsa,.poibar,.cctl,.chips) button[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);font-weight:600}
.poibar button.momnews{font-weight:600}
/* 조건 고르기: 같은 너비 칸 */
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:6px}
.seg button{white-space:normal;text-align:center;padding:4px 8px}
.seg[data-for="basis"]{grid-template-columns:1fr}
.spot .seg.sm{grid-template-columns:repeat(2,1fr)}
.smax{display:flex;flex-direction:column;align-items:stretch;gap:4px} .smax>span{font-size:12px;color:var(--muted)}
.smax .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px} .smax .seg button{padding:0 4px;font-size:12.5px}
#guChips{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
#guChips>*{width:100%}
/* 순위 기준·정렬 */
.sortbar,.orderbar{align-items:stretch}
.sortbar .seg,.orderbar .seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:5px;width:100%}
.sortbar .seg button,.orderbar .seg button{padding:0 6px;font-size:12.5px}
/* 한 줄 밀어 보기 */
.ttype,.djump,.mtags,.lsa{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none}
:is(.ttype,.djump,.mtags,.lsa)::-webkit-scrollbar{display:none}
:is(.ttype,.djump,.mtags,.lsa)>*{flex:none}
.mtags{margin-bottom:8px}
.lsa{align-items:center} .lsa>.note:first-child{font-weight:600;color:var(--ink)}
.lsh{flex-wrap:wrap;gap:6px}
.tspan{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px} .tspan small{flex-basis:100%;margin:0}
.tdeal{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle} .tdeal button{font-weight:600}
/* 목록 카드: 이름 한 줄, 단지 정보 다음 줄, 점수 2×2 */
.item .nm{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;line-height:1.3}
.item .nm>.sub{flex-basis:100%;font-weight:400;font-size:12px;color:var(--muted);margin:0}
.scp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:6px;max-width:320px}
.sp{justify-content:space-between;padding:2px 4px 2px 10px;line-height:20px}
.sp b{margin-left:auto}
.item .reasons{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.item .reasons .pill{line-height:22px;padding:0 9px}
.kv{gap:3px 12px;margin-top:4px}
.kv>span{white-space:nowrap}
@media (max-width:860px){
  .poibar{gap:6px;align-items:center}
  .poibar button,.poibar .ctbtn{min-height:32px;padding:0 11px;font-size:12.5px}
  .djump{padding:8px 12px}
  .detail .dh{align-items:flex-start}
}
/* 버튼 개수에 맞춘 칸 수(한 개만 아랫줄로 떨어지지 않게) */
/* (칸 수는 app.js segCols 가 data-n 에 버튼 개수를 넣어 정함 — :has 는 단지가 많을 때 화면 다시 그리기를 크게 느리게 함) */
.seg[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.seg[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.seg[data-n="4"]{grid-template-columns:repeat(4,1fr)}
.seg[data-n="5"]{grid-template-columns:repeat(5,1fr)}
.seg[data-n="6"]{grid-template-columns:repeat(3,1fr)}
.seg[data-n="7"],.seg[data-n="8"]{grid-template-columns:repeat(4,1fr)}
.seg[data-n="5"] button{padding:2px 2px;font-size:12.5px}
.seg button small{font-size:10.5px;opacity:.75}
.ordbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:100%;max-width:240px}
.ordbtns button{min-height:var(--pill-h);border-radius:999px;font-size:12.5px;padding:0 8px}
/* PC 지도 위: 단지 찾기는 위 줄 오른쪽(전체화면 왼쪽), 시설 버튼 줄과 안 겹치게 */
@media (min-width:861px){
  .msearch{top:10px;right:170px;width:min(230px,calc(100% - 440px))}
  .poibar{max-width:calc(100% - 70px);gap:5px}
  .poibar button{min-height:28px;padding:0 10px;font-size:12.5px}
}
.seg.seg[data-for="basis"]{grid-template-columns:1fr}
.mtags.mtags,.lsa.lsa{flex-wrap:wrap;overflow:visible} .lsa>.note:first-child{flex-basis:100%}
/* 목록 카드 점수(맞춤·인프라·호재·투자)는 한 줄 */
.scp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:none}
.sp{gap:2px;padding:1px 2px 1px 6px;font-size:11px;min-width:0}
.sp em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sp i{min-width:15px;padding:0 3px;font-size:10px}
.scp{display:flex;flex-wrap:nowrap;gap:4px} .scp>.sp{flex:1 1 auto} .sp em{overflow:visible}
@media (max-width:370px){ .sp{font-size:10.5px;padding-left:5px} .sp i{min-width:13px;padding:0 2px} }
/* 상세 상단 요약: 가격 → 점수 한 줄 → 정보 표 → 네이버 */
.stats{display:flex;flex-direction:column;gap:10px}
.dprice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dp{background:var(--sunk);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dp>span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp>b{font-family:var(--mono);font-size:19px;line-height:1.2}
.dp>b .lastdeal,.dp>b small{display:block;font-family:var(--font);font-size:11px;font-weight:400;color:var(--muted)}
.dp.good{background:var(--good-soft)} .dp.good>b{color:var(--good)}
.dp.warn{background:var(--warn-soft)} .dp.warn>b{color:var(--warn)}
.dp:only-child{grid-column:1/-1}
.stats .reasons{display:flex;flex-wrap:wrap;gap:5px}
.dsc{max-width:none} .dsc .sp{font:inherit;font-size:12.5px;cursor:pointer;padding:3px 4px 3px 10px;line-height:20px;color:inherit}
.dsc .sp:hover{border-color:var(--accent)}
.dfacts{display:grid;grid-template-columns:auto 1fr;margin:0;border-top:1px solid var(--line);font-size:13px}
.dfacts dt,.dfacts dd{padding:7px 0;border-bottom:1px solid var(--line);margin:0;min-width:0}
.dfacts dt{color:var(--muted);padding-right:14px;white-space:nowrap}
.dfacts dd{text-align:right;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:2px 4px}
.dfacts dd b{font-family:var(--mono);font-weight:700}
.dfacts dd small{flex-basis:100%;text-align:right;color:var(--muted);font-size:11px}
@media (min-width:1100px){ .side.right.wide .dfacts{grid-template-columns:auto 1fr auto 1fr;column-gap:14px} }
.stats .busline{margin:0}
.dnaver{display:flex;align-items:center;justify-content:center;min-height:38px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;text-decoration:none}
.dnaver:hover{border-color:var(--accent);color:var(--accent)}
/* 휴대폰 끌어올리기 손잡이 */
.sheetbtn{display:none}
@media (max-width:860px){
  #mapWrap{transition:height .3s ease}
  body.listup #mapWrap{height:0;overflow:hidden}
  .side.right{position:relative;border-top:0;border-radius:18px 18px 0 0;margin-top:-18px;z-index:5;background:var(--surface);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
  body.listup .side.right{margin-top:0;border-radius:0;box-shadow:none}
  .sheetbtn{display:flex;align-items:center;justify-content:center;width:100%;height:30px;border:0;background:none;cursor:pointer;padding:0}
  .sheetbtn i{width:12px;height:12px;border-left:3px solid var(--muted);border-top:3px solid var(--muted);border-radius:2px;transform:rotate(45deg);margin-top:6px;transition:transform .25s}
  body.listup .sheetbtn i{transform:rotate(225deg);margin-top:-6px}
  body.dopen .sheetbtn{display:none}
}
@media (max-width:860px){ body.listup .sheetbtn{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)} }
/* 길찾기 숨기기: '길찾기 보기'(.tripgo)와 같은 모양·크기, 흰 바탕 보조 버튼 */
.tripoff{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;padding:9px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.tripoff:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:860px){ #mapWrap{z-index:1} }  /* 지도 안 잠금 막(z 640)이 겹친 목록 손잡이를 덮지 않게 */
/* 상세 정문 로드뷰(다른 서비스 버튼 위) */
.rvbox{position:relative;isolation:isolate;height:220px;border-radius:12px;overflow:hidden;background:var(--sunk);margin-bottom:12px}  /* isolation: 안쪽 글씨·버튼(z 2)이 위에 고정된 제목 줄 위로 비치지 않게 */
.rvbox #rvIn{position:absolute;inset:0}
.rvbox .rvbig{position:absolute;right:8px;top:8px;z-index:2;border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;cursor:pointer}
.rvbox .rvcap{position:absolute;left:8px;top:8px;z-index:2;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:3px 10px;pointer-events:none}
@media (max-width:860px){ .rvbox{height:200px} }
/* 지도 '내 위치' 버튼·파란 점 */
.locbtn{left:auto;right:8px;top:auto;bottom:40px;width:38px;height:38px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:950}
.locbtn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.locbtn[aria-pressed="true"]{background:var(--surface);border-color:#2563eb} .locbtn[aria-pressed="true"] svg{stroke:#2563eb} .locbtn[aria-pressed="true"] svg circle:first-child{fill:#2563eb}
.locbtn.wait svg{animation:locw 1s linear infinite} @keyframes locw{50%{opacity:.3}}
.medot{width:16px;height:16px;border-radius:50%;background:#2563eb;border:3px solid #fff;box-shadow:0 0 0 6px rgba(37,99,235,.22),0 1px 4px rgba(0,0,0,.3)}
.mk-wrap .medot{transform:translate(-50%,-50%)}
@media (max-width:860px){ .locbtn{bottom:90px} }
/* 끌어서 넘기는 줄 */
@media (hover:hover){ :is(.ttype,.djump,.tabsx,.cpick){cursor:grab} :is(.ttype,.djump,.poibar,.tabsx,.cpick).dragging{cursor:grabbing;user-select:none} :is(.ttype,.djump,.poibar,.tabsx,.cpick).dragging *{pointer-events:none} }
/* 크게 보기(목록·상세 넓게): 상단 요약은 세로 묶음 그대로, 가격 칸은 넓게, 점수 줄은 적당한 폭 */
.side.right.wide .detail>section.stats{display:flex;flex-direction:column;gap:12px}
.side.right.wide .dprice{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.side.right.wide .dsc{max-width:720px}
.side.right.wide .dfacts{grid-template-columns:auto 1fr auto 1fr;column-gap:24px}
.side.right.wide .rvbox{height:min(520px,60vh)}
.side.right.wide .stats>.rvbox{grid-column:1/-1;justify-self:start;width:min(100%,720px)}  /* 크게 보기: 너무 넓으면 로드뷰 양옆이 흐리게 늘어나 폭을 줄임 */
/* 단지 비교 조절 버튼: 묶음마다 한 줄, 버튼은 글자 폭 */
.cctl{align-items:center}
.cctl .seg{display:flex;flex-wrap:wrap;gap:5px;grid-template-columns:none}
.cctl .seg button{flex:none;padding:0 12px;font-size:13px;white-space:nowrap}
.cctl .seg+.seg{padding-left:14px;border-left:1px solid var(--line)}
@media (max-width:860px){ .cctl .seg+.seg{padding-left:0;border-left:0} }
.side.right.wide .dfacts dd{justify-content:flex-start;text-align:left}
.side.right.wide .dfacts dd small{text-align:left}
body.dopen .side.right.wide :is(.orderbar,.csearch){display:none}
/* PC: 내 위치 버튼은 나침반 바로 위(겹치지 않게) */
@media (min-width:861px){ .locbtn{right:22px;bottom:102px} }
/* 지도 위 버튼이 밝은 지도에 묻히지 않게: 테두리 진하게, 그림자 또렷하게 */
.poibar button,.ctbtn,.locbtn,.msearch input,.msearch .cqf button{border-color:#b8c4bf;box-shadow:0 2px 6px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.04)}
.poibar button:not([aria-pressed="true"]):not(.momnews),.ctbtn:not([aria-pressed="true"]),.locbtn{background:#fff;color:#1b2220}
.poibar button[aria-pressed="true"]{box-shadow:0 2px 6px rgba(31,107,92,.4)}
/* 크게 보기 버튼: 스크롤 막대와 겹치지 않게 안쪽으로, 상세 제목은 버튼 자리만큼 비움 */
@media (min-width:861px){ .widebtn{right:18px;top:10px} .detail .dh{padding-right:52px} .csearch{padding-right:52px} }
/* 넓은 화면 상단 요약: 왼쪽에 가격·점수, 오른쪽에 정보 표 → 빈 공간 줄임 */
@media (min-width:1100px){
  .side.right.wide .detail>section.stats{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.6fr);column-gap:28px;row-gap:10px;align-items:start}
  .side.right.wide .stats>.dprice,.side.right.wide .stats>.reasons,.side.right.wide .stats>.dsc{grid-column:1}
  .side.right.wide .stats>.dfacts{grid-column:2;grid-row:1/span 3;grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);column-gap:16px;border-top:0}
  .side.right.wide .stats>.busline,.side.right.wide .stats>.dnaver,.side.right.wide .stats>.rvbox{grid-column:1/-1}
  .side.right.wide .dprice{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .side.right.wide .dsc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
}
/* 접은 패널 펼치기 버튼(지도 가장자리) */
.unfold{display:none}
@media (min-width:861px){
  .unfold{position:absolute;top:50%;z-index:960;transform:translateY(-50%);width:26px;height:64px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25);padding:0}
  .unfold.l{left:0;border-radius:0 10px 10px 0} .unfold.r{right:0;border-radius:10px 0 0 10px}
  .app.lcol .unfold.l,.app.rcol .unfold.r{display:flex}
}
.smax .seg{grid-template-columns:repeat(4,1fr)}
.smaxin{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-top:6px}
.smaxin input{width:76px;min-height:32px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font:inherit;font-size:14px;text-align:right;color:var(--ink);background:var(--surface)}
/* 지도 위 찾기: 평소엔 돋보기만, 누르면 입력칸 */
@media (min-width:861px){
  .msearch{width:auto}
  .msearch:not(.open) input{display:none}
  .msearch.open{width:min(280px,calc(100% - 440px))}
  .msearch .cres{left:auto;right:0;width:min(340px,70vw);max-height:420px}
}
.cres .mpl{border-top:2px solid var(--line)}
.plpin{transform:translateY(calc(-50% - 7px));background:#e11d48;color:#fff;border-radius:8px;padding:3px 9px;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3);position:relative}
.plpin::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#e11d48}
#compass3d{cursor:grab}
body.t3on #locBtn,body.t3on #satBtn{display:none!important}
/* 3D 방향 돌리기 안내: 나침반 옆 작은 표시 + 열 때 가운데 큰 안내(잠깐) */
.t3key{position:absolute;right:80px;bottom:52px;z-index:910;display:flex;align-items:center;gap:4px;padding:3px 10px 3px 7px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:12px;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.15);pointer-events:none;white-space:nowrap}
.t3key .pic{width:14px;height:14px;margin:0}
.t3key kbd,.t3tip kbd{font:inherit;font-family:var(--mono);font-size:.88em;font-weight:700;padding:0 5px;border-radius:4px;border:1px solid currentColor;margin-right:1px}
.t3tip{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:915;display:flex;align-items:center;gap:12px;max-width:min(440px,calc(100% - 32px));padding:14px 18px;border-radius:14px;background:rgba(27,34,32,.9);color:#fff;font-size:15px;line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,.3);pointer-events:none;transition:opacity .4s}
.t3tip.out{opacity:0}
.t3tip .pic{width:30px;height:30px;flex:none;margin:0;filter:brightness(1.6)}
.t3tip small{display:block;font-size:12.5px;opacity:.75;margin-top:2px}
@media (max-width:860px){ .t3key{right:60px;bottom:147px;font-size:11px} .t3tip{font-size:14px;top:38%} }
.mk-wrap .plpin{transform:translate(-50%,calc(-100% - 7px))}
/* PC 지도 찾기 버튼: 위 줄 버튼(3D·시간여행·전체화면)과 같은 크기·모양, 전체화면 바로 왼쪽 */
@media (min-width:861px){
  .msearch{top:10px;right:146px}
  .msearch .cqf{gap:6px;align-items:center}
  .msearch .cqf button{width:38px;height:34px;min-height:34px;padding:0;border-radius:8px;border:1px solid #b8c4bf;background:var(--surface);display:flex;align-items:center;justify-content:center}
  .msearch .cqf button svg{width:17px;height:17px;margin:0}
  .msearch input{height:34px;box-sizing:border-box;border-radius:8px}
  .msearch .cres{top:42px}
}
/* 직접 입력 칸: 한 덩어리 알약 모양, 위아래 화살표 없음 */
.smaxin{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:0 14px 0 4px;min-height:34px;border:1px solid var(--accent);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;width:max-content}
.smaxin input{width:48px;min-height:30px;border:0;outline:0;background:none;padding:0 4px;font:inherit;font-size:15px;font-weight:700;text-align:right;color:var(--accent);-moz-appearance:textfield}
.smaxin input::-webkit-outer-spin-button,.smaxin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.smaxin span{color:var(--muted)}
@media (min-width:861px){ .msearch .cqf button{border:1px solid #b8c4bf!important;box-shadow:0 2px 6px rgba(0,0,0,.22)!important;background:#fff!important} }
/* PC 지도 시설 버튼: 학교 묶음(어린이집~대학교)은 둘째 줄 */
.pbr{display:none}
@media (min-width:861px){ .poibar .pbr{display:block;flex-basis:100%;height:0} }
/* 접는 칸(전세·월세일 때 호재·투자가치, 상세의 맞춤·인프라·학군·관리비): 첫 제목(h2, 관리비는 h3)을 누르면 펼치기/접기 */
[data-fold]>:is(h2,h3):first-child{cursor:pointer;user-select:none}
[data-fold]>:is(h2,h3):first-child::after{content:"접기 ▴";margin-left:auto;padding-left:8px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
[data-fold].shut>:is(h2,h3):first-child::after{content:"펼치기 ▾";color:var(--accent)}
[data-fold]>h2{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
[data-fold].shut>:not(:first-child){display:none!important}
.kgrp[data-fold]>h3::after{margin-left:0}  /* 관리비 제목은 부과 연월(.note)이 오른쪽으로 밀어 줌 */
.kgrp[data-fold].shut>h3{margin-bottom:0}
/* 순위 기준·정렬 접기 */
.sortbar .rkhead{display:flex;align-items:center;gap:2px;width:100%}
.rksum{font-weight:600;color:var(--ink)}
.rkfold{margin-left:auto;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:2px 0}
.rkfold::after{content:"접기 ▴"} body.rankshut .rkfold::after{content:"펼치기 ▾";color:var(--accent)}
body.rankshut .rkhead{cursor:pointer}
body.rankshut .sortbar .seg,body.rankshut .orderbar{display:none}
/* 사이드바 펼칠 때 내용이 천천히 나타남 */
@keyframes paneIn{from{opacity:0}to{opacity:1}}
.side.unfolding>*{animation:paneIn .5s ease both}
/* 거점 최대 시간: 30분·1시간·직접(+입력칸) 한 줄 */
.smax .seg{display:flex;gap:5px;align-items:center}
.smax .seg>button{flex:1 1 0;min-width:0}
.smax .seg>.smaxin{margin:0;flex:none;padding:0 10px 0 2px}
.smax .seg>.smaxin input{width:38px}
/* 입력칸은 늘 같은 자리에(누를 때마다 줄이 바뀌지 않게), 직접입력일 때만 초록 테두리 */
.smax .seg>.smaxin{border-color:var(--line)} .smax .seg>.smaxin.on{border-color:var(--accent)}
.smax .seg>.smaxin:not(.on) input{color:var(--muted);font-weight:500}
.smax .seg>button{padding:0 4px}
/* 지도 위 버튼: 흰색 대신 옅은 초록 바탕·진한 글씨로 지도와 구분 */
.poibar button:not([aria-pressed="true"]),.ctbtn:not([aria-pressed="true"]),.locbtn:not([aria-pressed="true"]),.msearch .cqf button{background:#e4efea!important;border-color:#8fb3a5!important;color:#163f33!important}
.poibar button:not([aria-pressed="true"]):hover,.ctbtn:not([aria-pressed="true"]):hover,.msearch .cqf button:hover{background:#d3e6de!important}
.locbtn svg{stroke:#163f33}
/* 주변 정류장 */
.bstops{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bstop{border:1px solid #bcd3f5;background:#fff;border-radius:999px;min-height:30px;padding:0 11px;font:inherit;font-size:12.5px;font-weight:600;color:#1e3a8a;cursor:pointer}
.bstop small{font-weight:400;color:var(--muted);margin-left:2px}
.bstop:hover{border-color:#2563eb}
/* 호갱노노 */
.lk.hg{background:#f1efff;border-color:#7c6cf0} .lk.hg i{background:#5b4ee0;color:#fff;font:900 14px/1 sans-serif}
/* 넓게 보기: 두 단으로(오른쪽 빈 단 없게), 로드뷰는 적당한 높이 */
.side.right.wide .detail{column-count:2!important}
.side.right.wide .rvbox{height:400px}
/* 지도 위 버튼: 파란 계열 */
.poibar button:not([aria-pressed="true"]),.ctbtn:not([aria-pressed="true"]),.locbtn:not([aria-pressed="true"]),.msearch .cqf button{background:#e8f1fd!important;border-color:#93b4e3!important;color:#123a6b!important}
.poibar button:not([aria-pressed="true"]):hover,.ctbtn:not([aria-pressed="true"]):hover,.msearch .cqf button:hover{background:#d5e5fa!important}
.poibar button[aria-pressed="true"],.ctbtn[aria-pressed="true"]{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;box-shadow:0 2px 6px rgba(37,99,235,.4)!important}
.locbtn svg{stroke:#123a6b}
.locbtn[aria-pressed="true"] svg{stroke:#fff} .locbtn[aria-pressed="true"] svg circle:first-child{fill:#fff}  /* 켜면 파란 바탕 위 흰 아이콘 */
.msearch input{border-color:#93b4e3}
@media (min-width:861px){ .fsbtn{right:10px} }  /* 확대 버튼이 왼쪽 아래로 가서 오른쪽 위가 비었음 → 전체화면·찾기를 오른쪽 끝으로 */
/* 3D 화면 높이 과장·햇빛 날짜: 조건 버튼용 격자 대신 한 줄 알약 */
.t3ex,.sunbar .seg{display:flex;flex-wrap:nowrap;align-items:center;gap:3px;width:auto}
.t3ex{border-radius:999px;padding:3px 4px 3px 10px}
.t3ex button,.sunbar .seg button{flex:none;white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:12px;line-height:1.3}
.t3ex span{white-space:nowrap;font-size:12px}
.t3ex button[aria-pressed="true"]{background:#5b3a1e;color:#fff;border-color:#5b3a1e;box-shadow:none}
@media (max-width:860px){
  .t3bar{flex-wrap:wrap}
  .t3ex{padding:2px 3px 2px 8px} .t3ex span{font-size:11px}
  .t3ex button,.sunbar .seg button{padding:2px 8px;font-size:11.5px}
}
@media (max-width:860px){ .t3leg{left:8px!important;right:auto!important} }
/* 지도 보기 도구(3D 언덕·시간여행·호재)는 시설 버튼(파랑)과 다른 보라 계열 + 구분선 */
.poibar button.tool:not([aria-pressed="true"]),.ctbtn.tool:not([aria-pressed="true"]){background:#f1ecfe!important;border-color:#b6a3ec!important;color:#3f2a8c!important}
.poibar button.tool:not([aria-pressed="true"]):hover,.ctbtn.tool:not([aria-pressed="true"]):hover{background:#e4dafd!important}
.poibar button.tool[aria-pressed="true"],.ctbtn.tool[aria-pressed="true"]{background:#6d4ae0!important;border-color:#6d4ae0!important;color:#fff!important;box-shadow:0 2px 6px rgba(109,74,224,.4)!important}
.tool .ic{stroke:currentColor}
.psep{flex:none;align-self:center;width:1px;height:20px;background:#93b4e3;margin:0 3px}
@media (min-width:861px){ .psep{height:22px} }
/* 3D 높이 과장: 다른 지도 버튼과 같은 파란 테마·높이 */
.t3ex{background:#e8f1fd!important;border:1px solid #93b4e3!important;height:34px;box-sizing:border-box;padding:0 3px 0 10px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.t3ex span{color:#123a6b;font-weight:600;font-size:13px}
.t3ex button{height:26px;padding:0 10px;font-size:12.5px;font-weight:600;border:0!important;background:transparent!important;color:#123a6b!important}
.t3ex button[aria-pressed="true"]{background:#2563eb!important;color:#fff!important}
.t3bar .ctbtn{height:34px;box-sizing:border-box;display:inline-flex;align-items:center;border-radius:999px}
@media (max-width:860px){
  .t3bar .ctbtn,.t3ex{height:32px;font-size:12.5px} .t3bar .ctbtn{padding:0 11px}
  .t3ex{padding:0 3px 0 9px} .t3ex span{font-size:12px} .t3ex button{height:24px;padding:0 8px;font-size:12px}
}
.poibar button.tool:not([aria-pressed="true"]),.ctbtn.tool:not([aria-pressed="true"]){background:#ece4ff!important;border-color:#9d84e8!important;color:#3b1f8a!important}
.psep{background:#7d8fb3}
/* PC 3D: 위쪽 버튼 줄이 오른쪽 찾기·전체화면에 닿지 않게, 확대 버튼은 그 아래로 */
@media (min-width:861px){
  .t3bar{right:150px}
  #mapWrap .maplibregl-ctrl-top-right{top:44px}
}
/* segFit 이 버튼 글자 폭을 잴 때만 잠깐 */
.segm .seg button{white-space:nowrap!important;width:max-content!important;min-width:0!important}
.dfacts dd .dsep{color:var(--muted)}
.rvdir{width:80px;height:80px;pointer-events:none;transition:transform .08s linear} .rvdir svg{width:100%;height:100%;display:block}
.dfacts dd .hht{white-space:nowrap}
.tb-menu a.adm{display:block;padding:6px 2px;color:var(--accent);font-size:13px;font-weight:600;text-decoration:none}
/* 저장 조건 안 업데이트 버튼(조건을 바꿨을 때만) */
.presets .pr .up{border:0;background:#f59e0b;color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer;height:22px;border-radius:999px;padding:0 9px 0 3px;margin:0 2px;display:inline-flex;align-items:center;gap:4px;flex:none;max-width:none;box-shadow:0 1px 4px rgba(245,158,11,.5);animation:preupPulse 1.6s ease-in-out infinite}
.presets .pr .up i{font-style:normal;width:16px;height:16px;border-radius:50%;background:#fff;color:#d97706;display:grid;place-items:center;font-size:11px;font-weight:900;line-height:1}
.presets .pr .up:hover{background:#d97706;animation:none}
@keyframes preupPulse{0%,100%{box-shadow:0 1px 4px rgba(245,158,11,.5)}50%{box-shadow:0 0 0 4px rgba(245,158,11,.25)}}
@media (prefers-reduced-motion:reduce){ .presets .pr .up{animation:none} }
/* 점수 알약: 칸에 맞춰 늘리지 않고 글자 크기만큼(이름 · 점수 · 등급이 붙어 보이게) */
.scp,.side.right.wide .dsc{display:flex;flex-wrap:wrap;gap:4px 5px}
.scp>.sp{flex:0 0 auto;justify-content:flex-start;gap:4px}
.scp>.sp b{margin-left:0}
/* 종합 점수 알약: 맨 앞, 테두리 진하게 */
.sp.all{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.sp.all em{color:var(--accent);font-weight:700}
/* 점수 알약 5개(종합 포함)도 한 줄 */
.scp{flex-wrap:wrap;gap:3px}  /* 아주 좁은 폰은 겹치지 않게 다음 줄로 */
.scp>.sp{gap:3px;padding:1px 2px 1px 6px;flex:0 0 auto;min-width:auto}
.scp>.sp em{white-space:nowrap}
@media (max-width:420px){ .scp>.sp{font-size:10.5px;padding-left:5px;gap:2px} .scp>.sp i{min-width:13px;padding:0 2px;font-size:9.5px} }
/* 목록 카드 점수 줄: 다섯 개가 한 줄에 들어가게 조금 더 촘촘히(아주 좁은 폰만 두 줄) */
#list .scp{gap:2px}
#list .scp>.sp{font-size:10.5px;padding:1px 2px 1px 5px;gap:2px}
#list .scp>.sp i{min-width:13px;padding:0 2px;font-size:9.5px}
#list .scp>.sp em{font-size:10px;letter-spacing:-.3px}
#list .scp>.sp{padding-right:1px}
/* 위성지도 버튼: 내 위치 버튼 바로 위 */
.satbtn{bottom:136px}
@media (min-width:861px){ .satbtn{bottom:148px} }
.satbtn[aria-pressed="true"] svg{stroke:#fff!important}
/* 상세 상단: 접기 » · 뒤로 ← · 크게 ⛶ 를 같은 크기 아이콘 버튼으로, 제목 첫 줄과 같은 높이에 */
@media (min-width:861px){
  .side.right .detail .dh{display:flex;align-items:flex-start!important;gap:10px;padding:12px 66px 12px 56px}
  .side.right.wide .detail .dh{padding-left:14px}
  .dh .close,#foldR,.widebtn{width:32px;height:32px;min-width:32px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
    display:inline-flex;align-items:center;justify-content:center;font-size:15px!important;font-weight:600;letter-spacing:0;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.06);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
  .dh .close{flex:none;font-size:17px!important}
  #foldR{top:12px;left:14px} .widebtn{top:12px;right:24px}  /* 오른쪽 스크롤 막대와 붙지 않게 조금 안쪽 */
  .side.right.wide .widebtn{position:fixed}  /* 크게 보기는 화면 전체라, 내려도 닫기 버튼이 같이 올라가 사라지지 않게 */
  .dh .close:hover,#foldR:hover,.widebtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  .dh h1{line-height:32px}
  .dh .sub{margin-top:0}
}
/* 목록 상단(찾기 줄): 접기 » · 찾기칸 · 돋보기 · 크게 ⛶ 를 같은 32px 높이·같은 간격으로, 찜·비교 줄은 찾기칸 왼쪽 끝에 맞춤 */
@media (min-width:861px){
  .side.right .csearch{padding:12px 66px 0 56px}
  .side.right .csearch .cqf{gap:6px;align-items:center}
  .side.right .csearch input{height:32px;padding:0 12px;border-radius:9px}
  .side.right .csearch .cqf button{height:32px;width:40px;padding:0;border-radius:9px;flex:none}
  .side.right .favbar{padding:10px 58px 0 56px;gap:6px}
  .side.right.wide .csearch,.side.right.wide .favbar{padding-left:14px}
}
/* 사이드바 접기 버튼: 왼쪽·오른쪽 같은 모양(32px 아이콘 버튼), 아이콘은 패널 모양 */
.pnl{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:861px){
  #foldL{top:10px;right:12px;width:32px;height:32px;min-width:32px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);letter-spacing:0;box-shadow:0 1px 2px rgba(0,0,0,.06)}
  #foldL:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  .unfold .pnl{width:16px;height:16px;stroke:#fff}
}
/* 왼쪽 머리줄: 요약 글자 + 접기 버튼을 한 줄(버튼이 머리줄 밖으로 나가지 않게) */
@media (min-width:861px){
  .side.left>header{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;min-height:52px;box-sizing:border-box}
  .side.left>header .sub{flex:1;min-width:0}
  .side.left>header #foldL{position:static;order:2;flex:none;margin-left:auto}
}
/* 비교 머리줄: 링크 공유는 오른쪽 버튼 무리(창으로·닫기) 맨 앞에 */
.cmphead #cmpShare{margin-left:auto}
.cmphead #cmpShare+#cmpFull{margin-left:0}
/* 비교 머리줄: 저장 · 링크 공유 · 창으로 · 닫기 를 오른쪽에 */
.cmphead #cmpSave{margin-left:auto} .cmphead #cmpSave+#cmpShare{margin-left:0}
/* 저장한 비교 목록·보기 */
.rplist{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.rpi{display:flex;align-items:stretch;gap:6px}
.rpo{flex:1;min-width:0;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px}
.rpo:hover{border-color:var(--accent)} .rpo b{font-size:14px;overflow-wrap:anywhere} .rpo small{color:var(--muted);font-size:12px}
.rpx{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:40px;cursor:pointer;color:var(--muted)}
.rphead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.rphead button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;font:inherit;cursor:pointer;color:var(--ink)}
.rphead .rplive{margin-left:auto;background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
/* 알림 머리줄: '알림 표시' 글자 없이 전세·매매·평·㎡ 를 제목과 한 줄에 */
.lsh{flex-wrap:nowrap}
.lsh b{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.lsh button{flex:none}
@media (max-width:860px){ .lsh{gap:4px} .lsh b{font-size:13px} .lsh button{padding:0 9px;min-height:30px;font-size:12.5px} }
/* 찜 전세·매매 나눠 보기, 저장 조건·비교의 거래 종류 꼬리표 */
.fbseg{display:inline-flex;gap:4px;flex-wrap:wrap}
.fb[aria-pressed="true"]{background:#f0b400;color:#fff;border-color:#f0b400}
.presets .pr .pdl{font-style:normal;font-size:10.5px;font-weight:700;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:0 4px;margin-right:5px;vertical-align:1px}
.rptabs{display:flex;gap:6px;padding:14px 16px 0}
.rptabs button{border:1px solid var(--line);background:var(--surface);color:var(--fg,inherit);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.rptabs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.rpd{font-style:normal;font-size:11px;font-weight:700;border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:1px;background:var(--accent-soft);color:var(--accent)}
.rpd.S{background:#fdecec;color:#c0392b}
/* 아이폰 사파리(iOS 26)는 맨 위 상태바 영역을 페이지 바탕색으로 칠하고 아래로 번지게 흐린다.
   바탕(연회색)이 흰 로고 줄 위에 번져 흐려 보이므로, 휴대폰에서는 바탕을 로고 줄과 같은 흰색으로 */
@media (max-width:860px){
  html,body{background:var(--surface)}
  .topbar{padding-top:env(safe-area-inset-top,0px);height:calc(var(--tbh) + env(safe-area-inset-top,0px))}
  .app{background:var(--bg)}
}
/* 점수 등급 배지: 세로로 늘어난 알약 대신 같은 크기 동그라미 */
.sp i{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;min-width:0;padding:0;line-height:1;border-radius:50%;flex:none;font-size:10px}
.dsc .sp i{width:19px;height:19px;font-size:10.5px}
@media (max-width:370px){ .sp i{width:15px;height:15px;font-size:9.5px} }
/* '순위 밖 숨기기'를 켰을 때 흐린 점: 순위 안 단지가 눈에 띄도록 더 작고 옅게 */
.mk.ghost.faint{width:7px;height:7px;border-width:1px;background:#8a938f;opacity:.45;box-shadow:none}
.mk.ghost.faint:hover{opacity:1;transform:scale(1.8)}
.mk-wrap .mk.ghost.faint:hover{transform:translate(-50%,-50%) scale(1.8)}
.mk.gname.faint{opacity:.55;font-size:10px;box-shadow:none}
/* 직접 그린 아이콘(편의점·버스 정류장): 글자 높이에 맞춘 크기 */
.pic{width:1.25em;height:1.25em;vertical-align:-.28em;margin-right:3px;flex:none;display:inline-block}
.poi.cvs .pic{width:15px;height:15px;margin:0;vertical-align:middle}
/* 네이버 매물·시세: 네이버 초록 + N 로고 */
.dnaver{gap:8px;background:#03c75a;border-color:#03c75a;color:#fff;font-weight:700}
.dnaver svg{width:14px;height:14px;flex:none}
.dnaver.off{background:var(--surface);border-color:var(--line);color:var(--muted);font-weight:600}
.dnaver:hover{background:#02b351;border-color:#02b351;color:#fff}
/* 상세 '역 도보': 지하철 그림 대신 그 역의 노선 표시 */
.dfacts .dst{display:inline-flex;gap:2px;margin-right:5px;vertical-align:-1px}
/* 상세 정보: 노선 표시도 다른 칸 아이콘과 같은 크기·여백(글자 시작이 같은 줄에) */
.dfacts .dst{gap:2px;margin-right:3px;vertical-align:-.28em}
.dfacts .dst .lnb{margin-right:0;font-size:.8em;min-width:1.5625em;height:1.5625em;vertical-align:0}
/* 커뮤니티·단지 내 시설: 직접 그린 아이콘 */
.wf .ic{display:inline-flex;width:22px;height:22px;flex:none}
.wf .ic svg{width:100%;height:100%}
.wf .ic{stroke:none;fill:initial;stroke-width:initial;margin:0;vertical-align:middle}
.wf .ic{font-size:18px;align-items:center;justify-content:center;line-height:1}
/* 알림 머리줄: 평·㎡ 를 전세·매매 바로 옆에(오른쪽 끝으로 밀지 않음), 사이에 얇은 구분선 */
/* 가입 동의 · 탈퇴 · 지도 출처 */
.loginbox label.lgagree{flex-direction:row;align-items:flex-start;gap:7px;font-weight:500;font-size:12.5px;line-height:1.45}
.loginbox .lgagree input{width:16px;height:16px;margin:1px 0 0;padding:0;flex:none;accent-color:var(--accent)}
.loginbox .lgagree a{color:var(--accent)}
.lgbtns .pri.danger{background:#c0392b;border-color:#c0392b}
.tb-menu a.adm[href="/legal.html"]{color:var(--muted);font-weight:500;font-size:12px}
.tb-menu button.bye{border:0;background:none;color:var(--muted);font-size:12px;padding:2px;margin-top:0;text-align:left;text-decoration:underline}
.mapcredit{position:absolute;right:6px;bottom:4px;z-index:5;font-size:10.5px;color:#444;background:rgba(255,255,255,.75);padding:1px 6px;border-radius:4px;text-decoration:none;pointer-events:auto}
@media (max-width:860px){ .mapcredit{right:auto;left:6px;bottom:30px;font-size:10px} }
/* 비교: 동별로 보면 · 약점 · 공유받은 비교 */
.cdg{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:var(--surface)}
.cdg>summary{cursor:pointer;padding:9px 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style-position:inside}
.cdg>summary span{color:var(--muted);font-size:12.5px}
.cdg .cmpwrap{padding:0 8px 8px;overflow-x:auto}
.cdong th small{color:var(--accent);font-weight:600;margin-left:3px}
.cdong tr.best td,.cdong tr.best th{background:var(--accent-soft)}
.cwk{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.cwk>div{border:1px solid var(--line);border-top:3px solid var(--c);border-radius:10px;padding:10px 12px;background:var(--surface);min-width:0}
.cwk ul{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.55}
.cwk li{margin:3px 0}
.cshared{margin:10px 16px 0;padding:10px 12px;border-radius:10px;background:var(--accent-soft);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cshared button{border:0;background:var(--accent);color:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
/* 처음 온 사람: 한 화면 시작 */
.onbbg{position:fixed;inset:0;background:rgba(15,30,25,.42);z-index:3100;display:flex;align-items:center;justify-content:center;padding:16px}
.onbbox{position:relative;background:var(--surface);border-radius:16px;padding:22px 20px 16px;width:100%;max-width:460px;max-height:calc(100dvh - 32px);overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.onbbox h2{margin:0;padding-right:28px;font-size:18px;line-height:1.35;text-wrap:balance;word-break:keep-all}
.onbbox section{display:flex;flex-direction:column;gap:8px}
.onbbox h3{margin:0;font-size:14px;display:flex;align-items:center;gap:8px}
.onbbox h3 i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:12px}
.onbx{position:absolute;right:10px;top:10px;border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;padding:6px}
.onbsearch{position:relative}
.onbsearch input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px}
.onbsearch .dres{position:static;margin-top:4px;max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}
.onbsearch .dres button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:var(--surface);padding:8px 10px;font:inherit;font-size:14px;cursor:pointer}
.onbsearch .dres button small{display:block;color:var(--muted);font-size:12px}
.onbpick{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:var(--accent-soft)}
.onbpick b{flex:1;min-width:0;font-size:14.5px;color:var(--accent)}
.onbpick button{border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer}
.onbseg{display:flex;flex-wrap:wrap}
.onbgus{display:flex;flex-wrap:wrap;gap:5px}
.onbgus .chip{font-size:12.5px;padding:4px 9px}
.onbnote{margin:0;font-size:12px;color:var(--muted)}
.onbarea{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.onbarea button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 4px;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.onbarea button b{font-size:13.5px}
.onbarea button small{font-size:11px;color:var(--muted);text-align:center}
.onbarea button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.onbgo{border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:15.5px;font-weight:700;padding:13px;border-radius:12px;cursor:pointer}
.onbgo:disabled{opacity:.5;cursor:default}
.onbskip{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;padding:2px;margin-top:-8px}
@media (max-width:420px){.onbarea{grid-template-columns:repeat(2,1fr)}}
/* 학군 */
.edu{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:6px 0 0;font-size:13.5px}
.edu dt{color:var(--muted);font-weight:600;white-space:nowrap}
.edu dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.edu .edn{flex-basis:100%;font-size:12px;color:var(--muted)}
.edu .pill{font-size:11.5px}
.edu .edk{font-size:12px;color:var(--muted);background:var(--sunk);border-radius:6px;padding:1px 6px;white-space:nowrap}
.edu .edk.eg{color:var(--good);background:var(--good-soft)}
.eduwhy{margin-top:4px}
#rvIn{touch-action:none}  /* 상세 아래 로드뷰: 끌면 화면이 움직이지 않고 로드뷰만 돈다 */
.lgwhy{font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-soft, rgba(31,111,209,.08));border-radius:6px;padding:7px 9px}
.lgwhy[hidden]{display:none}
.gwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.gwrap[hidden]{display:none}
#gBtn{min-height:44px}
.gnote{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45;text-align:center} .gnote a{color:var(--accent)}
.gor{display:flex;align-items:center;gap:8px;width:100%;font-size:12px;color:var(--muted)} .gor::before,.gor::after{content:"";flex:1;border-top:1px solid var(--line)}
.tb-menu .glink{display:flex;flex-direction:column;gap:4px;padding-top:6px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.loginbox label[hidden]{display:none}
.lnchips{flex-wrap:wrap;gap:4px} .lnchips .chip{padding:4px 9px}
.invdisc{margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.45} .invdisc a{color:inherit}
.pinarea{display:flex;flex-direction:column;gap:10px}
.pinarea[hidden]{display:none}
.pinarea .pri{border:0;border-radius:8px;padding:10px;font:inherit;font-weight:700;background:var(--accent);color:var(--accent-ink);cursor:pointer}
.tb-menu .acid{display:flex;align-items:center;gap:8px;min-width:0;padding-bottom:6px;border-bottom:1px solid var(--line)} .tb-menu .acid b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .glogo{width:18px;height:18px;flex:none}
.tb-upd{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:46vw;border:0;border-radius:999px;padding:7px 13px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(20,40,34,.18)}
.tb-upd span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-upd[hidden]{display:none}
.tb-upd + .tb-act{margin-left:8px}
.topbar{position:sticky;top:0}
@media (max-width:860px){ body{height:auto;min-height:100%} }  /* 휴대폰: 맨 위 줄(sticky)이 스크롤 내내 붙어 있게 body 높이를 화면에 묶지 않음 */
.tb-upd em{font-style:normal}
.tb-brand h1,.tb-login{white-space:nowrap}
@media (max-width:860px){ .tb-upd{padding:7px 11px;font-size:12.5px} .tb-upd em{display:none} }
.presets .pr .dirty{width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25);flex:none;margin:0 4px}
#filtersPane > header{position:sticky;top:0;z-index:20;background:var(--surface)}
#filtersPane > header .sub:empty{display:none}
#filtersPane > header .tb-upd{margin-left:0;max-width:none;flex:1;justify-content:center}
@media (max-width:860px){ #filtersPane > header{top:calc(var(--tbh) + env(safe-area-inset-top,0px))} }
@media (max-width:860px){
  #filtersPane > header{position:static;padding:0;border:0;min-height:0}
  /* 휴대폰: '조건 설정' 줄 안 오른쪽(app.js 가 버튼을 이 줄로 옮김). 제목은 가운데 그대로 */
  .mobile-fold>summary{position:relative}
  .mobile-fold>summary:has(> .tb-upd.dirty:not([hidden])){justify-content:flex-start;padding-left:16px}  /* 버튼이 있으면 제목은 왼쪽으로(좁은 폰에서 붙지 않게) */
  .mobile-fold>summary .tb-upd{position:absolute;right:6px;top:50%;transform:translateY(-50%);margin:0;max-width:none;flex:none;padding:6px 10px;font-size:12.5px;font-weight:700;gap:4px}
}
/* 로고 맞춤 테마: 노랑은 조건 업데이트 버튼·바뀐 조건 점·브랜드 글자에만 */
.tb-brand h1{color:var(--brand-ink)}
.tb-upd{background:var(--brand);color:var(--brand-ink);box-shadow:0 2px 10px rgba(245,185,0,.35)}
.tb-upd:hover{background:#e6ad00}
.presets .pr .dirty{background:var(--brand);box-shadow:0 0 0 3px rgba(245,185,0,.3)}
/* 선호 호선: 지하철 노선도처럼 노선색 원(숫자 노선) · 둥근 띠(이름 노선). 고르면 진초록 테두리, 안 고른 건 흐리게(하나라도 골랐을 때) */
.lnchips .chip.lnc{padding:3px;border:2px solid transparent;background:none;border-radius:999px;min-width:0}
.lnd{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#fff;font-style:normal;font-size:14px;font-weight:700;line-height:1}
.lnd.w{width:auto;padding:0 10px;border-radius:14px;font-size:12px}
.lnchips .chip.lnc[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.lnchips:has([aria-pressed="true"]) .chip.lnc[aria-pressed="false"] .lnd{opacity:.4}
.lnchips .chip.lnc:hover .lnd{opacity:1}
.seg.multi.lnchips{display:flex;flex-wrap:wrap;gap:4px;grid-template-columns:none} .lnchips .chip.lnc{flex:none;width:auto}
/* 새 노선도처럼 모든 노선을 같은 크기 원으로: 이름 노선은 원 안 1~2줄 글자 */
.lnd.t1,.lnd.t2{width:30px;height:30px;padding:0;border-radius:50%;letter-spacing:-.6px}
.lnd.t1{font-size:9.5px} .lnd.t2{font-size:9px;line-height:1.02;text-align:center}
.lnd{width:30px;height:30px}
/* 조건 칸 맨 위 저장 상태 */
#presetUp.saved{background:var(--accent-soft);color:var(--accent);box-shadow:none;cursor:default}
#presetUp.save{background:var(--surface);color:var(--accent);border:1.5px dashed var(--accent);box-shadow:none}
#presetUp.save:hover{background:var(--accent-soft)}
@media (max-width:860px){ #presetUp:not(.dirty){display:none} }  /* 휴대폰은 떠 있는 버튼이라 '업데이트'만 */
/* 선호 호선: 흐리게 하지 않고 고른 것만 테두리 */
.lnchips:has([aria-pressed="true"]) .chip.lnc[aria-pressed="false"] .lnd{opacity:1}

/* 로그인 창: 깃허브처럼 이메일·비밀번호 + Google (로그인 · 회원가입 · 재설정) */
.loginbox.lgclean{position:relative;padding:28px 24px 22px;max-width:380px;gap:0}
.lgview{display:flex;flex-direction:column;gap:12px}
.lgview[hidden]{display:none}
.lglogo{width:44px;height:44px;border-radius:11px;align-self:center}
.lgclean h2{font-size:20px;text-align:center;letter-spacing:-.01em;margin:0}
.lgclean .lgwhy{background:none;padding:0;margin:-4px 0 0;font-weight:500;color:var(--muted);text-align:center}
.lgsub{margin:-2px 0 2px;font-size:13px;color:var(--muted);text-align:center;line-height:1.5}
.lgclean label.fld{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.lgclean .fl{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lgclean .fl i{color:var(--bad);font-style:normal;margin-left:-6px;margin-right:auto}
.lgclean input{border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:15px;font-weight:400;background:var(--surface);width:100%}
.lgclean input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lgclean small{font-size:11.5px;font-weight:400;color:var(--muted);line-height:1.45}
.lgclean small:empty{display:none}
.lgclean small.ok{color:var(--good)} .lgclean small.bad{color:var(--bad)}
.lgpri{border:0;border-radius:8px;background:var(--accent);color:#fff;font:inherit;font-size:15px;font-weight:700;padding:11px;cursor:pointer;margin-top:2px}
.lgpri:hover{filter:brightness(1.08)} .lgpri:disabled{opacity:.6;cursor:default}
.lgor{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.lgor::before,.lgor::after{content:"";flex:1;height:1px;background:var(--line)}
.lgor[hidden],.gbtn[hidden]{display:none}
.gbtn{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:8px;background:var(--sunk);color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;padding:10px;cursor:pointer}
.gbtn:hover{background:var(--surface);border-color:#c3cac1}
.gbtn svg{width:18px;height:18px;flex:none}
.lgalt{border:1px solid var(--line);border-radius:8px;background:var(--surface);font:inherit;font-size:14px;padding:10px;cursor:pointer}
.lnk{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.lnk:hover{text-decoration:underline}
.lgfoot{margin:6px 0 0;text-align:center;font-size:13px;color:var(--muted)} .lgfoot .lnk{font-size:13px}
.lgclean .gnote{margin:0;font-size:11.5px;text-align:left;line-height:1.5}
.lgok{background:var(--good-soft);color:var(--good);border-radius:8px;padding:9px 11px;font-size:13px;line-height:1.5}
.lgok[hidden]{display:none}
.lgx{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:15px;cursor:pointer;z-index:1}
.lgx:hover{background:var(--line)}
@media (max-width:480px){ .loginbg{align-items:flex-end;padding:0} .loginbox.lgclean{max-width:none;border-radius:16px 16px 0 0;max-height:92vh;overflow-y:auto;padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px))} }

/* 그림 아이콘(icons.js)이 들어간 버튼·제목: 글자 크기 0 인 동그란 버튼 등에서도 크기 유지 */
.widebtn .pic{width:15px;height:15px;margin:0}
.rvbig .pic,#cmpFull .pic{width:14px;height:14px}
.kgrp h3 i .pic{margin:0}
#presetUp i .pic{margin:0;width:15px;height:15px}
.mi .ic .pic{margin:0}

/* 조건 칸: 핵심 5칸(거래·예산 · 지역 · 면적 · 이동거점 · 역까지) 아래 '상세 조건 설정' 하나로 접기 */
details.fs.more{gap:0}
details.fs.more[open]{gap:9px}
details.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);user-select:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"펼치기 ▾";margin-left:auto;font-size:12px;font-weight:600;color:var(--accent)}
details.more[open]>summary::after{content:"접기 ▴";color:var(--muted)}
details.more>h3{margin:8px 0 -2px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;font-weight:700;color:var(--accent)}
details.more>.fs.sub{padding:12px 0 2px;border-bottom:0;border-top:1px dashed var(--line);margin-top:6px}
details.more>.fs.sub h2{font-size:13px}
.presets #presetBox .pnote{flex-basis:100%;font-size:12px;color:var(--muted);margin-top:2px}

/* 단지 상세 머리줄 오른쪽: 이 단지 링크 공유 */
.dh .dshare{flex:none;margin-left:auto;width:32px;height:32px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.dh .dshare svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dh .dshare:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* 휴대폰: 상세 바로가기 줄이 위 고정 줄(로고·로그인) 바로 아래에 붙게(가려지지 않게) */
@media (max-width:860px){
  .djump{top:calc(var(--tbh) + env(safe-area-inset-top,0px))}
  .detail section{scroll-margin-top:calc(var(--tbh) + env(safe-area-inset-top,0px) + 46px)}
}

/* 이동거점 카드: 위 줄 = 작은 대중교통·자차 + 지우기(×), 고른 장소는 알약이 아니라 장소 줄(아이콘·이름·바꾸기), '최대' 글자 없음 */
.spot .top{justify-content:space-between}
.spot .top .seg.sm{display:flex;flex:none;gap:4px;grid-template-columns:none}
.spot .top .seg.sm button{flex:none;min-height:0;height:28px;padding:0 12px;font-size:12px;line-height:1}
.spot .dpick{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 2px 0 10px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.spot .dpick .pic{width:18px;height:18px;flex:none;margin:0}
.spot .dpick b{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spot .dpick button{flex:none;border:0;background:none;color:var(--accent);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 10px;line-height:1}
.spot .dpick button:hover{text-decoration:underline}

/* 조건 칸 제목·이동 수단 버튼 아이콘 */
.fs>h2 .pic,details.more>summary .pic,details.more>h3 .pic{width:18px;height:18px;margin:0 6px 0 0;vertical-align:-3px}
details.more>summary .pic{margin-right:0}  /* summary 는 gap 8px 이 있음 */
details.more>h3 .pic{width:16px;height:16px;margin-right:5px}
.spot .top .seg.sm button .pic,.onbseg button .pic{width:15px;height:15px;margin:0 4px 0 0;vertical-align:-3px}
.spot .top .seg.sm button{display:inline-flex;align-items:center}
/* 조건 칸: 제목 줄(흰 바탕)과 그 아래 고르는 영역(아주 옅은 음영)을 나눠 칸마다 잘 보이게. 접힌 칸은 제목만 흰 바탕으로 */
:root{--fsbg:#f6f8f5}
.fscroll>.fs:not(.applyrow){background:var(--fsbg)}
.fscroll>.fs>h2,.fscroll>details.fs.more>summary{margin:-14px -16px 0;padding:13px 16px 11px;background:var(--surface);border-bottom:1px solid #e9ede7}
.fscroll>[data-fold].shut,.fscroll>details.fs.more:not([open]){background:var(--surface);padding-bottom:0}
.fscroll>[data-fold].shut>h2,.fscroll>details.fs.more:not([open])>summary{border-bottom:0}
.fscroll>details.fs.more>summary+h3{border-top:0;padding-top:4px}  /* 흰 제목 줄 바로 아래 첫 소제목은 점선 없이 */
.spot .dpick{background:var(--surface)}  /* 음영 영역 안 흰 카드 안이라 장소 줄은 회색을 빼고 검색칸처럼 흰 바탕+테두리 */
/* 고르는 버튼(앱 전체): 고른 것은 진한 초록 대신 연한 초록(바탕)+초록 글자, 안 고른 것은 옅은 테두리 — 진한 초록은 '적용하고 접기' 같은 주요 버튼에만 */
.seg button,.chip{border-color:#e3e7e1!important;box-shadow:none!important}
.seg button[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--accent-soft)!important;border-color:#7fb3a2!important;color:var(--accent)!important;font-weight:700!important;box-shadow:none!important}
.lnchips .chip.lnc[aria-pressed="true"]{background:var(--accent-soft)!important}
/* 선호 호선: 안 고른 노선은 테두리 없이, 고른 노선은 진한 초록 고리 + 오른쪽 아래 체크(옅은 선택 규칙보다 우선) */
.fs .lnchips .chip.lnc{border:2.5px solid transparent!important;background:none!important;position:relative}
.fs .lnchips .chip.lnc[aria-pressed="true"]{border-color:var(--accent)!important;background:none!important}
.fs .lnchips .chip.lnc[aria-pressed="true"]::after{content:"✓";position:absolute;right:-4px;bottom:-4px;width:17px;height:17px;border-radius:50%;background:var(--accent);color:#fff;font-size:10.5px;font-weight:900;line-height:1;display:grid;place-items:center;border:2px solid var(--surface)}

/* 지도 위 버튼 한 줄(3D·시간여행·호재·주변 시설 ▾), 시설 10개는 펼침 메뉴 */
.poibar{top:10px;flex-wrap:nowrap!important;overflow:visible!important;max-width:calc(100% - 140px)}
.poibar .ctbtn{position:static;flex:none}
.poibar>button{flex:none;white-space:nowrap}
.poibar .poimore .pic{width:15px;height:15px;margin:0 4px 0 0;vertical-align:-3px}
.poibar .poimore .pcar{margin-left:4px;font-size:10px;color:var(--muted)}
.poibar .poimore[aria-expanded="true"] .pcar{display:inline-block;transform:rotate(180deg)}
.poibar .poimore.on{border-color:var(--accent)!important;color:var(--accent)!important;font-weight:700}
.poicnt{margin-left:5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;line-height:1}
.poicnt[hidden]{display:none}
.poimenu{position:absolute;top:calc(100% + 6px);left:0;z-index:5;display:grid;grid-template-columns:repeat(2,max-content);gap:6px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.poimenu[hidden]{display:none}
.poimenu button{justify-content:flex-start;text-align:left}
@media (max-width:860px){
  .poibar{top:8px;left:8px;right:auto;max-width:calc(100% - 16px)}
  .poibar>.ctbtn,.poibar>button{min-height:30px;padding:0 10px!important;font-size:12px!important}
  .poimenu{grid-template-columns:repeat(2,minmax(0,1fr));width:min(320px,calc(100vw - 16px))}
}
@media (max-width:860px){ .poibar .pl,.poibar .psep{display:none} }  /* 휴대폰: '3D 언덕'·'호재'로 줄여 한 줄에 */
.leaflet-top.leaflet-left{top:46px}  /* 예비 지도 확대 버튼이 위 버튼 줄에 가리지 않게 */

/* 목록 카드 줄이기: 점수는 알약 대신 한 줄 글자(등급은 숫자 옆 색 글자), 가격 알약은 작게, 추천 동은 위 정보 줄로 */
.item .scp{display:flex!important;flex-wrap:wrap!important;gap:1px 11px!important;margin-top:5px;max-width:none}
.item .scp>.sp{border:0!important;background:none!important;padding:0!important;gap:3px;font-size:11.5px;line-height:19px;flex:none!important;min-width:0}
.item .scp>.sp b{font-size:12.5px}
.item .scp>.sp i{background:none!important;padding:0!important;min-width:0!important;font-size:10.5px;font-weight:800}
.item .scp>.sp.g-S i{color:#7c3aed} .item .scp>.sp.g-A i{color:#16a34a} .item .scp>.sp.g-B i{color:#65a30d} .item .scp>.sp.g-C i{color:#d97706} .item .scp>.sp.g-D i{color:#9ca3af}
.item .scp>.sp.all em{color:var(--accent);font-weight:700}
.item .reasons{margin-top:5px;gap:4px}
.item .reasons .pill{line-height:20px!important;padding:0 8px!important;font-size:12px}
.item .nm .sub .kvdim{color:var(--muted);opacity:.85}
.item .scp{gap:1px 9px!important}
.item .scp>.sp{justify-content:flex-start!important;width:auto!important;gap:2px!important}
.item .scp>.sp b,.item .scp>.sp i{margin:0!important}
.item .scp>.sp em{margin-right:1px}
.item .scp>.sp i{width:auto!important;text-align:left!important}
.item .scp{gap:1px 8px!important}
.item .scp{gap:1px 6px!important}
.item .scp>.sp{font-size:11px!important;gap:1px!important}
.item .scp>.sp b{font-size:12px!important} .item .scp>.sp i{font-size:10px!important}
/* 주택 종류: 거래 종류처럼 세 칸 한 줄(넓은 화면에서 '도시형생활주택'만 아랫줄로 떨어지던 것) */
#htypeChips{grid-template-columns:1fr 1fr 1.35fr!important}
#htypeChips button{white-space:nowrap;padding-left:4px;padding-right:4px;letter-spacing:-.2px}
/* 이동거점 최대 환승(대중교통): 최대 시간 줄 아래, 직접 입력 */
.spot .str{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.spot .strl{font-size:12.5px;font-weight:600;color:var(--ink)}
.spot .str .smaxin{margin:0;padding:0 10px 0 2px;min-height:30px}
.spot .str .smaxin input{width:30px}
.kgrp h3 .feeh{font-family:var(--mono);font-size:14px;color:var(--ink)} .kgrp h3 .feehs{font-size:11.5px;font-weight:500;color:var(--muted)}  /* 관리비 제목 줄의 세대당 평균(접어도 보임) */
/* 확인·알림·입력 창(uiDialog): 브라우저 기본 창 대신 앱 테마(진초록 확인, 지우기·해제는 빨강) */
.dlgbg{position:fixed;inset:0;background:rgba(20,32,28,.38);z-index:6000;display:flex;align-items:center;justify-content:center;padding:16px;animation:dlgin .12s ease-out}
.dlg{background:var(--surface);color:var(--ink);border-radius:16px;width:100%;max-width:380px;box-sizing:border-box;padding:20px 20px 16px;box-shadow:0 14px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:14px}
.dlgm{margin:0;font-size:15px;line-height:1.55;white-space:pre-line;word-break:keep-all;font-weight:600}
.dlgi{width:100%;box-sizing:border-box;min-height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:14.5px;color:var(--ink);background:var(--surface)}
.dlgi:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.dlgb{display:flex;gap:8px;justify-content:flex-end}
.dlgb button{min-height:38px;padding:0 16px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.dlgc{border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.dlgc:hover{border-color:var(--accent);color:var(--accent)}
.dlga{border:1px solid var(--accent);background:var(--surface);color:var(--accent)}
.dlga:hover{background:var(--accent-soft)}
.dlgo{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink)}
.dlgo.bad{border-color:var(--bad);background:var(--bad)}
@keyframes dlgin{from{opacity:0}to{opacity:1}}
@media (max-width:480px){ .dlgbg{align-items:flex-end;padding:0} .dlg{max-width:none;border-radius:16px 16px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} .dlgb button{flex:1;min-height:44px} }
.kmerge dl+h3{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}  /* 단지 정보 한 카드 안의 기본·주차 이동·관리 보안 구분 */
/* 크게 보기(넓은 화면) 가격·교통 칸: 왼쪽 가격·점수 · 가운데 정보 표 · 오른쪽 로드뷰를 나란히, 아래 정류장·네이버 버튼.
   예전엔 로드뷰가 정보 표 아래 한 줄을 다 차지해 옆이 비었음. 로드뷰가 없는 단지는 두 칸 그대로 */
@media (min-width:1100px){
  .side.right.wide .detail>section.stats:has(>.rvbox:not([hidden])){grid-template-columns:minmax(260px,.9fr) minmax(0,1.3fr) minmax(0,1.4fr);grid-template-rows:auto auto auto 1fr}
  .side.right.wide .stats:has(>.rvbox:not([hidden]))>.dfacts{grid-column:2;grid-row:1/span 4;grid-template-columns:max-content minmax(0,1fr)}
  .side.right.wide .stats>.rvbox:not([hidden]){grid-column:3;grid-row:1/span 4;width:auto;height:auto;min-height:280px;margin:0;justify-self:stretch}
}
/* 분양예정 단지(청약 공고·입주 전): 보라색 */
.pretag{display:inline-flex;align-items:center;gap:3px;background:#ede9fe;color:#6d28d9;border-radius:6px;padding:1px 6px;font-size:11px;font-weight:700;margin-left:4px;white-space:nowrap;vertical-align:middle}
.pretag .pic{width:12px;height:12px;margin:0}
.mk.pre{background:#fff;color:#6d28d9;border:1.5px solid #7c3aed;font-family:var(--font);font-weight:700;font-size:11px;padding:1px 7px;box-shadow:0 1px 4px rgba(76,29,149,.3)}
.mk.pre .pm{display:inline-flex;align-items:center;gap:3px}
.mk.pre .pm .pic{width:12px;height:12px;margin:0}
.mk.pre:hover{background:#7c3aed;color:#fff}
.mk .prt{font-family:var(--font);font-size:10px;font-weight:700;background:#ede9fe;color:#6d28d9;border-radius:4px;padding:0 3px;margin-left:3px}
.t3mk.pre .nm{color:#4c1d95}
.dnaver.pre{background:#7c3aed;border-color:#7c3aed;color:#fff}
.dnaver.pre .pic{width:16px;height:16px;margin:0;filter:brightness(4)}
#preSec .prekv{margin:4px 0 10px}
#preSec .prent{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0 0 8px;background:var(--sunk)}
#preSec .prent>b{font-size:13px}
#preSec .prent>.note{margin-left:6px}
#preSec .presch{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;font-size:12px}
#preSec .pres em{font-style:normal;color:var(--muted);margin-right:3px}
#preSec .pretbl td:first-child{font-family:var(--mono)}
.dongno.pre{background:rgba(109,40,217,.88)}
/* 의견 보내기(app.js fbOpen): 목록 맨 아래·상세 맨 아래 링크, 창 / 자료 기준일(국토부 실거래 · N월 N일 갱신) */
.fbfoot{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;padding:14px 12px 20px;color:var(--muted);font-weight:500}
.fbrow{padding:12px 14px 22px;text-align:center}
.side.right.wide .detail>.fbrow{column-span:all}
.fbrow .linkbtn{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-weight:500;padding:6px 0}
.fbfoot:hover,.fbrow .linkbtn:hover{color:var(--accent)}
.fbdlg h3{margin:0;font-size:16px;display:flex;align-items:center;gap:4px}
.fbon{margin:-8px 0 0;font-size:13px;color:var(--muted);font-weight:600}
.fbdlg .fbt{min-height:120px;padding:10px 12px;line-height:1.5;resize:vertical}
.fberr{margin:0;font-size:13px;color:var(--bad)}
.dpsrc{margin-top:6px;font-size:11.5px;color:var(--muted)}
.dpsrc:empty{display:none}
.tsrc{margin-top:8px}
.fbpv{margin:-4px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.fbpv a{color:inherit}
/* 2D 지도 가운데가 서울 밖일 때(app.js mapSoonCheck) — 3D 의 '서비스 준비 중'(.t3reload.soon)과 같은 모양. 3D 가 열리면 그 아래 깔림 */
.mapsoon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:rgba(27,34,32,.82);color:#fff;font-size:14px;font-weight:700;padding:12px 20px;border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap}
.mapsoon[hidden]{display:none}