/*
  하루뉴스(harunews.com) 지면 스타일 - 2026-10-18.

  콘셉트 "하루 한 장": 하루치 글을 끝이 있는 한 장의 지면으로 읽는다. 사진보다 글자 위계(크기 3단·말머리·번호·가는 선)와
  신문식 이중선으로 신문다움을 낸다(대표 사진들이 서로 닮아 카드마다 크게 쓰면 구별이 안 된다는 운영 실측).

  역할 분담(이 파일 머리 규칙):
   - 이 파일은 Tailwind 레이어 **밖**(unlayered)이라 모든 Tailwind 레이어를 이긴다. 그래서 여기에는 글자·색·선·배경만 적는다.
   - 배치·여백·display·반응형은 마크업의 Tailwind 유틸리티만 맡는다(둘이 같은 속성을 다투지 않게).
   - 토큰 값은 html.hn 아래에만 둔다(:root 아님) - 인조이스 화면에는 값이 없다. Tailwind 에는 이름만 등록했다
     (app/assets/tailwind/application.css 의 @theme inline - bg-hn-paper 등).
   - 재사용 파셜(검증 고지·그림 캡션·.article-body)은 Tailwind 팔레트(gray·slate·sky)를 쓴다. 아래에서 그 팔레트 변수를 같은 밝기의
     따뜻한 색으로 다시 정의해, 하루뉴스 안에서만 하루뉴스 색이 되게 한다(밝기 단계를 그대로 두어 원래 대비 관계가 유지된다).

  대비(WCAG): 본문 ink 16.7:1(다크 15.5:1), 요약 ink-2 8.9:1, 메타 muted 5.4:1(surface 위 4.9:1), 강조 accent 5.9:1,
  경계 rule-strong 3.4:1(1.4.11 3:1). 값은 test/harunews_palette_test.rb 가 다시 계산한다.
*/

/* ── 토큰 ─────────────────────────────────────────────── */
html.hn {
  --hn-paper: #fbfaf7;
  --hn-surface: #f3efe6;
  --hn-ink: #1a1a18;
  --hn-ink-2: #4a4740;
  --hn-muted: #6b675e;
  --hn-accent: #b4321f;
  --hn-rule: #e3ded3;
  --hn-rule-strong: #8c877c;
  --hn-band: #1a1a18;
  --hn-band-ink: #fbfaf7;
  --hn-band-muted: #b5b0a5;
  --hn-scale: 1;
  --hn-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Noto Sans KR",
    "Noto Sans CJK KR", Roboto, sans-serif;
  --hn-serif: ui-serif, "Iowan Old Style", Charter, "Sitka Text", Georgia, "Noto Serif", "Times New Roman", serif;
  --hn-head: var(--hn-sans);
  --hn-head-weight: 800;
  --hn-head-tracking: -0.02em;
  color-scheme: light;

  /* 재사용 파셜용 팔레트 다시 칠하기 - 밝기(L)는 Tailwind 기본 그대로, 색상만 따뜻하게. */
  --color-gray-50: oklch(0.985 0.004 85);
  --color-gray-100: oklch(0.967 0.006 85);
  --color-gray-200: oklch(0.928 0.008 85);
  --color-gray-300: oklch(0.872 0.009 85);
  --color-gray-400: oklch(0.707 0.011 85);
  --color-gray-500: oklch(0.551 0.012 85);
  --color-gray-600: oklch(0.446 0.012 85);
  --color-gray-700: oklch(0.373 0.011 85);
  --color-gray-800: oklch(0.278 0.009 85);
  --color-gray-900: oklch(0.21 0.007 85);
  --color-gray-950: oklch(0.13 0.006 85);
  --color-slate-50: oklch(0.984 0.004 85);
  --color-slate-100: oklch(0.968 0.006 85);
  --color-slate-200: oklch(0.929 0.008 85);
  --color-slate-300: oklch(0.869 0.009 85);
  --color-slate-400: oklch(0.704 0.011 85);
  --color-slate-500: oklch(0.554 0.012 85);
  --color-slate-600: oklch(0.446 0.012 85);
  --color-slate-700: oklch(0.372 0.011 85);
  --color-slate-800: oklch(0.279 0.009 85);
  --color-slate-900: oklch(0.208 0.007 85);
  --color-slate-950: oklch(0.129 0.006 85);
  --color-sky-50: oklch(0.977 0.013 35);
  --color-sky-100: oklch(0.951 0.03 35);
  --color-sky-200: oklch(0.901 0.06 35);
  --color-sky-300: oklch(0.828 0.1 35);
  --color-sky-400: oklch(0.746 0.13 35);
  --color-sky-500: oklch(0.685 0.15 35);
  --color-sky-600: oklch(0.588 0.16 35);
  --color-sky-700: oklch(0.5 0.15 35);
  --color-sky-800: oklch(0.443 0.13 35);
  --color-sky-900: oklch(0.391 0.11 35);
  --color-sky-950: oklch(0.293 0.08 35);
}

html.hn.dark {
  --hn-paper: #121211;
  --hn-surface: #1c1c1a;
  --hn-ink: #ece9e2;
  --hn-ink-2: #bdb8ad;
  --hn-muted: #9a958a;
  --hn-accent: #f08a6e;
  --hn-rule: #2c2b28;
  --hn-rule-strong: #6f6a60;
  --hn-band: #1c1c1a;
  --hn-band-ink: #ece9e2;
  --hn-band-muted: #b5b0a5;
  color-scheme: dark;
}

/* 큰글씨 모드 - 기존 상태(html.silver·data-silver-scale·--silver-scale)를 그대로 쓰고 배율만 하루뉴스 토큰으로 흘린다.
   흐린 글자는 요약 색으로 올린다(대비 감도가 떨어진 눈에서 먼저 사라진다 - 기존 큰글씨 모드와 같은 판단). */
html.hn.silver {
  --hn-scale: var(--silver-scale, 1.3);
  --hn-muted: var(--hn-ink-2);
}

/* 언어별 글꼴 - 일본어는 한국어 글꼴을 앞에 두지 않는다(한중일 통합 한자가 한국식 자형으로 그려진다).
   영어·스페인어는 제목만 시스템 세리프(한글 제목에 라틴 세리프를 앞세우면 한 제목 안에서 숫자·영문만 세리프가 된다). */
html.hn:lang(ja) {
  --hn-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", "Yu Gothic UI",
    Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --hn-head-weight: 700;
}
html.hn:is(:lang(en), :lang(es)) {
  --hn-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --hn-head: var(--hn-serif);
  --hn-head-weight: 700;
  --hn-head-tracking: -0.01em;
}

/* ── 바탕 ─────────────────────────────────────────────── */
html.hn body {
  background: var(--hn-paper);
  color: var(--hn-ink);
  font-family: var(--hn-sans);
  -webkit-font-smoothing: antialiased;
}
html.hn:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
html.hn:lang(ja) body { line-break: strict; overflow-wrap: anywhere; }
html.hn ::selection { background: color-mix(in oklab, var(--hn-accent) 22%, transparent); }
html.hn a { color: inherit; text-decoration: none; }
html.hn :focus-visible { outline: 2px solid var(--hn-accent); outline-offset: 2px; border-radius: 2px; }

/* ── 글자 위계 ────────────────────────────────────────── */
.hn-display {
  font-family: var(--hn-head);
  font-weight: var(--hn-head-weight);
  letter-spacing: var(--hn-head-tracking);
  font-size: calc(clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem) * var(--hn-scale));
  line-height: 1.25;
  text-wrap: balance;
  color: var(--hn-ink);
}
.hn-h2 {
  font-family: var(--hn-head);
  font-weight: var(--hn-head-weight);
  letter-spacing: var(--hn-head-tracking);
  font-size: calc(clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) * var(--hn-scale));
  line-height: 1.35;
  text-wrap: balance;
  color: var(--hn-ink);
}
.hn-h3 {
  font-family: var(--hn-head);
  font-weight: 700;
  font-size: calc(clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem) * var(--hn-scale));
  line-height: 1.45;
  color: var(--hn-ink);
}
.hn-dek {
  font-size: calc(clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem) * var(--hn-scale));
  line-height: 1.65;
  color: var(--hn-ink-2);
}
.hn-body-text { font-size: calc(1.0625rem * var(--hn-scale)); line-height: 1.7; color: var(--hn-ink-2); }
.hn-meta { font-size: calc(0.8125rem * var(--hn-scale)); line-height: 1.5; color: var(--hn-muted); font-variant-numeric: tabular-nums; }
.hn-kicker {
  font-size: calc(0.8125rem * var(--hn-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hn-accent);
}
html.hn:is(:lang(en), :lang(es)) .hn-kicker { text-transform: uppercase; }
.hn-num { font-variant-numeric: tabular-nums; }
.hn-muted { color: var(--hn-muted); }
.hn-ink-2 { color: var(--hn-ink-2); }
.hn-accent { color: var(--hn-accent); }
.hn-clamp-2, .hn-clamp-3, .hn-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.hn-clamp-2 { -webkit-line-clamp: 2; }
.hn-clamp-3 { -webkit-line-clamp: 3; }
.hn-clamp-4 { -webkit-line-clamp: 4; }

/* ── 마스트헤드 ───────────────────────────────────────── */
.hn-masthead { border-bottom: 3px solid var(--hn-ink); box-shadow: 0 4px 0 -3px var(--hn-ink); }
.hn-wordmark { color: var(--hn-ink); }
.hn-wordmark-sub { font-size: 0.6875rem; letter-spacing: 0.32em; color: var(--hn-muted); }
.hn-lang a { color: var(--hn-muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; }
.hn-lang a[aria-current="true"] { color: var(--hn-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hn-icon-btn { color: var(--hn-ink-2); border-radius: 999px; }
.hn-icon-btn:hover { background: var(--hn-surface); color: var(--hn-ink); }

/* 이번 호 칩 */
.hn-chips { scrollbar-width: none; border-bottom: 1px solid var(--hn-rule); }
.hn-chips::-webkit-scrollbar { display: none; }
.hn-chip { color: var(--hn-ink-2); font-size: 0.875rem; white-space: nowrap; border-radius: 999px; border: 1px solid var(--hn-rule); }
.hn-chip:hover { border-color: var(--hn-rule-strong); color: var(--hn-ink); }

/* ── 섹션 머리 ────────────────────────────────────────── */
.hn-section { scroll-margin-top: 1.5rem; }
.hn-section-head { border-top: 1px solid var(--hn-ink); }
.hn-section-title {
  font-family: var(--hn-head);
  font-weight: 800;
  font-size: calc(1rem * var(--hn-scale));
  letter-spacing: -0.01em;
  color: var(--hn-ink);
}
.hn-section-desc { font-size: calc(0.875rem * var(--hn-scale)); color: var(--hn-muted); }
.hn-rule { border-color: var(--hn-rule); }
.hn-rule-top { border-top: 1px solid var(--hn-rule); }
.hn-rule-bottom { border-bottom: 1px solid var(--hn-rule); }
.hn-rail { border-color: var(--hn-rule); }

/* ── 브리핑 ───────────────────────────────────────────── */
.hn-briefing { background: var(--hn-surface); border-radius: 4px; }
.hn-briefing-num { color: var(--hn-accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.hn-briefing-label { font-weight: 700; color: var(--hn-ink); }
.hn-briefing-text { color: var(--hn-ink-2); }
.hn-pill {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hn-ink-2);
  border: 1px solid var(--hn-rule-strong);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ── 카드 ─────────────────────────────────────────────── */
.hn-card { position: relative; }
.hn-card:has(a:focus-visible) { outline: 2px solid var(--hn-accent); outline-offset: 4px; border-radius: 2px; }
.hn-card a:focus-visible { outline: none; }
.hn-card:hover .hn-card-title { text-decoration: underline; text-decoration-color: var(--hn-rule-strong); text-underline-offset: 4px; }
.hn-figure { background: var(--hn-surface); border-radius: 2px; overflow: hidden; }
.hn-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-list-num { font-weight: 800; color: var(--hn-accent); font-variant-numeric: tabular-nums; }
.hn-backfill-tag { font-size: 0.75rem; font-weight: 600; color: var(--hn-muted); border: 1px solid var(--hn-rule); border-radius: 2px; }
.hn-keypoints li::marker { color: var(--hn-accent); }

/* ── 훑을 거리 ────────────────────────────────────────── */
.hn-trend-rank { font-weight: 800; color: var(--hn-accent); font-variant-numeric: tabular-nums; }
.hn-dchip { font-size: 0.75rem; font-weight: 700; color: var(--hn-accent); border: 1px solid currentColor; border-radius: 999px; font-variant-numeric: tabular-nums; }
.hn-year { font-weight: 800; color: var(--hn-ink); font-variant-numeric: tabular-nums; }
.hn-tentative { font-size: 0.75rem; font-weight: 700; color: var(--hn-ink-2); background: var(--hn-surface); border: 1px dashed var(--hn-rule-strong); border-radius: 999px; }
.hn-upcoming-item { border-left: 2px dashed var(--hn-rule-strong); color: var(--hn-ink-2); cursor: default; }

/* ── 한 줄 해설 ───────────────────────────────────────── */
.hn-quote-mark { font-family: var(--hn-serif); color: var(--hn-accent); line-height: 1; }
.hn-quote-text { color: var(--hn-ink); }
html.hn:is(:lang(en), :lang(es)) .hn-quote-text { font-family: var(--hn-serif); }

/* ── 영상 띠 ──────────────────────────────────────────── */
.hn-band { background: var(--hn-band); color: var(--hn-band-ink); }
.hn-band .hn-section-head { border-top-color: var(--hn-band-ink); }
.hn-band .hn-section-title { color: var(--hn-band-ink); }
.hn-band .hn-section-desc, .hn-band .hn-band-meta { color: var(--hn-band-muted); }
.hn-shorts-row { scroll-snap-type: x mandatory; scrollbar-width: thin; }
.hn-shorts-row > * { scroll-snap-align: start; }
.hn-play { background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 999px; }
.hn-video-box { background: #000; border-radius: 4px; overflow: hidden; }

/* ── 설문·쇼핑 ────────────────────────────────────────── */
.hn-survey { border: 1px solid var(--hn-rule); border-radius: 12px; background: var(--hn-paper); }
.hn-survey:hover { border-color: var(--hn-rule-strong); }
.hn-kind { font-size: 0.75rem; font-weight: 700; color: var(--hn-accent); }
.hn-shop-thumb { background: #fff; border: 1px solid var(--hn-rule); border-radius: 4px; }
.hn-disclosure { font-size: calc(0.8125rem * var(--hn-scale)); color: var(--hn-ink-2); background: var(--hn-surface); border-radius: 4px; }

/* ── 바깥 소식 ────────────────────────────────────────── */
.hn-outside { border: 1px solid var(--hn-rule-strong); background: var(--hn-surface); border-radius: 4px; }

/* ── 광고 자리 ────────────────────────────────────────── */
.hn-ad-label { font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--hn-muted); }

/* ── 끝맺음·바닥글 ────────────────────────────────────── */
.hn-end { border-top: 3px solid var(--hn-ink); box-shadow: 0 -4px 0 -3px var(--hn-ink); }
.hn-footer { border-top: 1px solid var(--hn-rule); color: var(--hn-muted); font-size: 0.8125rem; }
.hn-footer a:hover, .hn-link:hover { color: var(--hn-ink); text-decoration: underline; text-underline-offset: 3px; }
.hn-link { color: var(--hn-accent); }
.hn-button {
  border: 1px solid var(--hn-ink);
  color: var(--hn-ink);
  border-radius: 999px;
  font-weight: 700;
  font-size: calc(0.9375rem * var(--hn-scale));
}
.hn-button:hover { background: var(--hn-ink); color: var(--hn-paper); }

/* ── 읽기 화면 ────────────────────────────────────────── */
/* 본문 폭 34em: 한글 18px 에서 한 줄 약 33음절(WCAG 1.4.8 한중일 40자 이하), 영문 약 68자(Baymard 50~75자). em 이라 큰글씨 배율이
   올라도 한 줄 글자 수가 유지된다. */
.hn-read-col { max-width: min(34em, 100%); margin-inline: auto; font-size: calc(clamp(1.0625rem, 1rem + 0.2vw, 1.125rem) * var(--hn-scale)); }
.hn-read .article-body { color: var(--hn-ink); font-size: 1em; line-height: 1.8; text-align: start; }
.hn-read .article-body :is(p, ul, ol, blockquote) { margin-block: 1.25em; }
.hn-read:lang(ja) .article-body { line-height: 1.85; }
.hn-read:is(:lang(en), :lang(es)) .article-body { line-height: 1.65; }
.hn-read:is(:lang(en), :lang(es)) .article-body :is(p, ul, ol, blockquote) { margin-block: 1.1em; }
.hn-read .article-body :is(h2, h3) { font-family: var(--hn-head); font-weight: var(--hn-head-weight); color: var(--hn-ink); letter-spacing: var(--hn-head-tracking); }
.hn-read .article-body h2 { font-size: 1.3em; line-height: 1.4; margin-top: 2.2em; margin-bottom: 0.8em; }
.hn-read .article-body h3 { font-size: 1.12em; line-height: 1.45; margin-top: 1.8em; margin-bottom: 0.6em; }
.hn-read .article-body a { color: var(--hn-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hn-read .article-body blockquote { border-left: 3px solid var(--hn-rule-strong); padding-left: 1em; color: var(--hn-ink-2); }
.hn-read .article-body :is(strong, b) { color: var(--hn-ink); }
.hn-read .article-body hr { border-color: var(--hn-rule); }
.hn-read .article-body table { font-size: 0.9em; }
html.hn.silver .hn-read .article-body { font-weight: 500; }
.hn-segment-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; color: var(--hn-muted); }
.hn-keybox { border-top: 2px solid var(--hn-accent); background: var(--hn-surface); border-radius: 0 0 4px 4px; }
.hn-toc summary { cursor: pointer; color: var(--hn-ink); font-weight: 700; list-style: none; }
.hn-toc summary::-webkit-details-marker { display: none; }
.hn-toc[open] .hn-chevron, .hn-faq[open] .hn-chevron { transform: rotate(180deg); }
.hn-toc a { color: var(--hn-ink-2); }
.hn-toc a:hover { color: var(--hn-accent); }
.hn-faq { border-bottom: 1px solid var(--hn-rule); }
.hn-faq summary { cursor: pointer; font-weight: 600; color: var(--hn-ink); list-style: none; }
.hn-faq summary::-webkit-details-marker { display: none; }
.hn-size-btn { border: 1px solid var(--hn-rule); color: var(--hn-ink-2); border-radius: 999px; font-size: 0.875rem; }
.hn-size-btn[aria-pressed="true"] { border-color: var(--hn-ink); color: var(--hn-ink); font-weight: 700; background: var(--hn-surface); }
.hn-original { border: 1px solid var(--hn-rule-strong); border-radius: 4px; }
.hn-original:hover { border-color: var(--hn-ink); }
.hn-next { border-top: 3px solid var(--hn-ink); }
.hn-current { color: var(--hn-ink); font-weight: 700; }
html.hn.silver :is(.hn-size-btn, .hn-chip, .hn-lang a, .hn-icon-btn) { min-height: 48px; }

/* 읽기 진행 막대 - CSS 스크롤 타임라인(JS 없음). 지원하지 않는 브라우저(파이어폭스 등)에서는 막대가 아예 없다. */
.hn-progress { display: none; }
@supports (animation-timeline: view()) {
  html.hn body { timeline-scope: --hn-read; }
  .hn-read-body { view-timeline: --hn-read block; }
  .hn-progress {
    display: block;
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 3px;
    z-index: 40;
    transform-origin: 0 50%;
    background: var(--hn-accent);
    animation: hn-grow linear both;
    animation-timeline: --hn-read;
    animation-range: contain;
  }
}
@keyframes hn-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 재사용 파셜 다듬기 - 고지·검증 카드(card 클래스)의 바탕과 선을 지면 색에 맞춘다. */
html.hn .card { background: var(--hn-paper); border-color: var(--hn-rule); }
html.hn .hn-reused :is(.text-gray-400, .text-gray-500) { color: var(--hn-muted); }

@media (prefers-reduced-motion: reduce) {
  html.hn { scroll-behavior: auto; }
  html.hn *, html.hn *::before, html.hn *::after { transition: none !important; animation: none !important; }
  .hn-progress { display: none; }
}