/* =====================================================================
   daily.css — 자동발행 증시 글 공통 UI (override sheet, v2)
   ---------------------------------------------------------------------
   각 자동글의 inline <style> "뒤에" 로드 → 동일 specificity 클래스 규칙을
   "나중 로드"로 이긴다. 인라인 element style(본문 div)만 !important 로 덮는다.
   /css/* 는 no-store → 이 한 파일만 고치면 전 글 즉시 반영(번들 bump 불필요).

   설계 원칙 (모바일 리딩 리서치 기반: Material 3 / USWDS / UXPin / WCAG)
   - 본문 16px, line-height 1.7, word-break:keep-all (한/일/중 줄바꿈 정리)
   - measure 50~75자 → 폰에서 좌우 거터 최소화로 폭 확보 (edge-to-edge)
   - **프로즈(글)는 라운드 테두리 박스로 감싸지 않는다.** 좌우 여백이 두 번
     낭비되기 때문(바깥 margin + 안쪽 padding). 대신 "상단 가로 hairline" 으로
     영역을 구분하고, 본문은 화면 폭 - 작은 거터 만큼 꽉 쓴다.
   - **테이블/데이터 카드(지수·Mag7·히트맵·등락표·캘린더)는 테두리 유지** —
     구조 이해에 테두리가 필요하기 때문.
   - 상단 스크롤 진행률 바(blogReadingAids.js)로 현재 위치 표시.
   ===================================================================== */

/* ---------- 1. 팔레트 (변수만 덮으면 var() 쓰는 인라인 규칙 전부 반영) ---------- */
:root{
  --bg:#070a12; --surface:#101725; --surface2:#182234; --border:#222f47; --hair:#1a2740;
  --accent:#5cc8ff; --accent2:#ff7a45; --accent3:#5fe0a8; --gold:#ffce5c;
  --text:#e8eef9; --text-dim:#93a2bd; --red:#ff5a78;
  --up-strong:#1f9d80; --up:#2bcf8a; --flat:#93a2bd; --down:#ef5a6e; --down-strong:#c62f43;
}
body.convention-kr{
  --up-strong:#d23145; --up:#ff6373; --flat:#93a2bd; --down:#54adf7; --down-strong:#1f74d6;
}

/* ---------- 2. 타이포 — 시스템 폰트 우선 + 줄바꿈 정리 + 16px ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard Variable','Pretendard',
              'Noto Sans KR','Noto Sans JP','Noto Sans SC','Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.72; word-break:keep-all; overflow-wrap:anywhere; letter-spacing:0.003em;
}
.container{ max-width:720px; }

/* =====================================================================
   3. 프로즈(글) 블록 — 박스 제거 → 상단 hairline + 풀폭 (좌우 거터 14px)
   ===================================================================== */
.summary-card,.tldr-box,.bottom-line,.news-card,.fact-check,.disclaimer-top,
.watch-card,.scen-card,.footer-disclaimer,.related{
  margin:0; border:none; border-radius:0; box-shadow:none;
  background:transparent; padding:16px 14px; border-top:1px solid var(--hair);
}
/* 강조 블록(요약/결론/팩트체크/TL;DR): 라운드 박스 대신 풀블리드 옅은 틴트 +
   좌측 3px 액센트 바(둘러싸는 사각형 아님). 좌우 여백 0 → 폭 최대. */
.summary-card{ background:linear-gradient(180deg,rgba(92,200,255,.07),transparent); border-left:3px solid var(--accent); padding-left:13px; }
.bottom-line{ background:linear-gradient(180deg,rgba(95,224,168,.06),transparent); border-left:3px solid var(--accent3); padding-left:13px; }
.fact-check{ background:transparent; border-left:3px solid var(--up); padding-left:13px; }
.tldr-box{ background:linear-gradient(180deg,rgba(255,206,92,.06),transparent); border-left:3px solid var(--gold); padding-left:13px; }
.watch-card{ background:transparent; border-left:3px solid var(--gold); padding-left:13px; }
.disclaimer-top{ background:transparent; color:#b9a878; font-size:12.5px; border-top:none; padding:10px 14px 2px; }

/* 프로즈 내부 타이포 */
.summary-card{ font-size:15.5px; line-height:1.78; color:var(--text); }
.summary-card strong{ color:var(--accent); } .summary-card em{ color:var(--accent3); font-style:normal; font-weight:700; }
.bottom-line{ font-size:15px; line-height:1.8; }
.bottom-line h3,.watch-card h3,.tldr-box h3{ font-size:12.5px; letter-spacing:0.14em; margin-bottom:9px; }
.tldr-box li{ font-size:14.5px; line-height:1.7; border-bottom:1px dashed var(--hair); padding:7px 0 7px 18px; }
.tldr-box li:last-child{ border-bottom:none; }
.scen-grid{ margin:0; gap:0; }
.scen-card{ border-top:1px solid var(--hair); }
.scen-card:first-child{ border-top:none; }
.scen-card p{ font-size:14px; line-height:1.7; }
.news-card{ }
.news-card + .news-card{ border-top:1px solid var(--hair); }
.news-card h4{ font-size:15.5px; line-height:1.45; }
.news-card p{ font-size:14.5px; line-height:1.72; color:#b3c0d8; }
/* 뉴스카드 하단 출처 표기도 에메랄드로 통일 (파란색 → 조화) */
.news-card .src{ color:var(--text-mute,#6f7f9a); }
.news-card .src a{ color:#7fe7c0; text-decoration:none; }
.news-card .src a:hover{ color:#bff3da; text-decoration:underline; }
.news-card .ntag{ color:var(--accent3); border-color:rgba(95,224,168,.4); }
/* 빈 태그 알약 숨김 — 일부 슬롯(us-close/kr-open/us-premarket)이 tag 를 안 채워
   빈 테두리만 한 줄 차지하던 문제. :empty 라 채워진 태그(반도체·정책 등)는 그대로. */
.news-card .ntag:empty{ display:none; }
.footer-disclaimer{ font-size:11.5px; line-height:1.9; color:var(--text-dim); margin-top:8px; }
/* 출처 & 면책 — 에메랄드 톤으로 조화 */
.footer-disclaimer strong{ color:var(--accent3); }
/* 날 URL → 출처명 버튼(칩). 부드러운 에메랄드, 탭하면 연결(↗). */
.lp-src-chip{
  display:inline-block; margin:4px 6px 0 0; padding:3px 11px 4px;
  font-size:12px; font-weight:600; line-height:1.5; letter-spacing:0.01em;
  color:#86ead0; background:rgba(95,224,168,.10);
  border:1px solid rgba(95,224,168,.30); border-radius:999px;
  text-decoration:none; white-space:nowrap; vertical-align:middle;
  transition:background .15s,border-color .15s,color .15s;
}
.lp-src-chip:hover,.lp-src-chip:active{ background:rgba(95,224,168,.20); border-color:rgba(95,224,168,.58); color:#c2f4e1; }
.lp-src-chip::after{ content:"↗"; font-size:9px; margin-left:4px; opacity:.6; vertical-align:1px; }
.related{ border-top:1px solid var(--border); margin-top:14px; }
.related a{ font-size:14.5px; padding:11px 0; border-bottom:1px solid var(--hair); }

/* 섹션 타이틀 — 위 가로선 + 액센트 라벨 (박스 아님) */
.section-title{ padding:20px 14px 9px; font-size:12.5px; letter-spacing:0.13em; border-top:1px solid var(--border); margin-top:8px; }
.section-note{ padding-left:14px; padding-right:14px; }

/* =====================================================================
   4. 본문 내러티브 (인라인 element style → !important)
   ===================================================================== */
.container > div[style*="line-height:1.65"][style*="font-size:14px"]{
  padding:4px 14px 22px !important; font-size:16px !important; line-height:1.8 !important;
  word-break:keep-all; overflow-wrap:anywhere; color:var(--text);
}
.container > div[style*="line-height:1.65"] h3{
  font-size:18.5px !important; color:#fff !important; font-weight:700; line-height:1.42;
  margin:24px 0 10px !important; letter-spacing:-0.01em; padding-top:14px; border-top:1px solid var(--hair);
}
.container > div[style*="line-height:1.65"] h3:first-child{ border-top:none; padding-top:0; margin-top:2px !important; }
.container > div[style*="line-height:1.65"] p{ margin:0 0 13px !important; }
.container > div[style*="line-height:1.65"] strong{ color:var(--accent3); }
.container > div[style*="line-height:1.65"] em{ color:var(--gold); font-style:normal; font-weight:600; }
.container > div[style*="overflow-x:auto"]{ padding-left:14px !important; padding-right:14px !important; font-size:14px !important; }
/* 미래 글이 class 부여 시 */
.daily-article{ padding:4px 14px 22px; font-size:16px; line-height:1.8; word-break:keep-all; }

/* =====================================================================
   5. 헤더 (수동글 hero 느낌)
   ===================================================================== */
.header{ padding:24px 14px 18px; }
.header h1{ font-size:26px; line-height:1.32; letter-spacing:-0.02em; }
.header h1 span{ background:linear-gradient(135deg,var(--accent),var(--accent3)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent); }
.header-sub{ font-size:14px; color:var(--text-dim); line-height:1.6; }
.header-label{ color:var(--gold); }

/* =====================================================================
   5b. 마켓 펄스 밴드 (blogReadingAids.js 주입) — 중복 배지 대체.
   오늘의 분위기(위험회피/선호/중립) + 핵심 지수 한 줄, 방향 색구분.
   ===================================================================== */
.lp-pulse{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 9px;
  padding:11px 14px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); }
.lp-pulse-tag{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:800;
  letter-spacing:0.06em; padding:4px 11px 5px; border-radius:999px; white-space:nowrap; border:1px solid currentColor; }
.lp-pulse--off .lp-pulse-tag{ color:var(--down); }
.lp-pulse--on .lp-pulse-tag{ color:var(--up); }
.lp-pulse--neutral .lp-pulse-tag{ color:var(--flat); }
.lp-pulse-list{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; color:var(--text-dim); line-height:1.6; }
.lp-pulse-list b{ font-weight:800; }
.lp-pulse-list .dn{ color:var(--down); } .lp-pulse-list .upx{ color:var(--up); }
.lp-pulse-sep{ opacity:.4; }
/* 지수 스파크라인 polish — 둥근 캡 + 약간 두껍게 */
.idx-card svg polyline{ stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.idx-card svg{ opacity:.92; }

/* =====================================================================
   6. 데이터/표 — 테두리 유지(구조용). 컨테이너 거터만 좁힘.
   ===================================================================== */
.idx-grid,.mag-grid,.heat-grid,.km-grid{ margin-left:14px; margin-right:14px; }
.mov-card,.cal-card{ margin-left:14px; margin-right:14px; border-radius:10px; }   /* 표: 테두리 유지 */
.idx-card,.mag-tile,.heat-tile,.km-cell,.scen-card-DATAKEEP{ border-radius:10px; }
/* 상승/하락 리더 — 빡빡한 4컬럼 → 2줄 정돈.
   1줄: 티커+종목명 ··· 굵은 % | 2줄: 가격 · 촉발요인(풀폭, 2줄 클램프).
   같은 HTML 을 CSS grid-area 로 재배치 → 기존 글도 즉시 적용. */
.mov-row{
  display:grid; grid-template-columns:auto 1fr auto;
  grid-template-areas:"tick tick pct" "px trig trig";
  column-gap:10px; row-gap:3px; padding:10px 14px; align-items:baseline;
  border-bottom:1px solid var(--hair);
}
.mov-row:last-child{ border-bottom:none; }
.mov-tick{ grid-area:tick; font-size:13.5px; font-weight:700; color:var(--accent); overflow-wrap:anywhere; }
.mov-tick .nm{ display:inline; margin-left:7px; margin-top:0; font-size:12px; font-weight:400; color:var(--text-dim); letter-spacing:0; }
.mov-pct{ grid-area:pct; font-size:15.5px; font-weight:800; text-align:right; align-self:center; font-variant-numeric:tabular-nums; }
.mov-px{ grid-area:px; font-size:12px; color:var(--text-dim); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mov-trig{ grid-area:trig; font-size:12.5px; line-height:1.5; color:#9fb0cc; word-break:keep-all; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mov-head{ font-size:11px; padding:9px 14px; letter-spacing:0.08em; }
.cal-card .cal-body,.cal-card .cal-date{ word-break:keep-all; }

/* =====================================================================
   7. 상단 스크롤 진행률 바 (blogReadingAids.js 가 주입; 색만 정렬)
   ===================================================================== */
.lp-progress{ height:3px !important; background:rgba(255,255,255,.05) !important; }
.lp-progress-bar{ background:linear-gradient(90deg,var(--accent),var(--accent3)) !important; }

/* =====================================================================
   8. 아주 작은 폰(≤360px) — 거터 더 압축
   ===================================================================== */
@media (max-width:360px){
  .summary-card,.tldr-box,.bottom-line,.news-card,.fact-check,.disclaimer-top,
  .watch-card,.scen-card,.footer-disclaimer,.related,.section-title{ padding-left:11px; padding-right:11px; }
  .idx-grid,.mag-grid,.heat-grid,.km-grid,.mov-card,.cal-card{ margin-left:11px; margin-right:11px; }
  .container > div[style*="line-height:1.65"]{ padding-left:11px !important; padding-right:11px !important; }
  .summary-card,.bottom-line,.fact-check,.tldr-box,.watch-card{ padding-left:10px; }
  .idx-grid{ gap:6px; } .mag-grid{ gap:5px; }
  body{ font-size:15.5px; }
}