:root {
  --bg: #f2f3f5;
  --panel: #ffffff;
  --panel-2: #fbfcfd;
  --border: #e4e7eb;
  --text: #1a1d21;
  --muted: #6b7280;
  --faint: #9aa1ab;
  --accent: #2f6df6;
  --accent-soft: #e8f0fe;
  /* 보고서는 카드가 떠 있는 화면이 아니라 종이에 가깝다. 그림자를 걷고 선으로 나눈다. */
  --shadow: none;
  --rule: #d9dde3;                 /* 본문을 가르는 실선 — border보다 한 톤 진하다 */

  --gA: #12855b; --gA-bg: #e3f5ec;
  --gB: #2f6df6; --gB-bg: #e8f0fe;
  --gC: #b5730a; --gC-bg: #fbf0dc;
  --gD: #9aa1ab; --gD-bg: #eef0f2;
  --risk: #c0392b; --risk-bg: #fdecea;
}
/* 어두운 배색 한 벌 — OS 설정을 따를 때와 사용자가 직접 고를 때 둘 다 같은 값을 쓴다.
   OS가 어둡더라도 사용자가 밝게(light)를 고르면 그 뜻을 우선한다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116; --panel: #171b22; --panel-2: #1c212a;
    --border: #2a303a; --text: #e6e9ee; --muted: #9aa3b1; --faint: #6b7482;
    --accent: #5b8cff; --accent-soft: #1b2740;
    --shadow: none; --rule: #3a414d;
    --gA: #46c88a; --gA-bg: #123528; --gB: #6ea0ff; --gB-bg: #16233d;
    --gC: #e0a94a; --gC-bg: #38290f; --gD: #6b7482; --gD-bg: #232a34;
    --risk: #ff7a6b; --risk-bg: #3a1a17;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1116; --panel: #171b22; --panel-2: #1c212a;
  --border: #2a303a; --text: #e6e9ee; --muted: #9aa3b1; --faint: #6b7482;
  --accent: #5b8cff; --accent-soft: #1b2740;
  --shadow: none; --rule: #3a414d;
  --gA: #46c88a; --gA-bg: #123528; --gB: #6ea0ff; --gB-bg: #16233d;
  --gC: #e0a94a; --gC-bg: #38290f; --gD: #6b7482; --gD-bg: #232a34;
  --risk: #ff7a6b; --risk-bg: #3a1a17;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif;
  line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Header */
.topbar { border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 10; }
/* 줄바꿈을 허용한다 — 버튼이 하나 늘자 좁은 화면에서 '실데이터 연결'이 화면 밖으로
   밀려나 가로 스크롤이 생겼다. 버튼들은 줄이 바뀌어도 되지만 잘려서는 안 된다. */
.topbar .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.logo .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: var(--accent);
  display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800;
}
/* vendor-scout / 화장품 제조업체 사전검증 을 두 줄로 */
.logo .logo-txt { display: flex; flex-direction: column; line-height: 1.25; }
.logo .logo-txt b { font-weight: 800; font-size: 16px; }
.logo small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.topbar .spacer { flex: 1; }

/* Hero / search */
.hero { padding: 40px 0 20px; }
.hero h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.5px; }
.hero p { color: var(--muted); margin: 0 0 22px; font-size: 14.5px; }
.searchbar {
  display: flex; gap: 10px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px; box-shadow: var(--shadow); flex-wrap: wrap;
}
.searchbar input {
  flex: 1; min-width: 200px; border: 0; background: transparent; color: var(--text);
  font-size: 15px; padding: 10px 12px; outline: none;
}
/* 사업자번호는 보조 입력 — 업체명보다 좁게, 좌측 구분선 */
.searchbar input#bno {
  flex: 0 1 220px; min-width: 150px; border-left: 1px solid var(--border);
}
.searchbar button {
  border: 0; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: 4px; cursor: pointer; transition: filter .15s;
}
.searchbar button:hover { filter: brightness(1.06); }
.chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.chips .lbl { font-size: 12.5px; color: var(--faint); }
.chip {
  font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); transition: all .15s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* 최근 검색 */
.recent { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.recent.hidden { display: none; }
.recent .rc-lbl { font-size: 11.5px; font-weight: 700; color: var(--faint); letter-spacing: .02em; }
.recent .rc-chip {
  font-size: 13px; padding: 5px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted); transition: all .15s;
}
.recent .rc-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Report */
.report { padding: 8px 0 60px; scroll-margin-top: 76px; }
.hidden { display: none !important; }

.actions { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.actions .act-hint { font-size: 12.5px; color: var(--faint); margin-right: auto; }
.actions .act {
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 4px; cursor: pointer; transition: all .15s;
}
.actions .act:hover { border-color: var(--accent); color: var(--accent); }
.actions .act.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.actions .act.primary:hover { filter: brightness(1.06); color: #fff; }

.summary {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  padding: 22px 24px; box-shadow: var(--shadow); margin-bottom: 18px;
}

/* Risk flags banner */

/* ⚠ 회수·판매중지 이력 — 강조 리스크 패널 */

/* 자동 생성 데모 안내 */
.gennote {
  font-size: 12.5px; color: var(--gC); background: var(--gC-bg);
  border-radius: 4px; padding: 10px 14px; margin-bottom: 18px; line-height: 1.5;
}
/* 식약처 실데이터 안내 */

/* 실데이터 연결 버튼 */
.proxybtn {
  font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: all .15s;
  white-space: nowrap; flex: 0 0 auto;
}
.proxybtn:hover { border-color: var(--accent); color: var(--accent); }
.proxybtn.on { color: var(--gA); border-color: var(--gA); background: var(--gA-bg); }

/* 테마 선택 — 밝게 / 어둡게 / 기기 설정 따름 */
.themesel {
  display: inline-flex; flex: 0 0 auto; margin-right: 8px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel); overflow: hidden;
}
.thbtn {
  font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--muted); background: none;
  border: 0; padding: 6px 9px; cursor: pointer; transition: all .15s; font-family: inherit;
  white-space: nowrap;
}
.thbtn + .thbtn { border-left: 1px solid var(--border); }
.thbtn:hover { color: var(--accent); }
.thbtn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
@media print { .themesel { display: none !important; } }

/* Blocks */
.blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.block { background: var(--panel); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.block.full { grid-column: 1 / -1; }
.block > h3 {
  margin: 0; padding: 12px 16px 9px; font-size: 13px; font-weight: 700;
  letter-spacing: .02em; border-bottom: 2px solid var(--rule);
  display: flex; align-items: baseline; gap: 8px; background: transparent;
}
.block > h3 .ic { font-size: 13px; }
.block > h3 .cnt { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 500; }

/* 3열 압축 행: 항목 | 값 | 출처(우측 소형) */
.field {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 10px; align-items: baseline; padding: 4px 16px; border-bottom: 1px solid var(--border);
}
.field:last-child { border-bottom: 0; }
.field .k { display: flex; gap: 6px; align-items: center; min-width: 0; font-size: 12.5px; color: var(--muted); }
.field .k .ktxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field .v { font-size: 13px; font-weight: 500; min-width: 0; word-break: break-word; white-space: pre-line; }
.field .v.gap { color: var(--faint); font-style: italic; font-weight: 400; }
.field .src { font-size: 10.5px; color: var(--faint); text-align: right; line-height: 1.3; }
.field .src .asof { color: var(--faint); }
.field .stale { font-size: 10.5px; color: var(--gC); margin-left: 4px; white-space: nowrap; }
/* 설명 펼침 버튼 — 툴팁이 아니라 눌러서 여는 버튼이라 손가락으로도 열린다 */
.field .ninfo { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; border: 1.3px solid var(--faint);
  font: 800 10px/1 system-ui, sans-serif; color: var(--muted); cursor: pointer; background: none; padding: 0; vertical-align: 1px; }
.field .ninfo:hover, .field .ninfo[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.field .fnote .fsrc { color: var(--text); }
.field .fnote .fsrc b { font-weight: 700; }
/* 화면에서는 출처 열을 숨기고 두 칸(항목 | 값)으로 — 출처는 「!」에서 본다. 인쇄는 세 칸 그대로 */
@media screen {
  .field { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .field .src { display: none; }
}
/* 펼친 설명은 3칸을 가로질러 한 덩어리로 — 값 칸 안에서 좁게 흐르면 더 읽기 나쁘다 */
.field .fnote { grid-column: 1 / -1; margin: 2px 0 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--panel-2); border: 1px solid var(--border); font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.field .fnote[hidden] { display: none; }
.field .fnote p { margin: 0; }
.field .fnote p + p { margin-top: 5px; }
/* 대표자 교차 확인 — 값 옆 판정 칩과 출처별 대조표 */
.field .rc-chip { margin-left: 6px; padding: 1px 7px; border-radius: 10px; border: 1px solid; font: 700 10.5px/1.5 inherit; cursor: pointer; vertical-align: 1px; white-space: nowrap; }
.field .rc-chip.ok { color: var(--gA); background: var(--gA-bg); border-color: transparent; }
.field .rc-chip.warn { color: var(--gC); background: var(--gC-bg); border-color: transparent; }
.field .rc-box { grid-column: 1 / -1; margin: 2px 0 6px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); font-size: 11.5px; }
.field .rc-box[hidden] { display: none; }
.rc-kv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px 12px; align-items: center; }
.rc-kv .k { color: var(--muted); }
.rc-kv .v { font-weight: 700; color: var(--text); }
.rc-kv .v small { font-weight: 400; color: var(--faint); margin-left: 6px; }
.rc-st { font-size: 10.5px; font-weight: 700; padding: 0 7px; border-radius: 9px; text-align: center; }
.rc-st.ok { color: var(--gA); background: var(--gA-bg); }
.rc-st.warn { color: var(--gC); background: var(--gC-bg); }
.rc-st.info { color: var(--accent); background: var(--accent-soft); }
.rc-msg { margin: 8px 0 0; padding: 6px 9px; border-radius: 6px; line-height: 1.55; color: var(--text); }
.rc-msg.ok { background: var(--gA-bg); }
.rc-msg.warn { background: var(--gC-bg); }
/* 값이 없는 항목 접기 — 없다는 사실은 한 줄이면 된다 */
.gapfold > summary { list-style: none; cursor: pointer; padding: 7px 16px; font-size: 11.5px;
  color: var(--faint); display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.gapfold > summary::-webkit-details-marker { display: none; }
.gapfold > summary::before { content: '▸'; font-size: 10px; color: var(--faint); transition: transform .15s; }
.gapfold[open] > summary::before { transform: rotate(90deg); }
.gapfold > summary em { font-style: normal; color: var(--faint); opacity: .75; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gapfold > summary:hover { color: var(--muted); }
.gapfold > summary .gf-n { flex: none; white-space: nowrap; }   /* 빈칸 목록이 길어도 '확인 안 됨 N건'은 한 줄 */
.gdot { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; }
/* CGMP 적합업소 행 음영 */
.field.cgmp { background: var(--gA-bg); box-shadow: inset 3px 0 0 var(--gA); }

/* 재무 3개년 추이 그래프 */
/* 재무 건전성 배너 */
.finhealth { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 16px 10px; padding: 8px 12px; border-radius: 4px; font-size: 12.5px; }
.finhealth .fh-badge { font-weight: 800; font-size: 12px; padding: 2px 10px; border-radius: 3px; }
.finhealth .fh-txt { color: var(--text); }
.finhealth .fh-note { font-size: 11px; color: var(--faint); margin-left: auto; cursor: help; white-space: nowrap; }
.finhealth.good { background: var(--gA-bg); }
.finhealth.good .fh-badge { background: var(--gA); color: #fff; }
.finhealth.mid { background: var(--gC-bg); }
.finhealth.mid .fh-badge { background: var(--gC); color: #fff; }
.finhealth.bad { background: var(--risk-bg); }
.finhealth.bad .fh-badge { background: var(--risk); color: #fff; }

/* 🏷 제조원 역추적 패널 */

/* 🔀 교차검증 자동진단 패널 */

.finwrap { padding: 12px 16px 6px; border-bottom: 1px solid var(--border); }
.finhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.finhead .finnote { font-size: 10.5px; color: var(--accent); }

.finmiss { padding: 14px 16px; font-size: 12.5px; color: var(--faint); font-style: italic; border-bottom: 1px solid var(--border); }

/* 재무 6지표 3개년 통합 그래프 (금액/비율 2단, 색상구분) */

.mini-base { stroke: var(--border); stroke-width: 1; }

/* 지표별 스파크 카드 (각자 스케일) */
.sparkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.spark { background: var(--panel-2); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 4px; padding: 8px 10px 6px; }
.sphead { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sphead .u { color: var(--faint); font-weight: 500; }
.spval { font-size: 17px; font-weight: 800; margin: 1px 0 2px; }
.spchg { font-size: 11px; font-weight: 700; margin-left: 7px; color: var(--muted); }
.spchg.good { color: var(--gA); }
.spchg.bad { color: var(--risk); }
.spsvg { width: 100%; height: auto; display: block; }
.spptv { font-size: 8.5px; font-weight: 700; }
.spptx { font-size: 8.5px; fill: var(--faint); }
.spmiss { font-size: 12px; color: var(--faint); font-style: italic; padding: 14px 0; }

/* 📡 데이터 소스 상태 패널 */
.srcstat { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; margin-bottom: 18px; font-size: 12px; }
.srcstat .srchead { font-size: 12.5px; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srcstat .srchead::-webkit-details-marker { display: none; }
.srcstat .srchead::before { content: '▸'; color: var(--faint); font-size: 11px; transition: transform .15s; }
.srcstat[open] .srchead::before { transform: rotate(90deg); }
.srcstat[open] .srchead { margin-bottom: 8px; }
.srcstat .srchead span { font-weight: 500; color: var(--faint); font-size: 11px; }
.srcstat .sscnt { display: inline-flex; gap: 5px; font-weight: 700; }
.srcstat .sscnt u { text-decoration: none; font-size: 11px; padding: 1px 7px; border-radius: 3px; }
.srcstat .sscnt u.ok { color: var(--gA); background: var(--gA-bg); }
.srcstat .sscnt u.no { color: var(--risk); background: var(--risk-bg); }
.srcstat .sscnt u.ex { color: var(--gD); background: var(--gD-bg); }
.srcstat .ss { display: flex; gap: 7px; padding: 4px 0; align-items: baseline; cursor: pointer; }
.srcstat .ss input { flex: 0 0 auto; align-self: center; accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; }
.srcstat .ss input:disabled { cursor: default; opacity: .45; }
.srcstat .ss em { font-style: normal; font-weight: 800; flex: 0 0 auto; }
.srcstat .ss .ssn { flex: 0 0 auto; font-weight: 600; }
.srcstat .ss.ok em { color: var(--gA); }
.srcstat .ss.no em { color: var(--risk); }
.srcstat .ss.no { color: var(--gC); }
/* warn: 조회는 성공(✓, 초록)했지만 결과가 부정(미해당) → 상세만 빨간색 */
.srcstat .ss.warn em { color: var(--gA); }
.srcstat .ss.warn i { color: var(--risk); font-weight: 600; }
.srcstat .ss.excl { opacity: .55; }
.srcstat .ss.excl em { color: var(--faint); }
.srcstat .ss.excl .ssn { text-decoration: line-through; color: var(--faint); }
.srcstat .ss i { font-style: normal; color: var(--faint); min-width: 0; word-break: break-word; }

.finrows { border-top: 1px solid var(--border); }

/* 업종 수출입 참고 (관세청) */
/* 홈페이지 추적 */
.hpbox { grid-column: 1 / -1; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; }
.hpbox h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; }
.hpbox h4 span { font-weight: 500; color: var(--faint); font-size: 11px; margin-left: 6px; }
.hpbox .hp-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hpbox .hp-badge { font-size: 11px; font-weight: 800; color: var(--gA); background: var(--gA-bg); border-radius: 6px; padding: 2px 8px; }
.hpbox .hp-url { font-size: 14.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.hpbox .hp-url:hover { text-decoration: underline; }
.hpbox .hp-ms { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 11px; color: var(--faint); }
.hpbox .hp-ms em { font-style: normal; }
.hpbox .hp-m { font-weight: 600; color: var(--gA); background: var(--gA-bg); border-radius: 3px; padding: 1px 8px; }
.hpbox .hp-none { font-size: 12.5px; color: var(--muted); }
.hpbox .hp-cands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.hpbox .hp-cands > i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; }
.hpbox .hp-cand { font-size: 12.5px; color: var(--muted); text-decoration: none; border: 1px solid var(--border); border-radius: 3px; padding: 2px 10px; }
.hpbox .hp-cand:hover { border-color: var(--accent); color: var(--accent); }
.hpbox .hp-cand b { font-weight: 700; color: var(--gA); }
/* 🏭 홈페이지 발췌 — 생산능력·인증 */
.hpbox .hp-ext { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.hpbox .hp-ext-h { font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.hpbox .hp-ext-h span { font-weight: 500; color: var(--faint); font-size: 10.5px; margin-left: 4px; }
.hpbox .hp-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 12.5px; }
.hpbox .hp-row > i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--faint); }
.hpbox .hp-tag { display: inline-block; font-weight: 800; font-size: 11px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px; padding: 1px 8px; }
.hpbox .hp-cert { display: inline-block; font-weight: 600; font-size: 11.5px; color: var(--gA); background: var(--gA-bg); border-radius: 6px; padding: 2px 8px; margin: 2px 0; }
.hpbox .hp-capa { margin: 0; padding: 0; list-style: none; }
.hpbox .hp-capa li { font-size: 12px; color: var(--text); padding: 2px 0 2px 12px; position: relative; line-height: 1.4; }
.hpbox .hp-capa li::before { content: "·"; position: absolute; left: 2px; color: var(--faint); }
.hpbox .hp-ext-none { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint); line-height: 1.45; }

/* 뉴스 */
.newsbox { grid-column: 1 / -1; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; }
.newsbox h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; }
.newsbox h4 span { font-weight: 500; color: var(--faint); font-size: 11px; margin-left: 6px; }
.newslist { list-style: none; margin: 0; padding: 0; }
.newslist li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.newslist li:last-child { border-bottom: none; }
.ntitle { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; display: block; line-height: 1.4; }
.ntitle:hover { text-decoration: underline; }
.ndesc { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.nmeta { font-size: 11px; color: var(--faint); margin-top: 2px; }

/* 체크리스트 값 (품질인증 / PLT) */
.cklist { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.ck { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 3px; white-space: nowrap; border: 1px solid var(--border); }
.ck.on { color: var(--gA); background: var(--gA-bg); border-color: transparent; }
.ck.off { color: var(--faint); background: transparent; }

.gA { color: var(--gA); background: var(--gA-bg); }
.gB { color: var(--gB); background: var(--gB-bg); }
.gC { color: var(--gC); background: var(--gC-bg); }
.gD { color: var(--gD); background: var(--gD-bg); }
.badge-A { background: var(--gA-bg); color: var(--gA); }
.badge-B { background: var(--gB-bg); color: var(--gB); }
.badge-C { background: var(--gC-bg); color: var(--gC); }
.badge-D { background: var(--gD-bg); color: var(--gD); }

/* Crosscheck table */

.pending { font-size: 11px; color: var(--gC); font-weight: 600; }

/* Legend / footer */
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 0; font-size: 12px; color: var(--muted); }
.legend .item { display: flex; align-items: center; gap: 6px; }
.legend .dot { width: 14px; height: 14px; border-radius: 4px; }

footer { border-top: 1px solid var(--border); color: var(--faint); font-size: 12.5px; padding: 26px 0 40px; }
footer .wrap { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.build-stamp { font-size: 11px; color: var(--faint); opacity: .75; font-variant-numeric: tabular-nums; }

.empty { text-align: center; color: var(--faint); padding: 50px 0; }

/* 동명업체 선택 */
.candbox { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); padding: 16px; margin-bottom: 18px; }
.candhead { font-size: 14px; margin-bottom: 12px; }
.candhead .candsub { display: block; font-size: 11.5px; color: var(--faint); font-weight: 400; margin-top: 4px; }
.cand .cn .cand-tag { font-size: 10.5px; font-weight: 700; color: var(--gA); background: var(--gA-bg); border-radius: 5px; padding: 1px 7px; margin-left: 7px; vertical-align: middle; }
.cand { display: block; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: all .15s; }
.cand:hover { border-color: var(--accent); background: var(--accent-soft); }
.cand .cn { font-size: 14px; font-weight: 700; }
.cand .cm { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* 인쇄 / PDF 저장 — 방문용 리포트만 깔끔하게 남긴다 */
@media print {
  /* 화면 테마와 무관하게 종이는 흰색이다. :root[data-theme=…]가 :root보다 우선순위가
     높아서, 같은 강도로 받아 주지 않으면 어두운 배경이 그대로 인쇄된다. */
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg: #fff; --panel: #fff; --panel-2: #fff; --border: #ccc; --text: #000;
    --muted: #333; --faint: #666; --shadow: none;
  }
  .topbar, .hero, footer, .actions { display: none !important; }
  .wrap { max-width: 100%; padding: 0; }
  .report { padding: 0; }
  /* break-inside: avoid 가 공란의 주범이었다. 블록 하나가 남은 지면보다 길면 통째로
     다음 장으로 넘어가면서 그 앞이 통으로 비었다. 큰 덩어리는 쪼개지게 두고,
     대신 '제목만 남고 내용이 넘어가는' 것만 막는다. */
  .summary, .block { box-shadow: none; break-inside: auto; }
  .block > h3, .vcbox > h4, .hirebox > h4, .hpbox > h4, .chkbox > h3,
  .vc-gh, .hire-sec, .vr-head { break-after: avoid; }
  .field, .vr, .hire-list li, .ib-tl li, .vch{ break-inside: avoid; }
  .blocks { grid-template-columns: 1fr 1fr; }
  .block.full { grid-column: 1 / -1; }
   .gdot, .badge-A, .badge-B, .badge-C, .badge-D,
  .field.cgmp, .spark, .spsvg, .ck.on{
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  

  /* ── 인쇄 압축 ──
     화면용 크기 그대로 뽑으면 방문 리포트가 예닐곱 장으로 늘어난다.
     px로 지정된 값이 수십 군데라 개별 조정으로는 새 요소가 추가될 때마다 어긋난다.
     리포트 안쪽 글자를 10px로 일괄 고정하고, 제목·수치만 예외로 되돌린다. */
  .report, .report * { font-size: 10px !important; line-height: 1.35 !important; }
  
  .block h3, .chkbox h3, .vcbox h4, .hirebox h4, .hpbox h4 { font-size: 11px !important; }
  
  
  .field .v { font-size: 11px !important; }   /* 수치는 본문보다 조금 크게 — 훑어볼 때 눈에 걸려야 한다 */

  /* 여백 압축 */
  .summary { padding: 10px 12px; margin-bottom: 8px; gap: 10px; }
  .block, .chkbox, .vcbox, .hirebox, .hpbox {
    padding: 7px 9px; margin-bottom: 6px; border-radius: 3px;
  }
  .block > h3 { padding: 0 0 4px; margin-bottom: 5px; }
  .blocks { gap: 6px; }
  .field { padding: 3px 0; }
  /* 접힌 묶음의 머리줄 — 화면에서는 누르는 자리라 여백이 있지만 종이에서는 한 줄이면 된다 */
  .gapfold > summary { padding: 4px 0; }
  .vcbox > h4, .hirebox > h4, .hpbox > h4 { margin-bottom: 5px; }
   .hire-list li, .ib-tl li{ padding: 4px 0; }

  .vcbox, .chkbox, .hirebox { break-inside: auto; }

  /* ── 화면에서 접힌 것은 인쇄에도 안 나온다 ──
     여태 인쇄에서만 따로 펴거나(현장 대조표) 따로 접었다(확인 안 됨 항목). 그래서 화면에서
     본 것과 손에 쥔 종이가 달랐다. 접힘 상태는 브라우저의 <details> 그대로 두고, 인쇄에서는
     여닫이 삼각형만 지운다. 펼쳐 놓고 인쇄하면 펼쳐진 채로 나온다. */
  .gapfold > summary::before, .vc-xcfold > summary::before, .ib-more summary::before { content: none; }
  .gapfold > summary, .vc-xcfold > summary { white-space: normal; }
  .gapfold > summary em { overflow: visible; white-space: normal; }
  .vc-xc .xc-r u { border-bottom: 1px solid #999; min-height: 13px; }

  /* 조작용 UI와 안내 문구만 뺀다 — 종이에서는 누를 수도, 쓸모도 없다 */
  .chk-note, .vc-foot, .hire-warn, .gennote, .srcstat, .recent,
  .hp-skip, .hp-cands, .build-stamp, .ot-hint, .sd-mini, .vc-empty,
  .vc-add, .vc-del, .vc-edit, .chk-add, .field .ninfo, .vr-memo-add,
  .sd-manual, .sd-run, .proxybtn { display: none !important; }
  /* 입력칸은 종이에서 '테두리만 있는 빈 상자'로 남는다. 메모처럼 내용이 있는 것만 남긴다. */
  input[type="url"], input[type="search"], select, button { display: none !important; }
  .vr-ck { display: inline-block !important; }

  @page { margin: 10mm; }
}

@media (max-width: 720px) {
  .blocks { grid-template-columns: 1fr; }
  .sparkgrid { grid-template-columns: repeat(2, 1fr); }
  .summary { grid-template-columns: 1fr; text-align: left; }
  
  
  .field { grid-template-columns: 1fr 1fr; }
  .field .src { grid-column: 1 / -1; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════
   v66 리프레시 — 핵심 요약 밴드 · 홈페이지 심층분석 · 감각 개선
   ═══════════════════════════════════════════════════════════ */

/* 🔬 홈페이지 심층분석 */
.sdbox {
  grid-column: 1 / -1; background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px; padding: 15px 17px; box-shadow: var(--shadow);
}
.sdbox h4 { margin: 0 0 4px; font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sdbox h4 span { font-size: 11px; font-weight: 500; color: var(--faint); }
.sd-run {
  margin-top: 10px; border: 0; cursor: pointer; border-radius: 4px;
  background: linear-gradient(135deg, #7c3aed, var(--accent)); color: #fff;
  font-size: 13px; font-weight: 700; padding: 10px 18px; transition: filter .15s, transform .05s;
}
.sd-run:hover { filter: brightness(1.08); }
.sd-run:active { transform: translateY(1px); }
.sd-load, .sd-none { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.55; }
.sd-none code { background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
.sd-load { color: var(--accent); }
.sd-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sd-row {
  border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; background: var(--panel-2);
}
.sd-row.hot { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); }
.sd-row > i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); display: block; margin-bottom: 6px; letter-spacing: .01em; }
.sd-v { font-size: 13px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-chip { font-size: 11.5px; padding: 3px 9px; border-radius: 3px; background: var(--panel); border: 1px solid var(--border); color: var(--text); }
.sd-chip.hot { background: var(--gA-bg); color: var(--gA); border-color: transparent; font-weight: 600; }
.sd-list { margin: 0; padding: 0; list-style: none; }
.sd-list li { font-size: 12.5px; line-height: 1.5; padding-left: 12px; position: relative; }
.sd-list li::before { content: "·"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }
.sd-text { color: var(--text); }
.sd-empty { color: var(--faint); }

/* 검색바 — 감각 개선(그라데이션 테두리 느낌 + 포커스 글로우) */
.searchbar { transition: box-shadow .18s, border-color .18s; }
.searchbar:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow);
}
.searchbar button {
  background: linear-gradient(135deg, var(--accent), #6d9bff);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* 종합등급 배지 — 살짝 입체감 */

.sdbox .sd-tag { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; }
.sd-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--faint); line-height: 1.5; }
.sd-foot { margin-top: 10px; font-size: 11px; color: var(--faint); }

/* 📰 뉴스·웹 인사이트 타임라인 */

.ib-take { font-size: 12.5px; line-height: 1.55; border-radius: 4px; padding: 11px 13px; margin-bottom: 12px; border: 1px solid var(--border); }
.ib-take b { font-weight: 800; margin-right: 4px; }
.ib-good  { background: var(--gA-bg); border-color: transparent; color: var(--gA); }
.ib-neutral { background: var(--panel-2); color: var(--muted); }
.ib-watch { background: var(--risk-bg); border-color: transparent; color: var(--risk); }
.ib-cnt { display: inline-block; margin-left: 6px; font-weight: 700; opacity: .85; }
.ib-tl { list-style: none; margin: 0; padding: 0; }
.ib-tl li { display: grid; grid-template-columns: 78px 82px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--border); }
.ib-tl li:first-child { border-top: 0; }
.ib-date { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ib-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 3px; height: fit-content; text-align: center; white-space: nowrap; }
.ib-tag-up { background: var(--gA-bg); color: var(--gA); }
.ib-tag-down { background: var(--risk-bg); color: var(--risk); }
.ib-body { min-width: 0; }
.ib-body a { font-size: 12.5px; font-weight: 600; color: var(--text); }
.ib-body a:hover { color: var(--accent); }
.ib-desc { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.ib-foot { margin-top: 11px; font-size: 11px; color: var(--faint); line-height: 1.5; }
@media (max-width: 640px) {
  .ib-tl li { grid-template-columns: 64px 1fr; }
  .ib-tag { grid-column: 2; justify-self: start; margin-bottom: 2px; }
  .ib-body { grid-column: 1 / -1; }
}

/* ✅ 방문 전 체크리스트 */
.vcbox { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 15px 17px; box-shadow: var(--shadow); margin-bottom: 18px; }
.vcbox h4 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vcbox h4 span { font-size: 11px; font-weight: 500; color: var(--faint); }
/* 분류 그룹 머리글 */
.vc-gh {
  display: flex; align-items: center; gap: 6px; margin: 12px 0 4px;
  font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: .01em;
}
.vc-gh:first-of-type { margin-top: 4px; }
.vc-gh span {
  font-size: 10px; font-weight: 700; color: var(--faint);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; padding: 0 6px;
}
.vc-pri { font-size: 10.5px; font-weight: 800; text-align: left; }
.vc-pri-high { color: var(--risk); }
.vc-pri-mid { color: var(--gC); }
.vc-pri-low { color: var(--faint); }
.vc-cat { font-size: 11px; font-weight: 700; color: var(--muted); }
.vc-txt { font-size: 13px; color: var(--text); font-weight: 500; }
.vc-why { grid-column: 3; font-size: 11px; color: var(--faint); line-height: 1.45; }
.vc-foot { margin-top: 11px; font-size: 11px; color: var(--faint); line-height: 1.5; }
/* ── 방문 전 확인필요 통합 표 ──
   출처 | 중요도 | 분류 | 내용·메모. 세 블록에 흩어져 있던 확인사항을 한 줄씩 세운다.
   첫 칸의 '출처'가 신뢰도다 — 기준정보(공공 API 대조)와 웹기반은 무게가 다르다. */
.vc-tbl { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.vr {
  display: grid; grid-template-columns: 22px 58px 44px 62px minmax(0, 1fr) 58px 22px 22px;
  gap: 8px; align-items: start; padding: 9px 10px; border-top: 1px solid var(--border);
}
.vr:first-child { border-top: 0; }
.vr-head { background: var(--panel-2); font-size: 10px; font-weight: 700; color: var(--faint); padding: 6px 10px; }
.vr-ck { margin: 1px 0 0; width: 15px; height: 15px; cursor: pointer; }
.vr-src, .vr-pri, .vr-cat {
  font-size: 10px; font-weight: 700; text-align: center; padding: 2px 0; border-radius: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.vr-src-off { background: var(--gB-bg); color: var(--gB); }      /* 기준정보 — 공공 API */
.vr-src-web { background: var(--gC-bg); color: var(--gC); }      /* 웹기반 — 기사·채용·홈페이지 */
.vr-src-etc { background: var(--gD-bg); color: var(--gD); }      /* 기타 — 직접 추가 */
.vr-cat { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.vr-body { min-width: 0; }
.vr-body > label { display: block; font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.vr-own { font-size: 10px; color: var(--faint); text-align: right; white-space: nowrap; }
.vr.vc-done { background: var(--panel-2); }
.vr.vc-done .vr-body > label { text-decoration: line-through; color: var(--faint); }
/* 메모 — 물어볼 말이나 현장에서 들은 답. 비어 있을 땐 옅게 두어 표를 어지럽히지 않는다. */
/* 메모는 필요할 때만 꺼낸다 — '＋ 메모'를 누르면 입력칸이 나온다.
   모든 줄에 입력칸을 깔아 두니 보고서가 아니라 입력 양식처럼 보였다. */
.vr-memo-add {
  margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--faint);
}
.vr-memo-add:hover { color: var(--accent); }
.vr-memo { margin-top: 5px; }
.vr-memo[hidden], .vr-memo-add[hidden] { display: none !important; }
.vr-memo-in {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 11.5px;
  padding: 5px 8px; border: 1px dashed var(--border); border-radius: 7px;
  background: transparent; color: var(--text);
}
.vr-memo-in::placeholder { color: var(--faint); opacity: .7; }
.vr-memo-in:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--panel); }
.vr-memo-in:not(:placeholder-shown) { border-style: solid; background: var(--panel-2); }
.vr .vc-edit, .vr .vc-del { align-self: start; }
@media (max-width: 720px) {
  .vr { grid-template-columns: 20px 54px 40px 1fr 20px 20px; row-gap: 5px; }
  .vr-head { display: none; }
  .vr-body { grid-column: 1 / -1; }
  .vr-own { display: none; }
}
@media print {
  /* 조작 칸(수정·삭제·추가일)은 종이에서 쓸모가 없다. 칸 자체를 없애 본문 폭을 되찾는다. */
  .vr { grid-template-columns: 14px 48px 34px 52px minmax(0, 1fr); gap: 6px; padding: 4px 6px; }
  .vr > .vc-edit, .vr > .vc-del, .vr-own, .vr-head > span:nth-child(n+6) { display: none !important; }
  .vr-memo-in { border-style: solid; border-color: #999; padding: 2px 5px; }
}

/* 현장 대조표는 평소엔 접어 둔다 — 방문해서 맞춰 볼 표라 화면에서는 자리만 차지한다.
   머리글은 다른 그룹 제목(.vc-gh)과 같은 모양으로 두되 여닫이 표시만 붙인다. */
.vc-xcfold { margin-top: 12px; }
.vc-xcfold > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px; margin: 0 0 4px;
  font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: .01em;
}
.vc-xcfold > summary::-webkit-details-marker { display: none; }
.vc-xcfold > summary::before { content: '▸'; font-size: 10px; color: var(--faint); transition: transform .15s; }
.vc-xcfold[open] > summary::before { transform: rotate(90deg); }
.vc-xcfold > summary:hover { color: var(--text); }
.vc-xcfold > summary span {
  font-size: 10px; font-weight: 700; color: var(--faint);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; padding: 0 6px;
}
/* 현장 대조표 — 확보한 값 옆에 손으로 적을 칸을 비워 둔다(인쇄 전제) */
.vc-xc { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.vc-xc .xc-h, .vc-xc .xc-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr); gap: 10px; padding: 6px 10px; align-items: baseline; }
.vc-xc .xc-h { background: var(--panel-2); border-bottom: 1px solid var(--border); }
.vc-xc .xc-h i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--faint); }
.vc-xc .xc-r { border-bottom: 1px solid var(--border); }
.vc-xc .xc-r:last-child { border-bottom: 0; }
.vc-xc .xc-r i { font-style: normal; font-size: 11.5px; color: var(--muted); min-width: 0; word-break: break-word; }
.vc-xc .xc-r b { font-size: 12px; font-weight: 600; min-width: 0; word-break: break-word; }
.vc-xc .xc-r b small { display: block; font-size: 10px; font-weight: 400; color: var(--faint); }
.vc-xc .xc-r u { display: block; text-decoration: none; border-bottom: 1px dashed var(--border); min-height: 15px; }
@media (max-width: 520px) { .vc-xc .xc-h, .vc-xc .xc-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vc-xc .xc-h i:last-child, .vc-xc .xc-r u { display: none; } }
@media (max-width: 640px) {
  .vc-own { display: none; }
  .vc-cat { grid-column: 2; }
  .vc-txt, .vc-why { grid-column: 1 / -1; }
}
@media print { .vr-ck { -webkit-appearance: auto; appearance: auto; } }

/* ═══ 체크 필요사항 통합 패널 (기준정보 / 웹) ═══ */
.chkbox { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 15px 17px; box-shadow: var(--shadow); margin-bottom: 18px; }
.chkbox h3 { margin: 0 0 4px; font-size: 13px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chkbox h3 b { font-weight: 700; color: var(--muted); font-size: 11.5px; }
.chk-sum { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; padding: 3px 11px; }
.chk-sum.on { color: var(--risk); background: var(--risk-bg); border-color: transparent; }
.chk-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-bottom: 10px; }

.chk-web { border-left: 4px solid #7c3aed; }

.chk-take { font-size: 12.5px; line-height: 1.55; border-radius: 4px; padding: 11px 13px; margin-bottom: 12px; border: 1px solid var(--border); }
.chk-take b { font-weight: 800; margin-right: 4px; }
.chk-sec { font-size: 11.5px; font-weight: 800; color: var(--muted); margin: 14px 0 6px; padding-top: 11px; border-top: 1px dashed var(--border); display: flex; gap: 7px; align-items: baseline; }
.chk-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.chk-sec i { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--faint); }
.chk-web .ot-list { list-style: none; margin: 0; padding: 0; }
.chk-web .ot-list li { padding: 7px 0; border-top: 1px solid var(--border); }
.chk-web .ot-list li:first-child { border-top: 0; }
/* 웹 언급 줄 — 예전엔 .oembox 아래에 있었는데 그 상자가 없어지면서 글자 크기가 없는 채로 남아
   혼자 16px로 커졌다. 다른 칸(13px 안팎)에 맞춰 되살린다. */
.chk-web .ot-t { font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.chk-web .ot-t a { color: var(--accent); text-decoration: none; }
.chk-web .ot-t a:hover { text-decoration: underline; }
.chk-web .ot-d { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.chk-web .ot-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; margin-right: 6px; vertical-align: middle; }
.chk-web .ot-tag.ot-hire { background: var(--gC-bg); color: var(--gC); }
.chk-web .ot-tag.ot-report { background: #eef2ff; color: #4f46e5; }
.chk-web .ot-tag.ot-oem { background: var(--gA-bg); color: var(--gA); }
.chk-web .ot-tag.ot-etc { background: var(--panel-2); color: var(--muted); }
.chk-web .ot-hint { font-size: 11.5px; color: var(--muted); margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); line-height: 1.4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chk-web .ot-tag.ot-report { background: #312e81; color: #c7d2fe; } }
:root[data-theme="dark"] .chk-web .ot-tag.ot-report { background: #312e81; color: #c7d2fe; }
.vc-ins { grid-column: 3; font-size: 11px; color: var(--accent); line-height: 1.45; margin-top: 1px; }
@media (max-width: 640px) { .vc-ins { grid-column: 1 / -1; } }

/* 🔬 심층분석 — 추출 키워드 / 수동 주소 입력 */
.sd-kwbox { margin-top: 12px; border: 1px solid var(--border); border-radius: 4px; padding: 11px 13px; background: var(--panel-2); }
.sd-kwbox > i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); display: block; margin-bottom: 8px; }
.sd-kwbox > i em { font-style: normal; font-weight: 500; color: var(--faint); font-size: 10.5px; margin-left: 5px; }
.sd-kws { display: flex; flex-wrap: wrap; gap: 5px; }
.sd-kw { font-size: 11.5px; padding: 3px 9px; border-radius: 3px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.sd-kw.kw-mid { color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.sd-kw.kw-hi { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700; }
.sd-warnline { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--gC); background: var(--gC-bg); border-radius: 4px; padding: 9px 12px; }
.sd-manual { margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--border); }
.sd-manual > label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.sd-manual-in { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-url {
  flex: 1; min-width: 200px; font-size: 13px; padding: 9px 12px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); outline: none;
}
.sd-url:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sd-go {
  border: 0; cursor: pointer; border-radius: 4px; background: var(--accent); color: #fff;
  font-size: 12.5px; font-weight: 700; padding: 9px 16px; white-space: nowrap;
}
.sd-go:hover { filter: brightness(1.07); }

/* 🏭 생산설비 추정 (이미지 파일명·alt 기반 · OCR 아님) */

.eq-vend { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.eq-vend b { color: var(--accent); font-weight: 700; }
.eq-vend span { font-size: 10.5px; color: var(--faint); font-weight: 400; margin-left: 2px; }
.eq-list { list-style: none; margin: 6px 0 0; padding: 0; }
.eq-list li { padding: 7px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: baseline; }
.eq-list li:first-child { border-top: 0; }
.eq-conf { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 3px; }
.ec-high { background: var(--gA-bg); color: var(--gA); }
.ec-mid { background: var(--gC-bg); color: var(--gC); }
.ec-low { background: var(--gD-bg); color: var(--gD); }
.eq-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.eq-basis { font-size: 10.5px; color: var(--faint); }
.eq-ev { grid-column: 1 / -1; font-size: 11px; color: var(--muted); line-height: 1.45; }

/* 🔬 심층분석 탭 (인증 / 설비 / 생산CAPA / 기타) */
.sd-tabs { display: flex; gap: 6px; margin-top: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sd-tab {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: 13px; font-weight: 700; padding: 9px 13px; border-radius: 4px 9px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px;
}
.sd-tab:hover { color: var(--text); background: var(--panel-2); }
.sd-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.sd-tab span {
  font-size: 10.5px; font-weight: 800; min-width: 18px; padding: 1px 6px; border-radius: 3px;
  background: var(--panel-2); color: var(--faint); border: 1px solid var(--border);
}
.sd-tab.on span { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sd-pane { display: none; padding-top: 12px; }
.sd-pane.on { display: block; }
.sd-sec { font-size: 11.5px; font-weight: 800; color: var(--muted); margin: 12px 0 6px; }
.sd-sec:first-child { margin-top: 0; }
.sd-sec em { font-style: normal; font-weight: 500; color: var(--faint); font-size: 10.5px; margin-left: 4px; }
.sd-mini { margin-top: 10px; font-size: 10.5px; color: var(--faint); line-height: 1.5; }

/* 인증 목록 */
.cert-list { list-style: none; margin: 0; padding: 0; }
.cert-list li { padding: 6px 0; border-top: 1px solid var(--border); }
.cert-list li:first-child { border-top: 0; }
.cert-b { font-size: 12.5px; font-weight: 700; color: var(--gA); background: var(--gA-bg); border-radius: 6px; padding: 2px 9px; display: inline-block; }
.cert-list em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* 생산 CAPA 목록 */
.capa-list { list-style: none; margin: 0; padding: 0; }
.capa-list li { padding: 8px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 96px 1fr; gap: 3px 10px; align-items: baseline; }
.capa-list li:first-child { border-top: 0; }
.capa-kind { font-size: 10.5px; font-weight: 800; color: var(--muted); }
.capa-val { font-size: 14px; font-weight: 800; color: var(--accent); }
.capa-ctx { grid-column: 1 / -1; font-size: 11px; color: var(--faint); line-height: 1.45; }
@media (max-width: 640px) {
  .capa-list li { grid-template-columns: 1fr; }
  .sd-tab { padding: 8px 10px; font-size: 12.5px; }
}
/* 사이트에 실제 표기된 설비·인증 용어 칩 */
.lex-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.lex-chip {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
}
.kw-cat { font-size: 10.5px; font-weight: 800; color: var(--muted); margin: 9px 0 5px; }
.kw-cat:first-of-type { margin-top: 2px; }
.kw-cat b { font-weight: 700; color: var(--faint); margin-left: 3px; }

.hpbox .hp-cand em { font-style: normal; color: var(--faint); font-size: 10.5px; }

/* 🧑‍🏭 채용공고 추적 */
.hirebox { grid-column: 1 / -1; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid #7c5cff; border-radius: 4px; padding: 15px 17px; box-shadow: var(--shadow); }
.hirebox h4 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hirebox h4 span { font-size: 11px; font-weight: 500; color: var(--faint); }
.hire-none { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.hire-sec { font-size: 11.5px; font-weight: 800; color: var(--muted); margin: 13px 0 7px; padding-top: 11px; border-top: 1px dashed var(--border); }
.hire-sec em { font-style: normal; font-weight: 500; color: var(--faint); font-size: 10.5px; margin-left: 5px; }
/* 좌우 2단 — 왼쪽은 공고 건수(사실), 오른쪽은 해석. 둘을 나란히 놓아야 맞대 볼 수 있다. */
.hire-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-items: start; }
/* 두 단을 가르는 세로 구분선. 칸 사이 여백 한가운데에 둔다(26px 간격의 절반 = 13px).
   테두리로 그리면 단 높이가 서로 달라 선이 짧은 쪽에 맞춰 끊긴다 — 배경으로 깔아 끝까지 긋는다. */
.hire-split {
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: 1px calc(100% - 4px);
  background-position: calc(50% - 0.5px) 2px;
  background-repeat: no-repeat;
}
/* 각 단의 첫 제목은 위 구분선을 지운다 — 2단이 되면 선이 가운데서 끊겨 어색해진다 */
.hire-split .hire-col > .hire-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hire-col { min-width: 0; }   /* 긴 값이 칸을 밀어내지 않게 */
/* 좁은 화면·인쇄에서는 한 단으로 되돌린다 */
@media (max-width: 720px) {
  .hire-split { grid-template-columns: 1fr; gap: 0; background-image: none; }   /* 한 단이면 가를 선이 없다 */
  .hire-split .hire-col:last-child > .hire-sec:first-child { margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--border); }
}
.hire-sig { display: grid; gap: 8px; }
.hire-sig .hs { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; background: var(--panel-2); border-left: 3px solid var(--gD); }
.hire-sig .hs.high { border-left-color: var(--risk); background: var(--risk-bg); }
.hire-sig .hs.mid { border-left-color: var(--gC); background: var(--gC-bg); }
/* 판단을 못 내린 신호 — 경고색을 주면 없는 위험처럼 읽힌다. 회색으로 가라앉힌다. */
.hire-sig .hs.low { border-left-color: var(--gD); background: var(--panel-2); }
.hire-sig .hs b { display: block; font-size: 13px; font-weight: 800; margin-bottom: 3px; }
.hire-sig .hs i { font-style: normal; display: block; font-size: 12.5px; line-height: 1.5; }
.hire-sig .hs em { font-style: normal; display: block; font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.hire-bars { display: grid; gap: 5px; }
/* 막대는 고정 3열로 둔다. flex로 두면 칸이 좁아질 때 막대가 줄어들면서 건수 라벨이
   두 줄로 접히고("3 / 건"), 막대 길이도 비율과 어긋난다. 2단으로 나눈 뒤 실제로 그랬다. */
.hbar { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 9px; font-size: 12px; }
.hbar i { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.hbar span { height: 9px; border-radius: 5px; background: #7c5cff; min-width: 4px; }
.hbar b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hire-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.hrole { font-size: 12px; border: 1px solid var(--border); border-radius: 3px; padding: 4px 11px; background: var(--panel-2); }
.hrole b { margin-left: 6px; font-weight: 800; color: #7c5cff; }
.hire-int { font-size: 12.5px; line-height: 1.55; }
.hire-int b { font-weight: 800; color: #7c5cff; }
.hire-list { list-style: none; margin: 0; padding: 0; }
.hire-list li { display: flex; gap: 9px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.hire-list li:first-child { border-top: 0; }
.hire-list li.more { color: var(--faint); font-size: 11.5px; }
.hdt { color: var(--faint); font-variant-numeric: tabular-nums; flex: 0 0 56px; font-size: 11.5px; }
.hrl { margin-left: auto; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.hire-warn { margin-top: 11px; font-size: 11px; color: var(--faint); line-height: 1.55; }
/* 채용사이트 급여 수준 — 항목/값 두 칸. 값이 사이트마다 갈리면 아래에 나란히 보여 준다. */
.pf-kv { display: grid; grid-template-columns: 84px 1fr; gap: 3px 8px; align-items: baseline; }
.pf-k { font-size: 11.5px; color: var(--faint); min-width: 0; }
.pf-v { font-size: 12px; color: var(--text); min-width: 0; word-break: break-all; }
.pf-v small { margin-left: 6px; font-size: 10px; color: var(--faint); }
.pf-v.dis { color: var(--gC); }
.pf-v u { display: block; text-decoration: none; font-size: 10.5px; color: var(--faint); }
@media (max-width: 520px) { .pf-kv { grid-template-columns: 72px 1fr; } }
/* 같은 날 보도 묶음 — 대표 1건 + 외 N건 접기 */
.ib-more { margin-top: 5px; }
.ib-more summary { font-size: 11.5px; color: var(--accent); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.ib-more summary::-webkit-details-marker { display: none; }
.ib-more summary::before { content: '▸'; font-size: 10px; transition: transform .15s; }
.ib-more[open] summary::before { transform: rotate(90deg); }
.ib-more ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); min-width: 0; }
/* 묶인 기사는 한 행에 하나씩 — 제목이 길어도 줄바꿈하지 않고 말줄임 처리한다.
   flex/grid 안에서 말줄임이 먹으려면 조상까지 min-width:0 이 필요하다(.ib-body 포함). */
.ib-more li { padding: 3px 0; font-size: 12px; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.ib-more li a { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-subtag { font-size: 10px; color: var(--faint); white-space: nowrap; flex: 0 0 auto; }
.hp-skip { margin-top: 6px; font-size: 11px; color: var(--faint); line-height: 1.5; }

/* 체크리스트 직접 추가 */
.chk-add {
  margin-left: auto; border: 1px solid var(--border); background: var(--panel);
  color: var(--accent); font-size: 11.5px; font-weight: 700; padding: 4px 10px;
  border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.chk-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.vc-empty { font-size: 12.5px; color: var(--muted); padding: 6px 0 2px; }
/* 직접 추가한 항목도 자동 항목과 같은 모양으로 — 배경색 강조 없이 오른쪽에 추가일자만 */
.vc-done > label { opacity: .5; }
.vc-done .vc-txt { text-decoration: line-through; }
/* 날짜는 같은 행 본문(.vc-txt 13px)보다 딱 1px 작게 — 눈에 띄게 작지 않으면서 보조 정보로 읽힌다.
   크기가 1px 다르면 윗선이 어긋나므로 margin-top으로 첫 줄에 맞춘다. */
.vc-own {
  flex: 0 0 auto; align-self: flex-start; margin-top: 1px;
  font-size: 12px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vc-edit, .vc-del {
  border: 0; background: transparent; color: var(--faint); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 6px; flex: 0 0 auto; align-self: flex-start;
}
.vc-edit:hover { color: var(--accent); background: var(--accent-soft); }
.vc-del:hover { color: var(--risk); background: var(--risk-bg); }
/* 수정 중인 행 — 같은 자리에서 고친다.
   .vr 이 8칸 격자라 그대로 두면 폼 전체가 첫 칸(22px)에 밀려 세로로 찌그러진다.
   수정 중에는 격자를 풀어 블록으로 되돌린다. */
.vr.vc-editing { display: block; }

/* ── 추가·수정 폼 공통 ──
   flex-wrap 은 창 너비에 따라 칸이 제멋대로 접혀 입력창이 글자 한두 개 폭으로 줄었다.
   격자로 고정해 어느 너비에서든 같은 비율을 유지한다. */
.vc-add { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); }
.vc-add summary {
  font-size: 12.5px; font-weight: 700; color: var(--accent); cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.vc-add summary::-webkit-details-marker { display: none; }

.vc-form {
  display: grid; gap: 8px; margin-top: 10px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 96px auto auto;   /* 내용 · 우선순위 · 확인 · 취소 */
}
.vc-editing .vc-form { margin-top: 0; }
.vc-form input, .vc-form select, .vc-in-why {
  width: 100%; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 13px; padding: 9px 11px; border-radius: 4px; font-family: inherit; outline: none;
}
.vc-form select { cursor: pointer; }
.vc-form input:focus, .vc-form select:focus, .vc-in-why:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.vc-in-why { display: block; margin-top: 8px; }
.vc-in-btn, .vc-ed-cancel, .vc-in-cancel {
  white-space: nowrap; font-size: 13px; font-weight: 700;
  padding: 9px 18px; border-radius: 4px; cursor: pointer; font-family: inherit;
}
.vc-in-btn { border: 0; background: var(--accent); color: #fff; }
.vc-in-btn:hover { filter: brightness(1.06); }
.vc-ed-cancel, .vc-in-cancel { border: 1px solid var(--border); background: var(--panel); color: var(--muted); }
.vc-ed-cancel:hover, .vc-in-cancel:hover { border-color: var(--muted); color: var(--text); }

/* 좁은 화면에서는 내용칸을 한 줄로 빼고 나머지를 아래에 나란히 둔다 */
/* 좁은 화면 — 내용은 한 줄 전체, 아래에 우선순위·버튼을 나란히 */
@media (max-width: 760px) {
  .vc-form { grid-template-columns: minmax(0, 1fr) auto auto; }
  .vc-in-text, .vc-ed-text { grid-column: 1 / -1; }
}
@media print { .vc-add, .vc-del, .vc-edit, .chk-add { display: none !important; } }
/* 심층분석 — 공식자료 불일치 경고 · 수집 범위 · 인증 신뢰도 */
.sd-conflict { border: 1px solid var(--risk); background: var(--risk-bg); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.sd-conflict b { display: block; font-size: 12.5px; color: var(--risk); margin-bottom: 3px; }
.sd-conflict i { font-style: normal; display: block; font-size: 11.5px; line-height: 1.5; color: var(--text); }
.sd-scope { font-size: 11px; color: var(--faint); margin-bottom: 9px; }
.sd-scope em { font-style: normal; margin-left: 4px; }
.cert-lv { font-size: 10.5px; font-weight: 700; color: var(--gC); background: var(--gC-bg); border-radius: 3px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.cert-conflict .cert-lv { color: var(--risk); background: var(--risk-bg); }
.cert-conflict .cert-b, .cert-mention .cert-b, .cert-weak .cert-b { opacity: .75; }
.cert-why { display: block; font-style: normal; font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.finext { font-size: 10.5px; font-weight: 700; color: var(--gC); background: var(--gC-bg); border-radius: 3px; padding: 2px 9px; }
.cand-sim { font-size: 10.5px; font-weight: 700; color: var(--gC); background: var(--gC-bg); border-radius: 3px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }

/* 옛 코드가 캐시에서 돌고 있을 때의 경고 — 화면 아래 고정.
   이 상태는 겉으로 구분이 안 돼 잘못된 결과를 최신인 줄 알고 보게 된다. 눈에 띄어야 한다. */
.stalebar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 14px; border-radius: 4px; font-size: 12.5px; line-height: 1.5;
  background: var(--risk-bg); color: var(--text); border: 1px solid var(--risk);
  box-shadow: var(--shadow);
}
.stalebar b { color: var(--risk); }
.stalebar button {
  margin-left: auto; border: 0; border-radius: 8px; padding: 7px 13px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; background: var(--risk); color: #fff;
}
.stalebar button:hover { filter: brightness(1.08); }
@media print { .stalebar { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════
   종합판정 · 방문 전 확인 · 카테고리 구분
   판단 속도가 정보량보다 중요하다. 위에서 아래로 읽으면
   '어떤 업체인가 → 방문할 만한가 → 무엇이 걸리는가'가 순서대로 잡히게 한다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 종합판정 — 보고서 표제부 ──
   등급을 큰 색 뱃지로 띄우면 대시보드처럼 보인다. 문서의 표제부는 제목이 먼저 오고
   판정은 그 옆에 한 줄로 붙는다. 색은 판정 한 군데에만 쓴다. */
.verdict {
  background: var(--panel); border: 1px solid var(--border); border-radius: 3px;
  padding: 18px 20px 14px; margin-bottom: 10px;
}
.vd-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vd-title { min-width: 0; flex: 1 1 240px; order: 1; }
.vd-title h2 { margin: 0 0 2px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.vd-sub { font-size: 12px; color: var(--muted); }
/* 등급 — 작은 네모 글자. '종합판정'이라는 말은 옆의 판정 문구가 대신한다. */
.vd-badge {
  order: 2; flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px; border: 1px solid currentColor; border-radius: 3px; background: transparent;
}
.vd-badge b { font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.vd-badge span { font-size: 10px; opacity: .8; }
.vd-verd { order: 3; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.verdict.v-good .vd-verd { color: var(--gA); }
.verdict.v-warn .vd-verd { color: var(--gC); }
.verdict.v-muted .vd-verd { color: var(--muted); }

/* 판정 근거 — 라벨은 좁은 고정폭, 본문은 이어 읽히게 */
.vd-why { display: grid; gap: 3px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.vw { display: flex; gap: 10px; align-items: baseline; font-size: 12px; line-height: 1.6; }
.vw i {
  flex: 0 0 46px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em;
}
.vw.down i { color: var(--gC); }
.vw span { min-width: 0; color: var(--text); }

/* 기본 현황 — 카드가 아니라 항목·값이 줄지어 선 표. 세로 실선으로만 나눈다. */
.vd-chips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  margin-top: 12px; border-top: 1px solid var(--border);
}
.vch { padding: 9px 10px 7px; border-left: 1px solid var(--border); min-width: 0; }
.vch:first-child { border-left: 0; padding-left: 0; }
.vch i { display: block; font-style: normal; font-size: 10.5px; color: var(--muted); margin-bottom: 3px; }
.vch b {
  display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 값에 딸린 부연(소요시간 등) — 아랫줄에 작게. 칸을 넘지 않게 줄바꿈을 허용한다. */
.vch b small {
  display: block; font-size: 10.5px; font-weight: 400; color: var(--muted);
  margin-top: 1px; white-space: normal; overflow-wrap: anywhere;
}
.vch-na b { color: var(--faint); font-weight: 400; }
.vch-bad b { color: var(--risk); }
.vd-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--muted); line-height: 1.6; }
.vd-foot b { font-weight: 700; color: var(--text); }
.vd-foot em { font-style: normal; }

/* 조회 메타 — 판단에 안 쓰이므로 한 줄로 */
.metaline { font-size: 11.5px; color: var(--faint); margin: 2px 0 14px; padding: 0 2px; }
.metaline b { color: var(--muted); font-weight: 600; }
.metaline b.warn { color: var(--gC); }

/* ── 카테고리 구분 ──
   블록이 전부 같은 회색 머리를 달고 있어 어디부터 어디까지가 한 묶음인지 안 보였다.
   묶음마다 색 띠를 달아 눈으로 먼저 갈라지게 한다. */
.block.cat-basic > h3 { border-bottom-color: #3d4d8f; }
.block.cat-prod  > h3 { border-bottom-color: #1d6b8c; }
.block.cat-fin   > h3 { border-bottom-color: #1d6b52; }
.block.cat-qual  > h3 { border-bottom-color: #6b3d8f; }
.block.cat-act   > h3 { border-bottom-color: #8c6318; }

@media (max-width: 620px) {
  .vd-title { flex-basis: 100%; }
  .vd-title h2 { font-size: 18px; }
  .vd-chips { grid-template-columns: repeat(3, 1fr); }
  .vch { border-left: 1px solid var(--border); padding-left: 10px; }
  .vch:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media print {
  /* 표제부는 짧아서 통째로 유지해도 공란이 안 생긴다. 체크리스트는 길어서 쪼개져야 한다. */
  .verdict { break-inside: avoid; }
  .metaline { display: none !important; }
  /* 판정 카드 여백 압축 */
  .verdict { padding: 10px 12px 8px; margin-bottom: 7px; }
  .vd-why, .vd-chips, .vd-foot { margin-top: 7px; padding-top: 6px; }
  .vch { padding: 5px 7px 4px; }
}

/* ══════════════════════════════════════════════════════════════
   보고서 톤 마무리
   화면용 대시보드가 아니라 '사람이 정리해 낸 문서'로 읽히게 하는 마지막 손질.
   색은 판정·경고에만 쓰고, 나머지 구분은 선과 활자 크기로 한다.
   ══════════════════════════════════════════════════════════════ */
/* 숫자는 자릿수가 맞아야 표로 읽힌다 */
.field .v, .vch b, .vr-src, .metaline { font-variant-numeric: tabular-nums; }
/* 본문 여백 — 섹션 사이를 넉넉히 띄워 덩어리가 눈으로 갈리게 */
.blocks { gap: 12px; }
.vcbox, .chkbox, .hirebox, .hpbox, .sdbox { border-radius: 3px; }
/* 표 머리글은 굵기와 자간으로만 구분 — 배경색을 깔면 UI 부품처럼 보인다 */
.vr-head { background: transparent; border-bottom: 1px solid var(--rule); letter-spacing: .04em; }
.vc-tbl { border-radius: 3px; }
/* 출처·중요도 라벨 — 채운 색을 옅게 낮추고 글자로 읽히게 */
.vr-src, .vr-pri, .vr-cat { font-weight: 600; letter-spacing: .01em; }

/* ── 대시보드 강조 ──
   방문 판단이 갈리는 칸만 색으로 세운다. 다 칠하면 아무것도 강조되지 않는다. */
.vch-good b { color: var(--gA); }
.vch-warn b { color: var(--gC); }
.vch-bad  b { color: var(--risk); }
.vch-good, .vch-warn, .vch-bad { position: relative; }
/* 색약 대비 — 색만으로 구분하지 않도록 왼쪽에 얇은 표시를 함께 둔다 */
.vch-warn::before, .vch-bad::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px;
}
.vch:first-child.vch-warn::before, .vch:first-child.vch-bad::before { left: -2px; }
.vch-warn::before { background: var(--gC); }
.vch-bad::before  { background: var(--risk); }
/* 회수 이력은 건수만 보고 끝낼 수 없다 — 눌러서 무슨 일이 있었는지로 간다 */
a.vch-link { text-decoration: none; color: inherit; cursor: pointer; }
a.vch-link b { text-decoration: underline; text-underline-offset: 2px; }
a.vch-link:hover b { text-decoration-thickness: 2px; }
/* 링크가 가리키는 행 — 도착했을 때 어느 줄인지 보이게 */
.vr-recall:target, .vr-recall:target ~ .vr { scroll-margin-top: 80px; }
.vr-recall:target { background: var(--risk-bg); box-shadow: inset 2px 0 0 var(--risk); }

/* ═══════════════ 근처 업체 탭 (nearby.js) ═══════════════
   시안 A(지도 중심)와 B(리스트·동선)를 합쳤다. 색은 앱 토큰을 따라 다크 모드에서도 읽힌다.
   핀 색: 파랑 채움 = 제조업 허가 · 주황 테두리 = 명단에 없음 · 회색 = 확인 불가 */
:root { --pin-reg: #1D4ED8; --pin-new: #E0801F; --pin-new-bg: #FFF4E8; --pin-new-ink: #8A4206; --pin-unk: #9aa1ab; --nb-ink: #16202A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pin-reg: #6ea0ff; --pin-new: #f0a050; --pin-new-bg: #3a2610; --pin-new-ink: #f5c28a; --pin-unk: #6b7482; --nb-ink: #e6e9ee; }
}
:root[data-theme="dark"] { --pin-reg: #6ea0ff; --pin-new: #f0a050; --pin-new-bg: #3a2610; --pin-new-ink: #f5c28a; --pin-unk: #6b7482; --nb-ink: #e6e9ee; }

/* 리포트 탭 */
/* 스크롤해도 탭 줄은 상단(고정 머리줄 바로 아래)에 붙어 있는다. --topbar-h는 app.js가 실제 높이로 맞춘다 */
.rtabs { display: flex; gap: 22px; margin: 4px 0 16px; border-bottom: 1px solid var(--rule); position: sticky; top: var(--topbar-h, 61px); z-index: 9;
  background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs.stuck { box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .25); }
.rtab { font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); background: none; border: 0; white-space: nowrap;
  border-bottom: 2px solid transparent; padding: 10px 2px 11px; margin-bottom: -1px; cursor: pointer;
  transition: color .2s ease, transform .15s ease; }
.rtab:hover { color: var(--text); }
.rtab:active { transform: scale(.96); }
.rtab[aria-selected="true"] { color: var(--text); font-weight: 800; }
/* 고른 탭 아래 밑줄이 옆 탭으로 미끄러져 간다 */
.rtab-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--text); border-radius: 2px;
  transition: transform .28s cubic-bezier(.3, .7, .2, 1), width .28s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
.tabpane.enter { animation: paneIn .28s ease both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rtab-ink { transition: none; }
  .tabpane.enter { animation: none; }
}
@media print { .rtabs { position: static; box-shadow: none; } .rtab-ink { display: none; } }
.rtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.tabpane[hidden] { display: none !important; }

.nb { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.nb-empty { padding: 18px 16px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.nb-empty.err { color: var(--risk); }

/* 머리줄 — 제목 · 범례 · 반경 */
.nb-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title legend" "seg seg"; gap: 10px 14px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.nb-title { grid-area: title; display: flex; flex-direction: column; min-width: 0; }
.nb-title b { font-size: 17px; font-weight: 800; }
.nb-title small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-legend { grid-area: legend; display: flex; gap: 12px; align-items: center; font-size: 11px; color: var(--muted); flex-wrap: wrap; justify-content: flex-end; }
.nb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.nb-seg { grid-area: seg; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--bg); border-radius: 12px; max-width: 420px; }
.nb-seg button { font: inherit; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.nb-seg button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* 표식 — 범례·목록에서 같이 쓴다 */
.nb-mark { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; }
.nb-mark.reg { background: var(--pin-reg); }
.nb-mark.new { background: var(--panel); border: 2px solid var(--pin-new); }
.nb-mark.unk { background: var(--panel); border: 2px solid var(--pin-unk); }

/* 본문 — 왼쪽 지도(A), 오른쪽 목록(B). 좁으면 위아래로 */
.nb-body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }

.nb-map { height: 400px; background: #E4E9E5; position: relative; z-index: 0; }
.nb-map.loading::after { content: "지도 불러오는 중…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #3F4A55; }
/* 타일은 한 톤 죽여 핀이 먼저 보이게 한다. 다크 모드에서는 뒤집어 눈부심을 없앤다 */
.nb-map .leaflet-tile-pane { filter: grayscale(.4) contrast(.95) brightness(1.03); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nb-map { background: #1b2027; }
  :root:not([data-theme="light"]) .nb-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(.35) brightness(.82) contrast(.92); }
}
:root[data-theme="dark"] .nb-map { background: #1b2027; }
:root[data-theme="dark"] .nb-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(.35) brightness(.82) contrast(.92); }
.nb-map .leaflet-control-attribution { font-size: 10px; }
.nb-map .leaflet-container, .nb-map.leaflet-container { font-family: inherit; }

/* 지도 위 표식 */
.nb-pinwrap, .nb-origin-pin, .nb-rlabel { background: none; border: 0; }
.nb-pinwrap { display: flex; align-items: center; justify-content: center; }
.nb-pin { display: block; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; transition: transform .1s; }
.nb-pin.reg { background: var(--pin-reg); border: 2px solid #fff; }
.nb-pin.new { background: #fff; border: 3px solid var(--pin-new); }
.nb-pin.unk { background: #fff; border: 3px solid var(--pin-unk); }
.nb-pin.on { width: 20px; height: 20px; }
.nb-pin.reg.on { box-shadow: 0 0 0 4px rgba(29,78,216,.25); }
.nb-pin.new.on { box-shadow: 0 0 0 4px rgba(224,128,31,.28); }
.nb-pinwrap:hover .nb-pin { transform: scale(1.15); }
.nb-plabel { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 500; color: #16202A; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.nb-plabel.strong { font-size: 12px; font-weight: 700; }
.nb-plabel.left { left: auto; right: 26px; }
.nb-origin-pin .nb-dia { display: block; width: 18px; height: 18px; background: #16202A; border: 2px solid #fff; box-sizing: border-box; transform: rotate(45deg); }
.nb-origin-pin .nb-plabel { left: 24px; }
.nb-rlabel span { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #fff; font-size: 11px; font-weight: 600; color: #1D4ED8; white-space: nowrap; box-shadow: 0 0 0 1px rgba(29,78,216,.15); }
.nb-rlabel.half span { background: transparent; box-shadow: none; color: #3F4A55; font-size: 10px; font-weight: 500; }

/* 선택 카드(A의 바텀시트) */
.nb-sum { font-size: 12px; color: var(--muted); }
.nb-sum b { color: var(--text); }
.nb-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.nb-badge.reg { background: var(--pin-reg); color: #fff; }
.nb-badge.new { background: var(--pin-new-bg); color: var(--pin-new-ink); box-shadow: inset 0 0 0 1px var(--pin-new); }
.nb-badge.unk { background: var(--gD-bg); color: var(--muted); }
.nb-badge.gmp { background: var(--gA-bg); color: var(--gA); }
/* 고른 업체의 실행 버튼 — 목록 줄 안, 업체명 아래에서 펴진다 */
.nb-selacts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px 78px; }
.nb-selacts .nb-btn { min-height: 34px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.nb-actwhy { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }

/* 버튼 — 링크와 버튼 모양을 맞춘다 */
.nb-btn { font: inherit; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.nb-btn:hover { border-color: var(--accent); text-decoration: none; }
.nb-btn.dark { background: var(--nb-ink); color: var(--panel); border-color: var(--nb-ink); }
.nb-btn.blue { background: var(--pin-reg); color: #fff; border-color: var(--pin-reg); }

/* 목록(B) */
.nb-listcol { display: flex; flex-direction: column; min-width: 0; }
.nb-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.nb-tab { font: inherit; height: 46px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.nb-tab b { font-weight: 700; margin-left: 2px; }
.nb-tab[aria-pressed="true"] { color: var(--text); font-weight: 700; border-bottom-color: var(--text); }
.nb-rows { flex: 1; max-height: 520px; overflow-y: auto; }
.nb-row { border-bottom: 1px solid var(--border); }
.nb-row.open, .nb-row.sel { background: var(--panel-2); }
.nb-row.sel .nb-rowbtn { box-shadow: inset 3px 0 0 var(--pin-reg); }
.nb-rowbtn { font: inherit; width: 100%; min-height: 64px; padding: 11px 16px; border: 0; background: transparent; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer; color: var(--text); }
.nb-d { width: 48px; flex-shrink: 0; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.nb-d b { font-size: 17px; font-weight: 800; line-height: 1.15; }
.nb-d i { font-style: normal; font-size: 11px; color: var(--muted); }
.nb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nb-nm { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; min-width: 0; }
.nb-site { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
.nb-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-chip { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 3px 6px; border-radius: 6px; background: var(--gA-bg); color: var(--gA); }
.nb-chip.off { background: none; color: var(--faint); }
.nb-inroute { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--pin-reg); }

.nb-more-btn { font: inherit; display: block; width: calc(100% - 32px); margin: 12px 16px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; background: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.nb-more-btn small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; margin-top: 2px; }

/* 지역 단계 묶음 — 같은 읍·면·동 → 같은 시·군 → 같은 시·도 → 인접 시·도 */
.nb-grp { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 16px 6px; background: var(--bg);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.nb-grp b { font-size: 12px; font-weight: 800; color: var(--text); }
.nb-grp span { font-size: 11px; color: var(--muted); }
/* 위치가 번지까지 확인되지 않은 업체 — 거리 대신 '—', 동선에 넣지 않는다 */
.nb-row.unplaced .nb-d b.nb-dq { color: var(--faint); }
.nb-row.unplaced .nb-d i { font-size: 10px; line-height: 1.2; white-space: nowrap; }

.nb-sum-warn { color: var(--gC); }
.nb-warn { color: var(--gC); font-weight: 700; }
.nb-btn[disabled] { opacity: .45; cursor: not-allowed; }
.nb-btn[disabled]:hover { border-color: var(--border); }

/* 기준 주소 줄 — '조회 업체명 (주소)' · 주소 수정 */
.nb-origin-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.nb-oname { font-size: 17px; font-weight: 800; }
.nb-oaddr { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.nb-owarn, .nb-oedited { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.nb-owarn { background: var(--gC-bg); color: var(--gC); }
.nb-oedited { background: var(--accent-soft); color: var(--accent); }
.nb-osub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.nb-btn.sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.nb-oform { display: flex; flex-direction: column; gap: 6px; }
.nb-oform label { font-size: 13px; color: var(--muted); }
.nb-oform label b { color: var(--text); font-size: 15px; margin-right: 4px; }
.nb-orow { display: flex; gap: 8px; flex-wrap: wrap; }
.nb-oin { font: inherit; flex: 1 1 280px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); font-size: 14px; }
.nb-oin:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.nb-oerr { font-size: 12.5px; color: var(--risk); }
.nb-ohint { font-size: 12px; color: var(--muted); }
/* 선택 카드 — 등록 주소 전체와 이동시간 */
/* 목록 행 — 주소 한 줄 + 이동시간 */
.nb-time { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.nb-time em { font-style: normal; font-weight: 500; color: var(--muted); margin-left: 5px; }
/* CGMP 적합 업체 핀·표식 */
.nb-mark.gmp { background: var(--gA); }
.nb-pin.gmp { background: var(--gA); border: 2px solid #fff; }
.nb-pin.gmp.on { box-shadow: 0 0 0 4px rgba(18,133,91,.28); }

/* 오늘 동선 */
.nb-route { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--rule); background: var(--panel); }
.nb-route > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nb-route small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-route b { font-size: 16px; font-weight: 800; }
.nb-note { padding: 0 16px 12px; font-size: 11.5px; color: var(--muted); }

.nb-status { padding: 9px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.nb-spin { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: nbspin .8s linear infinite; vertical-align: -1px; margin-right: 6px; }
@keyframes nbspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nb-spin { animation: none; } }

/* 다크 모드 — 어두운 지도 위에서는 글자를 밝게, 테두리 번짐은 어둡게 뒤집는다.
   밝은 모드 규칙(흰 번짐 + 진한 글자)을 그대로 두면 이름이 뿌옇게 번져 읽히지 않는다. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nb-plabel { color: #e6e9ee; text-shadow: 0 0 3px #0e1116, 0 0 3px #0e1116, 0 0 3px #0e1116; }
  :root:not([data-theme="light"]) .nb-rlabel span { background: #171b22; color: #6ea0ff; box-shadow: 0 0 0 1px rgba(110,160,255,.3); }
  :root:not([data-theme="light"]) .nb-rlabel.half span { background: transparent; box-shadow: none; color: #9aa3b1; }
  :root:not([data-theme="light"]) .nb-origin-pin .nb-dia { background: #e6e9ee; border-color: #0e1116; }
  :root:not([data-theme="light"]) .nb-map .leaflet-bar a { background: #171b22; color: #e6e9ee; border-bottom-color: #2a303a; }
  :root:not([data-theme="light"]) .nb-map .leaflet-control-attribution { background: rgba(23,27,34,.85); color: #9aa3b1; }
}
:root[data-theme="dark"] .nb-plabel { color: #e6e9ee; text-shadow: 0 0 3px #0e1116, 0 0 3px #0e1116, 0 0 3px #0e1116; }
:root[data-theme="dark"] .nb-rlabel span { background: #171b22; color: #6ea0ff; box-shadow: 0 0 0 1px rgba(110,160,255,.3); }
:root[data-theme="dark"] .nb-rlabel.half span { background: transparent; box-shadow: none; color: #9aa3b1; }
:root[data-theme="dark"] .nb-origin-pin .nb-dia { background: #e6e9ee; border-color: #0e1116; }
:root[data-theme="dark"] .nb-map .leaflet-bar a { background: #171b22; color: #e6e9ee; border-bottom-color: #2a303a; }
:root[data-theme="dark"] .nb-map .leaflet-control-attribution { background: rgba(23,27,34,.85); color: #9aa3b1; }

@media (max-width: 760px) {
  .nb-head { grid-template-columns: 1fr; grid-template-areas: "title" "legend" "seg"; }
  .nb-legend { justify-content: flex-start; }
  .nb-seg { max-width: none; }
  .nb-body { grid-template-columns: 1fr; }
  
  .nb-map { height: 320px; }
  .nb-rows { max-height: none; }
  
  .nb-selacts { grid-template-columns: 1fr 1fr; }
  .nb-selacts .nb-btn.dark { grid-column: 1 / -1; }
}
@media print {
  .rtabs, .nb-seg, .nb-more-btn, .nb-selacts, .nb-route .nb-btn, .nb-map .leaflet-control-zoom{ display: none !important; }
  .nb-rows { max-height: none; overflow: visible; }
  .nb-map { height: 320px; }
  .nb-row { break-inside: avoid; }   /* 통째로 묶으면 빈 페이지가 생긴다 — 행 단위로만 */
}

/* ═══════════ 공장 규모 비교 (건축물대장 · 한국콜마 기준점) ═══════════
   면적에 비례한 정사각형 두 개 + 막대. 처음 보일 때 한 번 자라고(.go), 움직임 줄이기·인쇄는 최종 모습. */
.ac .ac-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 14px; }
.ac-wait { font-size: 13px; color: var(--muted); padding: 10px 0; }
.ac-head { font-size: 16px; line-height: 1.5; }
.ac-head em { font-style: normal; font-weight: 800; color: var(--accent); }
.ac-warn { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ac-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: center; }
.ac-left { display: flex; justify-content: center; min-width: 0; }
.ac-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ac-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; }
.ac-lab b { display: block; font-size: 13px; }
.ac-lab small { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; }
.ac-bars { display: flex; flex-direction: column; gap: 5px; }
.ac-bar { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 8px; }
.ac-bar span { display: block; height: 12px; border-radius: 6px; width: var(--w); }
.ac-bar.m span { background: var(--accent); }
.ac-bar.k span { background: var(--rule); }
.ac-bar i { font-style: normal; font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-bar.k i { color: var(--muted); font-weight: 600; }
.ac-analog { font-size: 12.5px; color: var(--muted); }
.ac-analog b { color: var(--text); }

.ac-foot { font-size: 11.5px; color: var(--muted); line-height: 1.5; border-top: 1px dashed var(--border); padding-top: 10px; }

/* ── 3D 건물 블록 ──
   바닥면(XY)을 눕혀(rotateX 58°) 비스듬히 돌린(rotateZ) 장면. 상자는 윗면 + 네 옆면.
   .ac3-rise가 Z축으로 0 → 1 늘어나며 건물이 솟는다. 다 솟은 뒤 천천히 한 바퀴씩 돈다. */
.ac3 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ac3-stage { width: 100%; max-width: 340px; height: 270px; perspective: 900px; perspective-origin: 50% 35%;
  display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: pan-y; user-select: none; }
.ac3-stage:active { cursor: grabbing; }
.ac3-scene { position: relative; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg); }
.ac3-ground { position: absolute; inset: 0; border-radius: 4px;
  background-color: var(--bg);
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: var(--grid) var(--grid); box-shadow: 0 0 0 1px var(--border); }
.ac3-bld { position: absolute; transform-style: preserve-3d; }
.ac3-rise { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 0 0; }
.ac3-rise .f { position: absolute; left: 0; top: 0; display: block; backface-visibility: visible; }
.ac3-rise .fr, .ac3-rise .bk { transform-origin: top center; transform: rotateX(90deg); }
.ac3-rise .lf, .ac3-rise .rt { transform-origin: left center; transform: rotateY(-90deg); }
/* 면마다 밝기를 달리해 입체로 읽히게 */
.ac3-bld.m .top { background: color-mix(in srgb, var(--accent) 88%, white); }
.ac3-bld.m .fr, .ac3-bld.m .bk { background: color-mix(in srgb, var(--accent) 82%, black); }
.ac3-bld.m .lf, .ac3-bld.m .rt { background: color-mix(in srgb, var(--accent) 64%, black); }
.ac3-bld.k .top { background: color-mix(in srgb, var(--muted) 45%, var(--panel)); outline: 1px dashed var(--muted); outline-offset: -1px; }
.ac3-bld.k .fr, .ac3-bld.k .bk { background: color-mix(in srgb, var(--muted) 62%, var(--panel)); }
.ac3-bld.k .lf, .ac3-bld.k .rt { background: color-mix(in srgb, var(--muted) 78%, var(--panel)); }
/* 이름표 — 장면과 반대로 돌아 늘 정면을 본다 */
.ac3-tag { position: absolute; left: 50%; top: 50%; white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--text);
  padding: 2px 7px; border-radius: 6px; background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transform: translate(-50%, -50%) translateZ(var(--tz)) rotateZ(38deg) rotateX(-58deg); pointer-events: none; }
.ac3-bld.m .ac3-tag { color: #fff; background: var(--accent); }
.ac3-cap { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.ac3-cap span { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ac3-cap span.m { background: var(--accent); }
.ac3-cap span.k { background: color-mix(in srgb, var(--muted) 62%, var(--panel)); }
.ac3-note { font-size: 11px; color: var(--faint); text-align: center; max-width: 320px; line-height: 1.4; }
.ac3-spin { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 11px; cursor: pointer; min-height: 30px; }
.ac3-spin:hover { color: var(--accent); border-color: var(--accent); }

/* 움직임 — 처음엔 땅에 붙어 있다가(.go) 솟고, 막대가 자라고, 그 뒤 천천히 돈다 */
.ac3-rise { transform: scaleZ(0.001); transition: transform 1.1s cubic-bezier(.2, .9, .25, 1.05); }
.ac3-bld.m .ac3-rise { transition-delay: .35s; }
.ac3-tag { opacity: 0; transition: opacity .4s ease 1.3s; }
.ac-bar span { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.ac.go .ac3-rise, .ac.go .ac-bar span { transform: none; }
.ac.go .ac3-tag { opacity: 1; }
@keyframes ac3spin { from { transform: rotateX(58deg) rotateZ(-38deg); } to { transform: rotateX(58deg) rotateZ(322deg); } }
@keyframes ac3tag { from { transform: translate(-50%, -50%) translateZ(var(--tz)) rotateZ(38deg) rotateX(-58deg); }
  to { transform: translate(-50%, -50%) translateZ(var(--tz)) rotateZ(-322deg) rotateX(-58deg); } }
.ac.go:not(.manual):not(.still) .ac3-scene { animation: ac3spin 32s linear 2.2s infinite; }
.ac.go:not(.manual):not(.still) .ac3-tag { animation: ac3tag 32s linear 2.2s infinite; }
.ac.still .ac3-rise, .ac.still .ac3-tag, .ac.still .ac-bar span { transition: none; }
.ac.still .ac3-spin { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ac3-rise, .ac-bar span { transform: none !important; transition: none !important; }
  .ac3-tag { opacity: 1 !important; transition: none !important; }
  .ac3-scene, .ac3-tag { animation: none !important; }
  .ac3-spin { display: none; }
}
@media print {
  .ac3-rise, .ac-bar span { transform: none !important; transition: none !important; }
  .ac3-tag { opacity: 1 !important; }
  .ac3-scene, .ac3-tag { animation: none !important; }
  .ac3-spin, .ac3-note { display: none !important; }
  .ac { break-inside: avoid; }
}
@media (max-width: 720px) {
  .ac-grid { grid-template-columns: 1fr; }
  .ac-row { grid-template-columns: 1fr; gap: 4px; }
}
/* 면적을 못 찾았을 때 — 사유 · 직접 입력 */
.ac-why { font-size: 13px; color: var(--muted); line-height: 1.55; }
.ac-why small { color: var(--faint); }
.ac-form { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ac-form label { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ac-frow { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-in { font: inherit; flex: 1 1 280px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text); font-size: 14px; }
.ac-in.sm { flex: 0 1 150px; }
.ac-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ac-manual { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--gC); }
@media print { .ac-form { display: none !important; } }

/* ═══════════ 공장 면적 탭 ═══════════
   머리줄(주소 수정) · 후보 주소 · 합계 · 필지별 내역 · 동별 대장 · 주의할 점 · 3D 비교 */
.rtab-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.at { display: flex; flex-direction: column; gap: 14px; }
.at-head, .at-sec { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; min-width: 0; }
.at-sec h4 { margin: 0 0 10px; font-size: 14.5px; font-weight: 800; color: var(--text); }
.at-sec h4 small { font-weight: 500; font-size: 12px; color: var(--muted); margin-left: 6px; }
.at-head .nb-oerr { margin-top: 6px; }
.at-cands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.at-cands li { display: grid; grid-template-columns: 150px 1fr auto auto; align-items: center; gap: 4px 10px; font-size: 13px;
  padding: 6px 0; border-top: 1px solid var(--rule); }
.at-cands li:first-child { border-top: 0; }
.at-cl { color: var(--muted); font-size: 12px; }
.at-ca { overflow-wrap: anywhere; color: var(--text); }
.at-cs { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; background: var(--rule); color: var(--muted); }
.at-cands li.pick .at-cs { background: var(--accent-soft); color: var(--accent); }
.at-cands li.out { opacity: .6; }
.at-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }  /* 면적 4 + 연식·층·규모 3 = 같은 크기 칸 한 줄 */
.at-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; min-width: 0; }
.at-stat span { font-size: 12px; color: var(--muted); }
.at-stat b { font-size: 20px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.at-stat small { font-size: 11.5px; color: var(--muted); }
.at-miss p { margin: 6px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.at-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.at-tbl { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13px; }
.at-tbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.at-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--text); }
.at-tbl td small { display: block; font-size: 11px; color: var(--muted); }
.at-tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.at-tbl tr.fac td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.at-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.at-warn { margin-top: 8px; font-size: 12.5px; color: var(--risk); }
.at-sec .ac-form, .at-cat .ac-form { margin-top: 12px; }
.at-notes { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text); }
.at .ac { margin: 0; }
@media (max-width: 720px) {
  .at-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-stat b { font-size: 17px; }
  .at-cands li { grid-template-columns: 1fr auto; }
  .at-cl { grid-column: 1 / -1; }
  .at-head, .at-sec { padding: 12px; }
}
@media print { .at .nb-btn, .at .ac-form, .at-cands button { display: none !important; } }

/* 대시보드 아래 기업정보·생산역량·재무 묶음 — 방문 전 확인필요와 간격 */
.core-blocks { margin: 0 0 18px; }

/* 먼저 그린 리포트 — 느린 기관 자료를 기다리는 중 */
.pendbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; padding: 9px 14px; font-size: 13px;
  color: var(--text); background: var(--accent-soft); border: 1px solid var(--border); border-radius: 6px; }
.pend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: pendPulse 1.2s ease-in-out infinite; }
@keyframes pendPulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pend-dot { animation: none; } }
@media print { .pendbar { display: none !important; } }

/* 공장 면적 — 선정 외 후보 주소는 접어 둔다 */
.at-cfold, .at-more { margin-top: 6px; border-top: 1px dashed var(--border); }
.at-cfold > summary, .at-more > summary { cursor: pointer; padding: 8px 0 4px; font-size: 13px; font-weight: 700; color: var(--accent); list-style: none; }
.at-cfold > summary::-webkit-details-marker, .at-more > summary::-webkit-details-marker { display: none; }
.at-cfold > summary::before, .at-more > summary::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.at-cfold[open] > summary::before, .at-more[open] > summary::before { transform: rotate(90deg); }
.at-cfold > summary small, .at-more > summary small { font-weight: 500; color: var(--muted); margin-left: 6px; }

/* 종합판정 배지 — 눌러서 판단 기준 보기 */
button.vd-badge { font: inherit; color: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
button.vd-badge:hover { box-shadow: 0 0 0 3px var(--accent-soft); }
button.vd-badge:active { transform: scale(.96); }
button.vd-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vwhy { border: 1px solid var(--border); border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  background: var(--panel); color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.vwhy::backdrop { background: rgba(10, 14, 20, .45); }
.vwhy[open] { animation: vwhyIn .2s ease both; }
@keyframes vwhyIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vwhy[open] { animation: none; } }
.vwhy-in { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.vwhy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vwhy-head h3 { margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vwhy-x { font: inherit; font-size: 16px; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; flex: none; }
.vwhy section h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 800; }
.vwhy section p { margin: 0; font-size: 13px; line-height: 1.6; }
.vw-g { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 4px; font-size: 13px; font-weight: 800; border: 1px solid currentColor; }
.vw-bar { display: flex; gap: 2px; margin: 10px 0 6px; height: 24px; border-radius: 5px; overflow: hidden; }
.vw-seg { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; min-width: 36px; border: 1px solid currentColor; }
.vw-seg.none { flex: 1; color: var(--muted); border-style: dashed; }
.vw-note { color: var(--muted); font-size: 12.5px !important; margin-top: 6px !important; }
.vw-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.vw-tbl th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.vw-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.vw-tbl tr.on td { background: var(--accent-soft); font-weight: 700; }
.vw-caution { margin: 0; font-size: 12.5px; line-height: 1.6; padding: 10px 12px; border-radius: 6px; background: var(--panel-2, var(--bg)); border: 1px solid var(--border); }

/* 업체명 옆 대표번호·대표메일 */
.vd-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px; font-size: 13px; min-height: 1em; }
.vd-contact a { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.vd-contact a:hover { color: var(--accent); text-decoration: underline; }
.vd-contact small { font-size: 11px; color: var(--muted); margin-left: 3px; }
.vd-csep { font-style: normal; color: var(--faint); }
.vd-cwait { color: var(--faint); }

/* 공장 면적 — 식약처 등록 제조소 모두 합산 */
.at-allsites { margin-top: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.6; border: 1px dashed var(--border); border-radius: 6px; overflow-wrap: anywhere; }
.at-allsites .nb-btn { margin-left: 6px; }
.at-allsites small { color: var(--muted); }

/* ═══════════ 첫 화면 — 급성장 신호 ═══════════ */
.growth { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; margin: 4px 0 24px; min-width: 0; }
.growth[hidden] { display: none !important; }
.gr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.gr-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.gr-head h2 small { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.gr-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.gr-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: none; }
.gr-seg button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 14px; min-height: 40px; border: 0; background: var(--panel); color: var(--muted); cursor: pointer;
  transition: background .2s ease, color .2s ease; }
.gr-seg button + button { border-left: 1px solid var(--border); }
.gr-seg button[aria-selected="true"] { background: var(--nb-ink); color: var(--panel); }
.gr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 8px; font-size: 12.5px; color: var(--muted); }
.gr-tools label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text); }
.gr-crit { flex: 1 1 100%; }
.gr-sort button { font: inherit; font-size: 12px; padding: 3px 9px; margin-left: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--muted); cursor: pointer; }
.gr-sort button[aria-pressed="true"] { color: var(--text); border-color: var(--text); font-weight: 700; }
.gr-count { margin: 6px 0 8px; font-size: 13.5px; }
.gr-empty { margin-top: 12px; padding: 14px; border: 1px dashed var(--border); border-radius: 6px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.gr-empty b { color: var(--text); }
.gr-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gr-tbl { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; }
.gr-tbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.gr-tbl td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.gr-tbl .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gr-tbl td small { display: block; font-size: 11px; color: var(--muted); }
.gr-tbl td.up { color: var(--gA); font-weight: 800; }
.gr-tbl td.up small { color: var(--gA); font-weight: 600; }
.gr-bs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gr-b { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: var(--rule); color: var(--muted); white-space: nowrap; }
.gr-b.ok { background: var(--accent-soft); color: var(--accent); }
.gr-b.warn { background: var(--risk-bg, #fdecea); color: var(--risk); }
.gr-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 720px) { .growth { padding: 12px; } .gr-seg { width: 100%; } .gr-seg button { flex: 1; } }
@media print { .growth { display: none !important; } }

/* 머리줄 — 첫 화면(대시보드)으로 */
.homebtn { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; min-height: 34px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer; margin-right: 8px; white-space: nowrap; transition: border-color .15s ease, transform .12s ease; }
.homebtn:hover { border-color: var(--accent); color: var(--accent); }
.homebtn:active { transform: scale(.96); }
.growth.enter { animation: paneIn .28s ease both; }
@media print { .homebtn { display: none !important; } }

/* 급성장 신호 — 기간 타일 · 추이 그래프 · 작은 추이 */
.gr-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 12px; }
.gr-tile { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text); cursor: pointer; min-width: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.gr-tile span { font-size: 12px; color: var(--muted); font-weight: 600; }
.gr-tile b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gr-tile small { font-size: 11px; color: var(--muted); }
.gr-tile:hover { border-color: var(--accent); }
.gr-tile[aria-selected="true"] { border-color: var(--text); box-shadow: inset 0 -3px 0 var(--text); }
.gr-ind, .gr-dbox { position: relative; border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px 6px; margin-bottom: 10px; }
.gr-ind-h { font-size: 13px; margin-bottom: 4px; }
.gr-ind-h small { color: var(--muted); margin-left: 4px; }
.gr-svg { display: block; width: 100%; overflow: visible; }
.gr-svg .gr-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr-svg .gr-grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gr-svg .gr-band { fill: var(--accent-soft); opacity: .7; }
.gr-svg .gr-ax { fill: var(--muted); font-size: 10.5px; }
.gr-svg .gr-pl { fill: var(--text); font-size: 11px; font-weight: 700; }
.gr-svg .gr-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.gr-svg .gr-dot.cmp { fill: var(--panel); stroke: var(--accent); }
.gr-svg .gr-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.gr-tip { position: absolute; z-index: 5; pointer-events: none; padding: 6px 9px; font-size: 12px; line-height: 1.45; border-radius: 6px; min-width: 110px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.gr-tip small { color: var(--muted); }
.growth { position: relative; }
.gr-spark { width: 96px; height: 26px; display: block; }
.gr-spark path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.gr-spark circle { fill: var(--accent); }
.gr-spark circle.cmp { fill: var(--panel); stroke: var(--accent); stroke-width: 1.4; }
.gr-row { cursor: pointer; }
.gr-row:hover td, .gr-row.open td { background: var(--accent-soft); }
.gr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gr-detail td { padding: 4px 8px 12px; background: var(--accent-soft); }
.gr-dbox { background: var(--panel); margin: 0; }
.gr-vals { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); padding: 6px 0 4px; }
.gr-vals b { color: var(--text); }
.gr-nochart { font-size: 12.5px; color: var(--muted); padding: 10px 0; }
@media (max-width: 720px) { .gr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .homebtn { padding: 5px 10px; } }
@media (prefers-reduced-motion: reduce) { .growth.enter { animation: none; } }

/* 급성장 신호 — 조회 요청 */
.gr-req { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 420px; }
.gr-req small { font-size: 11.5px; color: var(--muted); text-align: right; }
.gr-reqmsg { margin: 0; font-size: 12px; color: var(--text); text-align: right; line-height: 1.5; }
.gr-reqmsg.err { color: var(--risk); }
.gr-reqmsg a { color: var(--accent); white-space: nowrap; }
.gr-reqmsg .mk-kept { color: var(--faint); white-space: nowrap; }
@media (max-width: 720px) { .gr-req { align-items: flex-start; max-width: none; } .gr-req small, .gr-reqmsg { text-align: left; } }

/* 급성장 신호 — 채용공고 급증 */
.gr-tile.jobs { border-style: dashed; }
.gr-tile.jobs[aria-selected="true"] { border-style: solid; }
.gr-posts a { display: block; color: var(--text); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.gr-posts a:hover { color: var(--accent); }
.gr-posts small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.gr-empty code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--rule); }
@media (min-width: 721px) and (max-width: 1000px) { .gr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 뉴스·웹 언급 관련성 검증 ── */
.rel-ev { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; font-size: 10.5px; font-weight: 600;
  color: var(--gA); background: var(--gA-bg); vertical-align: 1px; white-space: nowrap; }
.rel-none { font-size: 12.5px; color: var(--muted); padding: 8px 0; }
.rel-x { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 8px; font-size: 12px; }
.rel-x summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.rel-x ul { list-style: none; margin: 4px 0 6px; padding: 0; }
.rel-x li { padding: 4px 0; border-bottom: 1px solid var(--border); line-height: 1.45; overflow-wrap: anywhere; }
.rel-x li a { color: var(--muted); }
.rx-sec { margin-top: 8px; font-size: 11.5px; color: var(--faint); }
.rx-kind { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; color: var(--gD); background: var(--gD-bg); }
.rx-why { margin-left: 6px; font-size: 11px; color: var(--risk); }
.rx-why.maybe { color: var(--gC); }
.rx-date { margin-left: 6px; font-size: 10.5px; color: var(--faint); }

/* ── 화장품 제조업 명단 변동(대시보드) ── */
.mk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-t.new b { color: var(--accent); }
.mk-t.gone b { color: var(--risk); }
div.mk-t { cursor: default; }
div.mk-t:hover { border-color: var(--border); }
.mk-sec { margin: 16px 0 6px; font-size: 13.5px; font-weight: 800; }
.mk-sec i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 6px; }
.mk-chart { overflow: hidden; }
.mk-bars { display: block; max-width: 100%; height: auto; }
.mk-bars rect { fill: var(--accent); }
.mk-bars rect.cur { fill: var(--accent-soft); stroke: var(--accent); stroke-dasharray: 3 2; }
.mk-bars text { font-size: 10.5px; }
.mk-bars text.v { fill: var(--muted); }
.mk-bars text.m { fill: var(--faint); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; align-items: center; }
.mk-chip { font: inherit; font-size: 12.5px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; background: var(--panel); color: var(--muted); cursor: pointer; }
.mk-chip:hover { border-color: var(--accent); }
.mk-chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.mk-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.mk-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.mk-tbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mk-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.mk-tbl td small { display: block; font-size: 11.5px; color: var(--muted); }
.mk-tbl .mk-d { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.mk-tbl .mk-addr { font-size: 12px; color: var(--muted); max-width: 260px; }
.mk-bs { line-height: 1.9; }
.mk-b { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 9px; margin-right: 3px; white-space: nowrap; }
.mk-b.new { background: var(--accent-soft); color: var(--accent); }
.mk-b.ok { background: var(--gA-bg); color: var(--gA); }
.mk-b.warn { background: var(--gC-bg); color: var(--gC); }
.mk-b.gone { background: var(--risk-bg); color: var(--risk); }
.mk-b.dim { background: var(--gD-bg); color: var(--gD); }
.mk-gone { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 8px; font-size: 13px; }
.mk-gone summary { cursor: pointer; color: var(--muted); font-weight: 700; }
@media (max-width: 720px) {
  .mk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-tbl .mk-addr { display: none; }
  .mk-tbl td, .mk-tbl th { padding: 8px 4px; }
  .mk-tbl .mk-b { white-space: normal; }
}
@media (max-width: 720px) { .mk-tbl .nb-btn.sm { padding: 4px 7px; font-size: 11.5px; } .mk-tbl td:first-child { width: 42px; } }

/* ── 대시보드 탭 · 업체명 강조 · 신규 허가 업체 채용 ── */
.dash-tabs[hidden] { display: none !important; }
.dash-tabs .rtab { position: relative; padding: 10px 2px; }
.dash-tabs .rtab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--text); }
.mk-nm { display: inline-block; font-weight: 800; color: var(--text); background: var(--accent-soft); padding: 1px 7px; border-radius: 5px;
  box-shadow: inset 3px 0 0 var(--accent); line-height: 1.5; }
.mk-tbl td small { margin-top: 3px; }
.nh-tbl td.nh-jobs { min-width: 220px; }
.nh-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 3px; }
.nh-sum b { font-size: 13px; margin-right: 4px; color: var(--gA); }
.nh-post { display: block; font-size: 12.5px; color: var(--text); text-decoration: none; margin-top: 4px; overflow-wrap: anywhere; }
.nh-post:hover { color: var(--accent); text-decoration: underline; }
.nh-meta { display: block; font-size: 11px; color: var(--muted); }
.nh-wait, .nh-none { font-size: 12px; color: var(--faint); }
.nh-roles { color: var(--muted); font-size: 12px; margin-left: 6px; }
.nh-err { color: var(--risk); font-size: 12px; margin-left: 6px; }
@media (max-width: 720px) {
  .nh-tbl td.nh-jobs { min-width: 0; }
}
/* 타일이 6개가 되어 줄 수에 맞춰 늘고 줄게 */
.gr-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 720px) {
  .gr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 명단 변동·신규 허가 업체 채용 표 — 좁은 화면에서는 줄을 카드로: 허가일·업체·버튼 / 확인된 정보 / 채용공고 */
  .mk-tbl thead { display: none; }
  .mk-tbl tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .mk-tbl td { border: 0; padding: 0; }
  .mk-tbl td.mk-bs, .mk-tbl td.nh-jobs { grid-column: 1 / -1; }
  .mk-tbl td:last-child { grid-column: 3; grid-row: 1; }
  .mk-nm { white-space: normal; }
}

/* ── 조회 대기 화면: 진행 표시 + 화장품 제조업 최신 소식 ── */
.loadmsg { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ld-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: ldspin .8s linear infinite; flex: none; }
@keyframes ldspin { to { transform: rotate(360deg); } }
.trend { max-width: 720px; margin: 0 auto 24px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.tr-h { font-size: 13.5px; font-weight: 800; margin-bottom: 10px; }
.tr-h small { font-weight: 500; font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.tr-wait { font-size: 12.5px; color: var(--faint); }
.tr-card { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 14px 16px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; animation: trIn .35s ease both; }
.tr-card:hover { border-color: var(--accent); }
.tr-card:hover .tr-meta { color: var(--accent); }
@keyframes trIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tr-topic { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.tr-topic.sm { font-size: 10.5px; padding: 0 6px; margin-right: 6px; white-space: nowrap; }
.tr-title { font-size: 16px; line-height: 1.4; font-weight: 800; }
.tr-desc { font-size: 13px; line-height: 1.55; color: var(--muted); }
.tr-meta { font-size: 11.5px; color: var(--faint); margin-top: auto; }
.tr-nav { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.tr-btn { font: inherit; font-size: 18px; line-height: 1; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; }
.tr-btn:hover { color: var(--text); border-color: var(--text); }
.tr-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--border); cursor: pointer; }
.tr-dot.on { background: var(--accent); width: 18px; border-radius: 4px; }
.tr-list { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--border); }
.tr-list li { display: flex; align-items: baseline; gap: 4px; padding: 4px 0; font-size: 13px; }
.tr-list a { color: var(--text); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-list a:hover { color: var(--accent); text-decoration: underline; }
.tr-list small { color: var(--faint); font-size: 11px; white-space: nowrap; }
@media (max-width: 720px) { .trend { padding: 12px; } .tr-title { font-size: 15px; } .tr-h small { display: block; margin: 2px 0 0; } }
@media (prefers-reduced-motion: reduce) { .tr-card { animation: none; } .ld-spin { animation-duration: 2s; } }

.srcfoot { margin: 14px 0 4px; font-size: 11.5px; color: var(--faint); line-height: 1.6; }

/* ── 근처 업체: 위 좌우 이분할(지도 | 목록) · 아래 가로 전체 상세 ── */
.nb-body { display: block; }
.nb-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.nb-top > .nb-map { height: 100%; min-height: 520px; border-right: 1px solid var(--border); }
.nb-top > .nb-listcol { min-height: 520px; }
/* 상세 — 왼쪽 업체 정보, 오른쪽 버튼 묶음 */
.nb-row.open .nb-rowbtn { background: var(--accent-soft); }
.nb-listcol > .nb-sum { padding: 10px 16px 0; }
@media (max-width: 980px) {
}
@media (max-width: 720px) {
  .nb-top { grid-template-columns: 1fr; }
  .nb-top > .nb-map { min-height: 0; height: 360px; border-right: 0; border-bottom: 1px solid var(--border); }
  .nb-top > .nb-listcol { min-height: 0; }
    .nb-rows { max-height: 360px; overflow-y: auto; }
}
@media print {
  .nb-top { grid-template-columns: 1fr; }
  .nb-top > .nb-map { min-height: 0; height: 320px; }
}

/* ── 공장 면적 탭: 건물 로드뷰 ── */
.rv-stage { position: relative; height: 380px; border-radius: 8px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border); }
.rv-view { position: absolute; inset: 0; }
.rv-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; }
.rv-foot { margin-top: 8px; font-size: 12.5px; }
.rv-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
.rv-foot a:hover { text-decoration: underline; }
.rv-foot small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 720px) { .rv-stage { height: 280px; } }
@media print { .rv { display: none; } }

/* ── 저장 업체 ── */
.vd-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sv-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; min-height: 34px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer; white-space: nowrap; }
.sv-btn:hover { border-color: var(--gC); color: var(--gC); }
.sv-btn.on { background: var(--gC-bg); border-color: var(--gC); color: var(--gC); }
.mk-acts { white-space: nowrap; }
.mk-acts .nb-btn + .nb-btn { margin-left: 4px; }
.mk-sv.on { background: var(--gC-bg); border-color: var(--gC); color: var(--gC); }
#savedBtn b { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--gC-bg); color: var(--gC); font-size: 11.5px; }
.sv-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; border-radius: 8px;
  background: var(--gC-bg); color: var(--text); font-size: 13px; border: 1px solid var(--gC); }
.sv-banner span { flex: 1; min-width: 200px; }
.svl { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; }
.svl-head h2 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.svl-head h2 small { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.svl-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.svl-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.svl-main small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.svl-acts { display: flex; gap: 6px; flex: none; }
.vd-badge-mini { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; font-size: 12px; font-weight: 800; }
.sv-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 60;
  background: var(--text); color: var(--panel); padding: 10px 16px; border-radius: 8px; font-size: 13px; max-width: calc(100vw - 32px); transition: opacity .2s, transform .2s; }
.sv-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) {
  .svl { padding: 12px; }
  .svl-row { flex-direction: column; align-items: stretch; }
  .svl-acts { justify-content: flex-end; }
  .mk-acts { display: flex; flex-direction: column; gap: 4px; }
  .mk-acts .nb-btn + .nb-btn { margin-left: 0; }
  .vd-side { align-items: flex-start; }
}
@media print { .sv-btn, .sv-banner, .sv-toast { display: none !important; } }
.vd-side { order: 3; }
@media (max-width: 520px) { #savedBtn .sv-lbl { display: none; } }
/* 로드뷰 창 1:1 — 칸 너비만큼 키우되 한 화면에 다 보이도록 화면 높이의 85%를 넘지 않게 */
.rv-stage { height: auto; aspect-ratio: 1 / 1; width: min(100%, 85vh); margin: 0 auto; }
@media (max-width: 720px) { .rv-stage { height: auto; width: 100%; } }

/* 항목 신뢰도 점(●●●) — 종합판정 글자(A~D)와 모양을 달리한다 */
.gdot.rel { width: auto; height: auto; padding: 1px 5px; font-size: 10px; letter-spacing: .5px; line-height: 1.5; border-radius: 4px; font-weight: 400; }
.legend .gdot.rel { display: inline-block; vertical-align: 1px; margin-right: 3px; }
.legend .rel-none { font-style: normal; font-size: 10px; color: var(--faint); border: 1px dashed var(--border); border-radius: 4px; padding: 1px 5px; }
/* 신뢰도 표는 항목명 뒤에 — 안 믿기는 항목만 눈에 걸리게 */
.field .k .gdot.rel { margin-left: 2px; }
.vw-tbl .gdot.rel { display: inline-block; margin-right: 4px; }

/* ── 조회 진행 상황(로딩 화면) ── */
.ld-prog { max-width: 720px; margin: -8px auto 16px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.lp-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lp-step small { color: var(--muted); font-size: 11.5px; }
.lp-n { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 0 6px; border-radius: 8px; }
.lp-bar { height: 4px; border-radius: 2px; background: var(--border); margin: 8px 0; overflow: hidden; }
.lp-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.lp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; }
.lp-list li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.lp-list li > span { width: 14px; text-align: center; flex: none; }
.lp-list li.ok { color: var(--text); }
.lp-list li.ok > span { color: var(--gA); font-weight: 800; }
.lp-list li.fail > span { color: var(--faint); }
.lp-list li small { color: var(--faint); font-size: 10.5px; }
.lp-spin { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border); border-top-color: var(--accent); animation: ldspin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .lp-spin { animation-duration: 2s; } .lp-bar i { transition: none; } }
@media (max-width: 720px) { .ld-prog { margin: -8px 0 12px; } .lp-list { grid-template-columns: 1fr 1fr; } }

/* ── 리포트 접는 구역 ── */
.rfold-bar { display: flex; align-items: center; gap: 6px; margin: 18px 0 8px; }
.rfold-bar > span { flex: 1; font-size: 13px; font-weight: 800; color: var(--muted); }
details.rsec { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; margin: 0 0 10px; }
details.rsec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 8px; }
details.rsec > summary::-webkit-details-marker { display: none; }
details.rsec > summary:hover { background: var(--panel-2); }
details.rsec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rsec-t { font-size: 15px; font-weight: 800; }
.rsec-s { font-size: 12px; color: var(--muted); flex: 1; }
.rsec-c { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; margin-left: auto; flex: none; }
details.rsec[open] > summary .rsec-c { transform: rotate(-135deg); }
details.rsec[open] > summary { border-bottom: 1px solid var(--rule); border-radius: 8px 8px 0 0; }
details.rsec > :not(summary) { margin: 12px; }
details.rsec[open] > :not(summary) { animation: rsecIn .22s ease both; }
@keyframes rsecIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { details.rsec[open] > :not(summary) { animation: none; } .rsec-c { transition: none; } }
@media (max-width: 720px) { details.rsec > :not(summary) { margin: 8px; } details.rsec > summary { flex-wrap: wrap; } .rsec-s { flex-basis: calc(100% - 30px); order: 3; } }
@media print { .rfold-bar { display: none; } details.rsec { border: 0; } details.rsec > summary { padding: 4px 0; } .rsec-c { display: none; } }

/* ── 종합판정: 방문 때 꼭 확인할 것 3개 ── */
.vd-todo { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.vd-todo-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.vd-todo-all { font: inherit; font-size: 12px; margin-left: auto; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px 0; }
.vd-todo-all:hover { text-decoration: underline; }
.vd-todo ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; }
.vd-todo li span:last-child { overflow-wrap: anywhere; }
.vd-todo-cat { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; margin-right: 6px; border-radius: 8px; background: var(--gD-bg); color: var(--gD); vertical-align: 1px; }
.vd-todo-cat.high { background: var(--risk-bg); color: var(--risk); }
.vd-todo-cat.mid { background: var(--gC-bg); color: var(--gC); }
.svl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.svl-head h2 { margin: 0; flex: 1; }
.svl-io { display: flex; gap: 6px; }
.svl-hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }

/* ── 관련기사 탭 ── 제목만 보이고, 누르면 펼쳐져 요약·원문 읽기 */
.trp { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; }
.trp-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.trp-h b { font-size: 14.5px; font-weight: 800; }
.trp-h small { flex: 1; font-size: 11px; color: var(--muted); }
.trp-list { list-style: none; margin: 4px 0 0; padding: 0; }
.trp-list li { border-bottom: 1px solid var(--rule); }
.trp-t { font: inherit; width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 6px; background: none; border: 0;
  color: var(--text); text-align: left; cursor: pointer; }
.trp-t:hover { background: var(--panel-2); }
.trp-t b { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.trp-t:hover b { color: var(--accent); }
.trp-list li.on .trp-t b { color: var(--accent); }
.trp-m { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.trp-c { width: 7px; height: 7px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.trp-list li.on .trp-c { transform: rotate(-135deg); }
.trp-body { padding: 0 6px 14px; animation: rsecIn .22s ease both; }
.trp-d { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.trp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 720px) {
  .trp { padding: 12px; }
  .trp-t { flex-wrap: wrap; }
  .trp-t b { flex-basis: calc(100% - 20px); }
  .trp-m { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .trp-body { animation: none; } .trp-c { transition: none; } }

/* 근처 업체 — 상세 칸은 없앴다(업체명 옆 배지와 겹쳤다). 고른 줄에서 버튼만 편다 */
@media (max-width: 720px) {
  .nb-selacts { padding-left: 16px; }
  .nb-selacts > .nb-btn { flex: 1 1 auto; }
}

/* ── 종합판정(질적 기준) ── */
.vd-qwhy { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: normal; text-align: right; }
.vq-why { margin: 0 0 12px; padding: 9px 12px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); font-size: 13px; font-weight: 600; }
.vwhy h4 small { font-weight: 500; font-size: 11px; color: var(--muted); margin-left: 4px; }
.vq-list { list-style: none; margin: 4px 0 0; padding: 0; }
.vq-list li { display: grid; grid-template-columns: 22px 92px 1fr; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.vq { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; }
.vq.ok { background: var(--gA-bg); color: var(--gA); }
.vq.bad { background: var(--risk-bg); color: var(--risk); }
.vq.warn { background: var(--gC-bg); color: var(--gC); }
.vq-k { font-weight: 700; }
.vq-t { color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 720px) { .vd-qwhy { text-align: left; } .vq-list li { grid-template-columns: 22px 1fr; } .vq-t { grid-column: 2; } }
/* '불가'처럼 두 글자 판정도 들어가게 폭을 내용에 맞춘다 */
.vw-g { width: auto !important; min-width: 22px; padding: 0 5px; white-space: nowrap; }
.vd-badge b { min-width: 1.4em; white-space: nowrap; }
.vwhy .gdot.rel { display: inline-block; vertical-align: 1px; }

/* ── 제조소가 여럿일 때(1공장·2공장…) ── */
.vch-btn { font: inherit; text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; color: inherit; }
.vch-btn:hover b small { color: var(--accent); }
.vch-btn b small { color: var(--accent); font-weight: 600; }
.vd-sites { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.vd-sites-h { font-size: 12.5px; margin-bottom: 6px; }
.vd-sites-h small { color: var(--muted); font-size: 11px; margin-left: 4px; }
.vd-sites ol { list-style: none; margin: 0; padding: 0; }
.vd-sites li { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 12.5px; }
.vd-sites li:first-child { border-top: 0; }
.vd-sn { font-size: 11px; font-weight: 800; color: #0e7490; }
.vd-sa { overflow-wrap: anywhere; }
.vd-sa small { color: var(--muted); }
.vd-sx { display: flex; gap: 4px; }
.at-sites ul { list-style: none; margin: 0; padding: 0; }
.at-sites li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 170px auto; gap: 10px; align-items: center; padding: 9px 6px; border-top: 1px solid var(--rule); font-size: 12.5px; border-radius: 6px; }
.at-sites li:first-child { border-top: 0; }
.at-sites li.on { background: var(--accent-soft); }
.at-sn { font-size: 11px; font-weight: 800; color: #0e7490; }
.at-sa { overflow-wrap: anywhere; }
.at-sa small { color: var(--muted); }
.at-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 8px; background: var(--accent); color: #fff; vertical-align: 1px; }
.at-tag.rv { background: #7c3aed; }
.at-sv b { display: block; font-size: 13px; }
.at-sv small { display: block; font-size: 11px; color: var(--muted); }
.at-sv .at-err { color: var(--gC); }
.at-sx { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.at-sites-f { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); }
.at-sites-f b { color: var(--text); }
@media (max-width: 720px) {
  .vd-sites li { grid-template-columns: 1fr; gap: 4px; }
  .at-sites li { grid-template-columns: 1fr; gap: 4px; }
  .at-sx { justify-content: flex-start; }
}

/* ── 인력·사업장 구성(고용·산재보험) · 대기 배출시설 표 ── */
.wf .wf-in { padding: 12px 16px 14px; }
/* ① 요약 — 방문해서 만날 인원 규모를 맨 위에 못 박는다(하나의 수가 아니라 폭으로) */
.wf-lead { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: flex-start; margin: 0 0 14px; padding: 11px 14px;
  border-radius: 8px; background: var(--accent-soft); border: 1px solid var(--border); }
.wf-lead-m, .wf-lead-s { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wf-lead i { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.wf-lead i small { font-weight: 500; color: var(--faint); margin-left: 4px; }
.wf-lead b { font-size: 24px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wf-lead-s b { font-size: 17px; color: var(--muted); }
.wf-lead-m > span, .wf-lead-s > span { font-size: 11.5px; color: var(--muted); }
/* 추정 근무 열은 이 표의 결론 — 다른 열보다 세워 둔다 */
.wf-t .wf-est b { font-size: 14px; }
.wf-t .wf-sum td { border-top: 2px solid var(--border); font-weight: 700; background: var(--panel-2); }
.wf-t .n small { display: block; font-size: 10px; color: var(--gC); font-weight: 500; }
/* ④ 참고줄 — 월별 추이·공장등록 신고값 */
.wf-refs { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.wf-ref { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.wf-ref > i { flex: none; width: 86px; font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; }
.wf-ref > span { min-width: 0; flex: 1; }
.wf-ref em { display: block; font-style: normal; font-size: 11px; color: var(--faint); }
.wf-spark { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.wf-spark i { display: block; width: 5px; background: var(--accent); border-radius: 1px; opacity: .65; }
.wf-spark i:last-child { opacity: 1; }
@media (max-width: 620px) {
  .wf-lead b { font-size: 20px; }
  .wf-ref { flex-wrap: wrap; }
  .wf-ref > i { width: 100%; }
}
.xt-wrap { overflow-x: auto; }
.xt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.xt th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.xt th.n { text-align: right; }
.xt th small { display: block; font-weight: 400; font-size: 10.5px; }
.xt td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.45; }
.xt td small { display: block; color: var(--muted); font-size: 11px; }
.xt .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xt tr.main td { background: var(--accent-soft); }
.xtag { display: inline-block; white-space: nowrap; margin: 3px 4px 0 0; padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; line-height: 1.6; background: var(--rule); color: var(--muted); }
.xtag.t-fac { background: #dbeafe; color: #1e40af; }
.xtag.t-ok { background: #dcfce7; color: #166534; }
.xtag.t-oth { background: #fef3c7; color: #92400e; }
.xtag.t-bad { background: #fee2e2; color: #991b1b; }
.xtag.t-hq, .xtag.t-log { background: #ede9fe; color: #5b21b6; }
.xins { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 12.5px; line-height: 1.6; }
.xins li { margin: 3px 0; }
.xins li.good::marker { color: var(--gA, #16a34a); }
.xins li.warn::marker { color: var(--gC, #d97706); }
.xfoot { margin: 10px 0 0; font-size: 11px; color: var(--muted); line-height: 1.6; }
.at-air { margin-top: 14px; }
@media (max-width: 620px) {
  .xt .hide-m { display: none; }
  .xt td:first-child, .xt th:first-child { max-width: 150px; }
  .xt th, .xt td { padding: 7px 5px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .xtag.t-fac { background: #1e3a5f; color: #bfdbfe; }
  :root:not([data-theme="light"]) .xtag.t-ok { background: #14532d; color: #bbf7d0; }
  :root:not([data-theme="light"]) .xtag.t-oth { background: #78350f; color: #fde68a; }
  :root:not([data-theme="light"]) .xtag.t-bad { background: #7f1d1d; color: #fecaca; }
  :root:not([data-theme="light"]) .xtag.t-hq, :root:not([data-theme="light"]) .xtag.t-log { background: #3b2a63; color: #ddd6fe; }
}
:root[data-theme="dark"] .xtag.t-fac { background: #1e3a5f; color: #bfdbfe; }
:root[data-theme="dark"] .xtag.t-ok { background: #14532d; color: #bbf7d0; }
:root[data-theme="dark"] .xtag.t-oth { background: #78350f; color: #fde68a; }
:root[data-theme="dark"] .xtag.t-bad { background: #7f1d1d; color: #fecaca; }
:root[data-theme="dark"] .xtag.t-hq, :root[data-theme="dark"] .xtag.t-log { background: #3b2a63; color: #ddd6fe; }

/* 카카오 지도 원인 확인 — 왜 안 뜨는지 화면에서 바로 본다 */
.rv-msg { flex-direction: column; overflow: auto; }
.rv-msg > * { max-width: 520px; }
.rv-msg .rv-diag { margin: 10px auto 0; flex: none; }
.rv-diagout:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.6; text-align: left; }
.rv-diagout b { color: var(--text); font-weight: 700; word-break: break-all; }

/* 후보 주소 — '공장 면적' 탭의 본 주소 바로 아래에서 펼친다(별도 칸이 아니라 선정 근거) */
.at-cfold { margin-top: 8px; }
.at-cfold > summary b { color: var(--text); font-weight: 700; }
.at-cfold > summary small { font-weight: 500; }

/* 로드뷰 안 작은 지도 — 말뚝을 끌어 위치를 옮긴다(카카오맵 로드뷰와 같은 조작) */
.rv-mini {
  position: absolute; left: 10px; bottom: 10px; width: 200px; height: 150px; z-index: 3;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25); background: var(--panel-2);
  transition: width .18s ease, height .18s ease;
}
.rv-mini.big { width: min(380px, 70%); height: min(300px, 60%); }
.rv-mini-map { position: absolute; inset: 0; }
.rv-mini-btn {
  position: absolute; top: 5px; width: 24px; height: 24px; z-index: 4; padding: 0;
  border: 1px solid var(--border); border-radius: 5px; background: var(--panel); color: var(--text);
  font-size: 13px; line-height: 1; cursor: pointer; opacity: .9;
}
.rv-mini-btn:hover { opacity: 1; border-color: var(--accent); }
.rv-mini-ex { right: 5px; }
.rv-mini-home { right: 34px; }
.rv-mini-msg {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 4; display: none;
  padding: 5px 7px; border-radius: 5px; background: rgba(17, 17, 17, .86); color: #fff;
  font-size: 11px; line-height: 1.4; text-align: center;
}
.rv-mini-msg.on { display: block; }
/* 보고 있는 방향 — 말뚝 아래에 깔리는 부채꼴. 시점이 바뀌면 각도(--pan)만 돈다 */
.rv-cone {
  width: 72px; height: 72px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(37, 99, 235, .45), rgba(37, 99, 235, 0));
  clip-path: polygon(50% 50%, 22% 0%, 78% 0%);
  transform: rotate(var(--pan, 0deg));
}
@media (max-width: 720px) {
  .rv-mini { width: 150px; height: 112px; left: 8px; bottom: 8px; }
  .rv-mini.big { width: calc(100% - 16px); height: 62%; }
}
@media (prefers-reduced-motion: reduce) { .rv-mini { transition: none; } }
@media print { .rv-mini { display: none; } }

/* 대기배출 신고에서 읽어 낸 한 줄 — 숫자를 매번 환산하지 않게 */
.xguess { display: flex; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 6px;
  background: var(--accent-soft); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.6; }
.xguess i { flex: none; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--accent);
  padding: 1px 6px; border-radius: 4px; background: var(--panel); height: fit-content; }
.xguess b { font-weight: 700; color: var(--text); }

/* ── 근처 업체: 반경을 바꾼 첫 그림에서 핀이 가까운 순으로 뜨고, 기점에서 링이 한 번 퍼진다 ── */
@keyframes nbPop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); } to { transform: scale(1); opacity: 1; } }
@keyframes nbPulse { from { transform: scale(.4); opacity: .55; } to { transform: scale(5); opacity: 0; } }
.nb-pin.pop { animation: nbPop .42s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: var(--d, 0ms); }
.nb-origin-pin { position: relative; }
.nb-pulse { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--pin-reg); pointer-events: none; animation: nbPulse 1.1s ease-out 2 both; }
@media (prefers-reduced-motion: reduce) { .nb-pin.pop, .nb-pulse { animation: none; } .nb-pulse { display: none; } }
@media print { .nb-pin.pop, .nb-pulse { animation: none; } .nb-pulse { display: none; } }

/* ═══ v199 · 시각화·모션 업그레이드 ═══ */
/* 종합판정 반원 게이지 — 배지 안에 D~A 어디쯤인지 */
.vd-badge.vd-gz { position: relative; flex-direction: column; align-items: center; gap: 0; padding: 4px 8px 4px; border-width: 1px; min-width: 66px; }
.vd-gauge { width: 56px; height: auto; display: block; overflow: visible; }
.vd-gauge path { fill: none; stroke-width: 9; stroke-linecap: round; }
.vd-gauge .gz-track { stroke: currentColor; opacity: .16; }
.vd-gauge .gz-val { stroke: currentColor; stroke-dasharray: var(--gz-len); stroke-dashoffset: var(--gz-off); animation: gzDraw .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gzDraw { from { stroke-dashoffset: var(--gz-len); } }
.vd-badge.vd-gz b { margin-top: -20px; font-size: 17px; line-height: 1; }
.vd-badge.vd-gz span { margin-top: 3px; font-size: 9.5px; white-space: nowrap; }
.vd-toa { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--muted); white-space: normal; text-align: right; }
.vd-toa b { font-weight: 700; color: var(--text); }

/* 자료 신뢰도 구성 막대(조회 메타 줄) */
.relmix { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle; }
.rm-bar { display: inline-flex; width: 96px; height: 7px; border-radius: 4px; overflow: hidden; background: var(--rule); }
.rm-bar i { display: block; height: 100%; }
.rm-A { background: var(--gA); } .rm-B { background: var(--gB); } .rm-C { background: var(--gC); } .rm-D { background: var(--border); }
.rm-t { font-size: 11px; color: var(--faint); }
.rm-t b { color: var(--gA); font-weight: 700; }

/* 확인필요 진행 링(접힌 머리) */
.vc-ring { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; vertical-align: middle; font-size: 11.5px; color: var(--muted); }
.vc-ring svg { width: 20px; height: 20px; }
.vc-ring circle { fill: none; stroke-width: 3.2; }
.vc-ring .vr-tr { stroke: var(--rule); }
.vc-ring .vr-v { stroke: var(--gC); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 12px 12px; transition: stroke-dashoffset .4s ease; }
.vc-ring .vr-v.ok { stroke: var(--gA); }
.vc-ring b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.vc-ring em { font-style: normal; color: var(--gC); font-weight: 600; }
.vc-ring em.ok { color: var(--gA); }

/* 업체 연혁 띠 */
.btl .bt-wrap { padding: 6px 16px 4px; overflow-x: auto; }
.bt-svg { width: 100%; min-width: 520px; height: auto; display: block; }
.bt-axis { stroke: var(--text); stroke-width: 1.6; }
.bt-stem { stroke: var(--border); stroke-width: 1; }
.bt-yr { font-size: 10px; fill: var(--faint); font-family: var(--mono, ui-monospace, monospace); }
.bt-l { font-size: 11px; fill: var(--text); font-weight: 600; }
.bt-d { font-size: 9.5px; fill: var(--faint); }
.bt-dot { fill: var(--text); stroke: var(--panel); stroke-width: 2; animation: btPop .4s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i, 0) * 70ms); transform-box: fill-box; transform-origin: center; }
.bt-lic { fill: var(--gB); } .bt-site { fill: var(--gC); } .bt-air { fill: var(--gA); } .bt-recall { fill: var(--risk); } .bt-sale { fill: #7c5cc4; }
@keyframes btPop { from { transform: scale(0); } }
.bt-note { margin: 2px 16px 12px; font-size: 12.5px; color: var(--gC); }

/* 추정 근무 폭 막대 */
.wf-lead-bar { flex: 1 1 100%; display: grid; gap: 3px; }
.wf-bar { position: relative; height: 10px; border-radius: 5px; background: var(--panel); border: 1px solid var(--border); overflow: hidden; }
.wf-bar i { position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.wb-m { background: var(--gB); border-radius: 5px; transform-origin: left; animation: wbGrow .8s cubic-bezier(.2, .8, .2, 1) both; }
.wb-mr { background: color-mix(in srgb, var(--gB) 45%, transparent); }
.wb-a { background: color-mix(in srgb, var(--text) 30%, transparent); border-left: 2px solid var(--text); border-right: 2px solid var(--text); }
@keyframes wbGrow { from { transform: scaleX(0); } }
.wf-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.wf-key { display: flex; gap: 12px; font-size: 11px; color: var(--muted); }
.wf-key i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; position: static; }

/* 늦게 오는 자료 — 빛이 지나가는 빈 칸 */
.skel-v { display: inline-block; width: min(220px, 80%); height: 11px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, var(--rule) 0, var(--panel-2) 50%, var(--rule) 100%) var(--rule); background-size: 200% 100%; animation: skelSh 1.3s linear infinite; }
@keyframes skelSh { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.field.pending .k .ktxt { color: var(--muted); }

/* 재무 — 부채비율 기준선, 선 그리기 */
.sp-guide { stroke-width: 1; stroke-dasharray: 4 3; }
.sp-guide.warn { stroke: var(--gC); } .sp-guide.bad { stroke: var(--risk); }
.sp-gl { font-size: 8.5px; }
.sp-gl.warn { fill: var(--gC); } .sp-gl.bad { fill: var(--risk); }
.sp-over.warn { fill: var(--gC); } .sp-over.bad { fill: var(--risk); }
.sp-line { stroke-dasharray: 100; animation: spDraw 1s ease-out both; }
@keyframes spDraw { from { stroke-dashoffset: 100; } }

/* 접힌 구역 — 높이가 자연스럽게 늘어나며 열린다(지원 브라우저). 미지원이면 기존 페이드만 */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details.rsec::details-content { block-size: 0; overflow: hidden; transition: block-size .26s ease, content-visibility .26s allow-discrete; }
  details.rsec[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-gauge .gz-val, .bt-dot, .wb-m, .skel-v, .sp-line { animation: none; }
  .vc-ring .vr-v { transition: none; }
  details.rsec::details-content { transition: none; }
}

/* ── 인쇄 첫 장(시안 E) — 화면에서는 숨긴다 ── */
.psum { display: none; }
@media print {
  .gz-val, .bt-dot, .wb-m, .skel-v, .sp-line { animation: none !important; }
  details.rsec::details-content { block-size: auto !important; }
  .relmix .rm-t { color: #555; }
  .psum { display: flex; flex-direction: column; gap: 6mm; break-after: page; page-break-after: always; min-height: 262mm;
    color: #172030; background: #fff; font-size: 10.5pt !important; line-height: 1.5 !important; }
  .psum * { line-height: 1.45 !important; }
  .psum .ps-h { line-height: 1.25 !important; }
  .psum .ps-row3 b { line-height: 1.15 !important; }
  .psum .ps-lbl { font-size: 8pt !important; letter-spacing: .08em; color: #8a94a6; font-weight: 600; }
  .psum .ps-h { margin: 0; font-family: 'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', 'Batang', serif; font-size: 21pt !important; font-weight: 700; line-height: 1.25; text-wrap: balance; }
  .psum .ps-sub { margin: -2mm 0 0; font-size: 9.5pt !important; color: #4a5568; }
  .psum .ps-tl svg { width: 100%; height: auto; min-width: 0; }
  .psum .bt-l { font-size: 11px !important; } .psum .bt-d, .psum .bt-yr { font-size: 9.5px !important; }
  .psum .ps-v { font-size: 9px !important; } .psum .ps-x { font-size: 8.5px !important; }
  .psum .bt-axis { stroke: #172030; } .psum .bt-l { fill: #172030; } .psum .bt-d, .psum .bt-yr { fill: #8a94a6; } .psum .bt-dot { stroke: #fff; }
  .psum .ps-charts { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8mm; }
  .psum h4 { margin: 0 0 2mm; font-size: 9.5pt !important; font-weight: 700; }
  .psum h4 small { font-weight: 400; color: #8a94a6; }
  .psum .ps-charts svg { width: 100%; height: auto; max-height: 52mm; display: block; }
  .psum .ps-bar { fill: #c9d6f5; } .psum .ps-now { fill: #2f5bd3; } .psum .ps-ext { fill: none; stroke: #2f5bd3; stroke-dasharray: 3 2; }
  .psum .ps-v { font-size: 9px !important; fill: #172030; } .psum .ps-x { font-size: 8.5px !important; fill: #8a94a6; }
  .psum .ps-axis { stroke: #e2e7ef; } .psum .ps-line { fill: none; stroke: #12855b; stroke-width: 2.4; } .psum .ps-line.dark { stroke: #172030; }
  .psum .ps-guide { stroke: #b26b0a; stroke-dasharray: 4 3; } .psum .ps-guide.bad { stroke: #c2410c; }
  .psum .ps-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }
  .psum .ps-row3 > div { border-top: 1mm solid #172030; padding-top: 2.5mm; }
  .psum .ps-row3 h4 { font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-size: 11pt !important; }
  .psum .ps-row3 b { display: block; font-size: 20pt !important; font-weight: 700; line-height: 1.15; }
  .psum .ps-row3 b.warn { color: #b26b0a; } .psum .ps-row3 b.bad { color: #c2410c; }
  .psum .ps-row3 p { margin: 1mm 0 0; font-size: 9pt !important; color: #4a5568; }
  .psum .ps-rel { display: grid; grid-template-columns: auto 1fr auto; gap: 4mm; align-items: center; font-size: 8.5pt !important; color: #4a5568; }
  .psum .ps-relbar { display: flex; height: 3mm; border-radius: 1.5mm; overflow: hidden; }
  .psum .ps-relbar i { display: block; }
  .psum .rm-A { background: #12855b; } .psum .rm-B { background: #2f5bd3; } .psum .rm-C { background: #b26b0a; } .psum .rm-D { background: #d5dbe5; }
  .psum .ps-q { margin: 0; font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; font-size: 11.5pt !important; line-height: 1.55; border-left: 1.2mm solid #b26b0a; padding-left: 4mm; }
  .psum .ps-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 4mm; font-size: 7.5pt !important; color: #8a94a6; border-top: .3mm solid #e2e7ef; padding-top: 2mm; }
}

/* 피쉬본 연혁 */
.bt-fish .bt-bone { stroke: var(--border); stroke-width: 1.4; }
.bt-fish .bt-head { fill: var(--text); }
.bt-fish .bt-brk { stroke: var(--faint); stroke-width: 1.2; fill: none; }
.bt-fish .bt-gap { font-size: 9.5px; fill: var(--faint); font-weight: 600; }
.bt-fish .bt-l { font-size: 11px; fill: var(--text); font-weight: 600; }
.bt-fish .bt-d { font-size: 9.5px; fill: var(--faint); font-weight: 500; }
.bt-fish .bt-k-recall { fill: var(--risk); }
.bt-mix { fill: var(--muted); }
.btl .bt-wrap { scrollbar-width: thin; }
@media print { .bt-fish { min-width: 0 !important; } .psum .bt-fish .bt-bone { stroke: #cfd6e1; } .psum .bt-fish .bt-head { fill: #172030; } }
.bt-hint { display: none; text-align: center; font-size: 11px; color: var(--faint); margin: -4px 0 8px; }
@media (max-width: 720px) { .bt-hint { display: block; } }
@media print { .bt-hint { display: none !important; } }

/* 연혁 이슈 — 위험·주의·좋은 신호 */
.bt-risk { fill: var(--risk); } .bt-warn { fill: var(--gC); } .bt-good { fill: var(--gA); } .bt-cgmp { fill: var(--gA); } .bt-news { fill: #7c5cc4; }
.bt-fish .bt-bone.risk { stroke: var(--risk); stroke-width: 1.8; }
.bt-fish .bt-bone.warn { stroke: var(--gC); stroke-width: 1.6; }
.bt-fish .bt-k-risk { fill: var(--risk); } .bt-fish .bt-k-warn { fill: var(--gC); }
.bt-fish .bt-k-good, .bt-fish .bt-k-cgmp { fill: var(--gA); }
.bt-iss { color: var(--risk); font-weight: 700; }
.bt-issues { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px 24px; padding: 2px 16px 10px; }
.bt-issues h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; }
.bt-issues h4 small { font-weight: 500; color: var(--faint); margin-left: 4px; }
.bt-issues ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.bt-issues li { display: grid; grid-template-columns: 78px auto minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 12.5px; padding: 3px 0 3px 8px; border-left: 3px solid var(--border); }
.bt-issues li.risk { border-left-color: var(--risk); } .bt-issues li.warn { border-left-color: var(--gC); } .bt-issues li.good { border-left-color: var(--gA); }
.bt-issues li.risk b { color: var(--risk); } .bt-issues li.warn b { color: var(--gC); } .bt-issues li.good b { color: var(--gA); }
.bi-d { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bi-w { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 720px) { .bt-issues { grid-template-columns: 1fr; } .bt-issues li { grid-template-columns: 64px minmax(0, 1fr); } .bi-w { grid-column: 2; } }
@media print { .psum .bt-fish .bt-bone.risk { stroke: #c2410c; } .psum .bt-risk, .psum .bt-fish .bt-k-risk { fill: #c2410c; } }

/* 조회 근거 — 무엇을 근거로 이 업체를 골랐는지 */
.vd-basis { margin-top: 4px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.vd-basis > i { font-style: normal; font-weight: 700; color: var(--text); margin-right: 6px; font-size: 10.5px; letter-spacing: .04em; }
.vd-basis.nolic b { color: var(--risk); }
.vd-alt { font: inherit; font-size: 11.5px; margin-left: 4px; padding: 0 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--accent); cursor: pointer; }
.vd-alt:hover, .vd-alt:focus-visible { border-color: var(--accent); outline: none; }
@media print { .vd-alt { border: 0; padding: 0; color: inherit; } }
/* 후보 — 제조업 허가 없는 법인은 접어서 참고로 */
.cand-nolic { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; background: var(--risk-bg, #fde8df); color: var(--risk); }
.cand-nolic-box { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 6px; }
.cand-nolic-box > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 0; }
.cand-nolic-box > summary small { font-weight: 500; color: var(--faint); margin-left: 6px; }
.cand-nolic-box .cand { opacity: .85; }

/* 화물차 입차 예상 */
.tk-lead { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--text); }
.tk-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }

.tk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 0; border-top: 1px solid var(--border); }
.tk-row { display: grid; grid-template-columns: 7.4em 4.6em 6.2em 1fr auto; align-items: baseline; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--rule); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-row b { font-size: 14px; font-weight: 800; color: var(--text); }
.tk-row em { font-style: normal; font-weight: 700; color: var(--accent); }
.tk-row small { font-size: 12px; color: var(--muted); }
.tk-row small i { font-style: normal; }
/* 어려움 — 줄 전체를 옅은 노랑으로(밝은·어두운 배색 모두 반투명으로 얹는다) */
.tk-row.hard { background: rgba(250, 204, 21, .16); }
@media (max-width: 760px) {
  .tk-list { grid-template-columns: minmax(0, 1fr); }
  .tk-row { grid-template-columns: 6.4em 4.6em 5.8em 1fr auto; gap: 4px; font-size: 12.5px; }
  .tk-row b { font-size: 13px; }
  .tk-row small i { display: none; }     /* 좁은 화면은 '필요 마당' 글자를 빼고 넓이만 */
}

.tk-st { font-size: 13px; font-weight: 800; text-align: right; }
.tk-st.ok { color: var(--gA); }
.tk-st.tight { color: var(--gC); }
.tk-st.hard { color: var(--risk); }

/* 오피스형 건물 입주 — 건물 전체 면적 위의 경고 */
.at-unit { border-left: 3px solid var(--gC); background: var(--gC-bg); }
.at-unit-lead { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--text); }
.at-unit .at-tbl { min-width: 0; }
.at-unit .at-tbl td:nth-child(2) { white-space: nowrap; }
@media (max-width: 720px) { .at-unit .at-tbl th:nth-child(3), .at-unit .at-tbl td:nth-child(3) { display: none; } }

/* ── 부지 공간정보(sitegeo.js) ── */
.sg-wait p { margin: 0; }
.sg-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 8px; border-radius: 999px; white-space: nowrap; }
.sg-chip.ok { color: var(--gA); background: var(--gA-bg); }
.sg-chip.info { color: var(--gB); background: var(--gB-bg); }
.sg-chip.warn { color: var(--gC); background: var(--gC-bg); }
.sg-chip.bad { color: var(--risk); background: var(--risk-bg); }
.sg-chip.unk { color: var(--muted); background: var(--gD-bg); }
.sg-lead { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; line-height: 1.55; }
.sg-lead.ok { color: var(--gA); } .sg-lead.warn { color: var(--gC); } .sg-lead.bad { color: var(--risk); } .sg-lead.unk { color: var(--muted); }
.sg-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sg-f { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; min-width: 0; }
.sg-f > span { font-size: 11.5px; color: var(--muted); }
.sg-f > b { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.sg-f > small { font-size: 11.5px; color: var(--muted); }
.sg-f .sg-chip { align-self: flex-start; margin-top: 2px; }
.sg-warn { margin: 8px 0 0; font-size: 12.5px; color: var(--gC); }
.sg-uses { margin-top: 8px; font-size: 12px; color: var(--muted); }
.sg-uses summary { cursor: pointer; }
.sg-uses p { margin: 6px 0 0; line-height: 1.7; }
.sg-uses small { margin-left: 2px; }
.sg-dist { display: grid; gap: 6px; }
.sg-drow { display: grid; grid-template-columns: 9em minmax(0, 1fr) 4.6em auto; gap: 8px; align-items: center; font-size: 12.5px; }
.sg-drow.base b { font-weight: 800; }
.sg-dbar { height: 8px; border-radius: 4px; background: var(--rule); position: relative; overflow: hidden; }
.sg-dbar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--gA); }
.sg-dbar i.info { background: var(--gB); } .sg-dbar i.warn { background: var(--gC); } .sg-dbar i.bad { background: var(--risk); } .sg-dbar i.unk { background: var(--gD); }
.sg-dm { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); }
@media (max-width: 560px) { .sg-drow { grid-template-columns: 7em minmax(0, 1fr) auto; } .sg-dm { display: none; } }
.tk-extra { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.sg-asks { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text); }

/* ── 공장 면적 탭 카테고리 카드 ── 제목 · 한눈 배지 · 「!」(출처·설명) · 본문 */
.at-cat { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.at-cath { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-cath h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--text); }
.at-cath h3 small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.at-i { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--faint); background: none; color: var(--muted);
  font: 800 12px/1 system-ui, sans-serif; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.at-i:hover, .at-i[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.at-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.at-srcbox { padding: 9px 12px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; line-height: 1.6; color: var(--muted); }
.at-srcbox[hidden] { display: none; }
.at-srcbox b { display: block; font-size: 11.5px; color: var(--text); margin-bottom: 2px; }
.at-srcbox ul { margin: 0; padding-left: 16px; }
.at-catb { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.at-sub { margin: 4px 0 0; font-size: 13.5px; font-weight: 800; color: var(--text); }
.at-sub small { font-weight: 500; font-size: 12px; color: var(--muted); margin-left: 6px; }
.at-wait { margin: 0; font-size: 12.5px; color: var(--muted); }
.at-warns { margin: 0; padding: 8px 12px 8px 28px; border-radius: 6px; background: var(--gC-bg); color: var(--text); font-size: 12.5px; line-height: 1.6; }
.at-more { border-top: 1px solid var(--rule); padding-top: 10px; }
.at-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); }
.at-more > summary small { font-weight: 500; color: var(--muted); margin-left: 6px; }
.at-more[open] > summary { margin-bottom: 8px; }
.at-more .at-sub:first-of-type { margin-top: 0; }
.at-unit { border-left: 3px solid var(--gC); background: var(--gC-bg); padding: 10px 12px; border-radius: 6px; }
.at-unit .at-sub { margin-top: 0; }
.at-air .vd-chips { margin-top: 0; }
.sg-askbox { padding: 8px 12px; border-radius: 6px; border: 1px dashed var(--rule); }
.sg-askbox b { font-size: 12px; color: var(--muted); }
.sg-askbox .sg-asks { margin-top: 2px; }
/* 3D 규모 비교 */
.s3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.s3-stage { position: relative; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); overflow: hidden; }
.s3-cv { display: block; width: 100%; height: 480px; cursor: grab; touch-action: none; }
.s3-cv.drag { cursor: grabbing; }
@media (max-width: 560px) { .s3-cv { height: 380px; } }
.s3-ctl { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.s3-ctl .nb-btn[aria-pressed="true"] { background: var(--text); color: var(--panel); border-color: var(--text); }
.s3-hint { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--faint); pointer-events: none; }
.s3-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; min-width: 0; }
.s3-side .s3-head, .s3-side .s3-legend { grid-column: 1 / -1; }
@media (max-width: 760px) { .s3-side { grid-template-columns: minmax(0, 1fr); } }
.s3-head { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.s3-head em { font-style: normal; font-weight: 800; color: var(--accent); }
.s3-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.s3-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.s3-sw.m { background: var(--accent); }
.s3-sw.k { background: var(--muted); }
.s3-row { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; align-items: center; }
.s3-l { font-size: 12px; color: var(--muted); }
.s3-bars { display: grid; gap: 3px; }
.s3-b { position: relative; height: 20px; border-radius: 4px; background: var(--gD-bg); overflow: hidden; display: flex; align-items: center; }
.s3-b i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.s3-b.m i { background: var(--accent); opacity: .75; }
.s3-b.k i { background: var(--muted); opacity: .45; }
.s3-b em { position: relative; font-style: normal; font-size: 11.5px; font-weight: 700; padding-left: 7px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
/* 3D 칸 안에 들어간 옛 비교(브이월드 윤곽이 없을 때) — 카드 제목과 겹치는 머리줄·테두리는 걷는다 */
.at-cat-cmp .ac { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.at-cat-cmp .ac > h3 { display: none; }
/* 3D 칸 보기 전환 — 실제 모양(예측) / 육면체(부피) */
.s3-views { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--gD-bg); align-self: flex-start; }
.s3-views button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.s3-views button small { font-weight: 500; font-size: 11px; margin-left: 2px; }
.s3-views button[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.s3-views button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.s3-pred { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ac-vol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 8px 0 4px; padding: 8px 12px; border-radius: 6px; background: var(--accent-soft); }
.ac-vol > span { font-size: 12px; color: var(--muted); }
.ac-vol b { font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }
.ac-vol b.k { color: var(--text); font-weight: 600; }
.ac-vol em { font-style: normal; font-weight: 800; color: var(--text); }
.ac-vol small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
/* 리포트 머리 — 왼쪽 고정 칸(게이지·판정 문구)과 오른쪽(업체명·근거·연락처)을 겹치지 않게 */
.vd-head { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: start; }
.vd-left { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.vd-left .vd-verd { order: initial; white-space: normal; font-size: 12.5px; line-height: 1.35; text-align: center; }
.vd-left .vd-qwhy, .vd-left .vd-toa { text-align: center; }
.vd-head .vd-title { order: initial; flex: none; }
.vd-h2row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-h2row h2 { margin: 0; }
@media (max-width: 720px) { .vd-head { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; } .vd-left .vd-verd { font-size: 11.5px; } }
/* 판정 기준 설명 — 「!」 */
.vd-foot-wrap { display: flex; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; gap: 6px; }
.vd-foot-wrap .at-i { margin-left: auto; }
.vd-foot-wrap .vd-foot { flex-basis: 100%; margin-top: 0; }
.vd-foot[hidden] { display: none; }
/* 인력 · 사업장 구성 — 근거 자료는 접어 둔다 */
.wf-more { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.wf-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text); }
.wf-more > summary small { font-weight: 500; color: var(--muted); margin-left: 4px; }
.wf-more[open] > summary { margin-bottom: 8px; }
/* 리포트 버튼(경로·인쇄·공유)을 탭 줄 오른쪽에 — 작게 */
.rtabs .actions.in-tabs { margin: 0 0 0 auto; padding: 4px 0; gap: 6px; flex-wrap: nowrap; flex: none; align-self: center; }
.rtabs .actions.in-tabs .act { font-size: 12px; padding: 5px 10px; white-space: nowrap; }
@media print { .rtabs .actions.in-tabs { display: none; } }
.vd-left > .vd-badge { order: -1; }