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

:root {
  color-scheme: light dark;

  --paper: #F3F1E7;
  --ink: #111010;
  --sub: #4A4744;
  --faint: #A8A497;

  --yellow: oklch(0.90 0.17 100);
  /* 2026-09-16: L 0.55 → 0.52. 노랑 면 위의 링크 hover 가 4.06 으로 본문 기준(4.5)에
     미달이었다(→ 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 '토큰').
     실측(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; }

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

.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;
}
.draft-badge { margin: 0; color: var(--accent); }

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

/* 본문 조판 — LLM 이 만든 마크다운이 mistune 을 거쳐 들어온다 */
.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 pre {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  border: var(--bd) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 18px 20px;
  overflow-x: auto;
}
.prose code { font-family: var(--font-mono); font-size: 0.9em; }
.prose :not(pre) > code {
  background: var(--yellow);
  border: 1px solid var(--ink);
  padding: 1px 5px;
}
.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). 본문은 마크다운에서 오므로
   템플릿에서 표시할 수단이 없고, 목업의 리드도 결국 첫 문단이다.
   .prose 는 정적 페이지에서도 재사용하므로 아티클 본문으로만 한정한다. */
.article__main .prose > p:first-child {
  font-size: 21px;
  line-height: 1.68;
  font-weight: 700;
}

/* 참고 자료 — 본문이 아니라 부록이다. 본문(.prose)과 같은 폭에 맞추되 색은
   한 단계 죽여서(--sub) 읽는 순서에서 뒤로 물러나게 한다. 새 색은 만들지 않는다. */
.sources {
  max-width: 62ch;
  border-top: var(--bd) solid var(--ink);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sources__heading { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.sources__list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sub);
}
/* 출처 제목은 자를 곳이 없는 긴 URL 일 수 있다 — 넘치면 줄바꿈시킨다. */
.sources__list a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sources__list a:hover { color: var(--ink); }

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

/* ── 댓글 ──────────────────────────────────── */

.comments {
  border-top: var(--bd) solid var(--ink);
  padding-top: 30px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.comments__heading { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.comments__empty { margin: 0; color: var(--sub); }
.comments__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.comment {
  border: var(--bd) solid var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comment__head { display: flex; gap: 10px; align-items: baseline; }
.comment__author { font-size: 16px; }
.comment__body { margin: 0; font-size: 15px; line-height: 1.75; color: var(--sub); }

.commentform { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.commentform__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; }
.commentform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.commentform__field { display: flex; flex-direction: column; gap: 6px; }
.commentform input[type="text"],
.commentform input[type="email"],
.commentform textarea {
  font: inherit;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  min-height: 46px;
  border: var(--bd) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.commentform textarea { resize: vertical; }
.commentform .btn { align-self: flex-start; font-family: var(--font-display); }

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

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

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

.adslot {
  border: var(--bd) dashed var(--ink);
  min-height: 100px;
  width: 100%;
}

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

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

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

  .wrap { padding: 0 14px; }

  .hero__title { font-size: 34px; line-height: 1.14; }
  .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; }

  .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; }
  .prose pre { font-size: 12.5px; padding: 14px; }

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

  .comments__list { grid-template-columns: minmax(0, 1fr); }
  .commentform__row { grid-template-columns: minmax(0, 1fr); }
  .commentform input[type="text"],
  .commentform input[type="email"],
  .commentform textarea { font-size: 16px; min-height: 48px; }
  .commentform .btn { align-self: stretch; justify-content: center; }

  .adslot { min-height: 250px; }

  .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)를 밝게 — 토큰 한 벌만 바꾼다.
   그 다음 손대야 하는 곳은 둘뿐이다:

   ① 노랑 면은 다크에서도 밝다(브랜드색이라 밝기를 안 내렸다). 그래서 노랑 면 안에서만
      라이트 값을 되살린다. --ink 를 로컬로 되돌리면 color 뿐 아니라 그 안에서
      var(--ink)·var(--sub) 로 색을 잡는 글자까지 한꺼번에 따라온다.
      :root 에서 값이 확정되는 --shadow-* 는 이 복원에 영향받지 않아 그림자는 밝게 남는다.
   ② background: var(--ink) 로 그려지던 반전 면(.statusband·.site-footer·.prose pre)을
      그대로 두면 다크에서 '밝은 면'으로 뒤집혀 그 위의 노랑 hover 가 안 읽힌다.
      면만 한 단계 떠오른 어둠(#363129)으로 되살리면 안쪽 관계(크림 글자·노랑 강조)가
      라이트와 같아져 규칙을 하나도 안 고쳐도 된다.
      **자매 사이트 newshub 도 2026-09-16 부터 같은 값을 쓴다** — 그쪽은 밴드를 크림으로
      뒤집고 있었는데, 전폭 슬래브가 페이지보다 16.39 배 밝아 눈부시고 그 위 노랑 hover 가
      1.16 이라 안 읽혔다. 한쪽 값을 바꿀 일이 있으면 두 저장소를 같이 고칠 것.

   대비 실측(WCAG 2.1, 본문 4.5 / 그래픽 3.0 — 라이트·다크 모두 실패 0):
   본문 16.39 · 보조문 7.95 · 링크 5.62 · 노랑면 글자 14.26 · 노랑면 링크 4.63 ·
   적색면 글자 5.62 · 반전면 글자 11.39 · 반전면 노랑 9.68 · 반전면 흐린 글자 5.17.

   광고: <ins> 안쪽 색은 우리가 못 바꾼다 — 다크에서 흰 광고가 그대로 뜨는 것은 정상이다.
   .adslot 에 배경·테두리·필터를 씌우지 않는다(콘텐츠로 위장하는 배치는 정책 위반이고,
   그 점선 테두리는 DEBUG 에서만 렌더된다 — blog/tests/test_layout.py). */

@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;  /* 유리·카드 면 — 위 주석의 다크 실측 */
  }

  @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,
  .prose :not(pre) > code,
  .article__stamp,
  .rail__box--accent,
  .page__code {
    --ink: #111010;
    --paper: #F3F1E7;
    --sub: #4A4744;
    --faint: #6E6A5E;
    --accent: oklch(0.52 0.21 25);
    color: var(--ink);
  }

  .prose pre {
    --ink: #363129;
    --paper: #F3F1E7;
    --faint: #A8A497;
  }
}

/* 쿠팡 파트너스 칸(coupang.py) — 이 사이트 토큰만 쓴다. ink·sub·paper·accent, 시안 E 규칙대로 radius 0·테두리 --bd (대비는 위 실측 그대로: 본문 16.39·보조문 7.95·링크 5.62). */
.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; }