/* web/static/style.css — 공용 컴포넌트 스타일시트 (R7A, §4.8)
   디자인: 정제 핀테크 라이트 — 쿨 뉴트럴 캔버스 + 흰 카드 서피스 + 인디고 액센트.
   토큰(지면·타이포·간격·라운딩·그림자·@font-face)은 tokens.css 가 단일 정의한다.
   이 파일은 컴포넌트 룰만 담고, 색·폰트·간격은 tokens.css 커스텀 속성만 참조한다.
   로드 순서: tokens.css -> style.css (-> app.css). 의미색은 palette.py(--color-*).
   변수 계약(--bg·--surface·--panel·--paper·--ink·--sub·--line·--line-strong·
   --accent·--accent-soft·--sans·--mono) 은 tokens.css 소유 — app.css 공유.
   감사 반영(DESIGN_AUDIT_20260708.md [CSS] 전부): 본문 16px · 터치 44px ·
   color-scheme · text-wrap balance · th-sub 11.5px · 포커스 링 강화. */

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--sans);
  font-size: 16px;               /* 감사: 모바일 16px 최소선 */
  line-height: 1.72;
  word-break: keep-all;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "ss05"; /* Pretendard: 세로 중앙 콜론 */
}

main { max-width: 880px; margin: 0 auto; padding: 0 18px calc(var(--space-16) + var(--space-12)); }

/* [토스식 링크 위계 — R7 UX] 본문 링크 기본 = 잉크 텍스트 + 옅은 회색 밑줄,
   hover에서만 인디고. 풀채도 인디고는 전진 CTA(.home-section-note·.next-actions)·
   CTA 버튼·활성 네비 등 "의도적 액션" 지점에만 남긴다 (파란 링크밭 제거).
   단 리스트 종결부 "전체 보기"(.list-more)는 예외다 — 맨바닥 인디고 텍스트가 아니라
   중립색 행 서피스로 내렸다 (정의는 아래 .list-more 블록). */
a { color: var(--ink); text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
/* 전진·더보기 액션 링크 — 섹션당 소수, 의도적 인디고 (탭 유도). */
.home-section-note a, .next-actions a { color: var(--accent); font-weight: 600; text-decoration: none; }
.home-section-note a:hover, .next-actions a:hover { color: var(--accent-strong); text-decoration: underline; text-decoration-color: var(--accent); }
a, button, summary, input, select, label { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-xs); }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

code, pre { font-family: var(--mono); font-size: 0.84em; }
/* [§3.6 서피스 위계] 층은 3개뿐이다: 지면(그림자 0) / 카드(shadow-card 1층) /
   떠 있는 크롬(shadow-raised). 정적 컨테이너는 **flat** — 보더가 구획을 지고
   그림자는 쓰지 않는다. 종전에는 역할이 다른 15종+ 컨테이너가 전부 같은
   "흰 서피스+보더+그림자" 라 화면이 균질한 둥근 흰 박스 나열로 읽혔다(S2). */
pre {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); overflow-x: auto;
}

/* ── 접근성 유틸 — skip link (P10-9c [TPL]) + 시각적 은닉 ── */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--ink); color: var(--bg);
  font-weight: 700; font-size: 14px; text-decoration: none; z-index: 10;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 헤더 — 마스트헤드: 중앙 제호 + 괘선 아래 소제 내비 (조간지 1면) ── */
.site-header {
  /* [R6C-2] 법무면 전용 세로 스택(로고 + 원장 표기). 제품 면의 한 줄 헤더는 아래 .site-header-bar 가 덮는다. */
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  max-width: 880px; margin: 0 auto; padding: 22px 18px 10px;
}
.site-name {
  font-weight: 800; font-size: 22px; letter-spacing: 0.01em;
  text-decoration: none; color: var(--ink);
}
/* P10-9d: 브랜드 C 마크 (월상 원반) — 워드마크 옆, em 단위라 반응형 폰트에 동조 */
.brand-mark { width: 0.74em; height: 0.74em; margin-right: 0.22em; vertical-align: -0.07em; }

/* [헤더 V5] 전역 한 줄 헤더 — 로고 · 5탭 · 관련주 검색 pill · 로그인.
   구 2층(워드마크 줄 + sticky 내비 줄)을 한 줄로 합쳤다. sticky·헤어라인 하단선
   같은 조용한 크롬 규율(R6.6)은 그대로 승계한다.
   .site-header 기본 규칙은 **건드리지 않는다** -- 법무면(legal/base.html)이 그
   클래스를 로고 전용 세로 스택으로 쓰고 있어서, 공용 규칙을 행으로 바꾸면 관할 밖
   지면이 같이 움직인다. 새 배치는 .site-header-bar 수식자에만 건다. */
.site-header-bar {
  position: sticky; top: 0; z-index: 50;
  flex-direction: row; align-items: stretch; gap: 0;
  max-width: none; padding: 0;
  background: var(--background); border-bottom: 1px solid var(--border);
}
.site-header-inner {
  max-width: 880px; width: 100%; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; gap: var(--space-5);
}
.site-header-bar .site-name {
  flex: none; font-size: 22px; padding: var(--space-3) 0;
}
.site-header-actions {
  display: flex; align-items: center; gap: var(--space-2);
  margin-left: auto; flex: none;
}
/* [랜딩 V6] 구 .site-header-inner-minimal(V5 루트 전용 축약 헤더)을 **삭제**했다.
   랜딩이 전역 헤더를 그대로 쓰게 되면서 그 클래스를 붙이는 마크업이 사라졌고,
   남겨 두면 "루트만 다른 헤더" 를 되살릴 자리가 CSS 에 계속 있는 셈이 된다.
   부활 방어는 test_v6_landing_shares_the_global_header 의 부재 단언이 진다. */

/* 관련주 검색 pill — 헤더의 유일한 강조 액션. 구 돋보기 아이콘을 대체한다
   (아이콘은 "여기서 검색한다"를 말해 주지 못해 반려 사유가 됐다). */
.nav-search-pill {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 var(--space-4);
  background: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease;
}
.nav-search-pill:hover { background: var(--primary-hover); color: var(--primary-foreground); }
.site-nav-links {
  display: flex; flex-wrap: wrap;
}
.site-nav-links a {
  margin: 0; padding: 12px 14px;           /* 감사: 터치 44px */
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
  text-decoration: none; color: var(--sub);
}
.site-nav-links a:hover { color: var(--accent); }
/* [§3.5 → v2] 활성 탭 = 인디고 700 + 2px 인디고 밑줄. PR-5 의 잉크 전환은
   철회한다(헤더가 통째로 흑백이 됐다). 색 단독 의미 금지 룰은 **웨이트 700 +
   밑줄**이 이미 이중 인코딩으로 지키므로, 색은 브랜드 포인트로 되살린다. */
.site-nav-links a.is-active {
  color: var(--accent); font-weight: 700;
  border-bottom: 2px solid var(--accent);
}

/* 모바일: 로고·pill·로그인을 첫 줄에 두고 5탭은 그 아래 가로 스크롤 레일로 내린다
   (한 줄에 다 넣으면 탭이 뭉개지거나 pill 이 밀려난다). */
@media (max-width: 640px) {
  .site-header-inner { flex-wrap: wrap; gap: 0 var(--space-3); padding-bottom: var(--space-1); }
  .site-header-bar .site-name { font-size: 17px; }
  .site-header-actions { order: 2; }
  .site-nav-links {
    order: 3; flex: 1 0 100%; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .site-nav-links::-webkit-scrollbar { display: none; }
  .site-nav-links a { flex: 0 0 auto; padding: var(--space-2) var(--space-3); }
}

/* [라운드3 ⑥a] 기존 .site-header nav a.is-active 참조 — 없어진 선택자이지만
   app.css 14행이 동일 규칙을 두어 중복 커버. 이 줄은 호환 보존용 no-op. */
.site-header nav a.is-active { color: var(--accent); }

/* ── 법률 문서 원장 ───────────────────────────────────────────────────
   불변 릴리스의 버전·날짜·해시를 왼쪽 spine으로 읽게 하고 본문은 72ch에
   고정한다. 기존 지면색·폰트·표 스크롤 문법만 재사용한다. */
.legal-main {
  max-width: 1040px; margin: 0 auto; padding: 22px 18px 72px;
}
.legal-doc-nav {
  max-width: 1040px; margin: 0 auto; padding: 8px 18px;
  display: flex; gap: 4px 16px; overflow-x: auto;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 13px; white-space: nowrap;
}
.legal-doc-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--sub); text-decoration: none; padding: 10px 2px;
}
.legal-doc-nav a:hover { color: var(--accent); }
.legal-doc-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--accent);
}
.legal-layout {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 36px; align-items: start;
}
.legal-release-spine {
  position: sticky; top: 18px;
  border-left: 3px solid var(--accent); padding: 4px 0 12px 15px;
  color: var(--sub); font-size: 12px;
}
.legal-release-spine > svg { width: 30px; height: 30px; color: var(--ink); }
.legal-release-spine p { margin: 7px 0; }
.legal-release-spine dl { margin: 12px 0; }
.legal-release-spine dl > div { padding: 5px 0; border-top: 1px solid var(--line); }
.legal-release-spine dt { color: var(--sub); }
.legal-release-spine dd {
  margin: 1px 0 0; color: var(--ink); font-variant-numeric: tabular-nums;
}
.legal-release-spine details { margin: 10px 0; }
.legal-release-spine summary { cursor: pointer; }
.legal-main a, .legal-release-spine code { overflow-wrap: anywhere; }
.legal-language-switch {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.legal-language-switch a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--sub); padding: 10px 2px;
}
.legal-language-switch a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.legal-toc {
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 9px 0; margin-bottom: 24px; font-size: 12px;
}
.legal-toc > strong { font-family: var(--mono); letter-spacing: 0.04em; }
.legal-toc ol {
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  margin: 5px 0 0; padding: 0; list-style: none;
}
.legal-toc a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--sub); text-decoration: none; padding: 10px 2px;
}
.legal-toc a:hover { color: var(--accent); text-decoration: underline; }
.legal-document { max-width: 72ch; }
.legal-document > h1 { margin-top: 0; }
.legal-document h2[id] { scroll-margin-top: 72px; }
.legal-document h2 { margin-top: 54px; }
.legal-document h3 { margin-top: 28px; }
.legal-document li + li { margin-top: 5px; }
.legal-document table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.legal-document th, .legal-document td {
  padding: 7px 9px; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.legal-document thead th {
  color: var(--sub); white-space: nowrap;
}
.legal-summary { margin: 28px 0; border-top: 1px solid var(--line); }
.legal-preview-banner {
  margin: 0 0 22px; padding: 10px 14px;
  border: 1px solid var(--accent); border-left-width: 3px;
  font-family: var(--mono); font-size: 12px;
}
.legal-preview-banner strong { margin-right: 10px; color: var(--accent); }
.legal-main > section > div {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.legal-main > section > div > section {
  border-top: 1px solid var(--line); padding-top: 4px;
}
.legal-main > section > ol {
  list-style: none; margin: 24px 0 0; padding: 0;
  border-top: 1px solid var(--line);
}
.legal-main > section > ol > li {
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.legal-main > section > ol > li > div {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px;
}
.legal-main > section > ol > li p {
  margin: 4px 0; color: var(--sub); font-size: 13px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 920px) {
  /* `1fr` 은 `minmax(auto, 1fr)` 이라 트랙이 아이템의 min-content 아래로 못
     줄어든다 - 표를 품은 본문 열이 390px 뷰포트에서 트랙을 686px 로 밀어올려
     법무면 전체가 가로 스크롤했다. 데스크톱 규칙이 이미 쓰는 `minmax(0, 1fr)`
     로 맞춰 트랙이 실제로 좁아지게 한다(표 자체는 `.table-wrap` 이 스크롤). */
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .legal-release-spine { position: static; }
  .legal-toc { position: static; }
}
@media (max-width: 620px) {
  .legal-doc-nav { padding-inline: 14px; }
  .legal-main { padding-inline: 14px; }
  .legal-main > section > div { grid-template-columns: 1fr; gap: 12px; }
  .legal-toc ol { display: block; columns: 1; }
  .legal-toc li + li { margin-top: 3px; }
}
@media print {
  /* :root 라이트 고정 오버라이드는 tokens.css @media print 로 이관. */
  body { color: var(--ink); background: var(--bg); }
  .legal-doc-nav, .legal-language-switch, .legal-toc, .back-to-top { display: none; }
  .legal-main { max-width: none; padding: 0; }
  .legal-layout { display: block; }
  .legal-release-spine { position: static; margin-bottom: 24px; }
  .legal-document { max-width: none; }
  .legal-document h2[id] { scroll-margin-top: 0; }
  .legal-document .table-wrap { overflow: visible; background: none; }
  .legal-document table, .legal-document th, .legal-document td {
    white-space: normal; overflow-wrap: anywhere;
  }
}

/* ── 푸터 — 판권면 ── */
.site-footer {
  max-width: 880px; margin: 0 auto; padding: 20px 18px 52px;
  border-top: 1px solid var(--line); color: var(--sub); font-size: 13px;
  line-height: 1.7;
}
.disclaimer { margin: 3px 0; }
/* R6A-3: 푸터 보조·신뢰 링크 행 — 가운뎃점 구분, 푸터 타이포 계승. */
.footer-nav { margin: 6px 0; }
.footer-nav a + a { margin-left: 6px; }
.footer-nav a + a::before { content: "· "; color: var(--sub); }
/* 푸터 유틸 링크는 크롬이므로 더 낮은 톤(--sub), hover에서만 accent. */
.footer-nav a { color: var(--sub); text-decoration-color: var(--line); }
.footer-nav a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ── 제목 위계 — Pretendard 단일, 위계는 웨이트·크기로만 (명조·액센트 바 폐지) ── */
h1, h2 { letter-spacing: -0.02em; }
h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.3; font-weight: 800; }
h2 { font-size: 22px; margin-top: var(--space-12); font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: 14px; margin-bottom: 6px; font-weight: 700; }

.page-note { color: var(--sub); font-size: 13px; }
/* [표정 2026-09-07] 빈 상태 카피가 "…없음" 한 토막에서 "무슨 일인지 + 뭘 하면
   되는지" 두 마디로 길어졌다. 한 줄에 길게 늘어지면 읽히지 않으므로 측정 폭을
   재우고 행간을 연다. 카드화는 하지 않는다 — .empty-note 는 목록 행
   (.home-item.empty-note)으로도 쓰여서 서피스를 주면 그 자리 레이아웃이 깨진다. */
.empty-note {
  color: var(--sub); line-height: 1.7;
  max-width: 46ch; text-wrap: pretty;
}
/* R6A-4: 빈 상태 라우팅 CTA — 안내문 아래 스크리너·트랙 레코드로 이어지는 링크. */
.empty-cta {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: 6px;
  padding: 0 var(--space-4); font-weight: 600; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  transition: border-color .15s ease, background-color .15s ease;
}
.empty-cta:hover { border-color: var(--accent); background: var(--panel); }

.section-lead {
  color: var(--sub); font-size: 14px; line-height: 1.75;
  margin: 6px 0 16px; max-width: 620px;
  /* [카드 UI 수리] word-break:keep-all(body) + 이 측정폭 조합이 844px 컨테이너에서
     고아 줄을 낸다 — 히어로 표제(.hero-title) 선례 그대로 balance 부여. */
  text-wrap: balance;
}

/* [R7I] 단일 '닿아 있는 종목' 로스터 — 카운트 요약(연결 확인 N · 검증 대기 M). */
.roster-count {
  color: var(--sub); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin: 2px 0 4px;
}
/* [모수 회계 2026-09-02] 헤드라인 후보 수의 행방 한 줄 — 카운트 요약 바로 아래
   저강조 note (.roster-wayfinding 과 같은 위계, 위치만 위). */
.roster-population {
  color: var(--sub); font-size: 13px; line-height: 1.7;
  margin: 0 0 8px; max-width: 620px;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
/* [r456] 낮음 폴백 안내 — 상단이 0행이라 낮음을 올릴 때만. 리스트 바로 위에 붙는
   저강조 note (행의 낮음 배지가 사실 표시를 이어받으므로 문구는 강조하지 않는다). */
.roster-low-fallback {
  color: var(--sub); font-size: 13px; line-height: 1.7;
  margin: 0 0 10px; max-width: 620px;
  text-wrap: balance;
}
/* [R7 카드 경로 UX] 미노출 그룹 행방 안내(병합 1줄) — 저강조 note. */
.roster-wayfinding {
  text-wrap: balance;
  color: var(--sub); font-size: 13px; line-height: 1.7;
  margin: 10px 0 0; max-width: 620px;
  font-variant-numeric: tabular-nums;
}
/* [R7I] 헤더 공시 원문 DART 딥링크 — 공시일 배지 옆 저강조 인라인 링크. */
.disclosure-src {
  color: var(--accent); font-size: 12px; font-weight: 600;
  text-decoration: none; align-self: center;
}
.disclosure-src:hover { text-decoration: underline; }

/* ── 랜딩 히어로 — 1면 톱: 큰 명조 표제 + 리드문 ── */
.hero { padding: 56px 0 12px; }
.hero-title {
  margin: 0;
  font-size: clamp(36px, 8vw, 62px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.u-all {
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 0.24em;
  text-underline-offset: 0.02em;
  text-decoration-skip-ink: none;
}
.hero-sub {
  max-width: 620px; margin: 12px 0 0;
  font-size: 16px; color: var(--sub); line-height: 1.8;
}
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 30px 0 0; }
.cta-primary {
  display: inline-flex; align-items: center; min-height: 46px; /* 감사: 44px+ */
  padding: 0 var(--space-5);
  background: var(--primary); color: var(--primary-foreground);
  border: 0; border-radius: var(--radius-md); /* button 요소 UA 보더 리셋 (a·button 공용) */
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.cta-primary:hover { background: var(--primary-hover); color: var(--primary-foreground); }
.cta-primary:active { transform: translateY(1px); }
/* 아웃라인 CTA - 한 화면 1 primary 원칙에서 두 번째 동작용 (a·button 공용) */
.cta-ghost {
  display: inline-flex; align-items: center; min-height: 46px; /* 감사: 44px+ */
  padding: 0 22px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
/* [§3.5 → v2] ghost hover 는 인디고 보더+글자 + 패널 배경.
   PR-5 는 여기서 색을 빼 잉크 보더만 남겼는데, 같은 제품의 app.css(스크리너)·
   my-stocks.css 는 액센트 hover 를 그대로 쓰고 있어 **공개면만 흑백**이 되는
   두 문법이 생겼다. 컨트롤 hover 는 액센트로 되돌려 하나로 합친다.
   (배경 1단계 전환은 v1 개선이라 유지 — 부양·그림자 점프는 여전히 금지.) */
.cta-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--panel); }
.cta-ghost:active { transform: translateY(1px); }
.cta-secondary {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  text-decoration-color: var(--line);
}
.cta-secondary:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* [랜딩 V2] 히어로 고지 -- 무추천 고지 + 법적 고지 두 줄. 히어로가 중앙 정렬
   단일 절이 되면서 이탤릭(구 R7B 스타일)은 뺐다: 두 줄이 나란히 서면 기울기가
   저강조가 아니라 장식으로 읽힌다. */
.hero-note {
  margin: var(--space-2) 0 0;
  font-size: 13px; color: var(--sub); line-height: 1.7;
}

/* [랜딩 V5] 루트 랜딩 -- 검색 엔진형 최소 지면.
   V2~V4 는 히어로에 뷰포트 높이(min-height 100svh)를 줘서 카드 스트립이 **반드시
   스크롤 아래**로 밀렸다. 반려: "이벤트 카드가 스크롤 내려야만 보이는 게 이상함,
   검색창이랑 좀 더 가깝게". 그래서 높이 예약을 없애고 세로 리듬을 압축해 1280x900
   첫 화면에 슬로건·검색·칩·디렉터리·카드까지 들어오게 한다.
   합성 선택자(.hero.about-hero)인 이유: 데스크톱 `.hero` 패딩 규칙이 이 파일
   뒤쪽(랜딩 미디어쿼리)에 있어 같은 특정도로는 소스 순서에 진다.
   신규 px 리터럴 없음 -- 간격은 4px 스케일 토큰만. */
.hero.about-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-6) 0 0;
  text-align: center;
}
/* 표제는 랜딩에서만 한 단계 줄인다 -- 62px 두 줄이 카드 스트립을 첫 화면 밖으로
   밀어낸다(1280x900 실측). 전역 .hero-title 은 다른 지면 소관이라 건드리지 않는다. */
.about-hero .hero-title { font-size: clamp(32px, 6vw, 52px); }
/* [랜딩 V6] 슬로건 둘째 줄의 핵심어에 액센트. .u-all 은 랜딩 h1 전용 클래스라
   (grep: about.html 1곳) 여기서 색을 줘도 관할 밖이 없다. 밑줄은 그대로 두고
   글자색만 올린다 -- 둘 다 강하게 하면 장식으로 읽힌다. */
.about-hero .u-all { color: var(--accent); }

/* [랜딩 V6] 히어로 아이브로우 -- 무엇을 하는 곳인지 한 줄. 소형·액센트·굵게.
   레퍼런스(nogada)의 히어로 첫 줄 역할 그대로다. */
.hero-eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 13px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.01em; line-height: 1.6;
}
/* 검색창 바로 위 리드 -- 무엇을 넣는 칸인지 말한다(placeholder 보조). */
.hero-lede {
  max-width: 560px; margin: var(--space-3) 0 0;
  font-size: 16px; color: var(--sub); line-height: 1.7;
  text-wrap: balance;
}

/* [랜딩 V6] 신뢰 지표 한 줄 -- 아이콘 + 사실 3개. 링크가 아니라 사실 표시라
   호버·커서를 주지 않는다(누를 수 있어 보이면 안 된다). 좁은 화면에서는 세로로
   접힌다 -- 가로 스크롤이 아니다. */
.hero-trust {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-5) 0 0; padding: 0; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--sub);
}
.hero-trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-trust svg { width: 15px; height: 15px; flex: none; color: var(--accent); }

/* [랜딩 V4] 히어로 아래 최신 카드 스트립 -- push 표면. 카드 서피스·호버 상승은
   /explore/·/cards/ 와 같은 .home-feed .home-card 어휘를 그대로 쓴다. 여기서
   더하는 것은 3열 배치와 V5 카드 내부 조판뿐이고, **전부 .landing-cards 아래로
   한정**한다 -- 공용 .home-card/.home-expo 를 손대면 관할 밖 두 지면이 같이 움직인다. */
.landing-latest { margin: var(--space-6) 0 0; }
.landing-latest-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
/* 제목과 "전체 보기" 를 같은 줄에 세운다 -- 둘 다 제 여백을 갖고 있어(h2 전역 마진 +
   .home-section-title 하단 6px + .list-more 상단 --space-3) 그대로 두면 한 줄 안에서
   서로 어긋난다(실측으로 확인). 여백만 거두고 색·크기·화살표는 그대로 재사용. */
.landing-latest-head .home-section-title { margin: 0; }
.landing-latest-head .list-more { margin: 0; }
.home-feed.landing-cards {
  /* ul 의 UA 기본값(padding-inline-start 40px · list-style disc)을 리셋한다.
     .home-feed 공용 규칙에 리셋이 없어서 카드 줄만 섹션 제목보다 40px 안쪽으로
     밀려 있었다(실측: h2 left 218 vs 카드 left 258, 데스크톱·모바일 공통). */
  padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  /* 그래픽 칸이 aspect-ratio 로 고정이고 본문이 flex:1 이라, stretch 는 세 장의
     높이를 맞춰 곳수 배지를 한 선에 세운다(배지의 margin-top:auto 와 한 쌍).
     사진 카드와 글리프 카드가 섞여도 그래픽 칸 높이는 같으므로 빈 구멍은 없다. */
  align-items: stretch;
  margin: var(--space-4) 0 0;
}

/* [V5 카드 리디자인] 반려 "너무 데모 프리뷰 같음". 데모 티의 정체는 점선 구분선과
   맨 텍스트 곳수였다. 카드는 이미지 -> 날짜 -> 제목 -> 곳수 배지 순으로 조판하고,
   패딩은 이미지가 카드 폭을 꽉 채우도록 본문에만 준다.

   [V7] **선택자를 한 계단 올렸다.** `.landing-cards .landing-card` (0,2,0) 는
   파일 뒤쪽의 `.home-feed .home-card { padding: 18px 20px }` (0,2,0) 와 특정도가
   같아서 **뒤에 온 쪽이 이겼다** — V5 가 의도한 풀블리드가 한 번도 출하된 적이
   없고, 그림 둘레에 20px 흰 여백이 남아 카드가 미완성으로 보였다(실측 스크린샷,
   반려 "카드 디자인 자체도 이상하잖아"의 한 축). `.home-feed.landing-cards` 로
   받아 (0,3,0) 을 만든다. 값이 아니라 **특정도**가 결함이었다. */
.home-feed.landing-cards .landing-card {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
/* 공용 카드의 왼쪽 3px 상태 레일은 랜딩에서 끈다. 풀블리드가 되면 이 막대가
   그림 왼쪽 끝을 세로로 지나는데, 랜딩에는 상태 범례가 없어 무슨 뜻인지 읽을
   길이 없다 -- 뜻 없는 막대가 사진을 자르는 모양만 남는다. 상태 칩이 있는
   /explore/·/cards/ 는 그대로 둔다(관할 밖). */
.home-feed.landing-cards .landing-card::before { display: none; }
.landing-card-thumb {
  display: block; aspect-ratio: 16 / 9; background: var(--panel);
  /* flex 아이템 기본값 min-height:auto 가 aspect-ratio 를 이긴다 -- 사진의 고유
     비율(steel.jpg 은 3:2)이 16/9 보다 높으면 그 높이로 칸이 부풀어서, 사진 카드만
     글리프 카드보다 24px 더 큰 그림을 갖게 된다(1280 실측: 231x154 vs 231x130).
     V5 는 카드 구성이 전부 같아서(썸네일 전건 끔) 이 결함이 드러나지 않았다.
     min-height:0 + flex:none 으로 aspect-ratio 를 정본으로 되돌리고, 넘치는 부분은
     object-fit: cover 가 자른다. */
  flex: none; min-height: 0; overflow: hidden;
}
.landing-card-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* [랜딩 V6] 결정론 생성 글리프 칸 -- 사진이 안 붙는 카드의 그래픽.
   SVG 는 색을 토큰으로 참조하므로(build.py `_landing_card_glyph`) 다크 모드가
   자동으로 따라온다. 여기서 주는 것은 칸 크기와 바탕뿐이다. */
.landing-card-thumb-gen { background: var(--accent-soft); }
.landing-card-thumb-gen svg { display: block; width: 100%; height: 100%; }
.landing-card-body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5);
}
/* [V7 위계] 날짜는 제목을 이길 이유가 없다. 12px/600 은 제목(16.5px/800)과 두
   단계밖에 차이가 안 나 셋(날짜·제목·배지)이 비슷한 무게로 붙어 있었다.
   한 단계 더 내리고 자간을 벌려 **머리표**로 읽히게 한다. tabular-nums 는
   유지 -- 카드 석 장의 날짜가 자릿수마다 세로로 맞는다. */
.landing-card-date {
  font-size: 11px; font-weight: 600; color: var(--sub);
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}
.landing-cards .home-card-title {
  margin: 0; padding-right: 0; font-size: 17px; line-height: 1.38;
}
/* 날짜와 제목은 한 덩어리, 배지는 다른 덩어리다. 본문 gap(8px)만으로는 셋이
   같은 간격이라 덩어리가 안 갈린다 -- 제목 위 간격만 좁힌다. */
.landing-cards .landing-card-date + .home-card-title { margin-top: -3px; }
/* 곳수 배지 -- 점선 구분선(.home-expo) 대신. 카드 높이가 달라도 바닥에 붙어
   3장이 같은 선에서 읽힌다. */
.landing-card-badge {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: var(--space-1) var(--space-2);
  background: var(--accent-soft); color: var(--accent-strong);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
}
.landing-card-badge b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .home-feed.landing-cards { grid-template-columns: 1fr; }
}

/* [랜딩 V6] 둘러보기 그리드 -- 구 .hero-dir(가운뎃점으로 이은 텍스트 한 줄)을
   대체한다. 반려 1: 그 줄이 검색창과 카드 사이에 끼어 "붕 뜬" 회색 텍스트였다.
   레퍼런스(nogada) "인기 카테고리" 처럼 아이콘 + 이름 + 실측 카운트 카드 6장이고,
   히어로가 아니라 카드 스트립 **아래**에 선다. */
.landing-dir { margin: var(--space-10) 0 0; }
.landing-dir .home-section-title { margin: 0 0 var(--space-4); }
.dir-grid {
  /* ul UA 기본값 리셋 (.home-feed.landing-cards 와 같은 이유). */
  padding: 0; margin: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.dir-card {  /* elevated */
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; /* 감사: 44px+ 터치 타깃 */
  padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
/* 호버 리프트·액센트 보더 폐지 (§3.7) — 보더 강화 + 배경 1단계. */
.dir-card:hover { border-color: var(--line-strong); background: var(--panel); }
/* 전역 :focus-visible 이 --radius-xs 로 모서리를 바꾸므로 카드 라운드를 되돌린다
   (.list-more 선례와 같은 이유·같은 수리). 모션은 전역 prefers-reduced-motion
   규칙이 이미 끈다 — 여기서 다시 선언하지 않는다. */
.dir-card:focus-visible { border-radius: var(--radius-lg); }
/* [§2-S5] 틴트 정사각통 폐지. "옅은 보라 둥근 사각 안 라인 아이콘"은 AI 랜딩의
   시그니처다. 아이콘은 맨몸 스트로크로 텍스트와 같은 잉크 취급하고, 위계가
   필요하면 통이 아니라 아이콘을 키운다. */
.dir-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; color: var(--sub);
}
.dir-card-icon svg { width: 20px; height: 20px; }
.dir-card:hover .dir-card-icon { color: var(--ink); }
.dir-card-name { font-size: 16px; font-weight: 700; }
/* 카운트는 이름 오른쪽 끝으로 밀어 세 열의 숫자가 한 축에 선다. 카운트가 없는
   축(시장·리서치·스크리너)은 이 span 자체가 없으므로 이름만 남는다. */
.dir-card-count {
  margin-left: auto;
  font-size: 13px; font-weight: 600; color: var(--sub);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .dir-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .dir-card { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .dir-card-icon svg { width: 18px; height: 18px; }
  .dir-card-name { font-size: 14px; }
}

/* [R7D] 되돌이 링크 -- 막다른 페이지 하단 다음 행동 (카드 서피스 문법) */
.next-actions {
  margin: var(--space-12) 0 0; padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.next-actions h2 { margin: 0 0 var(--space-2); font-size: 16px; }
.next-actions ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-6); margin: 0; padding: 0;
}
.next-actions a { display: inline-flex; align-items: center; min-height: 44px; }

/* [라운드3 ⑤c] 구 랜딩/피드 시대 사문 CSS 삭제 — 템플릿·JS 어디에서도 참조되지 않음:
   .how* (작동 방식 3단), .samples/.samples-title, .app-cta* (랜딩 CTA), .feed-card*
   (구 피드 카드). .feed/.feed-title/.quiet-hook/.basket-*/.legend-mark 는 판별 보류로 존치. */

/* ── 피드 — 기사 목록: 상자 대신 괘선 구획 (지면의 단) ── */
.feed { margin-top: 48px; }
.feed-title { margin: 0 0 4px; font-size: 22px; }
.feed-title::before { display: none; }
.quiet-hook { margin: 2px 0 4px; font-size: 16px; font-weight: 700; }
.basket-perf {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.basket-vals { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.basket-window { color: var(--sub); font-weight: 600; }
.basket-quiet { color: var(--sub); }
/* P10-10 인라인 레전드 마크 — 스파크라인 선 스타일과 동일 (조용=파랑 실선).
   [P10-13b] 피드 스파크라인은 조용 실선만 → .basket-lit/.legend-lit 삭제 (P10-13 잔재). */
.legend-mark { display: inline-block; width: 14px; vertical-align: middle; margin-right: 5px; }
/* [라운드3 ⑪] .legend-quiet(파랑 #2563a8 하드코딩)는 구 피드 잔재이며 템플릿·JS·차트
   어디에서도 참조되지 않아 삭제. "조용=앰버" SSOT 모순 색 잔재 제거. */
.perf-pending { color: var(--sub); font-size: 13px; }

/* ── 배지 (DESIGN.md §3.5) ── 필 폐지. shadcn 배지 문법: 높이 20 · 패딩 0 8 ·
   radius-sm 6 · caption 12/600 · **보더 위주**. variant 3종으로만 수렴한다:
     neutral(기본) = 투명 바탕 + 헤어라인 보더 + --sub  ← 대다수
     tint(강조·화면당 소수) = accent-soft 바탕 + 보더 없음 + accent-strong
     state(검증 판정) = 녹/적 틴트 (의미 채널이라 색 존치, 기하만 통일)
   "정보성 배지에 필 금지" — 필은 누르는 것에만 (검색창·필터 버튼·헤더 pill). */
.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  background: transparent; color: var(--sub);
  border: 1px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
  /* [P24] 배지는 분류 라벨 — 좁은 셀에서 라벨 중간 줄바꿈+테두리 오버플로 금지. */
  white-space: nowrap;
}
/* tint variant — 화면당 소수 지점만. 보더를 지워 neutral 과 형태로도 갈린다. */
.badge-accel, .badge-theme, .badge-today, .badge-selected, .badge-rel-높음 {
  background: var(--accent-soft); color: var(--accent-strong);
  border-color: transparent; font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .badge-accel, .badge-theme, .badge-today, .badge-selected, .badge-rel-높음 { color: var(--accent); }
}
/* 등급 = neutral + 웨이트로만 승급 (틴트 아님 — 등급은 화면당 1개라 형태가 아니라
   잉크 농도로 선다). */
.badge-grade { color: var(--ink); font-weight: 800; }
/* [밀도 룰 §3.5] 한 행 배지 최대 2개. 카드 헤더 메타는 공시일·원문링크·등급·소급이
   같이 서므로 **공시일을 텍스트 메타로 강등**한다 — 클래스는 렌더 계약이라 남기고
   (test_web_build), 배지 크롬만 벗긴다. 날짜는 라벨이 아니라 사실이다. */
.badge-d0 {
  background: transparent; border-color: transparent; color: var(--sub);
  height: auto; padding: 0; font-size: 13px; font-weight: 500; letter-spacing: 0;
}
.badge-tier { letter-spacing: 0.02em; }
/* [P29-3 §4.1] 연관도 밴드 칩 — 표면 3값만 (순위 숫자·점수 미표기). 밴드가 진동
   흡수 장치를 겸하므로 시각 위계는 낮음<중간<높음 순의 절제된 대비만 (틴트 고정, 텍스트 단계). */
.badge-relevancy { font-weight: 700; }
/* 높음 = tint (위 그룹). 중간·낮음 = neutral, 잉크 농도로만 갈린다. */
.badge-rel-중간 { color: var(--ink); }
.badge-rel-낮음 { color: var(--sub); }
/* 주목도 배지 — 키-값 칩. neutral 기본형 위 보더 한 단계 낮춤(강조 축 아님). */
.badge-attention { border-color: var(--line); display: inline-flex; gap: 5px; align-items: baseline; }
.badge-attention .badge-k { color: var(--sub); opacity: .75; font-weight: 400; font-size: .92em; }
/* 검증 전·소급 라벨 — neutral 기본형 그대로. 별도 선언 불필요(구 아웃라인 필 그룹 흡수). */
/* [P29-3 §4.2] 무추천 고정 캡션·소급 정직 표기 1줄 — 절제된 보조 텍스트. */
.attn-nrec-caption { color: var(--sub); font-size: 13px; margin: 2px 0 10px; }
.attn-backfill-note { color: var(--sub); font-size: 12px; margin-top: 10px; }
/* P15-4 §4.14.5(a): 테마 배지 — 등급 배지 자리 (에디토리얼 선정 카드) */
.badge-theme { background: var(--accent-soft); color: var(--accent-strong); font-weight: 800; }
/* P15-4 §4.14.4: 가지 헤더 발굴 경로 라벨 (직접/1홉/N홉 — 표기만, 강조 축 아님) */
.disco-tag { font-size: 12px; color: var(--sub); font-weight: 500; }
/* P15-4 §4.14.3: 재무 위험 셀 (사실 라벨) */
.firm-hygiene { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.firm-hygiene .hygiene-detail { margin: 4px 0 0; padding-left: 16px; font-size: 12px; }
/* P15-4 §4.14.5(a): 테마 헤더 (테마 문장 + 선정 근거 사실 2줄) */
.theme-header { margin: var(--space-2) 0 var(--space-1); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.theme-header p { margin: 2px 0; font-size: 14px; line-height: 1.5; }
.theme-header .theme-rationale { color: var(--sub); font-size: 13px; }

/* ── 카드 상세 3층 (P22-2 §4.20.3): 답 / 지도 / 증명 ── */
/* 층 = 질문 1개. 답 층이 첫 화면 즉답. 층 사이 여백으로 리듬 구획. */
.layer-answer { margin: 0; }
.layer-map { margin-top: 30px; }
.layer-proof { margin-top: 44px; padding-top: 8px; border-top: 1px solid var(--line); }
.evidence-breadcrumb { margin-bottom: 24px; font-size: 14px; }
.evidence-header { margin-bottom: 36px; }
.evidence-branch, .evidence-proof > section { margin-top: 40px; scroll-margin-top: var(--anchor-offset); }
.fragment-compat { display: block; scroll-margin-top: var(--anchor-offset); }

.card-header h1 { margin: 12px 0 4px; font-size: clamp(26px, 5vw, 34px); line-height: 1.32; letter-spacing: -0.025em; }
/* 부제 = 문장형 원제목 1줄 (표제 보조) */
.card-subtitle { margin: 0 0 10px; font-size: 16px; color: var(--sub); line-height: 1.5; }
/* 채점 상태 한 줄 (§4.20.1(d) 상태 문법) — matured 는 델타 세리프 강조는 성과 층에서 유지 */
.card-status {
  margin: 2px 0 4px; font-size: 13px; color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.card-status.status-matured { color: var(--ink); font-weight: 600; }

/* ── 주목 후보 — 편집자 픽: 명조 넘버링 ── */
.attention { margin-top: 22px; }
.attention h2 { margin: 0 0 8px; }
.attention-list { list-style: none; margin: 0; padding: 0; counter-reset: attn; }
.attention-item {
  counter-increment: attn;
  position: relative;
  padding: 14px 0 14px 40px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.attention-item::before {
  content: counter(attn);
  position: absolute; left: 2px; top: 14px;
  font-weight: 800; font-size: 22px;
  color: var(--sub); line-height: 1.2;
}
.attention-item:last-child { border-bottom: 1px solid var(--line); }
.attn-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.attn-name { font-weight: 800; font-size: 17px; }
a.attn-name { color: var(--ink); text-decoration-color: var(--accent-soft); text-decoration-thickness: 0.18em; }
a.attn-name:hover { color: var(--accent); }
.attn-ticker { color: var(--sub); font-size: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.attn-c { color: var(--accent); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.attn-branch { color: var(--sub); font-size: 13px; }
.attn-weakest { color: var(--sub); font-size: 13px; display: block; margin-top: 2px; }
.attn-snippet { font-size: 13px; color: var(--ink); }
.attn-role { color: var(--ink); font-size: 14px; line-height: 1.7; }
/* [카드 리뉴얼 2단계 2026-09-05 Kevin] 판정 근거 통합 문단 — 종전 1~2문장 <span> 이
   3~5문장 <p> 가 됐다. 부모가 flex column(gap 3px)이라 <p> 기본 여백을 지워야 행
   리듬이 유지되고, 길어진 문단은 줄 길이를 묶어야 읽힌다.
   [ui-overhaul 출하 2026-09-05] 위 두 줄의 13.5/14.5px 는 시안 PR-3 타이포 8단
   스케일(13/14)로 내려앉았다. .attn-basis 는 card.html 에서 늘 .attn-role 과 같은
   <p> 에 함께 붙으므로(`class="attn-role attn-basis"`) 크기는 .attn-role 이 준다 —
   여기서 font-size 를 다시 주면 스케일 밖 고유값이 되살아난다. */
.attn-basis { margin: 0; max-width: 74ch; }
/* [쉬운 요약 2026-09-05 Kevin] 쉬운 요약 문단 — .attn-basis 와 **같은 기하**다.
   두 문단은 같은 자리를 번갈아 차지하므로(있으면 쉬운 요약, 없으면 결정론 문단)
   여백·줄 길이가 다르면 커버리지에 따라 행 리듬이 들쭉날쭉해진다.
   크기·색은 같은 <p> 의 .attn-role 이 준다 — 여기서 font-size 를 다시 주면
   위 주석이 경고한 "스케일 밖 고유값"이 되살아난다. */
.attn-easy { margin: 0; max-width: 74ch; }
details.attn-evidence > summary {
  cursor: pointer; color: var(--sub); font-size: 13px;
  padding: 6px 0; min-height: 32px;
}
details.attn-evidence > summary:hover { color: var(--accent); }
details.attn-evidence blockquote {
  margin: 6px 0; padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); font-size: 12px; line-height: 1.7;
}
details.attn-evidence a { font-size: 13px; }

/* 발행 정보 접기 */
details.pub-info { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 8px; }
details.pub-info > summary { cursor: pointer; color: var(--sub); font-size: 13px; padding: 10px 0; }
.meta-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.meta-table th, .meta-table td {
  text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.meta-table th { white-space: nowrap; color: var(--sub); font-weight: 600; width: 9em; }
.sha { word-break: break-all; }
.backfill-note {
  /* [§3.5] inset — 부속 노트는 지면 위에 뜨지 않는다. 패널 바탕에 눌러 앉힌다. */
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  background: var(--panel); color: var(--sub);
  border: 0; border-radius: var(--radius-md);
  font-size: 13px;
}
.backfill-chart-label {
  padding: var(--space-2) var(--space-3); background: var(--panel); color: var(--sub);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 13px;
}

.card-summary {
  background: transparent; border: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 0 16px; margin: 26px 0;
  font-size: 16px;
}
.card-summary h3 { margin-top: 14px; }

/* ── 파급 경로 문장 ── */
.path-list { list-style: none; margin: 8px 0 0; padding: 0; }
.path-sentence {
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.85;
}
.path-sentence:last-child { border-bottom: 1px solid var(--line); }
.path-bid {
  display: inline-flex; align-items: center; height: 20px; margin-right: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--sub); background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0 8px; white-space: nowrap;
}
/* [카드 리뉴얼 2단계 2026-09-05 Kevin] 화살표 체인 렌더가 폐지되면서 그 조각들
   (.path-arrow/.path-mech/.path-node/.path-target/.path-target-marker/.path-counts)은
   전부 죽은 규칙이 됐다 — 유일 소비처였던 card.html `path_flow` 가 문장 한 줄로
   바뀌었다. 남겨 두면 다음 회차에 "스타일이 있으니 마크업도 있겠지"로 되살아난다. */
details.chain-details { margin-top: 10px; }
details.chain-details > summary { cursor: pointer; color: var(--sub); font-size: 13px; padding: 8px 0; min-height: 36px; }

/* ── 바스켓 차트 — 핵심 델타는 명조 대활자 ── */
.perf-deltas {
  display: flex; flex-wrap: wrap; gap: 12px 44px;
  margin: 8px 0 16px; padding: 14px 0 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.delta { display: flex; flex-direction: column; }
.delta-num {
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 5vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.delta-benefit .delta-num { color: var(--color-direction-plus); }
.delta-harm .delta-num { color: var(--color-direction-minus); }
/* 방향 없는 중립 점수판(트랙레코드 승률·초과중위) 숫자는 기본 잉크색 유지 -- 방향
   색은 수혜/피해 카드 표면 전용이라 여기엔 적용하지 않는다. */
.delta-quiet .delta-num { color: var(--ink); }
.delta-label { font-size: 12px; color: var(--sub); margin-top: 4px; }
/* P10-10 기간 접두 + 두 그룹 사실 비교 문장 */
.perf-window { color: var(--sub); font-size: 13px; font-weight: 600; margin: 8px 0 0; }
.perf-compare { font-size: 14px; margin: 0 0 14px; }
.perf-footnote { color: var(--sub); font-size: 13px; margin-top: 8px; }

/* 차트 지면 — 인쇄 도판 (다크에서도 밝게, SVG 고정색 가독) */
.chain-wrap, .perf-wrap {
  overflow-x: auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2);
}
@media (prefers-color-scheme: dark) {
  /* --paper 는 다크에서도 흰색 유지 (tokens.css) — 보더만 강조색으로. */
  .chain-wrap, .perf-wrap { border-color: var(--line-strong); }
  .stock-excess svg, .basket-spark svg {
    background: var(--paper); border: 1px solid var(--line-strong);
  }
}
.chain-wrap svg, .perf-wrap svg { max-width: none; display: block; }
.perf-narrow { display: block; }
.perf-wide { display: none; }

/* 가지 = 펼침(<details>) — 기본 접힘으로 스크롤 축소 (P22-2 Kevin 지시).
   펼치면 소속 종목이 그 자리에서 아직 조용 후보 우선 상단으로 보인다. */
details.branch { border-top: 1px solid var(--line); margin-top: 0; }
details.branch:last-of-type { border-bottom: 1px solid var(--line); }
/* [R7 카드 경로 UX] 요약 행 = 2단(경로명+관련 기업 수 / 무채색 분포 막대 + 정본 legend).
   막대는 aria-hidden 장식, legend 가 정본. 색 채널 방향코딩 금지(무추천 하우스 룰). */
details.branch > summary.branch-summary {
  cursor: pointer; list-style-position: outside;
  padding: 14px 0 14px 4px; min-height: 44px;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.branch-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3);
}
details.branch > summary.branch-summary:hover .branch-title { color: var(--accent); }
.branch-title { font-weight: 700; font-size: 17px; }
.branch-total {
  flex: 0 0 auto; font-weight: 700; font-size: 16px; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.branch-mix {
  display: flex; height: 9px; overflow: hidden;
  border-radius: var(--radius-pill); background: var(--panel);
}
.branch-mix .mix-seg { height: 100%; min-width: 3px; }
/* 세기 램프 (탐색 카드 --lit-* 토큰 재사용): 주목 전=중립회색 · 보통=옅은 인디고 · 주목받는 중=앰버.
   판정/방향색 아님, 주목 세기 서수 인코딩. 막대 세그먼트·범례 스와치 공용. */
.branch-mix .lit-quiet, .branch-legend-key .lit-quiet { background: var(--lit-quiet); }
.branch-mix .lit-mid,   .branch-legend-key .lit-mid   { background: var(--lit-mid); }
.branch-mix .lit-lit,   .branch-legend-key .lit-lit   { background: var(--lit-lit); }
.branch-legend {
  font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums;
}
.branch-legend-key {
  margin: 4px 0 10px; display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 14px; font-size: 12px; color: var(--sub);
}
.branch-legend-key .lk { display: inline-flex; align-items: center; gap: 5px; }
.branch-legend-key .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.branch-legend-key .lk-note { margin-left: auto; color: var(--sub); }
.branch-counts {
  font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums;
}
/* [카드 UI 수리] 결함3-⑤ — 상태 스트립·주 CTA 덩어리와 부가 근거(근거 상세)를
   얇은 구분선으로 분리. 과한 카드 테두리 대신 최소 상단 괘선 하나만. */
details.branch-detail {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
}
details.branch-detail > summary {
  cursor: pointer; color: var(--sub); font-size: 13px; padding: 8px 0; min-height: 32px;
}
details.branch-detail > summary:hover { color: var(--accent); }
.branch-meta { color: var(--sub); font-size: 13px; margin: 2px 0; }
/* [카드 UI 수리] 모든 경로에 동일하게 붙는 보일러플레이트 문장(why_line) — 저강조로
   강등(13px/sub, 종전 14.5px/ink 는 경로 문장·소속 기업 롤업과 위계가 같아 과했다).
   측정폭은 유지하되 844px 컨테이너 고아 줄 방지로 balance 부여(결함4, .hero-title 선례). */
.branch-why { font-size: 13px; color: var(--sub); margin: 4px 0 6px; max-width: 640px; text-wrap: balance; }
.quiet-line { font-size: 13px; color: var(--sub); }
.appendix-ref { color: var(--sub); font-size: 13px; }
/* [R6E] 경로 인라인 전체 표 — 그 자리에서 펼침(스크롤 점프 제거). summary 는 구
   appendix-ref 링크의 시각 위계 계승(앰버 강조), 펼치면 표가 아래 인라인 렌더. */
details.branch-firms { margin: 6px 0 2px; }
details.branch-firms > summary {
  cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600;
  padding: 6px 0; min-height: 32px; list-style: none;
}
details.branch-firms > summary::-webkit-details-marker { display: none; }
details.branch-firms > summary::before { content: "\25B8 "; color: var(--accent); }
details.branch-firms[open] > summary::before { content: "\25BE "; }
details.branch-firms > summary:hover { text-decoration: underline; }
details.branch-firms > .table-wrap { margin-top: 8px; }
/* [R6E] 부록 A 기본 접힘 — 경로별 인라인이 기본 열람, 부록은 플랫 참조로 뒤에 접어 둠. */
details.appendix-master > summary { cursor: pointer; list-style: none; }
details.appendix-master > summary::-webkit-details-marker { display: none; }
details.appendix-master > summary > h2 { display: inline; }
details.appendix-master > summary::after {
  content: " \25B8"; color: var(--sub); font-weight: 400;
}
details.appendix-master[open] > summary::after { content: " \25BE"; }
/* 임팩트 노트 슬롯 — 가지당 마커 훅 (P21-3: 노트는 행 단위, 슬롯은 빈 상태 유지) */
.impact-note-slot { margin: 0; padding: 0; }
.impact-note-slot:empty { display: none; }

/* [P21-3 §4.22.4] 임팩트 판정 — 가지 표 행 단위. selected=인라인 노트+선정 로직,
   rejected=투명성 1줄, unverified/gate_failed=검증 전 라벨. 팔레트 단일 소스(--accent). */
.badge-selected { margin-right: 6px; }  /* 색은 위 tint 그룹 */
/* .badge-pending 은 위 아웃라인 필 그룹(badge-backfill/pending/gate-failed)에서 정의. */
.firm-name.firm-selected { border-left: 2px solid var(--line-strong); padding-left: 8px; }
/* [P21-6 §4.22.6.8][P21-8b AMENDED 2026-08-06] 도시에르 판정 배지 — 연결 확인/연결 기각/검증 오류. */
/* state variant — 의미 채널(검증 판정)이라 색 존치, 기하만 배지 문법으로 통일.
   보더는 틴트와 같은 계열로 낮춰 neutral 배지와 형태가 섞이지 않게 한다.
   [W-PR1 2026-09-07] 여섯 hex 리터럴 + 다크 쌍을 tokens.css 시맨틱 토큰으로 승격했다.
   **값은 그대로다** — 이 치환의 렌더 결과는 승격 전과 바이트 동일이어야 한다.
   다크 변형이 여기서 사라진 것은 토큰이 tokens.css 다크 블록에서 움직이기 때문이다
   (같은 값을 두 곳에 적으면 두 사본이 갈린다 — tokens.css 별칭 규율과 같은 이유). */
.badge-confirmed {
  background: var(--color-verified-bg); border-color: var(--color-verified-line);
  color: var(--color-verified);
  font-weight: 700; margin-right: 6px;
}
.badge-not-confirmed {
  background: var(--color-unverified-bg); border-color: var(--color-unverified-line);
  color: var(--color-unverified);
  font-weight: 700; margin-right: 6px;
}
/* .badge-gate-failed 은 위 아웃라인 필 그룹에서 정의. */
/* [P24] 판정 셀 = 배지만 (서술은 .verdict-row 전폭 행) — max-width:28ch 는
   auto-layout 표에서 무력했고(실측 94px 압축) 셀이 배지 전용이 되어 제거. */
.impact-judgment-cell { white-space: nowrap; }
/* [P21-6] 미검증 집계 주석 — 지도층 가지 표·기업 페이지 공통. */
.unverified-count-note {
  margin: 4px 0 0; font-size: 12px; color: var(--sub); font-style: italic;
}
.impact-disclosure {
  margin: 4px 0 0; font-size: 11px; color: var(--sub); letter-spacing: 0.01em;
}
.impact-note {
  margin: 6px 0 2px; font-size: 13px; line-height: 1.6; color: var(--ink);
  max-width: 44ch;
  /* [P24] 카드 표에서는 .firm-name(nowrap) 셀 안에 들어감 — 문장은 어절 단위로 감김. */
  white-space: normal; word-break: keep-all;
}
.impact-src { font-size: 12px; margin-left: 4px; white-space: nowrap; }
/* [P27] 인용 윗첨자 팝오버 - span.cite + CSS :hover/:focus-within (무JS 무채색) */
.cite { position: relative; display: inline; cursor: pointer; }
.cite > sup { color: var(--accent); font-weight: 600; font-size: .7em; padding: 0 1px; }
.cite:focus-within > sup, .cite:hover > sup { text-decoration: underline; }
.cite-pop { position: absolute; left: 0; top: 1.5em; z-index: 20;
  min-width: 200px; max-width: min(320px, 88vw);
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); padding: 8px 10px; font-size: 13px;
  box-shadow: var(--shadow-raised);   /* 고아 리터럴 폐지 — 떠 있는 크롬은 토큰으로 */
  display: none; flex-direction: column; gap: 4px; }
.cite:hover > .cite-pop, .cite:focus-within > .cite-pop { display: flex; }
.cite-meta { color: var(--sub); }
.cite-link { color: var(--accent); }
/* 우측 넘침 방지 - 우측 절반 인용은 오른쪽 정렬 (JS 없이 컨테이너 기준 fallback) */
.cite.cite-right > .cite-pop { left: auto; right: 0; }
.impact-logic { margin: 2px 0 0; }
.impact-logic > summary {
  font-size: 12px; color: var(--sub); cursor: pointer; list-style: revert;
}
.impact-logic > summary:hover { color: var(--accent); }
.impact-chain {
  margin: 6px 0 4px; padding-left: 18px; font-size: 13px; line-height: 1.65;
  color: var(--sub);
}
.impact-weakest { margin: 2px 0 0; font-size: 12px; color: var(--sub); white-space: normal; }
.impact-verdict {
  margin: 6px 0 2px; font-size: 12px; color: var(--sub);
  /* [P24] 어절 단위 감김 — 좁은 폭에서 글자 단위로 꺾이던 문제 방지. */
  white-space: normal; word-break: keep-all; max-width: 72ch;
}
.impact-chain { white-space: normal; }
/* [P24] 판정 서술 전폭 행 — P22-4b evidence-row 와 동일 문법. 항상 표시. */
.firm-table tr.verdict-row > td { padding: 0; border-bottom: 1px solid var(--line); }
.firm-table tbody tr.verdict-row:hover { background: transparent; }
.verdict-block {
  padding: var(--space-2) var(--space-3) 10px;
  border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel);
  margin: 0;
}
.verdict-block .impact-note { max-width: 72ch; margin-top: 0; }
.verdict-block .impact-verdict { margin-top: 0; }

/* ── 표 — 시세표: 위 굵은 괘선 + 가로 헤어라인, 숫자 tabular ── */
/* 모바일 가로 스크롤 힌트 — 순수 CSS 스크롤 섀도: 잘린 쪽에만 그늘 */
/* 표는 카드 서피스 위에 놓이므로 페이드 색은 var(--surface) (var(--bg) 아님).
   토큰이 라이트/다크를 대응하므로 그라디언트는 1벌로 통합. */
.table-wrap {
  overflow-x: auto; margin: var(--space-2) 0 var(--space-5);
  background:
    linear-gradient(90deg, var(--surface) 40%, transparent) left / 28px 100%,
    linear-gradient(270deg, var(--surface) 40%, transparent) right / 28px 100%,
    linear-gradient(90deg, var(--scroll-shade), transparent) left / 12px 100%,
    linear-gradient(270deg, var(--scroll-shade), transparent) right / 12px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.firm-table, .tr-table {
  border-collapse: collapse; width: 100%; font-size: 13px;   /* 감사: 12.5px+ */
  font-variant-numeric: tabular-nums; line-height: 1.55;
}
.firm-table th, .firm-table td, .tr-table th, .tr-table td {
  border-bottom: 1px solid var(--line);
  padding: 7px 9px; text-align: left; vertical-align: top;
}
.firm-table tbody tr:hover, .tr-table tbody tr:hover { background: var(--panel); }
.firm-table thead th, .tr-table thead th {
  border-bottom: 1px solid var(--line);
  background: transparent; font-size: 11px; color: var(--sub);
  font-weight: 600; letter-spacing: 0.06em; white-space: nowrap;
}
.firm-name { white-space: nowrap; font-weight: 600; }
.stock-excess svg { display: block; margin-bottom: 2px; }
.excess-val { font-variant-numeric: tabular-nums; }
.firm-evidence { min-width: 160px; }
.firm-evidence summary { cursor: pointer; color: var(--sub); padding: 2px 0; }
.firm-evidence summary:hover { color: var(--accent); }

/* ── [P22-4b] 근거 펼침 — 행 하단 전폭 · 소속 연결 ─────────────────────────
   [P22-4a] 구조(details 트리거 + 형제 evidence-row)를 유지하면서:
   · 트리거 행 하이라이트(--panel 배경)로 펼침 블록과 시각 연결
   · .evidence-block 으로 blockquote + DART 링크를 하나로 감쌈
   · :has() 미지원(2023 이전) 브라우저 fail-open 보존 */
.firm-table tr.evidence-row > td { padding: 0; border-bottom: 1px solid var(--line); }
.firm-table tbody tr.evidence-row:hover { background: transparent; }
/* [P22-4b] evidence-block: blockquote + DART 링크를 하나의 컨테이너로 묶음
   DART 링크를 blockquote 밖으로 빼지 않아 소속이 명확. */
.evidence-block {
  padding: 0 var(--space-3) var(--space-3);
  border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel);
  margin: 0;
}
.evidence-block blockquote {
  margin: 0; padding: 10px 0 6px;
  font-size: 12px; white-space: pre-wrap; word-break: keep-all;
}
.evidence-block .evidence-src {
  display: block; font-size: 12px; margin-top: 4px; padding-bottom: 2px;
  color: var(--sub);
}
.evidence-block .evidence-src:hover { color: var(--accent); }
@supports selector(tr:has(details[open])) {
  .firm-table tr.evidence-row { display: none; }
  /* [P24] verdict-row 가 트리거 행과 evidence-row 사이에 끼는 경우까지 커버. */
  .firm-table tr:has(.firm-evidence details[open]) + tr.evidence-row,
  .firm-table tr:has(.firm-evidence details[open]) + tr.verdict-row + tr.evidence-row { display: table-row; }
  /* 열린 트리거 행 = --panel 배경으로 펼침 블록과 시각 연결 (P22-4b) */
  .firm-table tr:has(.firm-evidence details[open]) > td {
    border-bottom: none; background: var(--panel);
  }
}
@media print {
  /* 지면에서는 근거를 전부 펼쳐 인쇄 (details 는 접힌 채 요약만 나오므로 보강) */
  .firm-table tr.evidence-row { display: table-row; }
}

/* ── [P22-4a] 이벤트 이력 표 장문 표제 레이아웃 ──────────────────────────
   표제는 display_title(≤25자) 우선 + 원제목 보조 1줄. 이벤트 컬럼이 한 단어씩
   세로로 꺾이지 않게 폭 하한 부여, 표제는 어절 단위 줄바꿈만 허용. */
/* [라운드3 ⑤d] .event-cell 폭 정의 통합 — min/max 220px 를 한 곳에 (구 594·626 중복 제거). */
.event-cell { min-width: 220px; max-width: 220px; }
.event-cell a { word-break: keep-all; overflow-wrap: anywhere; }
.event-subtitle {
  display: block; color: var(--sub); font-size: 12px; line-height: 1.5;
  margin-top: 2px; word-break: keep-all; overflow-wrap: anywhere;
}
.branch-cell { white-space: nowrap; }
/* [라운드3 ⑧] 교차 노출 표 가지 열 — 토큰 사이는 줄바꿈 허용, 토큰 안(가지11)은 세로 꺾임 금지 */
.branch-tokens { white-space: normal; }
.branch-token { white-space: nowrap; }
.branch-sep { margin: 0 1px; }

details.mid-group > summary, details.appendix-branch > summary, details.tr-winloss > summary {
  cursor: pointer; padding: 10px 0; font-weight: 700; min-height: 40px;
}
details.mid-group > summary:hover, details.appendix-branch > summary:hover,
details.tr-winloss > summary:hover { color: var(--accent); }

.falsification {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.falsification h4 { margin: 0 0 6px; }
.falsification ul { margin: 0; padding-left: 18px; font-size: 13px; }

/* ── 기업 페이지 ── */
.ext-link { font-size: 11px; color: var(--sub); text-decoration: none; margin-left: 4px; padding: 4px 2px; }
.ext-link:hover { color: var(--accent); }
.company-ticker { color: var(--sub); font-size: 0.68em; font-weight: 500; margin-left: 6px; font-family: var(--sans); }
.company-links a { margin-right: 12px; font-size: 13px; }
.company-summary { font-size: 16px; }
/* [R6C-6] 기업 헤더 스탯 라인 — 노출 N · 최근 노출일 · 최근 카드(링크). */
.company-stats {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 8px;
  font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums;
}
.company-stats strong { color: var(--ink); font-weight: 700; }
.company-list { list-style: none; padding: 0; }
/* [R7 UX] 토스식 행: 이름(잉크) 강조 · 티커 보조 · 카운트 우측 pill · 최근 라인 톤다운 · hover 배경. */
.company-list li {
  padding: 13px 10px; border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: background .12s ease;
}
.company-list li:hover { background: var(--panel); }
.co-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; }
.co-name { font-weight: 700; font-size: 16px; }
.company-list .company-count {
  margin-left: auto; color: var(--sub); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--panel); border-radius: var(--radius-sm); padding: 2px 8px;
}
.company-list li:hover .company-count { background: var(--surface); }
/* [R6C-4] 색인 정보 냄새 — 최근 노출일·최근 카드 보조 라인. */
.company-list .company-recent {
  color: var(--sub); font-size: 12px; margin: 4px 0 0;
}
/* [R6C-1] 기업 색인 정렬 버튼 바 */
.co-sort-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px;
}
.co-sort-btn {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 4px 12px; font-size: 12px; color: var(--sub); cursor: pointer;
  font-family: var(--sans); white-space: nowrap;
}
.co-sort-btn:hover { border-color: var(--accent); color: var(--ink); }
/* 활성 정렬 = 필터칩과 같은 primary 문법 (v2 에서 primary = 인디고). */
.co-sort-btn.is-active {
  color: var(--primary-foreground); background: var(--primary); border-color: var(--primary);
  font-weight: 700;
}
.d0-cell { white-space: nowrap; }
/* -- [P26-A 설계 §3] 노출 이력 카드 타임라인 - firm-table 대체 (기업 페이지 전용) --
   .firm-table 계열·정렬기 그룹 이동 CSS 는 card.html 부록 표가 계속 쓰므로 삭제 금지.
   타임라인 세로선·날짜 마커는 장식 - 의미 전달은 텍스트 (색 단독 의미 전달 금지). */
.exposure-timeline {
  list-style: none; margin: 8px 0 4px; padding: 0 0 0 18px;
  border-left: 1px solid var(--line);
}
.exposure-timeline > li { position: relative; margin: 0 0 14px; }
.exposure-timeline > li:last-child { margin-bottom: 4px; }
.exposure-timeline > li::before {
  content: ""; position: absolute; left: -22px; top: 18px;
  width: 7px; height: 7px; background: var(--sub);
}
/* 패널 크롬 - R6B-2c 가지 패널 문법 동형 (--panel 배경 + --line 1px 보더) */
.exposure-card {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
}
/* hover 배경 전환 - 표 행 hover 관례 승계 (--panel: 카드 서피스 위 인셋 톤) */
.exposure-card:hover { background: var(--panel); }
/* [R7E] 토스식 3단 점진 공개 - 티어1 컴팩트 카드 (기본 상태 4줄 이하):
   ① 날짜·제목·판정 칩(exposure-head) ② 연결 서술 첫 문장(exposure-teaser)
   ③ 핵심 수치(exposure-metrics) ④ 노출 맥락 메타(exposure-meta, 저강조).
   증거(연결 서술 전문·인과 사슬·DART)는 전부 접힘(exposure-reason·evidence-toggle). */
.exposure-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.exposure-d0 {
  font-size: 12px; color: var(--sub); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.exposure-title { margin: 0; font-size: 16px; line-height: 1.45; }
.exposure-title a { word-break: keep-all; overflow-wrap: anywhere; }
/* 연결 서술 첫 문장 1줄 - 전문은 '연결 근거' 접힘. 한 문장이 길어도 1행으로 클램프
   (말줄임) - 티저는 미리보기, 정본은 접힘 안. 토스식 단일 초점(기본 상태 최소 높이). */
.exposure-teaser {
  margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink);
  word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* 핵심 수치 한 줄 - 주목도 + 공시 후 초과수익(스파크라인 동행). */
.exposure-metrics {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 4px 0 0; font-size: 13px;
}
.exposure-attention {
  color: var(--sub); font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.exposure-excess-inline {
  display: inline-flex; align-items: center; gap: 5px;
  font-variant-numeric: tabular-nums;
}
/* 스파크라인은 viewBox 스케일 - 높이만 컴팩트하게(핵심 수치 행이 1행 안에 들어오도록). */
.exposure-excess-inline svg {
  display: inline-block; vertical-align: middle; height: 15px; width: auto;
}
.excess-label { color: var(--sub); font-size: 12px; }
/* 노출 맥락 메타 - 경로·티어·국면 (저강조 한 줄, 표 헤더 어휘 재사용). */
.exposure-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 5px 0 0; font-size: 12px; color: var(--sub);
}
.exposure-meta .chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* '연결 근거' 접힘 안으로 접은 메타 - 본문 상단, 아래 서술과 간격만 부여. */
.exposure-reason-body .exposure-meta-in { margin: 0 0 8px; }
/* [R7E] 티어2 '연결 근거' 접힘 - verdict-block 시각 문법(왼쪽 세로선 마커 + 패널 배경)
   을 details 본문에 승계 (firm-table 종속 제거, 기업 타임라인 전용). */
.exposure-reason { margin: 6px 0 0; }
.exposure-reason > summary {
  cursor: pointer; color: var(--sub); font-size: 13px; padding: 2px 0;
  list-style: revert;
}
.exposure-reason > summary:hover { color: var(--accent); }
.exposure-reason-body {
  margin: 6px 0 0; padding: var(--space-2) var(--space-3) 10px;
  border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel);
}
.exposure-reason-body .impact-note { max-width: 72ch; margin-top: 0; }
.exposure-reason-body .impact-verdict { margin-top: 0; }
/* 인과 사슬 출처 압축 렌더 - [공시 date · 확인] (접수번호는 title·DART 링크로 강등). */
.chain-src {
  color: var(--sub); font-size: 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-decoration: none;
}
a.chain-src:hover { color: var(--accent); text-decoration: underline; }
/* 스크리닝 근거 토글 - 인용을 details 안에 직접 내장 (:has() 형제 행 핵 소멸) */
.exposure-card .evidence-toggle { margin: 8px 0 0; }
.exposure-card .evidence-toggle > summary {
  cursor: pointer; color: var(--sub); font-size: 13px; padding: 2px 0;
}
.exposure-card .evidence-toggle > summary:hover { color: var(--accent); }
.exposure-card .evidence-block { background: var(--panel); margin-top: 6px; }
.exposure-dart { margin: 10px 0 0; font-size: 13px; }
@media print {
  /* 지면에서는 근거 전체 인쇄 - details 접힘 무시, 내용 강제 표시
     (기존 .firm-table tr.evidence-row print 규칙의 타임라인 대응판 - 설계 §3.3).
     닫힌 details 의 내용은 UA 가 content-visibility: hidden 으로 제외하므로
     display 만으로는 부족 - ::details-content 병기 (Chromium 131+/Firefox 138+,
     미지원 구형은 접힌 채 인쇄되는 우아한 성능저하). */
  .exposure-card .evidence-toggle > * { display: block; }
  .exposure-card .evidence-toggle::details-content {
    content-visibility: visible;
  }
  /* [R7E] '연결 근거'(중첩 스크리닝 근거 포함)도 지면에선 강제 펼침 - 근거 전체 인쇄. */
  .exposure-card .exposure-reason > * { display: block; }
  .exposure-card .exposure-reason::details-content {
    content-visibility: visible;
  }
}

/* ── 트랙 레코드 ── */
.tr-notice {
  padding: var(--space-3) var(--space-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  font-size: 14px;
}
.tr-notice > p { margin: 0; }
/* [R7 UX] 토스식 리라이트 — 어려운 정의는 '자세히'로 접어 표면을 가볍게. */
.tr-more { margin: 4px 0 16px; }
.tr-notice > .tr-more { margin: 8px 0 0; }
.tr-more > summary {
  cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px;
  padding: 4px 0; min-height: 32px; list-style: none;
  display: inline-flex; align-items: center;
}
.tr-more > summary::after { content: "\00a0▾"; font-size: 11px; }
.tr-more[open] > summary::after { content: "\00a0▴"; }
.tr-more > summary::-webkit-details-marker { display: none; }
.tr-more-body {
  color: var(--sub); font-size: 13px; line-height: 1.75; max-width: 620px;
}
.tr-more-body p { margin: 6px 0; }
.tr-more-body b { color: var(--ink); font-weight: 700; }
.tr-card { min-width: 160px; }
.tr-d0 { white-space: nowrap; }
.tr-label { color: var(--sub); font-size: 12px; }
.th-sub { font-weight: 400; color: var(--sub); font-size: 11px; letter-spacing: 0; }
/* [R6C-1] 표 정렬 글리프 — 같은 잉크색 무채색 (R6.6 가드레일: 빨강/초록 금지) */
.th-sort-glyph { font-size: 11px; color: var(--ink); margin-right: 2px; }
/* 정렬 가능 th: 포커스 표시 강화 */
th[data-sortable], table[data-sortable] th[role="button"] { user-select: none; }
table[data-sortable] th[role="button"]:hover { color: var(--accent); }
table[data-sortable] th[role="button"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
/* R6A-1: 스코어보드 히어로 — .perf-deltas 스탯 블록 재사용. 저N 진행형 슬롯은
   대활자 대신 sub 색 진행 문구(집계 전임을 시각적으로 구분). */
.tr-scoreboard { margin-top: 4px; }
.tr-slot-progress { font-size: 22px; font-weight: 800; color: var(--sub); }
.tr-slot-frac { font-size: 12px; color: var(--sub); margin-top: 2px; }
.tr-agg-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.tr-agg-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.tr-agg-list li:last-child { border-bottom: 1px solid var(--line); }
details.tr-winloss { margin: 10px 0; }
details.tr-winloss > summary { line-height: 1.55; }
/* [R6F W2] 트랙 레코드 셀 밀도 완화 -- 평균·터치·홉 행을 접힘 안으로 강등 */
/* [§2-S8] 셀마다 반복되던 "▶ 상세" 는 밀도만 올린다. 행에 3~4개가 쌓여 표가
   글리프 밭으로 읽혔다. 마커 삼각형을 걷고(열림 상태는 밑줄이 말한다) 라벨을
   micro 로 내려, 어포던스는 이미 있는 **행 hover 배경**(.tr-table tbody tr:hover)
   이 진다. 문구는 불변 — 접힘 계약도 불변. */
details.tr-cell-detail { display: block; margin-top: 2px; }
details.tr-cell-detail > summary {
  display: inline-block; list-style: none; color: var(--sub); font-size: 11px;
  letter-spacing: .04em; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
details.tr-cell-detail > summary::-webkit-details-marker { display: none; }
details.tr-cell-detail > summary:hover { color: var(--accent); text-decoration-color: var(--sub); }
details.tr-cell-detail[open] > summary { color: var(--ink); }

/* ── 홈 (P22-1) — 히어로 항상 · 오늘 · 전이 · 채점 (단일 상태, Kevin 2026-07-09) ── */

/* [R7B] ① 가치 바 -- 글래스 크롬 (2.2 @supports 가 덧씌움), dismissible */
.value-bar {  /* inset */
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0 0; padding: var(--space-2) var(--space-4);
  background: var(--panel); border: 0;
  border-radius: var(--radius-md);
}
.value-bar[hidden] { display: none; }
.value-bar-copy { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.6; }
.value-bar-copy a { font-weight: 700; }
.value-bar-close {
  margin-left: auto; flex: none;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--sub);
  font-size: 17px; line-height: 1; border-radius: var(--radius-sm);
}
.value-bar-close:hover { color: var(--ink); background: var(--panel); }
.value-bar-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* R6A-6: 기계-증거 카운터 스트립 + As-of — 히어로 아래 사실 카운트 한 줄. */
.home-counter {
  margin: 14px 0 0; padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums;
}

/* 섹션 공통 */
.home-section {
  margin-top: 0;
  padding-top: 0;
}
.home-section-title {
  /* h2 전역 룰 재사용, ::before 액센트 바는 유지 */
  margin-bottom: 6px;
}
.home-section-note {
  margin: 0 0 12px;
  font-size: 13px; color: var(--sub); line-height: 1.7;
}

/* 리스트 리셋 — 번호 리스트 제거, 괘선 행 레이아웃 */
/* [/cards/ 목록 2026-09-04 Kevin] 이벤트 리스트 필터칩(.event-filter*)과 사후생성
   숨김 규칙(.archive-list.only-prereg)은 제거했다. 목록 모수가 사전등록 전용이라
   걸러 볼 것이 없다 — 마크업이 사라진 셀렉터를 남기면 다음 회차가 그 스타일을 보고
   칩을 되살린다. 관련 마크업은 web/templates/archive.html. */
/* [ui-overhaul PR-2 재스테일 2026-09-05] 설계가 열거한 primary 전환 5곳 중
   `.event-filter-btn[aria-pressed=true]` 은 #835 가 규칙째 지웠으므로 전환 대상에서
   빠진다(4곳 잔존). 칩을 되살릴 때는 `--accent` 가 아니라 `--primary` 계열로. */

/* [R6C-5] 목록 탭 (시장 확률 최근30일/전체) — #219 에서 이벤트 리스트는 필터칩으로
   대체됐지만 markets.html 은 계속 이 탭을 쓰므로 스타일 유지(복원). */
.archive-tabs { display: flex; gap: 16px; margin: 6px 0 4px; font-size: 14px; }
.archive-tabs a { text-decoration: none; color: var(--sub); padding: 6px 0 4px; }
.archive-tabs a:hover { color: var(--ink); }
.archive-tabs a.is-active {
  color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--accent);
}

/* [R7 UX ⑤] 시장 확률 변화 트랙 — 0~100% 축 위 전(빈 점)→후(찬 점) + 과반선(50%).
   무추천/R6.6: 상승·하락 방향색(빨강·초록) 금지. 후=인디고(주목), 전=중립 테두리.
   델타 부호(±pp)와 과반 위/아래 배지가 방향을 사실로 전달. */
.pm-track { margin: 11px 0 7px; max-width: 520px; }
.pm-track-bar { position: relative; height: 8px; background: var(--panel); border-radius: var(--radius-pill); }
.pm-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--line-strong); border-radius: 1px; transform: translateX(-1px); }
.pm-seg { position: absolute; top: 0; height: 100%; background: var(--accent-soft); border-radius: var(--radius-pill); }
.pm-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface); }
.pm-from { background: var(--surface); border: 2px solid var(--line-strong); }
.pm-to { background: var(--accent); }
.pm-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; }
.pm-readout { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pm-readout .pm-from-val, .pm-readout .pm-arrow { color: var(--sub); }
.pm-readout .pm-to-val { color: var(--ink); font-weight: 700; }
.pm-readout .pm-delta { margin-left: 2px; color: var(--sub); font-weight: 600; }
.pm-caption { color: var(--sub); }

/* [탐색 서브네비 통일 2026-07-22] 구 .explore-subnav(회색 텍스트 탭) 폐지 —
   4면 공용 서브네비가 .home-entry/.home-chip(칩) 로 통일. 아래 진입 칩 스타일 참조. */

/* [R7B·리서치 진입 개편] /research 진입 카드 -- 카드 서피스 공통 문법 (본문 서피스, 글래스 아님).
   2-up 그리드 + 카드 내부 세로 플렉스: CTA 를 바닥에 정렬해 두 카드 높이·시선 축을 맞춘다. */
.research-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  margin: var(--space-5) 0;
}
@media (min-width: 720px) { .research-grid { grid-template-columns: 1fr 1fr; } }
.research-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex; flex-direction: column;
}
.research-card h2 { margin: 0 0 var(--space-2); font-size: 17px; }
.research-card p { margin: 0 0 var(--space-4); color: var(--sub); font-size: 14px; line-height: 1.7; }
.research-card .hero-cta { margin: auto 0 0; } /* CTA 바닥 정렬 (그리드 높이 동기) */
/* [§2-S5] 틴트 정사각통 폐지 — 아이콘은 맨몸 스트로크, 텍스트와 같은 잉크 취급.
   위계가 필요하면 통이 아니라 아이콘을 키운다(19 -> 24). */
.research-card-icon {
  margin-bottom: var(--space-2);
  display: flex; align-items: center; color: var(--sub);
}
.research-card-icon svg { width: 24px; height: 24px; }

.home-list {
  list-style: none; margin: 0; padding: 0;
}

/* 개별 항목 행: 헤어라인 위, 내부 요소 단 */
.home-item {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.home-item:last-child { border-bottom: 1px solid var(--line); }
.home-item.empty-note {
  color: var(--sub); font-size: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}

/* 항목 표제: display_title 링크 + 오늘 배지 인라인 */
.home-item-title {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.3;
}
.home-item-title a {
  color: var(--ink); text-decoration: none;
  text-underline-offset: 3px;
}
.home-item-title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-decoration-thickness: 0.18em;
}

/* 메타 줄 (카운트·상태) */
.home-item-meta, .home-item-state {
  margin: 0;
  font-size: 13px; color: var(--sub);
  font-variant-numeric: tabular-nums; line-height: 1.6;
}
.home-item-state { color: var(--sub); }

/* 전이 카드 서브 줄 */
.home-item-cards {
  margin: 2px 0 0;
  font-size: 13px; color: var(--sub);
}
.home-item-cards a { font-weight: 600; }

/* ── 리스트 종결부 CTA — "… 전체 보기". 종전엔 맨바닥 좌측정렬 인디고 텍스트 링크
   (.home-section-note > a)라 카드 리스트와 시각 언어가 어긋나고 위치도 붕 떠 보였다.
   리스트 폭 전체를 쓰는 낮은 행으로 내려 목록의 마지막 항목처럼 읽히게 한다:
   카드와 같은 라운드(--radius-md)·같은 수평 범위, 위 여백은 카드 간 간격(--space-3).
   색은 본문 중립(--sub) + 인셋 패널 배경, 인디고는 hover 에서도 쓰지 않는다.
   .home-section-note 자체는 링크 없는 주석(#home-transition-note·noscript)도 쓰므로
   건드리지 않는다. 적용 = home(내 종목·최근 이벤트)·markets. ── */
.list-more {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: var(--space-3) 0 0;
  min-height: 44px; padding: var(--space-2) var(--space-4);
  background: var(--panel);
  border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--sub); font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background .16s, border-color .16s, color .16s;
}
/* 오른쪽 chevron — 카드의 .home-card-chev 와 같은 어포던스를 순수 CSS 로 (문구 불변). */
.list-more::after {
  content: ""; flex: none; width: 6px; height: 6px;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .16s;
}
.list-more:hover {
  background: var(--surface); border-color: var(--line-strong); color: var(--ink);
}
.list-more:hover::after { transform: translateX(2px) rotate(-45deg); }
/* 전역 :focus-visible 이 --radius-xs 로 모서리를 바꾸므로 행 라운드를 되돌린다. */
.list-more:focus-visible { border-radius: var(--radius-md); }

/* [P-explore-redesign] ② 최근 이벤트 카드 — 위계·전체 클릭·호버 리프트 */
.home-feed { display: flex; flex-direction: column; gap: var(--space-3); }
/* [§3.5] elevated — 인터랙티브 목록 카드만 그림자를 갖는다(1층). */
.home-feed .home-card {
  position: relative; overflow: hidden;
  padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: border-color .15s ease, background-color .15s ease;
}
.home-feed .home-card::before {   /* 왼쪽 상태 레일 (기본 중립, 채점중=앰버) */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-strong);
}
.home-feed .home-card.st-live::before { background: var(--lit-lit); }
/* [§3.7 / S7] 호버 부양 폐지. 위치 이동·그림자 점프 없이 보더 강화 + 배경 1단계만.
   "색 그림자 + 부양 호버"는 2024~25 AI 산출물 상투구다. */
.home-feed .home-card:hover { border-color: var(--line-strong); background: var(--panel); }
.home-card-chev { position: absolute; right: 16px; top: 18px; color: var(--line-strong); transition: color .16s, transform .16s; }
.home-feed .home-card:hover .home-card-chev { color: var(--accent); transform: translateX(3px); }

/* [탐색 카드] 썸네일이 붙은 이벤트 카드 — 미디어 오브젝트(그래픽 | 본문).
   랜딩 V7 과 **같은 그래픽**(web/blog_images.py::card_graphic)을 쓰되 레이아웃은
   다르다. 랜딩은 3열 그리드에 제목·날짜·곳수만 얹은 프리뷰라 그래픽이 위로 가고,
   탐색은 채점 배지·축 요약·주목 분해 막대·티커 칩까지 얹히는 **본문**이다.
   그 밀도를 2~3열에 넣으면 막대(.home-bar-wrap min-width 190px)와 칩이 줄바꿈에
   시달려 카드가 작아진다 — Kevin 지시는 정반대("카드 하나하나 크기를 키우고")다.
   그래서 단일 열을 유지하고 카드를 옆으로 키운다: 왼쪽 그래픽이 시선을 잡고
   오른쪽이 한 카드 = 한 초점으로 읽힌다(토스식 단일 초점).

   전부 `.has-thumb` 아래로 스코프한다. 같은 `.home-feed .home-card` 어휘를
   /cards/(archive.html, SSR)와 랜딩이 공유한다.
   [2026-09-04] /cards/ 목록도 이제 이 클래스를 붙인다 — 같은 그래픽·같은 밀도라
   레이아웃도 /explore/ 와 같아야 한다(#793 이 목록만 빠뜨렸던 자리). 랜딩은
   여전히 안 붙는다: 3열 프리뷰라 자기 `.landing-card*` 규칙을 쓴다. */
.home-feed .home-card.has-thumb {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: stretch;
  padding: 0;                    /* 패딩은 본문 칸이 갖는다 — 그래픽은 풀블리드 */
}
.home-feed .home-card.has-thumb .home-card-body { padding: 18px 20px; min-width: 0; }
.home-card-thumb {
  position: relative; z-index: 1;   /* 상태 레일(::before) 위로 겹치지 않게 */
  overflow: hidden;
  background: var(--accent-soft);   /* 사진 로드 전 빈 칸이 흰 구멍으로 안 보이게 */
  min-height: 100%;
}
.home-card-thumb img, .home-card-thumb svg {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* 상태 레일은 그래픽 위에 남긴다 — /explore/ 는 랜딩과 달리 채점 상태를 읽는
   면이라 레일이 뜻을 갖는다(랜딩은 상태 범례가 없어서 V7 이 껐다). */
.home-feed .home-card.has-thumb::before { z-index: 2; }

/* 좁은 폭 — 그래픽을 위로 쌓는다. 232px 열을 유지하면 본문이 100px 대로 눌려
   막대·칩이 글자 단위로 줄바꿈된다. 세로 스택은 그래픽을 오히려 크게 보여준다.
   경계 720px 는 랜딩 그리드(.home-feed.landing-cards)가 1열로 접는 값과 같다 —
   두 표면이 같은 지점에서 접혀야 한 제품으로 읽힌다. */
@media (max-width: 720px) {
  .home-feed .home-card.has-thumb { grid-template-columns: minmax(0, 1fr); }
  .home-card-thumb { min-height: 0; aspect-ratio: 16 / 9; }
  .home-feed .home-card.has-thumb .home-card-body { padding: 16px 16px 18px; }
}

.home-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.home-status { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.home-status .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* [S1 잔여] 구 값 #fff5e8/#b54708 은 Untitled UI warning 스케일 실값이었고
   **다크 오버라이드가 없어** 무채 심연 위에 밝은 크림 칩이 떴다(라이브 카드가
   표본에 없어 스크린샷 오라클이 못 봤다). 앰버는 --lit-lit 의미 채널이므로
   역할은 유지하고, 지면 위 알파 틴트로 바꿔 두 스킴에서 각각 실측한다. */
.home-status.live { background: rgba(247, 144, 9, .13); color: #b54708; }  /* 5.94:1 on tint over surface */
.home-status.live .dot { background: var(--lit-lit); box-shadow: 0 0 0 3px rgba(247,144,9,.18); }
.home-status.pending, .home-status.done { background: var(--panel); color: var(--sub); }
.home-status.pending .dot, .home-status.done .dot { background: var(--line-strong); }
.home-status.past { background: var(--panel); color: var(--sub); }
.home-status.past .dot { background: var(--lit-quiet); }
.home-status.none { background: var(--panel); color: var(--sub); }
@media (prefers-color-scheme: dark) {
  .home-status.live { background: rgba(245, 166, 35, .16); color: #f5a623; }  /* 8.31:1 on bg */
}
.home-status.none .dot { background: var(--line-strong); }
/* [이벤트 출처 배지 2026-09-06] 뉴스발/공시발 태그 — 채점 상태 칩과 같은 문법(pill),
   dot 은 없다(정적 출처 표기 -- live 류 상태가 아니다). 공시=중성(기존 pending/done과
   동일 팔레트, 새 색 도입 없음), 뉴스=인디고 틴트(.badge-theme 과 동일 accent-soft/
   accent-strong 조합) -- 둘 다 토큰만 참조해 다크 모드는 tokens.css 재정의를 그대로
   따라간다(별도 다크 오버라이드 불필요). */
.home-status.src-dart { background: var(--panel); color: var(--sub); }
.home-status.src-news { background: var(--accent-soft); color: var(--accent-strong); }
.home-card-when { font-size: 12px; color: var(--sub); font-weight: 600; }

.home-card-title { margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; padding-right: 26px; }
.home-card-title a { color: var(--ink); text-decoration: none; }
.home-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }  /* stretched-link: 카드 전체 클릭 */
.home-feed .home-card:hover .home-card-title a { color: var(--accent-strong); }
.home-item-axis { margin: 2px 0 0; font-size: 13px; color: var(--sub); line-height: 1.6; }
.home-item-firms { margin: 4px 0 0; font-size: 13px; color: var(--sub); }
.home-item-firms a { font-weight: 600; }
/* 상태 칩 -- .badge 기본형 위 중립 변형 (판정·방향 의미색 아님, --panel 틴트만) */
.badge-score-state { font-weight: 700; vertical-align: middle; }

/* [탐색 하단 재배치 2026-09-05] `.home-strip`(구 R7B ④ 2단 컴팩트 스트립)과
   `.home-strip-col` 은 제거했다 — 두 컬럼이 각각 /app/screener/ 와 /track-record/
   로 흩어져 "한 스트립의 2단" 이라는 형태 자체가 없어졌다. 마크업이 사라진
   셀렉터를 남기면 다음 회차가 그 스타일을 보고 스트립을 되살린다.
   (`.home-strip-col` 은 애초에 규칙이 없었다 — 맨 그리드 자식이었다.)
   두 이관지의 섹션은 아래 두 규칙이 각자 맡는다. */

/* 이관 ①: 스크리너의 "주목 전 → 급상승" — 필터/카운트와 결과 표 사이. 표가 이
   면의 초점이므로 스트립은 괘선으로 묶어 보조로 읽히게 둔다(단일 초점 유지). */
.scr-transitions {
  border-top: 1px solid var(--line);
  margin-top: var(--space-4); padding-top: var(--space-2);
  margin-bottom: var(--space-4);
}
/* 이관 ②: 트랙 레코드의 "채점 도착" — 스코어보드 바로 아래("다음 채점 도착일"
   타일의 뒷면). 스코어보드와 한 덩어리로 읽히도록 위 괘선 없이 간격만 준다. */
.tr-arrivals { margin-top: var(--space-4); }

/* "오늘" 배지 — 기존 .badge 규격, 앰버 강조 */
.badge-today { vertical-align: middle; }  /* 색은 위 tint 그룹 */
/* 최근 이벤트 행의 상대 발행일 ("N일 전") - 저강조 보조 라벨 */
.home-item-ago {
  margin-left: 8px; font-size: 12px; font-weight: 500;
  color: var(--ink-soft); vertical-align: middle;
}

/* 전이 항목 빛 라벨 */
.hl-light {
  font-size: 12px; color: var(--sub); font-weight: 600;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 0 8px; height: 20px;
  display: inline-flex; align-items: center; letter-spacing: 0.01em;
}

/* 하단 CTA 섹션 */
.home-footer-cta {
  padding: 20px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.home-footer-cta .hero-cta { margin-top: 0; }

/* [R7B] Ask Sayo 로그아웃 스텁 런처 -- 시각은 여기서 (인라인은 위치·형상만).
   스텁 배선 전 표면이 style.css 를 로드하므로 안전. 패널 내부 스타일 아님. */
#sayo-panel-launcher {
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-raised);
  display: inline-flex; align-items: center; gap: 8px;
}
/* 런처 마스코트 — 장식 마크(aria-hidden). 원반 채움은 var(--accent), 링은 런처의
   currentColor(=--ink) 라 다크·팔레트 변경을 자동 추종한다. 눈은 evenodd 구멍이라
   버튼 배경이 비친다 - 눈 전용 색이 없다. */
.sp-launcher-mark { flex: none; display: block; }

/* ── [R7B] 글래스 크롬 -- 떠 있는 요소 전용 (sticky 내비·런처·홈 가치 바).
   기본은 불투명 (backdrop-filter 미지원 fail-open). 본문 서피스 적용 금지. ── */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header-bar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-bottom-color: var(--glass-border);
  }
  .value-bar,
  #sayo-panel-launcher {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border-color: var(--glass-border);
  }
}
/* 투명도 축소 선호 존중 -- 지원 브라우저에서만 불투명 환원 */
@media (prefers-reduced-transparency: reduce) {
  .site-header-bar {
    background: var(--bg);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: var(--line);
  }
  .value-bar,
  #sayo-panel-launcher {
    background: var(--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--line);
  }
}

/* ── 데스크톱 ── */
@media (min-width: 720px) {
  body { font-size: 16px; }
  .site-header { padding-top: 28px; }
  .site-name { font-size: 22px; }
  .perf-narrow { display: none; }
  .perf-wide { display: block; }
  .basket-vals { flex-direction: row; gap: 16px; }
  .hero { padding: 84px 0 16px; }
  .feed { margin-top: 60px; }
}

/* [라운드3 ⑥c] 360px 내비 2줄 랩("트랙 레코드" 고아 행) 방지 — 5항목
   (홈·이벤트·스크리너·기업·트랙 레코드)이 한 줄에 들어오게 좁은 화면에서 내비 항목의
   가로 여백·자간·글자 크기를 줄인다. 라벨은 변경하지 않는다(템플릿 소관). */
@media (max-width: 380px) {
  .site-header nav a {
    padding: 10px 9px;
    font-size: 12px;
    letter-spacing: 0.01em;
  }
}

/* [R7B] 좁은 화면 4탭 단일행 수용 -- 라벨 불변, 스티키 내비 링크 여백·자간만 축소.
   (구 @media 380px 규칙은 .site-header 하위를 겨냥해 분리된 sticky 내비에 미적용.) */
@media (max-width: 430px) {
  .site-nav-links a { padding: 12px 8px; font-size: 12px; letter-spacing: 0.01em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* [R7C-fix] 앵커 이동 부드럽게 — 모션 선호 사용자에게만(감소 선호 시 즉시 점프 유지). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ═══════════════════════════════════════════════════════════════════
   [P23] 라운드 3 추가분 — 기업 색인 검색 + 404 안내면.
   (Unit A 기존 규칙은 위에서 종결. 아래는 신규 규칙만 추가.)
   ═══════════════════════════════════════════════════════════════════ */

/* 기업 색인 검색 — JS 켜질 때만 표시(company.hidden 해제). 입력 16px 이상(iOS
   자동 확대 방지). 라벨은 스크린리더용으로 노출, 시각은 placeholder 로 안내. */
.company-search { margin: 14px 0 6px; }
.company-search-label {
  display: block; color: var(--sub); font-size: 13px; margin-bottom: 5px;
  font-family: var(--sans);
}
.company-search-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 12px;
  font-size: 16px;                 /* iOS 자동 확대 방지 하한 */
  font-family: var(--sans);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.company-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.company-search-count {
  color: var(--sub); font-size: 13px; margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}

/* 404 안내면 — 조간지 톤 사실 서술 + 이동 링크. 기존 클래스 재사용을 우선하되
   지면 여백만 최소 규칙으로 얹는다. */
.not-found { padding: 8px 0 20px; }
.not-found .not-found-lead { color: var(--sub); font-size: 16px; line-height: 1.75; }
.not-found-nav { list-style: none; padding: 0; margin: 18px 0 0; }
.not-found-nav li { padding: 9px 0; border-bottom: 1px solid var(--line); }

/* -- [P26-A 설계 §4] 이익 인과 맵 - sensitivity-table 대체 (기업 개요) ------
   레인 배경·보더는 중립색(--panel·--line)만: 색 채널로 방향 표기 금지·앰버 금지.
   방향 정본 = 텍스트 배지 (유리 ▲/불리 ▽/양쪽 ▲▽). 연결선은 장식(pseudo, JS 0). */
.profit-map { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 0; }
.pm-lane { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; }
.pm-lane-title {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.pm-lane ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; }
.pm-lane li {
  padding: 7px 0 6px; border-top: 1px solid var(--line);
  line-height: 1.55; word-break: keep-all;
}
.pm-lane li:first-child { border-top: none; padding-top: 4px; }
.pm-reason { color: var(--sub); }
/* [P26-C] '이익' 노드 제거 - 버튼 오해 유발. 소제목+레인 배지로 수렴 의미 전달. */
/* 데스크톱 = 2컬럼 (유리|불리) + 양쪽 레인 전폭 (설계 §4.2) */
@media (min-width: 720px) {
  .profit-map { grid-template-columns: 1fr 1fr; }
  .pm-lane-both { grid-column: 1 / -1; }
}

/* -- [P26-B 설계 §7] 기업 개요 v2.2 figures - 스택 바 2종 + 실적 미니 바 ----
   바(.mix-bar)는 aria-hidden 장식 - 정보 정본은 .mix-legend / .fy-legend.
   세그먼트 = 무채색 명도 단계 (--ink 불투명도 사다리, 다크 모드 자동 대응) -
   방향 의미 없음, 색 채널 방향 표기 금지·앰버 금지. */
.mix-figure, .fy-figure { margin: 0 0 12px; }
.mix-caption {
  color: var(--sub); font-size: 12px; margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.mix-bar {
  display: flex; height: 20px; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
}
.mix-bar .mix-seg {
  display: flex; align-items: center; justify-content: center;
  height: 100%; overflow: hidden;
}
/* [P27] 넓은(share_pct ≥ 18) 세그먼트 온-바 share% 오버레이. 명도 사다리
   양쪽에서 판독되도록 무채색 legibility 그림자(흑백만·방향색/앰버 금지).
   pointer-events:none 으로 세그먼트 title 네이티브 호버를 가리지 않는다. */
.seg-num {
  /* 스케일 예외 1/1 (DESIGN §3.3) — SVG 온-바 오버레이. 좁은 세그먼트에서
     11px 는 바 밖으로 넘친다. 이 한 곳만 micro 아래를 허용한다. */
  font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--bg); font-weight: 600;
  text-shadow: 0 0 2px var(--ink), 0 0 2px var(--ink);
  white-space: nowrap; pointer-events: none;
}
/* [P26-C] major_items 절대금액 바 - 각 항목 1바 (스택 아님), 무채색 세그먼트 재사용 */
.amount-bars { list-style: none; margin: 0 0 6px; padding: 0; }
.amount-bars li { height: 8px; margin: 2px 0; }
.amount-bars .mix-seg { display: block; height: 100%; min-width: 2px; }
.mix-seg { background: var(--ink); }
.mix-seg-1 { opacity: .82; }
.mix-seg-2 { opacity: .62; }
.mix-seg-3 { opacity: .46; }
.mix-seg-4 { opacity: .34; }
.mix-seg-5 { opacity: .25; }
.mix-seg-6 { opacity: .18; }
.mix-seg-7 { opacity: .12; }
.mix-seg-8 { opacity: .07; }
.mix-legend {
  list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mix-legend li {
  display: flex; align-items: baseline; gap: 7px; padding: 3px 0;
  line-height: 1.5; word-break: keep-all;
}
.mix-key {
  width: 10px; height: 10px; flex: none; align-self: center;
  display: inline-block;
  background: var(--ink); /* 리뷰 I1: 키 자체에 배경 지정 - .mix-seg 규칙은
                             해당 클래스 보유 요소에만 적용되므로 키가
                             opacity만 얻고 투명해지는 결함 방지 */
}
.fy-svg svg { display: block; max-width: 100%; height: auto; }
.fy-legend {
  list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px;
  color: var(--sub); font-variant-numeric: tabular-nums;
}
.fy-legend li { padding: 2px 0; }

/* ══════════════════════════════════════════════════════════════════════
   R6B Wave B+B2 — 카드 오리엔테이션 레이어 (평결 칩·심박·미니 TOC·
   가지 개요 그리드·패널 크롬·공유 UI). 조간지 시스템 계승: 헤어라인 괘선·
   단일 앰버·명조 표제. 색 단독 의미 전달·앰버 방향색 금지.
   ══════════════════════════════════════════════════════════════════════ */

/* [R7C-fix] 앵커 착지 교정 — sticky .site-header-bar(실측 약 45px) 아래로 여유 있게
   착지. 구 16px 는 비고정 헤더 가정이라 sticky 내비에 대상이 가렸다. 카드 상세의
   해시 타깃 전부(details.branch=#branch-N · 주요 섹션 id · 증명 아카이브 fragment ·
   #main "맨 위로")에 공통 오프셋을 준다. --anchor-offset = 내비 높이 + 여유. */
:root { --anchor-offset: 80px; }
#main,
#candidates, #scoring, #branches, #appendix, #pub-info,
#rejected, #quiet-first,
.branch-accordion details.branch { scroll-margin-top: var(--anchor-offset); }

/* ── [카드 리뉴얼 2단계 2026-09-05 Kevin] R7C 결론 카드(회색 박스) 폐지 ──
   .card-conclusion / .conclusion-line / -what / -reach / -judged / -sub / -delta /
   -meta 여덟 규칙을 함께 지운다. 유일 소비처였던 card.html 헤더가 통째로
   사라졌으므로 남겨 두면 다음 회차가 "스타일이 있으니 마크업도 있겠지"로 박스를
   되살린다. `.card-status` 는 home.html·home.mjs 가 계속 쓰므로 존치.
   박스 대신 제목·부제 아래로 내린 메타 한 줄 — 출처 링크와 배지만. */
.card-headline-meta {
  margin: 0 0 var(--space-3);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-2);
}
.card-headline-meta:empty { display: none; }

/* [커뮤니티 MVP §6.3] 카드 담기 토글. 기본 hidden 이고 인라인 스크립트가 푼다 —
   JS 없으면 눌러도 아무 일 없는 컨트롤이라 아예 안 띄운다. */
.card-follow {
  margin: var(--space-2) 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.follow-toggle {
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.follow-toggle:hover { border-color: var(--ink); background: var(--panel); }
.follow-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* ── [R7C] 경로 보기 제자리 공개 (attention 행) ── */
details.attn-path { margin: 0; }
details.attn-path > summary {
  cursor: pointer; font-size: 12px; color: var(--sub);
  min-height: 44px; display: inline-flex; align-items: center;
}
details.attn-path > summary:hover { color: var(--accent); }
details.attn-path[open] { background: var(--panel); border-radius: var(--radius-sm); padding: 0 var(--space-3) var(--space-2); }
.attn-path-more { margin: var(--space-1) 0 0; font-size: 12px; }
.attn-path-more a { color: var(--sub); }
.attn-path-more a:hover { color: var(--accent); }

/* ── [R7C] 증명 아카이브 — 카드 서피스 + 접힘 리스트 행 ── */
.proof-archive {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-top: var(--space-8);
}
.proof-archive > h2 { margin-top: 0; }
details.proof-group { border-top: 1px solid var(--line); }
details.proof-group > summary {
  cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink);
  min-height: 44px; display: flex; align-items: center; justify-content: space-between;
}
details.proof-group > summary:hover { color: var(--accent); }
.proof-list { display: flex; flex-direction: column; padding-bottom: var(--space-2); }
.proof-list .fragment-compat { border-top: 1px solid var(--line); }
.proof-list .fragment-compat:first-child { border-top: 0; }
.proof-list a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: var(--space-2) 0;
  text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600;
}
.proof-list a::after { content: "\2192"; color: var(--sub); }
.proof-list a:hover { color: var(--accent); }
.proof-actions { border-top: 1px solid var(--line); padding-top: var(--space-3); margin: 0; }

/* [R6B-1d] 맨 위로 — 정적 링크(고정 아님, R6.6 가드레일). 섹션 끝 지면 앵커. */
.back-to-top {
  display: block; margin: 10px 0 0; font-size: 13px;
  color: var(--sub); text-decoration: none;
}
.back-to-top:hover { color: var(--accent); }

/* [R6D] 지도 층 "종목 먼저 뒤집기" — 주목 전 카드 그리드 + 경로 아코디언 + 부록 A.
   (구 .branch-overview 가지 개요 그리드는 아코디언 닫힘 상태가 역할을 대체 — 제거.) */

/* 서브섹션 A — 아직 주목받기 전. quiet-card 그리드(모바일 1열, ≥768px 2열). */
.quiet-first { margin: 10px 0 24px; }
.quiet-first > h3, .branch-accordion > h3 {
  font-size: 17px; font-weight: 700;
  margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.quiet-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) {
  .quiet-grid { grid-template-columns: 1fr 1fr; }
}
/* 조간지 톤 — 크림 패널 배경 + 1px 헤어라인 + 좌측 3px 앰버 룰(verdict-block 전례). */
.quiet-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px;
}
.quiet-card-head {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: baseline; justify-content: space-between;
}
.quiet-card-name { font-weight: 700; font-size: 16px; }
.quiet-card-name a { color: var(--ink); text-decoration: none; }
.quiet-card-name a:hover { color: var(--accent); text-decoration: underline; }
.quiet-card-att {
  font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.quiet-card-refs { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
/* 경로 참조 칩 — 링크 칩만 앰버 밑줄(단일 앰버 원칙, .badge 언어 재사용). */
.path-chip {
  display: inline-flex; align-items: center; min-height: 24px; padding: 1px 8px;
  font-size: 12px; color: var(--accent-strong); background: var(--accent-soft);
  border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
}
.path-chip:hover { color: var(--accent); }
.quiet-card-detail > summary {
  cursor: pointer; color: var(--sub); font-size: 12px; padding: 4px 0; min-height: 28px;
}
.quiet-card-detail > summary:hover { color: var(--accent); }
.quiet-card-detail blockquote {
  margin: 6px 0; padding: var(--space-2) var(--space-3); background: var(--panel);
  border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--sub);
}
.quiet-card-excess { margin: 6px 0 2px; font-size: 12px; }
.quiet-card-hyg { margin: 6px 0 2px; font-size: 12px; color: var(--sub); }
.quiet-card .impact-disclosure { margin-top: 2px; }

/* 연결 기각 블록 — 실명+사유 잔존(은폐 금지). 접힘 상태 기본. */
.rejected-block { margin: 10px 0 4px; }
.rejected-block > summary {
  cursor: pointer; color: var(--sub); font-size: 13px; padding: 6px 0; min-height: 32px;
}
.rejected-block > summary:hover { color: var(--accent); }
.rejected-list { list-style: none; padding: 0; margin: 6px 0 0; }
.rejected-list > li {
  padding: 8px 0; border-bottom: 1px solid var(--line); word-break: keep-all;
}
.rejected-list > li:last-child { border-bottom: none; }

/* 경로 대표 종목 1줄 (사실 표시, 순위 아님). */
.branch-reps { font-size: 13px; margin: 6px 0 4px; word-break: keep-all; }
.branch-reps a { color: var(--ink); }
.branch-reps a:hover { color: var(--accent); }

/* [P21-6c] 경로 소속 기업 실명 열거 — 판정 상태별 (확인/검증 전/기각). */
.branch-firms { font-size: 13px; margin: 6px 0 2px; word-break: keep-all; }
.branch-firms a { color: var(--ink); }
.branch-firms a:hover { color: var(--accent); }
.branch-firms-pending, .branch-firms-rejected { color: var(--sub); }
.branch-firms-rejected a { color: var(--sub); text-decoration: underline; }

/* [카드 UI 수리] 결함3 — 상태 3종(확인/검증 전/기각)을 문단 스택 대신 한 줄 카운트
   스트립으로. 개별 <p>(branch-firms 등)는 렌더 계약(attn-path 인라인 공용·테스트)
   그대로 두고 감싸는 컨테이너만 flex 로 한 줄에 흘려 산식(확인+대기+기각=전체)이
   스스로 드러나게 한다. 실명 링크·기각 사유 링크는 각 <p> 안에 그대로 보존
   (정보 소실 없음 — 재배치만). */
.branch-status-strip {
  display: flex; flex-wrap: wrap; align-items: baseline;
  row-gap: 4px; margin: 6px 0 2px;
}
.branch-status-strip > p { margin: 0; }
.branch-status-strip > p + p::before {
  content: "\00b7"; display: inline-block; margin: 0 8px; color: var(--sub);
}
.branch-status-total {
  font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums;
}
.branch-status-strip > .branch-status-total::before {
  content: "\2014"; display: inline-block; margin: 0 8px; color: var(--sub);
}

/* 결함3 — CTA 랭킹: "전체 근거 보기"가 주 CTA (기존엔 스타일이 아예 없어 본문
   16px 그대로 노출돼 가장 큰 글자가 되는 고아 상태였다). 근거 상세(summary,
   branch-detail)는 이미 13px/sub 로 저강조라 대비가 자동 성립. */
.branch-evidence-link { margin: 8px 0 4px; }
.branch-evidence-link a {
  font-size: 13px; font-weight: 700; color: var(--accent);
  text-decoration-color: var(--accent-soft); text-decoration-thickness: 0.14em;
}
.branch-evidence-link a:hover { color: var(--accent-strong); text-decoration-color: var(--accent-strong); }

/* 섹션 푸터 — 전체 N곳은 부록 A 안내. */
.section-footer { font-size: 13px; color: var(--sub); margin: 16px 0 8px; }

/* [R6B-2c] 패널 크롬 — 펼친 가지가 경계 있는 카드로 읽히게. verdict-block·
   evidence-block 패턴 동형: 좌측 앰버 괘선 + --panel 배경 + 헤더 밴드. */
details.branch[open] {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 0 var(--space-3) var(--space-3);
  margin-top: 8px; margin-bottom: 8px;
}
details.branch[open] > summary.branch-summary {
  background: var(--panel);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  margin: 0 -12px 8px; padding-left: 12px; padding-right: 12px;
}
details.branch[open] .branch-title { color: var(--ink); }

/* [R6B-1g] 공유 + 부록 토글 — 인라인 스크립트 점진 향상. 버튼은 JS 활성 전 숨김. */
.card-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
/* [R7C] 증명 아카이브 액션 행 — 44px 터치 타깃 보강. */
.share-btn, a.share-x { min-height: 44px; display: inline-flex; align-items: center; }
.share-btn, .appendix-toggle {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 6px 12px; font-size: 13px; font-family: var(--sans);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.share-btn:hover, .appendix-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--panel); }
.share-btn[hidden], .appendix-toggle[hidden] { display: none; }
/* [R-2] 리스크 변수 -> 관점 검증 CTA (fresh 컨센서스 변수 한정, JS 활성 전 hidden) */
.risk-cta { margin: 12px 0 4px; }
.risk-cta-consensus { margin: 0 0 6px; font-size: 13px; opacity: .85; }
.risk-cta-btn {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 6px 12px; font-size: 13px; font-family: var(--sans);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer;
}
.risk-cta-btn:hover { border-color: var(--accent); color: var(--accent); }
.risk-cta-btn[hidden] { display: none; }
a.share-x {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 6px 12px; font-size: 13px;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
a.share-x:hover { border-color: var(--accent); color: var(--accent); }
.appendix-toggle-wrap { margin: 8px 0 14px; }
/* Global signed-in/out navigation controls. */
.nav-auth { display: flex; align-items: center; margin-left: 8px; }
.nav-login { border: 1px solid var(--ink); background: none; color: inherit;
  border-radius: 8px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.nav-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink);
  background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ── [P36 §5.1 U5] 판정 전문 (thesis) — 격리 네임스페이스, 기존 규칙 오버라이드 금지.
   attn-path/attn-evidence 와 동렬의 보조 details (제자리 점진 공개). ── */
details.attn-thesis { margin: 0; }
details.attn-thesis > summary {
  cursor: pointer; font-size: 12px; color: var(--sub);
  min-height: 44px; display: inline-flex; align-items: center;
}
details.attn-thesis > summary:hover { color: var(--accent); }
details.attn-thesis[open] {
  background: var(--panel); border-radius: var(--radius-sm);
  padding: 0 var(--space-3) var(--space-2);
}
/* 본문 폭·리듬 — 종전엔 ①~⑤ 다섯 단락이 화면 전폭·같은 밀도로 이어져 통짜 벽이었다.
   ① 줄 길이를 ~70ch 로 묶고 ② 라벨을 자체 줄 소제목으로 올려(위 여백 > 아래 여백)
   섹션 단위 리듬을 준다. 소제목 톤은 아래 '상세 서랍 소제목 체계' 공통 규칙이 잡는다. */
.thesis-body { max-width: var(--detail-measure, 70ch); }
.thesis-headline {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 16px; line-height: 1.4; font-weight: 800;
  letter-spacing: -.01em; color: var(--ink);
}
.thesis-para { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink); }
.thesis-para strong { color: var(--ink); }   /* 마커 없는 구포맷 런인 폴백 */
.thesis-para + .thesis-para { margin-top: var(--space-3); }
/* 출처 표기('(자체 분석 §N)'·'(이벤트 카드)') — 텍스트는 보존하고 톤만 내린다. */
.thesis-cite { color: var(--sub); font-size: 0.92em; }
.thesis-meta { margin: var(--space-5) 0 0; font-size: 12px; color: var(--sub); }

/* [W-PR1 2026-09-07] 위 ui-overhaul PR-2 주석이 남긴 지시("panel.css 가 재도색되는
   PR 에서 다크 2값도 같이 옮겨라")를 이행한 자리다. panel.css 의 --sp-* 가 이제
   tokens.css 전역 토큰을 var() 로 읽으므로(--sp-surface=var(--bg),
   --sp-border=var(--line)), 자리표시자도 같은 두 토큰을 읽는다. 이게 **미러 계약**이다:
   자리표시자와 실제 패널이 같은 토큰을 읽는 한 "스텁 색 ≠ 패널 색" 번쩍임이 원리적으로
   불가능하고, 다음 팔레트 변경(W-PR2)도 양쪽에 동시에 파급된다.
   종전에는 라이트 2값이 우연히 zinc 와 같았고(#f7f7f8/#e4e4e7) 다크 2값만 구 네이비
   (#0d1220/#232b3d)로 남아 있었다 — 그래서 다크에서만 무채 지면 위 파란 크롬이었다.
   토큰 참조라 다크 오버라이드 블록 자체가 필요 없어져 걷어냈다. 잠금은
   test_panel_build.py::test_style_css_prepaint_mirrors_panel_tokens 가 진다 —
   "다크 블록이 존재하는가" 가 아니라 "자리표시자와 패널이 같은 토큰을 읽는가" 를
   본다(존재 열거는 값이 갈려도 초록이었다). */

/* [T22] Ask Sayo 패널 프리페인트 예약 (다크모드 FOUC 방지와 동일 패턴) — MPA 전면 로드마다
   패널이 JS 부트 후에야 마운트돼 "닫힘→재열림"으로 보이는 플래시를 없앤다. 이 파일은
   <head> render-blocking 이라 첫 페인트부터 적용된다. body.sayo-shell.sp-open 은 panel.css
   의 도킹 폭 예약(padding-right)과 동일 셀렉터 — 스텁이 첫 페인트 전에 클래스만 선반영하면
   폭 점프가 사라진다. sp-prepaint::after 는 실제 패널이 마운트되기 전까지 표면만 그리는
   자리표시자 — .sayo-panel 서피스 값(panel.css ~L10, 다크 ~L247)을 그대로 미러링하고
   z-index 는 .sayo-panel(70) 바로 아래(69, panel.css .sp-backdrop 과 동일 층 - 도킹 전용
   프리페인트라 오버랩 없음). */
body.sayo-shell.sp-open { padding-right: var(--sp-w, 400px); }
body.sayo-shell.sp-prepaint::after {
  content: "";
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--sp-w, 400px);
  z-index: 69;
  /* 미러 계약 — panel.css `.sayo-panel` 의 --sp-surface/--sp-border 와 같은 토큰. */
  background: var(--bg); border-left: 1px solid var(--line);
}
@media (max-width: 1023px) {
  body.sayo-shell.sp-open { padding-right: 0; }
  body.sayo-shell.sp-prepaint::after { display: none; }
}
/* [카드 리뉴얼 2단계 2026-09-05 Kevin] 통합 서랍 — 종전 개별 details 4종
   (attn-thesis·attn-relevancy·attn-path·attn-evidence)이 이 하나로 합쳐졌다.
   여닫이 규격은 넷이 쓰던 것을 그대로 이어받는다(회귀 없음).
   [ui-overhaul 출하 2026-09-05] 그 "넷이 쓰던 값"이 12.5px 에서 12px 로 내려앉았다
   (시안 PR-3 타이포 8단 스케일). #860 은 12.5px 를 복사했지만 그건 이 규칙이 태어난
   시점의 형제 값이라, 스케일 적용 뒤에는 형제와 어긋나는 스케일 밖 고유값이 된다.
   #860 의 의도("넷과 같게")를 지키는 값은 12px 다. */
details.attn-full { margin: 0; }
details.attn-full > summary {
  cursor: pointer; font-size: 12px; color: var(--sub);
  min-height: 44px; display: inline-flex; align-items: center;
}
details.attn-full > summary:hover { color: var(--accent); }
details.attn-full[open] {
  background: var(--panel); border-radius: var(--radius-sm);
  padding: 0 var(--space-3) var(--space-2);
}
/* 서랍 안 첫 소제목은 summary 바로 아래라 위 여백이 과하다(공통 규칙은 20px). */
details.attn-full > .drawer-section-title:first-of-type { margin-top: var(--space-3); }

/* [R7J §4.1] 연관도 4축 판정 근거 — 밴드 아래 접이식(attn-thesis 동렬 보조 details).
   축 라벨(직접성·노출 규모·경쟁 위치·반영 시차) + 회사별 분석 자료 기반 근거 문장. */
details.attn-relevancy { margin: 0; }
details.attn-relevancy > summary {
  cursor: pointer; font-size: 12px; color: var(--sub);
  min-height: 44px; display: inline-flex; align-items: center;
}
details.attn-relevancy > summary:hover { color: var(--accent); }
details.attn-relevancy[open] {
  background: var(--panel); border-radius: var(--radius-sm);
  padding: 0 var(--space-3) var(--space-2);
}
/* [R7J-2] 연관도 4축 = 2단 정의형 (라벨 좌측 · 근거 우측).
   종전엔 라벨과 근거가 같은 x 에서 시작해 8줄이 나란히 쌓였다 — 네 축의 경계가
   안 보이고 눈이 짚을 기준선이 없었다. 라벨(12.5px)이 근거(13.5px)보다 작아
   위계까지 뒤집혀 있었다. 라벨 컬럼을 max-content 로 두면 네 축이 세로로 줄을
   맞춰 스캔 기준선이 생기고, 라벨 길이가 바뀌어도 자동으로 따라간다.
   좁은 화면은 컬럼이 본문을 눌러 읽기 나빠지므로 종전대로 한 줄씩 쌓는다. */
.relevancy-axes {
  margin: var(--space-2) 0 0;
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: var(--space-4); row-gap: var(--space-3);
  align-items: baseline;
}
.rel-axis-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.rel-axis-basis { margin: 0; font-size: 13px; line-height: 1.65; color: var(--sub); }
@media (max-width: 540px) {
  .relevancy-axes { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .rel-axis-basis { margin: 2px 0 0; }
}

/* ── [R7K] 보조 상세 서랍 — 판정 전문·연관도 근거·경로·근거 원문 4종의 개별 details 를
   하나의 차분한 그룹으로 묶는 공유 컨테이너. 세로로 쌓인 낱개 토글 더미가 아니라 한 덩어리
   상세 affordance 로 읽히게 함. 개별 details 의 클래스·요약 카피·접힘 동작은 불변, 여기선
   시각적 그룹핑(공유 서피스·얇은 구분선·행 패딩)만 담당. 원수치·방향성 색 없음(토스식 차분). */
.attn-detail-group {
  margin: var(--space-2) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
/* 그룹 내 각 details 는 얇은 구분선으로 나뉜 한 행 — 첫 행 위 선 없음. */
.attn-detail-group > details { border-top: 1px solid var(--line); }
.attn-detail-group > details:first-child { border-top: 0; }
/* 요약 행 — 좌우 여백을 공유해 한 목록의 항목처럼. 44px 터치 타깃 보장. */
.attn-detail-group > details > summary {
  padding: 0 var(--space-3);
  min-height: 44px;
  font-size: 13px;
}
/* [카드 UI 수리] summary 는 flex/inline-flex 라 ::marker 가 애초에 안 그려지므로
   list-style-position 은 데드 룰 — 제거. */
/* [카드 UI 수리 2026-09-02 Kevin] 셰브런 — 네 서랍의 summary 는 여닫이라는 시각 신호가
   전혀 없어 "판정 원문 보기가 어디 있냐"로 읽혔다(Kevin 반려). ::marker 가 안 그려지는
   자리(위 주석)를 ::after 로 대신 채운다. 접힘 ▸ · 펼침 ▾ 은 이 파일의 기존 관용
   (details.branch-firms > summary::before, style.css:~915)을 그대로 따른다. */
.attn-detail-group > details > summary::after {
  content: "\00a0\25B8"; color: var(--accent); font-size: 11px;
}
.attn-detail-group > details[open] > summary::after { content: "\00a0\25BE"; }
/* 호버 — 색 변화(개별 details 규칙)만으로는 행 전체가 클릭 타깃이라는 게 안 보인다.
   행 배경을 얹어 44px 타깃 전체를 드러낸다. */
.attn-detail-group > details > summary:hover { background: var(--panel); }
/* 펼침 상태 — 개별 details 의 [open] 배경 카드 오버라이드(그룹이 이미 서피스 제공).
   [카드 UI 수리] 좌우 패딩을 여기 두면 summary(자체 좌우 패딩 보유)의 좌우 패딩과
   중첩돼 열림 상태에서 제목이 본문보다 12px 안쪽으로 밀리고 여닫을 때 튄다. 좌우
   패딩은 본문 자식(:not(summary))으로 옮기고 여기는 아래 여백만 남긴다. */
.attn-detail-group > details.attn-full[open],
.attn-detail-group > details.attn-thesis[open],
.attn-detail-group > details.attn-relevancy[open],
.attn-detail-group > details.attn-path[open] {
  background: var(--panel);
  border-radius: 0;
  padding: 0 0 var(--space-3);
}
.attn-detail-group > details.attn-evidence[open] {
  background: var(--panel);
  padding: 0 0 var(--space-3);
}
/* blockquote(attn-evidence, style.css:~580)는 자체 좌우 var(--space-3) 패딩을 이미
   보유 — 여기서 또 겹치면 동률 특이도(0,1,2)라 후행 규칙이 이겨서 자체 상하 패딩을
   0 으로 지운다(이중 인셋이 아니라 반대로 패딩 소실). blockquote 만 제외. */
.attn-detail-group > details > :not(summary):not(blockquote) {
  padding: 0 var(--space-3);
}
/* 근거 원문(attn-evidence) 요약은 스니펫 원문이라 길 수 있음 — 그룹 행 규격에 맞춤. */
.attn-detail-group > details.attn-evidence > summary {
  padding: var(--space-2) var(--space-3);
  min-height: 44px; align-items: center; display: flex;
}
.attn-detail-group > details.attn-evidence blockquote { margin: 0 0 var(--space-1); }

/* ── 상세 서랍 소제목 체계 — 판정 전문·연관도 근거·경로 세 섹션이 같은 라벨 톤과 같은
   여백 리듬을 쓰게 하는 공통 규칙. 종전엔 판정 전문만 런인 라벨(굵은 글씨가 본문 첫
   문장에 붙어 흐르는 형태)이라 아래 두 섹션과 위계가 어긋나 보였다. 라벨은 자체 줄
   13px/700/ink, 위 여백(20px) > 아래 여백(8px). 본문 폭은 셋 다 --detail-measure.
   매크로(branch_firms_rollup)·연관도 dl 은 타 표면 공용이라 서랍 안으로만 한정한다. ── */
.attn-detail-group { --detail-measure: 70ch; }
.thesis-section-title,
.drawer-section-title,
.attn-detail-group .rel-axis-label,
.attn-detail-group .branch-firms > strong {
  font-size: 14px; font-weight: 800; line-height: 1.45;
  letter-spacing: -.01em; color: var(--ink);
}
.thesis-section-title,
.drawer-section-title { margin: var(--space-5) 0 var(--space-2); }
/* [서랍 가독성 2026-09-06 Kevin] 섹션 제목 위계 강화 — "연관도 판정 근거"·"전달 경로"
   가 본문과 같은 무게라 단락 경계가 안 보였다. 왼쪽 accent 바 + 위 여백 확대로
   "여기서 새 단락이 시작한다"를 한눈에. 글자 크기는 안 키운다(토스식 단일 초점 —
   제목이 본문을 이기면 안 된다). 첫 소제목의 위 여백만 기존 규칙이 따로 잡는다. */
.attn-detail-group .drawer-section-title {
  margin-top: var(--space-6);
  padding-left: var(--space-3);
  border-left: 3px solid var(--accent);
  line-height: 1.3;
}
/* 연관도 4축 — 라벨 고정폭 2열 정렬(R7J-2)은 유지, 폭·행 리듬만 소제목 체계에 맞춘다. */
.attn-detail-group .relevancy-axes {
  max-width: var(--detail-measure); row-gap: var(--space-4);
}
.attn-detail-group .rel-axis-basis { font-size: 14px; line-height: 1.7; }

/* ── [서랍 가독성 2026-09-06 Kevin] 펼친 패널이 "시각적으로 눈에 잘 안 들어옴" ──
   4축과 전달 경로가 구분 약한 텍스트 벽이라 스캔이 안 됐다. 내용·구조는 그대로 두고
   **행 경계와 라벨 위계만** 세운다(문구 무변경 — §0.8 앵커·게이트 무접촉).

   ① 축 행 사이 헤어라인 — 네 축이 어디서 끊기는지 눈이 바로 짚는다. `dt` 마다 위쪽
      경계를 주되 첫 행은 뺀다(소제목 바로 아래 이중선 방지). 2열 그리드라 `dt`·`dd`
      가 같은 행이므로 **둘 다** 같은 경계를 받아야 선이 끊기지 않는다.
   ② 라벨을 차분한 배지로 — 굵기만으로는 본문과 안 갈렸다. accent-soft 틴트 + 작은
      라운드로 "이건 분류 라벨"이라고 말한다. 색은 토큰(--accent-strong)이라 다크에서
      자동으로 뒤집힌다.
   ③ 본문 줄 길이 — 이미 --detail-measure(70ch)가 걸려 있어 그대로 둔다. */
.attn-detail-group .relevancy-axes { row-gap: 0; }
.attn-detail-group .rel-axis-label,
.attn-detail-group .rel-axis-basis {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3); margin-top: var(--space-3);
}
.attn-detail-group .relevancy-axes > .rel-axis-label:first-of-type,
.attn-detail-group .relevancy-axes > .rel-axis-label:first-of-type + .rel-axis-basis {
  border-top: 0; padding-top: 0; margin-top: 0;
}
.attn-detail-group .rel-axis-label {
  align-self: start;
  background: var(--accent-soft); color: var(--accent-strong);
  border-radius: 6px; padding-left: var(--space-2); padding-right: var(--space-2);
  padding-bottom: 3px; font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
/* 배지에 상단 패딩을 주면 헤어라인과 배경이 겹쳐 지저분해진다 — 경계는 위에서
   margin 으로 띄우고 배지 자체는 3px 로 얇게 잡는다. */
.attn-detail-group .rel-axis-label { padding-top: 3px; }
.attn-detail-group .relevancy-axes > .rel-axis-label:first-of-type { margin-top: 0; }
@media (max-width: 540px) {
  /* 1단으로 접히면 라벨↔근거가 세로로 붙으므로 근거 쪽 경계선을 지운다 —
     안 지우면 한 축 안에 선이 그어져 짝이 갈라져 보인다. */
  .attn-detail-group .rel-axis-basis {
    border-top: 0; padding-top: 0; margin-top: var(--space-1);
  }
  .attn-detail-group .rel-axis-label { justify-self: start; }
}
/* 좁은 화면 회귀 되돌리기 — 540px 이하에서는 위 4축 그리드가 1단(1fr)으로 접혀
   row-gap 이 '축 사이'뿐 아니라 '한 축 안의 라벨↔근거' 간격까지 함께 벌린다.
   그래서 2단용 16px 을 그대로 두면 라벨이 제 근거에서 떨어져 짝이 풀린다.
   기존 모바일 룰(.relevancy-axes, 특이도 0-1-0)은 위 .attn-detail-group .relevancy-axes
   (0-2-0)에 지므로 같은 특이도로 다시 적어 종전 간격(12px)을 그대로 복원한다. */
@media (max-width: 540px) {
  .attn-detail-group .relevancy-axes { row-gap: var(--space-3); }
}
/* [서랍 가독성 2026-09-06 Kevin] 축 근거 안 핵심 수치 — 굵기로만 잡는다.
   방향색(--color-direction-*)은 수혜/피해라는 뜻을 진 채널이라 중립 수치에 입히면
   무추천 철칙을 어긴다. 색은 본문 그대로, 무게만 올린다. */
.attn-detail-group .rel-axis-basis .fig { font-weight: 700; color: var(--ink); }
/* [서랍 가독성 2026-09-06 Kevin] 경로 문장의 마디 칩 — 「」 대신 옅은 틴트로
   "이 이름이 한 단계"임을 표시한다. 산문 흐름을 끊지 않게 배경만 주고 굵기는
   본문 그대로 둔다(칩이 문장을 이기면 다시 나열로 읽힌다).

   패딩을 쓰지 않는다. 마디 뒤에는 조사가 바로 붙는데(「병목」+"에 닿고") 가로
   패딩을 주면 "병목 에" 처럼 조사가 떨어져 보여 한국어가 어색해진다. 배경을
   box-shadow 스프레드로 넓히면 글자 자리(text metrics)를 건드리지 않고 틴트만
   커진다 — 조사는 그대로 붙어 있고 칩은 칩으로 보인다.

   틴트는 --accent-soft 다. --panel 을 쓰면 서랍 배경(--surface)과 명도차가 거의
   없어 칩이 안 보인다(실측: 첫 시도가 그랬다). accent-soft 는 방향 의미가 없는
   중립 강조색이라 무추천 경계도 건드리지 않는다.

   **글자색도 --accent-strong 으로 준다.** accent-soft 배경만으로는 흰 서피스
   위에서 여전히 안 읽혔다(실측 2차: computed style 은 맞는데 화면에서 구분이
   안 됐다 — 명도차가 너무 작다). 같은 패널의 4축 라벨 배지가 배경+글자색
   조합으로 잘 읽히므로 그 검증된 처리를 그대로 쓴다. 굵기는 올리지 않는다 —
   칩이 문장을 이기면 다시 나열로 읽힌다. */
.path-sentence .path-step {
  background: var(--accent-soft); color: var(--accent-strong);
  border-radius: 3px;
  box-shadow: 0 0 0 3px var(--accent-soft);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* 경로 — 롤업 라벨('연결 확인' 등)도 런인 대신 자체 줄로. */
.attn-detail-group .attn-full .path-list,
.attn-detail-group .attn-path .path-list,
.attn-detail-group .branch-firms { max-width: var(--detail-measure); }
.attn-detail-group .branch-firms {
  margin: var(--space-4) 0 0; font-size: 14px; line-height: 1.7;
}
.attn-detail-group .branch-firms > strong { display: block; margin-bottom: var(--space-1); }

/* [P-explore-redesign] 탐색 랜딩 고유 진입 칩 */
.home-entry { display: flex; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.home-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px;
  border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--line-strong); color: var(--ink);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.home-chip:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--panel); }
.home-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-chip svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* 파급 경로(axis) 승격 — 본문색 세그먼트 + 액센트 화살표 */
.home-card-axis { margin: 0 0 14px; font-size: 14px; line-height: 1.55; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.home-card-axis .seg { color: var(--ink); font-weight: 500; }
.home-card-axis .arw { color: var(--accent); font-weight: 800; font-size: 12px; }

/* 노출 블록: 큰 수치 + 세기 바 + 범례 */
.home-expo { display: flex; align-items: center; gap: 16px; padding: 11px 0 0; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.home-fig { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.home-fig b { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.home-fig span { font-size: 12px; color: var(--sub); }
/* [P21-8p] 판정 후 제외분 병기 — 곳수 옆 부속이라 단위 라벨과 같은 위계 */
.home-expo-excluded { font-size: 12px; color: var(--sub); }
.home-bar-wrap { flex: 1; min-width: 190px; }
.home-bar { display: flex; height: 9px; border-radius: var(--radius-pill); overflow: hidden; background: var(--panel); }
.home-bar i { display: block; height: 100%; }
.home-legend { display: flex; gap: 14px; margin-top: 7px; font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.home-legend span { display: inline-flex; align-items: center; gap: 5px; }
.home-legend .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* 종목 칩 (stretched-link 위에 오도록 z-index) */
.home-firms { margin: 13px 0 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; position: relative; z-index: 1; }
.home-firm { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 600; text-decoration: none; }
.home-firm:hover { background: var(--accent); color: var(--accent-ink); }
.home-firm-more { font-size: 12px; color: var(--sub); font-weight: 600; }
/* [P21-8p] 연결 확인 0곳 — 칩 자리에 상태 한 줄 (칩만 비우면 §0.8 은폐) */
.home-firms-none { margin: 13px 0 0; font-size: 12px; color: var(--sub); }

/* ==========================================================================
   블로그 (이벤트 해설) -- 재설계 v2, 2026-08-27
   목록은 카드형(설계 B-1), 본문은 요약 박스 + 대표 카드 골격(설계 A-2).
   색·라운딩·그림자는 tokens.css 그대로다 -- 블로그 전용 색을 만들지 않는다.
   ========================================================================== */

/* -- 목록: 카드 1장 = 링크 전체 클릭 영역 -------------------------------- */
.blog-post-list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.post-card {  /* elevated */
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.post-card:hover { border-color: var(--line-strong); background: var(--panel); text-decoration: none; }
/* 썸네일이 붙은 카드만 2단이 된다 -- 무매핑 카드는 위 block 경로 그대로다.
   요약이 위계의 본체라 이미지는 폭의 1/3 아래로 묶어 둔다(제목·요약을 안 밀어낸다). */
.post-card.has-thumb { display: flex; gap: var(--space-5); align-items: flex-start; }
.post-card-body { display: block; min-width: 0; flex: 1 1 auto; }
.post-card.has-thumb .post-card-meta { margin-bottom: 0; }
.post-card-thumb {
  flex: 0 0 30%; width: 30%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: var(--radius-md); display: block;
  background: var(--panel);
}
.post-card-date { display: block; font-size: 12px; color: var(--sub); margin-bottom: 5px; }
.post-card-title {
  display: block; font-size: 17px; font-weight: 800; line-height: 1.4;
  letter-spacing: -.015em; color: var(--ink); margin-bottom: 8px;
}
/* 요약이 위계의 실질 본체다 -- 제목이 결정론 동형이라 차별화는 전부 요약이 진다. */
.post-card-summary { display: block; font-size: 14px; color: var(--sub); margin-bottom: 12px; }
.post-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.post-card-chip {
  font-size: 12px; font-weight: 600; color: var(--sub);
  background: var(--panel); border-radius: var(--radius-sm); padding: 3px 8px;
}
.post-card-chip.primary { color: var(--accent-strong); background: var(--accent-soft); }
.blog-post-list-empty { margin-top: 26px; }

/* -- 본문 골격 ----------------------------------------------------------- */
.blog-post { max-width: 720px; }
.blog-post h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.34; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.blog-post h2 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 44px 0 14px; }
.blog-post p { margin-bottom: 15px; line-height: 1.72; }
.blog-post sup { font-size: .72em; line-height: 0; }
.blog-post sup a { color: var(--accent); font-weight: 600; }

/* 요약 박스 (설계 A-2) */
.summary-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 40px;
}
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list li { position: relative; padding-left: 18px; font-size: 16px; margin-bottom: 7px; color: var(--ink); }
.summary-list li:last-child { margin-bottom: 0; }
.summary-list li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* 갈래 머리 + 대표 카드 (설계 A-2 §3) */
.branch-head { font-size: 13px; font-weight: 700; color: var(--sub); margin: 26px 0 10px; }
.co-card {  /* elevated */
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.co-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.co-name { font-weight: 800; font-size: 17px; }
.co-ticker {
  font-family: var(--mono); font-size: 12px; color: var(--sub);
  background: var(--panel); border-radius: var(--radius-xs); padding: 1px 6px;
}
.co-grade {
  font-size: 12px; color: var(--accent-strong); background: var(--accent-soft);
  border-radius: var(--radius-sm); padding: 2px 8px; font-weight: 600;
}
.co-card .co-why { font-size: 16px; margin-bottom: 10px; }
/* 인용은 공시 원문 그대로다 -- 길어도 자르지 않고 지면이 받아 준다. */
.blog-post blockquote {
  border-left: 3px solid var(--line); padding: 2px 0 2px 13px; margin: 0 0 8px;
  font-size: 14px; color: var(--sub); overflow-wrap: anywhere;
}
.co-card .co-src { font-size: 13px; margin-bottom: 0; }
.co-card .co-src a { color: var(--accent); font-weight: 600; }

/* 카드 CTA · 관련 링크 · 근거 목록 */
/* 채움 CTA 는 --primary 문법으로 통일한다(v2 에서 --primary = 인디고 액센트).
   토큰을 통해 가므로 팔레트 결정이 바뀌어도 이 규칙은 손대지 않는다. */
.blog-post .blog-cta a {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--primary); color: var(--primary-foreground);
  font-weight: 600; font-size: 16px; border-radius: var(--radius-md);
  padding: 0 var(--space-5); text-decoration: none;
  transition: background-color .15s ease;
}
.blog-post .blog-cta a:hover { background: var(--primary-hover); text-decoration: none; }
/* ══ [§2-S6 / PR-7 → v2 색복원] 그래픽 톤 통일 ═══════════════════════════════
   랜딩·탐색·블로그 카드의 Pexels 사진(석양 크레인·시험관 등)은 이벤트 내용과
   느슨하게만 결합하므로 **내용을 주장하지 않는 질감 층**으로 둔다: 톤만 살짝
   눌러 서로 다른 스톡 사진들이 한 지면에서 튀지 않게 하고, 사진이 앉는 칸은
   액센트 틴트가 아니라 패널 톤으로 받는다.
   [v2 2026-09-05] PR-7 의 `grayscale(1)` 은 **철회**다. 전건 무채화는 톤 통일을
   넘어 사진을 흑백으로 바꿔 버렸고, 잉크 CTA 와 겹쳐 제품 전체가 모노크롬으로
   읽혔다(Kevin 반려). 채도만 12% 낮춘다 — 흑백 금지, 사진은 컬러다.
   결정론 SVG 글리프(무매핑 카드)는 그대로 둔다 — 색이 토큰 파생이라 팔레트를
   자동 추종한다. CSS 필터만 쓴다(build.py 비접촉 = phase1 매니페스트 무관). */
.landing-card-thumb img,
.home-card-thumb img,
.post-card-thumb,
.blog-hero img {
  filter: saturate(0.88);
}
/* 사진이 앉는 칸은 액센트 틴트가 아니라 지면 톤이다 (틴트 통 = S5 와 같은 냄새). */
.home-card-thumb { background: var(--panel); }
.landing-card-thumb-gen, .home-card-thumb:has(svg) { background: var(--panel); }
@media (prefers-color-scheme: dark) {
  .landing-card-thumb img,
  .home-card-thumb img,
  .post-card-thumb,
  .blog-hero img { opacity: .85; }
}
@media (prefers-reduced-transparency: reduce) {
  .landing-card-thumb img,
  .home-card-thumb img,
  .post-card-thumb,
  .blog-hero img { opacity: 1; }
}

.related-list { padding-left: 20px; }
.related-list li { font-size: 14px; margin-bottom: 6px; }
.refs-list { padding-left: 22px; margin-top: 8px; }
.refs-list li { font-size: 13px; color: var(--sub); margin-bottom: 6px; overflow-wrap: anywhere; }

/* 크럼 · 메타 스트립 (재설계 v2 A-2 · 목업 골격) */
.blog-crumb { font-size: 13px; color: var(--sub); margin-bottom: 18px; }
.blog-crumb a { color: var(--sub); }
.blog-meta-strip {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 13px; color: var(--sub); margin-bottom: 26px;
}
.blog-meta-strip span + span::before { content: "·"; margin-right: 14px; color: var(--line-strong); }
.blog-back { margin-top: 40px; font-size: 13px; border-top: 1px solid var(--line); padding-top: 18px; }

/* 블로그 히어로 (blog-images 설계 §6.2) */
.blog-hero { margin: 20px 0 4px; }
.blog-hero img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.blog-hero figcaption { margin-top: 6px; font-size: 12px; color: var(--sub); }

@media (max-width: 480px) {
  .post-card { padding: 18px 17px; }
  .post-card-title { font-size: 17px; }
  /* 1열에서는 썸네일이 카드 상단 와이드로 간다. DOM 은 본문 -> 이미지 순이라
     column-reverse 가 곧 '이미지 위' 다(자식이 둘뿐이라 순서가 뒤집히지 않는다). */
  .post-card.has-thumb { flex-direction: column-reverse; gap: var(--space-4); }
  .post-card-thumb { flex: 0 0 auto; width: 100%; }
  .co-card { padding: 15px; }
}

/* ===========================================================================
   [관련주 검색 표면] 랜딩 검색창 + /search/ 결과면
   시각 정본: landing-redesign-20260901/design.md §4 (토큰 SSOT·880px 체계).
   같은 문서 §2.3 A안(마케팅 히어로 안에 검색 내장)은 **폐기**됐다 -- 카피를 전량
   보존한다는 전제가 반려로 뒤집혔다. 랜딩 V2 는 검색 엔진형 최소 지면이라
   검색창이 곧 지면의 중심이고, 라벨 문장도 힌트 줄도 붙지 않는다(칩만 남는다).
   구 정본 related-search-design-20260828/mockup-home.html 의 별도 검색 히어로
   밴드(.rs-hero)는 U1 에서 이미 삭제됐고 네거티브 마진 블리드도 함께 사라졌다.
   결과면 정본은 여전히 mockup-result.html.
   색·라운딩·간격은 tokens.css 를 그대로 쓴다. **목업과 팔레트가 같다는 옛 문장은
   이제 거짓이다** (ui-overhaul-20260904 이 순뉴트럴 zinc 로 전환했다:
   --accent #533afd->#4f46e5 · --ink #101828->#111113 · --sub #475467->#52525b ·
   --line #e4e7ec->#e4e4e7. 채움 CTA 는 --primary 를 타는데, v2 에서 그 값은
   다시 --accent 별칭이라 목업의 인디고 CTA 와 계열은 같고 색조만 다르다).
   목업을 픽셀 대조 기준으로 쓰지 마라 — 기준은 tokens.css 와 web/DESIGN.md 다.
   =========================================================================== */

/* 랜딩의 검색 (킬스위치 ON 일 때만 렌더) -- 중앙 정렬 히어로 안이라 auto 마진. */
.hero-search-col { width: 100%; max-width: 640px; margin: var(--space-6) auto 0; }
.rs-searchbox { position: relative; display: block; }
.rs-searchbox-input {
  width: 100%; padding: 19px 152px 19px 54px;
  font-size: 17px; font-family: var(--sans); color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  /* [§2-S7] 구 보라 글로우 rgba(83,58,253,.10) 폐지 — 색 그림자는 2024~25 AI
     산출물 상투구다. 무채 2층으로 띄우고, 색은 포커스 링에만 남긴다. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rs-searchbox-input::placeholder { color: var(--sub); opacity: .72; }
.rs-searchbox-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 24px rgba(0, 0, 0, .06);
}
.rs-searchbox-icon {
  position: absolute; left: 21px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--sub); pointer-events: none;
}
.rs-searchbox-submit {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  padding: 12px 22px;
  font-size: 16px; font-weight: 700; font-family: var(--sans);
  color: var(--primary-foreground); background: var(--primary);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  transition: background-color .15s ease;
}
.rs-searchbox-submit:hover { background: var(--primary-hover); }
/* 데스크톱은 카피 버튼 그대로 -- 돋보기는 좁은 폭 전용이라 여기서는 안 그린다.
   (버튼 안에 svg 를 두고 폭에 따라 무엇을 보일지만 CSS 가 고른다.) */
.rs-searchbox-submit-icon { display: none; width: 20px; height: 20px; }

/* [랜딩 V2] 예시 칩 -- 라벨 없이 검색창 바로 아래. 중앙 정렬 지면이므로 칩도
   가운데로 흐른다(2x2 고정 그리드는 폭이 바뀔 때 어색하다).
   모바일은 아래 720px 쿼리가 가로 스크롤 레일로 덮는다. */
.rs-chiprow {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--space-2);
  margin: var(--space-4) 0 0;
}
.rs-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;
  font-size: 13px; color: var(--sub); text-align: left; white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.rs-chip:hover {
  border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft);
}

/* 결과면 */
.rs-result { max-width: 780px; margin: 0 auto; }
.rs-minisearch { position: relative; display: block; margin-top: var(--space-6); }
.rs-minisearch-input {
  width: 100%; padding: 10px 14px 10px 40px;
  /* 모바일 기본 16px — iOS Safari 는 16px 미만 입력에 포커스하면 페이지를 강제
     확대한다(사이트 유일한 16px 미만 입력이었다). 데스크톱에서만 기존 14.5px 로
     되돌려 시각 변화를 좁힌다. */
  font-size: 16px; font-family: var(--sans); color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill);
  outline: none;
  transition: border-color .15s ease, background-color .15s ease;
}
@media (min-width: 720px) {
  .rs-minisearch-input { font-size: 14px; }
}
.rs-minisearch-input:focus { border-color: var(--accent); background: var(--surface); }
.rs-minisearch-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--sub); pointer-events: none;
}

.rs-qhead { padding: var(--space-8) 0 var(--space-4); }
.rs-qlabel { font-size: 12px; color: var(--sub); }
.rs-qtitle {
  margin: 3px 0 0;
  font-size: 22px; font-weight: 800; letter-spacing: -.025em; line-height: 1.35;
  text-wrap: balance;
}
/* 상태 노트 (빈·실패·한도) 공통 표정 — 2026-09-07 「표정」 패스.
   종전 이 자리들은 13px 회색 한 줄이 회색 박스 안에 눕는 형태였고, 바로 위 대기
   카드(.rs-wait)만 카드·계층·모션을 갖고 있었다. 같은 화면에서 **기다릴 때는
   표정이 있고 막혔을 때는 없는** 상태였다는 뜻이다. 그래서 종결 상태에도 같은
   카드 언어(서피스·보더·라운드·그림자)를 주고 아이콘 하나를 붙인다.

   색은 뉴트럴 고정이다 — 실패/빈/한도를 색으로 가르려면 새 의미색 토큰이 필요한데
   그건 병렬 진행 중인 디자인 시스템 트랙 소관이다. 여기선 **구분을 카피가 진다**
   (search.state_error / state_failed / state_empty / rate_limited 를 각각 다르게 씀).

   아이콘은 mask + currentColor 라 텍스트 색을 그대로 따라가고 다크에서도 맞는다.
   CSP 는 `img-src 'self' data:` 라 data URI 가 허용된다 (build.py CONTENT_SECURITY_POLICY). */
:root {
  --icon-state-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6v.4'/%3E%3C/svg%3E");
}

.rs-status::before, .state-note-icon::before {
  content: ""; flex: 0 0 auto;
  width: 18px; height: 18px; margin-top: 2px;
  background: currentColor; opacity: .65;
}
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .rs-status::before, .state-note-icon::before {
    -webkit-mask: var(--icon-state-info) center / contain no-repeat;
    mask: var(--icon-state-info) center / contain no-repeat;
  }
}
/* 마스크 미지원 브라우저에서 18px 검은 사각형이 남지 않게 — 아이콘은 장식이고
   같은 사실을 옆 문장이 이미 말하므로 지워도 잃는 정보가 없다. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .rs-status::before, .state-note-icon::before { display: none; }
}

/* 등장 전이: 화면이 "툭" 바뀌지 않게 아주 짧게만. 모션 민감 유저에겐 끈다. */
@keyframes state-note-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.rs-status {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-5);
  font-size: 14px; line-height: 1.6; color: var(--sub);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  animation: state-note-in 220ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .rs-status { animation: none; }
}
/* `hidden` 을 되살린다. 이 요소는 기본이 hidden 인데(search.html), 위에서 카드로
   만들며 `display: flex` 를 주는 순간 그 속성이 무력화된다 — 속성 선택자 없는
   display 선언이 hidden 을 이긴다. 그래서 검색이 도는 동안 문구가 한 글자도 없는
   빈 카드가 대기 카드 위에 떠 있었다.
   전역 `[hidden]` 규칙이 없는 리포라 클래스마다 이렇게 되살린다
   (.value-bar[hidden] · .share-btn[hidden] · .risk-cta-btn[hidden] 선례). */
.rs-status[hidden] { display: none; }

/* 검색 대기 카드 — 결과가 들어올 자리(#rs-result)에 그대로 선다.

   종전은 가운데 정렬 단일 초점(스피너 + 단계 한 줄)이었다. 20~40초 동안 그 한
   줄만 서너 번 바뀌어서 화면이 멈춘 것처럼 읽혔다 — 그래서 스피너 블록을
   **헤더로 축소**하고, 그 아래에 실제로 실행된 도구가 쌓이는 타임라인을 뒀다.
   초점은 여전히 하나다: 헤더가 "지금 무엇을", 타임라인이 "지금까지 무엇을". */
.rs-wait {
  display: grid; gap: var(--space-3); justify-items: start;
  margin-top: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* [표정 2026-09-07] 종결 상태(.rs-status)와 같은 등장 전이를 준다 — 한 화면에서
     대기와 결과가 서로 다른 방식으로 나타나면 화면이 두 사람 손처럼 읽힌다. */
  animation: state-note-in 220ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .rs-wait { animation: none; }
}
.rs-wait-head {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
}
.rs-wait-headtext { min-width: 0; }
.rs-wait-spinner {
  /* 헤더로 내려오면서 32px -> 22px. 카드의 주인공이 아니라 상태 표식이다. */
  flex: none; width: 22px; height: 22px;
  border: 2.5px solid var(--accent-soft); border-top-color: var(--accent);
  border-radius: 50%;
  animation: rs-wait-spin 900ms linear infinite;
}
@keyframes rs-wait-spin { to { transform: rotate(360deg); } }
/* 모션 민감 유저에겐 회전을 멈춘다. 스피너는 장식이고 같은 사실을 단계 문구가
   텍스트로 이미 말하므로, 멈춰도 잃는 정보가 없다. */
@media (prefers-reduced-motion: reduce) {
  .rs-wait-spinner { animation: none; }
}
.rs-wait-title {
  margin: 0; color: var(--ink);
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35;
}
.rs-wait-step { margin: 2px 0 0; font-size: 13px; color: var(--sub); }
.rs-wait-eta {
  margin: 0; padding: var(--space-1) var(--space-3);
  color: var(--accent); font-size: 13px; font-weight: 700;
  background: var(--accent-soft); border-radius: var(--radius-sm);
}
.rs-wait-long {
  /* 40ch + balance: 34ch 에서는 "최대 120초" 가 줄바꿈으로 갈라졌다(실측). */
  max-width: 40ch; margin: 0;
  padding-top: var(--space-3); width: 100%;
  font-size: 13px; color: var(--sub); text-wrap: balance;
  border-top: 1px solid var(--line);
}

/* ── 활동 타임라인 ────────────────────────────────────────────────────────────
   세로선 하나에 불릿이 꿰인 형태. 각 행은 <details> 라 펼침 상태가 DOM 에 살고,
   폴링 리페인트가 그 상태를 건드리지 않는다(related-search.mjs 증분 렌더). */
.rs-act {
  position: relative;
  display: grid; gap: 2px;
  width: 100%; padding-left: var(--space-5);
}
/* 세로선. 첫 불릿에서 시작해 마지막 불릿에서 끝나야 해서 위아래를 잘라 낸다 —
   행 높이 전체로 그으면 끝이 허공에 떠 보인다. */
.rs-act::before {
  content: ""; position: absolute; left: 6px; top: 11px; bottom: 11px;
  width: 1px; background: var(--line);
}
.rs-act:empty { display: none; }
.rs-act:empty::before { content: none; }

.rs-act-row { position: relative; }
.rs-act-row > summary {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 26px; padding: 2px 0;
  font-size: 13px; color: var(--ink);
  cursor: pointer; list-style: none;
}
.rs-act-row > summary::-webkit-details-marker { display: none; }
/* 불릿. 세로선 위에 얹히도록 카드 배경으로 선을 끊는다. */
.rs-act-row > summary::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-5) + 3px); top: 9px;
  width: 7px; height: 7px;
  background: var(--accent); border: 2px solid var(--surface); border-radius: 50%;
  box-sizing: content-box;
}
/* 펼침 표식. 접힘 ▸ / 펼침 ▾ 를 회전 하나로 낸다. */
.rs-act-row > summary::after {
  content: ""; flex: none; margin-left: 2px;
  width: 0; height: 0;
  border-left: 4px solid var(--sub);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .15s ease;
}
.rs-act-row[open] > summary::after { transform: rotate(90deg); }
.rs-act-icon { flex: none; font-size: 13px; line-height: 1; }
.rs-act-label { min-width: 0; }
.rs-act-count {
  flex: none; padding: 1px 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--sub);
  background: var(--panel); border-radius: var(--radius-sm);
}
.rs-act-body { padding: 0 0 var(--space-2) var(--space-5); }
.rs-act-item {
  margin: 0 0 2px; font-size: 12px; color: var(--sub);
  overflow-wrap: anywhere;
  /* 새 항목이 아래로 미끄러져 들어온다 — 스트리밍 느낌의 전부다. */
  animation: rs-act-in .22s ease both;
}
.rs-act-item:last-child { margin-bottom: 0; }
.rs-act-tool { font-family: var(--mono); font-size: 11px; }
@keyframes rs-act-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-act-item { animation: none; }
  .rs-act-row > summary::after { transition: none; }
}

/* 완료 후 축약 토글. 결과 블록들과 같은 카드 형태를 쓰되(rs-block), 답보다
   조용해야 하므로 요약 줄만 보인다. */
.rs-act-done > summary {
  padding: 12px 18px;
  font-size: 12px; font-weight: 600; color: var(--sub); cursor: pointer;
}
.rs-act-done .rs-act { padding: 0 18px 14px calc(18px + var(--space-5)); }
.rs-act-done .rs-act::before { left: calc(18px + 6px); }
.rs-act-done .rs-act-row > summary::before { border-color: var(--surface); }

/* 답(카드 매치 + 응답)은 붙이고, 부가(경로·CTA·고지)는 떼어 놓는다 */
.rs-block {
  display: block; margin-top: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.rs-match {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-left: 4px solid var(--accent);
}
.rs-match-flag {
  flex: none; margin-top: 2px; padding: 3px 8px;
  font-size: 11px; font-weight: 700;
  color: var(--accent-strong); background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.rs-match-body { min-width: 0; }
.rs-match-body h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.rs-match-meta { margin: 4px 0 0; font-size: 12px; color: var(--sub); }
.rs-match-go {
  display: inline-flex; align-items: center; align-self: center; flex: none;
  margin-left: auto; min-height: 44px; padding: 0 var(--space-4);
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  transition: background-color .15s ease, border-color .15s ease;
}
.rs-match-go:hover { background: var(--accent-soft); border-color: var(--accent); }

.rs-ai { padding: 20px 22px; }
.rs-ai-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.rs-ai-head h2 { margin: 0; font-size: 13px; font-weight: 700; }
/* 종전 이름은 .rs-ai-model 이었다 — 배지가 모델명을 싣던 시절의 이름이다. 이제 정적
   문구("확인된 근거 자료만 사용")라 이름도 같이 고쳤다. 서체는 mono 를 벗었다:
   기계 식별자를 보여주던 자리가 아니라 이제 읽는 문장이다. */
.rs-ai-badge {
  padding: 2px 7px; font-size: 11px;
  color: var(--sub); background: var(--panel); border-radius: var(--radius-sm);
}
.rs-ai p { margin: 0 0 var(--space-3); font-size: 16px; }
.rs-ai p:last-child { margin-bottom: 0; }

/* 신뢰도 칩. tier1 은 기본형, 웹·추정은 회색 보조형 (설계 D-6 라벨 위장 금지). */
.rs-cite {
  display: inline-block; margin: 0 2px; padding: 3px 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 1;
  border-radius: var(--radius-sm); vertical-align: 2px;
}
.rs-cite-t1 { color: var(--accent-strong); background: var(--accent-soft); }
.rs-cite-tw {
  color: var(--sub); background: var(--panel);
  border: 1px dashed var(--line-strong);
}

/* 인용 칩 링크화. 칩은 근거의 입구다 - 원문이 있으면 원문으로, 없으면 하단
   근거 목록의 해당 행으로 간다. 색·크기는 위 신뢰도 규칙 그대로 물려받는다
   (링크가 됐다고 티어 표시가 바뀌면 라벨 위장이 된다). */
a.rs-cite { text-decoration: none; cursor: pointer; }
/* hover 강조는 칩 자기 상자에만 걸리는 속성으로 한다.
   - filter 는 절대위치 자손의 컨테이닝 블록을 만들어서 아래 툴팁의
     max-width:100% 를 본문 열이 아닌 칩 폭으로 풀어 버린다.
   - opacity 는 ::after 까지 같이 흐려져 툴팁이 반투명해진다.
   밑줄은 절대위치 자손으로 전파되지 않아 둘 다 피한다. */
a.rs-cite:hover { text-decoration: underline; text-underline-offset: 2px; }
a.rs-cite:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* 툴팁의 기준 상자는 칩이 아니라 본문 열이다. 칩 기준으로 띄우면 줄 끝에 붙은
   칩에서 오른쪽으로 삐져나가는데, 칩의 x 좌표는 CSS 가 알 수 없어 clamp 할
   방법이 없다. 열 기준 + max-width:100% 면 어느 칩에서 띄우든 열을 못 넘는다. */
.rs-ai p, .rs-cand-why { position: relative; }

/* 호버 프리뷰: 근거 라벨 + 실제 목적지. 내용은 전부 페이로드 데이터라
   data 속성으로 실어 CSS 가 읽는다 (앱 JS 한글 금지 게이트와 무관).
   hover 가 있는 포인터에서만 띄운다 - 터치에서는 탭이 곧 이동이라
   툴팁이 한 번 더 탭하게 만드는 방해가 된다. */
@media (hover: hover) {
  a.rs-cite[data-rs-tip]:hover::after,
  a.rs-cite[data-rs-tip]:focus-visible::after {
    content: attr(data-rs-tip);
    position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
    width: max-content; max-width: 100%;
    padding: 6px 9px;
    font-family: var(--sans, inherit); font-size: 11px; font-weight: 500;
    line-height: 1.45; letter-spacing: 0; text-align: left; vertical-align: baseline;
    white-space: normal; overflow-wrap: anywhere;
    color: var(--surface); background: var(--ink);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-raised);
    pointer-events: none;
  }
}

/* 터치 히트 영역만 24px 로 넓힌다 - 오버레이라 줄 간격은 그대로다
   (칩 자체를 키우면 본문 행이 들뜬다). */
@media (pointer: coarse) {
  a.rs-cite { position: relative; }
  a.rs-cite::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    min-width: 24px; width: 100%; height: 24px;
  }
}

.rs-cands { padding: 6px 22px 18px; }
.rs-cands h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 13px; font-weight: 700; color: var(--sub);
}
.rs-cand {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) 0; border-top: 1px solid var(--line);
}
.rs-cand-tk {
  flex: none; width: 66px; margin-top: 3px; padding: 3px 0;
  font-family: var(--mono); font-size: 11px; text-align: center; color: var(--sub);
  background: var(--panel); border-radius: var(--radius-sm);
}
.rs-cand-body { min-width: 0; }
.rs-cand-name { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.rs-cand-role {
  display: inline-block; margin-left: 7px; padding: 2px 7px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; border-radius: var(--radius-sm);
}
.rs-role-direct { color: var(--accent-strong); background: var(--accent-soft); }
/* 의미 채널(관계 역할 — 고객/경쟁사). 라이트 실값 + 다크 오버라이드 쌍.
   [W-PR1 2026-09-07] 이 넷은 **일부러 토큰 승격 대상에서 뺐다**: 판정 채널
   (.badge-confirmed/.badge-not-confirmed)과 다크 값이 우연히 같을 뿐 라이트 값이
   다르고(#19714b/#b42335 vs #2e7d32/#c62828) 의미도 다르다. 한 토큰으로 묶으면
   두 의미 채널이 한 색이 된다. 승격하려면 관계 역할 전용 토큰이 따로 있어야 하고,
   그건 이 PR 범위(설계 §2.2 W-2 의 6역할) 밖이다. */
.rs-role-customer { color: #19714b; background: #e8f4ee; }
.rs-role-competitor { color: #b42335; background: #feeef0; }
@media (prefers-color-scheme: dark) {
  .rs-role-customer { color: #81c784; background: rgba(129, 199, 132, .12); }
  .rs-role-competitor { color: #ef9a9a; background: rgba(239, 154, 154, .12); }
}
.rs-role-peer { color: var(--sub); background: var(--panel); }
.rs-cand-why { margin: 3px 0 0; font-size: 13px; color: var(--sub); }
.rs-cands-note {
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  font-size: 12px; color: var(--sub); border-top: 1px solid var(--line);
}
/* 후보 role 그룹 헤더 (설계 §3-A-4: "웹 렌더를 role 그룹 헤더로 재배열"). 종목
   행보다 한 톤 조용히 — 헤더가 후보 이름보다 튀면 목록이 두 겹의 초점을 갖는다. */
.rs-cand-role-head {
  margin: var(--space-4) 0 6px; font-size: 11px; font-weight: 700;
  color: var(--sub); text-transform: none;
}
.rs-cand-role-head:first-child { margin-top: 0; }

/* 로스터 — 결정론 커버리지 블록 (설계 §3-A-3). 기본 접힘, rs-trace·rs-act-done 과
   같은 <details> 관례를 쓴다: 이 화면의 초점은 요약+주목 후보이지 로스터가
   아니다("더 보기" 깊이). */
.rs-roster { margin-top: var(--space-3); background: transparent; box-shadow: none; }
.rs-roster > summary {
  padding: 13px 18px; font-size: 13px; font-weight: 600; color: var(--sub); cursor: pointer;
}
.rs-roster > summary:hover { color: var(--ink); }
.rs-roster[open] > summary { border-bottom: 1px solid var(--line); }
.rs-roster-body { padding: var(--space-3) 18px var(--space-4); }
.rs-roster-denom {
  margin: 0 0 var(--space-3); font-size: 12px; color: var(--sub);
}
/* 그룹(발행 산출물의 세트 단위) — 각자 또 접힌다. 카테고리 라벨은 페이로드
   내용이라(§3-A-2 실측 스키마의 category 축자) 크롬 서체를 쓰지 않는다. */
.rs-roster-group { margin-top: var(--space-2); }
.rs-roster-group-head {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 8px 0; font-size: 12px; font-weight: 700; cursor: pointer;
}
.rs-roster-group-count { font-weight: 400; color: var(--sub); }
.rs-roster-rows { padding-left: var(--space-2); }
.rs-roster-row {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-2) 0; border-top: 1px solid var(--line);
}
/* candidates 에도 나오는 티커의 강조 표시 — 중복 제거는 하지 않는다(두 목록의
   분모가 다르다는 사실 자체가 정보라는 설계 §3-A-3 규율). */
.rs-roster-row-hl { background: var(--accent-soft); border-radius: var(--radius-sm); }
.rs-roster-tk {
  flex: none; width: 60px; margin-top: 2px; padding: 3px 0;
  font-family: var(--mono); font-size: 10px; text-align: center; color: var(--sub);
  background: var(--panel); border-radius: var(--radius-sm);
}
.rs-roster-rowbody { min-width: 0; }
.rs-roster-name { margin: 0; font-size: 13px; font-weight: 600; }
.rs-roster-tier {
  display: inline-block; margin-left: 6px; padding: 1px 6px; vertical-align: 1px;
  font-family: var(--mono); font-size: 10px; color: var(--sub); background: var(--panel);
  border-radius: var(--radius-sm);
}
/* 버킷 배지 — exposure_list 의 4버킷(§3-A-2). confirmed 가 강조형, 나머지 셋은
   회피형: objective_only 를 confirmed 와 나란한 톤으로 두면 "언급만 확인"이
   "연결 확인"만큼 강한 근거처럼 읽힌다(과주장 방지, §6 이월 12번). */
.rs-roster-bucket {
  display: inline-block; margin-left: 6px; padding: 1px 7px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; border-radius: var(--radius-sm);
}
.rs-roster-bucket-confirmed { color: var(--accent-strong); background: var(--accent-soft); }
.rs-roster-bucket-product_exposure { color: var(--sub); background: var(--panel); }
.rs-roster-bucket-objective_only,
.rs-roster-bucket-borderline,
.rs-roster-bucket-unknown {
  color: var(--sub); background: transparent; border: 1px dashed var(--line-strong);
}
.rs-roster-quote {
  margin: 3px 0 0; padding-left: var(--space-2); font-size: 12px; color: var(--sub);
  border-left: 2px solid var(--line);
}
.rs-roster-meta { margin: 3px 0 0; font-size: 11px; color: var(--sub); }
.rs-roster-link { color: var(--accent-strong); text-decoration: none; }
.rs-roster-link:hover { text-decoration: underline; }
.rs-roster-date { margin-left: 6px; font-family: var(--mono); }
.rs-roster-truncated {
  margin: var(--space-3) 0 0; padding-top: var(--space-2);
  font-size: 11px; color: var(--sub); border-top: 1px solid var(--line);
}

.rs-refs { padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.rs-refs h3 { margin: 0 0 var(--space-2); font-size: 12px; font-weight: 700; color: var(--sub); }
.rs-refs ol { list-style: none; margin: 0; padding: 0; }
.rs-refs li {
  display: flex; gap: var(--space-2); padding: 3px 0;
  font-size: 12px; color: var(--sub);
  scroll-margin-top: var(--anchor-offset);
}
/* 칩에서 점프해 온 행을 잠깐 짚어 준다 - 번호만 맞춰 놓고 어디에 떨어졌는지
   안 보이면 점프가 실패한 것처럼 읽힌다. */
.rs-refs li:target {
  background: var(--accent-soft); border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
/* 원문이 있는 근거 행은 그 자체가 링크다 (칩 -> 행 -> 원문). */
a.rs-ref-body { color: inherit; text-decoration: none; }
a.rs-ref-body:hover { color: var(--ink); text-decoration: underline; }
a.rs-ref-body:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs);
}
.rs-ref-no {
  flex: none; width: 14px; margin-top: 2px;
  font-family: var(--mono); font-size: 11px; text-align: right;
}
.rs-ref-body { min-width: 0; }
/* 긴 URL 출처는 끊어 줘야 한다 - 390px 에서 mono 한 덩어리가 안 꺾여 근거 행이
   20px 잘렸다(칩이 가리키는 목적지가 화면 밖으로 나가면 인용이 안 읽힌다). */
.rs-ref-src {
  margin-right: 5px; font-family: var(--mono); font-size: 11px; color: var(--ink);
  overflow-wrap: anywhere;
}
.rs-tier {
  display: inline-block; margin-left: 6px; padding: 1px 6px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; border-radius: var(--radius-sm);
}
.rs-tier-t1 { color: var(--accent-strong); background: var(--accent-soft); }
.rs-tier-tw { color: var(--sub); background: var(--panel); }

.rs-trace { margin-top: var(--space-6); background: transparent; box-shadow: none; }
.rs-trace summary {
  padding: 13px 18px; font-size: 13px; font-weight: 600; color: var(--sub); cursor: pointer;
}
.rs-trace summary:hover { color: var(--ink); }
.rs-trace[open] summary { border-bottom: 1px solid var(--line); }
.rs-trace ol { margin: 0; padding: var(--space-3) 22px var(--space-4) var(--space-10); }
.rs-trace li { padding: 3px 0; font-size: 13px; color: var(--sub); }
.rs-trace code {
  padding: 1px 6px; font-family: var(--mono); font-size: 12px;
  color: var(--ink); background: var(--panel); border-radius: var(--radius-xs);
}

/* 이 화면의 유일한 주 행동. L2 는 후속 PR 이라 지금은 비활성 + 예고 문구다. */
.rs-deep {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  margin-top: var(--space-10); padding: var(--space-6);
  /* [S1+S7] 구 라벤더 그라디언트(#f1eeff→surface) + 보라 보더(#ddd6fe) +
     보라 글로우 rgba(83,58,253,.08). 셋 다 "AI SaaS 강조 패널" 그 자체다.
     이 패널의 지위는 그라디언트가 아니라 **이 화면의 유일한 주 행동**이 진다:
     지면 톤 위에 강조 보더 하나(elevated 1층). */
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.rs-deep-txt { flex: 1; min-width: 220px; }
.rs-deep-txt h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.rs-deep-txt p { margin: 6px 0 0; font-size: 13px; color: var(--sub); }
.rs-deep-fine { margin-top: 10px; font-size: 12px; }
.rs-deep-fine b { color: var(--ink); }
.rs-deep-action { flex: none; text-align: center; }
.rs-deep-cta {
  padding: 14px 24px;
  font-size: 14px; font-weight: 700; font-family: var(--sans);
  min-height: 44px;
  color: var(--primary-foreground); background: var(--primary);
  border: 0; border-radius: var(--radius-md); cursor: pointer;
  transition: background-color .15s ease;
}
.rs-deep-cta:hover:enabled { background: var(--primary-hover); }
.rs-deep-cta:disabled {
  background: var(--line-strong); color: var(--surface);
  box-shadow: none; cursor: default;
}
.rs-deep-soon { margin: var(--space-2) 0 0; font-size: 12px; color: var(--sub); }

.rs-notice {
  margin-top: var(--space-6); padding: 13px 16px;
  font-size: 12px; color: var(--sub);
  background: var(--panel); border-radius: var(--radius-md);
}
.rs-runmeta {
  margin-top: var(--space-3); text-align: right;
  font-family: var(--mono); font-size: 11px; color: var(--sub);
}
/* 어드민 전용 토큰·비용 줄. runmeta 와 같은 계측 서체를 쓰되 한 톤 더 죽인다.
   ⚠️ `display:` 를 붙이지 마라 — 기본 상태가 hidden 이고, 이 리포엔 전역
   `[hidden] { display: none }` 이 없다(search.html 주석·패널 hidden 함정 참조). */
.rs-usage {
  margin-top: var(--space-1); text-align: right;
  font-family: var(--mono); font-size: 11px; color: var(--sub); opacity: 0.75;
}

/* 새로 검색 — 결과가 캐시 복원이거나 방금 완주했을 때만 보인다(JS 가 hidden 해제).
   주 행동은 딥리서치 CTA 라 이 버튼은 조용한 보조 톤으로 둔다. */
.rs-rerun-row { margin: var(--space-4) 0 0; text-align: center; }
.rs-rerun {
  padding: 9px 18px;
  font: inherit; font-size: 13px; color: var(--sub);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  cursor: pointer;
}
.rs-rerun:hover { color: var(--fg); border-color: var(--line-strong, var(--line)); }

@media (max-width: 720px) {
  /* 예시 질의는 가로 레일 한 줄로. 끝단 페이드가 스크롤을 알린다.
     [V2] justify-content 를 flex-start 로 되돌린다 -- 데스크톱 중앙 정렬을 그대로
     두면 넘친 내용이 **양쪽으로** 삐져나가 왼쪽 첫 칩이 스크롤로도 닿지 않는다
     (flex 중앙 정렬 + overflow 조합의 고전적 함정). 실측으로 첫 칩이 잘렸다. */
  .rs-chiprow {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  }
  .rs-chiprow::-webkit-scrollbar { display: none; }
  .rs-chip { flex: none; }
  /* 제출 버튼을 **필 안으로** 넣는다. 앞선 판(별도 행 전폭 필)은 390px 실측에서
     입력창 55px 아래에 46px x 354px 보라 바가 한 행을 더 먹어 폼 높이가 109px 였고,
     "입력창과 거의 같은 높이의 전폭 바" 로 반려됐다. 히어로의 초점은 하나여야 한다 --
     입력과 제출이 한 덩어리로 읽히도록 트레일링 원형 아이콘 버튼으로 접는다.

     선행 장식 돋보기(.rs-searchbox-icon)는 여기서 숨긴다. 제출 버튼이 이미 돋보기를
     들고 있어 같은 글리프가 한 필 안에 둘이 되고, 그 46px 를 플레이스홀더가 쓴다
     (좁은 폭에서 예시 질의가 잘리는 것이 이 지면의 실제 손실이다).

     터치 타깃 46px 은 44px 최소를 넘고, 입력창 높이(55px) 안에 상하 4.5px 여백으로
     들어간다. font-size 는 16px 을 유지한다 -- 16px 미만이면 iOS 가 포커스에서
     확대한다(#785 가 맞춘 값, 회귀 금지). */
  .rs-searchbox { position: relative; display: block; }
  .rs-searchbox-input { padding: 17px 62px 17px 22px; font-size: 16px; }
  .rs-searchbox-icon { display: none; }
  .rs-searchbox-submit {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
  }
  .rs-searchbox-submit-icon { display: block; }
  .rs-searchbox-submit-text { display: none; }
}
@media (max-width: 520px) {
  .rs-match-go { margin-left: 0; }
  .rs-deep { padding: var(--space-5); }
  .rs-deep-action { width: 100%; }
  .rs-deep-cta { width: 100%; }
  .rs-runmeta { text-align: left; }
  .rs-cand-tk { width: 60px; }
}

/* ── 미니 게시판 (설계 community-board-20260904 §5.4 시각 분리) ───────────────
   유저 발화와 사요 판정을 눈으로 가르는 것이 이 블록의 유일한 목적이다.
   그래서 **카드 판정·통계의 스타일 요소를 재사용하지 않는다**: 등급 배지
   (.badge-grade), 판정 라벨, 로스터 표 문법이 여기 들어오면 안 된다. 유저 글은
   더 낮은 위계(작은 서체·중립 배경·얇은 보더)로, 사요 엔트리는 accent 계열로.

   유저 글 본문에는 어떤 자동 장식도 없다(티커 링크화·볼드 금지) — 링크화는 유저
   글에 권위를 입히는 행위다(§5.4). board.mjs 가 textContent 로만 넣으므로 마크업
   자체가 생기지 않고, 여기서도 그 안을 꾸미지 않는다. */
.board-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.board-section > h2 { margin-top: 0; }
/* 고지 1곳 — 섹션 상단 고정. 눈에 띄되 판정 카피처럼 보이지 않게 중립 톤. */
.board-notice {
  margin: 0 0 var(--space-5);
  font-size: 14px;
  line-height: 1.6;
  color: var(--sub);
}
.board-notice a { color: var(--sub); }

.board-list { list-style: none; margin: 0; padding: 0; }
.board-list > li { margin: 0 0 var(--space-3); }

/* 사요 시스템 엔트리 — 판정 기계의 기록. accent 틴트로 유저 글과 갈린다. */
.board-system {
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
/* 유저 글 — 별도 배경·보더. 사요 엔트리보다 낮은 위계. */
.board-post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.board-post-reply { margin-left: var(--space-6); }
/* 툼스톤(숨김·삭제) — 본문 없는 자리 표시. 더 흐리게. */
.board-post-tomb { background: var(--panel); border-style: dashed; }
.board-post-tomb .board-post-body { color: var(--sub); font-style: italic; }

.board-post-head {
  margin: 0 0 var(--space-2);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 13px;
}
/* 칩 — 화자 표시. 등급 배지(.badge-grade)와 **다른** 문법이어야 한다. */
.board-chip {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--sub);
  font-size: 12px;
  line-height: 1.4;
}
.board-chip-sayo { background: var(--accent); color: var(--accent-ink); }
.board-nick { color: var(--sub); }
.board-source { color: var(--sub); font-size: 12px; }

.board-post-body, .board-system .board-post-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  /* 유저 원문의 줄바꿈은 보존하되 긴 토큰이 지면을 밀지 않게. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.board-post-actions { margin: var(--space-2) 0 0; }
.board-report {
  font: inherit; font-size: 12px;
  padding: 0; border: 0; background: none;
  color: var(--sub); cursor: pointer;
  text-decoration: underline;
  min-height: 44px;   /* 터치 타깃 */
}
.board-report[disabled] { cursor: default; text-decoration: none; }

.board-empty {
  color: var(--sub);
  font-size: 16px;
  padding: var(--space-4) 0;
}

/* 컴포저 — 하단 1줄. 부가 컨트롤 없음(§3.4 토스식 단일 초점). */
.board-composer {
  display: flex; gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-4);
}
.board-composer textarea {
  flex: 1 1 auto;
  font: inherit; font-size: 16px; line-height: 1.6;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
  min-height: 44px;
}
.board-composer button {
  font: inherit; font-size: 14px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}
.board-composer button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.board-composer button[disabled] { opacity: 0.6; cursor: default; }

.board-status {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  color: var(--sub);
  min-height: 1.2em;   /* 상태 문구 등장 시 지면이 튀지 않게 */
}

@media (max-width: 600px) {
  .board-composer { flex-wrap: wrap; }
  .board-composer button { width: 100%; }
  .board-post-reply { margin-left: var(--space-4); }
}