/* ============================================================================
   줍고 PC — 오늘의 경매 판단
   승인 시안(B-map-decision-approval) 기반. 코덱스 스타일시트는 폐기하고 새로 세웠다.

   설계 원칙
   1) 화면 테두리를 얇게. 헤더 56px · 좌우 여백 20px. 남는 폭은 전부 3분할에 준다
      (대표님 불만이 "정보 밀도가 낮다"였고, 테두리가 두꺼우면 본문이 그만큼 좁아진다).
   2) 세 칸이 같은 물건 하나를 가리킨다. 목록에서 고르면 지도와 판단이 함께 움직인다.
   3) 숫자는 tabular-nums + 오른쪽 정렬. 자릿수가 세로로 맞아야 눈이 대조한다.
   4) 상태는 글자색이 아니라 칩/도트로 낸다. 색만으로 구분하지 않는다(접근성).
   ============================================================================ */

:root {
  /* 지면 */
  --paper: #f5f6f1;
  --surface: #ffffff;
  --surface-2: #fafbf7;
  --surface-sunken: #f0f2ec;

  /* 글자 */
  --ink: #16211d;
  --ink-2: #3d4a44;
  --muted: #6f7b75;
  --faint: #9aa49e;

  /* 브랜드·상태 */
  --forest: #0b5f47;
  --forest-deep: #084533;
  --forest-soft: #e6f1ec;
  --lime: #b7d43a;
  --lime-soft: #f0f6da;
  --lime-ink: #55621a;
  --amber: #a9711d;
  --amber-soft: #fbf0dd;
  --red: #b1453e;
  --red-soft: #f9e7e5;

  /* 선·그림자 */
  --line: rgba(22, 45, 36, .10);
  --line-2: rgba(22, 45, 36, .18);
  --shadow-1: 0 1px 2px rgba(16, 38, 30, .04), 0 4px 14px rgba(16, 38, 30, .05);
  --shadow-2: 0 2px 6px rgba(16, 38, 30, .06), 0 18px 44px rgba(16, 38, 30, .10);
  --shadow-pin: 0 3px 10px rgba(10, 30, 24, .32);

  /* 치수 */
  --header-h: 56px;
  --gap: 14px;
  --pad-x: 20px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* 타이포그래피 — 1px 단위의 일관된 PC 스케일.
     Windows 1x 화면에서 흐려 보이던 9~13.5px 반픽셀 조합을 없애고,
     보조 문구도 11px 아래로 내려가지 않게 해 화면 전체의 농도를 맞춘다. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-display: 40px;
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-body: 1.55;
  --leading-relaxed: 1.65;

  --ease: cubic-bezier(.2, .8, .3, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* ★`hidden` 속성이 실제로 숨기게 만든다. display 를 지정한 요소(.account-button 은 grid)에서는
   기본 [hidden] 규칙이 덮여 **비로그인인데 계정 아이콘이 그대로 보였다**(실측). */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { line-height: var(--leading-tight); text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  padding: 10px 16px; border-radius: var(--r-md);
  background: var(--forest); color: #fff; font-weight: 700;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid rgba(11, 95, 71, .35); outline-offset: 2px; border-radius: 6px; }

/* ── 껍데기 ─────────────────────────────────────────────────────────────── */

.app-shell { min-height: 100%; display: flex; flex-direction: column; }

.app-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 22px;
  padding: 0 var(--pad-x);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px 9px 9px 3px;
  display: grid; place-items: center;
  background: var(--forest); color: #fff;
  font-weight: 700; font-size: var(--text-base); letter-spacing: -.03em;
}
.brand-word { font-weight: 700; font-size: var(--text-lg); letter-spacing: .01em; }

.top-nav { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.top-nav a {
  position: relative; padding: 7px 12px; border-radius: var(--r-sm);
  font-size: var(--text-base); font-weight: 700; color: var(--muted);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.top-nav a:hover { color: var(--ink); background: var(--surface-sunken); }
.top-nav a.is-active { color: var(--forest); background: var(--forest-soft); }
.nav-count {
  margin-left: 5px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--forest); color: #fff; font-size: var(--text-2xs); font-weight: 700;
}

.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }

.data-basis {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  padding: 0 4px 0 0; line-height: 1.25;
}
.data-basis small { font-size: var(--text-2xs); font-weight: 700; color: var(--faint); }
.data-basis b { font-size: var(--text-xs); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.icon-button, .account-button {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.icon-button:hover, .account-button:hover { border-color: var(--line-2); background: var(--surface-2); }
.icon-button svg, .account-button svg {
  width: 17px; height: 17px; fill: none; stroke: var(--ink-2);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.cta-button {
  height: 34px; padding: 0 15px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center;
  background: var(--ink); color: #fff;
  font-size: var(--text-base); font-weight: 700;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.cta-button:hover { background: #0d1a16; transform: translateY(-1px); }

.main-content { flex: 1 1 auto; min-height: 0; padding: 0; }

/* ── 부팅 ───────────────────────────────────────────────────────────────── */

.boot-screen { height: calc(100vh - var(--header-h)); display: grid; place-content: center; justify-items: center; gap: 16px; }
.boot-brand { width: 46px; height: 46px; border-radius: 14px 14px 14px 4px; display: grid; place-items: center; background: var(--forest); color: #fff; font-weight: 700; }
.boot-screen p { color: var(--muted); font-size: var(--text-sm); }
.boot-track { width: 180px; height: 3px; border-radius: 2px; background: var(--surface-sunken); overflow: hidden; }
.boot-track i { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--forest); animation: bootSlide 1.1s var(--ease) infinite; }
@keyframes bootSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ── 판단 데스크 (3분할) ────────────────────────────────────────────────── */

.decision-desk {
  height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column;
  padding: 0 var(--pad-x) var(--gap);
}

.desk-filter {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 14px 2px 12px;
}
.desk-filter-title { display: inline-flex; align-items: baseline; gap: 9px; }
/* T_PCDESKALL: 검색어처럼 제목 옆에 붙는 부제(무엇을 보고 있는지). */
.desk-sub { font-size: var(--text-sm); font-weight: 700; color: var(--muted); }
.desk-filter-title h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.025em; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 3px rgba(183, 212, 58, .28);
}

/* T_PCCHIP: 필터 칩. select 를 그대로 쓴다 — 키보드·스크린리더 지원이 공짜로 따라오고,
   바깥클릭·포커스 가둠 같은 드롭다운 뒤치다꺼리가 없다. */
.desk-chips { display: flex; align-items: center; gap: 8px; }
.desk-chip {
  position: relative; display: inline-flex; align-items: center;
  height: 38px; padding: 0 30px 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
}
.desk-chip::after {
  content: ""; position: absolute; right: 14px; width: 6px; height: 6px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translateY(-2px); pointer-events: none;
}
.desk-chip.is-on { border-color: var(--forest); background: var(--forest-soft); color: var(--forest); }
.desk-chip.is-on::after { border-color: var(--forest); }
.desk-chip select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; outline: none;
  font: inherit; color: inherit; cursor: pointer; max-width: 190px;
}
.desk-chip:focus-within { outline: 2px solid var(--forest); outline-offset: 1px; }

/* ── T_PCPOOL: 검색 조건 바(네이버 부동산의 칩 줄) ──────────────────────── */
.pool-filter {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; margin-bottom: var(--gap);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.pool-search-row {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 0 0 9px; border-bottom: 1px solid var(--line);
}
.pool-search-label {
  flex: 0 0 auto; min-width: 66px;
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
}
/* T_PCSEARCHPLACE: 종전 공통 헤더의 520px 검색창보다 짧게 잡아 조건 영역을 압도하지 않는다. */
/* T_PCCHIPFIT (대표님 "검색 input 박스를 조절해서 가로 스크롤이 안나오게"):
   360px **고정**이라 칩이 늘어난 만큼 그대로 넘쳤다. 좁아지면 검색창이 **먼저 양보**한다. */
.pool-search {
  /* 실측(운영 1212px 행): 라벨 66 + 검색 + 칩 765 = 340 일 때 17px 모자라 토지 칩이
     혼자 둘째 줄로 내려갔다. 300 이면 칩 7종이 한 줄에 들어간다. */
  flex: 1 1 240px; width: auto; min-width: 190px; max-width: 300px; height: 38px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 5px 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
  transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.pool-search:focus-within {
  border-color: var(--forest); background: #fff; box-shadow: 0 0 0 3px rgba(11, 95, 71, .08);
}
.pool-search svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: var(--faint); stroke-width: 1.9; stroke-linecap: round;
}
.pool-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  font-size: var(--text-sm);
}
.pool-search input::placeholder { color: var(--faint); }
.pool-search button {
  flex: 0 0 auto; height: 28px; padding: 0 11px;
  border-radius: var(--r-sm); background: var(--forest); color: #fff;
  font-size: var(--text-xs); font-weight: 700;
}
.pool-search button:hover { background: #074e3b; }
.pool-types, .pool-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
/* T_PCSEARCHTYPE: 검색창 뒤에서 유형칩이 같은 첫 줄을 이어 간다. 좁으면 칩 영역만 가로로 넘긴다. */
/* T_PCCHIPFIT: 종전엔 `nowrap + overflow-x:auto` 라 **칩 줄에 가로 스크롤바**가 생겼다.
   숨은 칩은 아무도 안 찾는다(스크롤바가 있는 줄 자체를 못 알아본다) — 줄바꿈이 정직하다. */
.pool-search-row { flex-wrap: wrap; row-gap: 8px; }
.pool-search-row .pool-types {
  flex: 1 1 320px; min-width: 0; flex-wrap: wrap;
}
.pool-search-row .pool-type { flex: 0 0 auto; }
/* T_PCCHIPFIT: 아이콘을 붙이고 글자를 줄인다(34->30px · sm->xs). 칩 7종이 한 줄에 들어간다. */
.pool-type {
  height: 30px; padding: 0 10px; border-radius: var(--r-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface);
  /* T_PCTYPE: 네이버는 **고른 칩만** 굵다. 안 고른 것까지 굵으면 무엇을 골랐는지 안 보인다. */
  font-size: var(--text-xs); font-weight: 400; color: var(--ink-2);
}
.pool-type svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .72; }
.pool-type.is-on svg { opacity: 1; }
.pool-type b { margin-left: 1px; color: var(--faint); font-weight: 700; font-variant-numeric: tabular-nums; }
.pool-type:hover { border-color: var(--forest); color: var(--forest); }
/* 고른 유형은 **채워서** 표시한다 — 네이버도 선택 칩만 색이 찬다. */
.pool-type.is-on { border-color: var(--forest); background: var(--forest); color: #fff; font-weight: 700; }
.pool-type.is-on b { color: rgba(255, 255, 255, .72); }
.pool-type:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

.pool-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.pool-toggle.is-on { border-color: var(--forest); background: var(--forest-soft); color: var(--forest); }
.pool-toggle input { accent-color: var(--forest); }
.pool-reset {
  margin-left: auto; height: 38px; padding: 0 12px; cursor: pointer;
  border: 0; background: none; color: var(--muted);
  font-size: var(--text-sm); font-weight: 700; text-decoration: underline;
}
.pool-reset:hover { color: var(--red); }

.desk-counters { display: flex; gap: 20px; margin-left: auto; }
.desk-counters div { display: flex; align-items: baseline; gap: 6px; }
/* T_PCTYPE: 네이버는 표 라벨(세대수·사용승인일)을 **400 regular** 로 쓴다. 값만 굵다. */
.desk-counters dt { font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
.desk-counters dd { font-size: var(--text-lg); font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.desk-counters dd.amber { color: var(--amber); }
.desk-counters dd.red { color: var(--red); }

.ghost-button {
  height: 32px; padding: 0 13px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.ghost-button:hover { background: var(--surface-2); border-color: var(--forest); color: var(--forest); }
.ghost-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

.desk-columns {
  flex: 1 1 auto; min-height: 0;
  /* T_PCNAVER: 네이버 부동산 배치 — **지도가 주역**이다. 목록만 고정폭으로 왼쪽에 두고,
     판단 패널은 칸을 차지하지 않고 지도 위에 떠서 목록 오른쪽에 붙는다(.verdict-panel). */
  position: relative;
  /* T_PCWIDTH: 가로 배분을 네이버 부동산에 맞춘다(대표님 2026-08-10 "컨텐츠의 가로사이즈를 맞춰봐").
     실측 비교 — 네이버 1447px: 목록 405(28%) · 상세 553(38%) · 지도 487(34%)
                 종전 줍고 1449px: 목록 455(31%) · 판단 393(27%) · 지도 555(38%)
     판단 패널이 160px 좁아 문장이 계속 두 줄로 접혔다.
     ★단 우리 목록은 **4열 표**라 네이버 카드(1열 세로 스택)보다 구조적으로 넓어야 한다.
     그래서 대표님이 지적한 쪽(판단 패널이 좁아 문장이 접힌다)을 네이버 비율(37%)로 맞추고,
     목록은 **잘리지 않는 최소폭**을 준다. 비교 버튼과 68px 사진까지 한 덩어리로 읽히도록
     1500px 이하에서는 520px, 넓은 화면에서는 540px을 확보한다. */
  /* T_PCCOMPAREFIT: 썸네일 위 비교 버튼을 얹은 뒤에도 사진과 물건명이 함께 읽히게
     목록을 한 단계 넓힌다. 1440px PC에서는 아래 구간의 520px을 사용한다. */
  --list-w: 540px;
  --verdict-w: 530px;
  display: grid; grid-template-columns: var(--list-w) minmax(0, 1fr); gap: var(--gap);
}

/* --- T_PCMAPFIRST (2026-08-11 대표님) --- 지역을 고르기 전에는 지도가 화면 전부를 쓴다.
   *"좌측 리스트를 안보이고 전체 지도에서 풍선을 해당 영역에 표출하고 그걸 찍으면
     그 지점 지역의 리스트가 그려지게"* — 목록 칸은 아예 만들지 않는다(DOM 도 안 만든다). */
.desk-columns.is-map-only { grid-template-columns: minmax(0, 1fr); }

/* 지역 집계 풍선. 개별 물건 핀(.map-pin)과 **다른 물건**이라 모양도 다르다 —
   같아 보이면 눌렀을 때 무엇이 열릴지 알 수 없다(풍선=지역 목록 / 핀=물건 상세). */
.map-cluster {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--forest, #1f4d3a); color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 6px 18px rgba(20, 40, 30, .28);
  font-size: 12px; line-height: 1; transform: translate(-50%, -50%);
  transition: transform .12s ease, box-shadow .12s ease;
}
.map-cluster b { font-weight: 800; font-size: 12.5px; }
.map-cluster span { font-weight: 700; opacity: .92; font-size: 12px; }
.map-cluster:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 10px 24px rgba(20, 40, 30, .34); }
/* 지금 목록을 띄운 지역. 지도와 목록이 같은 곳을 보고 있다는 표시다.
   ★맨 위 층으로 올린다(대표님 지시) — 실제 겹침 순서는 오버레이의 zIndex 가 정하고,
     여기 z-index 는 같은 컨테이너 안에서의 안전망이다. */
.map-cluster.is-on {
  background: #fff; color: var(--forest, #1f4d3a); border-color: var(--forest, #1f4d3a);
  position: relative; z-index: 30;
  box-shadow: 0 10px 26px rgba(20, 40, 30, .40);
}

/* 공통 패널 */
.pick-list, .pick-map, .verdict-panel {
  min-height: 0; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden;
}

/* ── 왼쪽: 목록 ─────────────────────────────────────────────────────────── */

.pick-list-head {
  flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 14px; border-bottom: 1px solid var(--line);
}
/* T_PCNOGEOSAY: 풍선 숫자와 목록 건수가 다른 이유(좌표를 못 찾은 물건)를 목록 머리 아래에 적는다. */
.pick-list-note {
  flex: 0 0 auto; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--line);
  font-size: var(--text-xs); color: var(--muted); line-height: 1.5;
}
/* T_PCSORT: 목록 정렬 탭(네이버 부동산의 "랭킹순|최신순|가격순|면적순" 자리). */
.sort-tabs {
  /* T_PCRHYTHM: 네이버 정렬 탭 실측 = 13px · 항목 간 ~18px · 선택된 항목만 굵고 색이 다르다. */
  flex: 0 0 auto; display: flex; align-items: center; gap: 18px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.sort-tabs button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: var(--text-sm); font-weight: 400; color: var(--muted);
}
.sort-tabs button:hover { color: var(--ink-2); }
.sort-tabs button.is-on { color: var(--forest); font-weight: 700; }
.sort-tabs button:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 3px; }

.pick-list-head h2 { font-size: var(--text-md); font-weight: 700; letter-spacing: -.02em; }
.pick-list-head span { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* T_PCMAPBOUNDS: 지도 밖으로 빠진 건수 — 말없이 줄면 자료가 사라진 줄 안다. */
.list-clipped { margin-left: 6px; color: var(--amber); font-weight: 700; }

/* ★가로 스크롤을 막는다. 실측에서 4열이 폭을 넘겨 '입찰/판정'이 통째로 잘려 나갔다 —
   목록에서 판정이 안 보이면 고르기 자체가 안 된다. 폭은 아래 table-layout:fixed 로 못 박는다. */
.pick-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
/* T_PCPERFFULL: 성과의 "지역별 성과"(6행)는 **줄어들지 않는다.** 아래 "최근 추천 기록" 스크롤과
   공간을 나눠 갖는 바람에 한 줄 반만 보였다(실측). 짧은 표는 제 높이를 그대로 쓴다. */
.perf-region-table { flex: 0 0 auto; overflow: visible; }

.pick-table { table-layout: fixed; }
/* T_PCLISTFIT: 가격·판정 칸이 과대해 물건 정보 칸을 잡아먹었다. 실측값에 맞춰 줄인다.
   T_PCRHYTHM: 순위 칸도 34→28. 네이버 목록엔 순위 칸 자체가 없다 — 여기서 회수한 폭은
   전부 단지명·주소로 간다(사진을 키우면 그만큼 이름이 잘리기 때문). */
.pick-table col.w-no { width: 28px; }
.pick-table col.w-price { width: 118px; }
/* T_PCRHYTHM: 판정 칩이 **60/60 전부** 잘리고 있었다("명도 확인 필…"). 판정은 이 목록의
   핵심 신호라 잘리면 안 된다 — 필요 79px 인데 66px 만 줬다. 칸 84→92 + 칩 여백 9→6 으로
   딱 맞춘다(실측 후 0/60). 단지명은 그 대가로 12→13건 잘림 — 1건 값에 판정 60건을 살렸다. */
.pick-table col.w-state { width: 92px; }

.pick-table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 14px; background: var(--surface-2);
  font-size: var(--text-2xs); font-weight: 700; color: var(--muted); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.pick-table thead th.c-price, .pick-table thead th.c-state { text-align: right; }
/* T_PCRHYTHM: 행 간격을 네이버 쪽으로 넓힌다(대표님 2026-08-10 "간격 폰트 사이즈 굵기도 맞춰봐").
   ★네이버 행은 170px(사진 98px + 5줄 세로 스택)이다. 그대로 베끼면 한 화면 물건이 9→4건으로
     반토막 난다 — 우리 목록은 카드가 아니라 4열 표다. 그래서 **높이가 아니라 리듬**을 맞춘다:
     행 패딩 10→13 · 사진 44→54 · 금액 15→16px. 실측 행 높이 80 → 96px. */
.pick-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pick-table th.c-price, .pick-table td.c-price,
.pick-table th.c-state, .pick-table td.c-state { padding-left: 6px; padding-right: 8px; }

.pick-row { cursor: pointer; transition: background .14s var(--ease); }
.pick-row:hover { background: var(--surface-2); }
/* T_PCROWTINT: 고른 행은 **아주 연하게**(대표님 2026-08-11 "리스트에서 선택했을때 색상을
   더 연한 색으로 바꿔줘"). 종전 --forest-soft(#e6f1ec)는 목록 절반이 칠해진 듯 보였다.
   대신 왼쪽 세로 선으로 "여기"를 말한다 — 면이 아니라 선이 덜 시끄럽다. */
.pick-row.is-on { background: rgba(11, 95, 71, .045); box-shadow: inset 3px 0 0 var(--forest); }
.pick-row.is-on td { border-bottom-color: rgba(11, 95, 71, .10); }
.pick-row.is-on .c-no { color: var(--forest); }
.pick-row:focus-visible { outline-offset: -3px; }

.pick-table .c-no {
  width: 28px; text-align: center; color: var(--faint);
  font-size: var(--text-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
  padding-left: 6px; padding-right: 0;
}
/* T_PCLISTFIT/T_PCCOMPAREFIT: 단지명 공간을 지키면서 비교 여부가 보일 만큼 사진을 키운다. */
.pick-table td.c-item { display: flex; align-items: center; gap: 10px; padding-left: 10px; padding-right: 6px; }
.c-item img {
  width: 68px; height: 68px; flex: 0 0 auto; border-radius: 10px;
  object-fit: cover; background: var(--surface-sunken);
}
/* --- T_THUMBSAT begin --- (2026-08-13) 공고 사진이 없어 **위성 지도**로 채운 썸네일임을 밝힌다.
   채우되 무엇인지 말한다 — 없는 사진을 실제 물건 사진처럼 대신하지 않는다(제품 철학 0-1).
   ★래퍼는 자리만 잡는다: `.c-item img` 는 자손 선택자라 규칙이 그대로 걸린다(폭·높이 불변). */
.c-thumb { position: relative; flex: 0 0 auto; line-height: 0; }
.c-thumb .thumb-tag {
  position: absolute; left: 3px; bottom: 3px;
  padding: 1px 5px; border-radius: 5px;
  font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.6;
  color: #fff; background: rgba(17, 24, 28, .74); letter-spacing: -.02em;
}
/* T_PCCOMPARE: 사진 위의 짧은 텍스트 버튼. 별도 열을 추가하면 400px 목록에서 물건명이
   50px대로 줄어드므로, 이미 시선이 먼저 가는 썸네일 안에 명시적인 '비교'를 둔다. */
.thumb-compare {
  position: absolute; z-index: 2; top: 3px; right: 3px;
  min-width: 30px; height: 19px; padding: 0 5px; border: 1px solid rgba(255,255,255,.72);
  border-radius: 5px; color: var(--ink); background: rgba(255,255,255,.94);
  box-shadow: 0 1px 4px rgba(10,30,24,.18);
  font-size: 10px; line-height: 17px; font-weight: 800; letter-spacing: -.03em;
}
.thumb-compare:hover { color: var(--forest); background: #fff; }
.thumb-compare.is-on { border-color: var(--forest); color: #fff; background: var(--forest); }
.pick-row.is-compared td { border-bottom-color: rgba(11,95,71,.18); }

/* 선택 즉시 목록 아래에 붙는 비교 바. 지도 위를 fixed 로 가리지 않고 데스크 높이를 나눠 쓴다. */
.comparison-tray {
  flex: 0 0 auto; min-height: 78px; margin-top: 10px; padding: 9px 10px 9px 14px;
  display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  border: 1px solid rgba(11,95,71,.18); border-radius: var(--r-lg);
  background: rgba(255,255,255,.96); box-shadow: var(--shadow-2);
}
.comparison-tray-copy { display: flex; flex-direction: column; gap: 1px; }
.comparison-tray-copy b { font-size: var(--text-md); font-weight: 800; letter-spacing: -.02em; }
.comparison-tray-copy span { color: var(--muted); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.comparison-tray-items { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 7px; }
.comparison-chip, .comparison-slot {
  min-width: 0; height: 54px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
.comparison-chip { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) 24px; align-items: center; gap: 8px; padding: 5px 5px 5px 6px; }
.comparison-chip img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--surface-sunken); }
.comparison-chip div { min-width: 0; }
.comparison-chip strong, .comparison-chip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparison-chip strong { font-size: var(--text-xs); font-weight: 800; }
.comparison-chip span { margin-top: 2px; color: var(--forest); font-size: var(--text-2xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.comparison-chip>button { width: 24px; height: 24px; border-radius: 50%; color: var(--muted); font-size: 19px; line-height: 1; }
.comparison-chip>button:hover { color: var(--red); background: var(--red-soft); }
.comparison-slot { display: grid; place-items: center; border-style: dashed; color: var(--faint); font-size: var(--text-2xs); font-weight: 700; }
.comparison-tray-actions { display: flex; align-items: center; gap: 7px; }
.comparison-clear { height: 38px; padding: 0 8px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.comparison-clear:hover { color: var(--red); }
.comparison-open { flex: none; min-width: 124px; height: 40px; padding: 0 15px; }
.comparison-open[disabled] { cursor: default; opacity: .45; transform: none; }
/* --- T_THUMBSAT end --- */
/* T_PCRHYTHM: 세 줄 사이 간격도 네이버 리듬(1 → 2px). 사진이 54px 로 커진 만큼 세로가 남는다. */
.c-item-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-item-copy strong {
  font-size: var(--text-base); font-weight: 700; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c-item-copy small, .c-item-copy em {
  font-size: var(--text-xs); font-style: normal; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c-item-copy em { color: var(--faint); font-size: var(--text-2xs); }
/* --- T_TYPEICON --- 물건 유형을 목록 첫 자리에 못박는다(대표님 "아파트인지 빌라인지 구별이 안된다").
   자산군마다 함정이 다르므로(헌법 0-1-3) 무엇을 보고 있는지가 값보다 먼저 읽혀야 한다.
   ★자리를 늘리지 않았다: 원본 표기("연립주택,다세대,빌라")를 이 줄에서 빼고 그 자리에 아이콘+2~4자를
     넣는 교환이다(pickMeta 의 omitUsage). 전체 문장은 <em> 의 title 에 그대로 남아 있다.
   ★색은 유형별로 나누지 않는다 — 판정 칩(tone-chip)이 이미 색으로 말하고 있어 색이 둘이 되면
     초보는 어느 색이 무슨 뜻인지 못 읽는다. 유형은 형태로만 구별한다. */
.c-item-copy .c-item-meta { display: flex; align-items: center; gap: 4px; min-width: 0; }
.c-item-copy .type-tag {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  margin: 0; padding: 0; border: 0;
  color: var(--ink-2); font-style: normal; font-size: var(--text-2xs); font-weight: 700;
  line-height: 1.2; letter-spacing: -.02em;
}
.c-item-copy .type-tag svg { width: 11px; height: 11px; flex: none; color: var(--forest); stroke-width: 2; }
.c-item-copy .type-meta-divider { flex: none; color: var(--line-2); font-style: normal; }
.c-item-copy .type-meta-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pick-table .c-price, .pick-table .c-state { text-align: right; white-space: nowrap; }
/* T_PCRHYTHM: 네이버는 목록에서 **금액이 가장 큰 글자**다(단지명보다 크다). 우리도 그렇게 둔다
   — 실측 네이버 금액 ~17px/700 vs 단지명 ~13px/700. 우리 금액 15 → 16px(칸 폭 92 안에서
   "25억 6,000만원"까지 들어가는 상한이다. 17px 로 올리면 넘친다). */
.c-price b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.c-price small { display: block; margin-top: 3px; font-size: var(--text-2xs); color: var(--forest); font-weight: 700; }
.c-state b { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.c-state .tone-chip { margin-top: 4px; }
/* T_FRESHUI: 목록 표식 — '목록 N일'(곧 빠진다) · '새로 확인'(오늘 처음 판정).
   판정 칸이 92px 뿐이라 짧게 적고, 전체 문장은 title 로 남긴다(마우스가 있는 화면이라 실제로 읽힌다).
   기일(b)과 판정칩 사이에 끼워 "언제까지 볼 수 있나"가 기일 바로 아래에서 읽히게 한다. */
.c-state .row-flag { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; font-style: normal; white-space: nowrap; }
.c-state .row-flag.is-closing { color: var(--amber); }
.c-state .row-flag.is-fresh { color: var(--forest); }
/* T_VIOLBADGE: 위반건축물은 경고다 — 기일(amber)·신규(forest)보다 강한 색으로 구분한다. */
.c-state .row-flag.is-violation { color: var(--red); }
.pick-table .c-state .tone-chip {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top;
  padding-left: 6px; padding-right: 6px;   /* T_PCRHYTHM: 칩이 잘리지 않는 최소 여백 */
}

.list-more {
  display: block; width: 100%; padding: 13px 0;
  border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.list-more:hover { background: var(--forest-soft); color: var(--forest); }

.tone-chip {
  display: inline-flex; align-items: center; height: 21px; padding: 0 9px;
  border-radius: var(--r-pill); font-size: var(--text-2xs); font-weight: 700; white-space: nowrap;
}
.tone-chip.good { background: var(--forest-soft); color: var(--forest); }
.tone-chip.warn { background: var(--lime-soft); color: var(--lime-ink); }
.tone-chip.risk { background: var(--red-soft); color: var(--red); }
/* T_SEARCHREVIEW: 자료 대기·검토 제외는 추천/위험 판정색이 아닌 중립 상태색으로 말한다. */
.tone-chip.muted { background: var(--line); color: var(--muted); }

/* ── 가운데: 지도 ───────────────────────────────────────────────────────── */

.pick-map { position: relative; }
.map-mode {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-1); border: 1px solid var(--line);
}
.map-mode button {
  height: 26px; padding: 0 12px; border-radius: var(--r-pill);
  font-size: var(--text-xs); font-weight: 700; color: var(--muted);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.map-mode button.is-on { background: var(--forest); color: #fff; }

.pick-map-canvas { flex: 1 1 auto; min-height: 0; background: var(--surface-sunken); }
.map-unavailable {
  height: 100%; display: grid; place-content: center; text-align: center;
  color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); padding: 20px;
}

/* T_PCMAPBOUNDS: "이 지도 범위만" 토글 — 지도 오른쪽 위, 종류 토글과 마주 본다. */
.map-bounds-toggle {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-1);
  font-size: var(--text-xs); font-weight: 400; color: var(--ink-2);
}
.map-bounds-toggle svg { width: 13px; height: 13px; }
.map-bounds-toggle.is-on { border-color: var(--forest); background: var(--forest); color: #fff; font-weight: 700; }

/* T_PCPINZOOM: 멀리서 보면 풍선을 감춘다 — 말풍선 수십 개는 지도를 덮을 뿐 읽히지 않는다. */
#mapCanvas.is-far .map-pin { display: none; }
/* T_PCPERFPICK: 성과의 **단 하나짜리** 풍선은 멀리서도 보인다. 위 규칙은 "멀리서 수십 개가
   지도를 덮는다"를 막는 것인데, 성과 지도는 고른 기록 하나만 그리고 배율도 시군구 기준(10)이다. */
#mapCanvas.is-far .map-pin.is-perf { display: block; }
.map-far-hint {
  position: absolute; left: 50%; top: 14px; translate: -50% 0; z-index: 3;
  display: none; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(4, 24, 17, .68); color: #fff;
  font-size: var(--text-xs); font-weight: 400; white-space: nowrap;
}
.pick-map:has(#mapCanvas.is-far) .map-far-hint { display: block; }

.map-legend {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-xs); color: var(--muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend b { margin-left: auto; color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.map-legend .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--forest); }
.map-legend .dot.warn { background: var(--lime); }
.map-legend .dot.risk { background: var(--red); }

/* ── T_PCPINFLOW: 지도 풍선 ────────────────────────────────────────────────
   대표님 지정 흐름: 목록 선택 → 지도가 그 물건으로 확대 → **풍선을 누르면 상세**.
   그래서 풍선은 "점"이 아니라 **누르고 싶은 카드**여야 한다 — 금액(제일 큰 글자) ·
   단지명 · 면적/할인의 3단이고, 고른 것만 진하게 채운다(네이버도 선택 말풍선만 색이 찬다).
   ★흰 바탕이 기본이다: 지도 위 색면이 많으면 지도를 못 읽는다. 색은 **고른 하나**에만 쓴다. */
.map-pin {
  position: relative; cursor: pointer;
  filter: drop-shadow(0 3px 8px rgba(10, 30, 24, .22));
  transition: transform .16s var(--ease);
}
/* --- T_PCPINSLIM --- (2026-08-11 대표님 결정 "금액 한 줄로 줄인다")
   밀집 지역에서 60개가 3줄짜리 말풍선으로 쌓여 서로를 덮었다(강남 level 7 실측).
   ⇒ 평소에는 **금액 한 줄**만, 고른 물건에서만 이름·면적까지 펼친다. */
.map-pin-body {
  display: block; min-width: 0; max-width: 168px; padding: 5px 9px 6px;
  border-radius: 10px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink);
  text-align: center; white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.map-pin b { display: block; font-size: var(--text-sm); font-weight: 700; letter-spacing: -.03em; }
/* ★T_PCPINSLIM 은 **원복했다**(2026-08-11 대표님 *"물건 풍선도 원복해"*).
   겹침의 진짜 원인은 줄 수가 아니라 **금액이 없는 물건까지 그린 것**이었다 —
   지도가 "확인 중"으로 도배됐다. 이제 금액이 있는 물건만 그린다(app.js `hasPinPrice`). */
.map-pin em {
  display: block; margin-top: 1px; font-style: normal;
  font-size: var(--text-2xs); font-weight: 400; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis;
}
.map-pin i {
  display: block; font-style: normal; font-size: var(--text-2xs); font-weight: 400; color: var(--faint);
}
.map-pin i:empty { display: none; }
/* 꼬리는 몸통과 같은 색으로 따라간다(테두리까지 자연스럽게 이어지도록 두 겹). */
.map-pin-tail {
  position: absolute; left: 50%; bottom: -7px; translate: -50% 0;
  width: 0; height: 0; border: 7px solid transparent; border-top-color: var(--line-2);
}
.map-pin-tail::after {
  content: ""; position: absolute; left: 50%; top: -8px; translate: -50% 0;
  width: 0; height: 0; border: 6px solid transparent; border-top-color: #fff;
}
/* 판정 색은 금액 옆 **가는 띠**로만 쓴다 — 카드 전체를 물들이면 지도가 안 보인다. */
.map-pin-body { border-top: 3px solid var(--forest); }
.map-pin.warn .map-pin-body { border-top-color: var(--amber); }
.map-pin.risk .map-pin-body { border-top-color: var(--red); }
.map-pin.muted .map-pin-body { border-top-color: var(--faint); }

.map-pin:hover { transform: translateY(-1px) scale(1.03); z-index: 4; }
/* 고른 풍선만 채운다 — 지도에서 "지금 보고 있는 물건"이 하나임을 눈으로 못박는다. */
.map-pin.is-on { transform: scale(1.06); z-index: 5; filter: drop-shadow(0 6px 16px rgba(10, 30, 24, .3)); }
.map-pin.is-on .map-pin-body {
  background: var(--forest); border-color: var(--forest-deep); border-top-color: var(--lime); color: #fff;
}
.map-pin.is-on em { color: rgba(255, 255, 255, .92); }
.map-pin.is-on i { color: rgba(255, 255, 255, .72); }
.map-pin.is-on .map-pin-tail { border-top-color: var(--forest-deep); }
.map-pin.is-on .map-pin-tail::after { border-top-color: var(--forest); }

/* --- T_PCPINGROUP --- 겹친 자리를 대신하는 숫자 원(2026-08-11 대표님 "겹치는 풍선 숫자로 묶는걸로").
   지역 그룹 풍선(.map-cluster)과 **모양이 달라야 한다** — 저건 지역이고 이건 "이 자리의 물건 N건"이다.
   그래서 이름표 없이 **숫자만** 담은 원으로 두고, 크기는 말풍선보다 작게 잡아 지도를 덜 덮는다. */
.map-pin-group {
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  border-radius: 999px; border: 2px solid #fff;
  background: var(--forest); color: #fff;
  box-shadow: 0 4px 12px rgba(10, 30, 24, .28);
  cursor: pointer; transition: transform .12s ease;
}
.map-pin-group b { font-size: var(--text-sm); font-weight: 700; letter-spacing: -.02em; }
.map-pin-group:hover { transform: scale(1.08); }
.map-pin-group.is-on { background: var(--forest-deep); box-shadow: 0 6px 16px rgba(10, 30, 24, .38); }
#mapCanvas.is-far .map-pin-group { display: none; }   /* 풍선과 같은 규칙으로 감춘다 */

/* ── 오른쪽: 판단 ───────────────────────────────────────────────────────── */

/* T_PCDOCK: 스크롤은 .verdict-inner 가 맡고, 결정 CTA(.verdict-dock)는 패널 바닥에 고정한다.
   패널 자체가 스크롤 컨테이너였을 때는 CTA 가 화면 아래 353px 지점에 있어 보이지 않았다. */
/* T_PCNAVER: 판단은 물건을 골랐을 때 **목록 바로 오른쪽**에 붙어 지도를 덮는다.
   그리드 칸이 아니라 떠 있는 패널이라, 닫으면 지도가 통째로 넓어진다. */
.verdict-panel {
  overflow: hidden;
  position: absolute; z-index: 4;
  left: calc(var(--list-w) + var(--gap)); top: 0; bottom: 0; width: var(--verdict-w);
  box-shadow: var(--shadow-2);
}
/* T_PCDETAILACT: 요약 하단은 버튼 하나 — 오른쪽 끝에 붙인다(늘어나지 않게). */
.verdict-actions.is-end { justify-content: flex-end; }
.verdict-actions.is-end > * { flex: 0 0 auto; }

/* T_PCDETAILACT: 상세의 행동 줄 — 앱과 같은 자리(관심온도 바로 위). */
.panel-actions { display: flex; gap: 8px; }
.panel-action {
  flex: 1 1 0; min-width: 0; height: 40px; padding: 0 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  font-size: var(--text-sm); font-weight: 400; color: var(--ink-2);
}
.panel-action svg { width: 15px; height: 15px; flex: 0 0 auto; }
.panel-action span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-action:hover { border-color: var(--forest); color: var(--forest); }
.panel-action.is-on { border-color: var(--forest); background: var(--forest-soft); color: var(--forest); font-weight: 700; }
.panel-action.is-passed { border-color: var(--line-2); background: var(--surface-sunken); color: var(--ink-2); font-weight: 700; }

/* T_PCEMPTY: 물건이 0건이면 **목록 칸 안에서** 말한다(조건 바·지도는 그대로 둔다). */
.pick-list-empty { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 24px 18px; }

/* T_PCPASS: 패스한 물건은 지우지 않고 **흐리게** 남긴다(무엇을 걸렀는지 되짚을 수 있게). */
.pick-row.is-passed .c-item-copy strong,
.pick-row.is-passed .c-price b { color: var(--faint); }
.pick-row.is-passed img { opacity: .45; }
.pick-row.is-passed .tone-chip { opacity: .5; }

/* T_PCPASS: 패스 이유 고르기 — 한 줄에 하나, 누르는 곳이 넓게. */
.dialog-pick { margin-top: 10px; font-size: var(--text-md); font-weight: 700; color: var(--ink); }
.pass-choices { margin-top: 14px; display: flex; flex-direction: column; }
.pass-choices button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 2px; cursor: pointer;
  border: 0; border-top: 1px solid var(--line); background: none;
  font-size: var(--text-sm); font-weight: 400; color: var(--ink-2); text-align: left;
}
.pass-choices button:first-child { border-top: 0; }
.pass-choices button span { flex: 1 1 auto; }
.pass-choices button svg { width: 15px; height: 15px; color: var(--faint); }
.pass-choices button:hover { color: var(--forest); }
.pass-choices button:hover svg { color: var(--forest); }

/* T_PCDOCS: 첨부파일 — 이름 · 상태(쪽수/유료) · 열기 */
.doc-list { display: flex; flex-direction: column; }
.doc-item > a, .doc-item > span {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 0; border-top: 1px solid var(--line);
  font-size: var(--text-sm); color: var(--ink-2);
}
.doc-item:first-child > a, .doc-item:first-child > span { border-top: 0; }
.doc-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--forest); }
.doc-item b { font-weight: 700; }
.doc-item small { color: var(--muted); font-size: var(--text-2xs); }
.doc-item em {
  margin-left: auto; font-style: normal; font-size: var(--text-xs); font-weight: 700; color: var(--forest);
}
.doc-item > a:hover b { color: var(--forest); text-decoration: underline; }
.doc-item .is-off { color: var(--faint); }
.doc-item .is-off svg { color: var(--faint); }

/* T_PCSOURCES: 앱의 근거 원문 진입 행과 PC 판단 패널 내부 바텀시트. */
.evidence-source-entry {
  width: 100%; min-height: 64px; display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 11px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink); text-align: left;
}
button.evidence-source-entry { cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease); }
button.evidence-source-entry:hover { border-color: var(--forest); background: var(--forest-soft); }
.evidence-source-icon {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--forest-soft); color: var(--forest);
}
.evidence-source-icon svg { width: 18px; height: 18px; }
.evidence-source-copy { min-width: 0; }
.evidence-source-copy b { display: block; font-size: var(--text-sm); font-weight: 700; }
.evidence-source-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-2xs); line-height: var(--leading-body); }
.evidence-source-arrow { color: var(--forest); font-size: 22px; line-height: 1; text-align: right; }

/* T_PCSOURCES4: 시트의 containing block 은 .verdict-panel 이다. 그래서 전체 브라우저가 아니라
   상세 검토 칸만 덮고, left/right 0 으로 그 칸의 가로폭을 정확히 그대로 쓴다. */
.evidence-panel-layer {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
}
.evidence-panel-layer.is-open { pointer-events: auto; }
.evidence-panel-shade {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: rgba(14, 26, 21, .28); opacity: 0; cursor: pointer;
  transition: opacity .2s var(--ease);
}
.evidence-panel-layer.is-open .evidence-panel-shade { opacity: 1; }
.evidence-panel-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(100% - 44px); max-height: 660px; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-top: 1px solid var(--line-2); border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface); box-shadow: 0 -16px 38px rgba(10, 30, 24, .2);
  transform: translateY(100%); transition: transform .22s var(--ease);
}
.evidence-panel-layer.is-open .evidence-panel-sheet { transform: translateY(0); }
.evidence-sheet-handle {
  flex: 0 0 auto; width: 38px; height: 4px; margin: 9px auto 3px;
  border-radius: var(--r-pill); background: var(--line-2);
}
.evidence-sheet-head {
  flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 10px 18px 14px; border-bottom: 1px solid var(--line);
}
.evidence-sheet-head .eyebrow { margin-bottom: 4px; }
.evidence-sheet-head h2 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em; }
.evidence-sheet-head p:not(.eyebrow) {
  margin-top: 5px; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted);
}
.evidence-sheet-close {
  width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line);
  border-radius: 50%; background: var(--surface-2); color: var(--muted);
  font-size: 21px; line-height: 1; cursor: pointer;
}
.evidence-sheet-close:hover { border-color: var(--forest); color: var(--forest); }
.evidence-sheet-close:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.evidence-sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 18px 18px; scrollbar-width: thin;
}
.evidence-panel-layer.is-viewing .evidence-panel-sheet { background: #eef1ee; }
.evidence-viewer-head {
  flex: 0 0 auto; min-height: 72px; display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface);
  animation: evidenceViewerIn .18s var(--ease) both;
}
.evidence-viewer-head > div { min-width: 0; text-align: center; }
.evidence-viewer-head .eyebrow { margin-bottom: 2px; }
.evidence-viewer-head h2 {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--text-base); font-weight: 700; letter-spacing: -.02em;
}
.evidence-viewer-head p:not(.eyebrow) {
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: var(--text-2xs); font-weight: 700;
}
.evidence-viewer-nav {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  color: var(--ink-2); cursor: pointer; font-size: 21px; line-height: 1;
}
.evidence-viewer-nav svg { width: 18px; height: 18px; }
.evidence-viewer-nav.is-back svg { transform: rotate(180deg); }
.evidence-viewer-nav:hover { border-color: var(--forest); color: var(--forest); }
.evidence-viewer-nav:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.evidence-viewer-body {
  position: relative; flex: 1 1 auto; min-height: 0; padding: 12px;
  overflow: hidden; background: #eef1ee; animation: evidenceViewerIn .18s var(--ease) both;
}
.evidence-viewer-body iframe {
  width: 100%; height: 100%; display: block; border: 1px solid #ccd2ce;
  background: #fff; box-shadow: 0 10px 26px rgba(30, 43, 37, .08);
}
.evidence-viewer-state {
  position: absolute; inset: 12px; z-index: 2; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; padding: 28px;
  border: 1px solid #d8deda; background: #eef1ee; color: var(--ink);
}
.evidence-viewer-state[hidden] { display: none; }
.evidence-viewer-state > span {
  width: 44px; height: 56px; display: grid; place-items: center;
  border: 1px solid #ccd2ce; background: #fff; color: var(--forest);
  animation: evidenceViewerPulse 1.25s ease-in-out infinite;
}
.evidence-viewer-state > span svg { width: 21px; height: 21px; }
.evidence-viewer-state > b { margin-top: 15px; font-size: var(--text-base); font-weight: 700; }
.evidence-viewer-state > p {
  max-width: 310px; margin-top: 6px; color: var(--muted);
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
}
.evidence-viewer-state > button {
  margin-top: 16px; height: 38px; padding: 0 14px; border: 1px solid var(--forest);
  border-radius: var(--r-md); background: var(--surface); color: var(--forest);
  font-size: var(--text-sm); font-weight: 700; cursor: pointer;
}
.evidence-viewer-state > button[hidden] { display: none; }
.evidence-viewer-state.is-error > span { color: var(--amber); animation: none; }
@keyframes evidenceViewerIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes evidenceViewerPulse { 50% { opacity: .48; } }

.evidence-source-list { border-top: 0; }
.evidence-source-list li { border-bottom: 1px solid var(--line); }
.evidence-source-item {
  min-height: 66px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 11px 2px; color: var(--ink-2);
}
button.evidence-source-item {
  width: 100%; border: 0; background: transparent; text-align: left;
  font: inherit; cursor: pointer;
}
.evidence-source-item > svg {
  width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  background: var(--forest-soft); color: var(--forest);
}
.evidence-source-item span { min-width: 0; }
.evidence-source-item b { display: block; font-size: var(--text-sm); font-weight: 700; }
.evidence-source-item small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-2xs); line-height: var(--leading-body); }
.evidence-source-item em { font-style: normal; font-size: var(--text-xs); font-weight: 700; color: var(--forest); white-space: nowrap; }
button.evidence-source-item:hover b { color: var(--forest); text-decoration: underline; }
button.evidence-source-item:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.evidence-source-item.is-off { color: var(--faint); cursor: default; }
.evidence-source-item.is-off > svg { background: #e7e9e5; color: var(--faint); }
.evidence-source-item.is-off small, .evidence-source-item.is-off em { color: var(--faint); }
.evidence-source-empty { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: #f4f5f1; color: var(--faint); }
.evidence-source-empty b, .evidence-source-empty span { display: block; }
.evidence-source-empty b { font-size: var(--text-sm); }
.evidence-source-empty span { margin-top: 4px; font-size: var(--text-xs); line-height: var(--leading-relaxed); }
.evidence-sheet-note { margin-top: 12px; color: var(--faint); font-size: var(--text-xs); line-height: var(--leading-relaxed); }

@media (prefers-reduced-motion: reduce) {
  .evidence-panel-shade, .evidence-panel-sheet { transition-duration: .01ms; }
  .evidence-viewer-head, .evidence-viewer-body, .evidence-viewer-state > span { animation: none; }
}

/* T_PCPANELDETAIL: 뒤로가기(←)는 닫기(×)와 **같은 동그란 버튼**이다. 자리만 반대쪽.
   ★×가 안쪽 스크롤바에 붙어 ←와 짝이 안 맞아 보였다(대표님 "X 표의 위치를 다시 잡고").
     상세 패널은 스크롤바를 숨겨(모바일 `.media-track` 과 같은 방식) 두 버튼을 좌우 대칭으로 둔다. */
.verdict-back { right: auto; left: 12px; }
.verdict-corner { box-shadow: 0 2px 8px rgba(16, 38, 30, .12); }
/* ★T_PCXPOS: 두 패널(요약·상세)이 **같은 규칙**을 쓴다.
   요약만 스크롤바가 보여서 그 폭만큼 × 가 밀렸다(대표님: "오늘의 판단 화면 우상단 x 표시가
   스크롤때문에 화면을 벗어나 있고 상세보기 x 표시는 스크롤이 없어서 정확한 위치에 있어").
   ★스크롤바 폭은 브라우저·OS 마다 다르다 — 내 환경은 오버레이라 **0px 로 측정된다**.
     그래서 "× 를 스크롤바 폭만큼 옮기는" 보정은 여기서 검증할 수 없고, 환경마다 어긋난다.
     ⇒ 대표님이 정확하다고 하신 상세 쪽처럼 **스크롤바를 재우고** 위치를 하나로 고정한다. */
.verdict-inner { scrollbar-width: none; }
.verdict-inner::-webkit-scrollbar { display: none; }

/* ── T_PCFLICK: 사진 플리킹(모바일 .media-track 과 같은 scroll-snap) ─────── */
/* T_PCSUMPHOTO: 요약 판단창도 세로 flex 다. shrink 를 막지 않으면 슬라이드는 260px 인데
   바깥 사진 카드가 0px 로 눌린다(운영 CSS를 실제 Chrome에서 측정). */
.panel-photos {
  flex: 0 0 auto; position: relative;
  border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunken);
}
.panel-photo-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none;
}
.panel-photo-track::-webkit-scrollbar { display: none; }
.panel-photo-track:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
/* ★크기는 **영역에 맞춘다**: 슬라이드가 트랙 폭 100% 라 패널이 좁아져도 사진이 늘 꽉 찬다. */
.panel-photo-slide {
  flex: 0 0 100%; width: 100%; height: 260px; position: relative;
  scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
}
.panel-photo-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}
.panel-photo-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 9px;
  color: #fff; font-size: var(--text-2xs); font-weight: 700;
  background: linear-gradient(to bottom, transparent, rgba(4, 24, 17, .72));
}
/* ★좌우 화살표 — PC 는 손가락으로 못 넘긴다. 점만 있으면 넘길 수 있는 줄 모른다. */
.panel-photo-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(4, 24, 17, .52);
  color: #fff; transition: background .16s var(--ease), opacity .16s var(--ease);
}
.panel-photo-nav svg { width: 16px; height: 16px; }
.panel-photo-nav.is-prev { left: 8px; }
.panel-photo-nav.is-prev svg { transform: rotate(180deg); }
.panel-photo-nav.is-next { right: 8px; }
.panel-photo-nav:hover { background: rgba(4, 24, 17, .78); }
.panel-photo-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.panel-photo-nav:disabled { opacity: .28; cursor: default; }

.panel-photo-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.panel-photo-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.45); }
.panel-photo-dots i.is-on { background: #fff; width: 14px; border-radius: 3px; }
.panel-photo-count {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(4, 24, 17, .62); color: #fff;
  font-size: var(--text-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── T_PCINTEREST: 관심온도 ─────────────────────────────────────────────── */
.panel-interest {
  padding: 13px; border: 1px solid rgba(11, 95, 71, .11);
  border-radius: var(--r-md); background: var(--forest-soft);
}
.panel-interest-top { display: flex; align-items: baseline; gap: 7px; }
.panel-interest-top span { font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
.panel-interest-top b { font-size: var(--text-md); font-weight: 700; color: var(--forest); letter-spacing: -.03em; }
.panel-interest-top em { font-style: normal; font-size: var(--text-xs); font-weight: 700; color: var(--forest); }
.panel-interest p { margin-top: 6px; font-size: var(--text-2xs); color: var(--muted); line-height: var(--leading-relaxed); }
.panel-interest .panel-actions { margin-top: 12px; }
.panel-interest .panel-action { height: 44px; background: var(--surface); font-weight: 700; }

/* ── T_PCBIDHIST: 앱과 같은 법원 기일 이력 ─────────────────────────────── */
.panel-bidhist { display: flex; flex-direction: column; }
.panel-bidhist-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 0 0 10px; border-bottom: 2px solid var(--ink);
}
.panel-bidhist-head > div { min-width: 0; }
.panel-bidhist-head small {
  display: block; margin-bottom: 3px; color: var(--forest);
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em;
}
.panel-bidhist-head h4 { font-size: var(--text-base); font-weight: 700; letter-spacing: -.02em; }
.panel-bidhist-head > p {
  max-width: 62%; color: var(--muted); font-size: var(--text-2xs);
  line-height: var(--leading-snug); text-align: right;
}
.panel-bidhist-alert {
  margin-top: 10px; padding: 12px; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px; border: 1px solid rgba(177, 69, 62, .18); border-radius: var(--r-md);
  background: var(--red-soft); color: var(--red);
}
.panel-bidhist-alert > svg { width: 18px; height: 18px; margin: 2px auto 0; }
.panel-bidhist-alert b { display: block; font-size: var(--text-sm); font-weight: 700; }
.panel-bidhist-alert p {
  margin-top: 4px; color: #7d3b35; font-size: var(--text-xs); line-height: var(--leading-body);
}
.panel-bidhist-empty { padding: 14px 0; border-bottom: 1px solid var(--line); }
.panel-bidhist-empty b { display: block; font-size: var(--text-sm); font-weight: 700; }
.panel-bidhist-empty p { margin-top: 4px; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-body); }
.panel-bidhist-details > summary {
  min-height: 44px; padding: 11px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; list-style: none; cursor: pointer;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
  font-size: var(--text-sm); font-weight: 700;
}
.panel-bidhist-details > summary::-webkit-details-marker { display: none; }
.panel-bidhist-details > summary span { color: var(--faint); transition: transform .16s var(--ease); }
.panel-bidhist-details[open] > summary span { transform: rotate(180deg); }
.panel-bidhist-list { border-bottom: 1px solid var(--line); }
.panel-bidhist-row {
  min-height: 50px; padding: 10px 0; display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--line);
}
.panel-bidhist-row:last-child { border-bottom: 0; }
.panel-bidhist-row.is-future { opacity: .62; }
.panel-bidhist-dot { width: 9px; height: 9px; margin-left: 2px; border-radius: 50%; background: var(--faint); }
.panel-bidhist-dot.bad { background: var(--red); }
.panel-bidhist-dot.warn { background: var(--amber); }
.panel-bidhist-dot.good { background: var(--forest); }
.panel-bidhist-row > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; }
.panel-bidhist-row > div b { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.panel-bidhist-row > div span,
.panel-bidhist-row > div em { color: var(--muted); font-size: var(--text-xs); font-style: normal; }
.panel-bidhist-row > strong { font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.panel-bidhist-row > strong.bad { color: var(--red); }
.panel-bidhist-row > strong.warn { color: var(--amber); }
.panel-bidhist-row > strong.good { color: var(--forest); }
.panel-bidhist-row > strong.muted { color: var(--muted); }

/* ── T_PCAPPDETAIL: 앱 상세의 가격 → 권리 → 위험 팩트 흐름 ──────────────── */
.panel-detail-facts-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 9px; border-bottom: 2px solid var(--ink);
}
.panel-detail-facts-head h4 { font-size: var(--text-base); font-weight: 700; letter-spacing: -.02em; }
.panel-detail-facts-head span { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; }
.panel-detail-facts-list { display: flex; flex-direction: column; }
.panel-detail-fact {
  min-height: 68px; padding: 12px 0;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 28px;
  align-items: center; gap: 10px; border-bottom: 1px solid var(--line);
}
.panel-detail-fact-label {
  color: var(--muted); font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-snug);
}
.panel-detail-fact-copy { min-width: 0; padding-left: 10px; border-left: 1px solid var(--line); }
.panel-detail-fact-copy > strong {
  display: block; color: var(--ink); font-size: var(--text-sm); font-weight: 700;
  line-height: var(--leading-snug); overflow-wrap: anywhere;
}
.panel-detail-fact-copy > p {
  margin-top: 4px; color: var(--muted); font-size: var(--text-xs); font-weight: 400;
  line-height: var(--leading-body); overflow-wrap: anywhere;
}
.panel-detail-fact-icon {
  width: 28px; height: 28px; display: grid; place-items: center; align-self: start;
  color: var(--amber);
}
.panel-detail-fact-icon svg { width: 17px; height: 17px; }
.panel-detail-fact.is-good .panel-detail-fact-icon { color: var(--forest); }
.panel-detail-fact.is-bad .panel-detail-fact-icon { color: var(--red); }
.panel-detail-fact.is-hold .panel-detail-fact-icon { color: var(--amber); }
.panel-detail-fact.is-bad .panel-detail-fact-copy > strong { color: var(--red); }

/* 앱 상세와 같은 세 가지 가격 축만 가격 행 안에 둔다. 별도 선정근거 섹션은 만들지 않는다. */
.panel-price-metrics { margin-top: 10px; border-top: 1px solid var(--line); }
.panel-price-metrics > div {
  min-height: 36px; padding: 8px 0; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line);
}
.panel-price-metrics > div:last-child { border-bottom: 0; padding-bottom: 0; }
.panel-price-metrics dt { color: var(--ink-2); font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-snug); }
.panel-price-metrics dd {
  min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 2px 5px; text-align: right; font-variant-numeric: tabular-nums;
}
.panel-price-metrics dd b { color: var(--ink); font-size: var(--text-sm); font-weight: 700; line-height: var(--leading-snug); }
.panel-price-metrics .is-good dd b { color: var(--forest); }
.panel-price-metrics dd small { color: var(--ink-2); font-size: var(--text-2xs); font-weight: 400; line-height: var(--leading-snug); }
.panel-price-metrics dd em { color: var(--muted); font-size: var(--text-2xs); font-style: normal; font-weight: 400; line-height: var(--leading-snug); white-space: nowrap; }

/* ── T_RPHISTORY: 국토부 동일단지 실거래 1·3·5·7년 추이 ─────────────── */
.price-history-card {
  position: relative; overflow: hidden; padding: 15px;
  border: 1px solid rgba(11, 95, 71, .16); border-radius: var(--r-md);
  background: linear-gradient(180deg, #fbfdfb 0%, #f5f9f6 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.detail-main > .price-history-card { margin: 0; }
.price-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.price-history-head small {
  display: block; color: var(--forest); font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: .02em;
}
.price-history-head h4 { margin-top: 2px; font-size: var(--text-base); font-weight: 700; letter-spacing: -.02em; }
.price-history-head > span {
  max-width: 54%; padding: 4px 8px; border-radius: var(--r-pill);
  background: var(--forest-soft); color: var(--forest); text-align: right;
  font-size: var(--text-2xs); font-weight: 700; line-height: var(--leading-snug);
}
.price-history-card.is-preparing .price-history-head > span { background: var(--amber-soft); color: var(--amber); }
.price-history-tabs {
  margin-top: 13px; padding: 3px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
  background: rgba(22,45,36,.055); border-radius: 9px;
}
.price-history-tabs button {
  min-height: 30px; border-radius: 7px; color: var(--muted);
  font-size: var(--text-xs); font-weight: 700; transition: background .16s var(--ease), color .16s var(--ease);
}
.price-history-tabs button:hover { color: var(--ink); }
.price-history-tabs button.is-on {
  background: #fff; color: var(--forest); box-shadow: 0 1px 4px rgba(16,38,30,.10);
}
.price-history-reference {
  margin-top: 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1px 10px;
}
.price-history-reference > span { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; }
.price-history-reference > strong {
  grid-row: span 2; color: var(--forest); font-size: var(--text-xl); font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.price-history-reference > small { color: var(--faint); font-size: var(--text-2xs); }
.price-history-chart-wrap { position: relative; margin-top: 10px; }
.price-history-legend {
  min-height: 20px; display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  color: var(--muted); font-size: 10px; font-weight: 650;
}
.price-history-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.price-history-legend i { width: 15px; height: 7px; display: inline-block; border-radius: 4px; }
.price-history-legend i.is-band { background: rgba(20, 128, 94, .13); }
.price-history-legend i.is-line { height: 2px; background: var(--forest); }
.price-history-legend i.is-deal {
  width: 8px; height: 8px; border-radius: 50%; background: #9b55cf;
  box-shadow: 0 0 0 2px rgba(155,85,207,.12);
}
.price-history-chart { display: block; width: 100%; height: auto; overflow: visible; }
.price-history-grid { stroke: rgba(22,45,36,.105); stroke-width: 1; stroke-dasharray: 2.5 4; }
.price-history-axis-label, .price-history-month-label {
  fill: var(--muted); font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.price-history-month-label { fill: var(--faint); font-weight: 600; }
.price-history-band { fill: rgba(20, 128, 94, .115); stroke: none; }
.price-history-line {
  fill: none; stroke: var(--forest); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.price-history-point { outline: none; cursor: pointer; }
.price-history-point-hit { fill: transparent; stroke: none; pointer-events: all; }
.price-history-point-dot {
  fill: #fff; stroke: var(--forest); stroke-width: 2; vector-effect: non-scaling-stroke;
  transition: fill .14s var(--ease), stroke-width .14s var(--ease);
}
.price-history-point:hover .price-history-point-dot,
.price-history-point:focus .price-history-point-dot,
.price-history-point.is-active .price-history-point-dot {
  fill: var(--forest); stroke: #fff; stroke-width: 3;
}
.price-history-deal { cursor: pointer; }
.price-history-deal-hit { fill: transparent; stroke: none; pointer-events: all; }
.price-history-deal-dot {
  fill: #a45bd6; stroke: rgba(255,255,255,.92); stroke-width: .9;
  vector-effect: non-scaling-stroke;
  transition: fill .14s var(--ease), stroke-width .14s var(--ease), filter .14s var(--ease);
}
.price-history-deal:hover .price-history-deal-dot,
.price-history-deal.is-active .price-history-deal-dot {
  fill: #6f2ca0; stroke: #fff; stroke-width: 2.4;
  filter: drop-shadow(0 1px 2px rgba(73,28,104,.28));
}
.price-history-latest line { stroke: rgba(11, 95, 71, .48); stroke-width: 1; stroke-dasharray: 2 2; }
.price-history-latest rect { fill: var(--ink); filter: drop-shadow(0 3px 5px rgba(15, 37, 29, .18)); }
.price-history-latest text { fill: #fff; font-size: 10.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.price-history-readout {
  margin-top: 5px; overflow: hidden; border: 1px solid rgba(11,95,71,.13); border-radius: 11px;
  background: #fff; box-shadow: 0 5px 18px rgba(20,50,39,.055);
}
.price-history-readout-head {
  min-width: 0; padding: 8px 12px 7px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid rgba(22,45,36,.07); background: #fbfcfb;
}
.price-history-readout-head span { color: var(--muted); font-size: 10px; font-weight: 700; }
.price-history-readout-head em {
  color: var(--forest); font-size: 10px; font-style: normal; font-weight: 750; white-space: nowrap;
}
.price-history-readout dl { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-history-readout dl > div {
  min-width: 0; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 9px;
}
.price-history-readout dl > div.is-primary {
  grid-column: 1 / -1; padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(22,45,36,.07);
}
.price-history-readout dl > div.is-low { border-left: 1px solid rgba(22,45,36,.07); }
.price-history-readout dt { color: var(--faint); font-size: 10px; font-weight: 600; white-space: nowrap; }
.price-history-readout dd {
  min-width: 0; color: var(--ink-2); text-align: right; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.price-history-readout .is-primary dt { color: var(--forest); font-weight: 700; }
.price-history-readout .is-primary dd {
  color: var(--forest); font-size: var(--text-base); font-weight: 750; letter-spacing: -.025em;
}
.price-history-readout .is-high dt { color: #c84e43; }
.price-history-readout .is-low dt { color: #3976b9; }
.price-history-readout.is-deal .is-primary dt,
.price-history-readout.is-deal .is-primary dd { color: #7734a8; }
.price-history-comparisons { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.price-history-comparison {
  min-width: 0; padding: 10px; display: grid; gap: 2px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.78);
}
.price-history-comparison span { color: var(--muted); font-size: var(--text-2xs); }
.price-history-comparison strong { color: var(--ink); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.price-history-comparison b { color: var(--red); font-size: var(--text-2xs); font-weight: 700; }
.price-history-comparison.is-lower b { color: var(--forest); }
.price-history-note, .price-history-progress, .price-history-card.is-empty > p,
.price-history-card.is-loading > p {
  margin-top: 10px; color: var(--muted); font-size: var(--text-2xs); line-height: var(--leading-body);
}
.price-history-progress { padding-top: 9px; border-top: 1px solid var(--line); color: var(--amber); }
.price-history-no-points {
  min-height: 112px; margin-top: 10px; display: grid; place-items: center; padding: 18px;
  border: 1px dashed var(--line-2); border-radius: 9px; color: var(--muted);
  text-align: center; font-size: var(--text-xs); line-height: var(--leading-body);
}
.price-history-card.is-empty button {
  margin-top: 10px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  background: #fff; color: var(--forest); font-size: var(--text-xs); font-weight: 700;
}

/* ── T_PCPRICEBASIS: 가격과 근거를 상단 한 블록에서 판단 순서대로 읽는다 ───── */
.price-flow-card { overflow: hidden; }
.price-flow-card.is-compact { padding: 15px; box-shadow: none; }
.price-flow-head small {
  color: var(--forest); font-size: var(--text-2xs); font-weight: 800; letter-spacing: .04em;
}
.price-flow-head h2 { margin-top: 3px; font-size: var(--text-lg); font-weight: 800; letter-spacing: -.025em; }
.price-flow-head p { margin-top: 5px; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-relaxed); }
/* --- T_COSTSTORY begin --- 진짜 가격 영수증(대표님 발주 2026-08-16). 앱과 같은 구조·같은 문구.
   ★박스를 만들지 않는다 · 새 행 구조를 만들지 않는다(대표님 "기존 디자인으로 가자" · "박스로 하지마").
     영수증은 기존 `.price-flow-card` / `.price-flow-lines` 행을 **그대로** 쓴다 —
     is-stop(적색)·is-cash(합계선)가 이미 있으므로, 여기 남는 것은 차액 색과 접기 두 가지뿐이다. */
.price-flow-lines > .is-gap dd { color: var(--red); }
.price-flow-lines > .is-gap.is-gain dd { color: var(--forest); }
.price-calculation-note.is-stop { color: var(--red); font-weight: 800; }
/* 참고 수치는 접어 둔다 — 판단은 위 영수증에서 끝난다. */
/* ★박스를 치지 않는다(대표님 2026-08-16 "디자인 가이드 박스치지말고 기존 스타일로 맞추라고").
   전역 `:focus-visible` 이 3px 초록 테두리 + border-radius 를 그려, 접기를 한 번 누르면
   그 줄이 **상자처럼** 남았다(스크린샷에서 확인). 접근성은 밑줄로 대신한다. */
.price-flow-fold > summary { padding: 10px 0; color: var(--muted); font-size: var(--text-sm); font-weight: 800; cursor: pointer; list-style: none; }
.price-flow-fold > summary:focus,
.price-flow-fold > summary:focus-visible { outline: none; text-decoration: underline; }
.price-flow-fold > summary::-webkit-details-marker { display: none; }
.price-flow-fold > summary::after { content: " ▾"; }
.price-flow-fold[open] > summary::after { content: " ▴"; }
/* --- T_COSTSTORY end --- */
.price-flow-lines { margin-top: 12px; display: flex; flex-direction: column; counter-reset: price-flow; }
/* --- T_PCRECEIPTPARITY (2026-08-16 대표님 "pc 버전의 상세를 이렇게 동일한 항목 디자인 스타일로") ---
   항목·순서·문구는 이미 앱과 같았는데(8b70458) **행의 생김새**가 달랐다. 앱 스크린샷을 정본으로
   `.key-row`(webapp_dist/styles.css:2502~2513) 실측값에 맞춘다 — 바꾸는 것은 이 4가지뿐이다:
     행 높이 58/9px → 54/10px · 라벨색 --ink-2 → --ink · 설명 11px → 12px
     금액 --ink 15px → **--forest 17px**(앱은 금액이 초록이 기본이고 참고 행만 흐리다)
   ★새 클래스·새 박스를 만들지 않는다. is-reference 만 앱에 있고 PC 에 없어서 추가한다. */
.price-flow-lines > div {
  min-height: 54px; padding: 10px 0; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.price-flow-lines dt { min-width: 0; display: flex; align-items: flex-start; gap: 9px; }
.price-flow-lines dt > i {
  flex: 0 0 auto; padding-top: 2px; color: var(--faint); font-size: 10px;
  font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums;
}
.price-flow-lines dt > span { min-width: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 800; }
.price-flow-lines dt small {
  display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-xs);
  font-weight: 500; line-height: var(--leading-snug); word-break: keep-all; overflow-wrap: anywhere;
}
.price-flow-lines dd {
  max-width: 185px; color: var(--forest); font-size: var(--text-lg); font-weight: 800;
  line-height: 1.35; letter-spacing: -.04em; text-align: right; word-break: keep-all;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
/* T_PCRECEIPTPARITY: 참고 행(법원 최저가·실거래 시세)은 값을 흐린다 — 앱 `.key-row.is-reference`.
   판단의 결론이 아니라 대조용 숫자라서, 초록으로 두면 결론과 같은 무게로 읽힌다. */
.price-flow-lines .is-reference dd { color: var(--ink-2); }
.price-flow-lines .is-expected dd, .price-flow-lines .is-target dd { color: var(--forest); }
.price-flow-lines .is-target { margin: 0 -8px; padding-right: 8px; padding-left: 8px; background: var(--forest-soft); }
.price-flow-lines .is-stop dd { color: var(--red); }
.price-flow-lines .is-cash { margin-top: 5px; border-top: 2px solid var(--ink); }
.price-flow-schedule {
  min-height: 42px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs);
}
.price-flow-schedule strong { color: var(--ink); font-size: var(--text-sm); }
.price-flow-formula {
  margin-top: 12px; padding: 9px 10px; border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--ink-2); font-size: var(--text-2xs); line-height: var(--leading-relaxed);
}
/* T_PCRECEIPTPARITY: 앱 `.loan-note`(styles.css:2529)와 같은 굵기·색·크기. */
.price-calculation-note {
  margin-top: 11px; padding-left: 10px; border-left: 2px solid var(--amber);
  color: #725b42; font-size: var(--text-xs); line-height: var(--leading-relaxed);
}
.price-history-skeleton { height: 130px; margin-top: 14px; display: flex; align-items: flex-end; gap: 6px; }
.price-history-skeleton i {
  flex: 1; height: 44%; border-radius: 5px; background: linear-gradient(90deg, #e9eeea 25%, #f6f8f6 50%, #e9eeea 75%);
  background-size: 200% 100%; animation: history-shimmer 1.35s infinite linear;
}
.price-history-skeleton i:nth-child(2) { height: 70%; }
.price-history-skeleton i:nth-child(3) { height: 55%; }
@keyframes history-shimmer { to { background-position: -200% 0; } }

/* --- T_PCLANDTRAP begin --- (2026-08-16 대표님 "pc 함정 블록 진행해")
   앱과 같은 함정 블록. ★박스를 만들지 않는다(아래 T_PCFLATDETAIL 과 같은 원칙) — 항목 구분은
   hairline 이고, 머리글은 기존 `.panel-bidhist-head`(eyebrow + 제목 + 우측 부제)를 그대로 쓴다.
   ★새로 만든 규칙은 아래 5줄뿐이다. 색은 기존 토큰만 쓴다(--red 는 경고 제목에만). */
.panel-landtrap { display: flex; flex-direction: column; }
.panel-landtrap-list { display: flex; flex-direction: column; }
.panel-landtrap-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.panel-landtrap-item > b { display: block; font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.panel-landtrap-item.is-risk > b { color: var(--red); }
.panel-landtrap-item p {
  margin-top: 4px; color: var(--ink-2); font-size: var(--text-xs);
  line-height: var(--leading-relaxed); word-break: keep-all; overflow-wrap: anywhere;
}
.panel-landtrap-item small { color: var(--muted); font-size: var(--text-2xs); }
/* --- T_PCLANDTRAP end --- */

/* --- T_PCFLATDETAIL begin --- (2026-08-16 대표님 "pc에 박스 디자인을 버리라고 · 기존 스타일을 맞추라고")
   앱 상세에는 카드가 **하나도 없다** — `.detail-analysis-flow>section` 이 배경 투명 + 위 3px 검은 선
   뿐이다(webapp_dist/styles.css:2341, design 시안 값 그대로). 그 파일 주석이 원칙을 이미 적어 뒀다:
   *"큰 카드 안에 작은 카드를 반복하지 않는다."*
   🔴PC 상세 패널은 그 안에 흰 카드가 **12개**였다(실측) — 정확히 그 상태였다.
   ★상세 패널(.is-detail)에만 건다. 요약 패널·목록·홈 카드는 그대로 둔다(대표님이 지목한 것은 상세다).
   ★박스를 없애는 것이지 경계를 없애는 게 아니다 — 섹션은 앱과 같은 **굵은 가로선**으로 나눈다. */
/* ★가격 이력(price-history) 블록은 **제외한다** — 대표님 2026-08-16 *"이 영역을 바로 전 버전으로
   디자인 돌려놔"*(월 중위값·거래 상단/하단·법원 최저가/예상 낙찰가 칸). 그 블록은 값이 격자로
   묶여 읽히는 곳이라 테두리가 조판의 일부다. 평평하게 펴자 칸 구분이 사라졌다.
   ⇒ 아래 목록에서 `.price-history-*` 를 빼서 원래 카드 디자인 그대로 둔다. */
.verdict-panel.is-detail .card,
.verdict-panel.is-detail .panel-photos,
.verdict-panel.is-detail .price-flow-card,
.verdict-panel.is-detail .price-flow-formula,
.verdict-panel.is-detail .evidence-source-entry,
.verdict-panel.is-detail .panel-interest {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  padding-left: 0; padding-right: 0;
}
.verdict-panel.is-detail .price-flow-card {
  margin-top: 18px; padding-top: 15px; border-top: 3px solid var(--ink);
}
/* --- T_PCFLATDETAIL end --- */
@media (prefers-reduced-motion: reduce) { .price-history-skeleton i { animation: none; } }

/* ── T_PCASKLIST: 줍고 AI 질문 리스트(입력칸 없음) ──────────────────────── */
.panel-ask-item { border-top: 1px solid var(--line); }
.panel-ask-item summary {
  padding: 10px 0; cursor: pointer; list-style: none;
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
}
.panel-ask-item summary::-webkit-details-marker { display: none; }
.panel-ask-item summary::after { content: "+"; float: right; color: var(--faint); font-weight: 700; }
.panel-ask-item[open] summary { color: var(--forest); }
.panel-ask-item[open] summary::after { content: "\2212"; }
.panel-ask-item p { padding: 0 0 11px; font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-relaxed); }
.verdict-panel.is-detail .verdict-inner { padding-top: 46px; }   /* 두 모서리 버튼 아래로 */
/* ★.verdict-inner 는 높이가 정해진 **세로 flex** 라, 자식이 기본값(flex-shrink:1)으로 눌린다.
   실측: 사진 카드가 내용 423px 인데 **38px** 로 찌부러졌다(사진이 한 줄 띠로 보였다).
   자식은 제 높이를 지키게 하고, 넘치는 만큼은 패널이 스크롤한다. */
.verdict-panel.is-detail .verdict-inner > * { flex: 0 0 auto; }
/* 패널은 530px 이라 상세 사진·표가 넘치면 안 된다. */
.verdict-panel.is-detail .property-visual-card,
.verdict-panel.is-detail .official-photo-grid { max-width: 100%; }
.verdict-panel.is-detail .official-photo-grid { grid-auto-rows: 104px; }
.verdict-panel.is-detail .official-photo-grid.count-1 { grid-auto-rows: 190px; }
.verdict-panel.is-detail .card-section-title { font-size: var(--text-base); font-weight: 700; margin-bottom: 8px; }
.verdict-panel.is-detail .detail-updated { margin-top: 6px; display: block; }

.verdict-close, .verdict-corner {
  position: absolute; right: 12px; top: 9px; z-index: 2;   /* T_PCXPOS: 요약·상세 동일 */
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer;
}
.verdict-close:hover, .verdict-corner:hover { background: var(--surface-2); color: var(--ink); }
.verdict-corner:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.verdict-inner {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 16px;
}
.verdict-dock {
  flex: 0 0 auto; padding: 12px 18px 14px;
  border-top: 1px solid var(--line); background: var(--surface);
}

.verdict-head p.eyebrow {
  font-size: var(--text-2xs); font-weight: 700; color: var(--forest);
  letter-spacing: .02em; margin-bottom: 8px;
}
.verdict-head h2 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.03em; line-height: var(--leading-tight); }
.verdict-head h3 { margin-top: 5px; font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em; color: var(--ink-2); }
.verdict-head .lead { margin-top: 9px; font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-relaxed); }

/* T_SEARCHREVIEW: 판정 숫자가 없는 물건은 빈 KPI를 판정처럼 꾸미지 않고 상태·사유를 먼저 보여 준다. */
.analysis-state-banner {
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.analysis-state-banner span {
  display: block; margin-bottom: 4px; font-size: var(--text-2xs); font-weight: 700;
  color: var(--muted); letter-spacing: .02em;
}
.analysis-state-banner strong {
  display: block; font-size: var(--text-md); font-weight: 700; color: var(--ink-2);
  line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere;
}
.analysis-state-banner p { margin-top: 6px; font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-relaxed); }
.analysis-state-banner.is-waiting { background: #f4f5f1; }
.analysis-state-banner.is-waiting strong { color: var(--forest); }
.analysis-state-banner.is-excluded { background: #f5f2ec; border-color: #dfd7ca; }
.analysis-state-banner.is-excluded strong { color: #755f3e; }
.review-state-panel .verdict-inner { padding-top: 24px; }
.review-state-kpi dd { font-size: var(--text-md); }

/* --- T_LITEFACTS begin --- (2026-08-13) 평가 대상이 아닌 물건에도 **사실**은 보여준다.
   대표님: "우리가 평가만 안 하면 되는 거잖아 · 근거자료 이런 건 줄 수 있잖아."
   ★판정 패널의 언어를 그대로 쓴다(같은 hairline·같은 dt/dd 리듬) — 새 상자를 만들지 않는다. */
.review-shot { margin: 16px 0 4px; }
.review-shot img {
  width: 100%; height: 168px; object-fit: cover; border-radius: 10px;
  background: var(--surface-sunken); display: block;
}
.review-shot figcaption {
  margin-top: 7px; font-size: var(--text-2xs); color: var(--muted);
  line-height: var(--leading-snug);
}
.review-facts { margin-top: 18px; }
.review-facts h4, .review-notes h4 { font-size: var(--text-base); font-weight: 700; margin-bottom: 8px; }
.review-facts dl { display: flex; flex-direction: column; }
.review-facts dl div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.review-facts dt { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.review-facts dd {
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
  text-align: right; font-variant-numeric: tabular-nums;
}
.review-notes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.review-notes p {
  font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-relaxed);
  white-space: pre-line;
}
.review-notes small {
  display: block; margin-top: 8px; font-size: var(--text-2xs); color: var(--faint);
  line-height: var(--leading-snug);
}
.review-source { margin-top: 14px; font-size: var(--text-sm); }
.review-source a { color: var(--forest); font-weight: 700; text-decoration: underline; }
/* --- T_LITEFACTS end --- */

/* ★4열 1행으로 두면 396px 안에서 금액이 "2억 4,600…" 으로 잘린다(실측).
   지표를 못 읽으면 판단 패널의 존재 이유가 없다 → 2×2 로 세운다. */
.verdict-kpi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.verdict-kpi div { padding: 11px 12px 12px; border-left: 1px solid var(--line); }
.verdict-kpi div:nth-child(odd) { border-left: 0; padding-left: 0; }
.verdict-kpi div:nth-child(n+3) { border-top: 1px solid var(--line); }
/* T_PCKPIOdd: 지표가 홀수 개면 마지막 셀이 반쪽만 차지해 표가 깨져 보인다.
   남는 마지막 셀은 한 행 전체를 써서 빈 오른쪽 칸과 끊긴 세로선을 만들지 않는다. */
.verdict-kpi div:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }
.verdict-kpi dt { font-size: var(--text-2xs); font-weight: 400; color: var(--muted); white-space: nowrap; }
.verdict-kpi dd {
  margin-top: 4px; font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: var(--leading-snug);
}
.verdict-kpi dd.accent { color: var(--forest); }
.verdict-kpi dd.risk { color: var(--red); }

.evidence-count { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted); }
.evidence-count i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.evidence-count b { color: var(--ink-2); font-weight: 700; }

.axis-list { display: flex; flex-direction: column; }
.axis-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.axis-row:first-child { border-top: 0; }
.axis-tag { font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-body); }
.axis-tag.ok { color: var(--forest); }
.axis-tag.check { color: var(--amber); }
.axis-tag.risk { color: var(--red); }
.axis-body strong { display: block; font-size: var(--text-sm); font-weight: 700; line-height: var(--leading-body); color: var(--ink); }
.axis-body small { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--faint); line-height: var(--leading-body); }

.verdict-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.verdict-two-col h4 { font-size: var(--text-base); font-weight: 700; margin-bottom: 8px; }
.verdict-two-col li {
  position: relative; padding-left: 10px; margin-bottom: 6px;
  font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-body);
}
.verdict-two-col li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 3px; height: 3px; border-radius: 50%; background: var(--faint);
}

/* ── T_PCDETAIL: 물건 상세 ──────────────────────────────────────────────── */
/* 돌아가는 길. 종전엔 작은 회색 글씨 하나뿐이라 뒤로 갈 곳이 있는 줄 몰랐다. */
.detail-back {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0 12px;
}
.back-button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-2);
}
.back-button:hover { border-color: var(--forest); color: var(--forest); background: var(--forest-soft); }
.back-button svg { width: 15px; height: 15px; transform: rotate(180deg); }   /* 화살표를 왼쪽으로 */
.detail-updated { font-size: var(--text-xs); color: var(--faint); font-variant-numeric: tabular-nums; }

/* 시안(property-1440.png)과 같은 2단 — 왼쪽 근거 / 오른쪽 결정. */
.detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap); align-items: start; }
.detail-main { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.detail-decision {
  position: sticky; top: calc(var(--header-h) + 14px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden;
}
.detail-decision-inner { padding: 18px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.detail-decision-inner h2 {
  font-size: var(--text-lg); font-weight: 700; letter-spacing: -.025em;
  line-height: var(--leading-tight);
}
.detail-decision-rows { width: 100%; display: flex; flex-direction: column; }
.detail-decision-rows div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.detail-decision-rows div:first-child { border-top: 0; padding-top: 0; }
.detail-decision-rows dt { font-size: var(--text-sm); color: var(--muted); font-weight: 400; }
.detail-decision-rows dd {
  font-size: var(--text-md); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.detail-decision-rows dd.accent { color: var(--forest); }
.detail-decision .verdict-actions { width: 100%; }
.detail-decision .verdict-actions > * { flex: 1 1 0; }

@media (max-width: 1180px) {
  .detail-columns { grid-template-columns: minmax(0, 1fr); }
  .detail-decision { position: static; }
}

.next-action h4 { font-size: var(--text-base); font-weight: 700; margin-bottom: 6px; }
.next-action p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-relaxed); }

.verdict-actions { display: flex; align-items: center; gap: 10px; }
/* T_PCDOCK: 고정된 자리에서는 두 버튼이 폭을 나눠 갖는다(시안과 동일). */
.verdict-dock .verdict-actions > * { flex: 1 1 0; }
.verdict-dock .verdict-foot { margin-top: 8px; }
.primary-button {
  flex: 1 1 auto; height: 44px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: #fff; font-size: var(--text-base); font-weight: 700;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.primary-button:hover { background: #0d1a16; transform: translateY(-1px); }
.primary-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.text-button { flex: 0 0 auto; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
.text-button:hover { color: var(--forest); text-decoration: underline; }
.text-button.is-on { color: var(--forest); }

.verdict-foot { font-size: var(--text-2xs); color: var(--faint); line-height: var(--leading-relaxed); }

/* ── 상태 화면 ──────────────────────────────────────────────────────────── */

.empty-state, .state-page {
  flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 60px 20px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.empty-state span, .state-page .state-icon {
  width: 44px; height: 44px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--forest-soft); color: var(--forest);
}
.empty-state svg, .state-page svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.empty-state h3, .state-page h1 { font-size: var(--text-lg); font-weight: 700; }
.empty-state p, .state-page p { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-body); }

.inline-alert {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--amber-soft); color: var(--amber); font-size: var(--text-sm); font-weight: 700;
}
.inline-alert svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; }

.page-wrap { padding: 20px var(--pad-x) 32px; display: flex; flex-direction: column; gap: 16px; }
.page-head h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.03em; }
.page-head p { margin-top: 6px; font-size: var(--text-base); color: var(--muted); line-height: var(--leading-body); }
.page-head .page-kicker { margin: 0 0 6px; font-size: var(--text-xs); color: var(--muted); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px;
}
.card-section-title { margin-bottom: 10px; font-size: var(--text-md); font-weight: 700; letter-spacing: -.015em; }
.document-list li { padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.document-list li:first-child { border-top: 0; }
.document-list a { color: var(--ink-2); font-weight: 700; }
.document-list a:hover { color: var(--forest); }
.performance-empty { color: var(--muted); font-size: var(--text-sm); }
/* T_PCSCOREKEY: 성과 요약 3칸(기록한 추천/결과 확인/추적 중). 앱의 같은 칸과 어휘를 맞춘다.
   .desk-counters 를 재사용하지 않는 이유 = 그쪽은 `margin-left:auto` 로 헤더 오른쪽 정렬 전용이다. */
/* T_POOLCAP: 서버 상한에 닿아 "더 보기"를 대신하는 안내. 버튼 자리이므로 같은 여백을 쓴다. */
.list-more-capped { margin: 14px 0 4px; padding: 0 12px; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
/* T_SEARCHREVIEW: 자료 대기·검토 제외도 다시 열 수 있는 정상 행이다. 불투명도를 내려 disabled처럼
   보이게 하지 않고, 상태 칩만 중립색으로 구분한다. */
.pick-row.is-waiting .c-item-copy em,
.pick-row.is-reviewed-out .c-item-copy em { color: var(--muted); }
.pick-row.is-waiting .tone-chip,
.pick-row.is-reviewed-out .tone-chip { border: 1px solid var(--line-2); }
.perf-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 14px; }
.perf-stat { display: flex; flex-direction: column; gap: 4px; }
.perf-stat span { font-size: var(--text-xs); color: var(--muted); }
.perf-stat b { font-size: var(--text-lg); font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── 성과 — 줍고의 전체 판단 원장 ─────────────────────────────────────── */
.performance-page {
  height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 30px var(--pad-x) 48px; background: var(--surface-2);
}
.performance-page > * { width: min(1380px, 100%); margin-left: auto; margin-right: auto; }
.perf-page-head { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 28px; align-items: start; padding: 4px 2px 24px; }
.perf-eyebrow { padding-top: 8px; color: var(--forest); font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; }
.perf-eyebrow::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--lime); }
.perf-page-head h1 { font-size: clamp(30px,3vw,44px); line-height: 1.12; letter-spacing: -.045em; }
.perf-page-head div>p { margin-top: 11px; color: var(--muted); font-size: var(--text-base); line-height: 1.65; }
.perf-worklog {
  display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 28px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1);
}
.perf-worklog-title { display: flex; flex-direction: column; gap: 5px; }
.perf-worklog-title b { font-size: var(--text-md); }
.perf-worklog-title span { color: var(--muted); font-size: var(--text-xs); }
.perf-worklog dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.perf-worklog dl>div { padding-left: 22px; border-left: 1px solid var(--line); }
.perf-worklog dt { color: var(--muted); font-size: var(--text-xs); }
.perf-worklog dd { margin-top: 5px; color: var(--ink); font-size: var(--text-xl); font-weight: 750; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.perf-decision-summary { margin-top: 14px; display: grid; grid-template-columns: 1.3fr repeat(3,1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); }
.perf-decision-summary>div { min-height: 112px; padding: 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.perf-decision-summary>div:first-child { border-left: 0; }
.perf-decision-summary span { color: var(--muted); font-size: var(--text-xs); }
.perf-decision-summary b { margin-top: 6px; color: var(--forest); font-size: 25px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.perf-decision-summary small { margin-top: 4px; color: var(--faint); font-size: var(--text-2xs); }
.perf-decision-summary .perf-total { background: var(--forest); }
.perf-decision-summary .perf-total span,.perf-decision-summary .perf-total small { color: rgba(255,255,255,.7); }
.perf-decision-summary .perf-total b { color: #fff; font-size: 31px; }
.perf-evidence-summary { margin-top: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.perf-evidence-summary>div { min-height: 112px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.perf-evidence-summary span { display: block; color: var(--muted); font-size: var(--text-xs); }
.perf-evidence-summary b { display: block; margin-top: 6px; color: var(--forest); font-size: var(--text-xl); letter-spacing: -.03em; }
.perf-evidence-summary small { display: block; margin-top: 7px; color: var(--muted); font-size: var(--text-2xs); line-height: 1.45; }
/* --- T_SCOREPROOF begin --- (2026-08-14) 성과의 주인공은 '가장 잘 맞힌 한 건'이다.
   대표님: "예측해서 맞췄다. 대단하지? 이런 마케팅 요소가 들어가야 하는데 정보의 나열이다."
   ★히어로는 forest 배경으로 한 번만 쓴다(.perf-total 과 같은 언어) — 두 곳이 forest 면
     둘 다 주인공이 아니게 된다. */
.perf-hero { margin-top: 14px; padding: 26px 28px; border-radius: var(--r-lg); background: var(--forest); color: #fff; box-shadow: var(--shadow-1); }
.perf-hero-eyebrow { color: var(--lime); font-size: var(--text-xs); font-weight: 800; letter-spacing: .12em; }
.perf-hero-line { margin-top: 10px; font-size: clamp(20px,2vw,30px); line-height: 1.36; letter-spacing: -.03em; font-weight: 600; }
.perf-hero-line b { font-weight: 800; font-variant-numeric: tabular-nums; }
.perf-hero-gap { margin-top: 15px; display: flex; align-items: baseline; gap: 10px; color: rgba(255,255,255,.82); font-size: var(--text-sm); }
.perf-hero-gap b { color: var(--lime); font-size: var(--text-xl); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.perf-hero-gap span { padding: 2px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-pill); font-size: var(--text-2xs); font-weight: 700; }
.perf-hero-meta { margin-top: 9px; color: rgba(255,255,255,.6); font-size: var(--text-xs); }

/* 분포는 정직하게 편다 — 중위값 하나만 보여 주면 "절반은 그보다 크다"가 가려진다. */
.perf-bands { margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.perf-bands>header { margin-bottom: 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.perf-bands h2 { font-size: var(--text-xl); letter-spacing: -.025em; }
.perf-bands>header>span { color: var(--muted); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.perf-band { display: grid; grid-template-columns: 108px minmax(0,1fr) 62px 88px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.perf-band:first-of-type { border-top: 0; }
.perf-band-label { color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.perf-band-track { display: block; height: 8px; border-radius: var(--r-pill); background: rgba(11,95,71,.10); overflow: hidden; }
.perf-band-track>i { display: block; height: 100%; border-radius: inherit; background: var(--forest); }
.perf-band>b { color: var(--forest); font-size: var(--text-md); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.perf-band>small { color: var(--faint); font-size: var(--text-2xs); text-align: right; font-variant-numeric: tabular-nums; }
.perf-band-note { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); line-height: 1.6; }

/* 거른 것도 성과다(0-1 제품 철학) */
.perf-filtered { margin-top: 14px; padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--forest); border-radius: var(--r-lg); background: var(--surface); }
.perf-filtered p { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.perf-filtered b { color: var(--ink); font-weight: 800; }

.perf-cta { margin-top: 14px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.perf-cta p { color: var(--ink); font-size: var(--text-md); font-weight: 700; letter-spacing: -.02em; }
.perf-cta button { min-height: 42px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: var(--forest); color: #fff; font-size: var(--text-sm); font-weight: 800; cursor: pointer; }
.perf-cta button:hover { filter: brightness(1.08); }
@media (max-width: 720px) {
  .perf-cta { flex-direction: column; align-items: stretch; }
  .perf-band { grid-template-columns: 92px minmax(0,1fr) 56px; }
  .perf-band>small { display: none; }
}
/* --- T_SCOREPROOF end --- */
.perf-ledger { margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.perf-ledger>header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.perf-ledger>header h2 { font-size: var(--text-xl); letter-spacing: -.025em; }
.perf-ledger>header p { margin-top: 5px; color: var(--muted); font-size: var(--text-sm); }
.perf-ledger>header>span { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.perf-filters { margin: 16px -20px 0; padding: 0 20px 13px; display: flex; gap: 8px; border-bottom: 1px solid var(--line); }
.perf-filters button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.perf-filters button b { margin-left: 3px; font-size: var(--text-xs); }
.perf-filters button:hover { border-color: var(--forest); color: var(--forest); }
.perf-filters button.is-on { border-color: var(--forest); background: var(--forest); color: #fff; }
.perf-record-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 26px; }
.perf-decision-record { min-width: 0; padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.perf-record-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: var(--text-xs); }
.perf-decision-state { min-height: 23px; padding: 4px 8px; background: var(--lime); color: var(--forest-deep); font-weight: 800; }
.perf-decision-record.is-hold .perf-decision-state { background: var(--amber-soft); color: var(--amber); }
.perf-decision-record.is-not_selected .perf-decision-state { background: var(--line); color: var(--muted); }
.perf-record-title { margin-top: 10px; }
.perf-record-title h3 { font-size: var(--text-lg); letter-spacing: -.025em; }
.perf-record-title small { display: block; margin-top: 4px; color: var(--muted); font-size: var(--text-xs); }
.perf-record-reason { margin-top: 9px; min-height: 42px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.perf-record-prices { margin-top: 14px; padding: 12px 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.perf-record-prices>div { min-width: 0; padding: 0 12px; border-left: 1px solid var(--line); }
.perf-record-prices>div:first-child { padding-left: 0; border-left: 0; }
.perf-record-prices span { display: block; color: var(--muted); font-size: var(--text-2xs); }
.perf-record-prices b { display: block; margin-top: 5px; font-size: var(--text-base); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.perf-record-prices b.is-high { color: var(--forest); }
.perf-record-prices b.is-low { color: var(--red); }
.perf-record-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; color: var(--muted); font-size: var(--text-xs); }
.perf-record-facts b { color: var(--ink-2); }
.perf-record-outcome { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--forest); background: var(--forest-soft); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.perf-decision-record.is-hold .perf-record-outcome { border-left-color: var(--amber); background: var(--amber-soft); }
.perf-decision-record.is-not_selected .perf-record-outcome { border-left-color: var(--muted); background: var(--surface-2); }
.perf-record-cap { margin-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; color: var(--muted); }
.perf-record-cap span,.perf-record-cap small { font-size: var(--text-2xs); }
.perf-record-cap b { color: var(--ink-2); font-size: var(--text-xs); }
.perf-record-cap small { grid-column: 1/-1; }
.perf-record-locked { margin-top: 13px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
.perf-ledger-empty { grid-column: 1/-1; padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); }
.perf-ledger-empty b { color: var(--ink-2); }

@media (max-width: 1120px) {
  .perf-page-head,.perf-worklog { grid-template-columns: 1fr; gap: 12px; }
  .perf-record-grid { grid-template-columns: 1fr; }
}

/* ── T_PCPERFWORKBENCH — PC 성과 원장 ────────────────────────────────────
   모바일 카드의 확대판이 아니라 요약·차트·표·검사창을 동시에 쓰는 PC 전용 화면이다. */
.pcperf-page {
  position: relative; min-height: calc(100vh - var(--header-h)); overflow: visible;
  padding: 22px var(--pad-x) calc(30px + var(--pcperf-sheet-clearance, 0px)); background: var(--paper);
}
.pcperf-page > * { width: min(1540px,100%); margin-left: auto; margin-right: auto; }
.pcperf-heading { min-height: 82px; display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.pcperf-eyebrow,.pcperf-kicker { color: var(--forest); font-size: 12px; font-weight: 850; letter-spacing: .13em; }
.pcperf-eyebrow { display: flex; align-items: center; gap: 7px; }
.pcperf-eyebrow i { width: 8px; height: 8px; background: var(--lime); }
.pcperf-title-line { margin-top: 5px; display: flex; align-items: center; gap: 10px; }
.pcperf-title-line h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.04em; }
.pcperf-title-line span { padding: 4px 8px; border: 1px solid rgba(11,95,71,.18); border-radius: var(--r-pill); color: var(--forest); background: var(--forest-soft); font-size: 12px; font-weight: 750; }
.pcperf-heading>div>p:last-child { margin-top: 6px; color: var(--muted); font-size: 13px; }
.pcperf-heading-controls { padding-top: 7px; display: flex; align-items: center; gap: 8px; }
.pcperf-heading-controls>span { min-width: 230px; height: 45px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.pcperf-heading-controls small { color: var(--muted); font-size: 12px; }
.pcperf-heading-controls b { font-size: 13px; font-variant-numeric: tabular-nums; }
.pcperf-heading-controls button { height: 45px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 750; }
.pcperf-heading-controls button:hover { border-color: var(--forest); color: var(--forest); }
.pcperf-method-popover { position: absolute; z-index: 16; right: var(--pad-x); top: 82px; width: 340px; padding: 15px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-2); }
.pcperf-method-popover b { display: block; margin-bottom: 7px; font-size: var(--text-sm); }
.pcperf-method-popover span { position: relative; display: block; padding: 4px 0 4px 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.pcperf-method-popover span::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; background: var(--lime); }

.pcperf-snapshot { min-height: 132px; display: grid; grid-template-columns: 232px minmax(0,1fr) 258px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.pcperf-snapshot article { min-width: 0; padding: 18px 20px; }
.pcperf-snapshot article+article { border-left: 1px solid var(--line); }
.pcperf-total { color: #fff; background: var(--forest); }
.pcperf-total>span { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; }
.pcperf-total strong,.pcperf-results>strong { display: block; margin-top: 5px; font-size: 32px; line-height: 1.15; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.pcperf-total strong em,.pcperf-results strong em { margin-left: 3px; font-size: 13px; font-style: normal; font-weight: 650; }
.pcperf-total small { display: block; margin-top: 9px; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.45; }
.pcperf-mix header,.pcperf-results header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcperf-mix header div { display: flex; flex-direction: column; }
.pcperf-mix header b,.pcperf-results header b { font-size: 13px; }
.pcperf-mix header span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.pcperf-mix header small,.pcperf-results header span { color: var(--muted); font-size: 12px; }
.pcperf-mixbar { height: 12px; margin-top: 13px; display: flex; overflow: hidden; border-radius: 2px; background: #e8ece7; }
.pcperf-mixbar i { display: block; height: 100%; }
.pcperf-mixbar .selected,.pcperf-mix dt i.selected { background: var(--forest); }
.pcperf-mixbar .hold,.pcperf-mix dt i.hold { background: #d7a655; }
.pcperf-mixbar .rejected,.pcperf-mix dt i.rejected { background: #7b8580; }
.pcperf-mix dl { margin-top: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.pcperf-mix dl>div { padding: 0 15px; border-left: 1px solid var(--line); }
.pcperf-mix dl>div:first-child { padding-left: 0; border-left: 0; }
.pcperf-mix dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.pcperf-mix dt i { width: 6px; height: 6px; border-radius: 50%; }
.pcperf-mix dd { margin-top: 3px; font-size: 17px; font-weight: 780; font-variant-numeric: tabular-nums; }
.pcperf-mix dd small { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.pcperf-results>strong { color: var(--forest); font-size: 26px; }
.pcperf-results>div { height: 6px; margin-top: 9px; overflow: hidden; border-radius: var(--r-pill); background: #e8ece7; }
.pcperf-results>div i { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.pcperf-results dl { margin-top: 11px; display: flex; gap: 18px; }
.pcperf-results dl>div { flex: 1; }
.pcperf-results dt { color: var(--muted); font-size: 12px; }
.pcperf-results dd { margin-top: 1px; font-size: 13px; font-weight: 750; }

.pcperf-analysis { margin-top: 12px; display: grid; grid-template-columns: minmax(0,1.62fr) minmax(390px,.78fr); gap: 12px; }
.pcperf-panel { min-width: 0; min-height: 260px; padding: 17px 20px 15px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.pcperf-panel>header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.pcperf-panel h2 { margin-top: 4px; font-size: 17px; line-height: 1.3; letter-spacing: -.025em; }
.pcperf-proposal header dl { display: flex; align-items: center; }
.pcperf-proposal header dl>div { min-width: 92px; padding: 0 13px; border-left: 1px solid var(--line); }
.pcperf-proposal header dt { color: var(--muted); font-size: 12px; }
.pcperf-proposal header dd { margin-top: 2px; color: var(--forest); font-size: 17px; font-weight: 780; font-variant-numeric: tabular-nums; }
.pcperf-chart { position: relative; margin-top: 12px; padding-top: 17px; min-height: 158px; }
.pcperf-chart-scale { position: absolute; left: 150px; right: 58px; top: 0; display: flex; justify-content: space-between; color: var(--faint); font-size: 12px; }
.pcperf-chart-scale b { color: var(--ink-2); font-weight: 750; }
.pcperf-chart-axis { position: absolute; left: 150px; right: 58px; top: 18px; bottom: 0; pointer-events: none; }
.pcperf-chart-axis i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.pcperf-chart-axis i:nth-child(1) { left: 0; }.pcperf-chart-axis i:nth-child(2) { left: 25%; }.pcperf-chart-axis i:nth-child(3) { left: 50%; }.pcperf-chart-axis i:nth-child(4) { left: 75%; }.pcperf-chart-axis i:nth-child(5) { right: 0; }
.pcperf-chart-axis b { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(11,95,71,.38); }
.pcperf-chart-row { position: relative; z-index: 1; min-height: 30px; display: grid; grid-template-columns: 140px minmax(0,1fr) 48px; align-items: center; gap: 10px; }
.pcperf-chart-row>span { overflow: hidden; color: var(--ink-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pcperf-chart-row>div { position: relative; height: 4px; border-radius: 4px; background: rgba(22,45,36,.08); }
.pcperf-chart-row>div i { position: absolute; top: 50%; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 1px rgba(11,95,71,.3); transform: translate(-50%,-50%); }
.pcperf-chart-row>b { color: var(--red); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.pcperf-chart-row>b.is-plus { color: var(--forest); }
.pcperf-chart-empty { height: 130px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.pcperf-proposal footer { padding-top: 8px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pcperf-proposal footer span { color: var(--ink-2); font-weight: 700; }
.pcperf-daily time { color: var(--muted); font-size: 12px; }
.pcperf-daily ol { margin-top: 14px; display: grid; grid-template-columns: .96fr 1.16fr .94fr .94fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pcperf-daily li { position: relative; padding: 13px 6px 12px; border-left: 1px solid var(--line); }
.pcperf-daily li:first-child { padding-left: 0; border-left: 0; }
.pcperf-daily li:last-child { padding-right: 0; }
.pcperf-daily li span { display: block; color: var(--muted); font-size: 12px; letter-spacing: -.025em; white-space: nowrap; }
.pcperf-daily li b { display: block; margin-top: 4px; font-size: 17px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pcperf-daily li i { display: block; margin-top: 1px; color: var(--faint); font-size: 12px; font-style: normal; }
.pcperf-daily li.is-final b { color: var(--forest); }
.pcperf-daily li.is-final::after { content: ""; position: absolute; left: 6px; right: 0; bottom: -1px; height: 3px; background: var(--lime); }
.pcperf-principle { margin-top: 13px; display: grid; grid-template-columns: 76px 1fr; gap: 10px; }
.pcperf-principle>span { align-self: start; padding: 5px 7px; border-radius: 5px; color: var(--forest); background: var(--forest-soft); font-size: 12px; font-weight: 800; text-align: center; }
.pcperf-principle p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.pcperf-principle p b { color: var(--ink-2); }

.pcperf-ledger { margin-top: 12px; overflow: visible; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.pcperf-ledger>header { min-height: 72px; padding: 14px 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pcperf-ledger>header h2 { display: inline-block; margin-top: 2px; font-size: 18px; letter-spacing: -.025em; }
.pcperf-ledger>header div>span { margin-left: 8px; color: var(--muted); font-size: 12px; }
.pcperf-ledger>header label { width: 250px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); }
.pcperf-ledger>header label svg { width: 15px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; }
.pcperf-ledger>header input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.pcperf-ledger>header input::placeholder { color: var(--faint); }
.pcperf-tabs { height: 43px; padding: 0 18px; display: flex; align-items: flex-end; gap: 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pcperf-tabs button { position: relative; height: 42px; padding: 0 10px; color: var(--muted); font-size: 13px; font-weight: 720; }
.pcperf-tabs button b { margin-left: 3px; font-size: 12px; }
.pcperf-tabs button.is-on { color: var(--forest); }
.pcperf-tabs button.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: var(--forest); }
.pcperf-tabs>span { margin: 0 0 12px auto; color: var(--muted); font-size: 12px; }
.pcperf-tabs>span b { color: var(--ink-2); }
.pcperf-workspace { position: relative; display: block; }
.pcperf-table-pane { min-width: 0; overflow: visible; padding-left: 8px; }
.pcperf-table-pane table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.pcperf-table-pane col.state { width: 9%; }.pcperf-table-pane col.date { width: 8%; }.pcperf-table-pane col.item { width: 29%; }
.pcperf-table-pane col.price { width: 14%; }.pcperf-table-pane col.gap { width: 14%; }.pcperf-table-pane col.result { width: 12%; }
.pcperf-table-pane thead { position: sticky; top: var(--header-h); z-index: 2; }
.pcperf-table-pane thead th { height: 40px; padding: 0 10px; border-bottom: 1px solid var(--line); color: var(--muted); background: #fbfcfa; font-size: 12px; font-weight: 700; text-align: left; }
.pcperf-table-pane thead th:nth-child(4),.pcperf-table-pane thead th:nth-child(5),.pcperf-table-pane thead th:nth-child(6) { text-align: right; }
.pcperf-table-pane tbody tr { height: 56px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .14s ease; }
.pcperf-table-pane tbody tr:hover { background: #f7faf5; }
.pcperf-table-pane tbody tr.is-selected { background: var(--forest-soft); box-shadow: inset 3px 0 var(--forest); }
.pcperf-table-pane tbody td { padding: 7px 10px; overflow: hidden; color: var(--ink-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcperf-table-pane tbody td:nth-child(4),.pcperf-table-pane tbody td:nth-child(5),.pcperf-table-pane tbody td:nth-child(6) { text-align: right; }
.pcperf-table-pane tbody td>b,.pcperf-table-pane tbody td>small { display: block; overflow: hidden; text-overflow: ellipsis; }
.pcperf-table-pane tbody td>b { color: var(--ink); font-size: 13px; }
.pcperf-table-pane tbody td>small { margin-top: 2px; color: var(--faint); font-size: 12px; }
.pcperf-money>b { font-weight: 750; }
.pcperf-muted { color: var(--faint); font-size: 12px; }
.pcperf-state,.pcperf-result { display: inline-flex; min-height: 24px; align-items: center; padding: 0 7px; border-radius: 4px; font-size: 12px; font-weight: 800; }
.pcperf-state.selected { color: var(--forest); background: var(--forest-soft); }
.pcperf-state.hold { color: var(--amber); background: var(--amber-soft); }
.pcperf-state.rejected { color: #626d67; background: #ecefeb; }
.pcperf-result.sold { color: var(--forest); background: #eef5f1; }.pcperf-result.pending { color: var(--amber); background: var(--amber-soft); }.pcperf-result.closed { color: #626d67; background: #ecefeb; }
.pcperf-gap { font-size: 12px; }.pcperf-gap.minus { color: var(--red); }.pcperf-gap.plus { color: var(--forest); }.pcperf-gap.same { color: var(--ink-2); }
.pcperf-table-empty { height: 250px; display: grid; place-content: center; gap: 4px; color: var(--muted); font-size: 13px; text-align: center; }
.pcperf-table-empty b { color: var(--ink-2); }

.pcperf-detail-layer { position: fixed; z-index: 20; inset: var(--header-h) 0 0; visibility: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--pad-x); pointer-events: none; }
.pcperf-detail-layer.is-mounted { visibility: visible; }
.pcperf-inspector { position: relative; width: min(920px,100%); min-width: 0; overflow: visible; padding: 24px 24px 20px; border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); box-shadow: 0 -16px 38px rgba(10,30,24,.2); opacity: 0; transform: translateY(calc(100% + 24px)); transition: opacity .18s ease, transform .22s var(--ease); pointer-events: auto; }
.pcperf-detail-layer.is-open .pcperf-inspector { opacity: 1; transform: translateY(0); }
.pcperf-sheet-handle { position: absolute; top: 9px; left: 50%; width: 38px; height: 4px; border-radius: var(--r-pill); background: var(--line-2); transform: translateX(-50%); }
.pcperf-inspector-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.pcperf-inspector-close:hover { border-color: var(--forest); color: var(--forest); }
.pcperf-inspector-close:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.pcperf-inspector-close svg { width: 15px; height: 15px; }
.pcperf-inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcperf-inspector-head>div { min-width: 0; padding-right: 34px; }
.pcperf-inspector-head h3 { margin-top: 5px; font-size: 16px; letter-spacing: -.025em; }
.pcperf-case { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pcperf-timeline { margin-top: 12px; display: flex; align-items: center; color: var(--muted); font-size: 12px; }
.pcperf-timeline i { height: 1px; flex: 1; margin: 0 8px; background: var(--line-2); }
.pcperf-timeline b { color: var(--forest); font-weight: 750; }
.pcperf-price-compare { margin-top: 12px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pcperf-price-compare>div { min-width: 0; padding: 10px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.pcperf-price-compare span { display: block; color: var(--muted); font-size: 12px; }
.pcperf-price-compare strong { display: block; margin-top: 3px; overflow: hidden; font-size: 14px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcperf-price-compare>i { color: var(--faint); font-style: normal; }
.pcperf-gap-summary { margin-top: 8px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-left: 3px solid var(--amber); background: var(--amber-soft); }
.pcperf-gap-summary.is-plus { border-left-color: var(--forest); background: var(--forest-soft); }
.pcperf-gap-summary.is-minus { border-left-color: var(--red); background: var(--red-soft); }
.pcperf-gap-summary.is-same { border-left-color: var(--forest); background: var(--forest-soft); }
.pcperf-gap-summary span { color: var(--muted); font-size: 12px; }
.pcperf-gap-summary b { font-size: 13px; text-align: right; }
.pcperf-outcome { margin-top: 10px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.pcperf-outcome b { color: var(--ink); }
.pcperf-facts { margin-top: 7px; color: var(--muted); font-size: 12px; }
.pcperf-reason { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.pcperf-reason span { display: block; color: var(--muted); font-size: 12px; }
.pcperf-reason p { margin-top: 3px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.pcperf-reference { margin-top: 9px; border-top: 1px solid var(--line); }
.pcperf-reference summary { padding-top: 8px; color: var(--muted); font-size: 12px; cursor: pointer; }
.pcperf-reference dl { margin-top: 7px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.pcperf-reference dl>div { padding: 7px; border-radius: 6px; background: var(--surface); }
.pcperf-reference dt { color: var(--muted); font-size: 12px; }
.pcperf-reference dd { margin-top: 2px; font-size: 13px; font-weight: 750; }
.pcperf-inspector-empty { min-height: 240px; display: grid; place-content: center; gap: 4px; color: var(--muted); font-size: 13px; text-align: center; }
.pcperf-inspector-empty b { color: var(--ink-2); }

@media (max-width: 1240px) {
  .pcperf-snapshot { grid-template-columns: 205px minmax(0,1fr) 225px; }
  .pcperf-snapshot article { padding-left: 16px; padding-right: 16px; }
  .pcperf-proposal header dl>div { min-width: 76px; padding: 0 8px; }
  .pcperf-ledger>header div>span { display: block; margin: 3px 0 0; }
}
@media (max-width: 1180px) {
  .pcperf-inspector { width: min(860px,100%); }
}
@media (max-width: 1080px) {
  .pcperf-heading { gap: 16px; }
  .pcperf-heading-controls>span { min-width: 190px; }
  .pcperf-analysis { grid-template-columns: 1fr; }
  .pcperf-daily { min-height: 210px; }
}

/* ── 물건 사진 · 위치 대체 시각자료 ──────────────────────────────────────
   공식 사진과 위치 참고 자료를 시각적으로 분리한다. 위성/로드뷰는 실제 물건 사진이 아니며,
   연결 실패 시에는 특정 건물을 닮지 않은 전용 안내 비주얼로 자연스럽게 돌아간다. */
.property-visual-card {
  position: relative; overflow: hidden; padding: 18px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
  box-shadow: var(--shadow-1);
}
.property-visual-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px;
}
.property-visual-head small {
  display: block; margin-bottom: 5px; color: #927842; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .11em;
}
.property-visual-head h2 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em; }
.property-visual-head>span {
  max-width: 48%; padding: 6px 10px; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted);
  font-size: var(--text-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap;
}
.official-photo-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); grid-auto-rows: 135px; gap: 8px; }
.official-photo-grid figure {
  position: relative; overflow: hidden; border-radius: 14px; background: var(--surface-sunken);
}
.official-photo-grid figure.is-main { grid-row: span 2; }
.official-photo-grid.count-1 { grid-template-columns: 1fr; grid-auto-rows: 330px; }
.official-photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.official-photo-grid figure:hover img { transform: scale(1.018); }
.official-photo-grid figcaption {
  position: absolute; left: 11px; bottom: 10px; max-width: calc(100% - 22px);
  padding: 5px 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; background: rgba(7,31,23,.66); color: #fff;
  font-size: var(--text-2xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap;
  backdrop-filter: blur(9px);
}
.property-location-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.pc-location-visual {
  position: relative; height: 318px; overflow: hidden; border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px; background: #17382f; isolation: isolate;
}
.pc-location-visual>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84); }
.pc-location-visual::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,rgba(5,29,22,.10),transparent 52%,rgba(5,29,22,.76));
}
.pc-kakao-canvas {
  position: absolute; z-index: 1; inset: 0; opacity: 0; background: #d8dfdc;
  transition: opacity .42s var(--ease);
}
.pc-location-visual.is-ready .pc-kakao-canvas { opacity: 1; }
.pc-location-visual.is-unavailable .pc-kakao-canvas { opacity: 0; pointer-events: none; }
.pc-location-status {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: min(285px,calc(100% - 48px));
  translate: -50% -50%; padding: 15px 17px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px; background: rgba(8,35,27,.76); color: #fff; text-align: center;
  box-shadow: 0 16px 36px rgba(0,0,0,.18); backdrop-filter: blur(13px);
  transition: opacity .25s var(--ease), translate .25s var(--ease);
}
.pc-location-status strong { display: block; font-size: var(--text-sm); font-weight: 700; }
.pc-location-status span { display: block; margin-top: 4px; color: rgba(255,255,255,.74); font-size: var(--text-2xs); line-height: var(--leading-body); }
.pc-location-visual.is-ready .pc-location-status { opacity: 0; translate: -50% -44%; pointer-events: none; }
.pc-visual-label {
  position: absolute; z-index: 5; left: 14px; bottom: 13px; display: flex; align-items: baseline; gap: 8px;
  max-width: calc(100% - 28px); color: #fff; pointer-events: none;
}
.pc-visual-label b { font-size: var(--text-sm); font-weight: 700; }
.pc-visual-label span { color: rgba(255,255,255,.78); font-size: var(--text-2xs); }
.pc-roadview-angles {
  position: absolute; z-index: 6; right: 13px; top: 13px; display: flex; gap: 4px;
  padding: 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  background: rgba(5,31,23,.72); backdrop-filter: blur(10px);
}
.pc-roadview-angles button {
  height: 27px; padding: 0 9px; border-radius: 8px; color: rgba(255,255,255,.72);
  font-size: var(--text-2xs); font-weight: 700;
}
.pc-roadview-angles button.is-active { background: #fff; color: var(--forest-deep); }
.location-honesty-note {
  margin-top: 10px; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-body);
}
.photo-unavailable-card { min-height: 300px; background: #17382f; }
.photo-unavailable-card>img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9);
}
.photo-unavailable-card::after {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,rgba(7,38,29,.08),rgba(7,38,29,.26));
}
.photo-unavailable-copy {
  position: relative; z-index: 2; width: min(430px,52%); margin: 52px 24px 48px auto;
  padding: 24px; border: 1px solid rgba(255,255,255,.76); border-radius: 18px;
  background: rgba(250,248,239,.91); box-shadow: var(--shadow-2); backdrop-filter: blur(12px);
}
.photo-unavailable-copy small { color: #927842; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .12em; }
.photo-unavailable-copy h2 { margin-top: 8px; color: var(--forest-deep); font-size: var(--text-xl); font-weight: 700; letter-spacing: -.03em; }
.photo-unavailable-copy p { margin-top: 9px; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-relaxed); }

/* ── 토스트 · 대화상자 ──────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 26px; translate: -50% 12px; z-index: 200;
  max-width: min(420px, calc(100vw - 40px));
  padding: 11px 18px; border-radius: var(--r-pill);
  background: rgba(18, 30, 25, .95); color: #fff; font-size: var(--text-sm); font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), translate .2s var(--ease);
}
.toast.is-visible { opacity: 1; translate: -50% 0; }

.dialog-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(14, 26, 21, .38); backdrop-filter: blur(2px); }
.dialog {
  position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 160;
  width: min(460px, calc(100vw - 40px)); max-height: calc(100vh - 80px); overflow: auto;
  padding: 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-2);
}

/* ── 물건 비교 다이얼로그 ─────────────────────────────────────────────── */
.dialog.is-comparison {
  width: min(1180px, calc(100vw - 40px)); height: min(820px, calc(100vh - 54px)); max-height: none;
  padding: 0; overflow: hidden; border: 1px solid var(--line);
}
.comparison-dialog-content { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.comparison-dialog-head {
  flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 19px 22px 17px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.comparison-dialog-head p { color: var(--forest); font-size: var(--text-xs); font-weight: 800; }
.comparison-dialog-head h2 { margin-top: 3px; font-size: var(--text-xl); font-weight: 800; letter-spacing: -.025em; }
.comparison-dialog-head span { display: block; margin-top: 5px; color: var(--muted); font-size: var(--text-xs); }
.comparison-dialog-head>button {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 24px; line-height: 1;
}
.comparison-dialog-head>button:hover { color: var(--ink); background: var(--surface-2); }
.comparison-table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--surface); }
.comparison-table { min-width: 860px; table-layout: fixed; border-spacing: 0; }
.comparison-table thead th {
  position: sticky; top: 0; z-index: 3; height: 132px; padding: 11px 12px;
  border-bottom: 1px solid var(--line-2); background: var(--surface);
  vertical-align: top; text-align: left;
}
.comparison-table thead th:first-child {
  left: 0; z-index: 5; width: 158px; padding: 17px 16px;
  color: var(--muted); background: var(--surface-2); font-size: var(--text-xs); font-weight: 800;
}
.comparison-table tbody th, .comparison-table tbody td {
  padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left;
}
.comparison-table tbody tr:not(.comparison-section)>th {
  position: sticky; left: 0; z-index: 2; width: 158px;
  color: var(--muted); background: var(--surface-2); font-size: var(--text-xs); font-weight: 750;
}
.comparison-table tbody td { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; }
.comparison-section th {
  padding: 9px 16px !important; color: var(--ink) !important; background: #eef2eb !important;
  font-size: var(--text-xs) !important; font-weight: 850 !important; letter-spacing: .01em;
}
.comparison-product { position: relative; min-width: 0; display: grid; grid-template-columns: 66px minmax(0,1fr) 26px; align-items: center; gap: 10px; }
.comparison-product-photo { position: relative; width: 66px; height: 66px; }
.comparison-product-photo img { width: 66px; height: 66px; border-radius: 10px; object-fit: cover; background: var(--surface-sunken); }
.comparison-product-photo i { position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px; color: #fff; background: rgba(17,24,28,.72); font-size: 10px; font-style: normal; }
.comparison-product>div { min-width: 0; }
.comparison-product .tone-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparison-product strong, .comparison-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comparison-product strong { margin-top: 6px; color: var(--ink); font-size: var(--text-base); font-weight: 850; }
.comparison-product small { margin-top: 2px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.comparison-product>button { width: 26px; height: 26px; border-radius: 50%; color: var(--muted); font-size: 20px; line-height: 1; }
.comparison-product>button:hover { color: var(--red); background: var(--red-soft); }
.comparison-value { display: block; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.comparison-value.is-strong { color: var(--forest); font-weight: 850; font-variant-numeric: tabular-nums; }
.comparison-value.is-good { color: var(--forest); font-weight: 750; }
.comparison-value.is-warn { color: var(--amber); font-weight: 750; }
.comparison-value.is-risk { color: var(--red); font-weight: 750; }
.comparison-value.is-muted { color: var(--muted); }
.comparison-dialog-actions {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.comparison-dialog-actions .ghost-button, .comparison-dialog-actions .primary-button { flex: 0 0 auto; min-width: 134px; }

/* ── 계정 · 대화상자 · 알림함 ────────────────────────────────────────────
   T_PCACCOUNT / T_PCDIALOG / T_PCNOTIFY (2026-07-28)
   ★새 색도 새 모서리값도 만들지 않는다 — 위에 있는 토큰만 조합한다. */

.account-card { margin-top: 14px; }
.account-card h2 { font-size: var(--text-md); font-weight: 700; letter-spacing: -.015em; }
.account-note { margin-top: 8px; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted); }
.account-note b { color: var(--ink); font-weight: 700; }

.account-list { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.account-list li {
  display: flex; align-items: baseline; gap: 9px; min-width: 0;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); font-size: var(--text-base);
}
.account-list b { font-weight: 700; white-space: nowrap; }
.account-list span { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 9px; }
.ghost-button.is-danger { color: var(--red); border-color: var(--line-2); }
.ghost-button.is-danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.ghost-button[disabled] { opacity: .55; pointer-events: none; }

.dialog-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em; }
.dialog-copy { margin-top: 8px; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--muted); }
.dialog-copy b { color: var(--ink); font-weight: 700; }
.dialog-list { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }

/* --- T_WAITLIST begin --- '가격 대기' 목록(PC). 앱의 같은 화면을 PC 폭으로 옮긴 것이다.
   ★행 짜임(제목 · 값 3줄 · 메타)과 어휘를 앱과 **같게** 유지한다 — 같은 물건을 놓고
     화면마다 읽는 법이 달라지면 그게 곧 제품이 갈라지는 지점이다. */
.desk-counters div.is-linked dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.desk-counters div.is-linked dd a:hover { color: var(--amber); }

.pcwait-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pcwait-heading h1 { margin-top: 4px; font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.pcwait-heading > div > p:last-child { margin-top: 8px; max-width: 62ch; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.pcwait-heading b { color: var(--ink); font-weight: 700; }

.pcwait-list { border-top: 2px solid var(--ink); }
.pcwait-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 2px 15px; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; color: inherit;
}
.pcwait-row:hover { background: var(--surface-2); }
.pcwait-head { display: flex; align-items: center; gap: 10px; }
.pcwait-head b { font-size: var(--text-md); font-weight: 700; letter-spacing: -.02em; }
.pcwait-badge {
  padding: 2px 8px; border: 1px solid var(--forest); border-radius: var(--r-pill);
  color: var(--forest); font-size: var(--text-xs); font-weight: 700; font-style: normal; white-space: nowrap;
}
/* 값 3칸 — PC 는 폭이 넉넉해 가로로 세운다(앱은 375px 이라 세로 2열이다). */
.pcwait-prices { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.pcwait-prices div { display: flex; align-items: baseline; gap: 8px; }
.pcwait-prices dt { color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.pcwait-prices dd { font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pcwait-prices .is-gap dd { color: var(--amber); }
.pcwait-meta { display: block; margin-top: 8px; color: var(--muted); font-size: var(--text-xs); }
.pcwait-locked {
  margin-top: 9px; padding: 7px 11px; border-left: 3px solid var(--line-2);
  color: var(--muted); font-size: var(--text-sm);
}
/* 잘렸으면 잘렸다고 말한다 — 그래야 잠금 이유가 보인다(T_FREECAP 과 같은 태도). */
.pcwait-capped { padding: 13px 0 0; border-top: 1px solid var(--line); }
.pcwait-capped b { font-size: var(--text-md); font-weight: 700; }
.pcwait-capped p { margin-top: 5px; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
/* --- T_WAITLIST end --- */
.dialog-list li { position: relative; padding-left: 13px; font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-body); }
.dialog-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--faint);
}
.dialog-note { margin-top: 12px; font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--faint); }
.dialog-actions { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.dialog .login-buttons { margin-top: 14px; max-width: none; }

.notify-list {
  margin-top: 12px; display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow: auto;
}
.notify-list button {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); text-align: left; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.notify-list button:hover { border-color: var(--forest); background: var(--surface-2); }
.notify-list b { grid-column: 1; font-size: var(--text-base); font-weight: 700; }
.notify-list span { grid-column: 1; font-size: var(--text-sm); color: var(--muted); }
.notify-list em {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-style: normal; font-size: var(--text-xs); font-weight: 700; color: var(--muted);
}
.notify-list em.is-soon { color: var(--red); }

/* ── (T_PCNOAI 2026-08-11) 아래 `.ask-*` 는 **더 이상 쓰이지 않는다** ────────────
   PC 의 AI 질의(T_PCAI)를 걷어내면서 그 화면을 그리던 JS 가 사라졌다.
   규칙만 지우면 다른 선택자를 건드릴 위험이 이득보다 커서 남겨 뒀다 —
   되살릴 게 아니면 여기에 새 규칙을 얹지 마라. */

.ask-log { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; max-height: 46vh; overflow: auto; }
.ask-turn { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.ask-turn.is-user { background: var(--forest-soft); border-color: transparent; }
.ask-turn p { font-size: var(--text-base); line-height: var(--leading-relaxed); white-space: pre-wrap; }
.ask-items { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.ask-items button, .ask-items span {
  display: block; width: 100%; padding: 7px 10px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: var(--text-sm); line-height: var(--leading-snug);
}
.ask-items button { cursor: pointer; transition: border-color .16s var(--ease); }
.ask-items button:hover { border-color: var(--forest); }
.ask-items span { color: var(--muted); }

.ask-form { margin-top: 12px; display: flex; gap: 8px; }
.ask-form input {
  flex: 1; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--text-base); color: var(--ink);
}
.ask-form input:focus { outline: none; border-color: var(--forest); }
.ask-form input[disabled] { opacity: .6; }
.ask-form button { white-space: nowrap; }


.noscript { padding: 40px; text-align: center; font-size: var(--text-base); }

/* ── 좁은 화면 ──────────────────────────────────────────────────────────── */

@media (max-width: 1500px) {
  /* T_PCLISTFIT: 520px이면 큰 사진·금액·판정칩을 두고도 단지명을 읽을 수 있다. */
  .desk-columns { --list-w: 520px; --verdict-w: 496px; }
}
@media (max-width: 1280px) {
  .desk-columns { --list-w: 480px; --verdict-w: 460px; }
  /* T_PCPINVISIBLE: 풍선 클릭 상태는 열렸는데 이 규칙이 패널만 숨겨 1,280px 이하에서
     "아무 반응 없음"으로 보였다. 목록 옆 남은 폭 안에서 줄여서라도 판단은 반드시 보여 준다. */
  .verdict-panel { display: flex; width: min(var(--verdict-w),calc(100% - var(--list-w) - var(--gap))); }
  .pick-table td { padding-left: 10px; padding-right: 10px; }
  .pick-table td.c-item { gap: 8px; }
  .c-item img { width: 60px; height: 60px; }
}
@media (max-width: 900px) {
  .top-nav { display: none; }
  .pool-search { flex-basis: 340px; width: 340px; }
  .desk-columns { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 300px; }
  .verdict-panel { left: 0; width: min(520px,100%); }
  .property-location-grid { grid-template-columns: 1fr; }
  .pc-location-visual { height: 290px; }
  .official-photo-grid { grid-template-columns: 1fr 1fr; }
  .official-photo-grid figure.is-main { grid-column: 1 / -1; grid-row: auto; height: 250px; }
  .photo-unavailable-copy { width: min(480px,72%); }
}

/* ── 로그인 ─────────────────────────────────────────────────────────────
   ★이 화면은 내가 쓰는 도구가 아니라 **가입자가 쓰는 서비스**다(대표님 지적).
     비로그인 방문자가 무엇을 주는 서비스인지, 무엇을 누르면 되는지 둘 다 즉시 알아야 한다. */

.login-landing {
  min-height: calc(100vh - var(--header-h));
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px;
  align-items: center; padding: 40px var(--pad-x) 56px; max-width: 1180px; margin: 0 auto;
}
.landing-copy .eyebrow { font-size: var(--text-sm); font-weight: 700; color: var(--forest); margin-bottom: 10px; }
.landing-copy h2 { font-size: var(--text-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.22; }
.landing-lead { margin-top: 15px; max-width: 540px; font-size: var(--text-md); color: var(--ink-2); line-height: var(--leading-relaxed); }
.landing-lead b { font-weight: 700; color: var(--forest); }

.landing-stats { display: flex; gap: 34px; margin: 26px 0 24px; }
.landing-stats dt { font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.landing-stats dd {
  margin-top: 4px; font-size: var(--text-3xl); font-weight: 700; letter-spacing: -.03em;
  color: var(--forest); font-variant-numeric: tabular-nums;
}
.landing-stats dd.amber { color: var(--amber); }
.landing-stats dd small { margin-left: 2px; font-size: var(--text-base); font-weight: 700; color: var(--muted); }

.login-buttons { display: flex; flex-direction: column; gap: 9px; max-width: 340px; }
.state-page .login-buttons { margin: 6px auto 0; width: 100%; }
.login-button {
  height: 46px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: 700; letter-spacing: -.015em;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.login-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.login-button.is-kakao { background: #fee500; border-color: #f2d900; color: #191600; }
.login-button.is-naver { background: #03c75a; border-color: #02b351; color: #fff; }
.login-button.is-google { background: #fff; }
.login-button.is-apple { background: #111; border-color: #111; color: #fff; }

.landing-foot { display: block; margin-top: 16px; font-size: var(--text-xs); color: var(--faint); }

.landing-visual { display: flex; justify-content: center; }
.landing-card {
  width: 100%; padding: 22px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  transform: rotate(-1.1deg);
}
.landing-card .eyebrow { font-size: var(--text-2xs); font-weight: 700; color: var(--forest); margin-bottom: 6px; }
.landing-card h3 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.03em; margin-bottom: 14px; }
.landing-card .verdict-kpi { margin-bottom: 14px; }

@media (max-width: 1080px) {
  .login-landing { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .landing-visual { display: none; }
  .landing-copy h2 { font-size: 32px; }
}

/* T_CAPSTATE(본부 지시서 제1호 작업1): 입찰 상한이 금액으로 안 나오는 상태(회차보류·
   입찰비추천·자료부족)의 이유 한 줄. 값 바로 아래에 두어야 "왜 금액이 아닌가"의 답으로 읽힌다. */
.cap-state-note {
  margin-top: 10px; font-size: var(--text-xs); line-height: var(--leading-body); color: var(--faint);
}
.cap-state-note.is-emphasis {
  padding: 12px 14px;
  border: 1px solid rgba(169, 113, 29, .28);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
}