:root { --muted:#777; --bg:#f2f4f6; }
* { box-sizing: border-box; }
body { margin:0; font-family:'Pretendard',-apple-system,'Malgun Gothic',sans-serif;
  color:var(--t1); background:var(--bg); line-height:1.5;
  word-break:keep-all; overflow-wrap:break-word; }   /* 한글 어절 단위 줄바꿈 — 단어 중간에서 안 끊김 */
h1, h2 { text-wrap:balance; }
.wrap { max-width:960px; margin:0 auto; padding:24px; }
.muted { color:var(--muted); font-size:13px; }

/* ============================================================
   토스 톤 디자인 시스템 — 신규 토큰 + 공용 컴포넌트 (Task 1~7 가산 → Task 8 정리 완료)
   출처: docs/superpowers/design/mockup-desktop.html <style> (색·간격·라운드·
   그림자 verbatim 이식). 구 디자인(--ink/.panel/.badge/.center/.spinner/구
   bare table·button·input 규칙 등, 전 화면 미참조 확인 후)은 Task 8에서 제거.
   `--bg`는 전역 #f2f4f6로 전환(위 최상단 :root) — 3화면 공통 body 배경.
   `--line`은 목업값 #eaedf0로 전환(아래 :root, 구 #ddd 소비자 전부 제거됨).
   `--muted`(#777)는 .muted가 참조하여 유지.
   ============================================================ */
:root{
  --card:#ffffff; --sunk:#f5f7f9;
  --t1:#191f28; --t2:#4e5968; --t3:#8b95a1; --line:#eaedf0; --line2:#f4f6f8;
  --blue:#3182f6; --blue-strong:#1b64da; --blue-soft:#e9f1ff; --blue-line:#c9deff;
  --green:#15b877; --green-soft:#e7f7f0; --amber:#ff9d2e; --amber-soft:#fff4e5; --red:#f0454a;
  --sans:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,-apple-system,sans-serif;
  --shadow-c:0 1px 2px rgba(20,30,50,.04), 0 8px 24px -20px rgba(20,40,80,.28);
  --shadow-hero:0 2px 4px rgba(20,30,50,.05), 0 30px 60px -34px rgba(20,50,110,.4);
  --ex:#8b95a1;   /* 예시(실거래) 점 색 — 본 건(파랑)과 대비되는 중립 회색 */
  color-scheme:light;
}
/* 라이트 모드 고정 — 사용자 요청(다크 미사용). 뷰어 테마와 무관하게 항상 라이트. */
:root[data-theme="dark"]{ color-scheme:light; }

.ctitle,.ctx .addr,.hero .lab,.hero .rng{text-wrap:balance;}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);}
.nav .in{max-width:1180px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:18px;}
.wm{display:flex;align-items:center;gap:9px;flex:0 0 auto;}
.wm .g{width:28px;height:28px;border-radius:9px;background:radial-gradient(120% 120% at 30% 20%,#5aa2ff,var(--blue));
  position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
.wm .g::after{content:"";position:absolute;left:8px;bottom:7px;width:4px;height:9px;border-radius:1px;background:#fff;
  box-shadow:6px 0 0 rgba(255,255,255,.55);}
.wm b{font-size:18px;font-weight:800;letter-spacing:-.02em;}
.wm .en{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--t3);font-weight:800;}
.nav .sp{flex:1;}
.navbtn{font-family:inherit;font-size:14px;font-weight:700;border-radius:11px;padding:9px 15px;cursor:pointer;border:1px solid var(--line);
  background:var(--card);color:var(--t1);transition:border-color .15s,transform .06s;}
.navbtn:hover{border-color:var(--blue-line);}
.navbtn:active{transform:translateY(1px);}
.navbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* context header */
.ctx{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px;}
.ctx .addr{font-size:26px;font-weight:800;letter-spacing:-.02em;}
.ctx .sub{font-size:14px;color:var(--t2);font-weight:600;margin-top:6px;}
.ctx .sub .pin{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:7px;vertical-align:2px;}
.ctx .when{font-size:12.5px;color:var(--t3);font-weight:600;}

.reveal{opacity:0;transform:translateY(12px);}
.reveal.in{opacity:1;transform:none;transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);}

/* ---------- hero ---------- */
.hero{background:var(--card);border-radius:24px;box-shadow:var(--shadow-hero);overflow:hidden;
  display:grid;grid-template-columns:minmax(380px,460px) 1fr;}
@media (max-width:900px){.hero{grid-template-columns:1fr;}}
.hero .hl{padding:34px 34px 30px;border-right:1px solid var(--line);}
@media (max-width:900px){.hero .hl{border-right:0;border-bottom:1px solid var(--line);}}
.hero .lab{font-size:16px;font-weight:700;color:var(--t2);}
.hero .amt{display:flex;align-items:flex-end;gap:4px;margin-top:8px;line-height:.9;}
.hero .amt .n{font-size:76px;font-weight:800;letter-spacing:-.045em;color:var(--t1);font-variant-numeric:tabular-nums;}
.hero .amt .u{font-size:34px;font-weight:800;margin-bottom:9px;}
.hero .rng{margin-top:14px;font-size:15px;color:var(--t2);font-weight:600;}
.hero .rng b{color:var(--t1);font-variant-numeric:tabular-nums;}
.chips{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px;}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor;}
.chip.amber{background:var(--amber-soft);color:var(--amber);}
.chip.blue{background:var(--blue-soft);color:var(--blue);}
.chip.green{background:var(--green-soft);color:var(--green);}
.chip.red{background:#fdecec;color:var(--red);}   /* soft red — --red-soft 토큰 부재, 목업 soft 계열과 동일 톤 */
.xline{margin-top:20px;padding:14px 16px;background:var(--blue-soft);border-radius:14px;font-size:14px;color:var(--t2);font-weight:600;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.xline .p{font-size:16px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;}
.xline .ok{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--green);}
.xline .ok.red{color:var(--red);} .xline .ok.amber{color:var(--amber);}
.tick{width:17px;height:17px;border-radius:50%;background:var(--green);position:relative;flex:0 0 auto;}
.tick::after{content:"";position:absolute;left:5.5px;top:4px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);}
.tick.red{background:var(--red);} .tick.amber{background:var(--amber);}
.hero .cta{margin-top:24px;display:flex;gap:10px;}
.bigbtn{border:none;border-radius:14px;padding:15px 24px;font-family:inherit;font-size:15.5px;font-weight:800;
  background:var(--blue);color:#fff;cursor:pointer;letter-spacing:-.01em;transition:transform .08s,background .15s;
  box-shadow:0 12px 24px -12px color-mix(in srgb,var(--blue) 75%,transparent);}
.bigbtn:hover{background:var(--blue-strong);}
.bigbtn:active{transform:scale(.985);}
.ghostbtn{border:1px solid var(--line);border-radius:14px;padding:15px 20px;background:var(--card);color:var(--t1);
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;}
.ghostbtn:hover{border-color:var(--blue-line);}
.bigbtn:focus-visible,.ghostbtn:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 40%,transparent);outline-offset:2px;}

.hero .hr{padding:30px 32px 26px;display:flex;flex-direction:column;}
.hero .hr .ht{font-size:14px;font-weight:750;color:var(--t2);}
.hero .hr .leg{display:flex;gap:14px;font-size:11.5px;color:var(--t3);font-weight:600;margin-top:4px;flex-wrap:wrap;}
.hero .hr .leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px;}
.band{width:100%;height:auto;display:block;margin-top:auto;overflow:visible;}
.band .track{stroke:var(--line);stroke-width:2;}
.band .rangeband{fill:var(--blue-soft);stroke:var(--blue-line);stroke-width:1;}
.band .cdot{fill:var(--ex);opacity:.65;}
.band .stem{stroke:var(--blue);stroke-width:2;}
.band .pill{fill:var(--blue);}
.band .pilltx{fill:#fff;font-size:15px;font-weight:800;font-family:var(--sans);font-variant-numeric:tabular-nums;}
.band .edge{fill:var(--t2);font-size:12px;font-weight:700;font-family:var(--sans);font-variant-numeric:tabular-nums;}
.band .ax{fill:var(--t3);font-size:11.5px;font-family:var(--sans);font-variant-numeric:tabular-nums;}
.hero .hr .hcap{font-size:12.5px;color:var(--t3);font-weight:500;margin-top:14px;line-height:1.6;}
.hero .hr .hcap b{color:var(--t2);font-weight:700;}

/* ---------- stat cards row ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
@media (max-width:900px){.grid3{grid-template-columns:1fr;}}
.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-top:16px;}
@media (max-width:900px){.grid2{grid-template-columns:1fr;}}
/* grid 자식 min-width:auto 이슈 — .tbl-wrap table{min-width:520px}가 카드 min-content 폭을
   키워 좁은 화면에서 페이지 가로 오버플로 유발. min-width:0으로 카드가 수축해
   표가 .tbl-wrap(overflow-x:auto) 안에서 스크롤되게 함. */
.grid2 > *,.grid3 > *{min-width:0;}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow-c);padding:22px 22px;}
.chead{margin-bottom:16px;}
.ctitle{font-size:16px;font-weight:800;letter-spacing:-.01em;}
.csub{font-size:12.5px;color:var(--t3);font-weight:600;margin-top:3px;}

.info .ir{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:14.5px;}
.info .ir + .ir{border-top:1px solid var(--line2);}
.info .ir .ik{color:var(--t2);font-weight:600;}
.info .ir .iv{font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

.rbar{margin-top:14px;}
.rbar:first-of-type{margin-top:4px;}
.rbar .rl{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px;}
.rbar .rl .nm{font-size:14px;font-weight:750;}
.rbar .rl .nm small{color:var(--t3);font-weight:600;font-size:12px;margin-left:5px;}
.rbar .rl .vv{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;}
.rbar .rl .vv small{font-size:11.5px;color:var(--t3);font-weight:700;}
.rtrack{height:13px;background:var(--sunk);border-radius:999px;overflow:hidden;}
.rtrack > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue-strong));width:0;
  transition:width 1s cubic-bezier(.2,.7,.3,1);}
.rbar .rq{font-size:11.5px;color:var(--t3);margin-top:6px;font-weight:600;font-variant-numeric:tabular-nums;}

.meter{display:flex;gap:6px;margin-top:2px;}
.meter .seg{flex:1;height:9px;border-radius:999px;background:var(--line);}
.meter .seg.on{background:var(--amber);}
.meter .seg.on.green{background:var(--green);} .meter .seg.on.red{background:var(--red);}
.conf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
.conf-row .cg{font-size:21px;font-weight:800;color:var(--amber);}
.conf-row .cg.green{color:var(--green);} .conf-row .cg.red{color:var(--red);}
.conf-reason{font-size:12.5px;color:var(--t2);margin-top:14px;line-height:1.6;}
.conf-reason b{color:var(--t1);font-weight:700;font-variant-numeric:tabular-nums;}

/* comps: scatter + table */
.scatter{width:100%;height:auto;display:block;overflow:visible;margin-bottom:6px;}
.scatter .gl{stroke:var(--line2);stroke-width:1;}
.scatter .al{stroke:var(--line);stroke-width:1.5;}
.scatter .ax{fill:var(--t3);font-size:10.5px;font-family:var(--sans);font-variant-numeric:tabular-nums;}
.scatter .ref{stroke:var(--blue);stroke-width:1.5;stroke-dasharray:5 4;opacity:.85;}
.scatter .reftx{fill:var(--blue);font-size:10.5px;font-weight:800;font-family:var(--sans);}
.scatter .subjlab{fill:var(--blue);font-size:12px;font-weight:800;font-family:var(--sans);}
.dotleg{display:flex;gap:16px;margin:8px 0 4px;font-size:11.5px;color:var(--t2);flex-wrap:wrap;font-weight:600;}
.dotleg span{display:inline-flex;align-items:center;gap:6px;}
.dotleg i{width:10px;height:10px;border-radius:50%;}
.tbl-wrap{overflow-x:auto;margin-top:12px;}
.tbl-wrap table{width:100%;border-collapse:collapse;min-width:520px;}
.tbl-wrap th,.tbl-wrap td{text-align:left;padding:11px 10px;font-size:13px;}
.tbl-wrap th{font-size:11px;letter-spacing:.04em;color:var(--t3);font-weight:800;border-bottom:1px solid var(--line);text-transform:uppercase;}
.tbl-wrap td{border-bottom:1px solid var(--line2);font-weight:600;}
.tbl-wrap tbody tr{transition:background .12s;}
.tbl-wrap tbody tr:hover{background:var(--sunk);}
.tbl-wrap tr:last-child td{border-bottom:0;}
.tbl-wrap td.num,.tbl-wrap th.num{text-align:right;font-variant-numeric:tabular-nums;}
.tbl-wrap td.price{font-weight:800;font-size:14px;}
.dtag{display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;background:var(--line2);color:var(--t2);}
.dtag.adj{background:var(--amber-soft);color:var(--amber);}

.nlist{display:flex;flex-direction:column;gap:14px;}
.nrow{display:flex;gap:12px;font-size:13.5px;color:var(--t2);line-height:1.55;}
.nrow .ni{flex:0 0 24px;height:24px;border-radius:9px;background:var(--blue-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;}
.nrow b{color:var(--t1);font-weight:700;}

.trust{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:15px 20px;
  border:1px dashed var(--line);border-radius:14px;font-size:12.5px;color:var(--t2);font-weight:600;}
.trust .lab{font-weight:800;color:var(--t1);}
.trust .src{display:inline-flex;align-items:center;gap:7px;}
.trust .src::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);}
.trust .when{margin-left:auto;color:var(--t3);}

@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.rtrack>i{transition:none;}}

/* ============================================================
   대시보드 배선 잔여 레이아웃 (Task 5) — 지도 카드 사이즈 + 로딩 스켈레톤/상태 점.
   목업에 없는 요소(실제 서비스 전용): 폴링 상태 텍스트를 대체하는 스피너 성격.
   ============================================================ */
.mapcard #map{height:360px;border:0;border-radius:14px;overflow:hidden;}

.skel{background:var(--sunk);border-radius:12px;min-height:64px;}
@media (prefers-reduced-motion:no-preference){
  .skel{background:linear-gradient(90deg,var(--sunk) 25%,var(--line2) 37%,var(--sunk) 63%);
    background-size:400% 100%;animation:sise-skel 1.4s ease infinite;}
}
@keyframes sise-skel{0%{background-position:100% 0;}100%{background-position:0 0;}}

.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:6px;vertical-align:1px;}
@media (prefers-reduced-motion:no-preference){.status-dot.live{animation:sise-pulse 1.1s ease-in-out infinite;}}
@keyframes sise-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.status-dot.err{background:var(--red);}   /* 터미널/오류 — 펄스 없음(빨강=실패 색 의미) */

/* 새 대시보드 전용 폭 확장 — 목업 .wrap은 1180px. index/history는 960px 유지(설계 확정, .wrap 그대로 사용). */
.wrap.wide{max-width:1180px;}

/* ============================================================
   검색·로그인·pending 화면 (Task 6) — 목업에 전용 화면이 없어 기존
   컴포넌트(.nav .bigbtn .ghostbtn 등)를 조합해 신규 레이아웃만 추가.
   ============================================================ */
#authbar{display:flex;align-items:center;gap:10px;}
#authbar .who{font-size:13.5px;color:var(--t2);font-weight:700;}

.authwrap{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;}
.authcard{width:min(480px,92vw);text-align:center;}
.authcard h1{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--t1);}
.authcard .atoggle{margin-top:22px;}
.authcard .lead{font-size:15px;color:var(--t2);font-weight:600;}

.searchbox{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
.searchbox input[type=text]{flex:1;min-width:240px;padding:15px 18px;font-family:inherit;font-size:15.5px;
  border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--t1);}
.searchbox input[type=text]:focus{outline:none;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-soft);}
.searchbox input[type=text]::placeholder{color:var(--t3);}

.status-msg{font-size:13px;color:var(--t3);font-weight:600;margin-top:14px;min-height:1.2em;}

.kakaobtn{display:inline-block;margin-top:4px;background:#fee500;color:#191919;padding:15px 26px;
  border-radius:14px;text-decoration:none;font-weight:800;font-size:15px;font-family:inherit;
  transition:transform .08s;}
.kakaobtn:hover{transform:translateY(-1px);}
.kakaobtn:active{transform:scale(.985);}
.kakaobtn:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 40%,transparent);outline-offset:2px;}

#pending-logout{margin-top:16px;}

/* ============================================================
   조회 이력 화면 (Task 7) — 목업 전용 없어 기존 .card/.chip/.ctx 조합 +
   신규 리스트/행 클래스만 추가.
   ============================================================ */
.hist-list{display:flex;flex-direction:column;}
.hist-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 6px;cursor:pointer;border-top:1px solid var(--line2);transition:background .12s;}
.hist-row:first-child{border-top:0;}
.hist-row:hover{background:var(--sunk);}
.hist-row .ha{font-size:15.5px;font-weight:800;color:var(--t1);letter-spacing:-.01em;}
.hist-row .hmeta{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.hist-row .htime{font-size:12.5px;color:var(--t3);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.hist-empty{padding:36px 6px;text-align:center;}