/*
  compare_modal.css — 개념 비교표 해설 모달 (자족 컴포넌트 · 선설계 2026-06-20)
  ▣ 자족 설계: 스크림은 자체 .cmp-scrim (hub_ui .modal-scrim 비의존) — hub_ui 미링크 페이지(qid·study_drill)에서도 뜬다.
     - 토큰은 폴백 체인 var(--hubui, var(--qid, 리터럴)) 을 유지한다. ★단 「_tokens.css 미로드 페이지」라는
       종전 서술은 낡았다 — 2026-09-13 실측으로 소비 4페이지(qid·study_drill·subtopic·tables) 전부
       `_tokens.css` 를 `<link>` 한다. 폴백은 이제 «보험»이지 «생명선»이 아니다(그래서 값을 고칠 때는
       폴백이 아니라 토큰 쪽을 본다). hub_ui 를 링크하는 것은 subtopic·tables 둘뿐이라 스크림 자족은 유효.
  ▣ 2026-09-13 design-pass 9건째 — 표 격자를 §1-b 표면 3층으로 옮겼다: 칸마다 두르던 테두리를 걷고
     «행 헤어라인 + 비교 열 사이 세로 헤어라인» 둘만 남겼다. 머리행·라벨열의 배경칠과 줄무늬(zebra)도
     제거했고, 의미행(혼동포인트·판례)은 배경칠 대신 «좌측 3px 바(09-21 폐기 → 라벨색+아이콘) + 색 라벨»로 말한다.
     ★되살리지 말 것 — 색면으로 돌아가면 같은 화면에 색면이 다섯 겹이 된다.
  데이터: {form?,title,columns,rows:[{label,cells}],source,grounding?,precedent_layer?} (NATIVE 하이브리드 + COMMON)
*/

/* ── 스크림(자체 소유) ── */
.cmp-scrim{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--scrim, rgba(16,24,40,.45));-webkit-tap-highlight-color:transparent;
}

/* ── 카드 ── */
.cmp-modal{
  width:100%;max-width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--canvas, var(--sheet, #fff));color:var(--ink, #1d1d1f);
  border:1px solid var(--line, var(--grid, #e5e5df));border-radius:var(--r-lg, 16px);
  box-shadow:var(--shadow-2, 0 16px 48px rgba(16,24,40,.22));
}
.cmp-head{
  display:flex;align-items:flex-start;gap:var(--sp-3, 12px);padding:var(--sp-3, 12px) var(--card-pad, 20px);
  border-bottom:var(--hair, 1px) solid var(--line, var(--grid, #e5e5df));
  background:transparent;
}
.cmp-head h2{font-size:var(--fs-h3, 1.0625rem);font-weight:var(--fw-bold, 700);line-height:1.3;margin:0}
.cmp-head .cmp-sub{display:block;margin-top:4px;font-size:var(--fs-caption, .85rem);
  color:var(--ink-muted, var(--sub, #6b6b66));font-weight:var(--fw-reg, 400)}
.cmp-x{
  margin-left:auto;flex:none;width:var(--row-h, 44px);height:var(--row-h, 44px);border:none;border-radius:var(--r-sm, 8px);
  background:transparent;color:var(--ink-faint, var(--faint, #bcbcb2));font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.cmp-x:hover{background:var(--surface, var(--paper, #f4f4ee));color:var(--ink, #1d1d1f)}
.cmp-x:focus-visible{outline:none;box-shadow:var(--focus-ring, 0 0 0 3px rgba(15,158,107,.45))}

.cmp-body{padding:var(--card-pad, 20px);overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ── 표 1개(= 한 매트릭스) ── */
.cmp-table{margin:0 0 26px}
.cmp-table:last-child{margin-bottom:0}
.cmp-table-title{font-size:var(--fs-body, .95rem);font-weight:var(--fw-semi, 600);margin:0 0 6px;color:var(--ink, #1d1d1f)}
.cmp-table-title .cmp-form-tag{
  margin-left:8px;font-size:var(--fs-meta, 12px);font-weight:var(--fw-med, 500);
  color:var(--ink-faint, var(--faint, #bcbcb2));
  border:1px solid var(--line, var(--grid, #e5e5df));border-radius:var(--r-pill, 9999px);padding:1px 8px;vertical-align:middle;
}
.cmp-intro{font-size:var(--fs-caption, .85rem);line-height:1.6;color:var(--ink-muted, var(--sub, #6b6b66));margin:0 0 10px}
/* 한 줄 정리 — 매트릭스 하단 핵심 요약(인출 포인트) */
/* 선지 비교표 「근거 조문 행은 출제 당시 기준」 한 줄(2026-08-29) — 근거 행과 같은 급(nano·faint)으로 표 바로 아래 */
.cmp-basis-note{font-size:var(--fs-meta, 12px);line-height:1.5;color:var(--ink-faint, var(--faint, #bcbcb2));margin:6px 0 0}
.cmp-summary{
  margin:10px 0 0;padding:9px 12px;font-size:var(--fs-caption, .85rem);line-height:1.55;
  color:var(--ink, #1d1d1f);background:var(--surface-sunken, var(--sheet-2, #f4f4ee));/* 2026-06-22 초록(--color-correct-bg=정답 의미색)→중립 · 2026-06-27 --sheet-2 폴백 추가(qid처럼 --surface-sunken 미정의 다크페이지서 밝은 리터럴 직행 → 저대비 흰박스 버그 수정) */
border-radius:var(--r-sm, 8px);font-weight:var(--fw-med, 500);
}
/* 한 줄 정리 라벨 배지 — 요약 본문(해설)과 시각 분리(2026-07-07 사용자) · 브랜드 그린 필 */
.cmp-summary .cmp-sum-tag{
  display:inline-block;margin-right:8px;padding:1px 9px;vertical-align:middle;
  font-size:var(--fs-meta, 12px);font-weight:var(--fw-bold, 700);letter-spacing:.02em;line-height:1.5;
  color:var(--on-brand-deep, #fff);background:var(--brand-deep, #1f5c43);border-radius:var(--r-pill, 9999px);
}

.cmp-grid{width:100%;border-collapse:collapse;font-size:var(--fs-caption, .85rem);table-layout:fixed;--cmp-label-w:7.5em}
.cmp-grid th,.cmp-grid td{
  border:0;border-bottom:var(--hair, 1px) solid var(--line, var(--grid, #e5e5df));
  padding:var(--sp-3, 12px) var(--sp-4, 16px);text-align:left;vertical-align:top;
  line-height:1.55;word-break:break-word;
}
/* 비교 열 사이만 세로 헤어라인 — 대조가 이 표의 일이라 열 경계는 남긴다(라벨열 다음부터) */
.cmp-grid th+th,.cmp-grid td+td,.cmp-grid th[scope="row"]+td{border-left:var(--hair, 1px) solid var(--line, var(--grid, #e5e5df))}
.cmp-grid tbody tr:last-child th,.cmp-grid tbody tr:last-child td{border-bottom:0}
/* 머리행 = 배경칠이 아니라 굵기 + 아래 2px 선 */
.cmp-grid thead th{background:transparent;font-weight:var(--fw-semi, 600);color:var(--ink-muted, var(--sub, #6b6b66));
  border-bottom:2px solid var(--line-strong, var(--grid-strong, #c7c7bd))}
/* 행라벨(첫 열) — 전 표 균일 폭(--cmp-label-w) · 짧은 라벨 여백 최소·긴 라벨 줄바꿈(텍스트 대비 비대 방지) */
.cmp-grid th[scope="row"]{
  background:transparent;font-weight:var(--fw-med, 500);
  color:var(--ink-muted, var(--sub, #6b6b66));width:var(--cmp-label-w);white-space:normal;word-break:keep-all;
  overflow-wrap:normal;padding-right:var(--sp-2, 8px);
}
/* ★table-layout:fixed 는 열 너비를 첫 행(thead)에서 가져옴 → 본문 th[scope=row] 폭만으론 첫 열이 균등분배(비대)됨.
   thead 첫 칸(빈 모서리)에 라벨 폭을 박아 첫 열을 --cmp-label-w 로 확정(box 표는 auto 라 제외) */
.cmp-grid:not(.cmp-box) thead th:first-child{width:var(--cmp-label-w)}
/* (구 zebra `tbody tr:nth-child(even) td{background}` 삭제 2026-09-13 — 행 구분은 헤어라인이 한다.
    줄무늬까지 두면 같은 정보를 두 표식이 말한다.) */

/* 혼동포인트 행 강조(발주 §2-1) — ★배경칠 폐기(2026-09-13). 좌측 3px 바 + 색 라벨로 말한다.
   inset box-shadow 를 쓰는 이유 = border-left 는 열 폭(table-layout:fixed)을 먹어 라벨열이 밀린다. */
.cmp-grid tr.cmp-hot th[scope="row"]{color:var(--color-warn, var(--amber-ink, #7d5410));font-weight:var(--fw-bold, 700);
  box-shadow:inset 3px 0 0 var(--color-warn, var(--amber-ink, #7d5410))}
.cmp-grid tr.cmp-hot td{color:var(--ink, #1d1d1f)}

/* ⚖ 판례 법리 행(precedent_layer) — 여기의 --color-brand-cite 는 «조문·판례 근거»라 토큰 용도와 맞다(유지) */
.cmp-grid tr.cmp-prec th[scope="row"]{color:var(--color-brand-cite, var(--indigo, #2d3a6b));font-weight:var(--fw-semi, 600);
  box-shadow:inset 3px 0 0 var(--color-brand-cite, var(--indigo, #2d3a6b))}
.cmp-grid tr.cmp-prec td{color:var(--ink, #1d1d1f)}

/* 근거 조문 행 — 약한 음영 각주 */
.cmp-grid tr.cmp-ground th[scope="row"],
.cmp-grid tr.cmp-ground td{font-size:var(--fs-meta, 12px);color:var(--ink-faint, var(--faint, #bcbcb2))}
/* ⚖ 판례 법리 행의 사건번호 꼬리(폴백·법리 평문 동반 시) */
.cmp-grid .cmp-case{display:block;margin-top:3px;font-size:var(--fs-meta, 12px);
  color:var(--ink-faint, var(--faint, #bcbcb2));font-family:var(--font-mono, "IBM Plex Mono", monospace)}
/* ⚖ 판례번호 칩(클릭 → 판례 해설 모달) — 표 안엔 번호만, 법리는 모달로 */
.cmp-grid .cmp-cidchip{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;
  font-size:var(--fs-meta, 12px);font-family:var(--font-mono, "IBM Plex Mono", monospace);
  color:var(--color-brand-cite, var(--indigo, #2d3a6b));background:var(--surface, var(--paper, #fafaf8));
  border:1px solid var(--color-brand-cite, var(--indigo, #2d3a6b));border-radius:var(--r-pill, 999px);
  cursor:pointer;line-height:1.5}
.cmp-grid .cmp-cidchip:hover{background:var(--color-brand-cite, var(--indigo, #2d3a6b));color:var(--on-brand-deep, #fff)}
.cmp-grid .cmp-cidchip:focus-visible{outline:none;box-shadow:var(--focus-ring, 0 0 0 2px rgba(45,58,107,.45))}
/* '외 n건' 인라인 펼침(2026-07-16) — 사건번호 다수 셀 폭 폭발 봉합 */
.cmp-grid .cmp-cid-more{display:inline-block;margin:2px 0;padding:2px 8px;font-size:var(--fs-meta, 12px);
  color:var(--ink-muted, #666);background:none;border:0;text-decoration:underline;cursor:pointer;line-height:1.5}
.cmp-grid .cmp-cid-more:hover{color:var(--color-brand-cite, var(--indigo, #2d3a6b))}
/* ★인쇄=무손실 계약(tables_app preparePrint 이 cmp-detail 을 펼치는 것과 동형) — 접힌 사건번호가 PDF 에서 탈락하면 안 됨 */
@media print{ .cmp-grid .cmp-cidrest[hidden]{display:inline!important} .cmp-grid .cmp-cid-more{display:none} }
/* 판례 해설 모달 본문(holding/ratio 절) */
.cmp-prec-court{margin-left:8px;font-size:var(--fs-meta, 12px);font-weight:var(--fw-med, 500);color:var(--ink-faint, var(--faint, #bcbcb2))}
.cmp-prec-sec{margin:0 0 12px}
.cmp-prec-sec .cmp-prec-lbl{display:block;font-size:var(--fs-meta, 12px);font-weight:var(--fw-bold, 700);
  color:var(--color-brand-cite, var(--indigo, #2d3a6b));margin:0 0 3px}
.cmp-prec-sec p{margin:0;line-height:1.7;color:var(--ink, #1d1d1f)}

/* crux 강조(단일 범례=핵심 변별 어구) — 배경칠 폐기, 글자색 네온 형광(study_drill 함정어절과 동일 idiom · 색 SoT=_tokens.css --hl-trap-ink/--hl-trap-glow 다크/라이트 토큰 적응 · 라이트=딥시안 가독·다크=네온+글로우 · 리터럴 하드코딩 금지) */
.cmp-em{font-weight:var(--fw-bold, 700);color:var(--hl-trap-ink);text-shadow:var(--hl-trap-glow)}
/* 공장 셀 **볼드** 마커(mdBold) — 셀이 이미 bold 인 맥락에서 묻히는 plain <strong> 대신, 형광(.cmp-em 오렌지)보다 더 밝은 핑크 잉크로 도드라지게(색 SoT=_tokens.css --cmp-b-ink/--cmp-b-glow). 셀 색 상속을 직접 덮으므로 cmp-hot/prec 행에서도 유지 */
.cmp-grid .cmp-b,.cmp-b{font-weight:var(--fw-bold, 700);color:var(--cmp-b-ink, #DB2777);text-shadow:var(--cmp-b-glow, none)}

/* 판례 분해 verbatim 문단(압축 금지 · 확장 블록) */
.cmp-verbatim td{white-space:pre-line;line-height:1.7;color:var(--ink, #1d1d1f)}

/* 판례 요지 lead(압축본 = intro 쟁점 + one_line 법리결론을 앞세움) · verbatim 원문은 접이식 강등 */
.cmp-lead-intro{font-size:var(--fs-body, 1rem);color:var(--ink, #1d1d1f);font-weight:var(--fw-med, 500);margin:0 0 6px}
.cmp-summary.cmp-lead{margin:0 0 10px}
.cmp-detail{margin:0;border:1px solid var(--line, var(--grid, #e5e5df));border-radius:var(--r-sm, 8px);overflow:hidden}
.cmp-detail > summary{cursor:pointer;display:flex;align-items:center;min-height:var(--row-h, 44px);box-sizing:border-box;padding:var(--sp-2, 8px) var(--sp-4, 16px);font-size:var(--fs-caption, .85rem);font-weight:var(--fw-med, 500);
  color:var(--ink-muted, var(--sub, #6b6b66));background:var(--surface-sunken, var(--sheet-2, #f4f4ee));list-style:none;user-select:none}
.cmp-detail > summary::-webkit-details-marker{display:none}
/* ★2026-09-13 정정 — summary 가 «이제 flex 다»(터치 44 를 위해 min-height + align-items:center).
   그래서 ::before 는 더 이상 인라인 흐름에 놓이지 않고 정렬은 align-items 가 맡는다.
   `vertical-align:-.125em` 은 무해해서 남겨 두지만 «필수»가 아니다 — 구 주석의 「부모가 flex 가
   아니라」는 전제는 폐기(그대로 읽고 flex 를 걷으면 44 가 함께 사라진다). 정본 = docs/reference/comparison_table_surface.md */
.cmp-detail > summary::before{content:"";display:inline-block;width:1em;height:1em;flex:0 0 auto;background:currentColor;vertical-align:-.125em;-webkit-mask:url(./icons/angle-small-right.svg?v=20260717) center/contain no-repeat;mask:url(./icons/angle-small-right.svg?v=20260717) center/contain no-repeat;margin-right:6px;color:var(--ink-faint, var(--faint, #bcbcb2));font-size:.8em;transition:transform var(--dp-dur, .22s) var(--dp-ease, cubic-bezier(.32,.72,0,1))}
.cmp-detail[open] > summary::before{transform:rotate(90deg)}
.cmp-detail > summary:hover{color:var(--brand-deep, var(--o-ink, #1f5c43))}
.cmp-detail .cmp-grid{border-top:1px solid var(--line, var(--grid, #e5e5df))}
/* 인쇄/PDF: 접힌 원문도 펼쳐서 출력(오프라인 학습 무손실) */
@media print{ .cmp-detail > summary{display:none} .cmp-detail{border:none} .cmp-detail .cmp-grid{border-top:none} }
/* ★인쇄 전용 압축 — 화면 여백(12/16)을 종이에 그대로 태우면 카탈로그 PDF 가 1.5배로 늘어난다.
   화면 축 토큰으로 «수렴시키지 말 것»(종이는 다른 매체다). */
@media print{ .cmp-grid th,.cmp-grid td{padding:5px 8px;line-height:1.45} .cmp-head{padding:8px 12px} .cmp-body{padding:0} }

/* 신뢰도(.cmp-src) 렌더 삭제 — 2026-07-07 사용자. 출처 원문 블록(.cmp-src-block/-h/-body)은 별개(유지). */
.cmp-empty{padding:14px 4px;font-size:var(--fs-caption, .85rem);color:var(--ink-muted, var(--sub, #6b6b66));text-align:center}

/* A→B 백링크(표 모음 인쇄·엑셀로 이어주기) */
.cmp-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line, var(--grid, #e5e5df));text-align:right}
.cmp-tolist{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption, .85rem);font-weight:var(--fw-med, 500);
  color:var(--brand-deep, var(--o-ink, #1f5c43));text-decoration:none;position:relative}
/* 누름 영역 44 내장(2026-09-14 합성 촬영 적발 · 실측 24) — 시각 크기 불변 · 모달 하단 한 줄이라 이웃 겹침 없음 */
.cmp-tolist::after{content:"";position:absolute;inset:calc((100% - var(--row-h, 44px)) / 2) 0}
.cmp-tolist:hover{text-decoration:underline;text-underline-offset:2px}

/* ── 단색 아이콘(currentColor 상속) ── */
.cmp-ico{width:1em;height:1em;flex:none;vertical-align:-0.13em;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}

/* ── 표준 진입칩 ── */
.cmp-trigger{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:var(--fs-caption, .85rem);font-weight:var(--fw-med, 500);
  color:var(--brand-deep, var(--o-ink, #1f5c43));background:var(--surface-sunken, var(--sheet-2, #f4f4ee));
  border:var(--hair, 1px) solid var(--line-strong, var(--grid-strong, #c7c7bd));border-radius:var(--r-pill, 9999px);
  min-height:var(--row-h, 44px);box-sizing:border-box;padding:.5em .9em;cursor:pointer;
}
.cmp-trigger:hover{filter:brightness(1.03);border-color:var(--line-strong, var(--grid-strong, #c7c7bd))}
.cmp-trigger:focus-visible{outline:none;box-shadow:var(--focus-ring, 0 0 0 3px rgba(15,158,107,.45))}
.cmp-trigger .cmp-trigger-n{color:var(--ink-faint, var(--faint, #bcbcb2));font-weight:var(--fw-reg, 400)}

/* ── 원문 셀(cells_source/cells_ref) — 압축셀 클릭 시 원문/조문 모달 ── */
.cmp-grid td.cmp-rich{cursor:pointer}
.cmp-rich .cmp-richi{border-bottom:var(--hair, 1px) solid var(--line-strong, var(--grid-strong, #c7c7bd))}
.cmp-grid td.cmp-rich:hover{background:var(--surface-sunken, var(--sheet-2, #f4f4ee))}
.cmp-grid td.cmp-rich:hover .cmp-richi{border-bottom-color:var(--brand-deep, var(--o-ink, #1f5c43))}
.cmp-grid td.cmp-rich:focus-visible{outline:none;box-shadow:var(--focus-ring, 0 0 0 2px rgba(15,158,107,.45)) inset}
.cmp-grid td.cmp-rich[data-partial="1"] .cmp-richi{border-bottom-color:var(--line, var(--grid, #e5e5df))}/* 발췌(별표 미수록) = 더 «흐린» 밑줄. 구 dashed 는 점선 금지 위반이었다(2026-09-13) */
@media print{ .cmp-rich .cmp-richi{border-bottom:none} }
/* 개정 전후 헤더 '원문' 배지(셀별 링크 대신 단일화) */
.cmp-srcbadge{display:inline-block;margin-left:6px;padding:1px 7px;font-size:var(--fs-meta, 12px);font-weight:var(--fw-med, 500);
  color:var(--brand-deep, var(--o-ink, #1f5c43));background:var(--canvas, #fff);border:1px solid var(--line-strong, var(--grid-strong, #c7c7bd));
  border-radius:var(--r-pill, 9999px);cursor:pointer;vertical-align:middle;white-space:nowrap}
.cmp-srcbadge:hover{border-color:var(--brand-deep, var(--o-ink, #1f5c43));background:var(--surface-sunken, var(--sheet-2, #f4f4ee))}
.cmp-srcbadge:focus-visible{outline:none;box-shadow:var(--focus-ring, 0 0 0 2px rgba(15,158,107,.45))}
@media print{ .cmp-srcbadge{display:none} }

/* ── 원문 보기 모달 본문 ── */
.cmp-src-block{margin:0 0 16px}
.cmp-src-block + .cmp-src-block{padding-top:14px;border-top:1px solid var(--line, var(--grid, #e5e5df))}
.cmp-src-h{font-size:var(--fs-caption, .85rem);font-weight:var(--fw-bold, 700);color:var(--ink-muted, var(--sub, #6b6b66));margin:0 0 7px}
.cmp-ft-key{font-family:var(--font-mono, monospace);font-size:var(--fs-meta, 12px);font-weight:var(--fw-reg, 400);color:var(--ink-faint, var(--faint, #bcbcb2))}
.cmp-src-body{font-size:var(--fs-body, .95rem);line-height:1.7;color:var(--ink, #1d1d1f);word-break:keep-all}
.cmp-ft-body{font-size:var(--fs-caption, .85rem);line-height:1.7;color:var(--ink, #1d1d1f);word-break:keep-all;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 별표 box-art → HTML 표(원문 모달) — 내용 맞춤 폭(고정폭 분배 해제)·제목 캡션 */
.cmp-grid.cmp-box{table-layout:auto}
.cmp-grid.cmp-box caption{caption-side:top;text-align:left;font-weight:var(--fw-bold, 700);
  color:var(--ink-muted, var(--sub, #6b6b66));font-size:var(--fs-caption, .85rem);margin:0 0 7px;line-height:1.5}
.cmp-grid.cmp-box th,.cmp-grid.cmp-box td{white-space:normal;word-break:keep-all}
/* 법령 본문 구조 — 항 ①②③ / 호 1.2.3. / 목 가.나. / <개정> 주석 */
.lawbody{word-break:keep-all}
.lawp{display:flex;gap:.5em;align-items:flex-start;margin:0 0 .6em}
.lawp:last-child{margin-bottom:0}
.lawpc{flex:1;min-width:0}
.lawm{flex:none;font-weight:var(--fw-bold, 700);color:var(--ink-muted, var(--sub, #6b6b66))}
.lawhang{color:var(--brand-deep, var(--o-ink, #1f5c43));font-size:1.05em;line-height:1.5}
.lawln{margin:0}
.lawho{display:flex;gap:.4em;align-items:baseline;margin-top:.35em;padding-left:.2em}
.lawho > span:last-child{flex:1;min-width:0}
.lawmok{display:block;padding-left:1.1em;margin-top:.25em}
.lawmok .lawm{font-weight:var(--fw-med, 500)}
.lawann{margin-left:.3em;padding:0 .4em;font-size:.82em;font-weight:var(--fw-reg, 400);color:var(--ink-faint, var(--faint, #bcbcb2));
  background:var(--surface-sunken, var(--sheet-2, #f1f1ea));border-radius:var(--r-pill, 9999px);white-space:nowrap}
.cmp-ft-pre{font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--fs-meta, 12px);line-height:1.5;color:var(--ink, #1d1d1f);
  background:var(--surface-sunken, var(--sheet-2, #f4f4ee));border:1px solid var(--line, #e5e5df);border-radius:var(--r-sm, 8px);
  padding:12px;overflow-x:auto;white-space:pre;margin:0}
.cmp-src-note{font-size:var(--fs-meta, 12px);color:var(--ink-faint, var(--faint, #bcbcb2));margin:8px 0 0}
.cmp-ft-link{display:inline-block;margin-top:10px;font-size:var(--fs-caption, .85rem);font-weight:var(--fw-med, 500);
  color:var(--brand-deep, var(--o-ink, #1f5c43));text-decoration:none}
.cmp-ft-link:hover{text-decoration:underline;text-underline-offset:2px}

@media (max-width:560px){
  /* 모바일 셀 폭 정비 — 폰트·라벨폭·셀/본문 패딩 축소로 데이터칸 가독 폭 확보 */
  .cmp-grid{font-size:var(--fs-meta, 12px);--cmp-label-w:6.5em}
  .cmp-grid th,.cmp-grid td{padding:var(--sp-2, 8px) var(--sp-3, 12px);line-height:1.45;overflow-wrap:anywhere}  /* 긴 무공백 헤더(통상해고(정당성·제한)) 셀 넘침 → 최후 줄바꿈 */
  .cmp-body{padding:var(--sp-4, 16px) var(--sp-3, 12px)}
  .cmp-head{padding:var(--sp-2, 8px) var(--sp-3, 12px)}
  .cmp-head h2{font-size:var(--fs-body, .95rem)}
  .cmp-cidchip{margin:2px 3px 2px 0;padding:2px 6px}
  /* box 별표(다열)는 셀 래핑 허용(컨테이너 폭 맞춤) — 넘치면 .cmp-ft-body 가로 스크롤 */
  .cmp-grid.cmp-box th,.cmp-grid.cmp-box td{white-space:normal;word-break:keep-all}
}
/* 개념 매트릭스(concept_matrix/choice_compare 등)는 개념 ≥4열이면 폭에 억지로 눌려 셀이 여러 줄로 접히고
   행 높이가 틀어짐(corpus_desk .qx-table 선례). shrink-to-fit 대신 가로 스크롤로 전환.
   ★table-layout:fixed 유지(2026-07-13) — 구 auto 는 표마다 제 내용에 맞춰 열을 잡아 같은 form 목록에서
   표끼리 열 경계가 어긋났다(라벨열 폭·데이터열 비율이 표마다 제각각). 표 폭만 열 수에 비례해 확보(--cmp-cols
   = 렌더된 총 열 수, 렌더러가 주입)하고 열 분배는 데스크톱과 동일한 fixed 규칙에 맡긴다.
   box 별표(.cmp-box)는 위 자체 래핑 유지라 제외. */
@media (max-width:640px){
  .cmp-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-grid:not(.cmp-box){min-width:calc(var(--cmp-cols, 3) * 8.5em)}
}

/* ★기출 근거의 진위 표식 (2026-08-24 · 설계서 §7-21-AH)
   경영 매트릭스의 근거에는 기출 «선지 문장»이 그대로 실려 있고, 그중에는 그 문항에서
   **틀린 선지**였던 문장이 섞여 있다. 표식 없이 평문으로 그리면 학습자는 칸 본문이
   「…는 함정이다」로 뒤집은 바로 그 문장을 **근거로** 읽는다.
   ★색 단독 인코딩 금지(hub_ui.css §③) — 이 팔레트는 danger red 가 없고, 변별은 글자
     라벨(「✕ 틀린 내용」)이 책임진다. 색은 거들 뿐이다. */
/* ★2026-08-25 정렬 개편 — 한 항목 = 한 줄. 종전에는 항목을 「 · 」로 이어 흘려서 라벨이 줄 끝에
   떨어지고 그 문장은 다음 줄에서 시작했다(라벨과 문장이 갈라짐 · 항목 경계도 안 보임).
   ★라벨은 줄바꿈 안 되는 왼쪽 칸에 고정하고 문장은 남은 폭을 쓰게 한다 — 문장이 접혀도
     라벨 아래로 파고들지 않는다(행잉 인덴트). 라벨 없는 항목(판정 없음)은 그대로 문장만 선다. */
.cmp-grid tr.cmp-ground .cmp-glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.34em}
.cmp-grid tr.cmp-ground .cmp-gitem{display:flex;align-items:baseline;gap:.34em}
.cmp-grid tr.cmp-ground .cmp-gitem>span{flex:1 1 auto;min-width:0}
/* ★모바일 — 라벨을 «문장 위»로 올린다. 좁은 열에서 라벨이 옆에 붙어 있으면 문장 몫이
   서너 글자로 줄어 세로 리본이 된다(390 실측). 열 폭은 표 자체가 8.5em 으로 잡으므로
   라벨을 내려놓아야 문장이 그 폭을 다 쓴다. */
@media (max-width:640px){
  .cmp-grid tr.cmp-ground .cmp-gitem{flex-direction:column;align-items:flex-start;gap:.14em}
  .cmp-grid tr.cmp-ground .cmp-glist{gap:.5em}
}
.cmp-grid tr.cmp-ground .cmp-gwrong>b,
.cmp-grid tr.cmp-ground .cmp-gright>b{
  flex:0 0 auto;padding:0 .34em;border-radius:var(--r-pill, 999px);
  font-size:var(--fs-meta, 12px);font-weight:var(--fw-semi, 600);line-height:1.5;white-space:nowrap}
.cmp-grid tr.cmp-ground .cmp-gwrong>b{
  color:var(--color-warn, #B45309);background:var(--color-warn-bg, #FFFBEB);
  border:1px solid var(--color-warn, #B45309)}
.cmp-grid tr.cmp-ground .cmp-gright>b{
  color:var(--ink-muted, #5A5E6B);background:var(--surface-sunken, #F2F3F5);
  border:1px solid var(--line, #E4E6EC)}
/* 틀린 문장 자체는 본문보다 더 흐리게 — 눈이 먼저 «옳은 것»에 가야 한다.
   ★취소선은 «문장»에만 건다(항목 전체에 걸면 라벨까지 그어져 라벨이 장식으로 읽힌다). */
.cmp-grid tr.cmp-ground .cmp-gwrong>span{text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:var(--line-strong, #CFD2DB)}

/* 판본 배지 — 「이 값은 언제부터의 판인가」(cells_effective · 2026-09-02)
   ★색·어휘 모두 개정 소식 화면(amend_news .bdg.shift/.upcoming)과 한 벌 — 같은 사실이 화면마다 달리 보이면 안 된다.
   ★인쇄에는 남긴다(원문 배지와 달리 이건 조작 장치가 아니라 «내용»이다). */
.cmp-effbadge{display:inline-block;margin-left:6px;padding:1px 7px;font-size:var(--fs-meta, 12px);
  font-weight:var(--fw-med, 500);line-height:1.5;border-radius:var(--r-pill, 9999px);
  vertical-align:middle;white-space:nowrap}
.cmp-effbadge.shift{background:var(--news-shift-bg);color:var(--news-shift)}
.cmp-effbadge.upcoming{background:var(--news-upcoming-bg);color:var(--news-upcoming)}