/* newshub 공개 사이트 — 시안 E(브루탈리스트 포스터)
   원본: autopost `static/css/site.css` (규격 원본 autopost `docs/design/blog-redesign/Tokens.dc.html`).
   규칙: border-radius 0, 그림자는 blur 없는 불투명 검정, 전이는 steps(2).

   autopost 는 "글 한 편"이 단위인 블로그고 newshub 는 "기사·이슈"가 단위인
   큐레이션 사이트라, 토큰·공용 컴포넌트(마스트헤드/카드/행/버튼/prose)는 그대로 쓰고
   뉴스 고유 컴포넌트(인용 블록·출처 링크·검색 폼·이슈 스탬프)만 파일 하단에 덧붙였다. */

:root {
  color-scheme: light dark;

  --paper: #F3F1E7;
  --ink: #111010;
  --sub: #4A4744;
  /* 2026-09-16: #A8A497 은 종이 위 2.20 이라 플레이스홀더(4.5)·차트 막대(3.0) 둘 다 미달이었다.
     H/S 는 그대로 두고 명도만 내려 4.51 로 맞췄다. */
  --faint: #726E60;

  --yellow: oklch(0.90 0.17 100);
  /* 2026-09-16: L 0.55 → 0.52. 노랑 면 위의 링크 hover 가 4.06 으로 미달이었다(→ 4.63).
     색상(H 25)은 고정이라 붉은색의 성격은 그대로다. */
  --accent: oklch(0.52 0.21 25);

  --bd: 3px;
  --shadow-card: 7px 7px 0 var(--ink);
  --shadow-btn: 5px 5px 0 var(--ink);
  --shadow-press: 4px 4px 0 var(--ink);

  --font-display: "Black Han Sans", "Gothic A1", "Apple SD Gothic Neo", sans-serif;
  --font-ui: "Gothic A1", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Pretendard", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, Consolas, "D2Coding", monospace;

  --wrap: 1160px;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리킨다(G:\workspace\DESIGN.md '토큰'). 자매 사이트 autopost 와 같은 값.
     실측(2026-10-16, WCAG — oklch 는 sRGB 로 환산해 쟀다):
     라이트 --ink 종이 위 16.78 · --sub 8.15 · 종이색 글자 on --accent(#c50220) 5.45.
     다크  --ink 16.39 · --sub 7.95 · 유리 면 #1d1b18 위 --ink 14.93 / --sub 7.24 ·
           종이색(#12110F) 글자 on --accent(#e8605b) 5.62.
     강조는 노랑이 아니라 붉은 --accent — 히어로 <em>·탭바 현재 칸이 글자색으로 쓰는데 노랑 글자는 종이 위 1.2 다. */
  --fb-bg: var(--paper);
  --fb-surface: var(--paper);
  --fb-ink: var(--ink);
  --fb-muted: var(--sub);
  --fb-line: color-mix(in srgb, var(--ink) 18%, transparent);
  --fb-accent: var(--accent);
  --fb-on-accent: var(--paper);
  --fb-display: var(--font-display);
  --fb-max: var(--wrap);
}

/* oklch() 미지원 브라우저용 근사 폴백. 사용자 정의 속성은 선언 시점에
   값을 검증하지 않으므로 "폴백 먼저, oklch 나중" 패턴이 통하지 않는다 —
   var() 치환 시점에 무효가 되어 해당 속성이 unset 으로 떨어진다.
   @supports 로 감싸는 것이 실제로 동작하는 유일한 방법이다. */
@supports not (color: oklch(0 0 0)) {
  :root {
    --yellow: #EFCF00;
    /* 폴백 노랑(#EFCF00)은 oklch 값보다 어두워서 그 위의 붉은색도 더 어두워야 한다 —
       #C9341C 는 3.41, #B00020 은 4.74 다(종이 위 6.47). */
    --accent: #B00020;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

/* 요소를 하나씩 세면 select·details·tabindex 를 얹은 것이 조용히 빠진다 — 전부에 건다.
   --accent 는 종이 위 5.45(다크 5.62), 노랑 면 안에서는 라이트 값이 복원돼 4.63 이다. */
:focus-visible {
  outline: var(--bd) solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  border: var(--bd) solid var(--ink);
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 12px 18px;
  z-index: 10;
}
.skip-link:focus { left: 8px; top: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.han { font-family: var(--font-display); font-weight: 400; }

.cap {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub);
}

/* ── 머리 ─────────────────────────────────────
   틀은 fb.css 의 .fb-nav(떠 있는 유리 막대, 폰에서는 링크가 아래 탭바 — JS 없이 CSS 만).
   2026-10-16 디자인 v2 전의 마스트헤드·<details> 드로어·상태 밴드는 없앴다. 상태 밴드의 사이트 설명은
   홈 히어로와 푸터 브랜드 칸으로 옮겼다. */

.fb-foot .fb-nav__logo { color: var(--ink); }
.fb-nav__logo:hover, .fb-foot .fb-nav__logo:hover { color: var(--accent); text-decoration: none; }
/* Black Han Sans 는 굵기가 하나(400)뿐이다 — fb.css 의 800 을 그대로 두면 브라우저가 가짜 굵게를 덧칠해 글자가 뭉갠다 */
.fb-nav__logo, .fb-hero__h, .fb-cta__h, .fb-sec__h { font-weight: 400; }

/* ── 공용 컴포넌트 ──────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--shadow-btn);
  padding: 12px 22px;
  min-height: 46px;
  cursor: pointer;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn:hover { color: var(--ink); transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.btn--primary { background: var(--yellow); font-size: 17px; min-height: 48px; padding: 13px 28px; }
.btn--disabled {
  border-color: var(--faint);
  color: var(--faint);
  box-shadow: none;
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  border: var(--bd) solid var(--ink);
  padding: 7px 13px;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.chip:hover { color: var(--ink); background: var(--yellow); }
.chip[aria-current="page"] { background: var(--yellow); }

.badge {
  font-family: var(--font-display);
  font-size: 13px;
  background: var(--accent);
  color: var(--paper);
  padding: 5px 12px;
}

/* ── 푸터 ──────────────────────────────────────
   틀은 fb.css 의 .fb-foot(넷으로 나눈 푸터). 폰의 탭 대상 44px 도 fb.css 가 맡는다. */

/* ── 홈 ────────────────────────────────────── */

.home { display: flex; flex-direction: column; gap: 30px; padding-top: 34px; }

.emptystate { font-size: 26px; padding: 60px 0; color: var(--sub); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}
.hero:hover { color: var(--ink); }
.hero__text { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.hero__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__title {
  margin: 0;
  font-size: 58px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__summary {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--sub);
  max-width: 44ch;
}
.hero__text .btn { align-self: flex-start; }
.hero:hover .btn { transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.hero__media {
  border: var(--bd) solid var(--ink);
  box-shadow: var(--shadow-card);
  background: var(--yellow);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* 뉴스 기사는 대표 이미지가 없는 경우가 대부분이라(autopost 의 커버 이미지와 다르다)
   380px 짜리 빈 노랑 블록이 헤드라인 옆에 그대로 남는다 — 카테고리를 포스터 활자로
   앉혀 그 자리를 채운다. */
.hero__media-fallback {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--ink);
  padding: 24px;
  text-align: center;
}

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.card {
  display: flex;
  flex-direction: column;
  border: var(--bd) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.card:hover { color: var(--ink); transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.card:nth-child(2) { background: var(--yellow); }
.card__media {
  height: 130px;
  border-bottom: var(--bd) solid var(--ink);
  /* 대표 이미지가 없는 기사는 노랑 바탕이 채운다 — Tokens.dc.html 구현 메모 06 */
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__text { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.card__meta { display: flex; justify-content: space-between; gap: 10px; }
.card__title { margin: 0; font-size: 21px; line-height: 1.32; letter-spacing: -0.02em; }
.card__summary { margin: 0; font-size: 14px; line-height: 1.7; color: var(--sub); }

.rows { display: flex; flex-direction: column; border-top: var(--bd) solid var(--ink); list-style: none; padding: 0; margin: 0; }

.row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 110px;
  gap: 20px;
  align-items: center;
  padding: 16px 12px;
  border-bottom: var(--bd) solid var(--ink);
  min-height: 44px;
  transition: background-color .08s steps(2);
}
.row:hover { color: var(--ink); background: var(--yellow); }
.row__body { display: flex; flex-direction: column; gap: 4px; }
.row__title { font-size: 20px; line-height: 1.35; letter-spacing: -0.02em; }
.row__summary { font-size: 14px; line-height: 1.6; color: var(--sub); }
.row__category { text-align: right; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pager__count { font-size: 20px; }

/* ── 기사 상세 ─────────────────────────────── */

.article__head {
  border-bottom: var(--bd) solid var(--ink);
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}
.article__stamp {
  border-right: var(--bd) solid var(--ink);
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 24px 14px;
  text-align: center;
}
.article__stamp-category { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.article__headline { padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.article__title {
  margin: 0;
  font-size: 54px;
  line-height: 1.10;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.article__cover {
  border-bottom: var(--bd) solid var(--ink);
  max-height: 460px;
  overflow: hidden;
}
.article__cover img { width: 100%; height: 100%; object-fit: cover; }

.article__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 32px;
  align-items: start;
  padding-top: 36px;
  padding-bottom: 40px;
}
.article__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* 본문 조판 — newshub 의 본문은 "자체 요약"이다(§0.1: 원문 전문 렌더링 금지). */
.prose { max-width: 62ch; font-size: 17px; line-height: 1.9; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 24px; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin-top: 34px;
}
.prose h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  margin-top: 30px;
}
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.prose li { line-height: 1.85; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  border: var(--bd) solid var(--ink);
  background: var(--yellow);
  padding: 24px 26px;
}
.prose blockquote p { margin: 0; }
.prose img { border: var(--bd) solid var(--ink); }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: var(--bd) solid var(--ink); padding: 10px 12px; text-align: left; }
.prose th { background: var(--yellow); font-family: var(--font-ui); font-weight: 700; }

/* 리드 문단 — 규격의 타이포 램프(21/1.68/700). 요약의 첫 문장이 리드다. */
.article__main .prose > p:first-child {
  font-size: 21px;
  line-height: 1.68;
  font-weight: 700;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }

.rail { display: flex; flex-direction: column; gap: 20px; }
.rail__box {
  border: var(--bd) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
a.rail__box { transition: transform .08s steps(2), box-shadow .08s steps(2); }
a.rail__box:hover { color: var(--ink); transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.rail__box--accent { background: var(--yellow); }
.rail__title { font-size: 18px; line-height: 1.35; letter-spacing: -0.02em; }
.rail__list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }
/* 관련 기사 목록 줄. 제목이 짧으면 계산 높이가 20px 이라 탭 대상 44px 에 모자랐다. */
.rail__list a { display: flex; align-items: center; min-height: 44px; }

/* ── 목록 페이지 · 정적 페이지 ─────────────── */

.listpage, .page { display: flex; flex-direction: column; gap: 24px; padding-top: 34px; }

.listhead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: var(--bd) solid var(--ink);
  padding-bottom: 18px;
}
.listhead__title { margin: 0; font-size: 46px; line-height: 1.1; letter-spacing: -0.035em; }

.page__title { margin: 0; font-size: 46px; line-height: 1.1; letter-spacing: -0.035em; }

.page--error { align-items: flex-start; padding-top: 80px; padding-bottom: 80px; gap: 16px; }
.page__code {
  font-size: 120px;
  line-height: 1;
  background: var(--yellow);
  border: var(--bd) solid var(--ink);
  box-shadow: var(--shadow-card);
  padding: 8px 24px;
}

/* ── 광고 슬롯 ─────────────────────────────── */

/* 점선 테두리와 min-height 를 뺐다. 둘 다 "광고 자리가 여기"라는 걸 보여주는
   디자인 시안용 표시였는데, 실제 광고가 붙는 상태에서는 둘 다 해가 된다.

   ① 컨테이너 자체가 ADSENSE_CLIENT_ID 가 있을 때만 렌더링된다(core/_ad_slot.html).
      승인 전에는 이 규칙이 적용될 요소가 페이지에 없다.
   ② 승인 뒤에도 애드센스는 매 요청 광고를 채워주지 않는다. 안 채워지면 <ins> 가
      높이 0 으로 접히는데, min-height:100px(모바일 250px)이 남아 있으면 그때마다
      100~250px 짜리 빈 점선 상자가 본문 한가운데 남는다 — 심사에서든 사용자에게든
      가장 나쁜 그림이다.
   ③ 테두리를 지운 것은 광고와 우리 콘텐츠의 경계를 흐리지 않기 위해서다. 같은
      3px 잉크 테두리를 쓰면 카드/인용 블록과 구분이 안 되고, 애드센스는 광고를
      콘텐츠처럼 보이게 하는 배치를 정책 위반으로 본다.

   높이는 <ins> 에 맡긴다. 광고가 채워지는 순간 아래 콘텐츠가 밀리는 CLS 는
   남지만(예약 공간 없음), "안 채워지면 빈 상자"와 맞바꾼 결과다. 실제 채움률과
   단위 크기가 정해지면(A3 승인 후) 그때 aspect-ratio 로 자리를 예약하는 편이 맞다. */
.adslot {
  width: 100%;
  margin: 28px 0;
}
.adslot > ins { display: block; }
/* adsbygoogle.js 는 광고를 못 채워도(계정 미승인·채움 실패) <ins> 에 inline 으로
   height:412px 같은 예약 높이를 박고 data-ad-status="unfilled" 만 달아 둔다 —
   2026-09-04 운영 홈 상단에 412px 빈 공간이 생긴 원인. 구글 문서가 권하는 대로
   unfilled 는 접는다. !important 는 inline display:block 을 이기기 위해 필요하다. */
.adslot > ins[data-ad-status="unfilled"] { display: none !important; }
.adslot:has(> ins[data-ad-status="unfilled"]) { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   여기부터 newshub 고유 — autopost 에 없는 컴포넌트.
   ═══════════════════════════════════════════════════════════════ */

/* ── 출처 표시 (§0.1: 수집과 발행의 분리) ──────
   원문 인용은 반드시 출처와 원문 링크를 달고 나간다. 시각적으로도 "우리 요약"과
   "남의 문장"이 한눈에 갈리도록 인용 블록만 적색 테두리를 쓴다. */

.sourcequote {
  border: var(--bd) solid var(--accent);
  background: var(--paper);
  padding: 22px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sourcequote__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: -0.02em;
}
.sourcequote__cite { font-style: normal; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.sourcelink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: var(--bd) solid var(--ink);
  background: var(--yellow);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.sourcelink:hover { color: var(--ink); transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.sourcelink__label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sourcelink__press { font-family: var(--font-display); font-size: 20px; line-height: 1.3; }
.sourcelink__arrow { font-family: var(--font-display); font-size: 26px; line-height: 1; }

/* 원문 미보유 고지 — 애드센스 심사에서 "이 사이트가 뭘 하는 곳인지" 설명하는 줄이다. */
.notice {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sub);
  border-left: var(--bd) solid var(--faint);
  padding-left: 14px;
}

/* ── 검색 ──────────────────────────────────── */

.searchform { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
/* .input/.textarea 는 커뮤니티 글쓰기 폼용 — 검색창과 같은 잉크 테두리 입력 스타일을 공유한다. */
.searchform__input, .input, .textarea {
  flex: 1 1 320px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 17px;
  padding: 12px 16px;
  min-height: 48px;
  border: var(--bd) solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.searchform__input::placeholder { color: var(--faint); }
.input, .textarea { width: 100%; }
.textarea { min-height: 200px; line-height: 1.7; resize: vertical; }
.textarea--short { min-height: 96px; }

/* ── 커뮤니티 ──────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form__error { margin: 0; color: var(--accent); font-size: 14px; }
.post__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.votebar { display: flex; flex-wrap: wrap; gap: 12px; }
.votebar .btn { gap: 8px; }
.votebar .btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.comments { list-style: none; padding: 0; margin: 0; border-top: var(--bd) solid var(--ink); }
.comment { padding: 16px 0; border-bottom: 1px solid var(--faint); display: flex; flex-direction: column; gap: 6px; }
.comment__body { margin: 0; font-size: 16px; line-height: 1.7; white-space: pre-wrap; }
.inlineform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inlineform .input { width: auto; flex: 0 1 160px; min-height: 40px; padding: 8px 12px; font-size: 15px; }
.inlineform .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }

/* 게시판 목록 — 인기글 타일 + 제목을 키운 한 줄 목록. 반응 수는 우측 알약. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.listhead--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; }
.listhead__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.listhead--split .btn { flex-shrink: 0; margin-bottom: 6px; }
.section__head.section__head--flat { border-bottom: 0; padding-bottom: 0; justify-content: flex-start; gap: 14px; }
.section__head--flat .section__title { font-size: 24px; }

.hotgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.hot {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  border: var(--bd) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 16px;
  min-height: 178px;
  box-sizing: border-box;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.hot:first-child { background: var(--yellow); }
.hot:hover { color: var(--ink); transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.hot__rank { font-size: 58px; line-height: 0.9; letter-spacing: -0.04em; }
.hot__body { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.hot__title { font-size: 25px; line-height: 1.2; letter-spacing: -0.025em; }

.row--post { grid-template-columns: 58px minmax(0, 1fr) auto; }
.row--post .row__title { font-size: 23px; line-height: 1.3; }

.counts { display: flex; gap: 8px; }
.cnt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.cnt svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.row--post .cnt { border: 2px solid var(--ink); padding: 4px 10px; min-width: 52px; justify-content: center; box-sizing: border-box; }
.row--post .cnt--ink { background: var(--ink); color: var(--paper); }

/* ── 카테고리 네비 (목록 상단 칩 줄) ───────── */

.catnav { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 기사 행 — 언론사 배지 ─────────────────── */

.row__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row__press {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  border: 2px solid var(--ink);
  padding: 1px 7px;
  white-space: nowrap;
}

/* ── 이슈 ──────────────────────────────────── */

/* 이슈 스탬프는 기사 스탬프와 같은 자리를 쓰되 잉크 반전으로 "묶음"임을 알린다. */
.article__stamp--issue { background: var(--ink); color: var(--paper); }
.article__stamp--issue .cap { color: var(--paper); }

.issuegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.issuecard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: var(--bd) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: 20px;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.issuecard:hover { color: var(--ink); transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.issuecard__meta { display: flex; justify-content: space-between; gap: 10px; }
.issuecard__title { margin: 0; font-size: 24px; line-height: 1.3; letter-spacing: -0.025em; }
.issuecard__summary { margin: 0; font-size: 14px; line-height: 1.7; color: var(--sub); }

.section { display: flex; flex-direction: column; gap: 18px; }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: var(--bd) solid var(--ink);
  padding-bottom: 10px;
}
.section__title { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -0.03em; }

/* 타임라인 — 이슈 상세의 기사 나열. .rows 를 재사용하되 좌측에 시각 눈금을 준다. */
.timeline .row__date { font-variant-numeric: tabular-nums; }

/* ── 반응형 ────────────────────────────────── */

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__media { min-height: 220px; order: -1; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article__grid { grid-template-columns: minmax(0, 1fr); }
  .rail { flex-direction: row; flex-wrap: wrap; }
  .rail__box { flex: 1 1 240px; }
  .issuegrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }

  .wrap { padding: 0 14px; }

  .hero__title { font-size: 34px; line-height: 1.14; }
  .hero__media-fallback { font-size: 44px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card__media { height: 140px; }

  .row { grid-template-columns: 52px minmax(0, 1fr); padding: 14px 4px; }
  .row__category { display: none; }
  .row__title { font-size: 18px; }
  .listhead--split { flex-direction: column; align-items: flex-start; }
  .row--post .row__title { font-size: 19px; }
  .row--post .counts { grid-column: 2; }
  .hotgrid { grid-template-columns: minmax(0, 1fr); }
  .hot { min-height: 0; }
  .hot__rank { font-size: 40px; }
  .hot__title { font-size: 21px; }

  .article__head { grid-template-columns: minmax(0, 1fr); }
  .article__stamp {
    border-right: 0;
    border-bottom: var(--bd) solid var(--ink);
    flex-direction: row;
    gap: 10px;
    padding: 14px;
  }
  .article__stamp-category { font-size: 22px; }
  .article__headline { padding: 18px 14px 20px; }
  .article__title { font-size: 34px; line-height: 1.14; }
  .article__grid { padding-top: 22px; }

  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 25px; }
  .prose blockquote { font-size: 20px; padding: 18px; }

  .sourcequote { padding: 18px; }
  .sourcequote__text { font-size: 19px; }
  .sourcelink { flex-direction: column; align-items: flex-start; gap: 10px; }

  .searchform__input { font-size: 16px; min-height: 48px; }
  .searchform .btn { align-self: stretch; justify-content: center; }

  .rail { flex-direction: column; }
  .rail__box { flex: 0 1 auto; }

  .issuecard__title { font-size: 20px; }
  .section__title { font-size: 24px; }

  /* 모바일 min-height:250px 도 같은 이유로 뺐다(위 .adslot 주석 참고) —
     좁은 화면일수록 안 채워진 빈 상자가 화면을 크게 잡아먹는다.
     여백만 조금 줄인다. */
  .adslot { margin: 22px 0; }

  .pager { flex-wrap: wrap; gap: 10px; }
  .pager .btn { font-size: 15px; padding: 13px 16px; min-height: 48px; }

  .page__code { font-size: 72px; }
  .listhead__title, .page__title { font-size: 34px; }
}

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

/* ── 다크 ──────────────────────────────────────
   OS 설정만 따른다 — 수동 토글은 쿠키·서버 렌더가 필요하고(JS 0 원칙) 캐시를 테마별로
   갈라야 해서 넣지 않았다. 요구가 생기면 그때 붙인다.

   뒤집는 방식: 종이(--paper)를 어둡게, 잉크(--ink)를 밝게 한 벌만 바꾼다. 그러면
   background:var(--ink) 로 그려지던 반전 면은 저절로 '밝은 면 + 어두운 글자'가 되어
   라이트와 같은 관계를 유지한다 — 작은 잉크 면은 그 안쪽을 손댈 것이 없다.

   손대야 하는 것은 두 가지뿐이다:
   ① 노랑은 두 테마에서 같은 밝기다(브랜드색이라 안 내렸다). 그래서 노랑 면 안에서만
      라이트 값을 되살린다. --ink 를 로컬로 되돌리면 color 뿐 아니라 그 안에서
      var(--ink)·var(--sub) 로 색을 잡는 글자까지 한꺼번에 따라온다.
      :root 에서 값이 확정되는 --shadow-* 는 이 로컬 복원에 영향받지 않아 그림자는 밝게 남는다.
   ② 화면 전폭을 차지하는 반전 밴드(.statusband·.site-footer·대시보드 .dash-head)만
      면을 다시 어둡게 한다. 그대로 두면 페이지보다 16.39 배 밝은 크림 슬래브가 모든
      화면의 위·아래를 감싸 눈부시고, 그 위에서는 브랜드 노랑 hover 가 1.16 이라 아예
      안 읽혀 붉은색으로 갈아야 했다. 한 단계 떠오른 어둠(#363129)으로 되살리면 안쪽
      관계(크림 글자·노랑 강조)가 라이트와 같아져 규칙을 하나도 안 고쳐도 된다.
      **자매 사이트 autopost 와 같은 값이다 — 2026-09-16 에 두 사이트의 톤을 이쪽으로 맞췄다.**
      배지처럼 좁은 잉크 면(.btn--ink·.article__stamp--issue·.cnt--ink)은 계속 크림으로
      뒤집는다. 면적이 작으면 반전이 '도장'으로 읽히고 눈부심도 없다.

   대비는 전부 실측했다(WCAG 2.1, 본문 4.5 / 그래픽 3.0). 라이트·다크 모두 실패 0:
   본문 16.39 · 보조문 7.95 · 플레이스홀더 4.52 · 링크 5.62 · 노랑면 글자 14.26 ·
   노랑면 링크 4.63 · 적색면 글자 5.62 · 반전밴드 글자 11.39 · 반전밴드 노랑 9.68 ·
   반전밴드 흐린 글자 5.17 · 반전밴드 포커스 링 3.84.
   광고(<ins>)는 우리가 색을 못 바꾼다 — 다크에서 흰 광고가 그대로 뜨는 것은 정상이고,
   .adslot 에 배경·테두리·필터를 씌우지 않는다(콘텐츠로 위장하는 배치는 정책 위반). */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12110F;
    --ink: #F2EFE4;
    --sub: #ADA89A;
    --faint: #817C6C;
    /* H 25 고정, C 0.21 → 0.17, L 0.52 → 0.66. 어두운 바탕에서 진한 붉은색은 안 읽힌다. */
    --accent: oklch(0.66 0.17 25);
    --fb-surface: #1d1b18;  /* 유리·카드 면 — :root 주석의 다크 실측 */
  }

  @supports not (color: oklch(0 0 0)) {
    :root { --accent: #E8605B; }
  }

  .skip-link,
  .btn--primary,
  .chip:hover,
  .chip[aria-current="page"],
  .card:nth-child(2),
  .card__media,
  .hero__media,
  .row:hover,
  .prose blockquote,
  .prose th,
  .article__stamp,
  .rail__box--accent,
  .sourcelink,
  .hot:first-child,
  .page__code {
    --ink: #111010;
    --sub: #4A4744;
    --faint: #6E6A5E;
    --accent: oklch(0.52 0.21 25);
    color: var(--ink);
  }
}

/* 쿠팡 파트너스 칸(coupang.py) — 이 사이트 토큰만 쓴다. ink·sub·paper·accent, 시안 E 규칙대로 radius 0·테두리 --bd (새 색 없음, 대비는 기존 토큰 실측 그대로). */
.cpn { margin: 24px 0; padding: 12px 16px; border: var(--bd) solid var(--ink); border-radius: 0; background: var(--paper); }
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: var(--sub); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--ink); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 0; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--accent); font-size: 14px; font-weight: 700; }
.cpn--top { margin: 12px 0 16px; padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }