/* =========================================================================
   다원경매 · 보고서형 상세페이지 스타일 (report.css)
   -------------------------------------------------------------------------
   [출처] docs/redesign/다원경매_분석보고서_2024타경1733_샘플.html <head><style>
          블록을 그대로 승격(가이드 §0 "새로 작성하지 말 것").
          아래 "── 샘플 원본 ──" 구간은 시각 SSOT 이므로 임의 수정 금지.
   [범위] detail-v2.html 의 **본문 컬럼(.page)** 전용.
   [스코프 격리 — 팀장 지시] 우측 사이드바는 detail.html 원형(마크업·CSS·스크립트)을
          그대로 쓰므로, 이 파일의 규칙이 사이드바로 새면 안 된다. 따라서
            · 토큰 블록 선택자 `:root`  → `.page,.rpt-wrap,.rpt-fab` 로 한정
              (사이드바가 쓰는 detail.html 의 `:root` 토큰과 변수명이 겹쳐도 무간섭)
            · 리셋 `*`                   → `.page *` 로 한정
            · `body{…}`                  → `.page{…}` 로 한정
          그 밖의 규칙은 전부 보고서 전용 클래스명이라 사이드바 DOM 과 교집합이 없다.
          ※ 위 3곳 외에는 샘플 <style> 블록의 선언(declaration)을 한 글자도 바꾸지 않았다.
   ========================================================================= */

/* ══════════════════ 샘플 원본(verbatim · 선택자만 .page 스코프로 한정) ══════════════════ */
.page,.rpt-wrap,.rpt-fab{
  --navy:#24466E; --blue:#2E6BF2; --blue-d:#1D4ED8; --teal:#1AC9BC;
  --ink:#232D3B; --sub:#5C6B80;
  /* --faint : [2026-07-30 대표 승인 — 작은 회색 글씨 가독성] #93A1B3 → #647082
     구값 실측(detail.html 실렌더 감사, 대상 텍스트 노드 152개)
       흰 패널 2.63:1 · 실사용 최악 배경 --p-blue(#EFF5FE) 위 2.40:1
       ※ 팀장 전달값 3.04:1 보다 더 낮았다(3.04 는 tokens.css --ink3 구값 수치).
       쓰이는 자리가 10.3~11.4px 캡션(출처·근거·단위 병기)이라 가장 작은 글씨에
       가장 낮은 대비였고, 큰 글자 기준 3:1 에도 미달했다.
     신값 실측 — 실사용 배경 8종 전부 4.5:1 이상
       #FFFFFF 5.02 · #FDFEFF 4.96 · #FBFCFE 4.89 · #FEF9EB 4.77 ·
       #F5F9FD 4.74 · #F5F7FA 4.68 · #FDF3F2 4.61 · #EFF5FE 4.58(최저)
     tokens.css --ink3(#626C79)와 같은 값으로 통일하지 않은 이유:
       #626C79 는 --sub(#5C6B80)와 L* 차이가 0.5 밖에 안 나 캡션과 보조본문의
       위계가 사라진다. #647082 는 L* 차이 +2.1 로 '캡션이 한 단 밝다'가 유지된다
       (--ink 18.1 < --sub 44.7 < --faint 46.9 — 순서 뒤집힘 없음). */
  --faint:#647082;
  --line:#C6D2E0; --line-soft:#E0E8F1; --bg:#EDF1F6;
  --p-blue:#EFF5FE; --p-blue-bd:#C7DBF6;
  --p-red:#FDF3F2; --p-red-bd:#F0CCC8; --red:#C0392B;
  --p-amber:#FEF9EB; --p-amber-bd:#EFDEAB;
  /* --amber : [2026-07-30 팀장 승인 — 위험 고지 라벨 가독성] #A5730A → #9A5B00
     구값 실측(detail.html 실렌더 감사)
       흰 패널 4.15:1 · 경고 패널 --p-amber(#FEF9EB) 위 3.95:1 · #EEF3FA 위 3.73:1
     대상이 10.5~13.4px 굵은 '경고' 라벨 30여 곳이다
       "⚠ 등기부 확인 필수" · "⚠ 왜 4번이나 유찰됐을까요?" · "산정 불가" ·
       "⚠ 과밀억제권역" · .spec-flag.sev-mid · .sum.a .s-lv
     안 읽히는 경고는 경고가 아니다 — 위험을 알렸는데 안 보이면 안 알린 것과 같다.
     신값 #9A5B00 = tokens.css 의 --warn 과 '같은 값'이다(디자인 시스템으로 수렴).
       흰 5.43 · #FDFEFF 5.37 · --p-amber 5.16 · #EEF3FA 4.87 · #FBEFC9 4.73(최저) — 전부 통과 */
  --amber:#9A5B00;
  --p-green:#F1FAF4; --p-green-bd:#C2E5CD; --green:#1E7F45;
  --p-gray:#F5F7FA;
}
.page *{box-sizing:border-box;margin:0;padding:0}
html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* [초기 로딩 최적화 · P1] 스택에서 static 'Pretendard' 를 뺀다.
   가변 폰트(dynamic-subset)가 본문 글리프의 99.97% 를 덮는데(실측 9,797 vs 3),
   나머지 3글리프(특수기호) 때문에 굵기별 통짜 파일 747~781KB 가 통째로 내려왔다.
   그 3글리프는 시스템 한글 폰트로 렌더된다 — 기호 모양 차이는 육안 식별 불가 수준이고,
   대신 초기 폰트 전송 2.3MB 와 그로 인한 재레이아웃이 사라진다.
   ※ head 의 static/pretendard.css 링크 자체는 남겨 둔다(ai-report·rent-law 모달이
      font-family:"Pretendard" 를 명시 — 그 화면을 열 때만 내려오므로 초기 경로와 무관). */
.page{background:var(--bg);font-family:'Pretendard Variable',-apple-system,BlinkMacSystemFont,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:var(--ink);line-height:1.55;font-size:14px}
.page{max-width:1020px;margin:28px auto;background:#fff;box-shadow:0 2px 26px rgba(36,70,110,.10);border-radius:4px;padding:50px 54px 42px}

/* ── 문서 상단 ── */
.doc-top{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:13px;border-bottom:3px solid var(--navy);position:relative}
.doc-top::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand-tx b{display:block;font-weight:800;font-size:17px;color:var(--navy);letter-spacing:-.3px;line-height:1.2}
.brand-tx span{font-size:9.5px;color:var(--faint);letter-spacing:2.8px;font-weight:700}
.doc-kind{text-align:right;font-size:11.5px;color:var(--sub);line-height:1.7}
.doc-kind b{display:block;font-size:14.5px;color:var(--navy);letter-spacing:5px;font-weight:800}

/* ── 타이틀 ── */
.title-zone{margin-top:26px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.page .tag{display:inline-flex;align-items:center;gap:4px;padding:3.5px 11px;border-radius:99px;font-size:11.5px;font-weight:800;line-height:1.4}
.page .tag.navy{background:var(--navy);color:#fff}
.page .tag.blue{background:#DEEAFD;color:var(--blue-d)}
.page .tag.red{background:#FBE3E1;color:#B3372E}
.page .tag.line{background:#fff;border:1.3px solid var(--line);color:var(--sub)}
.h-addr{font-size:27px;font-weight:800;letter-spacing:-.6px;color:#16243A;line-height:1.3}
.h-meta{margin-top:9px;font-size:13px;color:var(--sub);display:flex;gap:6px 16px;flex-wrap:wrap}
.h-meta b{color:var(--ink);font-weight:700}

/* ── KPI ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.kpi{border:1.3px solid var(--p-blue-bd);background:var(--p-blue);border-radius:14px;padding:14px 16px 12px}
.kpi.warn{background:var(--p-red);border-color:var(--p-red-bd)}
.k-lab{font-size:11.5px;font-weight:800;color:var(--sub);display:flex;justify-content:space-between;align-items:center}
.k-lab .pc{font-size:10.5px;background:#fff;border-radius:99px;padding:1px 7px;color:var(--blue-d);border:1px solid var(--p-blue-bd)}
.kpi.warn .k-lab .pc{color:#B3372E;border-color:var(--p-red-bd)}
.k-val{font-size:21.5px;font-weight:800;margin-top:5px;letter-spacing:-.4px;color:#16243A;font-variant-numeric:tabular-nums}
.kpi.warn .k-val{color:var(--red)}
.k-sub{font-size:10.8px;color:var(--faint);margin-top:3px;line-height:1.5}
/* [2026-08-03] 축약 라벨의 법정 명칭 병기 — 카드는 '최저가', 정식 명칭은 여기 작게.
   법원 매각공고와 대조할 때 용어가 끊기지 않도록 남기는 표기라 더 옅게 두되 지우지는 않는다.
   줄바꿈을 허용해(nowrap 금지) 360px 에서 카드 폭을 밀지 않는다. */
.k-sub .k-alias{color:var(--faint);opacity:.85;white-space:normal;word-break:keep-all}

/* ── AI 요약 3카드 ── */
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sum{border-radius:14px;border:1.5px solid;padding:14px 15px 12px}
.sum .s-lv{font-size:11px;font-weight:800;letter-spacing:.4px;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.sum .s-lv i{font-style:normal;width:18px;height:18px;border-radius:6px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px}
.sum .s-tt{font-size:14.2px;font-weight:800;margin-bottom:9px;line-height:1.45;letter-spacing:-.2px}
.sum .s-bd{background:rgba(255,255,255,.78);border-radius:10px;padding:9px 11px;font-size:12.3px;color:#3E4C61;line-height:1.6}
.sum .s-src{margin-top:8px;font-size:10.3px;color:var(--faint)}
.sum.a{background:var(--p-amber);border-color:var(--p-amber-bd)} .sum.a .s-lv{color:var(--amber)}
.sum.b{background:var(--p-blue);border-color:var(--p-blue-bd)} .sum.b .s-lv{color:var(--blue-d)}
.sum.r{background:var(--p-red);border-color:var(--p-red-bd)} .sum.r .s-lv{color:#B3372E}

/* ── 시나리오 비교 ── */
.scen{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scen-card{border-radius:14px;border:1.5px solid;padding:16px 18px 14px;position:relative}
.scen-card.ok{background:var(--p-green);border-color:var(--p-green-bd)}
.scen-card.no{background:var(--p-red);border-color:var(--p-red-bd)}
.sc-tag{font-size:11px;font-weight:800;letter-spacing:.4px}
.scen-card.ok .sc-tag{color:var(--green)} .scen-card.no .sc-tag{color:#B3372E}
.sc-tt{font-size:14.5px;font-weight:800;margin:5px 0 3px}
.sc-val{font-size:25px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.scen-card.ok .sc-val{color:var(--green)} .scen-card.no .sc-val{color:var(--red)}
.sc-sub{font-size:11.8px;color:#4A596E;margin-top:5px;line-height:1.6}

/* ── 공통 부품 ── */
.sec{margin-top:46px}
.sec-head{display:flex;align-items:center;gap:11px;border-bottom:2.5px solid var(--navy);padding-bottom:10px;margin-bottom:16px}
.sec-num{min-width:35px;height:35px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;letter-spacing:0}
.sec-tt{font-size:18.5px;font-weight:800;letter-spacing:-.3px;color:#16243A}
.sec-src{margin-left:auto;font-size:11.3px;color:var(--faint);text-align:right}
.sub-tt{font-size:13.6px;font-weight:800;color:var(--navy);margin:18px 0 9px;display:flex;align-items:center;gap:7px}
.sub-tt::before{content:'';width:4px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--teal))}
.sub-tt small{font-weight:600;color:var(--faint);font-size:11px;margin-left:2px}

.page table.tb{width:100%;border-collapse:collapse;font-size:12.7px;background:#fff}
.page .tb th,.page .tb td{border:1px solid var(--line);padding:7.5px 10px;text-align:left;vertical-align:middle;line-height:1.5}
.page .tb thead th{background:#E9F1FB;color:var(--navy);font-weight:800;font-size:12.2px;text-align:center;padding:8px 10px}
.page .tb td.lab{background:#F4F7FB;font-weight:700;color:#41506B;font-size:12.2px;width:112px}
.page .tb .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.page .tb .ct{text-align:center}
.page .tb tr.hl-red td{background:#FDF3F2}
.page .tb tr.hl-amber td{background:#FEF9EB}
.page .tb tr.total td{background:#EEF3FA;font-weight:800}
.page .tb tr.noterow td{background:#FEF9EB;color:#8A6A14;font-size:11.6px}
.page .tb .sm{font-size:11px;color:var(--sub)}

.bd{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:10.6px;font-weight:800;line-height:1.5;white-space:nowrap}
.bd-red{background:#FBE3E1;color:#B3372E}
.bd-blue{background:#DEEAFD;color:var(--blue-d)}
.bd-green{background:#DCF3E4;color:#177A42}
/* [2026-07-30] #9A6E07 하드코딩(3.97:1) → var(--amber)=#9A5B00(4.73:1). R-DS1 하드코딩 해소 겸 */
.bd-amber{background:#FBEFC9;color:var(--amber)}
.bd-gray{background:#E8EDF3;color:var(--sub)}

.co{border-radius:13px;border:1.3px solid;padding:14px 17px;font-size:12.8px;line-height:1.68}
.co h4{font-size:13.4px;font-weight:800;margin-bottom:6px;display:flex;gap:7px;align-items:center}
.co.blue{background:var(--p-blue);border-color:var(--p-blue-bd)} .co.blue h4{color:var(--blue-d)}
.co.red{background:var(--p-red);border-color:var(--p-red-bd)} .co.red h4{color:#B3372E}
.co.amber{background:var(--p-amber);border-color:var(--p-amber-bd)} .co.amber h4{color:var(--amber)}
.co.green{background:var(--p-green);border-color:var(--p-green-bd)} .co.green h4{color:var(--green)}
.co.gray{background:var(--p-gray);border-color:var(--line-soft)} .co.gray h4{color:var(--sub)}
.qt{background:#fff;border:1px dashed var(--line);border-radius:9px;padding:9px 12px;font-size:12px;color:#4A596E;margin-top:8px;line-height:1.65}

.bar-row{display:grid;grid-template-columns:158px 1fr 130px;gap:11px;align-items:center;font-size:12.4px;margin:8px 0}
.bar-row .bl{font-weight:700;color:#41506B}
.bar-row .bv{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.track{height:16px;background:#EAF0F7;border-radius:99px;overflow:hidden;border:1px solid #DDE6F0}
.fill{height:100%;border-radius:99px}
.stack{display:flex;height:24px;border-radius:8px;overflow:hidden;border:1px solid #D5DEE9}
.legend{display:flex;gap:6px 15px;flex-wrap:wrap;font-size:11.4px;color:var(--sub);margin-top:9px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}

.tl{display:flex;margin:20px 0 8px}
.tl-s{flex:1;text-align:center;position:relative;padding-top:24px}
.tl-s::before{content:'';position:absolute;top:8px;left:calc(-50% + 9px);width:calc(100% - 18px);height:3px;background:#CFDCEC;border-radius:2px}
.tl-s:first-child::before{display:none}
.tl-dot{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:#fff;border:4.5px solid var(--blue)}
.tl-s.cur .tl-dot{border-color:#C7362F;box-shadow:0 0 0 4px #FBE3E1}
.tl-d{font-size:12.6px;font-weight:800}
.tl-t{font-size:11px;color:var(--sub);margin-top:1px}
.tl-e{font-size:10.3px;color:var(--faint)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #C9D6E6;background:#F5F9FD;border-radius:99px;padding:3.5px 11px;font-size:11.7px;font-weight:600;color:#39506E}
.chip.warn{background:#FEF6E0;border-color:#EBD7A0;color:#96690A}

.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ph{border-radius:11px;overflow:hidden;border:1px solid #D3DDE8}
.ph img{width:100%;height:174px;object-fit:cover;display:block}

.toc{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,auto);grid-auto-flow:column;gap:7px}
.toc a{display:flex;gap:8px;align-items:center;border:1px solid #D3DEEA;background:#F7FAFD;border-radius:10px;padding:7px 10px;font-size:11.7px;font-weight:700;color:#33445E;text-decoration:none}
.toc i{font-style:normal;min-width:21px;height:21px;border-radius:6px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.note{font-size:11.2px;color:var(--faint);margin-top:8px;line-height:1.62}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.chart-wrap{border:1px solid var(--line-soft);border-radius:13px;padding:16px 14px 8px;background:#FDFEFF}
.chart-tt{font-size:12.6px;font-weight:800;color:var(--navy);padding:0 4px 4px}

.mini-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mini{border:1px solid var(--line-soft);border-radius:11px;padding:10px 11px;background:#FBFCFE;position:relative}
.mini b{display:block;font-size:12.2px;letter-spacing:-.2px}
.mini span{font-size:10.6px;color:var(--faint);line-height:1.45;display:block;margin-top:2px}
.mini .mtag{position:absolute;top:8px;right:9px;font-size:8.5px;font-weight:800;padding:1.5px 6px;border-radius:99px}
.mini .pro{background:#FBEFC9;color:var(--amber)}   /* [2026-07-30] #9A6E07 → var(--amber) */
.mini .beta{background:#E5DEFA;color:#5B43C0}
.mini .prep{background:#E8EDF3;color:#7A8AA0}
.mini .guide{background:#DCF3E4;color:#177A42}

footer.rpt{margin-top:52px;border-top:3px solid var(--navy);padding-top:16px}
.f-brand{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11.3px;color:var(--sub);line-height:1.8}
.f-brand b{color:var(--navy);font-size:12.5px}

@media (max-width:760px){
  .page{padding:26px 18px;margin:0}
  .kpi-grid,.sum-grid{grid-template-columns:1fr 1fr}
  .scen,.grid2,.grid3{grid-template-columns:1fr}
  .toc{grid-template-columns:repeat(3,1fr);gap:5px}
  .toc a{font-size:10px;padding:6px 7px;gap:5px}
  .toc i{min-width:17px;height:17px;font-size:9px;border-radius:5px}
  .mini-cards{grid-template-columns:1fr 1fr}
  .h-addr{font-size:21px}
  .bar-row{grid-template-columns:110px 1fr 96px}
}
@media print{
  body{background:#fff}
  .page{box-shadow:none;margin:0;max-width:none;padding:20px 24px;border-radius:0}
  .kpi-grid,.sum-grid,.scen,.co,.tl,.ph-grid,.chart-wrap,.toc{break-inside:avoid}
  .sec-head{break-after:avoid}
  @page{size:A4;margin:11mm}
}

/* ══════════════════ v2 추가(웹 전용 · 인쇄 시 숨김) ══════════════════
   샘플은 정적 문서라 없던 "웹 페이지" 요소만 추가한다.
   원본 클래스(.tb/.co/.kpi …)의 값은 절대 덮어쓰지 않는다. */

/* ── 상단 액션바(관심물건·인쇄·공유·AI 상담) ── */
.act-bar{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px;align-items:center}
.act{display:inline-flex;align-items:center;gap:5px;border:1.3px solid var(--line);background:#fff;
     border-radius:9px;padding:6.5px 12px;font-size:12px;font-weight:700;color:#3E4C61;
     cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.4}
.act:hover{border-color:var(--blue);color:var(--blue-d);background:var(--p-blue)}
.act.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.act.pri:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.act.on{background:#FBE3E1;border-color:var(--p-red-bd);color:#B3372E}
.act[aria-disabled="true"]{opacity:.5;pointer-events:none}
.act-sp{margin-left:auto;font-size:11px;color:var(--faint)}

/* ── sticky 섹션 탭바(목차 앵커 스크롤 스파이) ── */
.navbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
        border-bottom:1px solid var(--line-soft);margin:0 -54px 0;padding:8px 54px;overflow-x:auto;
        white-space:nowrap;-webkit-overflow-scrolling:touch}
.navbar a{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--sub);
          text-decoration:none;padding:5px 9px;border-radius:8px;margin-right:2px}
.navbar a:hover{background:var(--p-blue);color:var(--blue-d)}
.navbar a.cur{background:var(--navy);color:#fff}
.navbar a i{font-style:normal;font-size:10px;opacity:.75}

/* ── 섹션 헤더 우측 원문 링크(.sec-src 안) ── */
.sec-src a{color:var(--blue-d);font-weight:700;text-decoration:none;border-bottom:1px solid var(--p-blue-bd)}
.sec-src a:hover{border-bottom-color:var(--blue)}
.src-links{display:block;margin-top:2px}
.src-links a{margin-left:8px}

/* ── 투자 시뮬레이션 인라인 입력 ── */
.page .tb input.cell-in{width:100%;border:1.3px solid var(--p-blue-bd);background:var(--p-blue);border-radius:7px;
                  padding:5px 8px;font-family:inherit;font-size:12.7px;font-weight:800;text-align:right;
                  color:#16243A;font-variant-numeric:tabular-nums}
.page .tb input.cell-in:focus{outline:2px solid var(--blue);outline-offset:1px;background:#fff}
.page .tb select.cell-in{width:100%;border:1.3px solid var(--line);background:#fff;border-radius:7px;
                   padding:5px 8px;font-family:inherit;font-size:12px;color:#3E4C61}
.sim-ctl{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:9px 0 0;font-size:11.5px;color:var(--sub)}
.sim-ctl .seg{display:inline-flex;border:1.3px solid var(--line);border-radius:8px;overflow:hidden}
.sim-ctl .seg button{border:0;background:#fff;font-family:inherit;font-size:11.3px;font-weight:700;
                     color:var(--sub);padding:5px 10px;cursor:pointer}
.sim-ctl .seg button+button{border-left:1px solid var(--line)}
.sim-ctl .seg button.on{background:var(--navy);color:#fff}

/* ── 빈 상태 / 오류 / 유형 폴백 안내 ── */
.empty{border:1px dashed var(--line);border-radius:11px;padding:18px 16px;background:#FCFDFE;
       font-size:12.4px;color:var(--sub);line-height:1.7;text-align:center}
.empty b{color:#41506B}
.guard{border:1.5px solid var(--p-amber-bd);background:var(--p-amber);border-radius:13px;
       padding:15px 18px;font-size:13px;line-height:1.7;color:#6E4E08;margin-bottom:20px}
.guard b{color:var(--amber)}
.guard a{display:inline-block;margin-top:8px;background:var(--navy);color:#fff;border-radius:9px;
         padding:7px 14px;font-size:12.3px;font-weight:800;text-decoration:none}
.skel{border-radius:13px;background:linear-gradient(90deg,#F1F5FA,#E7EEF7,#F1F5FA);
      background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── 그리드 자식 츕소 허용 ──
   grid 트랙은 min-width:auto 가 기본이라 넓은 표가 들어가면 트랙이 부풀어
   페이지 가로 오버플로우를 만든다(1180px 구간 실측). min-width:0 으로 차단. */
.page .grid2>*,.page .grid3>*,.page .bar-row>*{min-width:0}
.page .grid2 table.tb,.page .grid3 table.tb{table-layout:auto}

/* ── 표 가로 스크롤(모바일 긴 표) ── */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
.page .scrollx>table.tb{min-width:640px}

/* ── AI 상담 FAB(기존 fab.js 대체 · 리스킨) ── */
.rpt-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;
         display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--blue),var(--teal));
         color:#fff;border:0;border-radius:99px;padding:12px 18px;font-family:inherit;font-size:13px;
         font-weight:800;cursor:pointer;text-decoration:none;box-shadow:0 6px 22px rgba(46,107,242,.34)}
.rpt-fab:hover{filter:brightness(1.05)}

@media (max-width:760px){
  /* 좁은 화면에서 넓은 표는 표 자체를 가로 스크롤 박스로 — 페이지 가로 오버플로우 0 보장 */
  .page table.tb{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .page .scrollx{overflow-x:visible}
  .page .scrollx>table.tb{min-width:0}
  .page .tl{overflow-x:auto}
  .page .h-addr,.page .sum .s-tt,.page .sc-tt{word-break:keep-all;overflow-wrap:anywhere}
  .navbar{margin:0 -18px;padding:7px 18px}
  .act-bar{gap:5px}
  .act{padding:6px 10px;font-size:11.3px}
  .act-sp{width:100%;margin-left:0;text-align:right}
  .rpt-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:10px 15px;font-size:12px}
}
@media print{
  /* 인쇄물은 '보고서 문서'이므로 웹 전용 UI 와 우측 사이드바를 숨긴다.
     — report.css 가 사이드바를 건드리는 유일한 지점(의도된 인쇄 레이아웃 결정). */
  .act-bar,.navbar,.rpt-fab,.sim-ctl,.side-rail{display:none!important}
  .scrollx{overflow:visible}
  .scrollx>table.tb{min-width:0}
}

/* ══════════════════ 하이브리드 레이아웃(왼쪽 보고서 본문 + 우측 원형 사이드바) ══════════════════
   팀장 지시(사장님 결정): 교체 대상은 왼쪽 본문 컬럼뿐.
   우측 .side-rail 은 detail.html 원형(마크업·CSS·스크립트) 그대로이며,
   이 파일은 사이드바에 어떤 규칙도 적용하지 않는다(격리 검증: §12 체크리스트). */
/* [사장님 여백 지시 2026-07-26] 컨테이너 계약을 detail.html 원형과 픽셀 동일하게 맞춘다.
     · .wrap        : max-width 1240px · padding 0 22px  (detail.html L52 원형)
     · .detail-grid : grid-template-columns 1fr 332px · gap 28px (detail.html L139 원형)
   → 본문 컬럼 시작 x = (뷰포트-1240)/2 + 22 로 index.html·detail.html 과 일치.
   본문 .page 는 고정 1020px 를 포기하고 유동(1fr)으로 전환 — 좌측 여백 일치가 샘플 고정폭보다 우선. */
.rpt-wrap{box-sizing:border-box;max-width:1240px;margin:18px auto 28px;padding:0 22px;display:grid;
          grid-template-columns:minmax(0,1fr) 332px;gap:28px;align-items:start}
/* .doc-top 제거로 상단 여백이 과하지 않게 본문 첫 요소(액션바) 위 패딩 축소 */
.rpt-wrap>.page{padding-top:30px}
.rpt-wrap>.page{margin:0;max-width:none;min-width:0}
.rpt-fab{box-sizing:border-box}
/* 1100px 미만 → 사이드바가 본문 아래로 적층. detail.html .detail-grid 원형 breakpoint 와 동일 */
@media (max-width:1100px){
  .rpt-wrap{grid-template-columns:minmax(0,1fr);gap:18px}
}
@media (max-width:760px){ .rpt-wrap{padding:0;margin:0;gap:14px} }
@media print{ .rpt-wrap{display:block;max-width:none;margin:0;padding:0} }

/* ═══════════════════════════════════════════════════════════════════════════
   v2 기능 패리티 대수리 (사장님 지적 12건) — 이 아래에만 추가·재정의한다.
   위 "샘플 원본" 구간의 선언은 한 글자도 바꾸지 않았다(시각 SSOT 보존).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ①-1 카드 라운드: .page 통짜 백지문서 → 블록별 독립 라운드 카드 ── */
.page{background:transparent;box-shadow:none;border-radius:0;padding:0}
.rpt-wrap>.page{padding-top:0}
.rcard{background:#fff;border:1px solid #E2EAF4;border-radius:14px;
       box-shadow:0 1px 2px rgba(36,70,110,.05),0 8px 20px rgba(36,70,110,.055);
       padding:24px 26px;margin:0 0 16px}
.rcard:last-child{margin-bottom:0}
/* 카드 첫 요소의 상단 여백 상쇄(카드 padding 이 여백을 담당) */
.rcard>.sub-tt:first-child,.rcard>.title-zone:first-child,.rcard>.act-bar:first-child{margin-top:0}
.rcard>.act-bar+.title-zone{margin-top:4px}
.page .sec{margin-top:0}              /* 섹션 간격은 .rcard margin 이 담당 */
.page .sec.rcard>.sec-head{margin-top:0}
/* sticky 섹션 탭바 — 카드 톤으로 재정의(원래는 .page 패딩에 맞춘 네거티브 마진) */
.navbar{background:rgba(255,255,255,.97);border:1px solid #E2EAF4;border-radius:12px;
        box-shadow:0 1px 2px rgba(36,70,110,.05),0 8px 20px rgba(36,70,110,.055);
        margin:0 0 16px;padding:7px 10px}
/* 푸터도 독립 카드 */
footer.rpt{background:#fff;border:1px solid #E2EAF4;border-radius:14px;
           box-shadow:0 1px 2px rgba(36,70,110,.05),0 8px 20px rgba(36,70,110,.055);
           margin-top:16px;padding:20px 26px;border-top:3px solid var(--navy)}
/* 안내 콜아웃(#guard)도 카드 간격에 맞춤 */
.guard{margin-bottom:16px}

/* ── ①-2 초보자 교육: 용어 ⓘ 툴팁(보고서 톤) ── */
.page .tt-i{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
        margin-left:3px;border-radius:50%;background:#E6EEF9;color:var(--blue-d);
        font-size:9.5px;font-weight:800;font-style:normal;vertical-align:1px;cursor:help}
.page .term-tip{position:relative;border-bottom:1px dotted var(--faint);cursor:help}
.page .term-tip .tt-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:60;display:none;
        width:min(280px,72vw);background:#20303F;color:#fff;border-radius:9px;padding:9px 11px;
        font-size:11.6px;font-weight:500;line-height:1.6;box-shadow:0 10px 26px rgba(15,30,50,.28)}
.page .term-tip .tt-pop b{color:#9FD0FF}
.page .term-tip:hover .tt-pop,.page .term-tip:focus .tt-pop,.page .term-tip:focus-within .tt-pop{display:block}

/* ── ②·⑧·⑫ 인라인 컨트롤(세그먼트·더보기·입력) ── */
.rseg{display:inline-flex;border:1.3px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.rseg button{border:0;background:#fff;font-family:inherit;font-size:11.6px;font-weight:700;
             color:var(--sub);padding:6px 12px;cursor:pointer;line-height:1.4}
.rseg button+button{border-left:1px solid var(--line)}
.rseg button[aria-selected="true"],.rseg button.on{background:var(--navy);color:#fff}
.rmore{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:8px 14px;
       background:#F5F9FD;border:1.3px solid #CFDDEC;border-radius:9px;font-family:inherit;
       font-size:12.2px;font-weight:700;color:var(--blue-d);cursor:pointer}
.rmore:hover{background:var(--p-blue);border-color:var(--blue)}
.rmore small{color:var(--faint);font-weight:600}
.rbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.rbar-sp{margin-left:auto}
.page input.rin{border:1.3px solid var(--p-blue-bd);background:var(--p-blue);border-radius:8px;
       padding:7px 10px;font-family:inherit;font-size:13px;font-weight:800;text-align:right;
       color:#16243A;font-variant-numeric:tabular-nums;width:170px;max-width:100%}
.page input.rin:focus{outline:2px solid var(--blue);outline-offset:1px;background:#fff}

/* ── ⑥ 임대차보호법 기준 버튼(§8) ── */
.rlaw-btns{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.rlaw-open{display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:11.8px;
           font-weight:800;color:var(--blue-d);background:var(--p-blue);border:1.3px solid var(--p-blue-bd);
           border-radius:9px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.rlaw-open:hover{background:#DEEAFD;border-color:var(--blue)}

/* ── ⑨ 접이(details/summary) — 산출근거·명도 절차 흐름 ── */
.page details.rfold{border:1.3px solid var(--line-soft);border-radius:12px;overflow:hidden;
        background:#FBFCFE;margin-top:12px}
.page details.rfold>summary{cursor:pointer;padding:11px 14px;background:#F2F6FB;font-size:12.9px;
        font-weight:800;color:var(--navy);list-style:none;display:flex;align-items:center;gap:8px}
.page details.rfold>summary::-webkit-details-marker{display:none}
.page details.rfold>summary::after{content:'▾';margin-left:auto;font-size:11px;color:var(--faint);
        transition:transform .15s}
.page details.rfold[open]>summary::after{transform:rotate(180deg)}
.page details.rfold>.rfold-b{padding:12px 14px}
.page ol.rsteps{list-style:none;margin:2px 0 0;padding:0}
.page ol.rsteps li{position:relative;padding:10px 13px 10px 42px;margin:7px 0;background:#F6FAFF;
        border:1px solid var(--p-blue-bd);border-radius:11px;line-height:1.65;font-size:12.6px;color:#3E4C61}
.page ol.rsteps li>b:first-child{color:#16243A}
.page ol.rsteps li .rstep-n{position:absolute;left:11px;top:10px;width:21px;height:21px;border-radius:50%;
        background:var(--blue);color:#fff;font-weight:800;font-size:11px;display:inline-flex;
        align-items:center;justify-content:center}

/* ── ③ 사진 클릭(공시자료 뷰어) ── */
.page .ph.ph-click{cursor:pointer;position:relative;border:0;padding:0;background:none;
        font-family:inherit;display:block;width:100%;text-align:left;
        border:1px solid #D3DDE8;border-radius:11px;overflow:hidden}
.page .ph.ph-click:hover{box-shadow:0 6px 18px rgba(36,70,110,.18)}
.page .ph.ph-click:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.page .ph-badge{position:absolute;right:8px;bottom:8px;background:rgba(22,36,58,.78);color:#fff;
        font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════════════════════
   ③' 갤러리 탭 — 사진 · 위치도 · 로드뷰  [사장님 지시 2026-07-29 복원]
   ------------------------------------------------------------------------------
   · 마크업 계약(.gal-tabs / [data-galtab] / [data-galpane].on)은 기존 지도 JS 가
     기대하는 것 그대로. 스타일만 보고서형 톤으로 새로 잡았다(레거시 CSS 이식 아님).
   · 색은 report.css 팔레트 변수만 사용(R-DS1 — 새 hex 도입 금지),
     라운드는 카드 14 / 버튼 9 / 칩 6 체계에 맞춘다(R-DS5).
   ══════════════════════════════════════════════════════════════════════════════ */
.page .gal{margin-top:2px}
.page .gal-tabs{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;
        margin-bottom:12px;background:#fff}
.page .gal-tabs button{background:#fff;border:0;border-right:1px solid var(--line-soft);
        padding:8px 15px;font-family:inherit;font-size:12.4px;font-weight:700;color:var(--sub);
        cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1.2;
        transition:background .13s,color .13s}
.page .gal-tabs button:last-child{border-right:0}
.page .gal-tabs button .ic{width:14px;height:14px}
.page .gal-tabs button:hover{background:var(--p-blue);color:var(--blue-d)}
.page .gal-tabs button[aria-pressed=true]{background:var(--blue);color:#fff}
.page .gal-tabs button[aria-pressed=true]:hover{background:var(--blue-d);color:#fff}
.page .gal-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.page .gal-pane{display:none}
.page .gal-pane.on{display:block}
/* 지도·로드뷰 캔버스 — 사진 그리드(높이 174px)와 시각 무게를 맞춘 3:2 비율, 상한 420px */
.page .gal-main{position:relative;width:100%;aspect-ratio:3/2;max-height:420px;border-radius:11px;
        overflow:hidden;border:1px solid #D3DDE8;background:var(--p-blue)}
.page .gal-canvas{position:absolute;inset:0;z-index:1}
.page .gal-main .gal-ph{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
        align-items:center;justify-content:center;gap:7px;padding:16px;text-align:center;
        color:var(--sub);font-size:13px;font-weight:700;line-height:1.5;background:var(--p-blue)}
.page .gal-main .gal-ph .ic{width:30px;height:30px;color:var(--blue);opacity:.65}
.page .gal-main .gal-ph .ph-sub{font-size:11.4px;font-weight:600;color:var(--faint);word-break:keep-all}
/* 로드뷰: 전폭 파노라마 + 좌상단 미니맵(드래그 마커) — 공시자료 뷰어와 동일 구성 */
.page .rv-split .rv-view{position:absolute;inset:0;z-index:1}
.page .rv-split .rv-map{position:absolute;top:10px;left:10px;width:210px;height:150px;z-index:3;
        border:2px solid #fff;border-radius:9px;overflow:hidden;box-shadow:0 4px 14px rgba(22,36,58,.32)}
@media (max-width:760px){
  .page .gal-tabs button{padding:8px 11px;font-size:11.8px;gap:5px}
  .page .gal-main{aspect-ratio:4/3;max-height:320px}
  .page .rv-split .rv-map{width:128px;height:92px;top:8px;left:8px}
}
/* 인쇄: 지도 캔버스는 의미 없는 회색 박스가 되므로 사진 pane 만 남긴다 */
@media print{
  .page .gal-tabs{display:none}
  .page .gal-pane{display:none!important}
  .page .gal-pane[data-galpane="photo"]{display:block!important}
}

/* ══════════════════════════════════════════════════════════════════════════════
   ③'' 긴 원문 접기 (.rfold-txt) — [사장님 지시 2026-07-29]
   ------------------------------------------------------------------------------
   · 감정평가 요약·현황조사서 원문처럼 규제 나열이 길게 이어지는 블록에만 붙는다.
   · 원문은 DOM 에 전량 있고 CSS 로 감추기만 한다 → 펼치면 100% 원문, 인쇄는 항상 전량.
   · 권리·인수·대항력 경고 블록(.co.red/.co.amber 등)에는 적용하지 않는다(위험 고지 은폐 금지).
   ══════════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
   [초기 로딩 최적화 · P2] 화면 밖 섹션은 레이아웃·페인트를 건너뛴다
   ------------------------------------------------------------------------------
   [실측 근거 2026-07-29 · CPU 4x] 이 페이지의 메인스레드 시간은 스크립트(164ms)가 아니라
   **레이아웃(3,687ms)** 이 지배한다. 보고서 본문은 노드 7,700개 · 표 20여 개짜리 긴 문서라
   레이아웃 1회가 통째로 비싸고, 그게 13회 반복된다.
   content-visibility:auto 를 주면 뷰포트 밖 섹션은 그 계산에서 빠진다(실측 layout 3,687→2,044ms).
   contain-intrinsic-size 의 auto 키워드는 한 번 렌더된 실제 높이를 기억해 목차 앵커(#s7 등)
   점프와 스크롤바 길이를 정확히 유지한다.
   ▶ .cv 가 붙은 섹션에만 적용한다 — content-visibility 는 paint containment 를 동반해
     섹션 경계를 넘는 자식이 잘린다. 용어 툴팁(.tt-pop)은 note 아래로 띄워 뜨므로 섹션 밖으로
     나간다 → **툴팁이 들어 있는 섹션은 렌더 시점에 .cv 를 붙이지 않는다**(정확성 우선).
     (토지이용 팝오버 .lu-pop 은 document.body 포털이라 무관)
   ▶ 인쇄는 전량 렌더해야 하므로 visible 로 되돌린다.
   ══════════════════════════════════════════════════════════════════════════════ */
.page .sec.rcard.cv{content-visibility:auto;contain-intrinsic-size:auto 700px}
@media print{ .page .sec.rcard.cv{content-visibility:visible} }

/* 섹션 헤더 우측 인라인 버튼(§5 토지이용계획) — .sec-src 의 링크 톤과 맞춘다 */
.page .sec-src .rlink-btn{font-family:inherit;font-size:11.3px;font-weight:700;color:var(--blue-d);
        background:var(--p-blue);border:1px solid var(--p-blue-bd);border-radius:99px;
        padding:2px 9px;margin-right:6px;cursor:pointer;white-space:nowrap;line-height:1.5}
.page .sec-src .rlink-btn:hover{background:#E3EEFD;border-color:var(--blue)}
.page .sec-src .rlink-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media print{ .page .sec-src .rlink-btn{display:none} }

.page .rfold-txt{position:relative}
.page .rfold-rest{display:none}
.page .rfold-txt.on .rfold-rest{display:block}
/* 접힌 상태에서 '아래에 더 있다'는 신호 — 마지막 줄을 살짝 흐리게 */
.page .rfold-txt:not(.on) .rfold-head{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent 100%);
}
.page .rfold-btn{margin-top:8px;display:inline-flex;align-items:center;gap:5px;
        font-family:inherit;font-size:11.6px;font-weight:800;color:var(--blue-d);
        background:var(--p-blue);border:1px solid var(--p-blue-bd);border-radius:6px;
        padding:5px 11px;cursor:pointer;line-height:1.3;transition:background .13s,border-color .13s}
.page .rfold-btn:hover{background:#E3EEFD;border-color:var(--blue)}
.page .rfold-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.page .rfold-caret{font-size:10px;transition:transform .15s}
.page .rfold-txt.on .rfold-caret{transform:rotate(180deg)}
@media print{
  .page .rfold-rest{display:block!important}
  .page .rfold-btn{display:none!important}
  .page .rfold-txt:not(.on) .rfold-head{-webkit-mask-image:none;mask-image:none}
}

/* ── ④ 토지이용계획 칩(클릭 가능) ── */
.page button.chip{font-family:inherit;cursor:pointer;text-align:left}
.page button.chip.lu-click:hover{filter:brightness(.98);box-shadow:0 2px 9px rgba(15,23,42,.10)}
.page button.chip.lu-click:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.page .chip.lu-on{background:var(--p-blue);border-color:var(--p-blue-bd);color:var(--blue-d)}
.page .chip.lu-warn{background:var(--p-amber);border-color:var(--p-amber-bd);color:var(--amber);font-weight:800}
.page .chip.lu-off{background:var(--p-gray);border-color:var(--line-soft);color:var(--faint)}
.page .chip .lu-i{font-size:10.5px;font-weight:800;opacity:.6;margin-left:3px}
.page .chip .lu-tag{font-size:10.5px;font-weight:700;opacity:.85;margin-left:2px}

/* ── [갭3·4] 특수물건 / review_flags 교육 카드 아코디언 ── */
.page .sf-badges{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 2px}
.page .spec-flag{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;font-weight:800;
        font-size:12.3px;line-height:1.25;border:1.3px solid var(--line);background:#fff;color:#3E4C61;
        border-radius:99px;padding:7px 13px;transition:box-shadow .15s,background .15s,border-color .15s}
.page .spec-flag:hover{box-shadow:0 4px 12px rgba(36,70,110,.12)}
.page .spec-flag:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.page .spec-flag::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;
        transform:rotate(45deg);margin-left:1px;opacity:.6;transition:transform .18s}
.page .spec-flag[aria-expanded="true"]::after{transform:rotate(-135deg)}
.page .spec-flag .sf-sev{font-size:10.5px;font-weight:800;opacity:.9;padding:1px 6px;border-radius:5px;background:rgba(12,20,36,.06)}
.page .spec-flag.sev-high{border-color:var(--p-red-bd);color:#B3372E;background:var(--p-red)}
.page .spec-flag.sev-mid{border-color:var(--p-amber-bd);color:var(--amber);background:var(--p-amber)}
.page .spec-flag.sev-info{border-color:var(--p-blue-bd);color:var(--blue-d);background:var(--p-blue)}
.page .sf-cards{margin-top:4px}
.page .spec-flag-card{border:1px solid var(--line-soft);border-left:3px solid var(--blue);border-radius:0 11px 11px 0;
        padding:13px 15px;margin:9px 0;background:#FBFCFE;font-size:12.7px;line-height:1.68;color:#3E4C61}
.page .spec-flag-card[hidden]{display:none}
.page .sf-def{color:#16243A;font-weight:600}
.page .sf-why{margin-top:9px}
.page .sf-why b:first-child,.page .sf-opp b:first-child{display:inline-block;font-size:11px;font-weight:800;
        border-radius:6px;padding:2px 8px;margin-right:6px;vertical-align:1px}
.page .sf-why b:first-child{color:var(--amber);background:var(--p-amber)}
.page .sf-opp{margin-top:9px}
.page .sf-opp b:first-child{color:var(--green);background:var(--p-green)}
.page ul.sf-check{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.page ul.sf-check li{position:relative;padding-left:22px;font-size:12.3px;line-height:1.6;color:#3E4C61}
.page ul.sf-check li::before{content:"✓";position:absolute;left:3px;top:0;color:var(--blue-d);font-weight:800;font-size:11.5px}
.page .sf-lien-tl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;padding:9px 11px;
        background:#F4F8FD;border:1px solid var(--p-blue-bd);border-radius:9px}
.page .sf-lien-tl b{width:100%;font-size:11.6px;color:var(--navy);margin-bottom:2px}
.page .sf-lien-tl .tlx{font-size:11.6px;font-weight:800;color:var(--blue-d);background:#fff;
        border:1px solid var(--p-blue-bd);border-radius:6px;padding:2px 8px}
.page .sf-links{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:700}

/* 2열 그리드 안의 좁은 표(실거래 등)는 최소폭 강제를 풀어 핵심 컬럼(거래금액)이 잘리지 않게 한다 */
.page .scrollx.narrow>table.tb{min-width:0}
.page .scrollx.narrow>table.tb th,.page .scrollx.narrow>table.tb td{padding:7px 7px}

/* ── ⑬ 관할기관 외부 링크 ── */
.page a.ext{color:var(--blue-d);font-weight:700;text-decoration:none;border-bottom:1px solid var(--p-blue-bd)}
.page a.ext:hover{border-bottom-color:var(--blue)}

/* ── [여백 지시 후속] 2열 레이아웃 구간에서 본문이 가장 좁아지는 1101~1199px ──
   본문 컬럼 = 뷰포트 − 404px 이므로 이 구간에서 KPI 4칸이 177px 미만이 되어 숫자가 줄바꿈된다.
   (1200px 이상 = 177px 이상 → 4칸 정상 / 1100px 이하 = 사이드바 적층으로 본문이 다시 넓어짐)
   해당 구간만 KPI·부록 미니카드를 2×2 로 랩핑한다. */
@media (min-width:1101px) and (max-width:1199px){
  .page .kpi-grid{grid-template-columns:1fr 1fr}
  .page .mini-cards{grid-template-columns:1fr 1fr}
}

/* ── 모바일 ── */
@media (max-width:760px){
  .rcard{padding:18px 15px;border-radius:13px;margin-bottom:12px}
  footer.rpt{padding:16px 15px;border-radius:13px}
  .navbar{margin:0 0 12px;padding:6px 8px;border-radius:11px}
  .page input.rin{width:100%}
  .rlaw-open{flex:1 1 44%;justify-content:center}
}
@media print{
  /* 인쇄물은 '문서' — 카드 테두리·그림자를 없애고 원래 백지 문서 톤으로 복원 */
  .page{background:#fff;padding:20px 24px}
  .rcard,footer.rpt{border:0;box-shadow:none;padding:0;margin:0 0 18px;border-radius:0}
  footer.rpt{border-top:3px solid var(--navy);padding-top:16px}
  .page .sec{margin-top:26px}
  .rmore,.rseg,.rlaw-btns,.rbar .rseg{display:none!important}
  .page details.rfold{border-color:var(--line-soft)}
  .page details.rfold>.rfold-b{display:block!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   [사장님 육안 검수 2026-07-26] 추가 UI — 5건
   1) 맨위/맨아래 스크롤 버튼  2) 투자 시뮬 입력칸 정렬  3) 공란 대시 가운데 정렬
   4) 인근물건 행 링크         5) 부록(프리미엄 리포트 목차)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── (1) 맨 위로 / 맨 아래로 — 우하단 AI 상담 FAB(.gfab, bottom 20px·높이 약 48px) 위에 세로 스택.
        FAB 과 겹치지 않도록 bottom 을 FAB 높이+간격만큼 띄운다. z-index 는 FAB(50) 아래. ── */
.rpt-scrollnav{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px) + 62px);
  z-index:45;display:flex;flex-direction:column;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.rpt-scrollnav.on{opacity:1;visibility:visible;transform:translateY(0)}
.rpt-scrollnav button{width:42px;height:42px;border-radius:50%;border:1.4px solid #D6E1F2;
  background:rgba(255,255,255,.96);color:#0d2a5c;font-family:inherit;font-size:15px;font-weight:800;
  line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(13,42,92,.16);
  display:flex;align-items:center;justify-content:center;padding:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rpt-scrollnav button:hover{background:#0d2a5c;color:#fff;border-color:#0d2a5c}
.rpt-scrollnav button:focus-visible{outline:2px solid #1d63ed;outline-offset:2px}
.rpt-scrollnav button:disabled{opacity:.38;cursor:default}
.rpt-scrollnav button:disabled:hover{background:rgba(255,255,255,.96);color:#0d2a5c;border-color:#D6E1F2}
@media (max-width:760px){
  .rpt-scrollnav{right:calc(14px + env(safe-area-inset-right,0px));
    bottom:calc(16px + env(safe-area-inset-bottom,0px) + 58px);gap:7px}
  .rpt-scrollnav button{width:38px;height:38px;font-size:14px}
}
@media print{ .rpt-scrollnav{display:none!important} }

/* ── (2) 투자 시뮬레이션 행 — 5칸 모두 '값줄 + 보조줄' 동일 구조로 맞춰 세로 정렬을 통일한다.
        (종전: 대출금액 칸만 LTV 라벨이 붙어 셀 높이가 커지고 입력칸 baseline 이 어긋남) ── */
.page #simTb tbody tr:first-child td{vertical-align:top}
.page #simTb .sim-v{display:flex;align-items:center;justify-content:flex-end;
  min-height:34px;line-height:1.35}
.page #simTb input.cell-in{display:block;height:34px;box-sizing:border-box}
.page #simTb .sim-sub{margin-top:3px;min-height:15px;line-height:15px;text-align:right;
  font-size:11px;color:var(--sub)}
.page #simTb tbody tr.noterow td{vertical-align:middle}

/* ── (3) 공란 대시 — 숫자칸(우측)·텍스트칸(좌측) 구분 없이 가운데로 통일.
        값이 있는 셀의 정렬은 그대로 둔다(이 규칙은 대시 전용 span 에만 적용). ── */
.page .tb .dashc{display:block;text-align:center;color:var(--faint)}

/* ── (4) 인근물건 행 링크 — DB 에 실제 존재하는 사건만 링크로 승격(hydrate).
        표 안에서는 밑줄 없이 색·hover 로만 링크임을 알린다. ── */
.page .tb a.nb-link{color:var(--blue-d,#1450c4);font-weight:700;text-decoration:none;
  border-bottom:1px dashed rgba(20,80,196,.4)}
.page .tb a.nb-link:hover{color:#0d2a5c;border-bottom-style:solid;background:#F2F7FF}
.page .tb tr:hover td{background:#FAFCFF}
.page .tb tr.hl-amber:hover td{background:#FEF9EB}

/* ── (5) 부록 — 프리미엄 리포트 목차 + CTA ── */
.page .mini.prem b{padding-right:0}
/* [2026-07-30] 목차 번호칩 — #9A6E07(3.97:1) → var(--amber)=#9A5B00(4.73:1). 19개 인스턴스 */
.page .mini .mno{display:inline-block;min-width:19px;font-size:10.2px;font-weight:800;
  color:var(--amber);background:#FBEFC9;border-radius:5px;text-align:center;padding:1px 4px;margin-right:5px}
.page .prem-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:13px;
  padding:13px 15px;border:1.4px solid #F0DFAE;border-radius:12px;
  background:linear-gradient(135deg,#FFFBF0,#FFF6E2)}
.page .prem-cta .pc-t{flex:1 1 260px;font-size:12.2px;color:#6B5410;line-height:1.55}
.page .prem-cta .pc-t b{color:#8A6A14}
.page .prem-cta button{border:0;border-radius:9px;padding:10px 16px;font-family:inherit;
  font-size:12.5px;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#C9962A,#9A6E07);box-shadow:0 4px 14px rgba(154,110,7,.26)}
.page .prem-cta button:hover{filter:brightness(1.06)}
@media print{ .page .prem-cta button{display:none} }
