@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root {
  --bg: #FAFBFE; --bg2: #F2F4F8; --sf: #FFFFFF; --bd: #E8ECF2;
  --tx: #1A1D26; --tx2: #3D4351;
  /* R18 P1 (라이트 본문 대비) — 메타 그레이 #8B95A8(3.02:1 on white) → #646E80(5.14:1, WCAG AA).
     본문 텍스트/아이콘 다수가 --dm 사용 → 1스텝 다크닝으로 AA 일괄 충족(다크는 --dk-dm 별도, 무회귀). */
  --dm: #646E80;
  /* R28 P1② (조니 2심, 2026-06-11) — 다크 muted 단일 토큰(--dk-dm #8E8676)이 amber tint 배경
     (pending-sub·cd-label 3.6:1)·웜 카드 배경(idx-fut-disclaimer·wr-running 4.46:1)에서 AA 미달.
     해당 4 사용처 전용 상위 muted 토큰 분리 — 라이트는 --dm 동일값(무회귀), 다크만 #A9A18E
     (5.06:1 on #3A3018 / 6.27:1 on 웜 카드 — 전 사용처 ≥4.5:1 실측). */
  --dm-hi: #646E80;
  /* R18 P1 (라이트 본문 대비) — 골드 본문 텍스트 #C49930(2.64:1 on white) → #7E5E0E
     (6.01:1 white / 5.60:1 am4 / 4.99:1 am3, WCAG AA 전 배경). 칩·뱃지(am3 bg)·출처·
     "이날의 추천"·상세보기 등 --am 텍스트 일괄 가독 충족. --am2/3/4(밝은 틴트 = 배경용)는
     불변 → 틴트 스케일 유지. --am bg + #fff 텍스트(theme-map-chip 등)는 대비 개선. 다크는 --dk-am 별도(무회귀). */
  --am: #7E5E0E; --am2: #E8C063; --am3: #FBE9B5; --am4: #FFF6E5;
  --ru: #A01528;
  --pos: #1A6B2D; --pos-bg: #E8F5EC;
  --neg: #B8302E; --neg-bg: #FFF0F0;
  --neu: #6B7A99; --neu-bg: #F2F4F8;
  /* R27 P1① (조니 2심, 2026-06-11) — neu-bg 위 본문 텍스트용 AA 슬레이트.
     --neu #6B7A99 on #F2F4F8 = 3.92:1 (AA 미달) → #525F78 = 5.84:1. 다크는 var(--dk-neu) override. */
  --neu-tx-aa: #525F78;
  /* R27 P0-1 (조니 2심, 대표 직접 catch) — sticky 픽바 높이 단일 상수. 픽바 visible 높이와
     날짜 헤더(.cal-content-head) stack top 이 같은 변수를 참조 → 한쪽 변동 시 자동 추종, 간격 0 보장. */
  --pickbar-h: 52px;

  /* 카드 내부 좌측 인덴트 변수 (외형 불변 리팩토링, 2026-04-22)
     [레이아웃 가이드라인 — 배지 정렬 원칙]
     `.cal-feature-badges`는 `.cal-feature-card` 직속 자식이므로 카드 왼쪽 기준 절대 padding을 가진다.
     뉴스 텍스트·테마칩·소스 pill은 `.cal-feature-body > .cal-feature-summary` 하위이므로
     실제 x좌표는 `--card-indent-body`로 결정된다.
     배지를 뉴스 텍스트와 같은 x에 맞추려면 `--card-indent-badges`는 반드시 `--card-indent-body`와 동일해야 한다.
     (`--card-indent-news`는 `.stock-news` 박스 전용이며 `.cal-feature-card`와 무관) */
  --card-indent-header: 12px;  /* cal-feature-head (shorthand 3-value의 좌우 값) */
  --card-indent-nums: 44px;    /* cal-feature-nums (차트 영역 정렬) */
  --card-indent-badges: var(--card-indent-body);  /* cal-feature-body 하위 요소(뉴스·테마·소스 pill)와 x좌표 일치 (2026-04-22 원인 확정 수정) */
  --card-indent-body: 12px;    /* cal-feature-body (desktop은 padding-left=12) */
  --card-indent-news: 36px;    /* stock-news 기준값 (cal-feature-card와 무관한 별도 박스) */

  /* REQ-035 §D — Stripe Press × Linear × Are.na 미니멀리즘 5단계 그레이 토큰
     SPEC-001 §IX#10. 자주 등장 hex 5건은 본 토큰으로 매핑, 나머지는 REQ-037에서 처리. */
  --g04: rgba(0,0,0,0.04);
  --g08: rgba(0,0,0,0.08);
  --g40: rgba(0,0,0,0.4);
  --g60: rgba(0,0,0,0.6);
  --g80: rgba(0,0,0,0.8);

  /* REQ-035 §E — 트랜지션 표준화 (Linear-style cubic-bezier) */
  --t-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);

  /* 등락 색 토큰화 (DOC-20260610-DSN-001 §1.2) — 다크에서 대비 상향 위해 단일 출처화.
     상승=적/하락=청은 한국 증시 관습 (light 값 변경 금지, 다크만 보정). */
  --up: #C53939;
  --down: #1958C7;

  /* R13 WCAG 텍스트 토큰 — 라이트 값(5.07~6.77:1)이 다크에선 깨지므로 다크 override 의무.
     (v299 Stage-1에서 하드코딩한 값을 토큰화하여 다크 정합 확보) */
  --streak-tx: #7A5E12;     /* 연속선정 뱃지 글자 (배경 --am3) */
  --now-label-tx: #5A6070;  /* 슬라이더 "현재" 라벨 (배경 --bg2) */
  --rec-code-tx: #5C6270;   /* 추천 카드 티커 (배경 --am4) */
  --note-tx: #52596A;       /* 면책/note 문구 */
  --wr-card-top: #FFFDF6;   /* 승률카드 그라데이션 top (다크 override) */
  --wr-basis-tx: #5E6776;   /* 승률카드 basis/체결현실성 단서 (light 5.52 / dark override) */

  /* R15 다크 표면 일소 — 라이트 default(=기존 하드코드 순백 베일 유지). 다크에서만 위 --dk-* override.
     light는 frosted white 그대로(회귀 0), dark는 함몰 표면 톤으로 치환. */
  --glass-sf: rgba(255,255,255,0.7);   /* 프로스티드 헤더 표면 */
  --inset-sf: rgba(255,255,255,0.55);  /* 픽카드 인셋 박스 */
  --inset-bd: var(--am3);              /* 인셋 경계 (라이트 골드) */
  --pill-sf: #F8FAFC;                  /* 흰 알약 버튼 표면 */
  --pill-sf-hover: #E2E8F0;            /* 알약 hover */
  --pill-sf-active: #CBD5E1;           /* 알약 active */
  --pill-tx: #0F172A;                  /* 알약 텍스트 (라이트 near-black) */
  --pill-bd: #64748B;                  /* 알약 경계 */
  --chart-label-bg: rgba(255,255,255,0.85); /* 차트 가격라벨 칩 배경 */
  --cal-future: #C2C8D2;               /* 달력 미래 날짜 (라이트) — 밤사용자 P3: --bd(#E8ECF2) 거의 안 보임 → 한 톤 진하게 */
  --warm-top: #FFFCF3;                 /* 햇살 그라데이션 top (toss-cal) */
  --warm-bot: var(--sf);               /* 햇살 그라데이션 bottom (toss-cal) */
  --warm2-top: #FFFBEF;                /* 햇살 그라데이션 top (rec-detail 펼침 본문) */
  --warm2-bot: #FFF9E8;                /* 햇살 그라데이션 bottom (rec-detail) */
  --warm3-top: #FFF9E8;                /* 햇살 그라데이션 top (kiwoom-block) */
  --warm3-bot: #FFFFFF;                /* 햇살 그라데이션 bottom (kiwoom-block) */
  /* footer = 항상 어두운 anchor. 라이트는 기존 var(--tx)=#1A1D26 동일, 다크는 페이지 bg보다 한 단계
     더 어둡게(밝은 판때기 회귀 봉쇄 — 다크에서 var(--tx)=#ECEEF3 near-white 반전 버그 fix). */
  --footer-bg: #1A1D26; --footer-tx: #8B95A8;

  /* DSN-002 v2 신규 의미 토큰 — 라이트 기본값(다크는 --dk-* override). */
  --sf2: #FFFFFF;            /* 카드 위 강조 표면(승률카드 top 등) — 라이트는 흰색 */
  --bd2: #DDD6C4;            /* 인셋·강조 영역 보더 — 라이트는 연한 웜 그레이 */
  --section-summary: #8A6810; /* 섹션 접힘 미니요약 — 라이트 WCAG 골드(다크 override) */
  --cal-sun: #DC2626;       /* 달력 일요일(적) */
  --cal-sat: #2563EB;       /* 달력 토요일(청) */

  /* 판정단 v302 적발 — disclosure/credit/disc-period 뱃지 의미색 토큰 (라이트 baseline + 다크 override).
     다크 값은 판정단 지정 rgba(반투명, 카드 위 합성). 라이트는 흰 카드 WCAG 통과 진한 색 유지. */
  --badge-disc-bg: #E8F0FE; --badge-disc-tx: #1A5FB4; --badge-disc-bd: #B3D1F5;       /* disclosure = 파랑(info) */
  --credit-caution-bg: #FEF3C7; --credit-caution-tx: #92400E; --credit-caution-bd: #FCD34D55; /* 신용주의 = 앰버 */
  --credit-credit-bg: #FEE2E2; --credit-credit-tx: #991B1B; --credit-credit-bd: #FCA5A555;    /* 신용 = 적 */
  --disc-period-bg: #EEF1F5; --disc-period-tx: #475569;                                 /* 공시기간 = 슬레이트 */
  --range-marker-bg: #FFFFFF; /* 슬라이더 마커 — 라이트 흰, 다크 톤다운 */
}

/* ── 다크모드 (DOC-20260610-DSN-001) ──────────────────────────────────────
   단일 출처: 다크 토큰 한 벌을 .pm320-dark-vars 로 정의 → @media(OS추종)와
   [data-theme="dark"](수동 토글) 양쪽에서 @extend 대신 동일 선언 참조.
   CSS는 @extend가 없으므로 변수 한 벌을 공통 그룹으로 빼서 두 셀렉터가 같은
   값을 가리키게 한다 (§1.5 한쪽만 갱신되는 거짓 충실성 회귀 방지). */
:root {
  /* 다크 값 한 벌 — light 모드에선 미참조(아래 셀렉터가 활성일 때만 적용).
     ── DOC-20260610-DSN-002 v2: 웜 차콜 전면 재설계 ────────────────────────
     v1 쿨 차콜(#22242B 푸른끼)이 골드를 탁하게 한 주범 → 유일 합격 카드(#26241C 웜 차콜)
     기조로 전 표면 통일. elevation = 명도 단조 증가(bg<bg2<sf<sf2<inset<pill-hover).
     골드 정체성(햇살)과 웜 다크 = 같은 색온도 가족 → "한 시대의 색". */
  /* 표면 명도 단계 (L0<L1<L2<L3<L3.5<L4) */
  --dk-bg: #1A1813; --dk-bg2: #211E17; --dk-sf: #23211A; --dk-sf2: #2A2820;
  /* 보더 2단 (기본 / 인셋·강조) */
  --dk-bd: #3A352A; --dk-bd2: #48412F;
  /* 텍스트 위계 3단 — 흐림(--dk-dm)도 3:1 하한 사수("안 보이는 글자" 봉쇄) */
  --dk-tx: #F2EEE4; --dk-tx2: #BBB3A2; --dk-dm: #8E8676;
  /* R28 P1② — muted 상위 변주(다크 전용 분리). pending-sub·cd-label·idx-fut-disclaimer·wr-running 전용. */
  --dk-dm-hi: #A9A18E;
  /* 골드 액센트 — 다크 전용 재조정, 웜 표면이라 비로소 안 탁함.
     am4(연 tint 배경)는 대표 "정보 손실 0" 원칙: 라이트 #FFF6E5(1.07:1)와 식별성 동급 위해 #3A3018(1.24:1)로 상향. */
  --dk-am: #EBC25E; --dk-am2: #F4D27A; --dk-am3: #4A3E1C; --dk-am4: #3A3018;
  --dk-section-summary: #D9B764; /* 섹션 접힘 미니요약 (#8A6810 하드코딩 흡수) */
  --dk-ru: #D85568;
  /* 상태 tint 배경 — 대표 "정보 손실 0": 라이트 동급 식별성으로 한 단 밝게(가독 우선, 스펙 §3.5 대비 상향).
     pos-bg 1.04→1.22 / neg-bg 1.05→1.19 / neu-bg 1.03→1.15 (라이트 1.12/1.11/1.10 동급+). */
  --dk-pos: #5FD88A; --dk-pos-bg: #203524;
  --dk-neg: #FF8A87; --dk-neg-bg: #402824;
  --dk-neu: #8E96A8; --dk-neu-bg: #302B22;
  --dk-up: #FF6B6B; --dk-down: #5B9BFF;
  --dk-g04: rgba(255,255,255,0.05); --dk-g08: rgba(255,255,255,0.09);
  --dk-g40: rgba(255,255,255,0.42); --dk-g60: rgba(255,255,255,0.64);
  --dk-g80: rgba(255,255,255,0.85);
  --dk-badge-disclosure: #5B9BFF; --dk-badge-predicted: #FF8A55;
  --dk-header-glass: rgba(26,24,19,0.85);
  /* R15 다크 표면 일소 (DOC-20260610-DSN-001 §1.5) + v2 웜 재정의 (DSN-002 §3.1):
     --glass-sf: 프로스티드 표면(sticky 헤더/접힘 헤더/달력 헤드) — 라이트 크림 그라데이션 폐기, 웜 반투명
     --inset-sf: 픽카드 인셋(물타기/만기/잠정/상세보기) — v2: 카드보다 *밝게*(상승 elevation L3.5, 토스/Robinhood 관습)
     --inset-bd: 인셋 경계 — 한 단 밝은 --dk-bd2(경계 실종 봉쇄, zoom-pickcard fix)
     --pill-sf: 흰 알약 버튼 표면 / --pill-sf-hover: hover(한 단 더 밝게 L4) */
  --dk-glass-sf: rgba(26,24,19,0.82);
  --dk-inset-sf: #2E2A20; --dk-inset-bd: #48412F;
  --dk-pill-sf: #2E2A20; --dk-pill-sf-hover: #383224; --dk-pill-sf-active: #423B2A;
  --dk-pill-tx: #F2EEE4; --dk-pill-bd: #58503C;
  --dk-chart-label-bg: rgba(26,24,19,0.85);
  --dk-cal-future: #7A7464; /* v2: 어둡고 쿨(#565B66)→웜·밝게, 3:1 사수(on sf 3.46:1, on bg 3.81:1) */
  --dk-cal-sun: #F87171; --dk-cal-sat: #60A5FA;
  /* 판정단 v302 지정 다크 뱃지 값 (반투명 합성: disclosure 7.1:1 / caution 8.0:1 / credit 6.6:1) */
  --dk-badge-disc-bg: rgba(96,165,250,0.14); --dk-badge-disc-tx: #93C5FD; --dk-badge-disc-bd: rgba(96,165,250,0.30);
  --dk-credit-caution-bg: rgba(234,179,8,0.16); --dk-credit-caution-tx: #FCD34D; --dk-credit-caution-bd: rgba(234,179,8,0.35);
  --dk-credit-credit-bg: rgba(248,113,113,0.16); --dk-credit-credit-tx: #FCA5A5; --dk-credit-credit-bd: rgba(248,113,113,0.35);
  --dk-disc-period-bg: rgba(148,163,184,0.14); --dk-disc-period-tx: #CBD5E1;
  --dk-range-marker-bg: #E8EEF3; /* P2: 순백 발광 완화 */
  /* 햇살 톤 그라데이션(toss-cal / rec-detail 펼침 본문) — 라이트 크림 → 다크 웜 함몰 2단 */
  --dk-warm-top: #232017; --dk-warm-bot: #1D1B14;
  --dk-streak-tx: #F4D27A; --dk-now-label-tx: #BBB3A2;
  --dk-rec-code-tx: #D4C290; --dk-note-tx: #A39B8A;
  --dk-wr-card-top: #2A2820; --dk-wr-basis-tx: #A39B8A;
}
/* 다크 토큰 매핑 — @media 추종(미설정자) + 수동 토글 양쪽 공통 (한 벌 정의) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dk-bg); --bg2: var(--dk-bg2); --sf: var(--dk-sf); --bd: var(--dk-bd);
    --tx: var(--dk-tx); --tx2: var(--dk-tx2); --dm: var(--dk-dm); --dm-hi: var(--dk-dm-hi);
    --am: var(--dk-am); --am2: var(--dk-am2); --am3: var(--dk-am3); --am4: var(--dk-am4);
    --ru: var(--dk-ru);
    --pos: var(--dk-pos); --pos-bg: var(--dk-pos-bg);
    --neg: var(--dk-neg); --neg-bg: var(--dk-neg-bg);
    --neu: var(--dk-neu); --neu-bg: var(--dk-neu-bg);
    --neu-tx-aa: var(--dk-neu); /* R27 P1① — 라이트만 대비 미달이었음, 다크는 종전 유지 */
    --up: var(--dk-up); --down: var(--dk-down);
    --g04: var(--dk-g04); --g08: var(--dk-g08); --g40: var(--dk-g40);
    --g60: var(--dk-g60); --g80: var(--dk-g80);
    --badge-disclosure: var(--dk-badge-disclosure); --badge-predicted: var(--dk-badge-predicted);
    --header-glass: var(--dk-header-glass);
    --streak-tx: var(--dk-streak-tx); --now-label-tx: var(--dk-now-label-tx);
    --rec-code-tx: var(--dk-rec-code-tx); --note-tx: var(--dk-note-tx);
    --wr-card-top: var(--dk-wr-card-top); --wr-basis-tx: var(--dk-wr-basis-tx);
    --glass-sf: var(--dk-glass-sf); --inset-sf: var(--dk-inset-sf); --inset-bd: var(--dk-inset-bd);
    --pill-sf: var(--dk-pill-sf); --pill-sf-hover: var(--dk-pill-sf-hover);
    --pill-sf-active: var(--dk-pill-sf-active); --pill-tx: var(--dk-pill-tx); --pill-bd: var(--dk-pill-bd);
    --chart-label-bg: var(--dk-chart-label-bg); --cal-future: var(--dk-cal-future);
    --warm-top: var(--dk-warm-top); --warm-bot: var(--dk-warm-bot);
    --warm2-top: var(--dk-warm-top); --warm2-bot: var(--dk-warm-bot);
    --warm3-top: var(--dk-warm-top); --warm3-bot: var(--dk-warm-bot);
    /* DSN-002 v2 신규 토큰 */
    --sf2: var(--dk-sf2); --bd2: var(--dk-bd2);
    --section-summary: var(--dk-section-summary);
    --cal-sun: var(--dk-cal-sun); --cal-sat: var(--dk-cal-sat);
    --badge-disc-bg: var(--dk-badge-disc-bg); --badge-disc-tx: var(--dk-badge-disc-tx); --badge-disc-bd: var(--dk-badge-disc-bd);
    --credit-caution-bg: var(--dk-credit-caution-bg); --credit-caution-tx: var(--dk-credit-caution-tx); --credit-caution-bd: var(--dk-credit-caution-bd);
    --credit-credit-bg: var(--dk-credit-credit-bg); --credit-credit-tx: var(--dk-credit-credit-tx); --credit-credit-bd: var(--dk-credit-credit-bd);
    --disc-period-bg: var(--dk-disc-period-bg); --disc-period-tx: var(--dk-disc-period-tx);
    --range-marker-bg: var(--dk-range-marker-bg);
    --footer-bg: #141210; --footer-tx: #8E8676;
  }
}
:root[data-theme="dark"] {
  --bg: var(--dk-bg); --bg2: var(--dk-bg2); --sf: var(--dk-sf); --bd: var(--dk-bd);
  --tx: var(--dk-tx); --tx2: var(--dk-tx2); --dm: var(--dk-dm); --dm-hi: var(--dk-dm-hi);
  --am: var(--dk-am); --am2: var(--dk-am2); --am3: var(--dk-am3); --am4: var(--dk-am4);
  --ru: var(--dk-ru);
  --pos: var(--dk-pos); --pos-bg: var(--dk-pos-bg);
  --neg: var(--dk-neg); --neg-bg: var(--dk-neg-bg);
  --neu: var(--dk-neu); --neu-bg: var(--dk-neu-bg);
  --neu-tx-aa: var(--dk-neu); /* R27 P1① — 라이트만 대비 미달이었음, 다크는 종전 유지 */
  --up: var(--dk-up); --down: var(--dk-down);
  --g04: var(--dk-g04); --g08: var(--dk-g08); --g40: var(--dk-g40);
  --g60: var(--dk-g60); --g80: var(--dk-g80);
  --badge-disclosure: var(--dk-badge-disclosure); --badge-predicted: var(--dk-badge-predicted);
  --header-glass: var(--dk-header-glass);
  --streak-tx: var(--dk-streak-tx); --now-label-tx: var(--dk-now-label-tx);
  --rec-code-tx: var(--dk-rec-code-tx); --note-tx: var(--dk-note-tx);
  --wr-card-top: var(--dk-wr-card-top); --wr-basis-tx: var(--dk-wr-basis-tx);
  --glass-sf: var(--dk-glass-sf); --inset-sf: var(--dk-inset-sf); --inset-bd: var(--dk-inset-bd);
  --pill-sf: var(--dk-pill-sf); --pill-sf-hover: var(--dk-pill-sf-hover);
  --pill-sf-active: var(--dk-pill-sf-active); --pill-tx: var(--dk-pill-tx); --pill-bd: var(--dk-pill-bd);
  --chart-label-bg: var(--dk-chart-label-bg); --cal-future: var(--dk-cal-future);
  --warm-top: var(--dk-warm-top); --warm-bot: var(--dk-warm-bot);
  --warm2-top: var(--dk-warm-top); --warm2-bot: var(--dk-warm-bot);
  --warm3-top: var(--dk-warm-top); --warm3-bot: var(--dk-warm-bot);
  /* DSN-002 v2 신규 토큰 */
  --sf2: var(--dk-sf2); --bd2: var(--dk-bd2);
  --section-summary: var(--dk-section-summary);
  --cal-sun: var(--dk-cal-sun); --cal-sat: var(--dk-cal-sat);
  --badge-disc-bg: var(--dk-badge-disc-bg); --badge-disc-tx: var(--dk-badge-disc-tx); --badge-disc-bd: var(--dk-badge-disc-bd);
  --credit-caution-bg: var(--dk-credit-caution-bg); --credit-caution-tx: var(--dk-credit-caution-tx); --credit-caution-bd: var(--dk-credit-caution-bd);
  --credit-credit-bg: var(--dk-credit-credit-bg); --credit-credit-tx: var(--dk-credit-credit-tx); --credit-credit-bd: var(--dk-credit-credit-bd);
  --disc-period-bg: var(--dk-disc-period-bg); --disc-period-tx: var(--dk-disc-period-tx);
  --range-marker-bg: var(--dk-range-marker-bg);
  --footer-bg: #141210; --footer-tx: #8E8676;
}
@media (max-width: 640px) {
  main { padding-left: 16px; padding-right: 16px; }
  :root {
    --card-indent-header: 6px;
    --card-indent-nums: 26px;
    --card-indent-badges: var(--card-indent-body);  /* 모바일도 body와 일치 */
    --card-indent-body: 26px;
    --card-indent-news: 10px;
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-family: 'Inter', 'Pretendard', -apple-system, sans-serif; background: var(--bg); color: var(--tx); -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* overflow-x 안전판: 닫힌 .mobile-drawer(position:fixed + translateX(100%))가 모바일에서 페이지 scrollWidth를 밀어내 가로 스크롤 유발 → 봉쇄.
   ⚠️ hidden 금지: 조상 overflow:hidden은 스크롤 컨테이너를 만들어 자손 position:sticky(.cal-content-head top:68px, REQ-072)를 무력화(CSS 표준).
   clip은 넘침 차단(가로 스크롤 방지 유지)하되 스크롤 컨테이너를 만들지 않아 sticky 보존. (2026-05-30 회귀 fix) */
body { min-height: 100vh; line-height: 1.55; overflow-x: clip; }
a { color: inherit; text-decoration: none; }

header {
  position: sticky; top: 0; z-index: 100;
  /* 다크모드: 라이트 글래스 rgba(250,251,254,.85) → 토큰 기반 (--header-glass, 다크 override) */
  background: var(--header-glass, rgba(250,251,254,0.85));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
}
.header-inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 36px; height: 36px; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-name { font-size: 18px; font-weight: 900; letter-spacing: -0.5px; }

/* PM320 헤더 브랜딩 (Q-20260613-163, 조니 판정 — 가로 워드마크 채택) — 제품 페이지 주인공 = PM320.
   identity-pm320/wordmark_horizontal 글리프 path verbatim(자간 +200 units fix 포함) 인라인 + 컨테이너 rect
   제거(헤더 글래스와 충돌 회피, 다크 #101829 navy 칩 봉쇄). 색은 토큰 반응: PM=잉크 / 320=골드.
   100m1s는 종속 eyebrow 라벨(작게·위)로 격하 — 위계 = PM320 hero. */
/* R55 P2-5 (픽셀 sweep DOC-20260614-JDG-004 — 로고 링크 93×32 터치 < 44) — 로고 관용 예외 대신
   실 터치 44 채택: min-height 44 + justify-content center 로 글리프(eyebrow 9 + 워드마크 26 ≈ 32px)
   크기·간격 불변, 터치존만 세로 중앙 44 확장. 헤더(.brand align-items:center)라 행 정렬 무영향. */
.brand-pm320 { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 44px; line-height: 1; text-decoration: none; }
.brand-pm320-wordmark { display: block; height: 26px; width: auto; }
.brand-pm320-wordmark .pm-ink { fill: #1a1d26; }    /* "PM" 잉크 (라이트) */
.brand-pm320-wordmark .pm-gold { fill: #96741f; }   /* "320" 골드 (라이트) */
:root[data-theme="dark"] .brand-pm320-wordmark .pm-ink { fill: #ffffff; }
:root[data-theme="dark"] .brand-pm320-wordmark .pm-gold { fill: #d9be7e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-pm320-wordmark .pm-ink { fill: #ffffff; }
  :root:not([data-theme="light"]) .brand-pm320-wordmark .pm-gold { fill: #d9be7e; }
}
@media (max-width: 480px) {
  .brand-pm320-wordmark { height: 23px; }
}
.nav-links { display: flex; gap: 24px; font-size: 13px; font-weight: 600; color: var(--tx2); }
.nav-links a:hover, .nav-links a.active { color: var(--am); }

/* ═══ 메뉴 간극 해소 (대표 2026-06-14 "회사 홈과 pm320 사이 간극을 다 채워") ═══
   회사 홈 index.html 의 Products ▾ 드롭다운을 pm320(news.css)에도 동일 적용 → 서브페이지에서도
   주식 라인 횡이동. index.html 은 자체 :root 토큰(--ease-out·--am-chip)을 쓰지만 news.css 는
   --t-fast/--am4 가 동치 → 매핑(--ease-out=cubic-bezier(0.16,1,0.3,1), --am-chip=--am4). 시각 동일. */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > a, .nav-item > .nav-trigger {
  position: relative; padding: 4px 0;
  font: inherit; color: var(--tx2); background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color 0.18s cubic-bezier(0.16,1,0.3,1);
}
.nav-item > a:hover, .nav-item > .nav-trigger:hover,
.nav-item:focus-within > .nav-trigger { color: var(--am); }
.nav-item > a::after, .nav-item > .nav-trigger::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--am); transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.nav-item > a:hover::after, .nav-item > .nav-trigger:hover::after,
.nav-item:focus-within > .nav-trigger::after { transform: scaleX(1); }
.nav-caret { width: 9px; height: 9px; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 230px; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10); padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.2s cubic-bezier(0.16,1,0.3,1), visibility 0.2s;
  z-index: 120;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown .dd-group-label {
  font-size: 10px; font-weight: 700; color: var(--dm); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 8px 12px 4px;
}
.nav-dropdown a {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
  padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--tx);
  transition: background 0.15s cubic-bezier(0.16,1,0.3,1), color 0.15s cubic-bezier(0.16,1,0.3,1);
}
.nav-dropdown a:hover, .nav-dropdown a.active { background: var(--sf2); color: var(--am); }
.nav-dropdown a .dd-sub { font-size: 11px; font-weight: 500; color: var(--dm); }
.nav-dropdown .dd-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.4px; padding: 2px 6px; border-radius: 4px;
  color: var(--am); background: var(--am4);
}
.nav-dropdown .dd-tag.beta { background: transparent; border: 1px solid var(--am3); }
.nav-dropdown .dd-tag.soon { color: var(--dm); background: var(--bg2); }
/* 비활성 항목(투자 팁 예정)은 클릭 불가 → 커서도 정직하게 default (FLR-AGT-002 동형 P2) */
.nav-dropdown a[aria-disabled="true"] { cursor: default; opacity: 0.62; }
.nav-dropdown a[aria-disabled="true"]:hover { background: none; color: var(--tx); }
/* PM320 하위(오늘의 추천·백테스트) = 형제 아님, 한 단 들여써 위계 정직화(#1 IA 안1) */
.nav-dropdown a.dd-child { padding-left: 24px; font-weight: 500; position: relative; }
.nav-dropdown a.dd-child::before {
  content: '↳'; position: absolute; left: 10px; color: var(--dm); font-size: 11px; font-weight: 400;
}
/* 다크: 그림자 더 깊게(bg/border 토큰 자동 반전) */
:root[data-theme="dark"] .nav-dropdown { box-shadow: 0 12px 40px rgba(0,0,0,0.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-dropdown { box-shadow: 0 12px 40px rgba(0,0,0,0.55); }
}
/* ── 모바일 드로어: Products 접이식(accordion) ── */
.drawer-group { border-bottom: 1px solid var(--bd); }
.drawer-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 0; font: inherit; font-size: 17px; font-weight: 700; color: var(--tx);
  background: none; border: none; cursor: pointer; text-align: left;
}
.drawer-group-toggle .nav-caret { width: 12px; height: 12px; color: var(--dm); }
.drawer-group-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.drawer-sub { overflow: hidden; max-height: 0; transition: max-height 0.28s cubic-bezier(0.16,1,0.3,1); }
.drawer-group-toggle[aria-expanded="true"] + .drawer-sub { max-height: 340px; }
.drawer-sub-inner { padding: 2px 0 12px 12px; border-left: 2px solid var(--bd); margin-left: 2px; }
.drawer-sub a {
  display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  padding: 12px 0; min-height: 44px; box-sizing: border-box;
  font-size: 14px; font-weight: 600; color: var(--tx2); border-bottom: none;
}
.drawer-sub a:hover, .drawer-sub a.active { color: var(--am); }
.drawer-sub a[aria-disabled="true"] { cursor: default; opacity: 0.6; }
.drawer-sub a[aria-disabled="true"]:hover { color: var(--tx2); }
.drawer-sub a.dd-child { padding-left: 18px; font-weight: 500; position: relative; }
.drawer-sub a.dd-child::before { content: '↳'; position: absolute; left: 0; color: var(--dm); font-size: 12px; }
.drawer-sub a .dd-tag {
  font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px;
  color: var(--am); background: var(--am4); margin-left: auto;
}
.drawer-sub a .dd-tag.beta { background: transparent; border: 1px solid var(--am3); }
.drawer-sub a .dd-tag.soon { color: var(--dm); background: var(--bg2); }

/* 헤더 우측 액션 그룹 (테마 토글 + 햄버거) — space-between 4-child 붕괴 방지 위해 묶음 */
.header-actions { display: flex; align-items: center; gap: 4px; }

/* PM320 여정 fix (2026-06-11, FLR-20260605-AGT-002 첫 화면 가치) — sticky 미니 픽 바.
   헤더(sticky top:0, z:100) 바로 아래 1줄 고정. 픽 카드가 화면에서 사라질 때만 노출(.--visible).
   additive — 레이아웃 점유 0 (max-height 0 → 노출 시 펼침), 카운트다운/달력 불변. 라이트/다크 토큰 정합. */
.pm320-pickbar {
  /* 헤더(sticky top:0, z:100) 바로 아래에 겹치지 않게 sticky. z:99 < 헤더 z:100 — 위로 스크롤 시
     헤더가 바를 덮으며 자연 슬라이드.
     R27 P0-1 (조니 2심, 대표 직접 catch) — top:76px 하드코딩 폐기 → var(--nav-h) 바인딩.
     실측 nav 높이(renderer.js _syncNavHeightVar, 68~73px 변동)와 불일치 시 nav 바닥↔픽바 사이
     간격이 벌어져 뒤 콘텐츠가 틈으로 비침(6/1 모바일 재현). 날짜 헤더(.cal-content-head)와 동일
     변수 연동 = 단일 상수 체계. height: var(--pickbar-h) 고정으로 visible 실높이도 결정적
     (종전 max-height 한도만 있고 실높이는 콘텐츠 의존 → 픽바 바닥↔날짜 헤더 top 간격 발생). */
  position: sticky; top: var(--nav-h, 68px); z-index: 99;
  display: flex; align-items: center; gap: 8px; width: 100%;
  max-width: 1100px; margin: 0 auto; box-sizing: border-box;
  height: var(--pickbar-h, 52px);
  padding: 0 24px; max-height: 0; overflow: hidden; opacity: 0;
  border: none; border-bottom: 0 solid var(--bd); cursor: pointer; text-align: left;
  background: var(--header-glass, rgba(250,251,254,0.92));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--tx); font: inherit;
  transition: max-height var(--t-fast), opacity var(--t-fast), padding var(--t-fast);
}
/* R48 라이더-2 (R47 sticky 비침 보험 — 보류 본건과 별개 선적용) — backdrop-filter 미지원 환경에서
   반투명 글래스(0.7~0.92 알파)가 blur 없이 뒤 콘텐츠를 그대로 비추는 것 차단: 솔리드 폴백.
   지원 환경(현대 브라우저 전부) 시각 변화 0 — @supports not 분기만. 월 15:20 실기기 실측 1장이 확증 절차. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header, .pm320-pickbar, .cal-content-head { background: var(--bg); }
}
/* R44 #10 — 오늘 모드(소스 카드 가시) 접힘 시 h=0 잔존 DOM 제거. 종전 author display:flex 가
   UA [hidden]{display:none} 을 cascade 에서 이겨 hidden 속성이 무력화돼 있었음 (probe: h=0
   + 텍스트 잔존 + click timeout). 본 규칙으로 hidden=true 인 모든 경로가 실제 display:none. */
.pm320-pickbar[hidden] { display: none; }
/* R46 P1-1 (조니 단정 — 픽바 pointer 가로채기 해소) — 비가시 상태(접힘·260ms 페이드아웃 잔존 포함)
   에서 포인터 완전 통과. visible 일 때만 터치 대상. */
.pm320-pickbar:not(.pm320-pickbar--visible) { pointer-events: none; }
.pm320-pickbar-arrow svg { display: block; }
.pm320-pickbar.pm320-pickbar--visible {
  /* R27 P0-1 — max-height 도 단일 상수 참조 (height 와 동일 값 = 실높이 정확히 --pickbar-h). */
  max-height: var(--pickbar-h, 52px); opacity: 1; padding: 11px 24px; border-bottom-width: 1px;
}
.pm320-pickbar:focus-visible { outline: 2px solid var(--am); outline-offset: -2px; }
.pm320-pickbar-eyebrow {
  font-size: 12px; font-weight: 700; color: var(--am); letter-spacing: -0.2px; /* R26 P1① 11→12px */
  flex: 0 0 auto; white-space: nowrap;
}
.pm320-pickbar-name {
  font-size: 14px; font-weight: 800; color: var(--tx); letter-spacing: -0.3px;
  flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm320-pickbar-status {
  font-size: 12px; font-weight: 700; color: var(--tx2);
  /* wave1 fix ① (2026-06-11, R24 P1) — 상태(결과·D-카운터)는 매매 판단 직결 정보라 절단 금지.
     flex 0 1 → 0 0 (no-shrink): 폭 부족 시 종목명(.pm320-pickbar-name, ellipsis)이 먼저 줄어든다. */
  flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm320-pickbar-status--up { color: var(--up); }
.pm320-pickbar-status--dn { color: var(--down); }
.pm320-pickbar-arrow { margin-left: auto; flex: 0 0 auto; font-size: 13px; color: var(--tx2); }
@media (max-width: 880px) {
  :root { --pickbar-h: 64px; }
  .pm320-pickbar { padding: 0 16px; }
  .pm320-pickbar.pm320-pickbar--visible {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "eyebrow name arrow"
      "status status arrow";
    align-content: center;
    gap: 2px 8px;
    padding: 9px 16px;
  }
  .pm320-pickbar-eyebrow { grid-area: eyebrow; }
  .pm320-pickbar-name { font-size: 13px; }
  .pm320-pickbar-name { grid-area: name; min-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pm320-pickbar-status { font-size: 12px; }
  .pm320-pickbar-status { grid-area: status; max-width: 100%; }
  .pm320-pickbar-arrow { grid-area: arrow; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pm320-pickbar { transition: none; }
}

/* 다크모드 토글 (DOC-20260610-DSN-001 §3.2) — 44×44 터치 타겟, 아이콘 20px, 2종 순환 */
.theme-toggle {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; padding: 0; border-radius: 8px;
  color: var(--tx2); transition: background var(--t-fast), color var(--t-fast);
}
.theme-toggle:hover { background: var(--g04); color: var(--am); }
.theme-toggle:focus-visible { outline: 2px solid var(--am); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; display: block; }
/* 라이트일 때 달(="누르면 다크"), 다크일 때 해 — JS가 .icon-* 토글 */
.theme-toggle .ico-sun { display: none; }
.theme-toggle .ico-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ico-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .ico-moon { display: none; }
}

/* 모바일 햄버거 */
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 0; position: relative; }
/* WAVE6 — 실제 bbox 기준 44×44. 오버레이만 키우면 DQA 측정에서 40px로 남는다. */
.menu-toggle::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--tx); position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--tx); transition: transform .2s; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }
.menu-toggle.open span { background: transparent; }
.menu-toggle.open span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.open span::after { top: 0; transform: rotate(-45deg); }
.mobile-drawer { display: none; position: fixed; top: 0; right: 0; width: 75%; max-width: 300px; height: 100vh; background: var(--sf); border-left: 1px solid var(--bd); padding: 80px 28px 24px; z-index: 200; transform: translateX(100%); transition: transform .25s ease-out; box-shadow: -8px 0 24px rgba(0,0,0,0.06); }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer a { display: block; padding: 14px 0; font-size: 17px; font-weight: 700; color: var(--tx); border-bottom: 1px solid var(--bd); }
.mobile-drawer a.active { color: var(--am); }
.drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.32); z-index: 150; }
.drawer-backdrop.open { display: block; }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-drawer { display: block; }
}

main { max-width: 1100px; margin: 0 auto; padding: 48px 24px 80px; }

.page-header { margin-bottom: 32px; }
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; background: var(--am3);
  border: 1px solid rgba(196,153,48,0.25); border-radius: 999px;
  font-size: 12px; font-weight: 800; color: var(--am); /* R26 P1① 10→12px */
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 16px;
}
.page-title {
  font-size: clamp(32px, 5vw, 48px); font-weight: 900;
  letter-spacing: -1.5px; margin-bottom: 8px;
}
.page-title .accent { color: var(--am); }
.page-desc { font-size: 14px; color: var(--tx2); max-width: 640px; line-height: 1.7; }
.page-meta {
  margin-top: 16px; font-size: 12px; color: var(--dm);
  font-family: 'SF Mono', monospace;
}

.loading { text-align: center; padding: 80px 24px; color: var(--dm); font-size: 13px; }
.error {
  background: var(--neg-bg); border-left: 3px solid var(--neg);
  padding: 16px 20px; border-radius: 6px; color: var(--neg);
  font-size: 13px; margin: 24px 0;
}

/* ───── 날짜 그룹 ───── */
.date-group { margin-bottom: 36px; }
.date-header {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tx);
  margin-bottom: 18px;
}
.date-label {
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.6px;
}
.date-stats {
  font-size: 12px; color: var(--dm);
  font-family: 'SF Mono', monospace;
}

/* ───── 섹션 (상승/하락) ───── */
.section-block { margin-bottom: 28px; }
.section-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 14px;
  display: inline-block;
  padding: 4px 12px; border-radius: 6px;
}
.section-title.up { color: var(--up); background: var(--neg-bg); }
.section-title.down { color: var(--down); background: var(--bg2); }

/* ───── 종목 리스트 (1단계 계단식) ───── */
.stocks-list {
  display: flex; flex-direction: column; gap: 8px;
}
.stock-row {
  background: var(--sf); border: 1px solid var(--bd); border-radius: 12px;
  overflow: hidden;
}
.stock-main {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: baseline;
}
.stock-rank {
  font-size: 12px; font-weight: 800; color: var(--dm);
  font-family: 'SF Mono', monospace;
}
.stock-name {
  font-size: 16px; font-weight: 800; letter-spacing: -0.3px;
}
.stock-price {
  font-size: 12px; color: var(--dm);
  font-family: 'SF Mono', monospace;
}
.stock-pct {
  font-size: 16px; font-weight: 800;
  font-family: 'SF Mono', monospace;
  min-width: 80px; text-align: right;
}
.stock-pct.up { color: var(--up); }
.stock-pct.down { color: var(--down); }
.stock-theme {
  padding: 0 18px 12px;
  font-size: 13px; color: var(--tx2); line-height: 1.55;
}
.stock-theme::before { content: '└ '; color: var(--dm); margin-right: 2px; }

/* ───── 종목 안 뉴스 카드 (계단식 한 단 안쪽) ───── */
.stock-news {
  background: var(--bg2);
  border-top: 1px dashed var(--bd);
  padding: 12px 18px 14px var(--card-indent-news);
  display: flex; flex-direction: column; gap: 8px;
}
.news-card {
  background: var(--sf); border: 1px solid var(--bd); border-radius: 8px;
  padding: 10px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.news-judgment {
  flex-shrink: 0;
  font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.news-judgment.호재 { background: var(--pos-bg); color: var(--pos); }
.news-judgment.악재 { background: var(--neg-bg); color: var(--neg); }
.news-judgment.중립 { background: var(--neu-bg); color: var(--neu); }
.cal-feature-sparkline { width: 60px; height: 32px; flex-shrink: 0; display: inline-block; }
.cal-feature-sparkline svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
  /* REQ-pm320-ux-cycle #3 — 모바일 카드 head 폭 부족, 당일 분봉 sparkline 숨기고
     20영업일 일봉(매매 결단에 더 직결)만 노출. design-lead 권고 */
  .cal-feature-sparkline { display: none; }
  /* 2026-06-17 대표 catch (트랙A) — 단, 데이터 없는 종목의 점선 placeholder 는 모바일에서도
     노출(데이터 부재를 명시적으로 보여줌 — 빈 칸 회피). 폭만 candles20 head 정합 위해 축소. */
  .cal-feature-sparkline.cal-spark-empty { display: inline-block; width: 48px; }
}
/* REQ-pm320-ux-cycle #3 — 20영업일 일봉 캔들 (sparkline 우측). */
/* REQ-004 v181: position relative — staleLabel을 absolute overlay로 layout 침범 회피 */
.cal-feature-candles20 { width: 110px; height: 32px; flex-shrink: 0; display: inline-block; position: relative; }
.cal-feature-candles20 svg { width: 100%; height: 100%; display: block; }
.cal-candles20-empty { width: 110px; height: 32px; background: var(--g04); border-radius: 4px; flex-shrink: 0; }
@media (max-width: 640px) {
  .cal-feature-candles20 { width: 78px; height: 26px; }
  .cal-candles20-empty { width: 78px; height: 26px; }
  /* Q-MOBILE-CANDLES-FIX-A (2026-05-12) — 모바일 회색 빈 박스 노출 회피.
     renderer.js가 daily_20 부재 시 range_240d + intraday.open 으로 1건 합성 일봉을 buildCandles20에 전달.
     합성도 실패한 희귀 케이스(range_240d 부재)에서만 candles20-empty 노출되므로 mobile 숨김 유지. */
  .cal-candles20-empty { display: none; }
}
.cal-disc-section { display:flex; flex-direction:column; gap:3px; margin-top:8px; padding-top:6px; border-top:1px dashed var(--am4); }
.cal-disc-badge { display:inline-block; font-size:12px; font-weight:800; padding:2px 7px; border-radius:999px; background:var(--pos-bg); color:var(--pos); border:1px solid var(--pos); vertical-align:middle; }
.cal-feature-badges { display:flex; flex-wrap:wrap; gap:6px; padding:4px 12px 0 var(--card-indent-badges); align-items:center; }
.cal-credit-badge { display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.01em; padding:2px 8px; border-radius:999px; background:var(--neg-bg); color:var(--up); border:1px solid var(--up); vertical-align:middle; }
/* REQ-031 — pill 통일 (border-radius: 999px). 시각 일관성 (SPEC-001 §III). */
/* REQ-045 §A — 헤더 배지 폰트 통일 (11px / weight 600 / letter-spacing 0.01em). */
/* REQ-062 — margin-right 제거. 부모 .cal-feature-badges flex gap:6px 으로 형제 간격 통제 (들여쓰기 결함 fix). */
.cal-status-badge { display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.01em; padding:2px 8px; border-radius:999px; vertical-align:middle; }
.cal-status-badge.caution { background:var(--am3); color:var(--am); }
.cal-status-badge.warning { background:var(--am3); color:var(--am); }
.cal-status-badge.danger { background:var(--neg-bg); color:var(--neg); }
.cal-status-badge.hot { background:var(--neg-bg); color:var(--ru); }
/* REQ-008: 단일가매매 병기 배지 — 차콜 톤 (경보 톤과 구분, 부가 조치성) */
.cal-status-badge.sev-single { background:#1F2937; color:#fff; font-weight:700; letter-spacing:0.2px; }
.cal-status-detail { padding:4px 8px; margin:4px 0; background:rgba(255,152,0,0.06); border-left:2px solid var(--am); border-radius:0 4px 4px 0; font-size:12px; line-height:1.5; color:var(--tx2); }
.cal-status-detail .cal-badge-period { display:inline-block; font-weight:600; color:var(--am); margin-right:6px; }
.cal-status-detail .cal-badge-summary { display:block; margin-top:2px; color:var(--tx2); }
.cal-status-detail .cal-badge-condition { display:block; margin-top:2px; color:var(--neg); font-weight:500; }
.cal-status-detail .cal-badge-regulation { display:block; margin-top:2px; color:var(--down); font-size:12px; }

/* v3 사유 영역 — 라벨+표+인사이트 통합 (대표 정정 18:52 KST) */
/* REQ-029 §2 — 사유 박스 시각 통합 정합 (SPEC-001 §IV.1).
   대표 본질 비판: 좌측 막대 강조 잔존 + 라벨 sev-* 강조 색조 잔존 → 미려함 부족.
   .credit/.krx 분기 rule 폐기, base rule 단일 통합 (회색 톤). 출처 구분은 라벨 텍스트로만. */
.cal-status-detail.v3 {
  padding: 6px 8px; margin: 4px 0;
  background: var(--pill-sf); border-left: 1px solid var(--bd); border-radius: 0 4px 4px 0;  /* R15: 라이트 #F8FAFC 동일 / 다크 함몰 */
  display: flex; flex-direction: column; gap: 4px;
}
.cal-status-detail.v3 .cal-status-head { display: flex; align-items: center; gap: 8px; }
/* REQ-029 §3 — 라벨 sev-* 색상 톤다운 (강조 → 진중한 모노톤). */
.cal-status-detail.v3 .cal-status-label {
  display: inline-block; font-size: 12px; font-weight: 500; padding: 0; border-radius: 0;
  background: none; color: var(--tx);
}
.cal-status-detail.v3 .cal-status-label.sev-caution { background: none; color: var(--am); }
.cal-status-detail.v3 .cal-status-label.sev-warning { background: none; color: var(--am); }
.cal-status-detail.v3 .cal-status-label.sev-danger  { background: none; color: var(--neg); }
.cal-status-detail.v3 .cal-status-label.sev-hot     { background: none; color: var(--ru); }
.cal-status-detail.v3 .cal-status-period { font-size: 12px; color: var(--tx2); font-weight: 500; }
/* 2026-04-22: 상태 배지 기간의 날짜 범위 강조 — 주황 bold + 살짝 배경 */
.cal-badge-date-range {
  color: var(--am); font-weight: 700; background: var(--am4);
  padding: 1px 5px; border-radius: 3px; font-variant-numeric: tabular-nums;
}
/* FLR-011 v5: 효력 기간 상태 마커 (예정/진행중/종료) */
.cal-period-mark { font-size: 12px; padding: 1px 5px; border-radius: 3px; margin-left: 4px; font-weight: 600; }
.cal-period-mark.upcoming { background: var(--bg2); color: var(--down); }
.cal-period-mark.active   { background: var(--neg-bg); color: var(--neg); }
.cal-period-mark.ended    { background: var(--neu-bg); color: var(--neu); }
/* v4: KRX 단계 진행 표시 — "현재 X → 익일 Y 진입" (대표 v4 지시) */
.cal-status-detail.v3 .cal-status-progress {
  font-size: 12px; color: var(--up); font-weight: 600;
  background: var(--neg-bg); padding: 4px 8px; border-radius: 4px;
  border-left: 2px solid var(--up); margin: 2px 0; line-height: 1.5;
}
@media (max-width: 640px) {
  .cal-status-detail.v3 .cal-status-progress { font-size: 12px; padding: 4px 6px; }
}
/* v4: predicted (자체 추정) 라벨 시각 구분 — dashed border + 톤 다운 */
.cal-status-detail.v3.predicted {
  border-left-style: dashed; opacity: 0.92;
  background: rgba(255, 152, 0, 0.03);
}
.cal-status-detail.v3.predicted .cal-status-label {
  border: 1px dashed currentColor; background: transparent !important;
}
.cal-status-predicted-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--tx2); background: var(--bg2); padding: 1px 6px; border-radius: 3px;
  margin-left: 4px; vertical-align: middle;
}
.cal-status-badge.predicted {
  border: 1px dashed currentColor; opacity: 0.85;
}
.cal-status-detail.v3 .cal-status-table-wrap { overflow-x: auto; }
.cal-status-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cal-status-table th, .cal-status-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--bd); white-space: nowrap; }
.cal-status-table th { font-weight: 600; color: var(--dm); background: var(--am4); text-align: center; font-size: 12px; }
.cal-status-table td.th-cond { text-align: left; color: var(--tx2); max-width: 180px; white-space: normal; word-break: break-all; }
.cal-status-table td.th-base { color: var(--dm); }
.cal-status-table td.th-thresh { color: var(--tx2); font-weight: 600; }
.cal-status-table td.th-cur { color: var(--tx); font-weight: 600; }
.cal-status-table td.th-diff.pos { color: var(--up); font-weight: 600; }
.cal-status-table td.th-diff.neg { color: var(--down); font-weight: 600; }
.cal-status-table td.th-trig { text-align: center; }
.cal-status-table tr.triggered { background: rgba(197, 57, 57, 0.04); }
/* v3.3: 차이 컬럼 색상·기호 강조 (대표 19:53 KST), 발동 컬럼 폐기 */
.cal-status-table.v33 td.th-diff { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-status-table.v33 td.th-diff.trig { color: var(--up); font-weight: 800; }
.cal-status-table.v33 td.th-diff.near { color: var(--am); }
.cal-status-table.v33 td.th-diff.safe { color: var(--down); }
.cal-status-detail.v3 .cal-status-insight {
  font-size: 12px; color: var(--tx2); background: var(--am4); padding: 6px 8px;
  border-radius: 4px; line-height: 1.5;
}
.cal-status-detail.v3 .cal-status-regulation { font-size: 12px; color: var(--down); }
/* REQ-008: 단기과열 지정 단일가매매 부기 라인 — 차콜 컬러 스트립 + 볼드 (Option A) */
.cal-status-detail.v3 .cal-status-single-note {
  font-size: 12px; color: var(--tx); font-weight: 600;
  background: rgba(31,41,55,0.05); border-left: 3px solid var(--tx);
  padding: 5px 8px 5px 10px; border-radius: 0 4px 4px 0; line-height: 1.5;
}
.cal-status-detail.v3 .cal-status-single-note strong { color: var(--tx); font-weight: 800; }
.cal-status-detail.v3 .cal-status-single-note .cal-status-single-src { color: var(--dm); font-weight: 500; font-size: 12px; margin-left: 2px; }
.cal-status-detail.v3 .cal-status-label.sev-credit { background: none; color: var(--neg); }
/* REQ-029 §2 — .credit / .krx 분기 rule 폐기 (base rule 통합).
   출처 구분은 라벨 텍스트(증권사 사유 단어 vs KRX 단계명)로만. */

/* REQ-034 — 사유 박스 본질 재설계 (SPEC-001 §IV.2).
   기존 .cal-status-detail.v3.cal-status-detail--reason 박스 분기 + .cal-status-detail__link 폐기.
   박스 컨테이너 폐기 → inline-flex 행으로 통일. 들여쓰기 + ▸ dot 마커 + baseline 정렬.
   대표 본질 비판: 조약함/통일감 없음/폰트 비균일/들여쓰기/표사용법/시야 흐름 깸. */

/* 그룹 (REQ-032 신설 + REQ-034 typography 정합 갱신) */
.cal-credit-group {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--tx);
}
.cal-credit-group + .cal-credit-group { margin-top: 8px; }
.cal-credit-group__heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
  letter-spacing: 0.01em;
  margin-bottom: 3px;
}
.cal-credit-group__source {
  font-size: 12px;
  font-weight: 400;
  color: var(--dm);
  margin-left: 4px;
}

/* 행 — REQ-067: cal-disc-item과 동일 패턴. 글박스 전체가 a 태그 wrap, 라벨 칩 + 본문 + 우측 ↗. */
.cal-credit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--tx2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cal-credit-row + .cal-credit-row { margin-top: 1px; }

/* a 태그 wrap 시 — 글박스 전체 클릭, hover로 본문 색 강조 (cal-disc-item 정합) */
a.cal-credit-row,
.cal-credit-row--link {
  cursor: pointer;
}
a.cal-credit-row:hover,
.cal-credit-row--link:hover { color: var(--tx); }

/* 라벨 — sev-* 칩 (cal-disc-cat 시각 정합). 좌측 고정폭. */
.cal-credit-row__label {
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  background: var(--am4);
  color: var(--tx2);
  line-height: 1.4;
  white-space: nowrap;
}
.cal-credit-row__label.sev-caution { background: var(--credit-caution-bg); color: var(--credit-caution-tx); border: 1px solid var(--credit-caution-bd); }
.cal-credit-row__label.sev-warning { background: var(--am4); color: var(--am); }
.cal-credit-row__label.sev-danger,
.cal-credit-row__label.sev-credit  { background: var(--credit-credit-bg); color: var(--credit-credit-tx); border: 1px solid var(--credit-credit-bd); }
.cal-credit-row__label.sev-hot     { background: var(--neg-bg); color: var(--ru); }

/* 본문 요약 — 가변, 잘림 처리 (cal-disc-summary 정합) */
.cal-credit-row__summary {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 시점 — · 구분자 회색. 본문 우측 또는 라벨 우측에 nowrap. */
.cal-credit-row__period {
  font-size: 12px;
  color: var(--dm);
  font-weight: 400;
  flex-shrink: 0;
  white-space: nowrap;
}
.cal-credit-row__period::before {
  content: '·';
  margin-right: 6px;
  color: var(--dm);
}

/* 우측 외부 링크 아이콘 (cal-disc-ext 정합) */
.cal-credit-row__ext { flex-shrink: 0; color: var(--dm); }

/* 모바일 — clamp 완화 (cal-disc-summary 정합) */
@media (max-width: 640px) {
  .cal-credit-row { padding: 4px 0; }
  .cal-credit-row__summary { -webkit-line-clamp: 3; word-break: break-all; overflow-wrap: anywhere; }
}

/* 다크모드 */
/* 2026-04-22 핫픽스: DART 공시 원문 링크 — 공시 기반 배지 상세 하단 */
.cal-status-detail.v3 .cal-status-dart-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 3px 8px;
  font-size: 12px; font-weight: 600; color: var(--down);
  background: var(--bg2); border: 1px solid var(--down); border-radius: 4px;
  text-decoration: none; line-height: 1.4;
}
.cal-status-detail.v3 .cal-status-dart-link:hover { background: var(--bg2); color: var(--down); }
.cal-status-detail.v3 .cal-status-dart-link svg { opacity: 0.7; }

@media (max-width: 640px) {
  .cal-status-detail.v3 { padding: 6px 6px; }
  .cal-status-table { font-size: 12px; }
  .cal-status-table th, .cal-status-table td { padding: 3px 4px; }
  .cal-status-table td.th-cond { max-width: 120px; font-size: 12px; }
  .cal-status-detail.v3 .cal-status-insight { font-size: 12px; padding: 5px 6px; }
}

/* v5 (DOC-20260422-DSN-001): 배지 상세 3섹션 구조 — 현재/다음/규정 분리 */
.cal-status-detail.v5 { gap: 4px; }
.cal-status-section { margin-top: 10px; }
.cal-status-section:first-of-type { margin-top: 6px; }
.cal-status-section h3 {
  font-size: 12px; font-weight: 600; color: var(--dm);
  border-top: 1px dashed var(--bd); padding-top: 8px;
  margin: 0 0 4px; letter-spacing: 0.5px;
}
.cal-status-section.current h3 { color: var(--down); }
.cal-status-section.next h3 { color: var(--am); }
.cal-status-section.regulation h3 { color: var(--tx2); }
.cal-status-current-item { font-size: 12px; margin: 2px 0; color: var(--tx2); line-height: 1.5; }
.cal-status-current-item.ended { color: var(--neu); }
.cal-status-next-header { font-size: 12px; color: var(--tx2); margin: 3px 0; line-height: 1.5; }
.cal-status-next-note { font-size: 12px; color: var(--am); font-style: italic; margin: 3px 0 0; }
.cal-status-table-title {
  font-size: 12px; font-weight: 600; margin: 6px 0 4px;
  color: var(--am);
}
.cal-status-detail.v5 .cal-status-insight { margin: 0; }
.cal-status-detail.v5 .cal-status-insight.predicted { opacity: 0.85; font-style: italic; }
@media (max-width: 640px) {
  .cal-status-section h3 { font-size: 12px; padding-top: 6px; }
  .cal-status-section { margin-top: 8px; }
  .cal-status-current-item,
  .cal-status-next-header { font-size: 12px; }
  .cal-status-table-title { font-size: 12px; }
}

/* v6 (DOC-20260422-DSN-001 v6, FLR-20260423-001): 배지 상세박스 재설계
   §1 제도 공통설명(details 접힘) / §2 이 종목의 일정 / §3 지정 시 제한 */
.cal-status-detail.v6 { gap: 6px; }
.cal-status-section.v6 { margin-top: 10px; }
.cal-status-section.v6.intro {
  margin-top: 6px;
  border-top: 1px dashed var(--bd);
  padding-top: 6px;
}
.cal-status-section.v6.intro > summary {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; list-style: none; outline: none;
  padding: 0;
}
.cal-status-section.v6.intro > summary::-webkit-details-marker { display: none; }
.cal-status-section.v6.intro > summary::before {
  content: '▸'; font-size: 12px; color: var(--dm); transition: transform 0.15s ease; /* R26 P1① 10→12px */
}
.cal-status-section.v6.intro[open] > summary::before { transform: rotate(90deg); }
.cal-status-section.v6.intro > summary > h3 {
  border-top: none; padding-top: 0; margin: 0;
  font-size: 12px; font-weight: 600; color: var(--dm); letter-spacing: 0.5px;
}
.cal-status-intro-body {
  margin-top: 6px; padding: 6px 8px;
  font-size: 12px; color: var(--tx2); line-height: 1.55;
  background: var(--bg2); border-left: 2px solid var(--bd); border-radius: 0 4px 4px 0;
}
.cal-status-section.v6.schedule h3 { color: var(--down); }
.cal-status-section.v6.rules h3 { color: var(--am); }
.cal-v6-schedule-item { font-size: 12px; color: var(--tx2); line-height: 1.55; margin: 3px 0; }
.cal-v6-schedule-date {
  color: var(--am); font-weight: 700;
  background: var(--am4); padding: 1px 5px; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.cal-v6-schedule-hint { font-size: 12px; color: var(--dm); margin-left: 2px; }
.cal-v6-reason { margin-top: 4px; }
.cal-v6-reason-body {
  margin-top: 3px; margin-left: 12px;
  padding: 5px 8px;
  font-size: 12px; color: var(--tx2); line-height: 1.5;
  background: var(--bg2); border-radius: 4px;
  border-left: 2px solid var(--bd);
}
.cal-v6-reason-line { margin: 1px 0; word-break: keep-all; overflow-wrap: anywhere; }
.cal-v6-rule-list {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-v6-rule-item {
  position: relative;
  padding: 3px 6px 3px 18px;
  font-size: 12px; color: var(--tx2); line-height: 1.5;
  background: rgba(197, 86, 33, 0.05); border-radius: 4px;
}
.cal-v6-rule-item::before {
  content: '·'; position: absolute; left: 8px; top: 3px;
  font-size: 16px; font-weight: 700; color: var(--am); line-height: 1;
}
.cal-v6-rule-footnote {
  margin-top: 6px; padding: 4px 8px;
  font-size: 12px; color: var(--tx2);
  background: var(--am4); border-left: 2px solid var(--am3); border-radius: 0 4px 4px 0;
}
.cal-v6-rule-dart { margin-top: 6px; }
.cal-v6-rule-pending {
  padding: 6px 8px; font-size: 12px; color: var(--dm); font-style: italic;
  background: var(--bg2); border-radius: 4px;
}
@media (max-width: 640px) {
  .cal-v6-schedule-item { font-size: 12px; }
  .cal-v6-rule-item { font-size: 12px; padding-left: 16px; }
  .cal-v6-rule-item::before { left: 6px; }
  .cal-v6-reason-body { font-size: 12px; padding: 4px 6px; }
  .cal-status-intro-body { font-size: 12px; padding: 5px 6px; }
}

.cal-threshold { font-size:12px; padding:1px 0; color:var(--tx2); }
.cal-threshold.triggered { color:var(--neg); font-weight:600; }
.cal-threshold.safe { color:var(--pos); }
/* 장중 스파크라인 미완(빈 상태) — 완전 회색 박스 대신 점선 베이스라인으로 "수집 중" 표시 (design ss_8976vzxzf)
   e599f327a 에서 solid 1px 수평선으로 구현됐으나 design 의도는 점선(dashed). repeating-linear-gradient로 수정. */
.cal-spark-empty {
  width:60px; height:32px; flex-shrink:0; border-radius:3px;
  background: repeating-linear-gradient(
    90deg,
    var(--g40) 0px, var(--g40) 3px,
    transparent 3px, transparent 6px
  ) 0 calc(50% - 0.5px) / 100% 2px no-repeat;
  /* 2026-06-17 대표 catch (트랙A) — 데이터 없는 종목의 빈 추이 칸이 비어 보임.
     점선 placeholder 가시성 상향(0.5→0.65). 다크모드는 --g40 이 --dk-g40 으로 자동 스왑. */
  opacity: 0.65;
}
.cal-disc-cb-warn { display:inline-block; padding:1px 5px; border-radius:3px; font-size:12px; font-weight:700; letter-spacing:0.3px; background:var(--am4); color:var(--am); border:1px solid var(--am3); vertical-align:middle; }
.cal-disc-item { display:flex; align-items:center; gap:6px; padding:3px 0; font-size:12px; color:var(--tx2); text-decoration:none; cursor:pointer; }
.cal-disc-item:hover { color:var(--tx); }
.cal-disc-cat { flex-shrink:0; min-width:42px; text-align:center; padding:1px 5px; border-radius:3px; font-size:12px; font-weight:600; background:var(--am4); color:var(--tx2); }
.cal-disc-cat.cb { background:var(--am4); color:var(--am); }
.cal-disc-cat.credit { background:var(--neg-bg); color:var(--up); }
.cal-disc-summary {
  flex:1; min-width:0; line-height:1.4;
  /* v2.5: 1줄 클램프 + 모바일 잘림 방지 (대표 정정 16:57 KST) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.cal-disc-ext { flex-shrink:0; color:var(--dm); }
.cal-disc-more { font-size:12px; color:var(--dm); padding:2px 0; font-style:italic; }
.cal-disc-period { display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--tx2); white-space:normal; word-break:keep-all; line-height:1.45; }
.cal-disc-period-label { display:inline-block; margin-right:4px; padding:1px 6px; border-radius:3px; font-size:12px; font-weight:700; background:var(--disc-period-bg); color:var(--disc-period-tx); vertical-align:1px; }
/* v2.5: cal-disc-condition 스타일 보존 (다른 영역에서 쓰일 수 있음). disc 영역에서는 더 이상 노출 안 함 */
.cal-disc-condition { display:block; font-size:12px; color:var(--dm); margin-top:2px; font-style:italic; line-height:1.45; }
/* v2.5: 모바일 disc 영역 word-break 강화 */
@media (max-width: 640px) {
  .cal-disc-item { padding:4px 0; }
  .cal-disc-summary { -webkit-line-clamp: 3; word-break: break-all; overflow-wrap: anywhere; }
  .cal-disc-period { white-space: normal; word-break: keep-all; }
  .cal-status-detail { word-break: break-all; overflow-wrap: anywhere; }
  .cal-badge-condition, .cal-badge-regulation { word-break: break-all; overflow-wrap: anywhere; }
}
.cal-credit-reason { margin-top:6px; }
.cal-credit-reason .cal-disc-item { color:var(--up); }
.cal-credit-reason .cal-disc-item:hover { color:var(--neg); }
.judgment-strength {
  font-weight: 700;
  font-size: 12px;
  opacity: 0.75;
}
.news-content { flex: 1; min-width: 0; }
.news-summary { font-size: 12.5px; line-height: 1.6; color: var(--tx); margin-bottom: 4px; }
.news-reasoning {
  font-size: 12px; color: var(--tx2); font-style: italic;
  margin-top: 4px; line-height: 1.5;
}

/* ───── 빈 상태 ───── */
.empty-state {
  background: var(--bg2); border-radius: 12px;
  padding: 60px 24px; text-align: center;
  color: var(--dm); font-size: 14px;
}

/* ───── 테마 지도 ───── */
.theme-map { margin-top: 32px; margin-bottom: 32px; }
.theme-map-title {
  font-size: 14px; font-weight: 800; color: var(--am);
  margin-bottom: 12px; padding-left: 8px;
  border-left: 3px solid var(--am);
}
.theme-map-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.theme-map-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  background: var(--am4); color: var(--am);
  border: 1px solid var(--am2);
  cursor: pointer; transition: all 0.15s;
}
.theme-map-chip:hover { background: var(--am2); }
.theme-map-chip.active { background: var(--am); color: #fff; border-color: var(--am); }
.theme-map-chip .chip-count {
  font-size: 12px; font-weight: 800; color: var(--dm);
  background: var(--bd); border-radius: 999px; padding: 1px 5px;
}
.theme-map-chip.active .chip-count { background: rgba(255,255,255,0.3); color: #fff; }
.theme-map-expand {
  margin-top: 12px; padding: 12px 16px;
  background: var(--sf); border: 1px solid var(--bd); border-radius: 10px;
  display: none;
}
.theme-map-expand.show { display: block; }
.theme-map-expand-title {
  font-size: 13px; font-weight: 800; color: var(--tx); margin-bottom: 8px;
}
.theme-map-stock {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--bd);
  font-size: 12px; color: var(--tx);
}
.theme-map-stock:last-child { border-bottom: none; }
.theme-map-stock-name { font-weight: 700; min-width: 80px; }
.theme-map-stock-industry { color: var(--dm); font-size: 12px; }

/* ───── Below-Fold 2-Column Grid ───── */
.theme-trend { margin-bottom: 48px; }

/* 정정 원복 (대표 18:42): sticky 모두 제거. 날짜 헤더(cal-content-head)만 sticky 유지 (별도 영역).
   theme-trend-header / lut-header / theme-tree-header는 일반 헤더 — 배경/패딩만 호환 유지.
   클릭 → scrollIntoView 핸들러는 보존 (대표 #1 "날짜 클릭 → 달력 스크롤" 패턴 정합). */
.theme-trend-header,
.lut-header,
.theme-tree-header {
  background: var(--glass-sf);  /* R15: 라이트 0.7 흰 베일 / 다크 함몰 표면 (골드 제목·악센트 유지) */
  margin-left: -16px; margin-right: -16px;
  padding: 8px 16px;
  margin-bottom: 10px;
}
@media (max-width: 880px) {
  .theme-trend-header,
  .lut-header,
  .theme-tree-header {
    margin-left: -12px; margin-right: -12px;
    padding: 6px 12px;
  }
}
.theme-trend-header[data-scroll-to-section],
.lut-header[data-scroll-to-section],
.theme-tree-header[data-scroll-to-section] {
  cursor: pointer;
  transition: background-color 200ms ease, transform 100ms ease;
}
.theme-trend-header[data-scroll-to-section]:hover,
.lut-header[data-scroll-to-section]:hover,
.theme-tree-header[data-scroll-to-section]:hover {
  background: rgba(196, 153, 48, 0.08);
}
.theme-trend-header[data-scroll-to-section]:focus-visible,
.lut-header[data-scroll-to-section]:focus-visible,
.theme-tree-header[data-scroll-to-section]:focus-visible {
  outline: 2px solid var(--am); outline-offset: -2px;
}
.theme-trend-header--pulse,
.lut-header--pulse,
.theme-tree-header--pulse { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .theme-trend-header[data-scroll-to-section],
  .lut-header[data-scroll-to-section],
  .theme-tree-header[data-scroll-to-section] { transition: none; }
  .theme-trend-header--pulse,
  .lut-header--pulse,
  .theme-tree-header--pulse { transform: none; }
}
/* scroll-margin-top — sticky nav 68 + 헤더 자체 ≈ 60. 데스크탑 132 / 모바일 120. */
#theme-trend, #limit-up-trend, #theme-tree, #toss-cal {
  scroll-margin-top: 132px;
}
@media (max-width: 880px) {
  #theme-trend, #limit-up-trend, #theme-tree, #toss-cal {
    scroll-margin-top: 120px;
  }
}

/* REQ-pm320-ux-cycle #2 — 상한가 종목 추이 (theme-trend 직하). */
.limit-up-trend { margin-bottom: 48px; }
.lut-header { margin-bottom: 10px; padding-left: 8px; border-left: 3px solid var(--am); }
.lut-title { font-size: 14px; font-weight: 800; color: var(--am); }
.lut-sub { font-size: 12px; color: var(--dm); margin-top: 2px; } /* R26 P1① 11→12px */
/* REQ-005-2026-05-04 v183: lut-wrap을 theme-trend-wrap 패턴으로 통일 (yaxis absolute z-index 2 자연 mask) */
.lut-wrap {
  position: relative;
  background: var(--sf); border: 1px solid var(--bd); border-radius: 12px;
  padding: 16px 20px;
}
.lut-yaxis-col {
  position: absolute; top: 16px; left: 20px; width: 44px; height: calc(100% - 32px);
  z-index: 2; pointer-events: none; background: var(--sf);
}
.lut-scroll { margin-left: 44px; overflow-x: auto; overflow-y: hidden; }
.lut-svg { display: block; }
.lut-line { transition: opacity 200ms ease; pointer-events: none; }
.lut-area { pointer-events: none; }
/* theme-trend SoT 통일: fill=#FFF + stroke=color (r=2 desktop / 3.5 mobile).
   active 시 fill=color + 골드 링(.lut-gold-ring r=5) 추가. */
.lut-dot { fill: #FFF; stroke: var(--am); stroke-width: 1.5; transition: fill 150ms ease, r 150ms ease; cursor: pointer; }
.lut-dot:hover { fill: var(--am); }
.lut-dot:focus { outline: none; }
.lut-dot:focus-visible { outline: none; fill: var(--am); }
.lut-dot--active { fill: var(--am); stroke: #FFF; stroke-width: 2; }
.tt-dot--active { fill: var(--am); stroke: #FFF; stroke-width: 2; }
.lut-dot-zero { fill: #FFF; stroke: #CBD5E1; }
.lut-dot-zero:hover { fill: #CBD5E1; }
.lut-dot-hit { fill: transparent; cursor: pointer; }
/* R28 P1④ — 상한가 dot 44px 투명 터치 오버레이 (시각 dot 7px 불변, role/tabindex 승계). */
.lut-dot-touch { fill: transparent; cursor: pointer; outline: none; }
.lut-dot-touch:focus-visible { stroke: var(--am); stroke-width: 1.5; }
.lut-gold-ring { pointer-events: none; }
/* theme-trend SoT 정합: padding/배경 제거 (.trend-detail와 동일 — 페이지 배경 직접 사용).
   타이틀은 .trend-detail-chip 재사용 (lut-detail-head/lut-detail-date deprecated). */
.lut-detail {
  margin-top: 12px;
  max-height: 360px; overflow-y: auto;
  animation: lut-detail-in 200ms ease;
}
@keyframes lut-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 상한가 list = 거래대금 list 완전 복제 (.trend-detail-table 클래스 재사용).
   .lut-detail-table는 hover 색·금액 색만 재정의. 5컬럼 = 종목명 / 종가 / 미니캔들 / 등락률 / 거래대금. */
.lut-detail-table tr:hover td { background: rgba(196, 153, 48, 0.08); }
/* .lut-detail-table .td-pct 라인 제거 — SoT (.trend-detail-table .td-pct) 에 통합. font-weight는 inline. */
/* .lut-detail-table .td-amount 라인 제거 — SoT (.trend-detail-table .td-amount) 에 통합. 황금색·600 weight 제거하여 양 list 폰트 통일 (REQ-017 후속 #1) */
.lut-detail-table .td-price { text-align: right; font-family: 'SF Mono', monospace; }
.lut-detail-table .th-pct,
.lut-detail-table .th-price,
.lut-detail-table .th-amount { text-align: right; }
.lut-stock-main {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0;
}
.lut-streak {
  font-size: 12px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: var(--am3); color: var(--am);
  flex-shrink: 0;
  white-space: nowrap;
}
/* #12 — 거래대금 추이 종목명 anchor 링크 (양 차트 모두 사용) */
.trend-stock-link { color: inherit; text-decoration: none; font-weight: 600; }
.trend-stock-link:hover { color: var(--am); text-decoration: underline; }
@media (max-width: 880px) {
  /* REQ-005-2026-05-04 v183: lut-wrap mobile padding + yaxis-col mobile 정합 */
  .lut-wrap { padding: 12px; }
  .lut-yaxis-col { top: 12px; left: 12px; width: 36px; height: calc(100% - 24px); }
  .lut-scroll { margin-left: 36px; }
  .lut-streak { font-size: 12px; padding: 1px 5px; }
  /* lut-detail-table 5컬럼 너비 (trend-detail-table mobile 정합) — 클래스 기반으로 컬럼 순서 변경에 robust */
  .lut-detail-table { font-size: 12px; table-layout: fixed; width: 100%; }
  .lut-detail-table th { padding: 4px 3px; }
  .lut-detail-table td { padding: 4px 3px; }
  /* width는 .trend-detail-table .th-name/.td-name 등 SoT (1010~1019 라인)에서 클래스 매칭으로 자동 적용. 컬럼 순서 재배치 시 nth-child 수정 불필요. */
}
@media (prefers-reduced-motion: reduce) {
  .lut-detail { animation: none; }
  .lut-dot { transition: none; }
  .lut-line { transition: none; }
}

/* design-news-time-state-v1 (catch 2) — stale 라벨 자연 봉쇄 + 잔존 케이스만 정합 표출.
   PRE_MARKET 빈 상태 분기로 09:00 미만 노출 0. OPEN/POST_MARKET/HOLIDAY에서 daily_20.last < date인
   잔존 케이스만 cal-feature-meta sibling으로 static 배치. font-size 8px → 11px (모바일 가독성). */
.cal-feature-stale-note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--dm);
  font-family: 'SF Mono', 'Menlo', monospace;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cal-feature-stale-note::before { content: '\203B  '; opacity: 0.7; }
@media (max-width: 880px) {
  .cal-feature-stale-note { font-size: 12px; }
}

/* design-news-time-state-v1 (catch 1) — PRE_MARKET 빈 상태 (Option A).
   카드 list 미렌더 + 시계 아이콘 + 카운트다운 + 보조 토글. 다크 누아르 톤 유지 (var --am 햇살). */
.cal-pre-market-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
  gap: 6px;
}
.cal-pre-market-icon {
  color: var(--am);
  margin-bottom: 4px;
}
.cal-pre-market-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--tx);
}
.cal-pre-market-sub {
  font-size: 13px;
  color: var(--dm);
}
.cal-pre-market-countdown {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'SF Mono', 'Menlo', monospace;
  letter-spacing: 0.04em;
  color: var(--am);
  font-variant-numeric: tabular-nums;
}
/* R18 (비신자 P1) — 장전 랜딩 "어제의 픽" 결과 칩(접지 않고 노출). 카운트다운 아래, 토글 위.
   pill 형태 한 줄: eyebrow(어제의 픽) + 종목명 + 결과 mark(+장중 MDD). 결과 톤별 배경/테두리. */
.cal-pre-prev-pick {
  margin-top: 14px;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
}
.cal-pre-prev-pick--profit { background: var(--pos-bg); border: 1px solid var(--pos); }
.cal-pre-prev-pick--loss { background: var(--neg-bg); border: 1px solid var(--neg); }
.cal-pre-prev-pick--running { background: var(--neu-bg); border: 1px solid var(--neu); }
.cal-pre-prev-pick-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  /* WCAG: --dm(#8B95A8) on neu-bg = 2.74:1 미달 → --tx2 로 (light 9.0 / dark 6.75:1, AA). */
  color: var(--tx2);
  text-transform: none;
}
.cal-pre-prev-pick-name { color: var(--tx2); font-weight: 800; }
.cal-pre-prev-pick--profit .cal-pre-prev-pick-mark { color: var(--pos); }
.cal-pre-prev-pick--loss .cal-pre-prev-pick-mark { color: var(--neg); }
/* running(보유중) = 중립 정보 → 녹/적 대신 슬레이트. --neu(light 3.92:1) 미달 → --tx2(9.0/6.75:1). */
.cal-pre-prev-pick--running .cal-pre-prev-pick-mark { color: var(--tx2); }

/* PM320-D6 R22 (오전 동선) — "어제의 픽" 카드 top 래퍼. cal-content-head 직하·미장 섹션 위로 끌어올림
   (종전: empty 안 미장 아래로 밀려 첫 화면 미노출). 카드를 가로 중앙 정렬 + 상하 여백. */
.cal-pre-prev-pick-top {
  display: flex;
  justify-content: center;
  margin: 14px 0 18px;
  scroll-margin-top: 84px; /* 픽바 클릭 착지 시 sticky(76) 가림 방지 — 카드 헤더 전체 가시 */
}
/* PM320-D6 R23 (오전 동선 P0) — 헤더 직하·모든 섹션 위 어제픽 카드 portal.
   page-header 직후에 위치(pm320.html) → 모바일 fold 안에 어제픽 카드(진입가/익절목표/만기 + 15:20 예고)
   를 노출. [hidden] 일 땐 display:none(빈 박스·레이아웃 점프 0). 카드 박스 자체는 .--card 스타일 상속. */
.pm320-prepick-portal {
  display: flex;
  flex-direction: column;        /* r5 — 어제픽 칩 + "외 N종 보유 중" 리스트 세로 스택 */
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 4px 0 20px;
  scroll-margin-top: 84px;
}
.pm320-prepick-portal[hidden] { display: none; }
/* r5 (2026-06-11, 대표 도메인 정정) — "외 N종 보유 중" 보유 픽 리스트(running 복수). */
.cal-pre-prev-pick-holdings {
  width: 100%;
  max-width: 360px;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 8px;
  margin-bottom: 12px; /* #1 간격 — 추천픽 margin-bottom:12px 동일 리듬 (디자인팀 2026-06-18) */
  padding: 10px 14px 11px; /* #2 무게감 — 패딩 보강 */
  border: 1px solid var(--am3); /* #2 무게감 — 황금계열 border (추천픽 --am3 동일 토큰, 위계 정합) */
  border-radius: 12px;
  background: var(--am4); /* #2 무게감 — 황금계열 1단계 상향 (추천픽 --am4 동일 토큰, 추천이 --am4+글로우로 더 강조) */
  box-shadow: 0 1px 2px rgba(180, 130, 20, 0.04); /* #2 무게감 — 추천픽(0.08) 절반 글로우 */
}
/* 레이아웃 정렬 fix (대표 catch 2026-06-17) — 오늘 뷰에서 추적픽 박스가 추천 카드(.cal-pm320-today-rec)
   직후 형제로 주입될 때, 추천 카드는 full-width 인데 추적픽은 max-width:360px 라 좌측 정렬·폭 불일치가
   생긴다. 추천 카드 직후일 때만 full-width 로 폭을 맞추고, 카드의 margin-bottom:12px 가 이미 간격을 주므로
   중복 top 여백(8px)을 0 으로 정리(이중 간격·어긋남 제거). PRE_MARKET portal 경로(360px 제약)는 비훼손. */
.cal-pm320-today-rec + .cal-pre-prev-pick-holdings {
  max-width: none;
  margin-top: 0;
}
.cal-pre-prev-pick-holdings-label {
  font-size: 12px; /* R25 P1① — 11px 텍스트 플로어 위반 fix (12px+ 의무) */
  font-weight: 700;
  color: var(--tx2);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.cal-pre-prev-pick-holdings--countonly { padding: 7px 12px; }
.cal-pre-prev-pick-holdings--countonly .cal-pre-prev-pick-holdings-label { margin-bottom: 0; }
/* wave1 fix ③ (2026-06-11, R24 P2) — "하루 1픽 누적 보유" 취지 보조설명 1줄.
   라벨(12px/700)보다 약한 위계는 weight·color 로 유지 — 정보성 각주 톤(경보 아님).
   R25 P1① — 11px 텍스트 플로어 위반 fix (12px+ 의무). */
.cal-pre-prev-pick-holdings-note {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dm);
  letter-spacing: -0.2px;
  line-height: 1.5;
}
.cal-pre-prev-pick-holdings--countonly .cal-pre-prev-pick-holdings-note { margin-top: 3px; }
.cal-pre-prev-pick-holding-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}
.cal-pre-prev-pick-holding-row + .cal-pre-prev-pick-holding-row {
  border-top: 1px solid var(--bd);
}
.cal-pre-prev-pick-holding-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-pre-prev-pick-holding-meta {
  font-size: 12px;
  color: var(--dm);
  white-space: nowrap;
  flex: 0 0 auto;
}
/* RND-PM320-062 (2026-06-15, advisory DOC-20260615-JDG-030) — "추적 중인 픽" 접힘 보조섹션(가드2)
   + 손익%(가드4). <details> 기본 접힘·헤더 숫자 상시 노출·토글 화살표. 손익색=가격 토큰 재사용. */
details.cal-pre-prev-pick-holdings > summary.cal-pre-prev-pick-holdings-label {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.cal-pre-prev-pick-holdings > summary::-webkit-details-marker { display: none; }
details.cal-pre-prev-pick-holdings > summary.cal-pre-prev-pick-holdings-label::before {
  content: '▸ ';
  color: var(--dm);
  font-size: 11px;
}
details.cal-pre-prev-pick-holdings[open] > summary.cal-pre-prev-pick-holdings-label::before { content: '▾ '; }
.cal-pre-prev-pick-holding-pnl { font-weight: 700; }
.cal-pre-prev-pick-holding-pnl--up { color: var(--up); }
.cal-pre-prev-pick-holding-pnl--down { color: var(--down); }
.cal-pre-prev-pick-holding-pnl--flat { color: var(--dm); }
/* PM320-D6 R22 (오전 동선) — "어제의 픽" pill → 결과 카드 승격(진입가·익절목표·만기 grid + 15:20 예고).
   --card 변종일 때 pill 레이아웃을 카드 박스로 전환(좌측 정렬·blockflow·진입가/목표 grid). 결과 톤별
   배경/테두리(.--profit/--loss/--running)는 그대로 상속. */
.cal-pre-prev-pick--card {
  display: block;
  border-radius: 14px;
  padding: 12px 14px 13px;
  text-align: left;
  width: 100%;
  max-width: 360px;
  min-width: 0;
  box-sizing: border-box;
  scroll-margin-top: 84px; /* 픽바 data-pickbar-scroll 착지 시 sticky 가림 방지(카드 직접 scroll 대상) */
}
.cal-pre-prev-pick--card .cal-pre-prev-pick-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 10px;
}
.cal-pre-prev-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.cal-pre-prev-pick-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--inset-sf);
  border: 1px solid var(--inset-bd);
  border-radius: 8px;
  min-width: 0;
}
.cal-pre-prev-pick-k {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx2);
  letter-spacing: 0.01em;
}
.cal-pre-prev-pick-v {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 한국장 관습: 익절(가격 상승)=빨강. 진입가/만기는 중립. */
.cal-pre-prev-pick-v--up { color: var(--up); }
.cal-pre-prev-pick-foretell {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
  text-align: center;
}
.cal-pre-prev-pick-foretell strong {
  color: var(--am);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cal-pre-market-toggle {
  margin-top: 16px;
  background: transparent;
  border: 1px solid var(--bd, rgba(0,0,0,0.12));
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--tx2, var(--dm));
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.cal-pre-market-toggle:hover,
.cal-pre-market-toggle:focus-visible {
  background: rgba(0,0,0,0.04);
  border-color: var(--am);
  outline: none;
}
.cal-pre-market-prev {
  width: 100%;
  margin-top: 12px;
  text-align: left;
  opacity: 0.78;
}
.cal-pre-market-prev[data-stale="true"]::before {
  content: '\203B  전일 데이터 (참고)';
  display: block;
  font-size: 12px;
  color: var(--dm);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
@media (max-width: 880px) {
  .cal-pre-market-empty { padding: 36px 12px; }
  .cal-pre-market-icon { width: 32px; height: 32px; }
  .cal-pre-market-title { font-size: 14px; }
  .cal-pre-market-sub { font-size: 12px; }
  .cal-pre-market-countdown { font-size: 18px; }
  .cal-pre-market-toggle { font-size: 12px; padding: 7px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-pre-market-toggle { transition: none; }
}

/* ───── 테마 트리 (Indented Tree + Inline Bar) ───── */
.theme-tree { margin-top: 0; }
.theme-tree-header { margin-bottom: 10px; padding-left: 8px; border-left: 3px solid var(--am); }
.theme-tree-title { font-size: 14px; font-weight: 800; color: var(--am); }
.theme-tree-sub { font-size: 12px; color: var(--dm); margin-top: 2px; }
/* Q-20260609 — 테마트리 데이터 시점 정직 캡션 (전일 종가 기준 노출 시). 미장 빈상태 fix 동형. */
.theme-tree-source-caption {
  font-size: 12px; font-weight: 700; color: var(--dm);
  background: var(--bg2, rgba(0,0,0,0.03)); border: 1px solid var(--bd);
  border-radius: 8px; padding: 6px 10px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.theme-tree-source-caption::before {
  content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dm); opacity: 0.6;
}
.theme-tree-container {
  background: var(--sf); border: 1px solid var(--bd); border-radius: 12px;
  padding: 12px 16px; max-height: 400px; overflow-y: auto;
  /* 긴 테마명/막대로 row가 폭 초과 시 .lut-scroll(차트)처럼 자체 가로 스크롤 — 정보 잘림 없이 */
  overflow-x: auto;
}
.theme-tree-row {
  display: flex; align-items: center; height: 36px; cursor: pointer;
  border-radius: 6px; padding: 0 8px; transition: background 0.12s;
  user-select: none;
}
.theme-tree-row:hover { background: rgba(255,255,255,0.04); }
.theme-tree-arrow {
  width: 16px; font-size: 12px; color: var(--dm); transition: transform 0.2s;
  flex-shrink: 0; text-align: center;
}
.theme-tree-arrow.expanded { transform: rotate(90deg); }
.theme-tree-arrow.leaf { visibility: hidden; }
.theme-tree-bar {
  height: 14px; border-radius: 3px; margin: 0 10px; flex-shrink: 0;
  transition: width 0.2s;
}
.theme-tree-name {
  font-size: 13px; font-weight: 700; color: var(--tx); white-space: nowrap;
  flex-shrink: 0;
}
.theme-tree-name.zero { color: var(--dm); font-weight: 500; }
.theme-tree-amt {
  font-size: 12px; color: var(--dm); margin-left: 8px; white-space: nowrap;
  flex-shrink: 0;
}
.theme-tree-pct {
  font-size: 12px; font-weight: 700; margin-left: 8px; white-space: nowrap;
  flex-shrink: 0;
}
.theme-tree-uncollected { font-size: 12px; color: var(--dm); margin-left: 6px; }
.theme-tree-stock-count { font-size: 12px; color: var(--dm); margin-left: 6px; flex-shrink: 0; white-space: nowrap; }
.theme-tree-children {
  overflow: hidden; transition: max-height 0.2s ease;
}
.theme-tree-children.collapsed { max-height: 0 !important; }
.theme-tree-stock-row {
  display: flex; align-items: center; height: 30px;
  padding: 0 8px; border-radius: 4px; font-size: 0.85em;
  cursor: default; user-select: none;
}
.theme-tree-stock-row:hover { background: rgba(255,255,255,0.03); }
.theme-tree-stock-name {
  font-size: 12px; font-weight: 600; color: var(--tx2); white-space: nowrap;
  flex-shrink: 0;
}
.theme-tree-stock-pct {
  font-size: 12px; font-weight: 700; margin-left: 8px; white-space: nowrap;
  flex-shrink: 0;
}
.theme-tree-stock-amt {
  font-size: 12px; color: var(--dm); margin-left: 8px; white-space: nowrap;
  flex-shrink: 0;
}
.theme-tree-stock-more {
  font-size: 12px; color: var(--dm); cursor: pointer; padding: 2px 0;
  user-select: none;
}
.theme-tree-stock-more:hover { color: var(--am); text-decoration: underline; }
@media (max-width: 720px) {
  .theme-tree-bar { max-width: 120px !important; }
  .theme-tree-name { font-size: 12px; }
  .theme-tree-amt { font-size: 12px; }
  .theme-tree-pct { font-size: 12px; }
  .theme-tree-stock-name { font-size: 12px; }
  .theme-tree-stock-pct { font-size: 12px; }
  .theme-tree-stock-amt { font-size: 12px; }
  .theme-tree-stock-count { font-size: 12px; }
}

/* ───── 테마 거래대금 트렌드 ───── */
.theme-trend-header { margin-bottom: 10px; padding-left: 8px; border-left: 3px solid var(--am); }
.theme-trend-title { font-size: 14px; font-weight: 800; color: var(--am); }
.theme-trend-sub { font-size: 12px; color: var(--dm); margin-top: 2px; } /* R26 P1① 11→12px */
.theme-trend-wrap {
  position: relative;
  background: var(--sf); border: 1px solid var(--bd); border-radius: 12px;
  padding: 16px 20px; overflow: visible;
}
.theme-trend-svg { display: block; min-height: 180px; height: auto; }
/* REQ-017 후속 #9 v166 — anchor scroll 위치 sticky header 보정 */
[id^="stock-"] { scroll-margin-top: 100px; }
.theme-trend-svg text { font-family: 'Inter', 'Pretendard', sans-serif; }
/* tt-dot 기본 = 빈(fill=#FFF + stroke=color) — JS 인라인 fill="#FFF" stroke=color stroke-width=1.5.
   active = fill=color (data-color 속성에서 JS가 직접 적용). */
.tt-dot { transition: fill 150ms ease; cursor: pointer; }
/* multi-point dot은 .tt-hit 위에 렌더되어 클릭 가로챔 — pointer-events: none으로 hit 통과.
   single-point는 class="tt-hit tt-dot" 동시 보유이므로 :not(.tt-hit)로 제외. */
.tt-dot:not(.tt-hit) { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .tt-dot { transition: none; }
}
.trend-y-axis {
  position: absolute; top: 16px; left: 20px; width: 44px; height: calc(100% - 32px);
  z-index: 2; pointer-events: none; background: var(--sf);
}
.trend-scroll-area {
  margin-left: 44px; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: rgba(196,153,48,0.4) transparent;
  /* 5/8 fix (qa D6): 데스크탑 viewport = VISIBLE_DAYS(10) × FIXED_SLOT(80) + 2×EDGE_PAD(32) = 864px.
     20일 SVG (1664px)에서 mask 처리 → 정확히 10일만 가시. 가로 스크롤로 7~16일 추가 접근. */
  max-width: 864px;
}
.trend-scroll-area::-webkit-scrollbar { height: 4px; }
.trend-scroll-area::-webkit-scrollbar-track { background: transparent; }
.trend-scroll-area::-webkit-scrollbar-thumb { background: rgba(196,153,48,0.35); border-radius: 2px; }
.trend-scroll-area::-webkit-scrollbar-thumb:hover { background: rgba(196,153,48,0.6); }
/* 5/8 대표 catch: .trend-fade-left 룰 폐기 — 모바일 좌측 스크롤 시 흰박스 라인 가림. yaxis-col 자연 mask로 충분 */
/* PM320 정보 위계 개편 (대표 2026-06-10 결합안) — 섹션 기본 접힘 토글.
   theme-trend / limit-up-trend / theme-tree 헤더를 토글로. 접힘 시 본문 hidden + 미니요약 노출.
   슬롯 이동·순서 변경 없음 — 장중 동선의 뉴스/픽 슬롯을 위로 끌어올리는 게 목적. */
.pm320-section-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  cursor: pointer; user-select: none;
  /* R48 W2-1 (조니 R46 2심 W2 — 지수 헤더 29.7px < 44 터치) — 접기 헤더(role=button) 터치존 ≥44px.
     시장 지수뿐 아니라 동일 접힘 문법의 전 섹션 헤더 일괄 (한쪽 수정·다른 쪽 누락 FLR-20260428-TEC-001 동형 예방). */
  min-height: 44px;
}
.pm320-section-headline { flex: 1 1 auto; min-width: 0; }
/* PM320 (대표 2026-06-10 A안) — 야간 미국증시 섹션 헤더 타이틀 (rev10에서 제거됐던 것을 접기 헤더로 복원). */
.nightly-us-title { font-size: 14px; font-weight: 800; color: var(--tx); }
.nightly-us-summary.pm320-collapsible { margin: 14px 0; }
.nightly-us-summary .pm320-section-header { padding: 4px 0; }
.pm320-section-summary {
  /* R13 P0 대비: 접힘 미니요약 골드 #C49930(2.64:1) → #8A6810(4.99:1 on white, WCAG AA).
     밤사용자 P2: 12→12.5px 소폭 상향 (밤 가독). */
  font-size: 12.5px; font-weight: 700; color: var(--section-summary);
  white-space: nowrap; flex: 0 0 auto;
}
.pm320-section-chevron {
  /* 밤사용자 P2: --dm(4.46:1)→--tx2(7.73:1) 명도 상향 (토글 라벨 밤 가독). */
  flex: 0 0 auto; font-size: 12px; color: var(--tx2);
  transition: transform 0.24s ease; margin-left: 2px;
}
/* 펼침(=collapsed 부재) 시 chevron 회전 + 미니요약 숨김(본문이 이미 정보 노출). */
.pm320-collapsible:not(.pm320-section-collapsed) .pm320-section-chevron { transform: rotate(180deg); }
.pm320-collapsible:not(.pm320-section-collapsed) .pm320-section-summary { display: none; }
/* R13 P1 접기/펼치기 트랜지션 (대표 R12 catch — 즉시 토글 → 240ms 슬라이드/페이드).
   display:none 은 애니메이션 불가 → max-height + opacity. 펼침 기본값(아래) → 접힘(0)으로 전이.
   ⚠️ R13-bis: JS 토글(_wireSectionCollapse renderer.js:2943)이 접힘 시 hidden 속성을 set →
   UA 기본 [hidden]{display:none}이 max-height/opacity 트랜지션을 무력화(즉시 snap, 240ms 미동작).
   본 요소 한정 [hidden] display 복원 후 .pm320-section-collapsed 클래스로 시각 은닉을 일원화.
   a11y(스크린리더 트리 제외)는 접힘 완료 시 visibility:hidden로 보장(0.24s 지연). */
.section-collapse-body {
  overflow: hidden;
  max-height: 4000px; opacity: 1; visibility: visible;
  transition: max-height 0.24s ease, opacity 0.24s ease, visibility 0s linear 0s;
}
.section-collapse-body[hidden] { display: block; }
.pm320-section-collapsed .section-collapse-body {
  max-height: 0; opacity: 0;
  /* 잔여 인터랙션 차단 + 접힘 완료(0.24s) 후 a11y 트리에서도 제거(페이드아웃 중엔 보임). */
  pointer-events: none; visibility: hidden;
  transition: max-height 0.24s ease, opacity 0.24s ease, visibility 0s linear 0.24s;
}
@media (prefers-reduced-motion: reduce) {
  .section-collapse-body,
  .pm320-section-collapsed .section-collapse-body { transition: none; }
}
.pm320-section-header:focus-visible {
  outline: 2px solid var(--am); outline-offset: 2px; border-radius: 8px;
}
/* R46 P0-2① (조니 2026-06-12 단정) — 캘린더(toss-cal) 기본 접힘 합류. 접기 헤더 타이틀/서브는
   theme-tree 헤더와 동일 토큰 값 (섹션 간 접힘 문법 통일). */
.toss-cal-collapse-head { padding: 2px 0; flex-wrap: nowrap; }
/* 헤더 1줄 고정 — chevron 고아 줄낙하 차단. 초과분 ellipsis 정직 절단 (#nightly-us 합격 패턴 동형). */
.toss-cal-collapse-head .pm320-section-summary {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.toss-cal-head-title { font-size: 14px; font-weight: 800; color: var(--am); }
.toss-cal-head-sub { font-size: 12px; color: var(--dm); margin-top: 2px; }
.toss-cal .section-collapse-body { margin-top: 10px; }
.toss-cal.pm320-section-collapsed .section-collapse-body { margin-top: 0; }
/* R46 P1-1 (조니 단정 — 범례 1곳) — 용어 풀이 범례. 카드 리스트 하단, 기본 접힘 details.
   인라인 (?) 팁은 첫 등장 1회로 감축 — 전체 용어 일람은 본 범례가 단일 장소. */
.pm320-term-legend {
  /* R48 P1-4 — summary 자체가 상하 12px 패딩(44px 터치존)을 가지므로 컨테이너 상하 패딩 축소
     (종전 10px → 4px, 접힘 박스 비대 방지: 40→52px). */
  margin: 18px 0 6px; padding: 4px 14px;
  border: 1px solid var(--bd); border-radius: 12px; background: var(--bg2);
}
.pm320-term-legend summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--tx2);
  -webkit-tap-highlight-color: transparent;
  /* R48 P1-4 (조니 R47 1심 ④ — 범례 토글 32px < 44 터치) — summary 터치존 ≥44px.
     display:flex 전환은 ::marker(디스클로저 삼각형) 소실 위험 → list-item 유지 + 상하 패딩 확보:
     13px*1.55(≈20.2) + 12*2 ≈ 44.2px. */
  padding: 12px 0; min-height: 44px; box-sizing: border-box;
}
.pm320-term-legend summary::marker { color: var(--dm); }
.pm320-term-legend dl { margin: 2px 0 8px; }
.pm320-term-legend dt { font-size: 12px; font-weight: 700; color: var(--tx); margin-top: 8px; }
.pm320-term-legend dd { font-size: 12px; color: var(--tx2); margin: 2px 0 0; line-height: 1.5; }
.theme-trend-legend {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px;
  position: relative; z-index: 4; max-width: 100%;
}
/* PM320 (대표 2026-06-10) — 범례 접기/펼치기 토글 버튼. 데스크탑 기본 숨김(전체 노출), 모바일에서만 노출.
   R27 추가 catch (대표 직접, 2026-06-11) — z-index 4 신설: .trend-y-axis(absolute, bg sf, z:2,
   height = wrap 전체)가 버튼 좌측 36px 스트립을 덮어 "범례 " 글자·좌측 라운드 테두리가 잘려 보임.
   .theme-trend-legend / .trend-detail 은 이미 z:4 구제 — 토글(6/10 신설)만 누락된 동형
   (FLR-20260428-TEC-001 한쪽 코드·양끝 누락). */
.theme-trend-legend-toggle {
  display: none;
  position: relative; z-index: 4;
  margin-top: 8px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; color: var(--am);
  background: transparent; border: 1px solid var(--bd);
  /* R49 E2 (조니 2심 단정 2 — "범례 모두 보기" 실측 119.6×32 < 44) — min-height 32 → 44.
     .theme-trend-legend-item 5/8 qa D10 fix(36→44)·R47 ④ 동일 패턴 — "같은 결함을 두 번 고치게
     하지 마라". 모바일 전용 노출 버튼이라 시각 +12px = 터치 우선 (44.1 실측 계열 정합). */
  border-radius: 999px; cursor: pointer; min-height: 44px;
}
.theme-trend-legend-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--tx); cursor: pointer;
  white-space: nowrap;
}
.theme-trend-legend-item .swatch {
  width: 10px; height: 3px; border-radius: 2px; flex-shrink: 0;
}
/* REQ-007 5/4 v190: theme-trend mobile breakpoint 640 → 880 (lut 정합). 두 chart 동일 layout 보장. */
/* 5/8 fix (대표 catch): 모바일 33 root → wrap 복원 (1행 가로 스크롤 폐기). 폰트/swatch/padding 축소로 4~5행 fit. WCAG 44x44 vs wrap 가독성 trade-off — 대표 의도=wrap 우선 */
@media (max-width: 880px) {
  .theme-trend-legend {
    gap: 4px 6px;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .theme-trend-legend-item { font-size: 12px; padding: 4px 6px; min-height: 28px; }
  .theme-trend-legend-item .swatch { width: 8px; height: 3px; }
  /* PM320 (대표 2026-06-10) — 모바일 범례 기본 접기(상위 2행) + 토글 노출. 펼치면 전체(무손실).
     R28 제거② (조니 2심, 2026-06-11) — 페이드 마스크가 3행째를 반투명 "유령 텍스트"로 남기던 것
     폐기: 2행 정확 클립(item 28 + gap 4 → 28+4+28 = 60px), 마스크 제거. 잘림 사실은 토글
     "범례 모두 보기 (N)"가 명시 — 반투명 잔상 없이 정직한 경계. */
  .theme-trend-legend.is-collapsible.collapsed {
    max-height: 60px; overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .theme-trend-legend-toggle { display: inline-flex; align-items: center; }
  .theme-trend-tooltip { font-size: 13px; padding: 8px 14px; }
  .theme-trend-wrap { padding: 12px; overflow: visible; }
  .trend-y-axis { top: 12px; left: 12px; width: 36px; height: calc(100% - 24px); }
  /* 5/20 fix (대표 catch 09:29 KST, viewport 763×779): 모바일 가로 폼팩터(500~880px)에서 .trend-scroll-area
     max-width:435px cap이 wrapper 폭(~700px+)과 mismatch → 차트 우측 빈공간/cut-off.
     lut-trend(.lut-scroll) 정합: wrapper 폭까지 자연 fit. 작은 폰(320~414px)은 wrapper 자체가 좁아
     자연 cropping 유지. VISIBLE_DAYS=7 mask는 작은 폰에서만 강제, 큰 모바일/타블렛은 자연 확장 = 개선. */
  .trend-scroll-area { margin-left: 36px; max-width: 100%; }
}
.theme-trend-tooltip {
  position: absolute; pointer-events: none;
  background: var(--tx); color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px; white-space: nowrap;
  opacity: 0; transition: opacity 0.12s;
  /* REQ-homepage-news-polish #2 — sticky 헤더 z:50 위로 (tooltip 가림 방지). */
  z-index: 51; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.theme-trend-tooltip.show { opacity: 1; }
/* lut-tooltip — theme-trend-tooltip SoT */
.lut-tooltip {
  position: absolute; pointer-events: none;
  background: var(--tx); color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px; white-space: nowrap;
  opacity: 0; transition: opacity 0.12s;
  z-index: 51; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.lut-tooltip.show { opacity: 1; }
/* 5/8 fix (qa D10 WCAG 2.5.5): min-height 36 → 44 (44x44 터치 타깃 충족) */
.theme-trend-legend-item { min-height: 44px; padding: 10px 12px; border-radius: 999px; transition: color 0.15s, opacity 0.15s; }
.theme-trend-legend-item.dimmed { color: var(--dm); opacity: 0.5; }
/* 5/8 fix (qa D8): selectedIdx 활성 시 강조 — 진폭 명시 (.selected는 swatch::after underline + label 강조) */
.theme-trend-legend-item.selected { color: var(--tx); font-weight: 700; background: rgba(196,153,48,0.08); }
/* 5/8 fix (qa D7): polyline data-selected = stroke 강화. CSS는 stroke-width 직접 못잡음 (SVG attr 우선) → JS inline opacity로 대체. */
/* 단계 2 (대표 07:17 명령, design 07:20 명세) — viewport-aware legend sync.
   5/8 07:42 정정 (대표 verbatim): "윈도우에 보이는 애들만 활성화 나머진 비활성화"
   = 33 root 모두 legend 표시 (display:none X) + viewport 외 = dim (opacity + pointer-events).
   polyline opacity 0.08 inline 처리 (renderer.js updateViewportLegend) — 모바일/데스크탑 동일. */
.theme-trend-legend-item.viewport-inactive {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(0.5);
}
.theme-trend-legend-empty-hint {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px;
  font-size: 12px; font-weight: 500; color: var(--dm);
  background: transparent; border-radius: 999px;
}
@media (max-width: 880px) {
  .theme-trend-legend-empty-hint { font-size: 12px; padding: 4px 6px; }
}
.theme-trend-legend-item .swatch { position: relative; }
.theme-trend-legend-item.selected .swatch::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: var(--am); border-radius: 1px;
}
/* 대표 catch (5/8 06:50): is-overflow dim 정책 폐기 — legend 상위 12개만 표시.
   단계 2 (차트 가로 스크롤 + viewport 동적 legend sync) 별도 사이클. */
/* design-theme-tree-time-state-v1 — PRE_MARKET 빈 상태가 테마트리/추이 컨테이너 안에서도 동일 톤 유지. */
.theme-pre-market-empty {
  /* cal-pre-market-empty 토큰 100% 재사용. wrap 패딩 컨테이너에 따라 자연 적용. */
}
.theme-pre-market-prev {
  padding-top: 8px;
}
/* 🔴 R18 P0 fix — 장전 테마트리 "전일 보기" 패널이 빈/숨김으로 보이던 결함.
   원인: 본 패널이 .theme-tree.pm320-section-collapsed > .section-collapse-body 안에 중첩 →
   섹션 접힘(6/10 기본 접힘 기능) 시 자손 전체가 visibility:hidden + max-height:0 상속 →
   토글로 펼친 전일 테마트리 row 들이 렌더는 되나(textContent 有) 화면엔 안 보임(innerText 0, 평가자 적발).
   fix: 펼쳐진(=[hidden] 아님) 전일 패널과 그 자손은 접힘 섹션의 은닉을 무력화하고 항상 보이게 한다. */
.theme-pre-market-prev:not([hidden]),
.theme-pre-market-prev:not([hidden]) * {
  visibility: visible;
}
.pm320-section-collapsed .section-collapse-body .theme-pre-market-prev:not([hidden]) {
  max-height: none;
  opacity: 1;
  pointer-events: auto;
}
/* 5/8 fix (대표 catch 19:15 P1): drill-down 종목 list 동적 size + 스크롤. 13~15종 표시 시 max-height: 400px 잘림 결함 → 70vh 확장 + overflow-y: auto. */
.trend-detail { margin-top: 12px; overflow-x: hidden; overflow-y: hidden; transition: max-height 0.2s ease-out; max-height: 0; position: relative; z-index: 4; -webkit-overflow-scrolling: touch; }
.trend-detail.open { max-height: 70vh; overflow-y: auto; }
.trend-detail-chip { display: inline-block; background: var(--am4); color: var(--am); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.trend-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.trend-detail-table th { text-align: left; font-weight: 600; color: var(--dm); padding: 6px 8px; border-bottom: 1px solid var(--bd); }
.trend-detail-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bd); }
.td-candle { width: 20px; min-width: 16px; padding: 4px 2px; }
.th-candle { width: 20px; min-width: 16px; }
/* qa-2 #5 — 양 list 우측 정렬 통일 (LUT가 SoT 측 누락 발견). 종목명은 left default 유지. */
.trend-detail-table .th-price,
.trend-detail-table .th-pct,
.trend-detail-table .th-amount { text-align: right; }
.trend-detail-table .td-price,
.trend-detail-table .td-amount { text-align: right; font-family: 'SF Mono', monospace; }
.trend-detail-table .td-pct { text-align: right; }
@media (max-width: 640px) {
  .trend-detail-table { font-size: 12px; table-layout: fixed; width: 100%; }
  .trend-detail-table th { padding: 4px 3px; }
  .trend-detail-table td { padding: 4px 3px; }
  .trend-detail-table .th-name,
  .trend-detail-table .td-name { width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trend-detail-table .th-price,
  .trend-detail-table .td-price { width: 22%; }
  .trend-detail-table .th-pct,
  .trend-detail-table .td-pct { width: 22%; }
  .trend-detail-table .th-candle,
  .trend-detail-table .td-candle { width: 16px; min-width: 16px; }
  .trend-detail-table .th-amount,
  .trend-detail-table .td-amount { width: 16%; }
}

footer {
  background: var(--footer-bg); color: var(--footer-tx); text-align: center;  /* R15: var(--tx) 반전 버그 fix — 항상 어두운 anchor */
  padding: 32px 24px; font-size: 12px;
  margin-top: 80px;
}
footer .links { display: flex; gap: 20px; justify-content: center; margin-bottom: 16px; font-weight: 600; }
/* R55 P2-4 (픽셀 sweep DOC-20260614-JDG-004 — footer 링크 ~40×19 터치 < 44) — inline-flex +
   min-height 44 로 실 bbox ≥44(WAVE6 교훈: ::after 오버레이는 DQA 측정 40 잔존 → 실 bbox 확장).
   가로 gap 20px 유지로 인접 링크 충돌 0. 시각 텍스트 크기/색 불변(높이만 19→44, 세로 중앙). */
footer .links a {
  display: inline-flex; align-items: center;
  min-height: 44px; line-height: 1;
}
footer .links a:hover { color: var(--am2); }
/* R51 픽셀 재판정 NO (조니) — 비대칭 결함 종결: R51 1심은 .footer-legal-note(법적 고지)만 상향하고
   형제 .copyright(© + DART 출처 줄)은 var(--dm)@0.6(라이트 CR 2.01·다크 2.64, AA 미달)로 남김.
   → 푸터 텍스트 전체를 단일 토큰 var(--footer-tx)@opacity 1 로 일관화 (공통 .copyright 규칙 1곳).
   © + DART 라이트 2.01→5.58 / 다크 2.64→5.18, 법적 고지 동일 토큰 유지 — 양 모드 전수 AA 통과.
   --footer-tx 는 모드별 튜닝값(라이트 #8B95A8 / 다크 #8E8676)이라 다크 무손상.
   FLR-20260428-TEC-001 한쪽 수정·다른 끝 누락 동형 회피 — 푸터 텍스트 형제 전건 동일 규칙. */
footer .copyright,
footer .footer-legal-note { color: var(--footer-tx); opacity: 1; }

/* ───── 키움 거래대금 500억+ 블록 ───── */
.kiwoom-block {
  margin-bottom: 24px;
  /* REQ-035-rev: 정체성 그라데이션 복원 (햇살 톤). am2 border 동시 복원. R15: 토큰화(다크 함몰). */
  background: linear-gradient(135deg, var(--warm3-top) 0%, var(--warm3-bot) 60%);
  border: 1px solid var(--am2);
  border-radius: 14px;
  padding: 18px 22px;
}
.kiwoom-header {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(196,153,48,0.25);
  padding-bottom: 10px;
}
.kiwoom-title {
  font-size: 13px; font-weight: 800; color: var(--am);
  text-transform: uppercase; letter-spacing: 1px;
}
.kiwoom-meta {
  font-size: 12px; color: var(--dm);
  font-family: 'SF Mono', monospace;
}
.kiwoom-list {
  display: grid; grid-template-columns: 1fr;
  gap: 6px;
}
.kiwoom-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--glass-sf);  /* R15: 라이트 0.7 흰 / 다크 함몰 */
  font-size: 12px;
}
.kiwoom-row:hover { background: var(--pill-sf-hover); }
.kiwoom-row.matched-cafe { border-left: 2px solid var(--c3); padding-left: 8px; }
.kiwoom-rank {
  font-size: 12px; color: var(--dm); font-weight: 700;
  font-family: 'SF Mono', monospace;
}
.kiwoom-name-cell {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  min-width: 0;
}
.kiwoom-name {
  font-weight: 700; color: var(--tx); letter-spacing: -0.2px;
  white-space: nowrap;
}
.kiwoom-themes {
  display: flex; flex-wrap: wrap; gap: 3px;
}
.kiwoom-theme-chip {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;  /* REQ-031 — pill 통일 */
  background: rgba(196,153,48,0.12);
  color: var(--am);
  border: 1px solid rgba(196,153,48,0.25);
  cursor: pointer;
  transition: background 0.15s;
}
.kiwoom-theme-chip:hover { background: rgba(196,153,48,0.25); }
.kiwoom-theme-chip.src-owner { background: rgba(196,153,48,0.3); border-color: var(--am); }
.kiwoom-theme-chip.src-llm { border-style: dashed; opacity: 0.85; }
.kiwoom-amount {
  font-size: 12px; color: var(--am); font-weight: 700;
  font-family: 'SF Mono', monospace;
}
.kiwoom-pct {
  font-size: 12px; font-weight: 800;
  font-family: 'SF Mono', monospace;
  text-align: right; min-width: 56px;
}
.kiwoom-pct.up { color: var(--up); }
.kiwoom-pct.down { color: var(--down); }

/* ───── 캘린더 + 콘텐츠 2컬럼 레이아웃 ───── */
.cal-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 32px;
}
.cal-layout > .cal-side { position: sticky; top: 88px; }

.toss-cal {
  /* REQ-035-rev: 정체성 그라데이션 복원 (햇살 톤). 사이드 캘린더 강조. */
  background: linear-gradient(180deg, var(--warm-top) 0%, var(--warm-bot) 70%);  /* R15: 햇살 크림 / 다크 함몰 */
  border: 1px solid var(--bd);
  border-radius: 16px; /* R26 P1⑤ — 인접 .cal-content(16px)와 radius 통일 (14→16) */
  padding: 14px 12px 12px;
  box-shadow: 0 2px 12px rgba(26,29,38,0.04);
}
.toss-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding: 0 4px;
}
.toss-cal-title {
  font-size: 14px; font-weight: 800; letter-spacing: -0.3px;
  display: flex; align-items: center; gap: 6px; color: var(--tx);
}
.toss-cal-nav {
  background: var(--bg2); border: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 8px;
  font-size: 13px; color: var(--tx2); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; /* R28 P1④ — ::after 터치 오버레이 기준점 */
}
/* R28 P1④ — 월 이동 버튼 시각 26px 유지, 터치 영역 44×44 (disabled 는 pointer-events 자연 무효). */
.toss-cal-nav::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.toss-cal-nav:hover:not(:disabled) { background: var(--am3); color: var(--am); }
.toss-cal-nav:disabled { color: var(--bd); cursor: not-allowed; background: transparent; }
.toss-cal-sub {
  font-size: 12px; color: var(--dm); font-family: 'SF Mono', monospace;
  padding: 0 4px 8px; text-align: right;
}
.toss-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  grid-auto-rows: 30px;
  gap: 2px;
  justify-content: space-between;
  align-items: center;
}
.toss-cal-dow {
  font-size: 12px; font-weight: 700; color: var(--dm); /* R26 P1① 10→12px */
  text-align: center; width: 30px; height: 20px; line-height: 20px;
}
.toss-cal-dow.sun { color: var(--up); }
.toss-cal-dow.sat { color: var(--down); }
.toss-cal-cell {
  width: 30px; height: 30px;
  box-sizing: border-box;
  border-radius: 8px;
  position: relative; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--tx); /* R26 P1① 11→12px */
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}
/* R28 P1④ — 날짜 셀 시각 30px 유지, 터치 영역 40×40 투명 오버레이 (조니 승인: cal-cell 은
   44 대신 40 하한 예외 — 셀 피치 ~37px, 44 는 인접 셀 과잉 중첩). pointer-events 비활성 셀
   (no-data/future)은 오버레이도 함께 무효(상속). */
.toss-cal-cell::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
}
.toss-cal-cell.empty { color: var(--tx2); }
.toss-cal-cell.no-data.sunday { color: var(--cal-sun); }
.toss-cal-cell.no-data.saturday { color: var(--down); }
.toss-cal-cell.no-data.holiday { color: var(--cal-sun); }
.toss-cal-cell.future { color: var(--cal-future); cursor: not-allowed; pointer-events: none; } /* R15: 다크에서 --bd(#33363F)는 배경과 거의 동색 → 가독 회복(#565B66) */
.toss-cal-cell.outside { visibility: hidden; }
.toss-cal-cell.no-data { opacity: 0.35; pointer-events: none; }
.toss-cal-cell.no-data.weekend,
.toss-cal-cell.no-data.holiday {
  opacity: 0.7;
  cursor: pointer;
  pointer-events: auto;
}
.toss-cal-cell.market-hours { opacity: 0.7; cursor: pointer; }
.toss-cal-cell.weekend { opacity: 0.7; }
.toss-cal-cell.sunday { color: var(--cal-sun); }
.toss-cal-cell.saturday { color: var(--cal-sat); }
.toss-cal-cell.holiday { color: var(--cal-sun); }
.toss-cal-cell.selected.sunday,
.toss-cal-cell.selected.saturday,
.toss-cal-cell.selected.holiday { color: #fff !important; }
/* R28 제거③ (조니 2심, 2026-06-11) — 휴장일 날짜 밑 적색 점(::after 4px) 제거.
   날짜 숫자 색(--cal-sun)이 이미 휴장을 표시 — 점은 의미 불명 노이즈(조니 "캘린더 날짜 밑 점"). */
.toss-cal-cell:hover:not(.future):not(.selected) {
  background: var(--am3);
  border-color: rgba(196,153,48,0.3);
}
.toss-cal-cell.selected {
  background: var(--am) !important;
  color: #fff !important;
  border-color: var(--am);
  box-shadow: 0 2px 8px rgba(196,153,48,0.45);
}
.toss-cal-cell.today::after {
  content: ''; position: absolute;
  top: 2px; right: 2px; width: 4px; height: 4px;
  border-radius: 50%; background: #A01528;
}
.toss-cal-cell.selected.today::after { background: #fff; }
.toss-cal-dots {
  position: absolute; bottom: 3px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 2px;
}
.toss-cal-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
}
.toss-cal-cell.selected .toss-cal-dot { background: #fff; opacity: 0.85; }

/* ───── 캘린더 콘텐츠 영역 ───── */
.cal-content {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 24px 26px;
  min-height: 320px;
}
.cal-content-head {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 12px;
  /* REQ-070 — 검은 굵은 라인(2px solid var(--tx)) → 얇은 회색 (상위 nav 정합). */
  border-bottom: 1px solid var(--bd);
  /* REQ-072 — 스크롤 시 현재 일자 sticky 고정. 상위 page nav header 실제 height 68px(padding 16+brand-mark 36+padding 16) 정합. 88→68px (REQ-069 88px는 nav 끝과 sticky 시작 사이 20px 갭 발생, 콘텐츠가 그 사이로 흘러 시각 단절). */
  /* REQ-homepage-news-polish #2 — z:10 → z:50 (섹션 sticky 헤더 위계 통일, design-lead-2 spec). */
  position: -webkit-sticky;
  position: sticky;
  /* Q-20260608-144 — top 하드코딩(68px) 제거, nav 실제 height에 바인딩(--nav-h, renderer.js).
     뷰포트별 nav height 변동(69~73px, landscape Samsung)과 정합 → nav 아래 flush, 간격/겹침 0.
     var 미로드(JS 차단) 시 fallback 68px. 모바일 override(@media 880px)도 동일 변수 사용. */
  top: var(--nav-h, 68px);
  z-index: 50;
  /* R23 P0 (대표 catch) — sticky 픽바(top:76,z:99) 활성 시 날짜 헤더를 픽바 아래로 stack 해 겹침·절단
     차단. body.pm320-pickbar-on 일 때만 적용(평상시 nav 바로 아래 원위치). --pickbar-h 는 renderer.js
     가 실측 노출. 전환 부드럽게(top transition). */
  transition: top var(--t-fast, 0.18s) ease;
  /* REQ-073 — 카드 배경 #FFF 정합. 250,251,254 → 255,255,255. */
  /* REQ-075 — frosted glass 효과 복원. 0.92 (거의 솔리드) → 0.7 (뒤 콘텐츠 비침 + blur 가시성). */
  /* 대표 2026-06-08 — 완전불투명→프로스티드 복원(0.7+blur). 간격은 --nav-h 바인딩으로 별도 해결,
     투명도는 시각 선호로 복원. (REQ-075 원본 프로스티드 값 rgba(255,255,255,0.7) + blur(16px))
     R15: 토큰화 (라이트 0.7 흰 베일 / 다크 함몰 표면). */
  background: var(--glass-sf);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* cal-content padding(24px 26px) 보정: sticky 시 좌우 가장자리까지 배경 채움 */
  margin-left: -26px; margin-right: -26px;
  padding-left: 26px; padding-right: 26px;
  padding-top: 8px;
}
/* R23 P0 (대표 catch, 과거 날짜 sticky 충돌) — 픽바 활성(.pm320-pickbar-on) 시 날짜 헤더 sticky top 을
   nav + 픽바 높이만큼 내려 픽바 아래 stack(겹침·요약줄 절단 0).
   R27 P0-1 (조니 2심) — 52px 리터럴 폐기 → var(--pickbar-h) 단일 상수 연동. 픽바 top(var(--nav-h))
   + 실높이(height: var(--pickbar-h) 고정)와 같은 변수 체계 → 한쪽 변동 시 자동 추종, 간격·겹침 0. */
body.pm320-pickbar-on .cal-content-head {
  top: calc(var(--nav-h, 68px) + var(--pickbar-h, 52px));
}
/* REQ-pm320-ux-cycle #1 — cal-content-head 클릭 가능 (→ #toss-cal scrollIntoView).
   hover 햇살 톤(#C49930 6%) + focus outline + active pulse. */
.cal-content-head[data-scroll-to-cal] {
  cursor: pointer;
  transition: background-color 200ms ease, transform 100ms ease;
  /* R55 P2-3 (픽셀 sweep DOC-20260614-JDG-004 — 일자 헤더 토글 340×36 터치 < 44) — 클릭 가능
     변형만 터치 높이 ≥44. min-height 만 부여(align-items:baseline 유지 → 날짜 텍스트 위치 불변,
     하단 8px 만 sticky 배경 내 확장). data-scroll-to-cal 없는 비클릭 렌더는 무영향. */
  min-height: 44px;
  box-sizing: border-box;
}
.cal-content-head[data-scroll-to-cal]:hover {
  background: rgba(196, 153, 48, 0.06);
}
.cal-content-head[data-scroll-to-cal]:focus-visible {
  outline: 2px solid var(--am);
  outline-offset: -2px;
}
.cal-content-head--pulse { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .cal-content-head[data-scroll-to-cal] { transition: none; }
  .cal-content-head--pulse { transform: none; }
}
.cal-content-date {
  /* REQ-074 — 폰트 위계 축소. 24/900/-0.7px → 15/700/-0.2px (메타 정보 위계, 본문 카드와 균형). line-height 1.2 유지. */
  font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--tx);
}
.cal-content-meta {
  font-size: 12px; color: var(--dm);
  font-family: 'SF Mono', monospace;
}
/* Q-20260608-134 (대표 "마지막 갱신 라인은 필요가 없다") — Q-113 별도 마지막 갱신 라인(.cal-content-updated) 폐기.
   헤더 인라인 "HH:MM 기준"(.cal-day-meta__updated)이 주말·휴장 포함 항상 노출되도록 renderer 에서 보장. */
/* REQ-033 — 마지막 업데이트 시각 (SPEC-001 §I.4). 보조 정보 회색 톤. */
/* 2026-05-27 — "HH:MM 기준" freshness 라벨. stale(장중 30분+ 지연)일 때만 황금색 + 앞에 점(•). 차단 없음. */
.cal-day-meta__updated {
  font-size: 12px;
  color: var(--dm);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.cal-day-meta__updated.is-stale {
  color: var(--am);
}
.cal-day-meta__dot {
  color: var(--am2);
  margin-right: 3px;
  font-size: 12px;
}
/* Q-CYCLE23 (2026-05-22) — `.cal-day-meta__snapshot*` 폴링 chip CSS 본문 제거.
   본 chip render 본문 (renderer.js) + `_computeSnapshotFreshness` 함수 동시 제거.
   hard guard 30분 차단 (renderer.js `_computeMarketHardGuard`)은 유지 — 별도 본문, 별도 placeholder. */
.cal-section { margin-bottom: 22px; }
.cal-section:last-child { margin-bottom: 0; }
/* Phase 2c-1 (2026-05-23) — single-card mode: section title/뉴스요약/macro 모두 hide, 단독 카드만 보이도록 padding/margin 정돈. */
.cal-section--single-card { margin-bottom: 0; padding: 0; }
.cal-section--single-card .cal-trade-list { margin-top: 0 !important; }

/* cycle23 Q-CYCLE23-002 Phase 2c-1-extend (2026-05-23) — single-card mode 페이지 frame 완전 격리.
   대표 verbatim "정말로 종목카드만 하나 존재" (2026-05-23 02:15 KST) 정합.
   body.single-card-mode 진입 시 page chrome 전부 hide (header / nav / footer / page-header / cal-side / theme-tree / theme-trend / limit-up-trend / theme-map / mobile-drawer / drawer-backdrop).
   `.cal-layout` flex/grid는 단일 카드 정중앙 정렬 위해 정돈, `main`은 padding 0 본문.
   backward compat: body class 없으면 본 rules 비활성 → 다중 카드 mode 정상 표시.
   cycle23 rounded-square-restore (2026-05-23 02:33 KST) — 대표 verbatim "종목카드가 라운드 스퀘어 테두리가 사라지니까 ux가 너무 별로다 / 라운드 스퀘어까지는 다시 살려줘".
   본질: `.cal-content`의 라운드 스퀘어 frame (background var(--sf) + border 1px var(--bd) + border-radius 16px)은 복원, padding만 12px로 축소하여 카드와 외곽 사이 적정 여백 유지. cal-content-head sticky 헤더는 single-card mode에서 hide (단일 카드만 보여야 하므로 날짜 헤더 노출 불필요). */
body.single-card-mode > header,
body.single-card-mode > footer,
body.single-card-mode > nav.mobile-drawer,
body.single-card-mode > .drawer-backdrop,
body.single-card-mode .page-header,
body.single-card-mode .theme-trend,
body.single-card-mode .limit-up-trend,
body.single-card-mode .cal-side,
body.single-card-mode .theme-tree,
body.single-card-mode .theme-map,
body.single-card-mode .cal-content-head { display: none !important; }
body.single-card-mode main { padding: 12px !important; margin: 0 !important; max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; }
body.single-card-mode .cal-layout { display: block !important; padding: 0 !important; margin: 0 !important; }
body.single-card-mode .cal-content { padding: 12px !important; margin: 0 !important; min-height: 0 !important; }
body.single-card-mode .cal-content .cal-inner { padding: 0 !important; margin: 0 !important; }
body.single-card-mode .cal-section { margin: 0 !important; padding: 0 !important; }
body.single-card-mode .cal-section--single-card .cal-trade-list { margin: 0 !important; padding: 0 !important; }
body.single-card-mode { background: var(--bg) !important; }
.cal-section-title {
  font-size: 12px; font-weight: 800; color: var(--am);
  text-transform: uppercase; letter-spacing: 1.1px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.cal-section-title::before {
  content: ''; display: inline-block;
  width: 4px; height: 14px; border-radius: 2px;
  background: var(--am);
}
.cal-section-title .count {
  color: var(--dm); font-weight: 700;
  font-family: 'SF Mono', monospace;
}

.cal-narr-stack { display: flex; flex-direction: column; gap: 6px; }
.cal-narr-pill {
  display: inline-block;
  padding: 8px 14px; border-radius: 999px;
  background: var(--am4); border: 1px solid var(--am2);
  font-size: 13px; color: var(--tx); line-height: 1.5;
  width: fit-content; max-width: 100%;
}

/* ───── Q-20260605-103 Phase 3 — 야간 미국증시 요약 (DSN §3.6.9) ─────
   대표 20:43 catch "뉴스 요약이 종목카드 안으로 들어가면 안된다" + 20:45 "박스 크기·폰트 국내와 다르다":
   muted 박스 컨테이너 폐기 → 국내 .cal-section 와 동일 flat 구조 (배경/테두리/padding 없음).
   타이틀 → 미국발 뉴스 요약(.cal-section-title+.cal-narr-pill) → 지수 카드 list 가 모두 동일 DOM 깊이 sibling
   → 뉴스 칩이 박스 안에 갇히지 않고, 컨테이너 상속 차이도 제거되어 국내 칩과 computed style 동일. */
.nightly-us-summary {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 22px;  /* 국내 .cal-section margin-bottom:22px 정합 */
}
/* 섹션 헤더 줄(.nightly-us-head/.nightly-us-title/.nightly-us-datelabel) 제거됨
   (대표 2026-06-05 21:23 "'야간 미국증시' 로우 + '6/4 (현지 마감)' 없애라"). 섹션은 "미국발 뉴스 요약"
   .cal-section-title 부터 바로 시작. 부활 시 본 위치에 재추가. */
/* B안 (대표 2026-06-05 20:11~20:12 결정): 지수 카드 = 종목카드 동일형, 전폭 세로 나열
   (국내장 뉴스요약 → 종목카드 list 순서·구조 동일). 데스크탑·모바일 공통 1장씩 세로.
   카드 자체는 .cal-feature-card 클래스가 폰트·색·여백·radius 결정 (이질감 0, 대표 20:12).
   본 블록은 (a) 세로 list 컨테이너 + (b) 공유버튼 부재분 padding 회수 modifier 만. */
.nightly-us-cards {
  display: flex; flex-direction: column; gap: 6px;
}
/* 지수 전용 modifier — 종목카드와 동일 클래스 사용, 차이(공유버튼 부재)만 보정. 폰트 override 0건.
   대표 20:26 catch: 헤더 DOM 1:1 복제 — head-left 4-child(rank/당일캔들/스파크라인/candles20) 동일. */
.cal-feature-card--idx { background: var(--sf); }
.cal-feature-card--idx .cal-feature-head.v2 {
  padding-right: 12px;  /* 공유버튼 없음 → 종목카드 40px 우측 여백 회수 (국내는 공유버튼 absolute) */
}
/* 지수는 거래대금 rank 개념 부재 → 빈 rank 슬롯. 국내 rank('#NN') actual width 12px 와 동일 폭 고정(정렬 Δx=0). */
.cal-feature-card--idx .cal-trade-rank { width: 12px; flex-shrink: 0; }
.idx-card-arrow { font-size: 0.8em; margin-right: 1px; }

/* Q-20260608-140 (A안 페어 카드, DSN-001 §1~§4) — 미장 정규장/선물 별개 페어 카드 + 토글.
   삽입형(.idx-futures-row 카드 내 오버레이) 전면 폐기 (라이브 깨짐·NASDAQ/DOW 미노출 원인).
   토글: 섹션 [data-fut-view=regular|futures|both] → CSS 가시성 제어 (JS 재렌더 0). */

/* 토글 세그먼트(§2) — 섹션 단위 1개. 풀폭, 각 옵션 ≥44px 터치. */
.idx-fut-toggle {
  display: flex; gap: 0; margin: 0 0 12px;
  background: var(--bg2); border-radius: 10px; padding: 3px;
}
.idx-fut-toggle-btn {
  flex: 1 1 0; min-height: 38px; padding: 8px 4px;
  border: none; background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--dm);
  border-radius: 8px; transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.idx-fut-toggle-btn.active { background: var(--sf); color: var(--tx); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.idx-fut-toggle-btn:not(.active):hover { color: var(--tx2); }

/* 페어 그룹(§3) — 지수별 정규장+선물 묶음. "둘 다" 시 그룹 내 간격 < 그룹 간 간격. */
.idx-pair-group { display: flex; flex-direction: column; gap: 4px; }
.nightly-us-cards { gap: 10px; }  /* 그룹 간 간격(기본 6px → 10px, 페어 시각 분리) */

/* 토글 가시성 — data-fut-view 별 정규장/선물 카드 show/hide. Q-20260608-141(§2): "both" 제거(2-state). */
.nightly-us-summary[data-fut-view="regular"] .idx-card-futures { display: none; }
.nightly-us-summary[data-fut-view="futures"] .idx-card-regular { display: none; }

/* 선물 카드 식별(§1) — 종목카드 동일 골격 + 좌측 회색 hairline 보더(정규장 = plain).
   Q-20260608-141(§1): [선물] 배지 제거(제목 "NASDAQ 선물"과 중복) → 식별은 좌측 보더 + 제목 텍스트로만. */
.cal-feature-card--fut {
  border-left: 3px solid var(--g08);
}

/* 거래상태 도트(§4) — 거래중(초록)/마감(회색). 제목 줄 내. */
.idx-fut-status {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
  font-size: 12px; font-weight: 700; vertical-align: middle;
}
.idx-fut-status .idx-fut-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.idx-fut-status.open { color: var(--pos); }
.idx-fut-status.open .idx-fut-dot { background: #22C55E; }
.idx-fut-status.closed { color: var(--dm); }
.idx-fut-status.closed .idx-fut-dot { background: var(--dm); }
/* Q-20260610 — stale(>30분) 시 "마지막 거래중": 회색 톤(라이브 초록 단정 금지). 신선도는 지연칩이 별도 명시. */
.idx-fut-status.stale { color: var(--dm); }
.idx-fut-status.stale .idx-fut-dot { background: var(--dm); }
/* 갱신시각(§4) — namecell 아래 메타. "N분 전 기준" (stale 위장 금지). */
.idx-fut-age { font-size: 12px; color: var(--dm); font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
/* Q-20260608-145 — 선물 갱신 지연(30분 초과) 명시 칩. stale 를 숨기지 않고 정직 표시(FLR-AGT-002).
   앰버 톤(경고 위계, 추천 햇살색 아님). WCAG AA: #92560A on #FDF3DE ≈ 5.6:1. */
.idx-fut-delay {
  flex-shrink: 0; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 2px 5px; border-radius: 999px; color: var(--am); background: var(--am4);
}
.idx-fut-age--stale { color: var(--am); }
/* 선물 카드 namecell — 배지·상태가 제목 줄에 함께 들어가되 줄바꿈 허용(390px ellipsis 금지). */
.cal-feature-card--fut .cal-feature-namecell { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }

/* 선물 고지 각주(§4) — 섹션 1회 공통(카드마다 반복 ❌). */
.idx-fut-disclaimer {
  margin-top: 8px; font-size: 12px; line-height: 1.4;
  color: var(--dm-hi); font-style: normal; /* R28 P1② — 다크 4.46:1 → ≥4.5:1 */
}

/* 미국발 뉴스 요약 (대표 20:29) — 국내 "오늘의 뉴스요약" 템플릿 1:1: 타이틀 .cal-section-title(금색 바)
   + 칩 .cal-macro-chip 클래스 그대로 상속 (스타일 복제 0). R25 P1③에서 매크로 칩이 pill → 좌측
   골드 바 리스트형으로 전환됨 — 본 섹션도 동일 클래스 상속으로 자동 동행(국내/미국발 시각 1:1 유지).
   본 블록은 (a) strip 하단 간격 + (b) a 링크 밑줄 제거 + (c) 출처 약어 span 만. 폰트/색 override 0. */
.nightly-us-summary .cal-macro-strip { margin-bottom: 14px; }
.nightly-us-newschip { text-decoration: none; }
/* R55 P1-2 (픽셀 sweep DOC-20260614-JDG-004 — 미장 뉴스 칩 a 변형 304×38 터치 < 44) — 풀너비 칩이라
   ::after 오버레이는 인접 칩(세로 stack gap 5px) 충돌 → min-height 44 + flex 세로중앙(verdict 권고).
   anchor 변형(renderer.js:2100 비접힘 wire)만 한정 — details>summary 접힘 변형은 이미 44(L3867),
   generic .cal-macro-chip(국내 칩/span)은 무수정(FLR-20260428-TEC-001 한쪽 수정 경계). 시각 텍스트 위치
   불변(좌측 골드바 리스트 동일), 행 높이만 38→44(좌측 정렬 유지 위해 justify 미지정). */
a.cal-macro-chip.nightly-us-newschip {
  min-height: 44px;
  display: flex; align-items: center; flex-wrap: wrap;
  box-sizing: border-box;
}
.nightly-us-news-source {
  margin-left: 6px;
  font-size: 12px; font-weight: 800; color: var(--am);  /* 칩 #6B4A0A 톤 조화 (앰버 darker), 가독 대비 */
  opacity: 0.85; white-space: nowrap;
}
.cal-news-more { margin: -4px 0 14px; }
.cal-news-more > summary {
  display: inline-flex; min-height: 32px; align-items: center;
  cursor: pointer; color: var(--am); font-size: 12px; font-weight: 800;
  list-style: none; -webkit-tap-highlight-color: transparent;
}
.cal-news-more > summary::-webkit-details-marker { display: none; }
.cal-news-more > summary::after { content: '›'; margin-left: 4px; font-size: 13px; transform: rotate(90deg); }
.cal-news-more[open] > summary::after { transform: rotate(-90deg); }
.cal-news-more-strip { margin-top: 2px; }
/* R43 — 뉴스 확대 공통 컴포넌트 (더보기 버튼). R44 #1 — 슬라이드 변형 CSS 제거 (A 확정).
   색·위계 = 종전 .cal-news-more summary 와 동일 토큰 (다크모드 변수 상속, 대조 0건).
   R44 #4 — 터치 타깃 ≥44: min-height 32→44 (투명 상하 padding 6px) + margin 보정(-4→-10 / 14→8)
   = 텍스트 시각 위치·후속 흐름 픽셀 동일, hit bbox만 32→44. 배경·보더 없음이라 시각 크기 불변.
   위쪽 칩(strip 하단 margin 14px)과 잔여 간격 4px > 0 — 인접 링크 hit 충돌 0 (1심 상하 14px
   전면 확장안의 충돌 회피, 상하 6px 확장만). */
.cal-news-expand .cal-news-expand-step { margin-top: 6px; }
.cal-news-more-btn {
  display: inline-flex; min-height: 44px; align-items: center;
  margin: -10px 0 8px; padding: 6px 4px;
  border: 0; background: none; cursor: pointer;
  color: var(--am); font-size: 12px; font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.cal-news-more-btn::after { content: '›'; margin-left: 4px; font-size: 13px; transform: rotate(90deg); }

/* R25 P1⑧ — 히어로 "하루 단 한 종목" vs 후보 N장 첫 화면 충돌 해명 1줄 (카드 리스트 직상). */
.cal-trade-list-note {
  margin-top: 10px;
  font-size: 12px; font-weight: 600; color: var(--tx2);
  letter-spacing: -0.2px; line-height: 1.5;
}
.cal-trade-list-note b { color: var(--am); font-weight: 800; }
.cal-trade-list { display: flex; flex-direction: column; gap: 6px; }
/* R48 W2-5 (조니 R46 2심 W2 — 데스크탑 2열) — ≥1024px 종목 카드 리스트 2열 grid.
   998px 단열(카드 풀폭)의 공간 낭비 해소. align-items:start — 카드 펼침(expanded)이 행 형제를
   세로로 늘리지 않게. 추천 디바이더(.cal-pm320-pick-divider)는 풀폭 span. 단독 카드 모드 제외.
   미장/KR 지수 카드(.nightly-us-cards)도 동일 2열 (6카드 998px 스택 해소). */
@media (min-width: 1024px) {
  .cal-section:not(.cal-section--single-card) .cal-trade-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: start;
  }
  .cal-section:not(.cal-section--single-card) .cal-trade-list > .cal-pm320-pick-divider { grid-column: 1 / -1; }
  .cal-section:not(.cal-section--single-card) .cal-trade-list > * { min-width: 0; }
  .nightly-us-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: start;
  }
}
.cal-trade-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto 16px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  /* R55 P2-6 root fix (twin of .cal-feature-card) — theme 토글 시 --bg2 var() 재해석을
     background transition 이 보류 → stale paint. background 를 transition 대상에서 제외. */
  background-color: var(--bg2);
  font-size: 13px;
}
.cal-trade-candle { display: flex; align-items: center; justify-content: center; }
.cal-trade-row:hover { background-color: var(--am4); }
.cal-trade-rank {
  font-size: 12px; color: var(--dm); font-weight: 800;
  font-family: 'SF Mono', monospace;
}
.cal-trade-name-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.cal-trade-name { font-weight: 800; color: var(--tx); letter-spacing: -0.2px; }
.cal-trade-amount {
  font-size: 12px; color: var(--am); font-weight: 800;
  font-family: 'SF Mono', monospace;
}
.cal-close-price {
  font-size: 12px; color: var(--tx); font-weight: 700;
  font-family: 'SF Mono', monospace; text-align: right; min-width: 60px;
}
.cal-trade-pct {
  font-size: 12px; font-weight: 800;
  font-family: 'SF Mono', monospace;
  text-align: right; min-width: 56px;
}
.cal-trade-pct.up { color: var(--up); }
.cal-trade-pct.down { color: var(--down); }
.cal-ind-chip {
  /* R25 P1⑤+⑥ — 테마 칩 9px → 12px 플로어 + radius 4px(square 소수파) → 999px(pill 다수파)
     리듬 통일. 높이 ≈ 22px (타 소형 칩 21~23px 대역 수렴). */
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(25,88,199,0.10); color: var(--down);
  position: relative;
}
/* REQ-P1 #7 (2026-04-29): chip 툴팁 — leaf chip이 속한 path 전체 표시 */
.cal-ind-chip[data-tooltip] { cursor: help; }
.cal-ind-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(33,37,42,0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
}
.cal-ind-chip[data-tooltip]:hover::after {
  opacity: 1;
}
/* R45 #1 (조니 2심, 2026-06-12) — 모바일(hover:none) 탭 토글. 종전 :active 순간표시 + chip-tip-active
   ::after(토글 JS 전무 — dead CSS)는 폐기: ::after 는 칩 중앙 고정이라 뷰포트 경계 보정 불가(클리핑).
   탭 툴팁은 JS 팝오버(_wireTermTips 확장: 경계 보정·동시 1개·재탭/바깥 탭/스크롤 닫힘)가 전담,
   chip-tip-active 는 "지금 열린 칩" 시각 마커로 재정의(틴트 1단 상향). hover 기기 :hover::after 불변. */
@media (hover: none) {
  .cal-ind-chip[data-tooltip]::after { display: none; }
  .cal-ind-chip[data-tooltip].chip-tip-active { background: rgba(25,88,199,0.18); }
}
.cal-theme-sep {
  color: var(--dm); font-size: 12px; font-weight: 300; margin: 0 5px; vertical-align: middle; /* R26 P1① 10→12px */
}

/* 특징주 카드 — cal-trade-row와 동일 배경·색상 통일 */
.cal-feature-list { display: flex; flex-direction: column; gap: 4px; }
.cal-feature-card {
  border-radius: 10px;
  /* R26 P1⑥ — --lu/--pm320-pick 변종의 4px 좌측 액센트 보더로 카드 간 내부 콘텐츠
     (rec-mark 등) x좌표가 ±4px 흔들림 → 기본 카드에 동일 폭 투명 보더로 x 통일. */
  border-left: 4px solid transparent;
  overflow: hidden;
  /* R55 P2-6 root fix — data-theme 토글은 --bg2 커스텀 프로퍼티만 바꾼다. CSS transition 이
     background(또는 background-color)에 걸려 있으면 Chromium 은 custom-property 변경으로 인한
     var() 재해석을 transition 종료까지 보류 → stale paint(reflow 강제해도 미해소, 라이브 실측).
     ∴ background 를 transition 대상에서 제외 → 테마 전환 즉시 repaint. box-shadow transition 유지.
     hover(--am4) 는 즉시 전환(터치 우선·0.12s 페이드 미관 < 테마 정확성). .cal-trade-row 동일. */
  background-color: var(--bg2);
  transition: box-shadow 0.3s;
  position: relative; /* 공유 버튼 absolute 배치용 */
  scroll-margin-top: calc(88px + env(safe-area-inset-top, 0px));
}
@media (max-width: 640px) {
  .cal-feature-card { scroll-margin-top: calc(100px + env(safe-area-inset-top, 0px)); }
}
.cal-feature-card:hover { background-color: var(--am4); }

/* 공유 버튼 — 카드 우측 상단 absolute (레이아웃 훼손 없음) */
.cal-share-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--dm);
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cal-share-btn:hover,
.cal-share-btn:focus-visible {
  background: rgba(0,0,0,0.04);
  color: var(--tx);
  border-color: var(--bd);
  outline: none;
}
.cal-share-btn:active { transform: scale(0.94); }
.cal-share-btn svg { display: block; }
/* R28 P1④ — 공유 버튼 시각 26~28px 유지, 터치 영역만 44×44 투명 오버레이 확장.
   R44 #4 — overflow:hidden 클립 문제 — ::after top/right 음수값이 카드 밖으로 나가 클립됨.
   R46 P1-1 (조니 단정 "share 28×28 동시 44px") — 32 cap 해제, 실효 44×44 복원.
   2026-06-17 대표 catch (트랙A) — 중심(translate -50%,-50%) anchor 방식도 버튼이 카드
   우상단 코너에 붙어 있어 overflow:hidden 에서 코너 3~4px 클립(실효 ≈ 40×41) → WCAG 44 미달.
   → 코너 anchor 로 교체: 버튼 우상단을 오버레이 우상단에 고정하고 좌·하(카드 내부) 방향으로만
   44px 확장. 카드 경계를 넘지 않으므로 클립 0, 실효 44×44 보장.
   하단 (?) 팁과의 중첩 띠는 stacking 으로 해소: share(z-index 2) > tip ::before(z-index 1). */
.cal-share-btn::after {
  content: '';
  position: absolute;
  /* 버튼(26px)을 오버레이(44px) 우상단에 정렬 → 18px 만큼 좌·하로만 확장 (카드 안쪽). */
  top: calc(50% - 13px);
  right: calc(50% - 13px);
  width: 44px; height: 44px;
}
@media (max-width: 640px) {
  .cal-share-btn { top: 4px; right: 4px; width: 28px; height: 28px; }
  .cal-share-btn svg { width: 15px; height: 15px; }
  /* 모바일 버튼 28px → 오버레이 우상단 정렬 offset = 14px. */
  .cal-share-btn::after { top: calc(50% - 14px); right: calc(50% - 14px); }
}

/* 카드 강조 (해시 진입 시 1.5~2초 글로우) */
.cal-feature-card.card-highlight {
  animation: cardHighlight 2s ease-out;
}
@keyframes cardHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(197, 57, 57, 0.0); background: var(--bg2); }
  15%  { box-shadow: 0 0 0 3px rgba(197, 57, 57, 0.45); background: var(--am4); }
  60%  { box-shadow: 0 0 0 3px rgba(197, 57, 57, 0.25); background: var(--am4); }
  100% { box-shadow: 0 0 0 0 rgba(197, 57, 57, 0.0); background: var(--bg2); }
}

/* 공유 토스트 — 하단 고정, fade in/out */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(26, 29, 38, 0.94);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  z-index: 9999;
  max-width: calc(100vw - 48px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .share-toast { bottom: 24px; font-size: 12.5px; padding: 9px 16px; }
}
.cal-feature-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--card-indent-header) 2px;
  font-size: 13px;
}
.cal-feature-nums {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px;
  padding: 2px 12px 4px var(--card-indent-nums);
  font-size: 12px;
}
.cal-feature-nums > * { flex-shrink: 0; font-size: 12px; font-weight: 700; font-family: 'SF Mono', monospace; }
.cal-feature-nums .cal-close-price { min-width: 0; }
.cal-feature-nums .cal-feature-pct { min-width: 0; text-align: left; }
.cal-feature-nums .cal-trade-amount { font-size: 12px; color: var(--am); }
@media (max-width: 640px) {
  .cal-feature-nums { padding: 2px 6px 6px var(--card-indent-nums); gap: 8px; }
}
.cal-feature-name {
  font-weight: 800; color: var(--tx); letter-spacing: -0.2px;
  font-size: 14px;
}
.cal-feature-namecell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.cal-feature-pct {
  font-size: 12px; font-weight: 800;
  font-family: 'SF Mono', monospace;
  text-align: right; min-width: 56px;
}
.cal-feature-pct.up { color: var(--up); }
.cal-feature-pct.down { color: var(--down); }
.cal-feature-body {
  padding: 0 12px 8px var(--card-indent-body);
  display: flex; flex-direction: column; gap: 3px;
  border-top: 1px dashed rgba(0,0,0,0.06);
  margin-top: 2px;
}
.cal-feature-summary { text-align: left; }
.cal-feature-summary:empty { display: none; }
.cal-feature-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
/* v4: 사유/공시 영역이 모바일에서 잘리던 문제 해결.
   400px 고정 → 1600px (사실상 무한). 데스크탑에서도 표 길어지면 잘렸음. */
.cal-feature-card.expanded .cal-feature-details {
  max-height: 1600px;
  overflow: visible;
}
@media (max-width: 640px) {
  .cal-feature-card.expanded .cal-feature-details {
    max-height: 2400px;
  }
}
/* REQ-042 — 접기 버튼 full-width 재설계 (대표 발화 2026-04-28 02:14 KST).
   본질: 좌측 작은 칩 = 엄지 정확 누름 어려움 + 글자 가독성 부족.
   해결: full-width + 가운데 정렬 + 큰 padding + 진한 톤 (Apple HIG 44px 정합).
   AGENT.md §10 너무 밝은 회색 회피. */
/* REQ-045 §D — 접기 버튼 두께 정정 + chevron 폐기 (대표 발화 02:20) +
   데스크탑 가독성 정정 (대표 발화 02:25). 호버 의존성 부재 확인 — span/div 차이가 원인.
   span(line 1177) inline에서 width:100% 무효 → 작은 박스 → 흐릿. div(line 1262)는 정상.
   해결: 마크업 div 통일 + border 진한 톤(#64748B) + font-weight 600.
   chevron 폐기: 텍스트만 "상세 보기"/"접기" 토글 (디자인 깔끔). */
.cal-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  width: 100%;
  position: relative;            /* R49 E1 — ::after 투명 히트 오버레이 기준점 */
  padding: 5px 12px;             /* REQ-061 — page-eyebrow 정합 (5/16 → 5/12, 대표 발화 11:43) */
  min-height: 36px;              /* DSN-001 §3.1 옵션 squircle (2026-06-03 21:31 KST design-lead 4차 권고, 대표 verbatim 21:28 "애플의 스쿼클 같이") — 28↔44 산술 중간 */
  border-radius: 12px;           /* DSN-001 §3.1 옵션 squircle — pill 9999px → 12px (Apple squircle CSS 근사, 36px 높이 기준 33%) */
  background: var(--pill-sf);     /* R15: 라이트 #F8FAFC / 다크 함몰 표면 */
  border: 1px solid var(--pill-bd); /* REQ-045 §D — #94A3B8 → #64748B (데스크탑 가독성) / R15 토큰화 */
  font-size: 12px;                /* 풀폭 버튼이라 가독성 우선 (eyebrow 10px와 차등) */
  color: var(--pill-tx);
  font-weight: 600;               /* REQ-045 §D — 500 → 600 (데스크탑 가독성) */
  letter-spacing: 0.01em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  user-select: none;
  margin-top: 12px;
  text-align: center;
}
.cal-detail-toggle:hover {
  background: var(--pill-sf-hover);
  border-color: var(--tx2);          /* hover 진한 톤 보강 */
  color: var(--pill-tx);
}
.cal-detail-toggle:active { background: var(--pill-sf-active); }
.cal-detail-toggle:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
/* R49 E1 (조니 2심 단정 2 — 토글 268×40 < 44) — 시각(squircle 36/40px = DSN §3.1 design-lead 4차
   권고 보존) 불변, 터치존만 ≥44px 투명 오버레이 확장. .cal-term-tip::before(R28 P1④)·
   .cal-share-btn::after(R46 P1-1) 동형 패턴 — 수직 중심 정렬, 풀폭이라 가로는 자체 충족. */
.cal-detail-toggle::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
@media (max-width: 640px) {
  /* REQ-061 — 모바일도 page-eyebrow 정합 (padding 5/12, 대표 발화 11:43)
     DSN-001 §3.1 옵션 squircle (2026-06-03 21:31 KST) — 모바일 터치 정확도 절충 min-height 40px (design-lead 4차 권고). */
  .cal-detail-toggle {
    padding: 5px 12px;
    min-height: 40px;
  }
}
.cal-toggle-text {
  font-size: 12px;
  letter-spacing: 0.2px;
}
/* REQ-046 — font-size:0 + ::after content trick 폐기.
   본질: 데스크탑 layout에서 부모 font-size:0 + ::after content가 baseline·padding 어색하게 렌더 → 텍스트 흐릿/누락 회귀.
   해결: JS textContent 직접 변경 (renderer.js 토글 핸들러). aria-label 동시 갱신.
   대표 발화 02:34 KST: "여전히 데스크탑 희미함" — 본질 정정. */
.cal-toggle-summary {
  font-size: 12px;
  color: var(--dm);
  line-height: 1.5;
  white-space: normal;
  overflow: visible;
}
/* REQ-045 §D — chevron 폐기 (대표 발화 02:20: "특수문자 너무 작고 위치 바뀜 디자인 해친다").
   CSS rule은 보존 (마크업 잔존 시 안전 폴백) but display:none. */
.cal-chevron {
  display: none;
}
.cal-feature-card.expanded .cal-chevron {
  display: none;
}
/* REQ-005 5/4 v188: (당시 라이트 고정) → R15 다크모드 정식 도입 후 --pill-* 토큰으로 라이트/다크 양분기.
   라이트 default(#F8FAFC) 유지 + 다크는 함몰 표면(--dk-pill-sf)으로 치환(순백 알약 일소). */

/* REQ-030 §1 — 헤더 공시 배지 (SPEC-001 §III.4). 펼침 동기 제공.
   REQ-042 (대표 발화 2026-04-28 02:08 KST): 너무 밝은 회색 → 가독성 부족.
   bg #F1F5F9 → #E2E8F0 / color #475569 → #1E293B / 1px border 추가 (선명도).
   AGENT.md §10 너무 밝은 회색 회피. WCAG AA contrast >=4.5:1 정합. */
.cal-disclosure-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;            /* REQ-045 §A — 헤더 배지 통일 */
  font-weight: 600;
  letter-spacing: 0.01em;     /* REQ-045 §A — letter-spacing 통일 */
  color: var(--badge-disc-tx);
  background: var(--badge-disc-bg);
  border: 1px solid var(--badge-disc-bd);
  padding: 2px 8px;
  border-radius: 999px;  /* REQ-031 — pill 통일 */
  /* REQ-062 — margin-left 제거. 부모 flex gap 사용 (들여쓰기 결함 fix). */
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  vertical-align: middle;
}
/* REQ-035 §B — content '📋' 제거. REQ-032 텍스트 링크형 정합 (SPEC-001 §IX#10).
   ::before 자체를 비워 마진/레이아웃 영향 없음. */
.cal-disclosure-badge:hover {
  background: var(--bd);
  color: var(--tx);
  border-color: var(--dm);
}
/* REQ-039 — 강세 배지 (헤더, 종목명 우측, pickBadge 옆).
   대표 발화 (2026-04-28 01:30 KST): 키움 강세 수식 + "강세" 배지 + 연속 카운트.
   햇살 정체성 그라데이션 (AGENT.md §2.3 + REQ-035-rev 정합). 글자 #92400E 진한 호박색.
   pill 9999px (REQ-031 정합). */
.cal-bullish-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;            /* REQ-045 §A — 헤더 배지 통일 */
  font-weight: 600;
  letter-spacing: 0.01em;     /* REQ-045 §A — letter-spacing 통일 */
  color: var(--am);
  background: linear-gradient(90deg, var(--am4), var(--am3));
  border: 1px solid var(--am3);
  padding: 2px 8px;
  border-radius: 999px;
  /* REQ-062 — margin-left 제거. 부모 .cal-feature-badges flex gap 사용 (들여쓰기 결함 fix). */
  vertical-align: middle;
}

/* DOC-20260603-DSN-001 §2 / §7.1 — PM320 PICK 배지 (헤더, 카드 첫 자리).
   햇살 정체성 그라데이션 (AGENT.md §2.3 정합). 강세보다 1단계 강조 (weight 700).
   라벨 "오늘 PM320 추천" — 영어 회피 (DSN-001 §6 의미 명확성 4축 §1 정합). */
.cal-pm320-pick-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--am);
  background: linear-gradient(90deg, var(--am4), var(--am3));
  border: 1px solid var(--am3);
  padding: 2px 10px;
  border-radius: 999px;
  vertical-align: middle;
}
.cal-pm320-pick-icon { color: var(--am); flex-shrink: 0; }
.cal-pm320-pick-label { display: inline; }

/* DSN-frontend §3.6.8 (2026-06-05) — PM320 추천 부재(보류일) 안내 라인.
   매크로/내러티브 칩(amber: --am4/--am2)과 색을 구분하는 중립 슬레이트(--neu-tx-aa/--neu-bg).
   경보가 아닌 정보성 빈 상태 톤.
   R27 P0-3 (조니 2심) — .cal-pm320-no-data (임의 결측 날짜 공통 "데이터 없음" 상태) 동일 톤 공유.
   R27 P1① — 텍스트 --neu 3.92:1 (라이트 AA 미달) → --neu-tx-aa 5.84:1 (FLR-20260428-TEC-001
   한쪽만 fix 동형 예방: wr-asof 와 같은 토큰·같은 배경 → 동시 교정). */
.cal-pm320-no-pick,
.cal-pm320-no-data {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--neu-bg);
  border: 1px solid var(--bd);
  color: var(--neu-tx-aa, #525F78);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.cal-pm320-no-pick-icon,
.cal-pm320-no-data-icon { flex-shrink: 0; opacity: 0.85; }

/* R28 P0-2 (조니 2심, 2026-06-11) — 휴장일 뷰 한 줄 안내. no-pick/no-data 와 동일 중립 톤
   (정보성 상태, 경보 아님). 휴장일 뷰에서는 본 라인 외 종목 헤더·카드·"수집되지 않은 날짜" 미렌더. */
.cal-pm320-holiday {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--neu-bg);
  border: 1px solid var(--bd);
  color: var(--neu-tx-aa, #525F78);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.cal-pm320-holiday-icon { flex-shrink: 0; opacity: 0.85; }

/* PM320-D6 P0 — 장중 "오늘 추천 15:20 공개" 안내 배너 (손님 시점 혼란 해소).
   PM320 브랜드 골드(--am)톤 — "진짜 추천이 곧 온다"는 기대 신호. no-pick(중립 슬레이트)과 구분. */
.cal-pm320-pending {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--am4);
  border: 1px solid var(--am3);
  color: var(--tx2);
}
.cal-pm320-pending-icon { flex-shrink: 0; margin-top: 1px; color: var(--am); opacity: 0.9; }
.cal-pm320-pending-body { min-width: 0; }
.cal-pm320-pending-title { font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--tx); }
.cal-pm320-pending-title b { color: var(--am); font-weight: 800; }
.cal-pm320-pending-sub {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dm-hi); /* R28 P1② — 다크 amber tint 3.6:1 → ≥4.5:1 (라이트 동일값 무회귀) */
}
.cal-pm320-pending-cd-wrap {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.cal-pm320-pending-cd-label { color: var(--dm-hi); font-weight: 600; } /* R28 P1② */
.cal-pm320-pending-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--am);
  background: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--am3);
}
/* R25 P0-3 (조니) — 다크 카운트다운 칩 대비 1.69:1 (#EBC25E on #fff 하드코딩) → 8.88:1
   (--am2 #F4D27A on --am4 #3A3018, WCAG AA 4.5:1 통과). 라이트 무영향(#7E5E0E on #fff 유지). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal-pm320-pending-countdown {
    background: var(--am4); color: var(--am2); border-color: var(--am3);
  }
}
:root[data-theme="dark"] .cal-pm320-pending-countdown {
  background: var(--am4); color: var(--am2); border-color: var(--am3);
}
.cal-pm320-pending-soon { font-weight: 700; color: var(--am); font-size: 12px; }

/* R28 P1⑤ (조니 2심, 2026-06-11) — INTRADAY 헤더 직하 portal 카운트다운 칩 (fold 심장).
   pending 배너와 같은 골드 톤 가족 — 카운트다운 숫자 칩은 .cal-pm320-pending-countdown 상속
   (라이트/다크 대비 기존 검증값 그대로, FLR-20260428-TEC-001 한쪽 코드 양끝 누락 예방). */
.cal-pm320-portal-cd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--am4);
  border: 1px solid var(--am3);
  color: var(--am);
}
.cal-pm320-portal-cd-label { font-size: 13px; font-weight: 700; color: var(--tx2); }
.cal-pm320-portal-cd-label b { color: var(--am); font-weight: 800; }

/* R28 P2 (조니 2심) — D+0/D+N 기준 시점 1줄 정의 (진행중 추천 카드 한정).
   R48 라이더-1 — D+0 NXT 캡션(.cal-pm320-today-rec-nxtnote 별도 클래스 없이 본 클래스 재사용:
   "잠정 = KRX 정규장 종가 기준 · NXT 애프터 미반영" 1줄도 동일 위계·토큰). */
.cal-pm320-today-rec-dnote {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--wr-basis-tx, #5E6776);
  word-break: keep-all;
}
/* R48 W2-4 (조니 R46 2심 W2 — 픽 박스 면책 1줄 + 공유 워터마크 단일 fix) — 추천 카드 푸터.
   면책(좌)·브랜드 워터마크(우) 한 줄: 픽 박스 스크린샷 공유 시 면책·출처가 함께 동반되는 구조.
   토큰 전부 다크 override 보유 (정보 손실 0). */
.cal-pm320-today-rec-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--bd);
}
.cal-pm320-today-rec-disclaimer {
  font-size: 11px; font-weight: 500; line-height: 1.45;
  color: var(--wr-basis-tx, #5E6776); word-break: keep-all;
}
.cal-pm320-today-rec-brand {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1px;
  color: var(--am); white-space: nowrap; flex-shrink: 0;
}
/* R49 #2 "왜 이 종목" 칩 제거 (대표 catch 2026-06-17) — JS 소비처(_whyHtml)·템플릿 제거에 맞춰
   .cal-pm320-today-rec-why* 룰 동반 삭제(dead CSS 0). 거래대금/테마는 풀 종목카드에 잔존. */
/* R49 #3 (다관점 판정 #7 — 초보, 2026-06-14) — grid 용어(익절·물타기·만기) 인라인 미니 정의 1줄.
   툴팁(?) 의존 없이 항상 보임. 절제 — 가장 작은 보조 텍스트(11px)·muted 토큰. 카드당 1회. */
.cal-pm320-today-rec-terms {
  margin-top: 7px;
  font-size: 11px; font-weight: 500; line-height: 1.5;
  color: var(--dm-hi);
  word-break: keep-all; overflow-wrap: break-word;
}

/* R28 제거① (조니 2심) — 테마트리 동일 종목 구성 병합 행의 형제 테마명 칩. */
.theme-tree-merged-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; min-width: 0; }
.theme-tree-merged-chip {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tx2);
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 0 6px;
  white-space: nowrap;
}

/* PM320-D6 (2026-06-10) — 카운트다운 슬롯의 "오늘의 추천" 전용 요약 카드.
   카운트다운 배너(.cal-pm320-pending)와 동일 골드(--am)톤·동일 슬롯. 픽 확정 시 노출. */
.cal-pm320-today-rec {
  margin-bottom: 12px;
  padding: 13px 15px 14px;
  border-radius: 12px;
  background: var(--am4);
  border: 1px solid var(--am3);
  box-shadow: 0 1px 2px rgba(180, 130, 20, 0.08);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.cal-pm320-today-rec-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
  min-width: 0;
}
.cal-pm320-today-rec-star { display: inline-flex; color: var(--am); flex-shrink: 0; }
.cal-pm320-today-rec-headlabel {
  font-size: 12px;
  font-weight: 800;
  color: var(--am);
  letter-spacing: 0.01em;
}
.cal-pm320-today-rec-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--tx);
  margin-left: 2px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.cal-pm320-today-rec-code {
  font-size: 12px;
  font-weight: 600;
  /* R13 P1 WCAG: var(--dm) #8B95A8 on 카드 bg var(--am4) = 2.81 → 토큰 (light 5.69 / dark 7.78:1) */
  color: var(--rec-code-tx);
  font-variant-numeric: tabular-nums;
}
.cal-pm320-today-rec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  /* R13 P1: 익절 칸(라벨+값+물타기 시·조건부 3줄)과 1줄 칸의 높이가 달라도 라벨이 같은
     상단 baseline에 정렬되도록 start 정렬(stretch 시 짧은 칸 내용이 가운데로 떠 어긋나 보임). */
  align-items: start;
}
.cal-pm320-today-rec-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  background: var(--inset-sf);   /* R15: 라이트 0.55 흰 / 다크 함몰(#202227) */
  border: 1px solid var(--inset-bd);
  border-radius: 8px;
  min-width: 0;
}
.cal-pm320-today-rec-k {
  font-size: 12px;
  font-weight: 700;
  /* R13 P0 대비: 라벨 --dm #8B95A8(2.78:1 on cell) → #5E6776(5.53:1, WCAG AA). */
  color: var(--tx2);
  letter-spacing: 0.01em;
}
/* R13 P1: 익절가가 물타기 체결 시 평단 하락으로 바뀌므로 단정 표기 회피 — "(조건부)" 명시.
   tpAfter(물타기 시 익절가) 존재 시에만 노출(대표 20:51 catch). */
.cal-pm320-today-rec-k-cond {
  margin-left: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--section-summary);
}
.cal-pm320-today-rec-v {
  font-size: 13px;
  font-weight: 800;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 한국장 관습: 익절(가격 상승)=빨강, 물타기(가격 하락)=파랑 */
.cal-pm320-today-rec-v--up { color: var(--up); }
.cal-pm320-today-rec-v--dn { color: var(--down); }
/* 익절 칸 보조 — 물타기 체결 시 평단 하락으로 바뀌는 익절가 병기 (풀 카드 SSOT 동일). */
.cal-pm320-today-rec-v-sub {
  font-size: 12px;
  font-weight: 600;
  /* R13 P0 대비: --dm 2.78:1 → #5E6776 5.53:1 (WCAG AA). */
  color: var(--tx2);
  font-variant-numeric: tabular-nums;
  /* R25 P1② — nowrap+ellipsis 가 좁은 셀에서 "물타기 후 익절가 250,2…" 가격 절단 유발
     → 줄바꿈 허용으로 가격 전체 노출(정보 손실 0). */
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
}
.cal-pm320-today-rec-result {
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
  background: var(--inset-sf);   /* R15: 라이트 0.6 흰 / 다크 함몰 */
  color: var(--tx2);
  font-variant-numeric: tabular-nums;
}
.cal-pm320-today-rec-result--profit { color: var(--pos); background: rgba(26, 127, 75, 0.10); }
.cal-pm320-today-rec-result--loss { color: var(--neg); background: rgba(192, 57, 43, 0.10); } /* R13 P1 대비: #C0392B(4.39:1) → #B8302E(4.84:1, WCAG AA). */
.cal-pm320-today-rec-result--running { color: var(--am); }
.cal-pm320-today-rec-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 11px;
  position: relative;            /* R49 E1 — ::after 투명 히트 오버레이 기준점 */
  padding: 6px 12px;
  border: 1px solid var(--inset-bd);
  border-radius: 8px;
  background: var(--inset-sf);   /* R15: 라이트 0.7 흰 / 다크 함몰 */
  color: var(--am);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cal-pm320-today-rec-more:hover { background: var(--pill-sf-hover); }
.cal-pm320-today-rec-more:focus-visible { outline: 2px solid var(--am); outline-offset: 2px; }
/* R49 E1 (조니 2심 단정 2 — "상세 보기" CTA 85.9×29 < 44, 풀패널 corroborate) — 시각 불변,
   터치존 ≥44px 투명 오버레이 (.cal-detail-toggle::after R49 동형). 상부 margin 11px 내 ±7.5px 확장
   — 위 결과 strip(비인터랙티브 텍스트)·아래 박스 패딩만 점유, 인접 인터랙티브 충돌 0 (실측). */
.cal-pm320-today-rec-more::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
@media (max-width: 900px) {
  .pm320-prepick-portal {
    align-items: stretch;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .cal-pre-prev-pick--card,
  .cal-pre-prev-pick-holdings {
    width: 100%;
    max-width: none;
  }
  .cal-pre-prev-pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cal-pre-prev-pick-v {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }
  /* 만기(날짜)·가격이 좁은 뷰포트에서 잘리는 문제 → 2×2 그리드로 전환(값 전체 노출). */
  .cal-pm320-today-rec { padding-left: 12px; padding-right: 12px; }
  .cal-pm320-today-rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .cal-pm320-today-rec-cell { padding: 7px 9px; }
  .cal-pm320-today-rec-v { font-size: 13px; }
}

/* PM320-D6 — 4/8 이후 트랙레코드 승률 카드 (대표 결정: 수익률 X, 승률만).
   PICK 골드(--am) 강조 — "검증된 성적" 신뢰 신호. 손실 건수 병기 (정직성). */
.cal-pm320-winrate {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  /* 그라데이션 top을 토큰화 — 다크에서 하드코딩 #FFFDF6(밝은 흰색)이 카드 상단을 밝게 깨뜨림 (DOC-20260610-DSN-001) */
  background: linear-gradient(180deg, var(--wr-card-top, #FFFDF6) 0%, var(--am4) 100%);
  border: 1px solid var(--am3);
}
.cal-pm320-wr-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-pm320-wr-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--am);
}
/* 승률 카드 3지표 grid. */
.cal-pm320-wr-trio {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cal-pm320-wr-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-pm320-wr-cell-k {
  font-size: 12px; font-weight: 700; color: var(--tx2);
  display: inline-flex; align-items: center; gap: 2px;
  white-space: nowrap; /* R28 P1③ — 라벨 1줄 고정 → 3셀 값(v)·sub 행 baseline 정렬 유지 */
}
.cal-pm320-wr-cell-v { font-size: 18px; font-weight: 800; color: var(--tx); letter-spacing: -0.01em; }
/* R27 P1③ (조니 2심, 2026-06-11) — 선택적 색 위계 제거. 종전 승률만 골드(--am)·낙폭만 적색(--neg)
   = 유리한 숫자(승률)에 최대 주목색을 주는 비대칭 강조. 세 지표 값 색 동등(var(--tx)) — 굵기·크기
   동등(R26)에 색까지 통일. 클래스는 의미 마커로 잔존(JS 무변경, 무회귀). */
.cal-pm320-wr-cell-v--rate { color: var(--tx); }
.cal-pm320-wr-cell-v--neg { color: var(--tx); }
/* R27 P1⑤ — 3셀 sub 구조 통일 + margin-top:auto 로 sub 바닥 정렬(셀 높이 차이에도 바닥 리듬 일치). */
/* R28 P1③ (조니 2심) — sub "낙/폭" 단어 중간 절단 봉쇄: keep-all(어절 단위 줄바꿈)
   + overflow-wrap 안전망. margin-top:auto(셀 바닥 정렬)와 함께 3셀 baseline 리듬 유지. */
.cal-pm320-wr-cell-sub {
  font-size: 12px; font-weight: 500; color: var(--wr-basis-tx, #5E6776); margin-top: auto;
  word-break: keep-all; overflow-wrap: break-word;
}
@media (max-width: 480px) {
  .cal-pm320-wr-trio { gap: 6px; }
  .cal-pm320-wr-cell-v { font-size: 16px; }
}
/* 과거 날짜 선택 시 — '선택일 시점'이 아닌 'generated_at 기준 누적'임을 명시(중립 슬레이트). */
.cal-pm320-wr-asof {
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--neu-bg);
  font-size: 12px; /* R26 P1① 10.5→12px */
  font-weight: 500;
  line-height: 1.45;
  /* R27 P1① (조니 2심) — --neu 3.92:1 (라이트 AA 미달) → --neu-tx-aa #525F78 5.84:1. */
  color: var(--neu-tx-aa, #525F78);
}
.cal-pm320-wr-asof b { font-weight: 700; }
.cal-pm320-wr-stats {
  margin-top: 7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 6px;
  /* R13 P0 위계: 표본수(총 N픽)·익절·손실 건수를 승률과 동등 위계로 상향(11.5→13px, 700).
     승률 숫자만 도드라지고 표본·손실이 묻히던 문제(손익 근거가 작게 읽힘) 해소. */
  font-size: 13px;
  font-weight: 700;
}
.cal-pm320-wr-sep { color: var(--dm); opacity: 0.6; }
.cal-pm320-wr-stat { color: var(--tx2); }
.cal-pm320-wr-win { color: var(--pos); }
.cal-pm320-wr-loss { color: var(--neg); }
/* R43 P1⑤ — 종목당 계좌 1/12 분할 운용 고지 1줄 (성적 해석 전제 조건 — 손실 체감 왜곡 방지). */
.cal-pm320-wr-alloc {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tx2);
  word-break: keep-all;
}
.cal-pm320-wr-running { color: var(--dm-hi); } /* R28 P1② */
/* R49 #1 (다관점 판정 #7 — 법무·금감원, 2026-06-14) — 의무 고지 1줄. 성적 trio·백테스트 사이에
   항상 노출(details 안에 숨기지 않음). 중립 슬레이트 박스 + ⓘ 아이콘. 토큰 색은 라이트/다크 AA. */
.cal-pm320-wr-disclaimer {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  background: var(--neu-bg);
  border: 1px solid var(--bd);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--neu-tx-aa, #525F78);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cal-pm320-wr-disclaimer-ico { flex-shrink: 0; margin-top: 2px; color: var(--neu-tx-aa, #525F78); }
.cal-pm320-wr-disclaimer b { font-weight: 700; color: var(--tx2); }
/* R63 P1-2 (조니 2심, 2026-06-16) — 승률 trio 직하 손익 비대칭 1줄. 거짓 정밀성·꼬리리스크 차단.
   trio 와 한 묶음(margin-top 작게)으로 단독 크롭 시에도 함께 보이게. 중립 슬레이트 박스 + ⚠ 아이콘.
   최대 단일 손실 숫자만 --neg(한국식 하락 파랑)로 강조 — 비대칭 시각화. 색 토큰만 사용(다크 자동 AA). */
.cal-pm320-wr-asym {
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--neu-bg);
  border: 1px solid var(--bd);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--neu-tx-aa, #525F78);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cal-pm320-wr-asym-ico { flex-shrink: 0; margin-top: 1px; color: var(--neg); }
.cal-pm320-wr-asym b { font-weight: 800; color: var(--tx2); }
.cal-pm320-wr-asym b.cal-pm320-wr-asym-loss { color: var(--neg); }
.cal-pm320-wr-asym-ratio { font-weight: 700; color: var(--neu-tx-aa, #525F78); white-space: nowrap; }
/* R63 P1-5 (조니 2심) — eyebrow 옆 "기록 동결" 칩. 진짜 해자(사후 불변)를 첫 방문자가 읽게.
   작은 중립 슬레이트 칩 + 자물쇠. 위계는 보조(eyebrow 보다 약함) — 강조 아닌 신뢰 표명. */
.cal-pm320-wr-frozen {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--neu-bg);
  border: 1px solid var(--bd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--neu-tx-aa, #525F78);
  white-space: nowrap;
}
.cal-pm320-wr-frozen-ico { flex-shrink: 0; color: var(--neu-tx-aa, #525F78); }
/* R63 P1-4 (조니 2심) — "N회차 추천" 누적 빈도 칩 (전수표 행 + 픽 카드 head). 작전 미끼 차단·정직성.
   반복 티커임을 cross-card 로 알리는 보조 마커 — 중립 슬레이트(주의 환기, 긍정 강조 아님). */
.cal-pm320-freq-chip {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--neu-bg);
  border: 1px solid var(--bd);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--neu-tx-aa, #525F78);
  white-space: nowrap;
  vertical-align: middle;
}
/* 승률 카드 보조 맥락 1줄. */
.cal-pm320-wr-context {
  margin-top: 6px;
  font-size: 12px; /* R26 P1① 10.5→12px */
  font-weight: 500;
  line-height: 1.45;
  /* R13 P0 대비: --dm 2.96:1 on amber → #5E6776 5.32:1 (WCAG AA). */
  color: var(--tx2);
}
/* R26 P1④ — 디스클레이머 노출 1줄(basis) + 나머지는 접기(details.cal-pm320-wr-fine). */
.cal-pm320-wr-basis {
  margin-top: 7px;
  font-size: 12px; /* R26 P1① 10→12px */
  font-weight: 500;
  line-height: 1.5;
  /* R13 P0 대비: --dm 2.96:1 → #5E6776 5.32:1 (WCAG AA). opacity 제거(대비 보존). 토큰화로 다크 정합. */
  color: var(--wr-basis-tx, #5E6776);
}
.cal-pm320-wr-fine { margin-top: 3px; }
.cal-pm320-wr-fine > summary {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; list-style: none; user-select: none;
  font-size: 12px; font-weight: 600; color: var(--wr-basis-tx, #5E6776);
  /* R44 #4 — 터치 타깃 ≥44 (실측 90×19): min-height 44 + 상하 음수 margin 보정(-12/-13)으로
     주변 흐름·텍스트 시각 위치 픽셀 동일(투명 영역만 확장). 위(wr-basis 텍스트)·아래(접힘 본문
     텍스트)는 비인터랙티브라 hit 충돌 0. */
  min-height: 44px; margin: -12px 0 -13px;
}
.cal-pm320-wr-fine > summary::-webkit-details-marker { display: none; }
.cal-pm320-wr-fine > summary::after {
  content: '▸'; font-size: 12px; transition: transform 0.15s ease;
}
.cal-pm320-wr-fine[open] > summary::after { transform: rotate(90deg); }
.cal-pm320-wr-fine-body {
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; font-weight: 500; line-height: 1.5;
  color: var(--wr-basis-tx, #5E6776);
}

.cal-pm320-backtest {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--wr-card-top, #FFFDF6) 0%, var(--am4) 100%);
  border: 1px solid var(--am3);
}
.cal-pm320-bt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.cal-pm320-bt-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--tx);
  line-height: 1.35;
}
.cal-pm320-bt-sub {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
  line-height: 1.45;
}
.cal-pm320-bt-note {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--neu-bg);
  color: var(--neu-tx-aa, #525F78);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cal-pm320-bt-grid {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.cal-pm320-bt-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cal-pm320-bt-k {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx2);
  white-space: nowrap;
}
.cal-pm320-bt-v {
  font-size: 18px;
  font-weight: 800;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.cal-pm320-bt-cell-sub {
  margin-top: auto;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--wr-basis-tx, #5E6776);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cal-pm320-bt-stats {
  margin-top: 7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tx2);
}
.cal-pm320-bt-loss { color: var(--neg); }
.cal-pm320-bt-detail { margin-top: 8px; }
.cal-pm320-bt-detail > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 12px;
  font-weight: 800;
  color: var(--tx);
}
.cal-pm320-bt-detail > summary::-webkit-details-marker { display: none; }
.cal-pm320-bt-detail > summary::after {
  content: '▸';
  font-size: 12px;
  transition: transform 0.15s ease;
}
.cal-pm320-bt-detail[open] > summary::after { transform: rotate(90deg); }
.cal-pm320-bt-detail-body {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cal-pm320-bt-detail-meta,
.cal-pm320-bt-scroll-hint {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--wr-basis-tx, #5E6776);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cal-pm320-bt-scroll-hint { color: var(--tx2); }
.cal-pm320-bt-equity {
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg2) 72%, transparent);
  padding: 8px;
}
.cal-pm320-bt-equity-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--tx2);
}
.cal-pm320-bt-equity-meta b {
  color: var(--tx);
  font-size: 13px;
}
.cal-pm320-bt-equity-meta span:last-child { text-align: right; }
.cal-pm320-bt-equity-svg {
  display: block;
  width: 100%;
  height: 86px;
  margin-top: 4px;
}
/* R43 P1⑦ — 잔고 차트 상·하한 2눈금. 라벨 = CSS absolute 오버레이 (svg 비보존 스케일 왜곡 회피). */
.cal-pm320-bt-equity-plot { position: relative; }
.cal-pm320-bt-equity-scale {
  position: absolute;
  inset: 4px 2px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  z-index: 1;
}
.cal-pm320-bt-equity-scale span {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--tx2);
  background: color-mix(in srgb, var(--bg2) 78%, transparent);
  border-radius: 4px;
  padding: 1px 4px;
  font-variant-numeric: tabular-nums;
}
.cal-pm320-bt-equity-grid { stroke-dasharray: 3 4; opacity: 0.7; }
.cal-pm320-bt-equity-svg line {
  stroke: var(--bd);
  stroke-width: 1;
}
.cal-pm320-bt-equity-svg polyline {
  fill: none;
  stroke: var(--am);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cal-pm320-bt-table-wrap {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--bg2);
}
.cal-pm320-bt-table {
  width: 100%;
  min-width: 660px; /* R43 P0-1② — 청산일 6열 추가분 */
  border-collapse: collapse;
  font-size: 12px;
}
.cal-pm320-bt-table th,
.cal-pm320-bt-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--bd);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.cal-pm320-bt-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg2);
  color: var(--tx2);
  font-weight: 800;
}
/* R43 P0-1② — 첫 열(진입일) sticky: 가로 스크롤 중에도 행 기준일 고정 (Codex diff 채택). */
.cal-pm320-bt-table th:first-child,
.cal-pm320-bt-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg2);
}
.cal-pm320-bt-table th:first-child {
  z-index: 3;
}
.cal-pm320-bt-table td:first-child {
  color: var(--tx);
  font-weight: 700;
  box-shadow: 8px 0 10px -10px rgba(15, 23, 42, 0.45);
}
.cal-pm320-bt-table tbody tr:last-child td { border-bottom: 0; }
.cal-pm320-bt-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cal-pm320-bt-td--pos { color: var(--up); font-weight: 800; }
.cal-pm320-bt-td--neg { color: var(--down); font-weight: 800; }
/* R43 P2⑨ — 전수표 하단 용어 범례 (물타기·만기청산·D+N). 다크모드 = 토큰 변수 상속 (대조 0건). */
.cal-pm320-bt-legend {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tx2);
  word-break: keep-all;
}
@media (max-width: 720px) {
  .cal-pm320-bt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cal-pm320-bt-grid { grid-template-columns: 1fr; }
  .cal-pm320-bt-v { font-size: 16px; }
}

/* PM320-D6 P1 — 뉴스 부재 placeholder 보조 문구 (블록 줄바꿈). */
.cal-feature-news-empty-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dm);
  opacity: 0.9;
}

/* PM320-D6 P1 — 용어 풀이 (?) 마커 + 탭 팝오버 (손님 용어 풀이 0건 해소).
   라벨 우측 작은 원형 (?) — 모바일 터치 타겟 충분(18px+). 팝오버는 position:fixed 오버레이로
   body 직속 삽입(_wireTermTips) — 어떤 부모 레이아웃에도 0 영향(레이아웃 시프트 0). */
.cal-term-tip {
  position: relative;            /* PM320-D6 P1-b — ::before 투명 hit-area 기준점 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;                   /* 시각 원형 15px 유지 (레이아웃 시프트 0) */
  height: 15px;
  margin-left: 4px;
  padding: 0;
  vertical-align: middle;
  border: 1px solid var(--bd);
  border-radius: 50%;
  background: var(--bg2);
  color: var(--tx2);                /* PM320-D6 P1-b — 대비 2.6:1 → 4.5:1+ (--bg2 #F2F4F8 기준 약 4.6:1) */
  font-size: 12px;               /* PM320-D6 P1-b — 10→11px 가독 */
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* PM320-D6 P1-b — 시각 원형(15px)은 그대로 두고 클릭/터치 영역만 확장(투명 오버레이).
   문서 플로우 밖(absolute)이라 주변 레이아웃 0 영향.
   R28 P1④ (조니 2심, 2026-06-11) — 24px → 44px (터치 타깃 일괄 44×44, 시각 크기 불변). */
.cal-term-tip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  /* R44 #4 — DOM 후순위 positioned 형제(z-auto, 예 .range-fill 게이지)가 오버레이를 가려
     하단 hit 가 죽던 것 복구. z-index 1 = 같은 컨텍스트 z-auto 박스 전부 위 (비인터랙티브
     장식 요소에서만 hit 회수 — 인접 인터랙티브와의 중첩 우선순위는 종전 DOM 순서 유지). */
  z-index: 1;
}
.cal-term-tip:hover { color: var(--am); border-color: var(--am3); }
.cal-term-tip[aria-expanded="true"] { color: #fff; background: var(--am); border-color: var(--am); }
/* 팝오버 — position:fixed 오버레이(좌표는 JS가 버튼 rect 기준 계산·경계 보정).
   문서 플로우 밖이라 열려도 주변 레이아웃 0 영향. max-width + min-width 로 한 글자 세로 기둥 방지. */
.cal-term-pop {
  position: fixed;
  /* R46 P1-1 — z 50→120: 뷰포트 상단 보정 위치의 팝오버가 sticky 픽바(z:99)/헤더(z:100) 아래 깔려
     팝오버 탭이 픽바 점프로 가로채이던 것 차단. 스크롤 시 자동 닫힘이라 상시 가림 0. */
  z-index: 120;
  box-sizing: border-box;
  width: max-content;
  min-width: 180px;
  max-width: 280px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--tx);
  /* R45 #1·#2 파생 catch (2026-06-12) — 반전 패널 본문색: bg=var(--tx)가 다크에선 크림(#F2EEE4)인데
     본문 #fff 고정 → 다크 1.1:1 비가독 (기존 (?) 잠복 결함, 칩·배지 팝오버 확장으로 표면화).
     var(--bg) = 양 모드 자동 반전 (라이트 #FAFBFE 16.3:1 — 종전 #fff와 시각 동일 / 다크 #1A1813 15.3:1). */
  color: var(--bg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  box-shadow: 0 6px 18px rgba(26, 29, 38, 0.22);
}
.cal-term-pop-title { display: block; font-weight: 800; font-size: 12px; margin-bottom: 2px; color: var(--am2); }
/* R45 파생 — 다크 반전 패널(크림 bg) 타이틀: --am2(다크 #F4D27A 밝은 골드)는 크림 위 비가독 →
   라이트 --am과 동일한 진한 골드 #7E5E0E (on #F2EEE4 = 5.19:1 AA). 라이트는 종전 --am2 유지. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal-term-pop-title { color: #7E5E0E; }
}
:root[data-theme="dark"] .cal-term-pop-title { color: #7E5E0E; }

/* DOC-20260603-DSN-001 §2.3 / §7.2 — PICK 좌측 액센트바 골드 강조 (이중 강조).
   --lu (상한가) 동시 존재 시 빨강 우선 (DSN-001 §2.3 / §7.2 정합). */
.cal-feature-card.cal-feature-card--pm320-pick {
  border-left: 4px solid var(--am3);
  /* PM320-D6 R22 (오전 동선) — "단 한 종목" 시각 격리. 종전 4px 좌측 액센트만으로는 직하 종목 카드와
     한 덩어리로 보임("어느 게 추천인지 모름" 평가). 전체 골드 테두리 + 미세 글로우 + 여백으로 위계 분리. */
  border-top: 1px solid var(--am3);
  border-right: 1px solid var(--am3);
  border-bottom: 1px solid var(--am3);
  box-shadow: 0 2px 10px rgba(180, 130, 20, 0.10);
  margin-bottom: 18px;
}
.cal-feature-card.cal-feature-card--lu.cal-feature-card--pm320-pick {
  border-left-color: var(--up);
}
/* "오늘의 추천" 구분 헤더 — PICK 풀카드 직상에 prepend(JS), 종목 카드 무리와 경계 명시. */
.cal-pm320-pick-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--am);
  letter-spacing: 0.01em;
}
.cal-pm320-pick-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--am3), transparent);
}
.cal-pm320-pick-divider-star { display: inline-flex; flex-shrink: 0; }

/* DOC-20260603-DSN-001 §3 / §7.3 — PM320 추천/결과 row (default 접힘).
   .cal-feature-summary 마지막 줄에 위치 (cal-detail-toggle 앞). */
.pm320-rec-row {
  margin-top: 8px;
}
/* §3.3 정정 (2026-06-03 20:25 KST design-lead 권고 옵션 C, 대표 verbatim 20:22 "디자인이 이게 맞는건가?") —
   row wrapper 회색 박스 제거. 시각 차등은 아래 .pm320-rec-row--virtual .pm320-rec-toggle button 자체 layer 재배치.
   FLR-AGT-002 거짓 충실성 차단 3 layer 본질 유지: (a) button border + color + opacity 시각 (b) aria-label "가상" 명시 (c) detail 본문 4 row 라벨. */
.pm320-rec-row--virtual .pm320-rec-toggle {
  border-color: var(--dm);                         /* PICK #64748B 대비 한 단계 연하게 */
  color: var(--tx2);                                /* PICK #0F172A 대비 한 단계 muted */
  opacity: 0.92;
}
.pm320-rec-row--virtual .pm320-rec-toggle:hover {
  border-color: var(--dm);
  color: var(--tx);
  opacity: 1;
}
/* PM320-D6 P0 — 비-픽(가상) 행 상단 "추천 아님" 안내 1줄. 중립 슬레이트 톤(경보 아님).
   색 토큰 = .cal-pm320-no-pick 정합(var --neu, amber 칩/gold 픽과 구분). */
.pm320-rec-virtual-note {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  /* R13 P1 WCAG: var(--neu) #6B7A99 = 3.92 → 토큰 (light 6.77 / dark 9.19:1) */
  color: var(--note-tx);
}
.pm320-rec-virtual-note b {
  font-weight: 700;
  color: var(--tx2);
}
.pm320-rec-toggle {
  /* DSN-001 §3.1 정정 옵션 squircle (2026-06-03 21:31 KST design-lead 4차 권고, 대표 verbatim 21:28 "상세 버튼과 매매 버튼 높이를 두 버튼의 중간 크기로 맞추고 두 버튼 모두 라운드형 버튼에서 모서리만 라운드인 버튼으로 번경해줘. 애플의 스쿼클 같이.") —
     cal-detail-toggle 완전 정합 (background #F8FAFC + justify-content center + text-align center) +
     font-weight 700 (위계 강조, 매매 = 결단 button 보존) + squircle CSS 근사 12px (Apple 스타일) +
     min-height 36px (28↔44 산술 중간, 두 button 동일 높이 통일). */
  display: flex;
  align-items: center;
  /* R26 P1⑥ (2026-06-11) — center 정렬은 라벨("매매"/"가상매매")·mark 길이 차로 카드 간 mark
     x좌표가 ±9px 흔들림. 라벨 고정폭(아래 -label flex-basis) + flex-start 로 mark 시작 x 통일. */
  justify-content: flex-start;
  /* r6 (2026-06-11, 대표 P0 — 매매 pill "· 장중 -X%" 박스 밖 오버플로). 결과 mark + MDD 칩 조합이
     좁은 폭(모바일 ~266px)에서 박스 width:100% 를 넘어 우측 라운드 테두리 밖으로 밀림(flex-shrink:0
     자식 + nowrap). fix: 내용이 박스를 넘으면 다음 줄로 wrap(박스가 높이로 감쌈) + row-gap 으로
     줄 간격. min-height 는 1줄 기준 유지(짧은 케이스 무회귀, 긴 케이스만 2줄로 늘어남). */
  flex-wrap: wrap;
  row-gap: 2px;
  gap: 6px;                                      /* cal-detail-toggle 정합 (8px → 6px) */
  width: 100%;
  min-height: 36px;                              /* DSN-001 §3.1 옵션 squircle — 28↔44 산술 중간 (cal-detail-toggle 정합, 통일 높이) */
  padding: 5px 12px;                             /* cal-detail-toggle 정합 */
  background: var(--pill-sf);                    /* 옵션 B 정합 (transparent → #F8FAFC) / R15 라이트·다크 토큰화 */
  border: 1px solid var(--pill-bd);              /* cal-detail-toggle 정합 (var --g08 → #64748B, WCAG AA) / R15 토큰화 */
  border-radius: 12px;                           /* DSN-001 §3.1 옵션 squircle — pill 9999px → 12px (Apple squircle CSS 근사, font-weight 700 위계 보존) */
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;                              /* 옵션 B 위계 강조 (600 → 700, cal-detail-toggle 대비 한 단계 강) */
  color: var(--pill-tx);                         /* cal-detail-toggle 정합 (var --g80 → #0F172A) / R15 토큰화 */
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  text-align: center;                            /* 옵션 B 정합 (left → center, cal-detail-toggle 정합) */
  font-family: inherit;
  letter-spacing: 0.01em;
  user-select: none;
}
.pm320-rec-toggle:hover {
  background: var(--pill-sf-hover);              /* cal-detail-toggle 정합 */
  border-color: var(--tx2);
  color: var(--pill-tx);
}
.pm320-rec-toggle:active { background: var(--pill-sf-active); }
.pm320-rec-toggle:focus-visible {
  outline: 2px solid #2563EB;                    /* cal-detail-toggle 정합 (#0064FF → #2563EB) */
  outline-offset: 2px;
}
.pm320-rec-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 78px; /* R26 P1⑥ — 최장 라벨("가상매매") 기준 고정폭 → mark 시작 x 카드 간 통일 */
}
.pm320-rec-toggle-text {
  /* 옵션 B 신축 (2026-06-03) — chevron 폐기 후 텍스트 토글 "매매 보기" ↔ "접기" (click handler에서 textContent 토글). */
  font-size: 12px;
  letter-spacing: 0.2px;
}
.pm320-rec-icon { color: var(--g60, #6B7280); flex-shrink: 0; }
.pm320-rec-result-mark {
  /* 옵션 B 정합 (2026-06-03) — flex:1 left 대신 inline gap:6px (라벨 우측 inline mark). */
  margin-left: 6px;
  font-weight: 700;
  font-size: 12px;
  /* r6 (2026-06-11, 대표 P0 — 매매 pill "· 장중 -X%" 박스 밖 오버플로). 결과 mark + 내부 MDD 칩이
     박스(width:100%,~266px 모바일)를 넘으면 "· 장중 -X%" 가 다음 줄로 자연 wrap(박스가 높이로 감쌈).
     flex-shrink:0 제거(부모 flex-wrap 참여) + 내부 텍스트 normal wrap 허용(MDD 칩만 nowrap). */
  min-width: 0;
  white-space: normal;
  text-align: left; /* R26 P1⑥ — flex-start 정렬 정합 (center → left) */
  line-height: 1.4;
}
.pm320-rec-result-mark--profit { color: var(--pos); }
.pm320-rec-result-mark--loss { color: var(--up); }
.pm320-rec-result-mark--running { color: var(--g60, #6B7280); }
.pm320-rec-result-mark--imminent { color: var(--am); }
/* R18 (트레이더 P1) — 접힌 결과 mark 옆 장중 최대낙폭 칩. 위험 톤(--neg)으로 색 분리해
   "익절"(녹색) 옆에서 손실 폭이 한눈에 대비되도록. 부모 색 상속 끊고 명시 지정. */
.pm320-rec-mark-mdd {
  margin-left: 4px;
  color: var(--neg);
  font-weight: 700;
  white-space: nowrap;
}
/* wave1 fix ② (2026-06-11, R24 P2) — 익절 청산일 "(YYYY-MM-DD)" 원자화 칩. pill 전체 wrap(v317/r6)은
   유지하되 날짜 토큰만 nowrap — 하이픈 중간 줄쪼갬 0. 색·굵기는 mark 본문 상속(종전 동일 외관). */
.pm320-rec-mark-date {
  margin-left: 4px;
  white-space: nowrap;
}
/* .pm320-rec-chevron 폐기 (2026-06-03 옵션 B) — 텍스트 토글 "매매 보기" ↔ "접기"로 대체. */

/* §3.4 / §7.4 — 펼침 본문 (햇살 톤, 4 row 매수·물타기·익절·만기청산) */
.pm320-rec-detail {
  margin-top: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--warm2-top), var(--warm2-bot));  /* R15: 햇살 크림 / 다크 함몰 */
  border: 1px solid var(--am2);  /* R15: #E8C063 → --am2 (다크 골드 악센트 유지) */
  border-radius: 10px;
}
.pm320-rec-detail[hidden] { display: none; }
.pm320-rec-detail-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--g80, #1A1D26);
}
.pm320-rec-detail-row + .pm320-rec-detail-row {
  margin-top: 4px;
}
.pm320-rec-label {
  display: inline-flex;       /* 라벨 텍스트 + (?) 툴팁이 한 줄에 붙도록 — 물타기(3자)+? 줄바꿈 고아 방지 */
  align-items: center;        /* 매수/익절과 동일한 베이스라인 정합 */
  white-space: nowrap;        /* 좁은 라벨 칼럼(모바일 72px)에서도 라벨·? 분리 금지 */
  font-weight: 700;
  color: var(--am);
}
.pm320-rec-value { font-weight: 500; }
.pm320-rec-value--sub {
  color: var(--g60, #6B7280);
  font-size: 12px;          /* §8.5 모바일 12px 정합 (sub 11.5px → 12px 상향) */
}
/* R13 P1: "물타기 후 익절가" 의미 단서 — 평단 하락분 반영 1줄 cue (토큰, light 5.69 / dark 정합) */
.pm320-rec-value--note {
  font-size: 12px;
  color: var(--rec-code-tx);
  font-weight: 500;
}
/* R44 #5 — sub-cont(0% 안내 별도 행) 폐기: 중복 사실 1건화로 행 자체 제거 (renderer 동기). */
/* 최대 낙폭(MDD) — 낙폭은 손실 방향, 파란/회색 톤 (익절 초록과 구분). 대표 지시 2026-06-08 */
.pm320-rec-value--mdd {
  color: var(--down);
  font-weight: 700;
}
.pm320-rec-result-strip {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.pm320-rec-result-strip--profit {
  background: var(--pos-bg);
  color: var(--pos);
  border: 1px solid var(--pos);
}
.pm320-rec-result-strip--loss {
  background: var(--neg-bg);
  /* R13 P1 대비: 익절/만기손실 빨강 #C53939(4.42:1) → #B8302E(5.07:1, WCAG AA). */
  color: var(--neg);
  border: 1px solid var(--ru);
}
/* R18 (트레이더 P1) — 결과 strip 하단 체결현실 면책 1줄. 승률카드 fill-note 와 동일 톤(건조·10px).
   --wr-basis-tx: light 5.52:1 / dark override 로 WCAG AA 유지. */
.pm320-rec-result-fill-note {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wr-basis-tx, #5E6776);
}
/* R43 P1⑧ — 전략 은닉 사유 고지 1줄 (매매 상세 하단, fill-note 동일 위계). */
.pm320-rec-strategy-note {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wr-basis-tx, #5E6776);
  word-break: keep-all;
}

/* §7.5 — 다크모드 폐기 (2026-06-03 22:50 KST 대표 verbatim "다크모드는 없다. 매매 버튼에 다크모드가 적용된 게 있다면 모두 제거"). 본 서비스 라이트 고정. */

/* §7.6 / §8.5 — 모바일 ≤640px (12px 폰트 catch 정합) */
@media (max-width: 640px) {
  .cal-pm320-pick-badge {
    font-size: 12px;
    padding: 2px 8px;
  }
  /* 모바일 라벨 단축 — §5.4 ASCII 모형 "PM320 추천" */
  .cal-pm320-pick-label::before { content: ''; }
  .pm320-rec-toggle {
    padding: 5px 12px;        /* cal-detail-toggle 정합 (대표 verbatim 23:22 KST height mismatch catch) */
    min-height: 40px;         /* cal-detail-toggle 모바일 정합 (40px 통일) */
    font-size: 12px;          /* §8.5 12px 모바일 폰트 catch (11.5px → 12px 상향) */
  }
  .pm320-rec-result-mark {
    font-size: 12px;          /* §8.5 12px 모바일 폰트 catch */
  }
  .pm320-rec-detail-row {
    grid-template-columns: 72px 1fr;   /* 64px→72px: 물타기(3자)+(?) 한 줄 수용(데스크톱 80px 대비 여전히 좁음) */
    font-size: 12px;          /* 12.5px → 12px (모바일 최소 12px 정합) */
  }
  .pm320-rec-result-strip {
    font-size: 12px;          /* §8.5 12px 모바일 폰트 catch (11.5px → 12px 상향) */
  }
}
.cal-feature-reason {
  font-size: 12.5px; line-height: 1.55; color: var(--tx);
  white-space: pre-wrap;
}
.cal-feature-links {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  padding-top: 2px;
}
.cal-feature-link {
  /* R44 #14 (조니 2심, 대표 catch 칩 위계) — 출처 칩 강등: 12→11px(출처명 2~4자 고유명사 인지용
     11px floor 예외 정당 — 조니 명시) + padding 3px 8px→2px 7px + 본문색 --c3→--dm(차분).
     테마 칩(.cal-ind-chip) 무수정 — 테마 > 출처 위계 확보. */
  /* R45 #3 (조니 2심, 2026-06-12) — 다크 대비: --dm(다크 #8E8676 on --dk-sf #23211A = 4.46:1 AA 미달)
     → --dm-hi(라이트 #646E80 동일값 5.14:1 유지 / 다크 #A9A18E 6.27:1). R28 P1② 상위 muted 토큰 재사용.
     위계(테마 칩 > 출처 칩)는 크기 11px·muted 그레이 유지로 불변 — 밝기만 AA 보정. */
  font-size: 11px; color: var(--dm-hi); text-decoration: none;
  padding: 2px 7px; border: 1px solid var(--bd); border-radius: 999px;
  background: var(--sf);
  /* 상속 line-height(≈1.55)로는 border 포함 23px > 테마 칩 22.6px — 강등 위계가 bbox 에서 역전.
     1.4 로 21.4px < 22.6px (verify 게이트: 테마 칩 높이 > 출처 칩 높이). */
  line-height: 1.4;
  /* R55 P1-1 (픽셀 sweep DOC-20260614-JDG-004 — 출처 핀 48×21 터치 < 44) — 시각 pill(21px) 불변,
     터치존만 ≥44px 투명 ::after 오버레이(R49 E1 / R28 P1④ 동형). 폭은 핀 본체(48px) 유지로
     인접 핀(gap 8px) 가로 충돌 0, 세로만 ±11.5px 확장(cal-feature-links 가 카드 본문 말미라 상하 충돌 0). */
  position: relative;
}
.cal-feature-link::after {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 44px; transform: translateY(-50%);
}
.cal-feature-link:hover { background: var(--pos-bg); color: var(--c3); }
.cal-feature-news-empty {
  font-size: 12px; color: var(--dm); padding: 4px 0;
}

/* 해석 (이시카와 + 토구사) */
/* R25 P1③ — 완성 문장 매크로 뉴스 pill(국내 5 + 미국발 5 = 최대 10개 클러스터) 폐기 → 리스트형.
   문장형 긴 텍스트가 알약 안에 갇혀 줄바꿈·시각 소음(골드 덩어리) 유발 → 좌측 골드 액센트 바
   리스트로 가독 회복. 칩 높이 4종 혼재(R25 P1⑥)의 최대 outlier(29px pill)도 함께 해소. */
.cal-macro-strip {
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 0 4px 0;
}
/* R43 — display:flex 가 UA [hidden]{display:none} 를 덮는 것 봉쇄 (뉴스 확대 step/page 접힘 필수). */
.cal-macro-strip[hidden] { display: none; }
.cal-macro-chip {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.5;
  padding: 1px 2px 1px 10px;
  border: 0; border-left: 2px solid var(--am2); border-radius: 0;
  background: none; color: var(--am);
}
/* 밤사용자 P2 계승: 다크에서 채도/밝기 한 단계 다운(차분한 골드 텍스트 --section-summary). 라이트 무영향. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal-macro-chip {
    color: var(--section-summary); border-left-color: var(--am3);
  }
}
:root[data-theme="dark"] .cal-macro-chip {
  color: var(--section-summary); border-left-color: var(--am3);
}
/* R48 W2-3 → Q-20260613-158 ② 개정 (대표 08:53 "대부분 다 사실 — 당연한 걸 잔뜩 표시하니 노이지") —
   칩 종류 태그 = [해석](LLM 종합 요약, muted)만 마킹. wire 1차 보도 verbatim 은 무표기 디폴트
   (무표기 = 사실 — --fact 변형 폐기, JS 소비 0). 다크 override 보유 (--wr-basis-tx 5.84 AA). */
.cal-chip-kind {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.4;
  padding: 0 5px; margin-right: 6px; vertical-align: 1px;
  border: 1px solid var(--bd); border-radius: 999px;
  color: var(--wr-basis-tx, #5E6776); background: transparent;
  letter-spacing: 0; white-space: nowrap;
}
/* Q-20260612-154 ④ (대표 23:14 직접 지시) — 미장 wire 한국어 인과 해석 노출. 칩 = 기존
   .cal-macro-chip 좌측 골드 바 리스트 그대로 (별도 칩 체계 신설 0 — 내부 확장만).
   시각 위계: ko_title(칩 본문 토큰 그대로) > 해석 요약(--tx 본문) > 인과 체인(칩 골드 상속 —
   국내 해석 칩 summary 동형) > EN 원문·보수 표기(--wr-basis-tx muted 부 표기, 다크 override AA).
   태그 토큰 = R48 .cal-chip-kind 재사용 (direction 호재/악재/중립/불확실 = 해석 계열 muted). */
.wire-ko-en {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.4;
  color: var(--wr-basis-tx, #5E6776);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wire-ko-summary {
  display: block; margin-top: 4px;
  font-size: 12px; font-weight: 400; line-height: 1.55; letter-spacing: -0.1px;
  color: var(--tx);
}
.wire-ko-summary .cal-chip-kind { margin-right: 5px; }
.wire-ko-chain { display: block; margin-top: 3px; }
.wire-ko-tags { display: block; margin-top: 5px; line-height: 1.4; }
.wire-ko-tags .cal-chip-kind { margin-right: 4px; vertical-align: 0; }
.wire-ko-basis {
  display: block; margin-top: 3px;
  font-size: 11px; font-weight: 400; line-height: 1.4;
  color: var(--wr-basis-tx, #5E6776);
}
/* Q-20260613-158 ① (대표 08:53 "한줄로 나오면 좋겠는데 너무 과하다") — ko 해석 보유 칩 접힘.
   디폴트 = ko_title 한 줄(+출처 약어+셰브론), 탭 펼침 = 인과 요약·체인·EN 원문·원문 링크.
   네이티브 details/summary (.pm320-term-legend 범례 동형 패턴). summary 터치존 ≥44px (R48 P1-4 동형). */
.wire-ko-chip > summary {
  list-style: none; cursor: pointer;
  min-height: 44px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
  -webkit-tap-highlight-color: transparent;
}
.wire-ko-chip > summary::-webkit-details-marker { display: none; }
.wire-ko-chevron {
  margin-left: auto; padding-left: 4px;
  font-size: 10px; line-height: 1;
  color: var(--wr-basis-tx, #5E6776);
  transition: transform .15s ease;
}
.wire-ko-chip[open] .wire-ko-chevron { transform: rotate(90deg); }
/* 원문 직링크(법무 딥링크 의무) — 펼침 본문 하단. 칩 골드 상속 + 밑줄 = 링크 어포던스.
   터치존: 12px*1.4 + 상하 14px = 44.8px. */
.wire-ko-srclink {
  display: inline-block; padding: 14px 10px 14px 0;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.cal-toppick {
  margin-top: 10px; padding: 10px 14px;
  /* REQ-035-rev: 정체성 그라데이션 복원 (햇살 톤). E8C063 border 동시 복원. R15: 토큰화(다크 함몰). */
  border: 1px solid var(--am2); border-radius: 10px;
  background: linear-gradient(90deg, var(--warm2-bot), var(--warm2-top));
  font-size: 12.5px; line-height: 1.5;
}
.cal-toppick b { color: var(--am); }
.cal-grade-badge {
  font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase;
}
.cal-grade-badge.grade-관심 { background: var(--am3); color: var(--am); border: 1px solid var(--am); }
.cal-grade-badge.grade-대기 { background: var(--neu-bg); color: var(--dm); border: 1px solid var(--bd); }
.cal-grade-badge.grade-회피 { background: var(--neg-bg); color: var(--ru); border: 1px solid var(--ru); }
.cal-ishikawa-line {
  font-size: 12.5px; line-height: 1.55; color: var(--tx);
  text-align: left;
}
.cal-headline {
  font-size: 13px; font-weight: 500; color: var(--tx); line-height: 1.5; margin-bottom: 2px;
}
.cal-causal {
  font-size: 12.5px; color: var(--dm); line-height: 1.6;
  text-align: left; white-space: normal; overflow: visible; text-overflow: unset;
}
.cal-causal .arrow { color: var(--am); margin: 0 4px; font-weight: 700; }
/* Q-20260608-143 — 뉴스 시제 라벨(선물=실시간 / 정규장=미장 마감). 같은 영역 데이터 시제 분리 명시. */
.cal-news-tense {
  display: inline-block; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 2px 5px; margin-right: 6px; border-radius: 4px; vertical-align: 1px;
  letter-spacing: -0.2px; white-space: nowrap;
}
.cal-news-tense--realtime { color: var(--pos); background: rgba(31, 122, 61, 0.12); }
/* R55 P2-6 (픽셀 sweep DOC-20260614-JDG-004 — "미장 마감" 배지 CR 3.98(L)/4.17(D) < 4.5) —
   배지 틴트 bg(rgba(107,98,86,.12) 합성) 위 muted grey 가 AA 미달. 전역 --dm 미변경(공유 토큰,
   FLR-20260428-TEC-001 경계) → 배지 한정 텍스트 명도만 상향. 합성 bg 위 실측: 라이트 #525C6B
   = 5.24:1, 다크 #A09779 = 4.98:1 (둘 다 ≥4.5 마진). muted grey 성격·12px·weight700 불변. */
.cal-news-tense--close { color: #525C6B; background: rgba(107, 98, 86, 0.12); }
:root[data-theme="dark"] .cal-news-tense--close { color: #A09779; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal-news-tense--close { color: #A09779; }
}
/* Q-20260608 정규장 장중 — 개장 중 "장중" 배지. P2(design): 가격 상승색(#C53939 빨강)·하락색
   (#1958C7 파랑) 어느 쪽과도 명확히 구분되는 앰버 계열(중립). 빨강(#c0392b)은 상승빨강과 인접해
   하락 카드에서 "상승?" 오인 → 앰버로 분리. 마감(--close, 회색)·realtime(녹)과도 대비. */
.cal-news-tense--live { color: var(--am); background: rgba(180, 83, 9, 0.12); }
.cal-factors {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 12px; color: var(--tx2);
  margin-top: 6px;
}
.cal-factor { display: inline-flex; align-items: center; gap: 6px; }
.cal-factor .label { font-weight: 700; color: var(--tx2); min-width: 28px; }
.cal-dots { display: inline-flex; gap: 3px; }
.cal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg2);
}
.cal-dot.on { background: var(--am); }
.cal-jooju {
  margin-top: 6px; padding: 8px 10px;
  border-left: 3px solid var(--am);
  background: rgba(232,192,99,0.08);
  font-size: 12px; line-height: 1.5;
  border-radius: 0 6px 6px 0;
}
.cal-jooju .one-line { color: var(--tx); font-weight: 600; }
.cal-jooju .dissent { color: var(--ru); font-size: 12px; margin-top: 4px; }
.cal-risk-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cal-risk-chip {
  font-size: 12px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--neg-bg); color: var(--ru);
  border: 1px solid var(--ru);
}
/* 해석 미완료 카드 — full 레이아웃 유지(대표 B안 2026-04-22). opacity만 약간 완화해 구분 */
.cal-feature-card.no-interp { opacity: 0.78; }
.cal-pick-meta { margin-top: 6px; }
.cal-disc-cat.streak { background: var(--am3); color: var(--am); border: 1px solid var(--am2); }
/* REQ-045 §A — 헤더 배지 폰트 통일 (11px / weight 600 / letter-spacing 0.01em). */
.cal-streak-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: 999px;
  /* R13 P1 WCAG: var(--am) #C49930 on var(--am3) #FBE9B5 = 2.19 → 진한 골드 #7A5E12 (5.07:1) */
  background: var(--am3); color: var(--streak-tx); border: 1px solid var(--am2);
  vertical-align: middle;
}
.cal-theme-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-top: 4px;
}

.cal-empty {
  text-align: center; padding: 50px 20px;
  color: var(--dm); font-size: 13px;
}
.cal-empty-circle {
  display: inline-block; width: 32px; height: 32px;
  border: 2px solid var(--dm); border-radius: 50%;
  margin-bottom: 12px; opacity: 0.4;
}
/* DSN-frontend §3.6.2.2 (2026-05-28) — 시간대별 sub-message. 메인 텍스트(13px) 대비 11px 보조. */
.cal-empty-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--dm);
  opacity: 0.75;
}

@media (max-width: 880px) {
  .cal-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cal-layout > .cal-side { position: static; }
  .toss-cal { width: 100%; max-width: 326px; margin: 0 auto; padding: 14px 8px 12px; }
  .toss-cal-nav { width: 44px; height: 44px; border-radius: 12px; font-size: 14px; }
  .toss-cal-nav::after { display: none; }
  .toss-cal-grid {
    grid-template-columns: repeat(7, 44px);
    grid-auto-rows: 44px;
    gap: 0;
    justify-content: center;
  }
  .toss-cal-dow { width: 44px; height: 24px; line-height: 24px; }
  .toss-cal-cell { width: 44px; height: 44px; border-radius: 12px; font-size: 13px; }
  .toss-cal-cell::before { display: none; }
  .cal-content { padding: 20px 18px; }
  /* REQ-074 — 모바일 폰트 위계 축소. 20px → 13px (데스크탑 15px 대비 모바일 -2px). */
  .cal-content-date { font-size: 13px; }
  /* REQ-069 — 모바일 cal-content padding(20px 18px) 보정.
     Q-20260608-144 — top 하드코딩(72px) 제거. nav 실제 height는 --nav-h(renderer.js)가
     모바일 breakpoint에서도 정확히 측정하므로 단일 변수 사용 (하드코딩 override 제거 = 미스싱 fix 봉쇄). */
  .cal-content-head {
    top: var(--nav-h, 72px);
    margin-left: -18px; margin-right: -18px;
    padding-left: 18px; padding-right: 18px;
  }
}
@media (max-width: 640px) {
  .stock-main { grid-template-columns: 16px 1fr auto; padding: 8px 6px; gap: 6px; }
  .stock-price { display: none; }
  .stock-news { padding: 6px 6px 8px var(--card-indent-news); }
  .news-card { padding: 6px 6px; gap: 6px; }
  .stock-theme { padding: 0 6px 6px; }
  .cal-feature-head { gap: 6px; padding: 8px var(--card-indent-header) 4px; }
  .cal-feature-namecell { flex-wrap: nowrap; overflow: hidden; gap: 4px; }
  .cal-feature-namecell .cal-streak-badge { flex-shrink: 0; }
  .cal-feature-badges { padding: 4px 6px 0 var(--card-indent-badges); }
  .cal-feature-body { padding: 0 6px 4px var(--card-indent-body); }
  .kiwoom-row { grid-template-columns: 18px 1fr auto auto; gap: 6px; }
  .kiwoom-amount { font-size: 12px; }
  .kiwoom-pct { font-size: 12px; min-width: 48px; }
  .cal-trade-row { grid-template-columns: 18px 1fr auto auto auto 14px; gap: 6px; padding: 8px 6px; }
  .cal-trade-amount { font-size: 12px; }
  .cal-trade-pct { font-size: 12px; min-width: 48px; }
  .cal-feature-news { padding-left: 10px; }
}

/* 240영업일 가격 레인지 바 (REQ-001 Phase 2 안 B) */
.stock-range {
  padding: 4px 12px 8px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stock-range .range-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  /* REQ-035-rev: 의미 그라데이션 복원 — 가격 스펙트럼 (저가 청 → 중간 회 → 고가 적). 240일 가격 범위 시각화. */
  background: linear-gradient(90deg, var(--bg2) 0%, var(--sf2) 50%, var(--neg-bg) 100%);
  overflow: visible;
}
.stock-range .range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--low-pct, 0%);
  right: calc(100% - var(--high-pct, 100%));
  /* REQ-035-rev: 의미 그라데이션 복원 — 청→적 (저가→고가) 진한 톤. opacity로 fill 강도 표현. */
  background: linear-gradient(90deg, #1958C7 0%, #C53939 100%);
  border-radius: 3px;
  opacity: 0.55;
}
.stock-range .range-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  background: var(--range-marker-bg);
  border: 1.5px solid var(--tx);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.stock-range .range-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  font-size: 12px;
  color: var(--tx2);
  align-items: baseline;
}
.stock-range .range-meta strong { color: var(--tx); font-weight: 600; }
.stock-range .range-meta em { font-style: normal; margin-left: 2px; font-weight: 600; }
.stock-range .range-meta em.up { color: var(--down); }
.stock-range .range-meta em.down { color: var(--up); }
.stock-range .r-now { text-align: center; }
.stock-range .r-high { text-align: right; }
.stock-range .r-date { display: block; color: var(--dm); font-size: 12px; margin-top: 1px; }

@media (max-width: 640px) {
  .stock-range { padding: 4px 6px 6px 26px; }
  .stock-range .range-meta { font-size: 12px; }
  .stock-range .range-meta .r-date { font-size: 12px; }
}

/* === 레이아웃 v2 (REQ-001 Phase 2 — 4행 분해 + 좌우 head) === */
/* 첫 줄: 좌(차트) | 우(이름+메타 작은 폰트) */
.cal-feature-card.v2 { padding-bottom: 4px; }
.cal-feature-head.v2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 10px 40px 6px 12px; /* 우측 40px = 공유 버튼 공간 확보 (레이아웃 훼손 방지) */
  align-items: center;
}
.cal-feature-head.v2 .cal-feature-head-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cal-feature-head.v2 .cal-feature-head-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cal-feature-head.v2 .cal-feature-namecell {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* v2.2: 좌측 정렬 복귀 */
  gap: 6px;
  flex-wrap: wrap;
  text-align: left;
}
.cal-feature-head.v2 .cal-feature-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
}
.cal-feature-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--tx2);
  /* R57 한 줄 fit (시총 백필 21/21 동반·조니 JDG-002 정정 = 백필+유지 경로) —
     메타 row 를 head-right 좁은 컬럼(~138px)에서 head 직후 full-width(~300px) 형제로 외화.
     배경: 시총 span 추가 후 등락률|거래대금|시총 3요소(+rank1 의 (?) 3개)가 138px 초과 →
     mcap 가 2행 낙하 + dangling `|` 잔존 (조니 ③ 줄바꿈 layer 실측·R50 모바일 시총 (?) 1/5 hit).
     처방 = 컬럼 확장(폰트 축소 아님 — 12px 가독 보존). 카드 가격레인지 바와 동일 좌측 indent(26px)로 정렬.
     결과 (라이브 390px 실측): 21/21 카드 단일행·줄바꿈 0·dangling `|` 0·overflow 0.
     R50 row-gap:11px 폐기 근거 = 세로 인접(2행) 자체가 사라져 (?) hit-area 세로 충돌 불가 →
     3개 (?) 가 수평 배치(중심 간격 62/92px ≫ 44) = 각 (?) ownsCenter:true (수평 분리로 자연 해소).
     44×44 hit-area(::before R28 P1④) + 가시 원형 15px 불변. in-view 상세 4행(R46 P0-2②)은 별 영역 무영향.
     FLR-20260612-PRC-001(기판정 미검증 출하) 회피: 본 변경은 R50 모바일 시총 1/5 hit 결함을
     해소(개선)하되 레이아웃 위치 이동이므로 픽셀/조니 재판정 "카드 간 일관성" 차원 재측정 의무. */
  flex-wrap: nowrap;
  padding: 2px 12px 4px 26px;
}
/* v2.4: 메타 자식 모두 글로벌 셀렉터 무력화 + padding/margin 0 + 폰트 패밀리 통일 */
.cal-feature-meta > span {
  padding: 0;
  margin: 0;
  font-family: inherit;
  min-width: 0;
  text-align: left;
  line-height: 1;
}
.cal-feature-meta .cal-feature-pct {
  font-size: 12px;
  font-weight: 600;
}
.cal-feature-meta .cal-feature-pct.up { color: var(--up); }
.cal-feature-meta .cal-feature-pct.down { color: var(--down); }
/* v2.2: 거래대금 골드 (브랜드 --am, 700) */
/* PM320-D6 P2 — 거래대금 텍스트 + (?) 칩 nowrap 묶음 (390px 단독 행 낙하 방지). 칩이 span 내부라 줄바꿈만 차단 */
.cal-feature-meta .cal-trade-amount { color: var(--am); font-weight: 700; font-size: 12px; white-space: nowrap; }
.cal-feature-meta .cal-meta-sep { color: var(--dm); font-weight: 400; }

/* 240일 레인지 v2 — 4행 (bar / 가격 / 등락률 / 날짜) */
.stock-range.v2 {
  padding: 6px 12px 10px 26px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stock-range.v2 .range-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  align-items: baseline;
}
.stock-range.v2 .range-row .r-now { text-align: center; }
.stock-range.v2 .range-row .r-high { text-align: right; }
.stock-range.v2 .range-prices {
  font-size: 12px;
  color: var(--tx);
  font-weight: 600;
  margin-top: 4px;
}
.stock-range.v2 .range-pcts {
  font-size: 12px;
  font-weight: 600;
}
.stock-range.v2 .range-pcts .up { color: var(--up); }   /* 양수(상승) — 한국 증시 관습 빨강 */
.stock-range.v2 .range-pcts .down { color: var(--down); } /* 음수(하락) — 한국 증시 관습 파랑 */
/* v2.2: 가운데 "현재가" 라벨 (값 X, 텍스트만) */
/* R13 P1 WCAG: #999 on #F2F4F8 = 2.59 → #5A6070 (5.71:1) */
.stock-range.v2 .range-pcts .r-now-label { color: var(--now-label-tx); font-weight: 500; font-size: 12px; }
.stock-range.v2 .range-dates {
  font-size: 12px;
  color: var(--dm);
}

@media (max-width: 640px) {
  .cal-feature-head.v2 { padding: 8px 36px 4px 6px; gap: 6px; } /* 모바일 우측 36px 공유 버튼 공간 */
  .cal-feature-head.v2 .cal-feature-name { font-size: 14px; }
  /* R57 한 줄 fit — full-width 메타(base 외화). 모바일 좌측 indent 는 가격레인지 바와 동일(26px),
     우측은 6px(레인지 정합). 단일행 보장 위해 nowrap(base 상속) + 요소 간격만 5px 압축. */
  .cal-feature-meta { font-size: 12px; column-gap: 5px; padding: 2px 6px 4px 26px; }
  .cal-feature-meta .cal-feature-pct,
  .cal-feature-meta .cal-close-price,
  .cal-feature-meta .cal-trade-amount { font-size: 12px; }
  .stock-range.v2 { padding: 4px 6px 8px 26px; }
  .stock-range.v2 .range-prices { font-size: 12px; }
  .stock-range.v2 .range-pcts { font-size: 12px; }
  .stock-range.v2 .range-dates { font-size: 12px; }
}

/* ───── DSN-001 v7.2/v7.3.1 — P1 신규 스타일 ───── */

/* §16.1.4 rules_version 배너 — 회색 톤, 최상단, X로 닫기 */
.cal-rules-version-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 6px 0 10px;
  background: var(--bg2); border: 1px solid var(--bd); border-radius: 6px;
  font-size: 12px; color: var(--tx2); line-height: 1.4;
}
.cal-rules-version-icon { font-size: 13px; flex-shrink: 0; }
.cal-rules-version-msg { flex: 1; }
.cal-rules-version-close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--dm); font-size: 16px; font-weight: 600;
  padding: 0 4px; line-height: 1; flex-shrink: 0;
}
.cal-rules-version-close:hover { color: var(--tx2); }

/* §16.1.1 기준 시각 라인 — §2 최상단, 회색 보조정보 */
.cal-next-basis {
  color: var(--dm) !important;
  font-weight: 500 !important;
}
.cal-next-basis-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--tx2);
}

/* §16.1.3 면책 서브텍스트 — "예상 진입" 직후, 들여쓰기 + 0.75rem 회색 */
.cal-next-entry > div:first-child { font-weight: 500; }
.cal-predicted-disclaimer {
  display: block;
  margin-top: 2px;
  padding-left: 1em;
  font-size: 0.75rem;
  color: var(--dm);
  line-height: 1.4;
  font-weight: 400;
}

/* §19.4 진입 시나리오 + 상한가 경고 */
.cal-next-scenario > div:first-child { font-weight: 500; }
.cal-next-scenario-line {
  padding-left: 1em;
  font-size: 12px;
  color: var(--tx2);
  font-variant-numeric: tabular-nums;
}
.cal-next-limit-up-warn {
  margin-top: 4px;
  padding: 3px 8px 3px 1em;
  font-size: 12px;
  color: var(--up);
  background: var(--neg-bg);
  border-left: 2px solid var(--up);
  border-radius: 0 3px 3px 0;
}

@media (max-width: 640px) {
  .cal-rules-version-banner { font-size: 12px; padding: 6px 10px; }
  .cal-next-basis { font-size: 12px; }
  .cal-predicted-disclaimer { font-size: 0.75rem; }
  .cal-next-scenario-line { font-size: 12px; }
}

/* ───── DSN-001 v7.4 (P2~P5) — 2026-04-24 ───── */

/* §20.3 confidence=low 경고 배너 (predicted_stage2_notice 상단 회색) */
.cal-reg-source-banner {
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: var(--am4);
  border: 1px solid var(--am3);
  border-left: 3px solid var(--am);
  border-radius: 4px;
  font-size: 12px;
  color: var(--am);
  line-height: 1.45;
}
.cal-reg-source-banner.pending {
  background: var(--bg2); border-color: var(--dm); border-left-color: var(--dm);
  color: var(--dm); font-size: 12px; padding: 4px 8px;
}
.cal-reg-source-banner-title { font-weight: 700; margin-right: 4px; }

/* §20.8 path-level overall_progress_ratio 행 */
.cal-path-overall {
  margin: 6px 0 4px;
  padding: 4px 8px;
  background: var(--bg2);
  border-left: 2px solid var(--down);
  border-radius: 0 3px 3px 0;
  font-size: 12px; color: var(--tx2); line-height: 1.5;
}
.cal-path-overall.easiest {
  background: var(--pos-bg); border-left-color: var(--pos);
}
.cal-path-overall-label { font-weight: 700; color: var(--down); margin-right: 4px; }
.cal-path-overall.easiest .cal-path-overall-label { color: var(--pos); }
.cal-path-easiest-tag {
  display: inline-block; margin-left: 5px;
  padding: 1px 5px; font-size: 12px; font-weight: 600;
  background: var(--pos-bg); color: var(--pos); border-radius: 3px;
}

/* §13.4.3 이중 상태 (predicted_stage3_notice) */
.cal-status-section.next.dual-next {
  border-left: 3px solid var(--am);
  padding-left: 8px;
  margin-left: -8px;
}
.cal-status-section.regulation.future-add h3,
.cal-status-section.v6.rules.future-add h3 {
  color: var(--am);
  font-style: italic;
}
.cal-status-section.v6.rules.future-add {
  border-top: 1px dashed var(--am3);
  padding-top: 4px;
  margin-top: 6px;
}
.cal-v7-transition-note {
  margin: 4px 0;
  padding: 5px 8px;
  background: var(--am4);
  border-left: 2px solid var(--am3);
  border-radius: 0 3px 3px 0;
  font-size: 12px; color: var(--am); line-height: 1.5;
}
.cal-v7-warn-after-attention {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 12px; font-weight: 700;
  background: var(--neg-bg); color: var(--up);
  border-radius: 3px; letter-spacing: 0.3px;
}

/* §1 이력 요약 행 (stock_alert_history 최근 1건) */
.cal-status-history-row {
  margin: 3px 0;
  padding: 3px 8px;
  background: var(--bg2);
  border-left: 2px solid var(--am3);
  border-radius: 0 3px 3px 0;
  font-size: 12px; color: var(--dm); line-height: 1.5;
}
.cal-status-history-label { font-weight: 700; margin-right: 4px; }
.cal-status-history-chip {
  display: inline-block;
  margin: 0 3px;
  padding: 0 5px;
  font-size: 12px; font-weight: 600;
  background: var(--am3); color: var(--am);
  border-radius: 3px;
}

/* §20.4 모바일 ≤380px — 조건 라벨 2줄 재배치 */
@media (max-width: 380px) {
  .cal-status-detail.v3 .cal-status-table { display: block; }
  .cal-status-detail.v3 .cal-status-table thead { display: none; }
  .cal-status-detail.v3 .cal-status-table tbody,
  .cal-status-detail.v3 .cal-status-table tr { display: block; }
  .cal-status-detail.v3 .cal-status-table tr {
    padding: 4px 0;
    border-bottom: 1px dashed var(--bd);
  }
  .cal-status-detail.v3 .cal-status-table td {
    display: inline-block;
    padding: 1px 4px 1px 0;
    font-size: 12px;
  }
  .cal-status-detail.v3 .cal-status-table td.th-cond {
    display: block;
    max-width: 100%;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--tx2);
  }
}

/* §20.4 카드 높이 상한 900px */
.cal-feature-card.expanded .cal-feature-details {
  max-height: 900px;
  overflow-y: auto;
}
@media (max-width: 640px) {
  .cal-feature-card.expanded .cal-feature-details {
    max-height: 900px;
  }
}

/* design-reviewer P2 — 뉴스 출처 칩 분리 */
.cal-source-chip {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 6px;
  font-size: 12px; font-weight: 500;
  background: rgba(107, 114, 128, 0.12);
  color: var(--tx2);
  border-radius: 3px;
  white-space: nowrap;
}

/* design-reviewer P2 — 슬라이더 현재가 라벨 폭 축소 */
.stock-range.v2 .range-pcts .r-now-label {
  width: auto;
  padding: 0 8px;
}

/* design-reviewer P1 — "투자경고" 3회 반복 제거
   head의 cal-status-label 텍스트 숨김 (namecell 배지로 이미 노출)
   단 상세박스 내부 head는 유지 (sev-* 색상 변별 필요 시 label 텍스트가 배경색 단서) */
.cal-feature-details .cal-status-head .cal-status-label {
  display: none;
}
/* REQ-026 §1: cal-status-detail--reason 박스 안의 라벨은 사유 텍스트 자체이므로 표시.
   상위 rule이 의도한 namecell 중복 제거는 사유 박스 외부에만 적용.
   회귀 차단: REQ-021 v9.6에서 사유 박스 신설 시 상위 rule이 사유 텍스트까지 숨긴 누락 정정.
   참조: DOC-20260427-SPEC-001 §IV.1 (사유 박스 표시 의무). */
.cal-feature-details .cal-status-detail--reason .cal-status-head .cal-status-label {
  display: inline-block;
}
/* v9.8 DSN-010 §IV.1 — "지정 조건 상세" 라벨 폐기 (대표 본질 비판 #4 — 모호).
   16자 1줄 모바일 wrap 해소. cal-status-detail--reason modifier가 직접 사유 박스 구조 잔존. */
.cal-feature-details .cal-status-head {
  border-top: 1px dashed var(--bd);
  padding-top: 6px;
  margin-top: 6px;
}

/* design-reviewer P1 — 배지 "📅 지정 예정" 중복 날짜 제거
   namecell의 배지 내부 부기 날짜는 중복이므로 숨김.
   배지 라벨에 이모지 📅가 포함된 경우 해당 span만 hide */
.cal-feature-badges .cal-status-label-subdate,
.cal-feature-badges .cal-badge-date-extra {
  display: none;
}

/* ───── DSN-20260425-DSN-002 v8 — 시제 분리 + 복수 배지 정보 위계 ─────
   §6.1 BEM. 시제 태그 칩(파랑/주황) + 5줄 요약 + 🎯 thresholds + 통합 펼침.
   v6/v7 cal-status-* 클래스는 백워드 호환 유지(단일 배지 케이스 회귀 차단). */
:root {
  --badge-disclosure: #1F6FEB;
  --badge-predicted: #E55A2B;
  --v8-text-secondary: var(--tx2);
  --v8-text-tertiary: var(--dm);
  --v8-success: var(--pos);
  --v8-border-subtle: var(--bd);
}

.dsn-v8-block {
  border-left: 4px solid var(--bd);
  padding: 12px 14px;
  margin-top: 10px;
  background: var(--sf);
  border-radius: 0 4px 4px 0;
}
.dsn-v8-block + .dsn-v8-block { margin-top: 12px; }
.dsn-v8-block--disclosure { border-left-color: var(--badge-disclosure); }
.dsn-v8-block--predicted { border-left-color: var(--badge-predicted); }

.dsn-v8-block__header {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px;
}
.dsn-v8-block__label {
  font-size: 0.95rem; font-weight: 700; color: var(--tx);
}
.dsn-v8-block__source-note {
  font-size: 0.75rem; color: var(--v8-text-secondary); font-weight: 500;
}

.dsn-v8-tense-chip {
  padding: 2px 8px; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600;
  white-space: nowrap;
}
.dsn-v8-tense-chip--disclosure {
  background: rgba(31, 111, 235, 0.10); color: var(--badge-disclosure);
}
.dsn-v8-tense-chip--predicted {
  background: rgba(229, 90, 43, 0.10); color: var(--badge-predicted);
}

.dsn-v8-summary {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px;
  font-size: 0.875rem; line-height: 1.5;
}
.dsn-v8-summary__label {
  color: var(--v8-text-secondary); font-weight: 500; white-space: nowrap;
}
.dsn-v8-summary__value { color: var(--tx); }
.dsn-v8-summary__reason {
  grid-column: 1 / -1; padding-top: 4px; line-height: 1.55;
  color: var(--tx2); font-size: 0.8125rem;
}

.dsn-v8-thresholds { margin-top: 12px; }
.dsn-v8-thresholds__title {
  font-weight: 600; font-size: 0.875rem; color: var(--tx);
  margin-bottom: 6px;
}
.dsn-v8-thresholds__list {
  list-style: none; padding-left: 12px; margin: 0;
}
.dsn-v8-thresholds__item {
  font-size: 0.8125rem; line-height: 1.6; color: var(--tx2);
}
.dsn-v8-thresholds__item--triggered::before {
  content: "✓ "; color: var(--v8-success); font-weight: 700;
}
.dsn-v8-thresholds__item--unmet::before {
  content: "○ "; color: var(--v8-text-tertiary);
}

.dsn-v8-warning-banner {
  margin-top: 10px; padding: 8px 12px;
  background: rgba(229, 90, 43, 0.06);
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--badge-predicted);
}

.dsn-v8-extra { margin-top: 10px; }
.dsn-v8-extra summary {
  cursor: pointer; font-size: 0.8125rem; color: var(--v8-text-secondary);
  list-style: none; padding: 4px 0;
}
.dsn-v8-extra summary::-webkit-details-marker { display: none; }
.dsn-v8-extra[open] summary { margin-bottom: 8px; }
.dsn-v8-extra__definition,
.dsn-v8-extra__regulation,
.dsn-v8-extra__source {
  padding-top: 8px; margin-top: 8px;
  border-top: 1px solid var(--v8-border-subtle);
}
.dsn-v8-extra__definition h5,
.dsn-v8-extra__regulation h5 {
  font-size: 0.8125rem; font-weight: 600; color: var(--tx);
  margin-bottom: 4px;
}
.dsn-v8-extra__definition p,
.dsn-v8-extra__regulation p {
  font-size: 0.8125rem; line-height: 1.55; color: var(--tx2);
}
.dsn-v8-extra__regulation ul {
  list-style: disc; padding-left: 18px;
  font-size: 0.8125rem; line-height: 1.6; color: var(--tx2);
}
.dsn-v8-extra__source a { color: var(--badge-disclosure); }

@media (max-width: 380px) {
  .dsn-v8-summary {
    grid-template-columns: 1fr; gap: 2px 0;
  }
  .dsn-v8-summary__label { font-size: 0.75rem; }
  .dsn-v8-summary__value { font-size: 0.8125rem; padding-left: 8px; }
  .dsn-v8-block { padding: 10px 12px; }
}

.dsn-v8-thresholds__empty {
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--v8-text-tertiary);
  font-style: italic;
  background: rgba(0,0,0,0.02);
  border-radius: 4px;
}

/* ───── DSN-20260425-DSN-003 v9 — 단계 플로우 그래프 + 현재 상태 1줄 + 인과 라인 ─────
   §6.1 BEM. 노드 상태는 텍스트 prefix(● / ↗) + 테두리 형태(굵음/점선)로 색맹 분리.
*/
.dsn-v9-stage-flow {
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: var(--sf);
  border: 1px solid var(--v8-border-subtle);
  border-radius: 6px;
}

.dsn-v9-current-state {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(31, 111, 235, 0.06);
  border-left: 3px solid var(--badge-disclosure);
  border-radius: 4px;
}

.dsn-v9-causal-line {
  margin-bottom: 10px;
  padding: 6px 10px;
  background: rgba(229, 90, 43, 0.06);
  border-left: 3px solid var(--badge-predicted);
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--v8-text-secondary);
}

.dsn-v9-stage-flow__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v8-text-secondary);
  margin: 6px 0 6px;
}
.dsn-v9-stage-flow__title--sub {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--v8-border-subtle);
}

.dsn-v9-stage-flow__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.dsn-v9-stage-flow__track--main {
  font-size: 0.8125rem;
  font-weight: 500;
}
.dsn-v9-stage-flow__track--short-term {
  font-size: 0.75rem;
}

.dsn-v9-stage-flow__node {
  position: relative;
  /* v9.3.2 §II (REQ-017 사이클 2 휴지 B=a): 박스 4토큰 축소 — padding 5/10→4/8, font 0.8125→0.75rem */
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--v8-border-subtle);
  color: var(--v8-text-tertiary);
  background: rgba(0,0,0,0.02);
  white-space: nowrap;
  font-size: 0.75rem;
}
.dsn-v9-stage-flow__node--current {
  border: 2px solid var(--badge-disclosure);
  background: rgba(31, 111, 235, 0.08);
  color: var(--badge-disclosure);
  font-weight: 600;
  border-left-width: 4px;
}
/* v9.3.1 §II — prefix ::before 4종 제거 (휴지 사이클 0 결정 B=b). 노드 박스 안 라벨 단독. */
.dsn-v9-stage-flow__node--predicted {
  border: 1.5px dashed var(--badge-predicted);
  background: rgba(229, 90, 43, 0.05);
  color: var(--badge-predicted);
  font-weight: 600;
}

.dsn-v9-stage-flow__arrow {
  color: var(--v8-text-tertiary);
  font-size: 0.875rem;
  user-select: none;
  padding: 0 1px;
}

/* v9.3 §IV: 박스 안 ↘/↓ 화살표 제거 (트랙 간 → 화살표는 유지). 인과 정보는 causalLine 텍스트 + 노드 4축 위계로 보강. */

/* 모바일 ≤380px — 1열 세로 흐름 + 화살표 ↓ */
@media (max-width: 380px) {
  .dsn-v9-stage-flow__track {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }
  .dsn-v9-stage-flow__arrow {
    text-align: center;
    margin: 1px 0;
  }
  .dsn-v9-stage-flow__arrow::before {
    content: "↓";
  }
  .dsn-v9-stage-flow__arrow {
    font-size: 0;
  }
  .dsn-v9-stage-flow__arrow::before {
    font-size: 0.875rem;
  }
  .dsn-v9-stage-flow__node {
    text-align: center;
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}

/* 다크모드 — lightness +12% */
/* 고대비 — 보더 두께 강화 */
@media (prefers-contrast: more) {
  .dsn-v9-stage-flow__node--current { border-width: 3px; border-left-width: 5px; }
  .dsn-v9-stage-flow__node--predicted { border-width: 2px; }
}

/* ───── DSN-20260426-DSN-001 v9.3 §I — 노드 4축 위계 (current/upcoming/predicted-imminent/unvisited) ─────
   휴지 결정 A=c — 색 변경 0건. dash 패턴·두께·prefix 3축으로 위계 분리.
   - current(실선 2px, 좌 4px)·upcoming(굵은 점선 2.5px)·predicted-imminent(얇은 점선 1.5px)·predicted(얇은 점선 1.5px·strict 미충족 detail-only).
   - upcoming = disclosure 발효 D-1 (필연), predicted-imminent = predicted strict 3 AND 충족 (추정 임박).
*/

/* upcoming — disclosure 확정 + 발효 D-1 (필연) */
.dsn-v9-stage-flow__node--upcoming {
  border: 2.5px dashed var(--badge-disclosure);
  background: rgba(31, 111, 235, 0.06);
  color: var(--badge-disclosure);
  font-weight: 600;
  padding: 4px 10px;
}
/* v9.3.1 §II — prefix ::before 제거 (휴지 사이클 0 결정 B=b). */

/* predicted-imminent — predicted strict 3 AND 충족 (추정 임박) */
.dsn-v9-stage-flow__node--predicted-imminent {
  border: 1.5px dashed var(--badge-predicted);
  background: rgba(229, 90, 43, 0.05);
  color: var(--badge-predicted);
  font-weight: 600;
  padding: 4px 10px;
}

/* 박스 효과 영역 — upcoming variant 신규 (점선 정합) */
.dsn-v92-stage-flow__node-effect--upcoming {
  color: var(--badge-disclosure);
  border-top-style: dashed;
}

/* v9.3 다크모드 */
/* v9.3 고대비 — 두께 +1px (current/predicted 비례 강화) */
@media (prefers-contrast: more) {
  .dsn-v9-stage-flow__node--upcoming { border-width: 3.5px; }
  .dsn-v9-stage-flow__node--predicted-imminent { border-width: 2.5px; }
}

/* v9.3 §II — 헤더 뱃지 통합 click 시 카드 자동 펼침. role=button + cursor pointer + focus ring */
/* REQ-020 v9.5: legacy. DOM 출력 0건 (renderer.js v9.5 §II.3에서 .dsn-v95-effect-badge로 대체). */
.dsn-v93-header-badge {
  cursor: pointer;
  outline-offset: 2px;
}
.dsn-v93-header-badge:focus-visible {
  outline: 2px solid var(--badge-disclosure);
  outline-offset: 2px;
}
@media (hover: hover) {
  .dsn-v93-header-badge:hover {
    filter: brightness(1.05);
  }
}

/* ───── REQ-020 v9.5 §II.1 — 효과 배지 (효과+시점) ─────
   매트릭스 (v9.8 DSN-010): 거래정지(danger) / 신용불가(warning) / 단일가(info) × today / today_and_tomorrow / tomorrow.
   폐기 (DSN-010 §I.1): 거래정지 N일 후·단일가 3~5일 enum + tomorrow_maybe (대표 본질 비판 #1·#2 + togusa SSOT, REQ-024 §IX-3).
   명세: DOC-20260427-DSN-005 / DOC-20260427-DSN-010 / DOC-20260427-SPEC-001 §IX-3. */
.dsn-v95-effect-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  max-width: 100%;
}
.dsn-v95-effect-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 999px;  /* REQ-031 — pill 통일 (헤더 효과 배지도 일관 정합) */
  font-size: 12px;        /* REQ-045 §A — 헤더 배지 통일 (0.72rem → 11px) */
  font-weight: 600;
  letter-spacing: 0.01em; /* REQ-045 §A — letter-spacing 통일 */
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  outline-offset: 2px;
}
.dsn-v95-effect-badge:focus-visible {
  outline: 2px solid currentColor;
}
@media (hover: hover) {
  .dsn-v95-effect-badge:hover {
    filter: brightness(1.05);
  }
}

/* 효과별 색상 (severity SSOT) */
.dsn-v95-effect-badge--trade-halt {     /* danger — 거래정지 */
  background: rgba(220, 38, 38, 0.10);
  color: var(--cal-sun);
  border: 1px solid rgba(220, 38, 38, 0.35);
}
/* REQ-082 Phase2 — 상한가 effect (햇살 정체성 그라데이션 + 진한 빨강 + 위계 +1단계) */
.dsn-v95-effect-badge--limit-up {
  background: linear-gradient(135deg, var(--am4) 0%, var(--am3) 100%);
  color: var(--neg);
  border: 1px solid var(--am3);
  font-weight: 700;
}
.dsn-v95-effect-badge--credit-block {   /* warning — 신용불가 */
  background: rgba(217, 119, 6, 0.10);
  color: var(--am);
  border: 1px solid rgba(217, 119, 6, 0.35);
}
.dsn-v95-effect-badge--single-price {   /* info — 단일가 */
  background: rgba(29, 78, 216, 0.08);
  color: var(--down);
  border: 1px solid rgba(29, 78, 216, 0.30);
}

/* v9.8 DSN-010 — tomorrow_maybe BEM modifier 폐기 (predicted_shadow 부활 폐기 정합) */

/* +N 더보기 */
.dsn-v95-effect-badge--more {
  background: var(--surface-2, #F3F4F6);
  color: var(--text-secondary, #6B7280);
  border: 1px dashed currentColor;
  font-weight: 500;
}

/* 모바일 ≤380px — 폰트/패딩 축소 (FLR feedback_mobile_equal_desktop) */
@media (max-width: 380px) {
  .dsn-v95-effect-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
  }
}

/* 다크모드 — lightness +12% 톤 보정 (DSN-005 §IV 정합) */
/* 고대비 모드 (a11y) */
@media (prefers-contrast: more) {
  .dsn-v95-effect-badge {
    border-width: 2px;
    background: transparent;
  }
  .dsn-v95-effect-badge--limit-up {
    border-width: 2px;
    background: transparent;
    color: var(--neg);
  }
}

/* ───── Q-20260519-CYCLE19-009 (design 안 B) — LU(상한가 union) 좌측 accent bar ─────
   목적: kiwoom latest_stocks 외 build_daily union 추가된 상한가 종목 시각 구분.
   레이어: effect-badge 시스템과 분리 (border-left vs inline badge — 중복 X, layer 다름).
   토큰: #C53939 (한국 증시 빨강, 본 파일 다수 사용 — .stock-pct.up, .section-title.up 등 정합).
   대비: 본문 #1A1D26 / 배경 var(--bg2)=#F2F4F8 → border#C53939 = WCAG 6.18:1 PASS.
   모바일: box-sizing border-box 전역 적용 → 카드 전체 폭 무영향, 내부 content 3px 우측 이동만.
   a11y: renderer.js에서 aria-label="상한가 종목" 부착.
*/
.cal-feature-card--lu {
  /* 밤사용자 P3: 좌측 경고바 3→4px (본문 대비 강화, 경고 강도 전달). */
  border-left: 4px solid var(--up);
}
/* 다크모드 — 톤 보정 (effect-badge limit-up 다크모드 color #FCA5A5와 일관) */
/* 고대비 모드 — border 강조 (a11y) */
@media (prefers-contrast: more) {
  .cal-feature-card--lu {
    border-left-width: 4px;
  }
}

/* ───── DSN-20260425-DSN-004 v9.1 — 시제 칩 [내일 가능] + 법무 푸터 ─────
   §G.1 dsn-v9-tense-chip--imminent: 점선 1.5px·weight 700·predicted 색 토큰 #E55A2B 유지·채도 +0.04.
   §G.2 dsn-v91-disclaimer-footer: 0.75rem · var(--text-secondary) · 펼침 최하단 · 미세 구분선 1px.
*/
.dsn-v9-tense-chip--imminent {
  background: rgba(229, 90, 43, 0.14);   /* base 0.10 → 0.14 (채도 +0.04) */
  color: var(--am);
  border: 1.5px dashed var(--am);          /* 점선 1.5px */
  font-weight: 700;                       /* base 600 → 700 (D+1 강조) */
}
.dsn-v9-tense-chip--imminent::before {
  content: "📅 ";
  margin-right: 2px;
}

/* v9.1 §IX 함정 #2 — backend next_trading_day_source ∈ {estimated, fallback_*} 시 시각 cue.
   verified는 cue 없음 (기본 imminent 칩 외관 그대로).
*/
.dsn-v9-tense-chip--imminent[data-source-grade="estimated"],
.dsn-v9-tense-chip--imminent[data-source-grade="fallback_homepage"],
.dsn-v9-tense-chip--imminent[data-source-grade="fallback_legacy"] {
  /* base 점선 유지하되 살짝 흐림으로 grade 차이 표현 */
  border-style: dotted;
  background: rgba(229, 90, 43, 0.10);   /* 채도 -0.04 (verified 대비 약화) */
}
.dsn-v9-tense-chip__grade-warn {
  display: inline-block;
  margin-right: 2px;
  font-size: 0.7em;
  vertical-align: middle;
}

.dsn-v91-disclaimer-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.08));  /* DSN-004 §D.3·§G.2 명세 dashed (영역 약 분리) */
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-secondary, #6B7280);
}
.dsn-v91-disclaimer-footer__icon {
  display: inline-block;
  margin-right: 4px;
  color: var(--text-secondary, #6B7280);
}
.dsn-v91-disclaimer-footer__text {
  display: inline;
}

/* v9.8 DSN-010 §V.4 — 단일 카드 공유 (#stock-*) 진입 시 micro 면책.
   페이지 푸터 가시성 ↓ 보완. window.location.hash 매칭 시 활성. */
.dsn-v98-micro-disclaimer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.08));
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary, #6B7280);
  text-align: center;
}
.dsn-v98-micro-disclaimer__icon {
  display: inline-block;
  margin-right: 3px;
}
/* 다크모드 — imminent 칩 lightness +12% / 푸터 var 자동 보정 */
/* 고대비 — 점선/구분선 두께 강화 */
@media (prefers-contrast: more) {
  .dsn-v9-tense-chip--imminent { border-width: 2px; font-weight: 800; }
  .dsn-v91-disclaimer-footer { border-top-width: 2px; font-weight: 600; }
}

/* ───── DSN-20260425-DSN-005 v9.2 — 그래프 박스 자동 효과 + predicted 위계 분리 ─────
   §IV.1 dsn-v92-stage-flow__node-effect: 노드 박스 하단 발효일+자동효과 1줄 (휴지 약한 명사형).
   §IV.2 dsn-v92-predicted-detail-only: 펼침 영역 안 strict 미충족 predicted 상세.
   ※ §IV.3 트리거 핀(dsn-v92-trigger-pin)은 REQ-064 (2026-04-28)에서 제거됨 — 라벨 모호성.
*/

/* §I 노드 박스 — 라벨/효과 분리. 기존 inline span을 inline-flex column으로 보강 (효과 div 수직 정렬용) */
.dsn-v9-stage-flow__node {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.dsn-v9-stage-flow__node-label {
  display: block;
}

.dsn-v92-stage-flow__node-effect {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--v8-border-subtle, rgba(0,0,0,0.08));
  /* v9.3.2 §II (REQ-017 사이클 2 휴지 B=a): font 0.7→0.65rem, max-width 160→130px */
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--v8-text-secondary, #6B7280);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.dsn-v92-stage-flow__node-effect--current {
  font-weight: 600;
  color: var(--v8-text-primary, #1F2937);
}
.dsn-v92-stage-flow__node-effect--upcoming {
  color: var(--badge-disclosure, #1F6FEB);
  font-weight: 500;
}
.dsn-v92-stage-flow__node-effect--predicted {
  color: var(--badge-predicted, #E55A2B);
  font-weight: 500;
  border-top-style: dashed;
}

/* 모바일 ≤380px — 박스 가로폭 좁아짐. ellipsis 폴백 + 박스 효과 영역 폰트 살짝 축소 */
@media (max-width: 380px) {
  .dsn-v92-stage-flow__node-effect {
    font-size: 0.75rem;
    max-width: 100%;
    margin-top: 3px;
    padding-top: 3px;
  }
}

/* 다크모드 — predicted 점선 색 lightness +12% (DSN-005 §VIII) */
/* REQ-019 §III (DSN-004 v9.4) — 투자경고 예고 upcoming 노드 진입 임계가 5줄 영역.
   __node-effect 형제 영역 (1줄 효과는 잔존, 그 아래 5줄 추가).
   P0 차단: max-width 130px 유지 (노드 컨테이너 align-items: stretch — 자식 너비가 부모를 확장.
   200px 시 trackMain 5노드 가로 배치 깨짐 → 130px + white-space normal로 5~7줄 wrap). */
.dsn-v94-stage-flow__entry-window {
  margin-top: 6px;
  padding: 6px 8px 5px;
  border-top: 1px dashed var(--badge-disclosure, #1F6FEB);
  background: rgba(31, 111, 235, 0.04);
  border-radius: 0 0 4px 4px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--v8-text-secondary, #6B7280);
  font-weight: 400;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: left;
  max-width: 130px;
  word-break: keep-all;
}
.dsn-v94-stage-flow__entry-window-line--primary {
  font-weight: 600;
  color: var(--v8-text-primary, #1F2937);
  margin-bottom: 2px;
}
.dsn-v94-stage-flow__entry-window-line--threshold {
  font-weight: 600;
  color: var(--badge-disclosure, #1F6FEB);
  margin-bottom: 3px;
}
.dsn-v94-stage-flow__entry-window-line--and {
  color: var(--v8-text-secondary, #6B7280);
  padding-left: 2px;
  margin-bottom: 1px;
}
.dsn-v94-stage-flow__entry-window-line--assumption {
  margin-top: 3px;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--v8-text-tertiary, #9CA3AF);
}

/* 모바일 ≤380px — 박스 가로폭 좁아짐. 1열 세로 fallback 시 자연 흐름 */
@media (max-width: 380px) {
  .dsn-v94-stage-flow__entry-window {
    max-width: 100%;
    font-size: 0.75rem;
    padding: 5px 6px 4px;
  }
  .dsn-v94-stage-flow__entry-window-line--assumption {
    font-size: 0.75rem;
  }
}

/* 다크모드 — DSN-005 v9.2 정합 (lightness +12%) */
/* 고대비 */
@media (prefers-contrast: more) {
  .dsn-v94-stage-flow__entry-window {
    border-top-width: 2px;
    background: transparent;
  }
}

/* §II 펼침 영역 predicted detail-only */
.dsn-v92-predicted-detail-only {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--badge-predicted, var(--am));
  background: rgba(229, 90, 43, 0.04);
  border-radius: 4px;
}
.dsn-v92-predicted-detail-only__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--badge-predicted, #E55A2B);
  margin-bottom: 6px;
}
.dsn-v92-predicted-detail-only__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dsn-v92-predicted-detail-only__item {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 4px 0;
}

/* REQ-064 (2026-04-28): §III 트리거 핀(.dsn-v92-trigger-pin) CSS rule 제거 — 라벨 모호성 (대표 라이브 발화).
   detail-only / node-effect rule은 보존. 부활 필요 시 git history (commit f3c0da7 이전) 복원. */

/* 고대비 — detail-only / node-effect 보더 강화 (트리거 핀 rule 삭제됨) */
@media (prefers-contrast: more) {
  .dsn-v92-predicted-detail-only { border-left-width: 5px; }
  .dsn-v92-stage-flow__node-effect--predicted { border-top-width: 2px; }
}

/* ─────────────────────────────────────────────────────────────────
   cycle22 P1 (2026-05-20) — 일봉캔들 확대 차트 (SPEC-001 §3~§5)
   100m1s 토큰 재사용: --am/--am2/--am3/--am4 햇살 + --pos/--neg + --g04~--g80.
   자체 SVG (라이브러리 의존 0). 13종 보조지표 layer.
   accordion 인터랙션 (.cal-feature-card.chart-expanded — 기존 .expanded와 분리).
─────────────────────────────────────────────────────────────────── */

/* 미니캔들 트리거 — 클릭 가능 hint */
.cal-feature-candles20[data-expand-trigger="chart"] {
  cursor: pointer;
  transition: filter 200ms ease;
}
.cal-feature-candles20[data-expand-trigger="chart"]:hover {
  filter: brightness(1.05);
}
.cal-feature-candles20[data-expand-trigger="chart"]:focus-visible {
  outline: 2px solid #0064FF;
  outline-offset: 2px;
  border-radius: 4px;
}
/* R49 E1 (조니 2심 단정 2 — 미니캔들 26px < 44) — 시각(78×26/110×32) 불변, 클릭 가능 트리거 변형만
   터치존 ≥44px 투명 오버레이 (.cal-term-tip::before R28 P1④ 동형 — base가 이미 position:relative).
   z-index 1 = R44 #4 동형(같은 카드 행의 비인터랙티브 positioned 장식 위 hit 회수). 상하 ±9px 확장
   — 카드 head(클릭 핸들러 무) 텍스트 행만 점유, 인접 인터랙티브 충돌 0 (실측). */
.cal-feature-candles20[data-expand-trigger="chart"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  z-index: 1;
}

/* 확대 차트 슬롯 — accordion expand (max-height 트랜지션) */
.cal-feature-chart-expanded {
  display: none;
  margin: 8px 12px 4px;
  padding: 12px;
  background: var(--sf);  /* R15: #FFFFFF → --sf (라이트 흰 동일 / 다크 표면) */
  border: 1px solid var(--am4);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px var(--g04);
}
/* P0-11 Fix-37 (2026-05-21 12:44 KST 대표 verbatim "모바일 버전과 데스크탑 버전을 다르게 가야할거같다"):
   모바일 본문 별건 layout — margin 12 → 6, padding 12 → 8 본문 축소 (좁은 screen 본문 가용 width 확보).
   이전: card_width - 48px (margin 24 + padding 24)
   본 Fix-37 후: card_width - 28px (margin 12 + padding 16)
   image #10 76d1f57d (갤럭시 S25 412px viewport) 본문 chart inner width 본문 확보 = +20px */
@media (max-width: 640px) {
  .cal-feature-chart-expanded {
    margin: 4px 6px 4px;
    padding: 8px;
    border-radius: 6px;
  }
}
.cal-feature-card.chart-expanded .cal-feature-chart-expanded {
  display: block;
  animation: chartExpandIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes chartExpandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cal-feature-card.chart-expanded .cal-feature-chart-expanded {
    animation: none;
  }
}

/* toggle bar — 13종 chip 가로 스크롤 (SPEC §7.2 인지 부담) */
.cal-chart-toggle-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--am4);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.cal-chart-toggle-bar::-webkit-scrollbar {
  height: 4px;
}
.cal-chart-toggle-bar::-webkit-scrollbar-thumb {
  background: var(--am4);
  border-radius: 4px;
}

.cal-chart-toggle {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 28px; /* mobile touch 44pt는 padding+font로 보강 */
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--am4);
  border-radius: 999px;
  background: transparent;
  color: var(--dm);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}
.cal-chart-toggle:hover {
  background: var(--am4);
  border-color: var(--am);
  color: var(--tx2);
}
.cal-chart-toggle.on {
  background: var(--am3);
  border-color: var(--am);
  color: var(--am);
}
.cal-chart-toggle:focus-visible {
  outline: 2px solid #0064FF;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .cal-chart-toggle {
    min-height: 32px; /* 모바일 44pt 영역 보강 */
    font-size: 12px;
  }
}

/* main pane — SVG */
.cal-chart-main {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 6px;
}
.cal-chart-main-svg {
  width: 100%;
  height: auto;
  max-height: 440px;
  display: block;
}
@media (max-width: 768px) {
  .cal-chart-main-svg {
    max-height: 320px;
  }
}

/* sub-pane */
.cal-chart-sub-panes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.cal-chart-sub-pane {
  position: relative;
  border-top: 1px dashed var(--g04);
  padding-top: 4px;
}
.cal-chart-sub-label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dm);
  pointer-events: none;
  background: var(--chart-label-bg);  /* R15: 라이트 0.85 흰 / 다크 함몰 */
  padding: 1px 4px;
  border-radius: 3px;
}
.cal-chart-sub-svg {
  width: 100%;
  height: 80px;
  display: block;
}
@media (min-width: 768px) {
  .cal-chart-sub-svg { height: 100px; }
}
@media (min-width: 1024px) {
  .cal-chart-sub-svg { height: 120px; }
}
@media (min-width: 1440px) {
  .cal-chart-sub-svg { height: 140px; }
}

/* close button */
.cal-chart-close {
  display: block;
  margin: 8px auto 0;
  min-height: 36px;
  padding: 6px 16px;
  font-size: 12px;
  color: var(--dm);
  background: var(--g04);
  border: 1px solid var(--am4);
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease;
}
.cal-chart-close:hover {
  background: var(--am4);
  color: var(--tx2);
}
.cal-chart-close:focus-visible {
  outline: 2px solid #0064FF;
  outline-offset: 2px;
}

/* 빈 데이터 placeholder */
.cal-chart-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--dm);
  font-size: 12px;
  background: var(--g04);
  border-radius: 6px;
}

/* Layer 3 crosshair tooltip (Phase 2.2 crosshair.js 정합) */
.cal-chart-tooltip {
  position: absolute;
  z-index: 30;
  background: var(--chart-label-bg);  /* R15: 라이트 흰 / 다크 함몰 (crosshair tooltip) */
  border: 1px solid rgba(196, 153, 48, 0.4);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--g80);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  min-width: 116px;
  pointer-events: none;
}
.cal-chart-tooltip-date {
  font-weight: 700;
  color: var(--am);
  margin-bottom: 4px;
  font-size: 12px;
}
.cal-chart-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cal-chart-tooltip-row span {
  color: var(--dm);
}
.cal-chart-tooltip-row strong {
  color: var(--g80);
  font-weight: 600;
}

/* 다크모드 (SPEC §3.3 보정) */
/* ─────────────────────────────────────────────────────────────────
   cycle22 P1 END
─────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   cycle22 Phase 7d-1 — ChartTV (TradingView v5) wrapper UI
   REQ DOC-20260521-REQ-001 §5 토글 UI chip bar verbatim
─────────────────────────────────────────────────────────────────── */

.cal-chart-tv-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 0;
}

.cal-chart-tv-toggles-host {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.cal-chart-tv-toggle-bar {
  /* cycle23 toggle-fibonacci-only (2026-05-22 17:58 KST 대표 verbatim "터글버튼의 글자와 크기가 상대적으로 너무 크다"):
     gap 6→4 / padding 4 8→2 6 본문 축소 본질 (chip 1개 본문 본질 cascade) */
  display: flex;
  gap: 4px;
  padding: 2px 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.cal-chart-tv-toggle-bar::-webkit-scrollbar { height: 4px; }
.cal-chart-tv-toggle-bar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 2px;
}

.cal-chart-tv-chip {
  /* cycle23 toggle-fibonacci-only (2026-05-22 17:58 KST 대표 verbatim "터글버튼의 글자와 크기가 상대적으로 너무 크다"):
     min-width 48→36 / height 28→20 / padding 0 10→0 6 / font-size 12→10 / border-radius 14→10 본문 축소 본질
     chip 1개 본문 본질 (fibonacci만) → 본문 본문 visual 본문 작게 본질 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--g60);
  background: var(--g04);
  border: 1px solid var(--g08);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cal-chart-tv-chip:hover {
  background: var(--g08);
  color: var(--g80);
}

.cal-chart-tv-chip.is-on {
  background: var(--am);
  color: #fff;
  border-color: var(--am);
}

.cal-chart-tv-chip.is-on:hover {
  background: var(--am);
}

.cal-chart-tv-chip:focus-visible {
  outline: 2px solid var(--am);
  outline-offset: 2px;
}

/* category 별 hue 차별 (overlay = 햇살 톤 / sub-pane = blue / marker = pink / drawing = neutral) */
.cal-chart-tv-chip[data-category="sub-pane"].is-on {
  background: #0064FF;
  border-color: var(--down);
}
.cal-chart-tv-chip[data-category="sub-pane"].is-on:hover {
  background: #0050CC;
}

.cal-chart-tv-chip[data-category="marker"].is-on {
  background: #EC4899;
  border-color: var(--ru);
}
.cal-chart-tv-chip[data-category="marker"].is-on:hover {
  background: #C53980;
}

.cal-chart-tv-chip[data-category="drawing"].is-on {
  background: #6B7A99;
  border-color: var(--down);
}

.cal-chart-tv-main {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cal-chart-tv-attr {
  width: 100%;
  text-align: right;
  padding-right: 8px;
}

@media (max-width: 360px) {
  /* cycle23 toggle-fibonacci-only: base 축소 cascade 본문 정합
     min-width 40→32 / height 24→18 / font-size 11→9 / padding 0 8→0 5 본문 본질 */
  .cal-chart-tv-chip {
    min-width: 32px;
    height: 18px;
    font-size: 12px;
    padding: 0 5px;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   P0-25 (2026-05-22 00:00 KST 대표 결정 영웅문 paradigm 채택):
   Fibonacci handle = 영웅문 inline ↓ marker 정합 (anchor 시각 cue만, drag trigger 본문 chart canvas 본문 본질).
   본문 P0-24 Fix-82 pulse 애니메이션 + 적색 glow + :hover scale 1.25 본문 본문 본문 모두 폐기 (paradigm 변경).
   handle inline style 본문 본문 본문 (fibonacci.js _createHandleEl) — 본 CSS 본문 본문 정적 fallback 본문 본문 본문 보조 본질.

   §16 self-catch (Fix-86 본문 본질 본문 본문):
     - P0-24 .cal-chart-tv-fib-handle:hover { transform: scale(1.25); ... } 본문에 box-shadow !important 본문만 본문
       transform: scale(1.25) !important 부재 → animation 본문 transform: scale(1.0~1.10) 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문
       (CSS animation 본문 keyframe-based animations 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 :hover 본문 본문 본문 본문 본문 본문 본문 본문 unless :hover 본문 !important 본문 명시).
     - WebSearch 본문 PASS: keyframe animations have a higher precedence than non-important :hover 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문
       (https://www.stefanjudis.com/today-i-learned/keyframe-animations-have-a-special-role-in-the-css-cascade/)
     - P0-25 paradigm 변경 본문 pulse 애니메이션 자체 폐기 → :hover scale 본문 본문 본문 본문 본문 본문 본문 (handle pointer-events: none + cursor: default 본문 정합)
     - Fix-86 본질 = animation 자체 폐기 본문 본문 본문 본문 (animation-play-state: paused 또는 !important transform 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문)

   §11.15 외부 spec PASS:
     - https://www.stefanjudis.com/today-i-learned/keyframe-animations-have-a-special-role-in-the-css-cascade/
       "Keyframe animations have a higher precedence than any other 'non-important' style"
     - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
     - repo verbatim grep: news.css 본문 @keyframes 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 본문 (lut-detail-in / cardHighlight / chartExpandIn 등)
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cal-chart-tv-fib-handle {
    animation: none !important;
    transition: none !important;
  }
}

/* ───── feat/market-context (조니 확정 spec 5건, 2026-06-12) ───── */

/* ③ NXT ghost 마커 — 위계 최하위 (테마>출처>NXT). 솔리드 칩 금지: 투명 배경 + 가는 보더 + muted 글자.
   R46 P1-2 (조니 원 단정 복원, 2026-06-12 19:37) — 출처 칩 미만 ghost 1단계 추가 격하:
   11px/400/rgb(100,110,128). 12px sweep(R26) 본문 가독 원칙의 예외 — 본문이 아닌 위계 최하위
   보조 마커(의미는 aria-label 보존). radius = cal-ind-chip 토큰(999px), flex-shrink:0. */
.cal-nxt-marker {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  padding: 1px 5px;
  border: 1px solid var(--dm);
  border-radius: 999px;
  color: rgb(100, 110, 128);
  background: transparent;
  flex-shrink: 0;
  letter-spacing: 0;
}
/* R48 P1-3 (조니 R47 1심 ③ — NXT 마커 다크 3.45:1 AA 미달, "격하는 위계의 격하지 가독의 격하가
   아니다") — 다크 전용 글자색 상향. 라이트 muted rgb(100,110,128)는 다크 표면(#23211A)에서 3.15:1.
   #989080(웜 팔레트 정합) = 5.10:1 on --dk-sf / 5.62:1 on --dk-bg (AA 4.5 충족, --dk-tx2 7.7:1 미만
   유지 — 11px/400/투명 bg ghost 형태 불변 = 위계 최하위 기단정(테마>출처>NXT) 보존, 색만 가독선 위로). */
:root[data-theme="dark"] .cal-nxt-marker { color: #989080; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal-nxt-marker { color: #989080; }
}

/* ④ 시총 메타 span — var(--tx2)/500/nowrap (거래대금 골드와 위계 분리, 절단 금지·2행 낙하 허용) */
.cal-feature-meta .cal-mcap { color: var(--tx2); font-weight: 500; font-size: 12px; white-space: nowrap; }

/* ① 시장 지수 — 코스피·코스닥 2카드 블록. 카드 column 레이아웃은 .nightly-us-cards 상속(중복 정의 0). */
.kr-indices-block { margin-bottom: 14px; }
.kr-indices-asof {
  font-size: 12px;
  color: var(--dm-hi);
  margin-bottom: 6px;
  text-align: right;
}
/* KR 변종 — 일봉 시리즈 데이터 자체 부재: 회색 빈 박스 placeholder 대신 셀 미렌더 ("빈자리는 정직하다") */
.cal-feature-card--idx-kr .cal-candles20-empty { display: none; }
/* range_240d 실가용 일수 정직 표기 ("61일 레인지") — 레인지 바 직하 1줄 */
.idx-range-days-note {
  font-size: 12px;
  color: var(--dm-hi);
  text-align: right;
  padding: 0 12px 6px;
}

/* ② 장중 글로벌 지표 — micro-stat 그리드 (카드 아님). 3종(나스닥 선물·원/달러·WTI) 가용 항목만,
   390px 1×3 균형 / 항목 감소 시 자연 축소 (auto-fit). */
.glb-stats { margin: 0 0 18px; }
.glb-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.glb-stats-title { font-size: 12px; font-weight: 700; color: var(--tx2); }
.glb-stats-asof { font-size: 12px; color: var(--dm-hi); }
.glb-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px 12px;
}
.glb-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.glb-stat-label { font-size: 12px; font-weight: 600; color: var(--tx2); white-space: nowrap; }
/* Q-20260613-165 ② 데이마켓 가드 — 미10년물 항목 자체 시점 각주("M/D 마감"). 라벨 옆 작게·흐리게.
   ^TNX 가 24h 갱신 아님(미장 시간만 봉) → 섹션 asof 와 다른 시점을 항목이 자체 운반(FLR-AGT-002 정직).
   다크모드 가독성: var(--dm-hi) 토큰(라이트/다크 양쪽 대비 확보 — 정보 손실 0). */
.glb-stat-note { font-size: 10px; font-weight: 500; color: var(--dm-hi); margin-left: 4px; white-space: nowrap; }
/* Q-20260613-166 — 미 선물 3종 1줄 압축(조니 조건 ②). 묶음 항목은 그리드 1행 풀폭(auto-fit 셀 비대 방지).
   라벨 위 / 3종 인라인 아래. 390px: 1행 우선 + 좁으면 자연 wrap(오버플로 0 — 값 nowrap·row만 wrap). */
.glb-stat--fut { grid-column: 1 / -1; }
/* feat/market-context ④ — 스파크 추가로 baseline→center(라벨·미니추이·등락률 수직 정렬). gap 소폭 확대. */
.glb-fut-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.glb-fut-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.glb-fut-nm { font-size: 13px; font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; }
/* feat/market-context ④ (대표 catch 2026-06-14 "선물 숫자만 → 신뢰 불가, 스파크라인 미니 추이 추가") —
   선물 미니 추이. 시장지수 스파크라인(viewBox 60×32) 재사용, 컴팩트(38×16)로 라벨↔등락률 사이 인라인.
   SVG 는 컨테이너 크기 추종 → 라인/기준선 비율 유지. 390px 에서 3종 wrap 안정(셀 비대 0). */
.glb-fut-spark { display: inline-block; width: 46px; height: 18px; flex: 0 0 auto; opacity: 0.95; }
.glb-fut-spark svg { width: 100%; height: 100%; display: block; }
.glb-fut-chg { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.glb-fut-chg.up { color: var(--up); }
.glb-fut-chg.down { color: var(--down); }
.glb-fut-chg.flat { color: var(--dm-hi); }
.glb-fut-sep { color: var(--bd); font-size: 12px; }
.glb-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.glb-stat-delta { font-size: 12px; font-weight: 600; white-space: nowrap; }
.glb-stat-delta.up { color: var(--up); }
.glb-stat-delta.down { color: var(--down); }
.glb-stat-delta.flat { color: var(--dm-hi); }

/* ① 접힘 미니요약 3종("코스피 · 코스닥 · 나스닥")이 390px에서 행 낙하(+29px) → 헤더 1줄 고정.
   본 섹션 한정 shrink+ellipsis (타 섹션 요약은 짧아 무영향 — 스코프 격리). y 무회귀 (Δ0). */
#nightly-us .pm320-section-summary {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* R46 P0-1 — "나스닥선물" 라벨 확장 후 390px 1줄 완전 노출: 자간 미세 압축 (12px 플로어 준수). */
  letter-spacing: -0.45px;
}
#nightly-us .pm320-section-header { gap: 3px; }
#nightly-us .pm320-section-chevron { margin-left: 0; }
/* spec ① verbatim "접힘 헤더 미니요약 1줄" — 본 섹션 헤더 1줄 강제 (390px 3종 요약 가용폭 확보:
   nowrap + gap 10→6 + 요약 12px[플로어 준수]). 초과분(320px 등)은 ellipsis 정직 절단. */
#nightly-us .pm320-section-header { flex-wrap: nowrap; gap: 6px; }
#nightly-us .pm320-section-summary { font-size: 12px; }
/* 1줄 헤더 마감 — 제목("시장 지수") 공백 줄바꿈 차단 + headline 고정폭 + 요약 우측 정렬 유지(margin-auto).
   부족폭은 요약 ellipsis가 흡수 (제목·chevron 불변). */
#nightly-us .nightly-us-title { white-space: nowrap; }
#nightly-us .pm320-section-headline { flex: 0 0 auto; }
#nightly-us .pm320-section-summary { margin-left: auto; }