/* parcel-detail.css — 필지 상세(건축물대장+거래이력) 모달 스타일
 * 출처: records.html 인라인 <style>의 모달 블록을 추출(2026-08-19). 처음엔 지도만 썼고,
 *   2026-08-31 부터 공개 메인·기록실·브리핑·지도가 전부 이 한 벌을 쓴다(parcel-detail.js 와 짝).
 * 색 토큰은 아래 .ov 에서 자체 고정한다 — 호스트 페이지 변수에 기대지 않는다.
 */
/* ★대장은 어디서 보든 같아야 한다(2026-08-31 사용자) — 호스트마다 달랐던 색 토큰을 여기서 고정.
   값은 공개 사이트 기준(--muted 는 WCAG AA 통과판 #767670, 2026-08-23 — 지도는 옛 #8a8a85 였다).
   ★.ov(모달 겉) 에만 건다 — 호스트의 같은 이름 변수를 건드리지 않는다: 매물관리는
   --card:#fff·--ink:#16202c 로 뜻이 아예 다르다(전역에 풀면 앱 카드가 회색이 된다). */
  .ov{--plane:#fff;--surface:#fff;--card:#f3f3f1;--hover:#eeeeec;
      --ink:#111827;--ink2:#4b4b47;--muted:#767670;
      --grid:#ececea;--border:rgba(0,0,0,.09);
      --up:#089981;--down:#f23645;--accent:#2563eb}
  /* ★층 순서(2026-09-29 사장님: "거리뷰 보다가 대장을 누르면 뒤에 깔려 안 보인다")
     후보 창 1500 > 대장 모달 1400 > 거리뷰 1200 > 지도 말풍선 900.
     대장은 **눌러서 연 것**이라 그때 보고 싶은 것이 그것이다 — 맨 위로 올린다.
     공개 사이트·기록실·브리핑에는 60 보다 높은 것이 없어 영향이 없다(전수 확인). */
  .ov{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-start;justify-content:center;z-index:1400;padding:20px;overflow:auto;overscroll-behavior:contain}
  .ov.on{display:flex}
  html.noscroll,body.noscroll{overflow:hidden}
  .mb{overscroll-behavior:contain}
  .modal{background:#fff;border-radius:16px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column}
  .mh{padding:16px 20px;border-bottom:1px solid var(--grid);display:flex;align-items:center;gap:10px;flex-shrink:0}
  .mh .mt{font-weight:800;font-size:15px} .mh .ms{color:var(--muted);font-size:12px}
  /* 닫기는 <button> — 기본 테두리·배경만 걷어내고 글자 모양은 그대로 */
  .mh .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:20px;font-weight:700;line-height:1;
         border:0;background:none;padding:0;font-family:inherit}
  .mh .x:hover{color:var(--ink)}
  .mnav{margin-left:auto;display:flex;gap:5px;align-items:center}
  .mnav+.x{margin-left:8px}
  .mnav button{width:29px;height:29px;border:1px solid var(--grid);background:#fff;border-radius:8px;cursor:pointer;font-size:17px;line-height:1;color:var(--ink2);display:flex;align-items:center;justify-content:center;padding:0}
  .mnav button:hover:not(:disabled){background:var(--card);color:var(--ink)}
  .mnav button:disabled{opacity:.3;cursor:default}
  .mb{padding:6px 20px 18px;overflow-y:auto;min-height:0}
  .frow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--grid);font-size:13.5px}
  .frow:last-child{border-bottom:0} .frow .fk{color:var(--muted)} .frow .fv{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
  .estv{color:#7c3aed;font-weight:800}
  .mnote{background:#f7f7f5;border-radius:9px;padding:10px 12px;color:var(--muted);font-size:11.5px;line-height:1.5;margin:12px 0 4px}
  .msum{background:linear-gradient(135deg,#eff6ff,#f3faf5);border:1px solid var(--grid);border-radius:12px;padding:13px 16px;margin:10px 0 6px}
  .msum .amt{font-size:26px;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
  .msumrow{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
  .msum .sub{color:var(--ink2);font-size:12.5px;font-weight:600;text-align:right;white-space:nowrap;line-height:1.4}
  .msum-addr{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px;display:flex;align-items:center}
  .copyic{margin-left:5px;padding:3px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:5px;line-height:0;display:inline-flex}
  .copyic:hover{background:#fff;color:var(--accent)} .copyic.done{color:#089981}
  /* 토지면적이 묶음 합일 때 붙는 꼬리표 — 값 옆 작은 회색 글씨(2026-08-30) */
  .frow .fv .bsum{color:var(--muted);font-weight:600;font-size:11.5px;margin-left:4px;white-space:nowrap}
  .mseclabel{font-size:11px;font-weight:800;color:var(--muted);margin:14px 0 0}
  .mlinks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 2px}
  .mlink{text-align:center;padding:9px;border:1px solid var(--border);border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink2);text-decoration:none;background:#fff}
  .mlink:hover{background:var(--card);border-color:var(--accent);color:var(--accent)}
  .jbt{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
  .jbt th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;padding:6px 8px;border-bottom:1px solid var(--grid)}
  .jbt td{padding:8px;border-bottom:1px solid var(--grid);color:var(--ink)}
  .jbt .r{text-align:right} .jbt .bcell{text-align:right;white-space:nowrap} .jbt .dcell{white-space:nowrap}
  .jbt tr.jc td{color:var(--muted)}
  .pbadge{background:rgba(91,140,255,.10);color:var(--ink2);font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:6px;white-space:nowrap}
  .jbadge{background:#fdecec;color:var(--down);font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:6px;white-space:nowrap}
  /* 여러 필지 묶음 신고 — 경고(해제)가 아니라 '읽는 법' 안내라 색을 낮춘다 */
  .jbadge.bd{background:rgba(91,140,255,.12);color:#2f5bd0}
  /* 땅 일부만 산 거래 — bd 와 반대 방향(신고 토지면적이 대장보다 '좁다'). 경고가 아니라 읽는 법 안내 */
  .jbadge.pt{background:#fff7ed;color:#9a3412}
  .jbsec{font-weight:700;font-size:12px;color:var(--muted);margin:16px 0 2px;padding-top:12px;border-top:1px solid var(--grid)}
  /* 층별 정보 + 업종현황 — 공개 사이트와 같은 값(2026-08-31). 대장이 '그릇', 소진공이 '내용물' */
  .flr{margin-top:6px;border-top:1px solid var(--grid)}
  .flr-r{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--grid);align-items:start}
  .flr-r:last-child{border-bottom:none}
  .flr-n{font-weight:700;font-size:12.5px;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
  .flr-u{font-size:12.5px;line-height:1.5}
  .flr-a{color:var(--muted);font-weight:600;font-size:11.5px;margin-left:5px;white-space:nowrap}
  .flr-s{margin-top:3px;font-size:12px;color:var(--accent);line-height:1.55}
  .flr-more{padding:8px 0 0;font-size:12px;color:var(--muted)}
  /* 건축 이력(인허가) — 종류별 색: 대수선 파랑 · 증축/개축/재축 초록 · 용도변경 보라 */
  .pmt{margin-top:6px;border-top:1px solid var(--grid)}
  .pmt-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--grid);font-size:13px}
  .pmt-row:last-child{border-bottom:0}
  .pmt-ds{flex:1;min-width:0;color:var(--ink2);font-size:12.5px;font-variant-numeric:tabular-nums;line-height:1.5}
  .pmt-t{font-weight:700;padding:2px 8px;border-radius:6px;font-size:11.5px;white-space:nowrap}
  .pmt-t.t-a{background:#eef4ff;color:#2f5bd0}
  .pmt-t.t-b{background:#eaf7f0;color:#0b7a5a}
  .pmt-t.t-c{background:#f6f1fd;color:#6d3fc4}
  .pmt-m{color:var(--ink2);font-size:12.5px;margin-left:auto;text-align:right}
  .snote{padding:11px 12px;color:var(--muted);font-size:12px}
  @media(max-width:520px){
    .msum{padding:12px 13px}
    .msum .amt{font-size:21px}
    .msum .amt span{white-space:nowrap;display:inline-block}
    .frow{font-size:12.5px;gap:10px;padding:10px 0}
    .frow .fk{white-space:nowrap;flex:0 0 auto}
    .frow .fv{text-align:right;min-width:0}
    .jbt{font-size:11px;table-layout:fixed;width:100%}
    .jbt th,.jbt td{padding:6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .jbt th:nth-child(1),.jbt td:nth-child(1){width:34%}
    .jbt th:nth-child(2),.jbt td:nth-child(2){width:22%}
    .jbt th:nth-child(3),.jbt td:nth-child(3){width:22%}
    /* 좁은 화면에서 평당가 칸의 '외 N필지' 배지가 …로 잘리던 것 — 그 칸만 줄바꿈을 허용해 아래로 내린다 */
    .jbt td:nth-child(3){white-space:normal;overflow:visible;text-overflow:clip}
    .jbt td:nth-child(3) .jbadge{display:inline-block;margin-top:3px}
    .jbt th:nth-child(4),.jbt td:nth-child(4){display:none}
    .jbt .bcell{width:22%;text-align:right}
    /* ★공시지가 표(.pbt)는 4칸이 전부 뜻이 있다 — 거래 이력의 '용도 숨김' 규칙을 물려받으면 안 된다 */
    .pbt th:nth-child(4),.pbt td:nth-child(4){display:table-cell;width:22%}
    .pbt th:nth-child(1),.pbt td:nth-child(1){width:22%}
    .pbt th:nth-child(2),.pbt td:nth-child(2){width:28%}
    .pbt th:nth-child(3),.pbt td:nth-child(3){width:28%;white-space:nowrap}
    .rsr td{font-size:10.5px;white-space:normal}
    .pbnums{gap:8px} .pbnums > div{padding:8px 9px}
  }

/* ══════════════ 공시지가 흐름 · 사서 되판 짝 (2026-09-23) ══════════════
   ★색 토큰은 위 .ov 블록 것만 쓴다 — 호스트(공개 사이트·기록실·브리핑·지도)마다 달라지면 안 된다.
     오름/내림은 여기서만 쓰는 두 색이다(--down 은 '해제' 배지가 이미 쓰고 있어 헷갈리지 않게 따로 둔다). */
  .ov{--rise:#127a4b;--fall:#b42318}
  /* 거래 이력 줄의 '공시 ×N' — 평당가 칸 아래에 작게 붙는다 */
  .pmul{display:inline-block;margin-top:3px;background:#f2f4f7;color:var(--ink2);
        font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:6px;white-space:nowrap;cursor:help}
  /* ★확정 근거 표시(2026-09-27) — 계약일 아래 작은 한 줄.
     회색빛 초록 = '대장과 맞춰 봤다'. 값이 아니라 **근거**를 말하는 표시라 금액보다 조용해야 한다
     (보라색 추정 표시와 같은 생각: 화면이 스스로 무엇을 아는지 밝힌다). */
  .gchk{margin-top:2px;color:#127a4b;font-size:10px;font-weight:700;white-space:nowrap;cursor:help;opacity:.85}

  /* '산 값 대비 얼마에 되팔았나' 한 줄 — 판 줄 바로 아래 */
  .jbt tr.rsr td{padding:5px 8px 7px;border-bottom:1px solid var(--grid);
                 background:rgba(91,140,255,.05);font-size:11.5px;color:var(--ink2)}
  /* ★토막마다 nowrap — 좁은 화면에서 '1.56배'가 '배'만 다음 줄로 떨어지던 것(2026-09-23 폰 실측) */
  .rsk{color:var(--muted);font-weight:600;white-space:nowrap}
  .rsv{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
  .rsv.up{color:var(--rise)} .rsv.dn{color:var(--fall)}
  .rsm{color:var(--muted);font-weight:700;font-size:11px;white-space:nowrap}
  .rsg{white-space:nowrap;cursor:help}
  /* 선 그래프 */
  .pbwrap{margin:8px 0 2px}
  .pbsvg{display:block;max-width:100%}
  .pbsvg text{font:11px -apple-system,"Apple SD Gothic Neo",sans-serif;fill:var(--muted)}
  .pbsvg .v{font-weight:800;fill:var(--ink)}
  .pbsvg line{stroke:var(--grid);stroke-width:1}
  .pbsvg .ar{fill:#1b62d6;fill-opacity:.08}
  .pbsvg .ln{fill:none;stroke:#1b62d6;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  .pbsvg .dt{fill:#1b62d6} .pbsvg .dl{fill:#d9760f}
  /* 숫자 세 칸 */
  .pbnums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 2px}
  .pbnums > div{background:var(--card);border-radius:9px;padding:9px 10px;min-width:0}
  .pbnums > div span{display:block;color:var(--muted);font-size:11px;font-weight:600}
  .pbnums > div b{display:block;font-size:14px;font-weight:800;color:var(--ink);
                  font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
  .pbnums > div b.up{color:var(--rise)} .pbnums > div b.dn{color:var(--fall)}
  .pbnums > div small{display:block;color:var(--muted);font-size:10.5px;font-weight:600;margin-top:1px;white-space:nowrap}
  /* 연도별 표 접기 */
  .pbmore{margin-top:8px}
  .pbmore > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;
                    font-size:11.5px;font-weight:700;color:var(--ink2);
                    border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:#fff}
  .pbmore > summary::-webkit-details-marker{display:none}
  .pbmore > summary::after{content:"▾";color:var(--muted);font-size:10px}
  .pbmore[open] > summary::after{content:"▴"}
  .pbt{margin-top:8px}

/* ══════════════ 주변 유사거래 (2026-09-24) ══════════════ */
  .nopen{width:100%;padding:11px;border:1px solid var(--border);border-radius:10px;background:#fff;
         font:inherit;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer}
  .nchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px}
  .nchip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:5px 11px;
         font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
  .nchip.on{background:#1b62d6;border-color:#1b62d6;color:#fff}
  .nsep{width:1px;height:16px;background:var(--grid);margin:0 3px}
  .nrt tbody tr{cursor:pointer}
  .nrt tbody tr:hover{background:var(--hover)}
  .nym{color:var(--muted);font-weight:600;font-size:10.5px}
  .nmore{color:var(--muted);font-weight:700;font-size:10.5px;white-space:nowrap}
  /* ★거리 칸은 좁게, 지번 칸이 두 줄이라 폰에서도 '용도 숨김' 규칙을 물려받지 않는다 */
  @media(max-width:520px){
    .nrt th:nth-child(1),.nrt td:nth-child(1){width:16%}
    .nrt th:nth-child(2),.nrt td:nth-child(2){width:42%;white-space:normal}
    .nrt th:nth-child(3),.nrt td:nth-child(3){width:20%;display:table-cell}
    .nrt th:nth-child(4),.nrt td:nth-child(4){width:22%;display:table-cell;white-space:nowrap}
  }
  .nbrief{display:block;margin-top:10px;padding:12px;border-radius:10px;background:#1b62d6;color:#fff;
          text-align:center;font-size:13px;font-weight:800;text-decoration:none}

/* ★같은 날 건물별 분할 신고의 합계 줄(2026-10-01) — '사서 되판 짝'(.rsr)과 같은 모양,
   색만 호박색으로 구분한다. 수익률이 아니라 **합계**라는 다른 성질의 줄이기 때문이다. */
  .jbt tr.spr td{padding:5px 8px 7px;border-bottom:1px solid var(--grid);
                 background:rgba(245,158,11,.08);font-size:11.5px;color:var(--ink2)}
  .jbt tr.spr .rsv{color:#b45309}