/* 색 정본은 palette.css, 셸(사이드바·페이지머리) 규칙은 assets/css/shell.css 에 있다 —
     둘 다 이 파일 위에서 <link> 로 앞세운다(HTML head, 2026-08 이전엔 여기 @import 였다).
     @import 는 쿼리스트링을 못 붙여 캐시버스트 키가 없어 7일 캐시에 갇힌다.
     app.css 는 :root 색 정의를 갖지 않는다 — 두 곳에 값이 있으면 조용히 갈라진다.
     셸 규칙도 여기 두지 않는다 — 청약 페이지도 같은 마크업(shell.js)을 그리므로
     실거래 전용 파일에 두면 그쪽엔 스타일이 없다. */
  html{background:var(--bg);}
  /* ── 좌표계 ────────────────────────────────────────────────
     예전에는 body{zoom:1.2} 로 브라우저 120% 확대를 기본값으로 삼았고, 확대를 따라오지 않는
     셋(미디어쿼리·vh/vw·커서 좌표)을 손으로 보정해야 했다. 통합 시안이 확정 px 로 적혀 있어
     배율을 걷어냈다 — 이제 CSS px 가 곧 화면 px 이고 보정할 것이 없다. */
  *{box-sizing:border-box;margin:0;padding:0;}
  /* 한글은 어절(띄어쓰기) 단위로 끊는다 — 기본값은 글자 아무 데서나 끊어 '실거래
     가' 처럼 갈라진다. 긴 영문·URL 만 예외로 잘라 넘긴다. */
  body{background:var(--bg);color:var(--text);font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-break:keep-all;overflow-wrap:break-word;}
  ::selection{background:var(--accent-soft);}
  ::-webkit-scrollbar{width:9px;height:9px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:2px solid var(--canvas);}
  /* 셸(.shell·#dashboard-screen·.page-head*·.page-badge)은 assets/css/shell.css 로 이관 */
  /* 세그먼트 컨트롤 공통 */
  /* 세그먼트 — 서로 배타적인 한 벌(매매/전세처럼). 고른 칸만 배경을 올려 준다 */
  .seg{display:inline-flex;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:11px;padding:3px;}
  .seg-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:none;border-radius:8px;
    background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;
    font-family:inherit;white-space:nowrap;transition:background .15s,color .15s;}
  .seg-btn:hover{color:var(--ink);}
  .seg-btn.active{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.07);}
  /* 좌측 카드 컬럼 (툴바 + 스크롤 목록, 고정) */
  .cards-col{grid-area:cards;min-width:0;position:sticky;top:16px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;gap:10px;}
  .cards-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 2px;flex-shrink:0;}
  .cards-toolbar-title{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.2px;}
  .cards-toolbar-title .wl-count{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
    color:var(--muted);background:var(--sunk);border-radius:99px;padding:2px 7px;margin-left:6px;}
  /* ── 관심 단지 목록 ──────────────────────────────────────────
     '골라서 차트에 올리는 곳'이라 한 행은 이름·평형 / 최근가·변동 두 줄로 끝낸다.
     나머지 수치는 차트 위 요약(.chart-stats)에서 본다. */
  .wl-list{min-width:0;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:5px;padding-right:3px;}
  .wl-list::-webkit-scrollbar{width:5px;}
  .wl-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px;}
  /* 왼쪽 색 띠는 쓰지 않는다 — 선택은 배경 명도와 순번 마크로만 알린다 */
  .wl-row{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
    border-radius:11px;padding:9px 11px;cursor:pointer;min-width:0;
    transition:border-color .15s,box-shadow .15s,background .15s;}
  .wl-row:hover{border-color:var(--line-2);box-shadow:var(--shadow);}
  .wl-row.sel .wl-name{font-weight:800;}
  .wl-mark{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;
    display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;
    font-size:10px;font-weight:700;color:#fff;}
  .wl-row.sel .wl-mark{border-color:transparent;}
  .wl-main{min-width:0;flex:1;}
  .wl-top{display:flex;align-items:baseline;gap:6px;min-width:0;}
  .wl-name{font-size:13px;font-weight:700;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wl-py{font-size:10.5px;font-weight:600;color:var(--ink-2);background:var(--sunk);border-radius:6px;padding:1px 6px;flex:none;}
  .wl-new{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;color:var(--accent-fg);
    background:var(--accent);border-radius:99px;padding:1px 5px;flex:none;}
  .wl-bot{display:flex;align-items:baseline;gap:8px;margin-top:3px;min-width:0;}
  .wl-price{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;}
  .wl-chg{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;}
  .wl-chg.up{color:var(--up);}.wl-chg.down{color:var(--down);}.wl-chg.neu{color:var(--muted);}
  .wl-dim{font-size:11px;color:var(--muted);}
  /* 보조 버튼은 평소엔 물러나 있다 — ×만 늘 보이고 나머지는 행에 손이 갔을 때 */
  .wl-acts{display:flex;gap:1px;flex:none;}
  .wl-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:5px;border-radius:7px;
    display:flex;align-items:center;transition:color .15s,background .15s,opacity .15s;}
  .wl-btn svg{width:14px;height:14px;}
  .wl-btn:hover{color:var(--ink);background:var(--sunk);}
  .wl-btn.wl-x:hover{color:var(--down);}
  .wl-btn.hoveronly{opacity:0;}
  .wl-row:hover .wl-btn.hoveronly,.wl-row:focus-within .wl-btn.hoveronly{opacity:1;}
  /* ── 차트 위 요약 4칸 (선택한 첫 단지 기준) ── */
  .chart-stats{padding:10px 20px 0;}
  .chart-stats[hidden]{display:none;}
  .cs-cell.cs-ref .cs-v{font-size:12px;overflow:hidden;text-overflow:ellipsis;}
  .cs-cell.cs-ref .cs-v small{font-size:10px;color:var(--muted);font-family:inherit;margin-left:3px;}
  .cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;}
  .cs-cell{background:var(--surface);padding:7px 11px;min-width:0;}
  .cs-k{font-size:10px;color:var(--muted);}
  .cs-v{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;margin-top:2px;
    font-variant-numeric:tabular-nums;white-space:nowrap;}
  .cs-v small{font-size:10px;color:var(--muted);font-family:inherit;}
  /* 평형 그룹 카드 목록 (세로 리스트) */
  /* 밀도: 기본=컴팩트(상세부 숨김·타이트), 상세=전체 */
  /* 스티키 섹션 헤더: 스크롤해도 상단 고정 + 액센트 바·구분선으로 그룹 명확 */
  /* 아파트 카드 (세로 리스트) */
  /* 메인 2단 레이아웃 */
  /* 좌: 카드 사이드바(고정 스크롤) / 우: 차트(hero, 넓게·고정) */
  .main-layout{display:grid;grid-template-columns:minmax(300px,360px) 1fr;grid-template-areas:"cards chart";gap:18px;align-items:start;}
  /* ── 레이아웃 B · 테이블 ── */
  /* 관심 단지 테이블 */
  .ta-r{text-align:right;}.ta-c{text-align:center;}
  /* 인라인 평형 추가 팝오버 */
  .pyeong-pop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--accent);border-radius:13px;padding:12px 16px;box-shadow:var(--shadow);margin-bottom:16px;animation:fadeUp .18s ease both;}
  .pyeong-pop-title{font-size:12px;font-weight:800;}
  .pyeong-pop-chips{display:flex;gap:6px;flex-wrap:wrap;}
  .pyeong-pop-chip{background:var(--sunk);border:1.5px solid var(--line);color:var(--ink-2);padding:6px 12px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s;}
  .pyeong-pop-chip:hover{border-color:var(--line-2);color:var(--ink);}
  .pyeong-pop-chip[disabled]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700;cursor:default;}
  .pyeong-pop-note{font-size:10.5px;color:var(--muted);margin-left:auto;}
  .pyeong-pop-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;display:flex;}
  /* 우측 차트 패널 */
  .chart-panel{grid-area:chart;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;position:sticky;top:16px;min-height:560px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);}
  .chart-panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;color:var(--muted);gap:10px;text-align:center;padding:24px;}
  .chart-panel-empty-icon{width:42px;height:42px;border-radius:12px;background:var(--sunk);border:1px solid var(--line);color:var(--ink-2);display:flex;align-items:center;justify-content:center;}
  .chart-panel-empty-icon svg{width:22px;height:22px;}
  .chart-panel-empty p:first-of-type{color:var(--ink);}
  /* 세로는 그림 몫이다 — 머리·요약·범례는 필요한 만큼만 쓴다 */
  .chart-header{padding:13px 20px 11px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;}
  .chart-title-wrap{min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
  .avg-toggles{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex-shrink:0;}
  /* 토글 칩: 상태 점 + pill. 체크 시 액센트 강조 */
  .region-avg-toggle{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink-2);cursor:pointer;white-space:nowrap;padding:6px 13px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--surface);transition:border-color .15s,background .15s,color .15s;user-select:none;}
  .region-avg-toggle input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
  .region-avg-toggle::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;transition:background .15s;}
  .region-avg-toggle:hover{border-color:var(--ink-2);}
  .region-avg-toggle:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
  .region-avg-toggle:focus-within{outline:2px solid var(--accent);outline-offset:2px;}
  .chart-apt-name{font-size:16px;font-weight:800;letter-spacing:-.4px;}
  .chart-apt-sub{font-size:11.5px;color:var(--muted);}
  .similar-cta{background:var(--accent-soft);color:var(--accent);border:none;padding:6px 11px;border-radius:9px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap;}
  .similar-cta:hover{background:var(--accent-soft);}
  /* 비슷한 단지 컨텍스트 바(발굴 뷰 상단) */
  .similar-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--accent);border-radius:13px;padding:12px 16px;margin-bottom:12px;box-shadow:var(--shadow);}
  .similar-info{font-size:13px;color:var(--text);min-width:0;line-height:1.5;}
  .similar-badge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px;margin-right:6px;vertical-align:middle;}
  .similar-ctrl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted2);white-space:nowrap;}
  .similar-ctrl select{background:var(--input-bg);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:7px;font-size:12px;font-family:inherit;}
  .similar-ctrl input[type=range]{accent-color:var(--blue);width:120px;height:20px;cursor:pointer;}
  .similar-ctrl b{color:var(--blue);font-family:'IBM Plex Mono',monospace;min-width:14px;display:inline-block;text-align:right;}
  .disc-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .disc-simsel.on{color:var(--blue);}
  .sim-axis{display:inline-flex;gap:3px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:3px;flex-wrap:wrap;}
  .sim-axis-btn{background:none;border:none;color:var(--muted2);font-size:11px;font-weight:600;padding:5px 9px;border-radius:6px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s,color .15s;}
  .sim-axis-btn b{color:var(--text);font-family:'IBM Plex Mono',monospace;margin-left:3px;}
  .sim-axis-btn.on{background:var(--blue);color:#fff;}
  .sim-axis-btn.on b{color:#fff;}
  .sim-axis-pyeong{display:inline-flex;align-items:center;padding:5px 10px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:800;white-space:nowrap;}
  .disc-pyeong-btn:disabled,.disc-pyeong-btn.locked{opacity:.35;cursor:not-allowed;}
  .watch-badge{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:9px;font-weight:800;padding:1px 6px;border-radius:99px;vertical-align:middle;}
  .disc-notx{color:var(--muted);font-size:12px;font-weight:600;}
  .disc-row.is-notx{opacity:.72;}
  /* 기준 단지 — 뜻은 rank 자리의 '기준' 배지가 진다. 상자는 다른 행과 같은 두께로 두고
     배경 명도만 한 단 낮춘다(2px 테두리 + 후광은 목록에서 그 행만 튀어 보였다) */
  .disc-row.is-ref{background:var(--sunk);border-color:var(--line-2);}
  .chart-body{padding:10px 20px 14px;flex:1;display:flex;flex-direction:column;}
  .chart-svg-wrap{flex:1;min-height:440px;}
  .chart-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted2);}
  .chart-legend-dot{width:8px;height:8px;border-radius:50%;}
  .chart-legend-bar{display:flex;gap:12px;flex-wrap:wrap;padding:7px 0 0;align-items:center;}
  .chart-legend-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text);}
  .chart-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
  @media(max-width:900px){.main-layout{grid-template-columns:1fr;grid-template-areas:"cards" "chart";}.cards-col{position:static;max-height:none;}.wl-list{overflow:visible;max-height:none;}.chart-panel{position:static;min-height:360px;}}
  /* 카드 헤더/바디 */
  /* 카드 가격 */

  /* 선택 상태 */
  /* 카드 가격 영역 */
  .price-prev{font-size:12px;color:var(--muted2);}
  .price-prev span{font-family:'IBM Plex Mono',monospace;font-weight:600;}
  .btn-primary{background:var(--accent);color:#fff;border:none;height:48px;padding:0 22px;border-radius:12px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:var(--shadow);transition:background .15s;width:100%;}
  .btn-primary:hover{background:var(--accent-2);}
  .btn-ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line);padding:9px 16px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s;white-space:nowrap;}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
  .btn-ghost:disabled{opacity:.5;cursor:not-allowed;}
  .pyeong-btns{display:flex;gap:8px;flex-wrap:wrap;}
  .pyeong-btn{
    background:var(--sunk);border:1.5px solid var(--line);color:var(--ink-2);
    padding:9px 15px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;
    font-family:inherit;transition:border-color .15s,background .15s,color .15s;
    position:relative;
  }
  .pyeong-btn:hover:not([style*="none"]){border-color:var(--line-2);color:var(--ink);}
  .pyeong-btn.active{
    background:var(--accent-soft);border-color:var(--accent);
    color:var(--accent);font-weight:700;
  }
  .pyeong-btn.active::after{
    content:'✓';margin-left:5px;font-size:12px;
  }
  .pyeong-hint{font-size:11px;color:var(--muted);margin-top:8px;}
  .btn-add{background:var(--accent);color:#fff;border:none;height:38px;padding:0 17px;border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:var(--shadow);transition:background .15s;display:flex;align-items:center;gap:7px;white-space:nowrap;}
  .btn-add:hover{background:var(--accent-2);}
  .btn-add svg{width:16px;height:16px;}
  /* .btn-theme 옛 정의(38px·radius 10px)는 죽은 코드였다 — 새 정의(26px·radius 4px,
     .rail-theme-row 안)가 나중에 로드돼 항상 이기고 있었다. shell.css 이관 시 죽은 쪽은 버렸다. */
  .form-label{font-size:12px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:7px;}
  .form-label .req{color:var(--down);}
  .form-group{margin-bottom:18px;}
  input[type=text],select{background:var(--sunk);border:1px solid var(--line);color:var(--ink);padding:11px 14px;border-radius:10px;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;width:100%;}
  input[type=text]:focus,select:focus{border-color:var(--accent);}
  input::placeholder{color:var(--muted);}
  .form-hint{font-size:11px;color:var(--muted);margin-top:5px;}
  .modal-backdrop{position:fixed;inset:0;background:rgba(20,18,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:200;padding:18px;opacity:0;transition:opacity .2s;}
  .modal-backdrop.show{opacity:1;}
  .modal-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;width:100%;max-width:440px;padding:26px;box-shadow:var(--shadow);animation:fadeUp .25s ease;}
  .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
  .modal-title{font-size:17px;font-weight:800;letter-spacing:-.3px;}
  .modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:22px;line-height:1;transition:color .15s;}
  .modal-close:hover{color:var(--text);}
  .sheet-backdrop{position:fixed;inset:0;background:rgba(20,18,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:200;opacity:0;transition:opacity .2s;padding:16px;}
  .sheet-backdrop.show{opacity:1;}
  .sheet-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);width:100%;max-width:720px;max-height:88vh;display:flex;flex-direction:column;transform:translateY(20px);transition:transform .25s ease;}
  .sheet-backdrop.show .sheet-box{transform:translateY(0);}
  .sheet-head{padding:20px 24px 0;border-bottom:1px solid var(--border);flex-shrink:0;}
  .sheet-head-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;}
  .sheet-title{font-size:17px;font-weight:700;}
  .sheet-sub{font-size:12px;color:var(--muted);margin-top:3px;}
  .sheet-body{overflow-y:auto;flex:1;min-height:0;padding:4px 24px 32px;}
  .detail-tabs{display:flex;gap:8px;padding:12px 0;overflow-x:auto;}
  .detail-tab{background:none;border:1.5px solid var(--border);color:var(--muted2);padding:5px 14px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s;}
  .detail-tab.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
  .tx-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);}
  .tx-row:last-child{border-bottom:none;}
  .tx-date{font-size:13px;color:var(--muted2);}
  .tx-detail{font-size:12px;color:var(--muted);margin-top:2px;}
  .tx-price{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;text-align:right;}
  .tx-diff{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-top:2px;text-align:right;}
  .tx-no{color:var(--muted);text-align:center;padding:40px 0;font-size:13px;line-height:1.7;}
  .tx-no b{color:var(--text);font-weight:700;}
  .card-loading{text-align:center;padding:28px 0;color:var(--muted);font-size:13px;}
  .spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;}
  .up-color{color:var(--up);}.down-color{color:var(--down);}.neu-color{color:var(--muted2);}
  #toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);color:var(--ink);padding:10px 20px;border-radius:99px;font-size:13px;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;}
  #toast.show{opacity:1;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
  select option{background:var(--card);color:var(--text);}
  .autocomplete-wrap{position:relative;}
  .autocomplete-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;z-index:300;max-height:220px;overflow-y:auto;box-shadow:var(--shadow);}
  .autocomplete-item{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border);}
  .autocomplete-item:last-child{border-bottom:none;}
  .autocomplete-item:hover,.autocomplete-item.focused{background:var(--accent-soft);}
  .autocomplete-item-name{font-size:13px;font-weight:600;color:var(--text);}
  .autocomplete-item-count{font-size:11px;color:var(--muted);margin-left:8px;flex-shrink:0;}
  .autocomplete-searching{padding:12px 14px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;}
  .period-btns{display:inline-flex;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:11px;padding:3px;}
  .period-btn{background:transparent;border:none;color:var(--muted);padding:7px 15px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s,color .15s;}
  .period-btn:hover{color:var(--ink-2);}
  .period-btn.active{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.07);}
  /* 거래 목록 */
  .tx-list-wrap{border-top:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;max-height:280px;}
  .tx-list-header{display:flex;align-items:center;justify-content:space-between;padding:9px 20px 6px;}
  .tx-list-title{font-size:12px;font-weight:800;color:var(--ink);}
  .tx-list-count{font-size:11px;color:var(--muted);}
  .tx-list-body{overflow-y:auto;flex:1;}
  .tx-list-body::-webkit-scrollbar{width:4px;}
  .tx-list-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
  .tx-item{display:grid;grid-template-columns:1fr auto;gap:0 13px;align-items:center;padding:7px 20px;border-bottom:1px solid var(--line);transition:background .12s;}
  .tx-item:last-child{border-bottom:none;}
  .tx-item:hover{background:var(--sunk);}
  /* 어느 단지 거래인지는 이름 옆 점이 말한다 — 행마다 색 띠를 두면 목록이 줄무늬가 된다 */
  .tx-item-dot{width:8px;height:8px;border-radius:50%;flex:none;}
  .tx-item-info{min-width:0;}
  .tx-item-name{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;min-width:0;}
  .tx-item-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tx-item-meta{font-size:11px;color:var(--muted);margin-top:2px;}
  .tx-item-price{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
  /* 예산 입력 */
  .budget-wrap{display:flex;align-items:center;gap:8px;height:40px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:0 13px;transition:border-color .15s;}
  .budget-wrap:focus-within{border-color:var(--line-2);}
  .budget-wrap.active{border-color:var(--line);background:var(--surface);}
  .budget-check{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
  .budget-label{font-size:12px;color:var(--ink-2);font-weight:600;white-space:nowrap;}
  .budget-input{background:transparent;border:none;outline:none;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--accent);width:52px;text-align:right;font-variant-numeric:tabular-nums;}
  .budget-input::placeholder{color:var(--muted);font-weight:400;}
  .budget-unit{font-size:12px;color:var(--muted2);}
  /* 스파크라인 */
  /* 카드 날짜/층수 크기 업 */
  /* ── 반응형: PC · 태블릿 · 모바일 · 폴드 정교 대응 ── */
  @media(min-width:901px) and (max-width:1080px){ .main-layout{gap:14px;grid-template-columns:minmax(280px,330px) 1fr;} }
  /* #dashboard-screen 의 4-tier 패딩 미디어쿼리는 shell.css 로 이관 */
  @media(max-width:640px){
    .chart-header{flex-direction:column;align-items:stretch;gap:10px;}
    .avg-toggles{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;}
    .chart-header,.chart-stats,.chart-body,.tx-list-header,.tx-item{padding-left:14px;padding-right:14px;}
    .chart-svg-wrap{min-height:min(60vh,460px);}
    .budget-wrap{padding:5px 9px;}
    .modal-box{padding:22px 18px;}
    /* 예전엔 576px·456px 두 단계로 더 좁을수록 더 줄였다. 4-tier 로 모으며 한 단만
       남길 수 있어, 더 좁은 쪽(456 유래) 값을 남긴다 — 좁은 화면에서 넘치는 것이
       넓은 화면에서 살짝 조밀해 보이는 것보다 더 나쁘다. */
    .period-btns{gap:4px;}
    .period-btn{padding:5px 7px;font-size:11px;}
    .btn-add{padding:7px 10px;font-size:11px;}
    .budget-input{width:48px;}
    .region-avg-toggle{font-size:10px;padding:4px 9px;}
  }
  /* ── 보완: 카드 액션·배지·접근성·반응형 ───────────────────── */
  /* +N 배지: 절대배치 → 이름과 액션 사이 인라인 필 */
  /* 타이밍·지역평균 지표 칩 */
  .stat-chip .up-color{color:var(--up);font-weight:700;}
  .stat-chip .down-color{color:var(--down);font-weight:700;}
  .stat-chip .neu-color{color:var(--muted2);font-weight:700;}
  /* 신고가(강조=골드)·신저가(파랑) 배지 */
  .hilo-badge{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;border-radius:99px;vertical-align:middle;}
  .hilo-badge.hi{background:var(--up-soft);color:var(--up);}
  .hilo-badge.lo{background:var(--down-soft);color:var(--down);}
  /* 상세시트 요약 지표 블록 */
  .detail-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;padding:14px 0 12px;border-bottom:1px solid var(--border);margin-bottom:6px;}
  .ds-item{min-width:0;}
  .ds-k{font-size:11px;color:var(--muted);margin-bottom:3px;}
  .ds-v{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;}
  .ds-v.up-color{color:var(--up);}.ds-v.down-color{color:var(--down);}.ds-v.neu-color{color:var(--muted2);}
  .ds-sub{font-family:inherit;font-size:10px;font-weight:400;color:var(--muted);}
  /* ── 모드 토글 + 발굴 랭킹 ── */
  .disc-select{width:auto;min-width:108px;padding:9px 12px;}
  .disc-pyeong{display:flex;gap:5px;flex-wrap:wrap;}
  .disc-pyeong-btn{background:var(--sunk);border:1px solid var(--line);color:var(--ink-2);padding:8px 13px;border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s,color .15s;}
  .disc-pyeong-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700;}
  .discover-note{font-size:11px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
  .disc-row{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:13px;margin-bottom:9px;transition:border-color .15s,box-shadow .15s;}
  .disc-row:hover{border-color:var(--line-2);box-shadow:var(--shadow);}
  .disc-rank{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;color:var(--muted);text-align:center;}
  .disc-row:nth-child(-n+3) .disc-rank{color:var(--accent);}
  .disc-main{min-width:0;}
  .disc-name{font-size:14.5px;font-weight:700;letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .disc-meta{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* 정렬 기준 강조 지표 (오른쪽 큰 값 + 라벨) */
  .disc-metric{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;}
  .disc-metric-val{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;line-height:1.1;}
  .disc-metric-val.accent-color{color:var(--accent);}
  .disc-metric-lbl{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.4px;margin-top:2px;}
  .disc-unit{font-size:10px;font-weight:600;color:var(--muted2);margin-left:1px;}
  .disc-dong,.ac-dong{font-size:11px;font-weight:500;color:var(--muted);}
  /* 저/중/고층 태그 (절대 층수 근사) — 저층 파랑·중층 회색·고층 골드 */
  .floor-tier{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;border-radius:99px;vertical-align:middle;margin-left:3px;}
  .floor-tier.low{background:var(--down-soft);color:var(--down);}
  .floor-tier.mid{background:var(--sunk);color:var(--ink-2);}
  .floor-tier.high{background:var(--accent-soft);color:var(--accent);}
  /* 차트 추세선(회귀) — 점선, 애니메이션 없음(펄스·글로우 금지) */
  .trend-line{opacity:.85;}
  .trend-line.vivid{opacity:1;}
  .trend-tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;margin-left:2px;white-space:nowrap;}
  .trend-tag.up{background:var(--up-soft);color:var(--up);}
  .trend-tag.down{background:var(--down-soft);color:var(--down);}
  .trend-tag.flat{background:var(--sunk);color:var(--ink-2);}
  /* 오래된 실거래(최근가가 과거) 표시 */
  .stale-tag{font-size:9px;font-weight:700;padding:1px 6px;border-radius:99px;background:var(--sunk);border:1px solid var(--line);color:var(--muted);white-space:nowrap;}
  /* 아파트 추가 모달: 크게 + 시/도·구/군 2열 + 자주선택 pill */
  .modal-box-lg{max-width:560px;}
  .quick-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
  .quick-pills-label{font-size:11px;color:var(--muted);margin-right:2px;}
  .quick-pill{background:var(--sunk);border:1px solid var(--line);color:var(--ink-2);padding:5px 11px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s;white-space:nowrap;}
  .quick-pill:hover{border-color:var(--accent);color:var(--accent);}
  @media(max-width:640px){
    .form-row-2 .form-group{margin-bottom:18px !important;}
    .modal-box-lg{max-width:100%;}
  }
  .disc-add{background:var(--accent-soft);color:var(--accent);border:none;padding:8px 13px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s;}
  .disc-add:hover{background:var(--accent-soft);filter:brightness(.97);}
  .disc-add:disabled{background:var(--sunk);color:var(--muted);cursor:default;border:1px solid var(--line);}
  @media(max-width:640px){
    .disc-row{grid-template-columns:26px 1fr auto;gap:8px 10px;}
    .disc-metric{grid-column:2;grid-row:2;align-items:flex-start;flex-direction:row;gap:5px;}
    .disc-metric-lbl{margin-top:0;align-self:center;}
    .disc-actions{grid-column:3;grid-row:1/3;align-self:center;flex-direction:column;gap:6px;}
  }
  /* 키보드 포커스 가시성 */
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .period-btn:focus:not(:focus-visible),.chart-tab:focus:not(:focus-visible){outline:none;}
  /* 모바일: 광고 패널을 차트 아래로 (order) */
  /* 사용자 모션 최소화 선호 존중 */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  }
  /* ── 노후·터치 기기 UX (iPhone 11 등): 확대방지·세이프에어리어·탭타깃·피드백 ── */
  /* iOS Safari: 입력 폰트 16px 미만이면 포커스 시 자동 확대 → 16px 로 방지 */
  @media (max-width:640px){
    input[type=text], select, .disc-select, .budget-input{ font-size:16px; }
  }
  /* 세이프에어리어: 노치·홈 인디케이터 영역 침범 방지 (모바일 한정, 데스크톱 여백 보존)
     #dashboard-screen 쪽 안쪽 패딩은 assets/css/shell.css 로 이관 — #dashboard-screen 은
     셸 셀렉터라 청약 페이지에도 뜬다. #toast 는 이 화면 전용이라 여기 남긴다. */
  @supports (padding:max(0px)){
    #toast{ bottom:max(90px, calc(env(safe-area-inset-bottom) + 78px)); }
  }
  /* 토글 칩 체크표시 — :has 미지원(구형 Safari<15.4) 대비 .on 클래스 폴백 */
  .region-avg-toggle.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
  /* 터치 기기(hover 없음): 탭 타깃 ≥44px + 즉각 눌림 피드백
     .btn-theme 는 assets/css/shell.css 로 이관 — 셸 셀렉터라 청약 페이지에도 뜬다. */
  @media (hover:none) and (pointer:coarse){
    body{ -webkit-tap-highlight-color:transparent; }
    .period-btn,.disc-pyeong-btn,.pyeong-btn,.btn-add,
    .disc-add,.btn-ghost,.btn-primary,.quick-pill,.detail-tab,.chart-tab{
      min-height:44px; display:inline-flex; align-items:center; justify-content:center;
    }
    .modal-close{ padding:8px 12px; margin:-8px -12px; }
    .period-btn:active,.disc-pyeong-btn:active,.pyeong-btn:active,
    .btn-add:active,.disc-add:active,.btn-ghost:active,
    .btn-primary:active,.quick-pill:active,.region-avg-toggle:active,.disc-row:active,
    .apt-select-item:active,.chart-tab:active,.detail-tab:active{ transform:scale(0.97); opacity:.9; }
  }

  /* 사이드바(#site-sidebar·.rail-*)와 페이지 브레드크럼(.page-crumbs)은 assets/css/shell.css 로 이관 */

  /* '단지 추가' 는 헤더가 아니라 관심단지 화면 안에 둔다 — 목록 바로 옆이 맥락상 맞고,
     헤더는 메뉴 전용으로 비워야 화면이 늘어나도 버틴다. */
  .cards-toolbar .btn-add{height:30px;padding:0 10px;font-size:12px;}
  .cards-toolbar .btn-add svg{width:13px;height:13px;}
  .wtable-head-right .btn-add{height:32px;padding:0 12px;font-size:12.5px;}
  .empty-cta{padding:30px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}
  .empty-cta p{color:var(--muted);font-size:13px;}
  @media(max-width:640px){ .wtable-head-right .wtable-hint{display:none;} }

  /* 페이지 머리말(.page-title·.page-desc)은 assets/css/shell.css 로 이관 */

  /* ── 필터바 규격(전 화면 공용) ───────────────────────────────────
     핵심 필터는 늘 보이고, 나머지는 '상세필터'로 접는다. 접힘 토글은 common.js 의 toggleAdv().
     화면마다 필터 종류가 달라 마크업은 각자 쓰고, 여기서는 틀과 간격만 정한다. */
  .filterbar{background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:9px 13px;margin-bottom:12px;box-shadow:0 1px 2px rgba(20,30,50,.03);}
  .filterbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  /* 필터바가 이미 아래 간격을 놓는다 — 뒤따르는 첫 블록이 제 margin 을 또 놓으면 26px 이 된다 */
  .filterbar + *{margin-top:0;}
  .filterbar-label{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;}
  .filterbar-sep{width:1px;height:22px;background:var(--line);flex:none;}
  .filterbar-gap{flex:1;min-width:0;}
  .filterbar-adv{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
    margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);animation:cf .2s ease both;}
  .filterbar-adv[hidden]{display:none;}
  @keyframes cf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){ .filterbar-adv{animation:none;} }
  /* 드롭다운형 필터 버튼 */
    border-radius:10px;padding:7px 13px;font:600 13px inherit;color:var(--ink);cursor:pointer;font-family:inherit;
    transition:border-color .15s;}
  .fb-select.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:700;}
  /* 칩형 다지선다 */
    padding:5px 11px;font:500 12.5px inherit;font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s;}
  .fb-chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:600;}
  /* '상세필터' 토글 */
  .fb-adv-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--card2);
    border-radius:10px;padding:8px 13px;font:600 13px inherit;font-family:inherit;color:var(--muted2);cursor:pointer;
    transition:border-color .15s,color .15s;}
  .fb-adv-btn:hover,.fb-adv-btn.on{border-color:var(--accent);color:var(--accent);}
  .fb-adv-btn svg{width:15px;height:15px;flex:none;}

/* 차트에 그릴 거래가 없을 때 — '실패'가 아니라 '그 기간에 없음'임을 말하고 빠져나갈 길을 준다.
   거래가 뜸한 단지는 흔하다(실측: 서울 30평대 단지의 31.6% 가 최근 5개월 거래 0건). */
.chart-none{height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:var(--muted);font-size:13px;text-align:center;padding:0 16px;}
.chart-none p{margin:0;}
.chart-none-sub{font-size:11.5px;opacity:.85;}
.chart-none button{margin-top:8px;}