/* 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(--ink);
  background: var(--bg);
  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 버튼·활성 네비 등 "의도적 액션" 지점에만 남긴다 (파란 링크밭 제거). */
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(--accent); 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; }
pre {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  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: 14.5px; 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] 워드마크만 — 내비는 sticky .site-nav-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: 27px; 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; }
.site-name-ko { font-size: 14px; font-weight: 500; color: var(--sub); margin-left: 4px; font-family: var(--sans); }

/* [R6C-2 라운드 6 ③·④] sticky 내비 스트립 — 워드마크가 스크롤아웃 된 뒤에도 잔류.
   R6.6 가드레일: 조용·얇은 크롬 — 배경색 + 헤어라인 1px 하단선만. z-index 낮게 유지. */
.site-nav-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-nav-inner {
  max-width: 880px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: stretch; justify-content: space-between;
}
.site-nav-links {
  display: flex; flex-wrap: wrap;
}
.site-nav-links a {
  margin: 0; padding: 12px 14px;           /* 감사: 터치 44px */
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.05em;
  text-decoration: none; color: var(--sub);
}
.site-nav-links a:hover { color: var(--accent); }
/* 활성 내비 밑줄 */
.site-nav-links a.is-active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* [R6C-2] 글로벌 검색 — 돋보기 버튼 44×44px + 인라인 확장 입력. */
/* margin-left:auto 로 검색+계정 UI 를 우측 묶음으로. space-between 이 검색을
   탭·아바타 정중앙에 띄우던 문제 해소(R7F). */
.site-search { display: flex; align-items: center; position: relative; margin-left: auto; }
.site-search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer; color: var(--sub);
}
.site-search-btn:hover { color: var(--accent); }
.site-search-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-search-expand {
  position: absolute; right: 0; top: calc(100% + 4px);
  z-index: 100;
}
.site-search-combo { position: relative; }
.site-search-input {
  width: min(260px, calc(100vw - 40px));
  padding: 7px 12px; font-size: 13.5px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-sm);
  font-family: var(--sans); outline: none;
}
.site-search-input:focus { border-color: var(--accent); }
.site-search-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-raised);
  list-style: none; padding: 0; margin: 0; max-height: 260px; overflow-y: auto;
}
.site-search-list [role="option"] {
  padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--ink);
}
.site-search-list [role="option"]:hover,
.site-search-list [role="option"].is-active { background: var(--panel); }
/* 모바일: 검색 입력창이 내비 행 아래 전폭 */
@media (max-width: 540px) {
  .site-search-expand { position: fixed; left: 0; right: 0; top: 44px; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .site-search-input { width: 100%; }
  .site-search-list { max-height: 200px; }
  /* [R7G] 5탭이 좁은 폭에서 2줄로 감기지 않게 -- 탭 스트립 한 줄 가로 스크롤.
     검색·계정 UI 는 우측 고정. */
  .site-nav-links {
    flex: 1 1 auto; 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: 12px 11px; }
}

/* [라운드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: 12.5px;
}
.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: 12.5px;
}
.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: 12.5px;
}
.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) {
  .legal-layout { grid-template-columns: 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: 19px; margin-top: var(--space-12); font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: 14.5px; margin-bottom: 6px; font-weight: 700; }

.page-note { color: var(--sub); font-size: 13.5px; }
.empty-note { color: var(--sub); }
/* R6A-4: 빈 상태 라우팅 CTA — 안내문 아래 스크리너·트랙 레코드로 이어지는 링크. */
.empty-cta {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: 6px;
  padding: 0 var(--space-4); font-weight: 700; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.empty-cta:hover { border-color: var(--accent); }

.section-lead {
  color: var(--sub); font-size: 14px; line-height: 1.75;
  margin: 6px 0 16px; max-width: 620px;
}

/* [R7I] 단일 '닿아 있는 종목' 로스터 — 카운트 요약(연결 확인 N · 검증 대기 M). */
.roster-count {
  color: var(--sub); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin: 2px 0 4px;
}
/* [R7 카드 경로 UX] 미노출 그룹 행방 안내(병합 1줄) — 저강조 note. */
.roster-wayfinding {
  color: var(--sub); font-size: 13.5px; 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-eyebrow {
  margin: 0 0 16px;
  font-size: 12.5px; letter-spacing: 0.14em; color: var(--sub); font-weight: 600;
}
.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-lead {
  max-width: 640px; margin: 22px 0 0;
  font-size: clamp(18px, 3.4vw, 21px); font-weight: 800;
  color: var(--ink); line-height: 1.5; letter-spacing: -0.01em;
  text-wrap: balance;
}
.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 22px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius-sm); /* button 요소 UA 보더 리셋 (a·button 공용) */
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.cta-primary:hover { background: var(--accent-strong); color: var(--accent-ink); }
.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-sm);
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.cta-ghost:hover { border-color: var(--accent); color: var(--accent); }
.cta-ghost:active { transform: translateY(1px); }
.cta-secondary {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  text-decoration-color: var(--line);
}
.cta-secondary:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* [R7B] 히어로 무추천 고지 -- 구 홈 히어로 블록에서 이관 (/about 재사용). */
.hero-note {
  margin: 10px 0 0;
  font-size: 13.5px; color: var(--sub); font-style: italic;
}
/* [R7B] /about 마케팅 히어로 지면 -- 구 .home-hero 지면 계승 */
.about-hero { padding: 44px 0 28px; border-bottom: 1px solid var(--line); }

/* [R7D] /about 재조판 -- 스텝·리스트 리듬 (4px 스케일 토큰만, px 리터럴 신규 금지) */
.about-block { margin: var(--space-10) 0 0; }
.about-block h2 { margin: 0; }
.about-block-lead { margin: var(--space-2) 0 0; color: var(--sub); }
.about-steps {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: var(--space-3);
}
.about-steps li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
}
.about-steps h3 { margin: 0 0 var(--space-1); font-size: 15px; }
.about-steps p { margin: 0; color: var(--sub); font-size: 14.5px; line-height: 1.6; }
.about-list { margin: var(--space-3) 0 0; padding-left: 1.2em; }
.about-list li { margin: var(--space-2) 0; }
@media (min-width: 720px) {
  .about-steps { grid-template-columns: repeat(2, 1fr); }
}

/* [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); box-shadow: var(--shadow-card);
}
.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: 15px; 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); box-shadow: var(--shadow-card);
}
.basket-vals { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; 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: 13.5px; }

/* ── 배지 — 필(pill): 저채도 틴트 배경 + 진한 텍스트 (색 단독 의미 금지, 라벨 정본) ── */
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  background: var(--panel); color: var(--sub); border: 0;
  font-variant-numeric: tabular-nums;
  /* [P24] 배지는 분류 라벨 — 좁은 셀에서 라벨 중간 줄바꿈+테두리 오버플로 금지. */
  white-space: nowrap;
}
.badge-grade { background: var(--panel); color: var(--ink); font-weight: 800; }
.badge-tier { height: 20px; padding: 0 8px; white-space: nowrap; font-size: 11.5px; letter-spacing: 0.02em; }
/* 액센트 틴트 필 — 판정·방향 의미 아님(단순 강조 라벨). 라이트=진한 액센트, 다크=밝은 액센트. */
.badge-accel { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .badge-accel, .badge-theme, .badge-today, .badge-selected { color: var(--accent); }
}
/* [P29-3 §4.1] 연관도 밴드 칩 — 표면 3값만 (순위 숫자·점수 미표기). 밴드가 진동
   흡수 장치를 겸하므로 시각 위계는 낮음<중간<높음 순의 절제된 대비만 (틴트 고정, 텍스트 단계). */
.badge-relevancy { font-weight: 700; }
.badge-rel-높음 { background: var(--accent-soft); color: var(--accent-strong); }
.badge-rel-중간 { background: var(--panel); color: var(--ink); }
.badge-rel-낮음 { background: var(--panel); color: var(--sub); }
/* 주목도 배지 — 키-값 칩. 외곽선만 (채운 연관 칩과 위계 분리, 강조 축 아님). */
.badge-attention { background: transparent; border: 1px solid var(--line); color: var(--sub); display: inline-flex; gap: 5px; align-items: baseline; }
.badge-attention .badge-k { color: var(--sub); opacity: .75; font-weight: 400; font-size: .92em; }
/* 검증 전·소급 라벨 필 — 점선 은유 폐기, 라벨 텍스트가 정본 (bg 투명 + 강조 보더). */
.badge-backfill, .badge-pending, .badge-gate-failed {
  background: transparent; border: 1px solid var(--line-strong); color: var(--sub);
}
/* [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: 12.5px; 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: 12.5px; }
/* 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); box-shadow: var(--shadow-card); }
.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, 5.4vw, 34px); line-height: 1.32; letter-spacing: -0.025em; }
/* 부제 = 문장형 원제목 1줄 (표제 보조) */
.card-subtitle { margin: 0 0 10px; font-size: 15px; color: var(--sub); line-height: 1.5; }
/* 채점 상태 한 줄 (§4.20.1(d) 상태 문법) — matured 는 델타 세리프 강조는 성과 층에서 유지 */
.card-status {
  margin: 2px 0 4px; font-size: 13.5px; 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: 20px;
  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: 12.5px; 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: 13.5px; color: var(--ink); }
.attn-role { color: var(--ink); font-size: 14.5px; line-height: 1.7; }
details.attn-evidence > summary {
  cursor: pointer; color: var(--sub); font-size: 13.5px;
  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: 12.5px; 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: 13.5px; padding: 10px 0; }
.meta-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.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 {
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  background: var(--surface); color: var(--sub);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); font-size: 13.5px;
}
.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: 13.5px;
}

.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: 15.5px;
}
.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: 14.5px; line-height: 1.85;
}
.path-sentence:last-child { border-bottom: 1px solid var(--line); }
.path-bid {
  display: inline-flex; align-items: center; height: 22px; margin-right: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--sub); background: var(--panel); border-radius: var(--radius-pill);
  padding: 0 10px; white-space: nowrap;
}
.path-arrow { color: var(--accent); margin: 0 3px; }
.path-mech { color: var(--sub); font-size: 13px; }
.path-node { color: var(--ink); }
.path-target { font-weight: 800; }
/* R6A-5: 경로 종착 마커 — 종착 이모지 대체 타이포 마커(앰버). */
.path-target-marker { color: var(--accent); font-weight: 700; }
.path-counts { color: var(--sub); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
details.chain-details { margin-top: 10px; }
details.chain-details > summary { cursor: pointer; color: var(--sub); font-size: 13.5px; 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: 32px; 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: 12.5px; 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: 14.5px; 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: 15px; 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: 12.5px; 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: 12.5px; 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: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums;
}
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: 13.5px; margin: 2px 0; }
.branch-why { font-size: 14.5px; margin: 4px 0 6px; max-width: 640px; }
.quiet-line { font-size: 13.5px; color: var(--sub); }
.appendix-ref { color: var(--sub); font-size: 13.5px; }
/* [R6E] 경로 인라인 전체 표 — 그 자리에서 펼침(스크롤 점프 제거). summary 는 구
   appendix-ref 링크의 시각 위계 계승(앰버 강조), 펼치면 표가 아래 인라인 렌더. */
details.branch-firms { margin: 6px 0 2px; }
details.branch-firms > summary {
  cursor: pointer; color: var(--accent); font-size: 13.5px; 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 {
  background: var(--accent-soft); color: var(--accent-strong); font-weight: 700;
  margin-right: 6px;
}
/* .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] 도시에르 판정 배지 — 연결 확인/연결 확인 안 됨/검증 오류. */
.badge-confirmed {
  background: #eaf3ea; color: #2e7d32; font-weight: 700; margin-right: 6px;
}
.badge-not-confirmed {
  background: #faecec; color: #c62828; font-weight: 700; margin-right: 6px;
}
/* .badge-gate-failed 은 위 아웃라인 필 그룹에서 정의. */
@media (prefers-color-scheme: dark) {
  .badge-confirmed { background: rgba(129, 199, 132, 0.12); color: #81c784; }
  .badge-not-confirmed { background: rgba(239, 154, 154, 0.12); color: #ef9a9a; }
}
/* [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: 11.5px; color: var(--sub); letter-spacing: 0.01em;
}
.impact-note {
  margin: 6px 0 2px; font-size: 13.5px; 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-sm); padding: 8px 10px; font-size: 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  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: 12.5px; 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: 12.5px; color: var(--sub); white-space: normal; }
.impact-verdict {
  margin: 6px 0 2px; font-size: 12.5px; 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: 11.5px; 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: 12.5px; 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); box-shadow: var(--shadow-card);
}
.falsification h4 { margin: 0 0 6px; }
.falsification ul { margin: 0; padding-left: 18px; font-size: 13.5px; }

/* ── 기업 페이지 ── */
.ext-link { font-size: 11.5px; 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: 13.5px; }
.company-summary { font-size: 15px; }
/* [R6C-6] 기업 헤더 스탯 라인 — 노출 N · 최근 노출일 · 최근 카드(링크). */
.company-stats {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 8px;
  font-size: 13.5px; 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-pill); padding: 2px 9px;
}
.company-list li:hover .company-count { background: var(--surface); }
/* [R6C-4] 색인 정보 냄새 — 최근 노출일·최근 카드 보조 라인. */
.company-list .company-recent {
  color: var(--sub); font-size: 12.5px; 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: 12.5px; color: var(--sub); cursor: pointer;
  font-family: var(--sans); white-space: nowrap;
}
.co-sort-btn:hover { border-color: var(--accent); color: var(--ink); }
.co-sort-btn.is-active {
  color: var(--ink); font-weight: 700; border-color: var(--accent);
}
.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); box-shadow: var(--shadow-card);
  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: 12.5px; color: var(--sub); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.exposure-title { margin: 0; font-size: 15.5px; line-height: 1.45; }
.exposure-title a { word-break: keep-all; overflow-wrap: anywhere; }
/* 연결 서술 첫 문장 1줄 - 전문은 '연결 근거' 접힘. 한 문장이 길어도 1행으로 클램프
   (말줄임) - 티저는 미리보기, 정본은 접힘 안. 토스식 단일 초점(기본 상태 최소 높이). */
.exposure-teaser {
  margin: 4px 0 0; font-size: 13.5px; 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: 12.5px; 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);
  box-shadow: var(--shadow-card); 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: 13.5px; 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: 12.5px; }
.th-sub { font-weight: 400; color: var(--sub); font-size: 11.5px; letter-spacing: 0; }
/* [R6C-1] 표 정렬 글리프 — 같은 잉크색 무채색 (R6.6 가드레일: 빨강/초록 금지) */
.th-sort-glyph { font-size: 10px; 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: 20px; font-weight: 800; color: var(--sub); }
.tr-slot-frac { font-size: 12.5px; color: var(--sub); margin-top: 2px; }
.tr-agg-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14.5px; }
.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] 트랙 레코드 셀 밀도 완화 -- 평균·터치·홉 행을 접힘 안으로 강등 */
details.tr-cell-detail { display: block; margin-top: 2px; }
details.tr-cell-detail > summary { display: list-item; color: var(--sub); font-size: 12.5px; cursor: pointer; }
details.tr-cell-detail > summary:hover { color: var(--accent); }

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

/* [R7B] ① 가치 바 -- 글래스 크롬 (2.2 @supports 가 덧씌움), dismissible */
.value-bar {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0 0; padding: var(--space-2) var(--space-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}
.value-bar[hidden] { display: none; }
.value-bar-copy { margin: 0; font-size: 13.5px; 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: 18px; 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: 13.5px; 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;
}

/* 리스트 리셋 — 번호 리스트 제거, 괘선 행 레이아웃 */
/* [R6C-5] 이벤트 목록 탭 — 사전등록/아카이브. app.css .scr-tabs 와 동형. */
/* [R7 UX] 이벤트 리스트 필터칩 — 사후생성 토글. 무JS는 전체 노출(칩 hidden). */
.event-filter { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.event-filter-btn {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 5px 14px; font-size: 12.5px; color: var(--sub); cursor: pointer;
  font-family: var(--sans); font-weight: 600; white-space: nowrap;
}
.event-filter-btn:hover { border-color: var(--accent); color: var(--ink); }
.event-filter-btn[aria-pressed="true"] {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}
.event-filter-note { font-size: 12.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.archive-list.only-prereg li.home-card[data-backfilled="1"] { display: none; }

/* [탐색 서브네비 통일 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: 18px; }
.research-card p { margin: 0 0 var(--space-4); color: var(--sub); font-size: 14.5px; line-height: 1.7; }
.research-card .hero-cta { margin: auto 0 0; } /* CTA 바닥 정렬 (그리드 높이 동기) */
.research-card-icon {
  width: 40px; height: 40px; margin-bottom: var(--space-3);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-md);
}
.research-card-icon svg { width: 22px; height: 22px; }

.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; }

/* [P-explore-redesign] ② 최근 이벤트 카드 — 위계·전체 클릭·호버 리프트 */
.home-feed { display: flex; flex-direction: column; gap: var(--space-3); }
.home-feed .home-card {
  position: relative; overflow: hidden;
  padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
.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); }
.home-feed .home-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); border-color: var(--line-strong); }
.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); }

.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: 22px; padding: 0 11px 0 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.home-status .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.home-status.live { background: #fff5e8; color: #b54708; }
.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: #98a2b3; }
.home-status.none { background: var(--panel); color: var(--sub); }
.home-status.none .dot { background: var(--line-strong); }
.home-card-when { font-size: 12.5px; color: var(--sub); font-weight: 600; }

.home-card-title { margin: 0 0 8px; font-size: 18px; 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: 13.5px; 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 {
  background: var(--panel); color: var(--sub);
  font-weight: 700; font-size: 10.5px; height: 18px; padding: 0 8px;
  vertical-align: middle;
}

/* [R7B] ④ 컴팩트 스트립 -- 모바일 1단, 720px+ 2단 */
.home-strip { border-top: 1px solid var(--line); margin-top: var(--space-6); padding-top: var(--space-2); }
@media (min-width: 720px) {
  .home-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); }
}

/* "오늘" 배지 — 기존 .badge 규격, 앰버 강조 */
.badge-today {
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 700; font-size: 10.5px; height: 18px; padding: 0 8px;
  vertical-align: middle;
}
/* 최근 이벤트 행의 상대 발행일 ("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: var(--panel); border-radius: var(--radius-pill); padding: 0 8px; height: 18px;
  display: inline-flex; align-items: center; letter-spacing: 0.04em;
}

/* 하단 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);
}

/* ── [R7B] 글래스 크롬 -- 떠 있는 요소 전용 (sticky 내비·런처·홈 가치 바).
   기본은 불투명 (backdrop-filter 미지원 fail-open). 본문 서피스 적용 금지. ── */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-nav-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-nav-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: 31px; }
  .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: 12.5px;
    letter-spacing: 0.01em;
  }
}

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

/* ── [R7C] 결론 카드 — 토스식 3줄 + 메타 1행. R7B 피드 카드(home-card) 서피스 문법. ── */
.card-conclusion {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0 var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.conclusion-line { margin: 0; font-size: 15px; line-height: 1.6; }
.conclusion-what { font-weight: 600; color: var(--ink); }
/* [R7 카드 경로 UX] 결론 카드 위계 -- 경로·노출 후보 수(유일한 클릭 가능 정본)를
   스캔 앵커로 키우고 보조 카운트(주목 전·제외)는 demote. 클래스 계약 불변(CSS만). */
.conclusion-reach { font-size: 16px; }
.conclusion-reach a { color: var(--ink); font-weight: 700; text-decoration-color: var(--line-strong); }
.conclusion-reach a:hover { color: var(--accent); }
.conclusion-sub { display: inline-block; color: var(--sub); font-size: 13px; margin-left: var(--space-2); font-variant-numeric: tabular-nums; }
.card-conclusion .card-status { margin: 0; }
.conclusion-delta { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); text-decoration-color: var(--line-strong); }
.conclusion-delta:hover { color: var(--accent); }
.conclusion-meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }

/* ── [R7C] 경로 보기 제자리 공개 (attention 행) ── */
details.attn-path { margin: 0; }
details.attn-path > summary {
  cursor: pointer; font-size: 12.5px; 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: 12.5px; }
.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); box-shadow: var(--shadow-card);
  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: 14.5px; 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: 18px; 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); box-shadow: var(--shadow-card);
  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: 12.5px; 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 10px;
  font-size: 12px; color: var(--accent-strong); background: var(--accent-soft);
  border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap;
}
.path-chip:hover { color: var(--accent); }
.quiet-card-detail > summary {
  cursor: pointer; color: var(--sub); font-size: 12.5px; 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: 12.5px; }
.quiet-card-hyg { margin: 6px 0 2px; font-size: 12.5px; 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: 13.5px; 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: 13.5px; 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; }

/* 섹션 푸터 — 전체 N곳은 부록 A 안내. */
.section-footer { font-size: 13.5px; 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);
  box-shadow: var(--shadow-card);
  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-sm); cursor: pointer;
}
.share-btn:hover, .appendix-toggle:hover { border-color: var(--accent); color: var(--accent); }
.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, #101828); 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, #101828);
  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: 12.5px; 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);
}
.thesis-headline { margin: var(--space-2) 0 var(--space-1); font-size: 15px; font-weight: 700; color: var(--ink); }
.thesis-para { margin: var(--space-1) 0; font-size: 14px; line-height: 1.75; color: var(--ink); }
.thesis-para strong { color: var(--ink); }
.thesis-meta { margin: var(--space-2) 0 0; font-size: 12px; color: var(--sub); }

/* [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;
  background: #f7f9fb; border-left: 1px solid #e4e7ec;
}
@media (prefers-color-scheme: dark) {
  body.sayo-shell.sp-prepaint::after { background: #0d1220; border-left-color: #232b3d; }
}
@media (max-width: 1023px) {
  body.sayo-shell.sp-open { padding-right: 0; }
  body.sayo-shell.sp-prepaint::after { display: none; }
}
/* [R7J §4.1] 연관도 4축 판정 근거 — 밴드 아래 접이식(attn-thesis 동렬 보조 details).
   축 라벨(직접성·노출 규모·경쟁 위치·반영 시차) + 회사별 분석 자료 기반 근거 문장. */
details.attn-relevancy { margin: 0; }
details.attn-relevancy > summary {
  cursor: pointer; font-size: 12.5px; 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);
}
.relevancy-axes { margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.rel-axis-label { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rel-axis-basis { margin: 2px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--sub); }

/* ── [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;
  list-style-position: inside;
}
/* 펼침 상태 — 개별 details 의 [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 var(--space-3) var(--space-3);
}
.attn-detail-group > details.attn-evidence[open] {
  background: var(--panel);
  padding: 0 var(--space-3) 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); }

/* [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: 13.5px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-card);
  transition: border-color .15s, color .15s;
}
.home-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.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: 19px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.home-fig span { font-size: 12.5px; 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: 11.5px; 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: 12.5px; font-weight: 600; text-decoration: none; }
.home-firm:hover { background: var(--accent); color: var(--accent-ink); }
.home-firm-more { font-size: 12.5px; color: var(--sub); font-weight: 600; }