/* ═══════════════════════════════════════════════════════════════
   AI3 블로그 — 에디토리얼 디자인 시스템 (2026-07-21)
   ai3.css 뒤에 블로그 페이지에서만 로드. 목록(blog/index.html) ·
   글 본문(SSR posts.go) · 정적 글 6편이 이 한 파일을 공유한다.
   문법: 종이(canvas) 위 잉크(ink) — 명조 디스플레이(Noto Serif KR),
   신문 괘선(굵은 잉크 룰 + 헤어라인), mono 날짜줄, 카테고리 핍.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --f-serif: "Noto Serif KR", "Apple SD Gothic Neo", Batang, serif;
  --bl-measure: 680px;          /* 본문 읽기 폭 */
  --bl-rule: 3px solid var(--ink);
}

/* ── 배지 → 카테고리 라벨 (핍 + 텍스트) ─────────────────────────
   ai3.css 의 filled chip 배지를 블로그 안에서만 에디토리얼 라벨로.
   badge-<product> 클래스가 color 를 주므로 currentColor 핍이 공짜. */
.post-hero .badge, .story-row .badge, .cover-story .badge, .post-card .badge {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  font-family: var(--f-display);
  font-size: 12.5px !important;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--body-soft);
}
.post-hero .badge::before, .story-row .badge::before,
.cover-story .badge::before, .post-card .badge::before {
  content: "";
  width: 8px; height: 8px;
  background: currentColor;
  flex: none;
}
.post-hero .badge .ko-only, .story-row .badge .ko-only,
.cover-story .badge .ko-only, .post-card .badge .ko-only { font-size: 12.5px; }
/* 배지 사이 중점 구분 */
.post-hero .badge + .badge::after { display: none; }

/* ═══════════════════════════════════════════════════
   1. 목록 — 마스트헤드
   ═══════════════════════════════════════════════════ */
.bl-wrap { max-width: 1080px; margin: 0 auto; }

.bl-masthead { padding: calc(var(--s-16) + 12px) 0 0; background: var(--canvas); }
.bl-masthead .mh-rule { border-top: var(--bl-rule); }
.bl-masthead .mh-dateline {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--f-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--body-muted);
}
.bl-masthead .mh-dateline .mh-right { display: inline-flex; gap: 22px; align-items: baseline; }
.bl-masthead .mh-dateline a {
  color: var(--body-muted); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 140ms, border-color 140ms;
}
.bl-masthead .mh-dateline a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.bl-masthead .mh-statement {
  font-family: var(--f-serif);
  font-size: clamp(36px, 5.2vw, 62px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 54px 0 20px;
  text-wrap: balance;
  word-break: keep-all;
}
.bl-masthead .mh-lede {
  font-size: 17px; line-height: 1.7; color: var(--body);
  max-width: 640px; word-break: keep-all;
  margin-bottom: 54px;
}

/* ── 카테고리 탭 — 헤어라인 위 텍스트 탭 ── */
.cat-bar {
  display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding: 0;
  margin-bottom: 0;
  background: transparent; border-radius: 0;
}
.cat-bar .chip {
  font-family: var(--f-display);
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.006em;
  padding: 13px 0 12px;
  margin-bottom: -1px;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--body-muted); cursor: pointer;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.cat-bar .chip:hover { color: var(--ink); }
.cat-bar .chip.active { color: var(--ink); border-bottom-color: var(--ink); background: transparent; }

/* ═══════════════════════════════════════════════════
   2. 목록 — 커버스토리
   ═══════════════════════════════════════════════════ */
.cover-story {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(36px, 4.5vw, 56px) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
.cover-story .cs-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.cover-story .cs-kicker::before {
  content: ""; width: 22px; height: 10px;
  background: var(--brand-gradient);
}
.cover-story .cs-badges { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.cover-story .cs-title {
  font-family: var(--f-serif);
  font-size: clamp(27px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
  word-break: keep-all;
  transition: color 160ms;
}
.cover-story:hover .cs-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--hairline-strong); }
.cover-story .cs-excerpt {
  font-size: 16px; line-height: 1.72; color: var(--body);
  word-break: keep-all;
  margin: 0 0 22px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cover-story .cs-art {
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.cover-story .cs-art img {
  display: block; width: 100%; aspect-ratio: 1200/630; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.cover-story:hover .cs-art img { transform: scale(1.02); }
@media (max-width: 880px) {
  .cover-story { grid-template-columns: 1fr; gap: 22px; }
  .cover-story .cs-art { order: -1; }
}
/* 대표 이미지가 자동 커버(제목이 그려진 지면 카드)면 헤드라인과 중복 —
   커버스토리는 이미지 없이 순수 타이포그래피로 크게 간다. */
.cover-story.no-art { grid-template-columns: 1fr; }
.cover-story.no-art .cs-art { display: none; }
.cover-story.no-art .cs-title {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.26;
  max-width: 920px;
}
.cover-story.no-art .cs-excerpt { max-width: 760px; font-size: 17px; }

/* 바이라인 (커버·행 공용) */
.bl-byline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--body-soft);
}
.bl-byline .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-gradient) center/cover;
  flex: none;
}
.bl-byline .author { font-weight: 600; color: var(--ink); }
.bl-byline .sep::before { content: "·"; color: var(--body-muted); margin: 0 3px; }
.bl-byline time, .bl-byline .mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.02em; }

/* ═══════════════════════════════════════════════════
   3. 목록 — 스토리 레저 (헤어라인 행)
   ═══════════════════════════════════════════════════ */
.story-list { display: block; }
.story-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 208px;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
.story-row .sr-meta { padding-top: 5px; display: flex; flex-direction: column; gap: 12px; }
.story-row .sr-date {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--body-muted);
}
.story-row .sr-badges { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.story-row .sr-title {
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  word-break: keep-all;
  text-wrap: balance;
}
.story-row:hover .sr-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--hairline-strong); }
.story-row .sr-excerpt {
  font-size: 15px; line-height: 1.66; color: var(--body);
  word-break: keep-all;
  margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story-row .sr-thumb {
  overflow: hidden;
  border: 1px solid var(--hairline);
  align-self: center;
}
.story-row .sr-thumb img {
  display: block; width: 100%; aspect-ratio: 1200/630; object-fit: cover;
  transition: transform 500ms var(--ease);
}
.story-row:hover .sr-thumb img { transform: scale(1.03); }

@media (max-width: 880px) {
  .story-row { grid-template-columns: minmax(0, 1fr) 118px; gap: 18px; padding: 26px 0; }
  .story-row .sr-meta {
    grid-column: 1 / -1; padding-top: 0;
    flex-direction: row; align-items: center; gap: 14px;
  }
  .story-row .sr-badges { flex-direction: row; gap: 14px; }
  .story-row .sr-title { font-size: 19px; }
  .story-row .sr-excerpt { -webkit-line-clamp: 3; margin-bottom: 10px; }
  .story-row .sr-thumb { align-self: start; margin-top: 4px; }
}

/* 목록 끝 — 더 보기/피드 안내 줄 */
.bl-colophon {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 22px 0 0;
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--body-muted);
}
.bl-colophon a { color: var(--body-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.bl-colophon a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ═══════════════════════════════════════════════════
   4. 글 본문 — 히어로 (센터 정렬 에디토리얼)
   ═══════════════════════════════════════════════════ */
.post-hero {
  background: var(--canvas);
  border-bottom: 0;
  padding: calc(var(--s-16) + 8px) 0 0;
}
.post-hero .container-narrow { max-width: 880px; }
.post-hero .back-link { margin-bottom: 34px; }
.post-hero .badge-row,
.post-hero > .container > div:first-of-type { justify-content: center; }
.post-hero .badge-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.post-hero h1, .post-hero h1.t-display-xl {
  font-family: var(--f-serif);
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.012em;
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  margin: 0 auto 22px;
  max-width: 820px;
}
.post-hero .lead {
  font-size: 19px; line-height: 1.68; letter-spacing: -0.01em;
  color: var(--body);
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
  max-width: 640px;
  margin: 0 auto;
}
/* 바이라인 — 헤어라인 두 줄 사이 */
.post-hero .post-meta {
  justify-content: center;
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.post-hero .post-meta .avatar { width: 34px; height: 34px; }
/* 정적 글 히어로의 배지 줄(div inline) 센터 */
.post-hero .container-narrow > div[style] { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }

/* 대표 이미지 — 종이 위 도판 */
.hero-image-wrap {
  background: var(--canvas);
  border-bottom: 0;
  padding: var(--s-10) 0 0;
}
.hero-image-wrap .container-narrow { max-width: 880px; }
.hero-image-wrap .container-narrow img {
  width: 100%; aspect-ratio: auto; max-height: 560px; object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--hairline);
}

/* ═══════════════════════════════════════════════════
   5. 글 본문 — 타이포그래피
   ═══════════════════════════════════════════════════ */
article.post-body {
  max-width: var(--bl-measure);
  margin: 0 auto;
  padding: var(--s-12) var(--s-6) var(--s-16);
  font-size: 18px;
  line-height: 1.88;
  letter-spacing: -0.004em;
  color: var(--ink);
  word-break: keep-all;
  overflow-wrap: break-word;
}
article.post-body p { margin: 0 0 28px; }

/* 본문 소제목 — 산세리프 볼드 (표지·제목은 명조, 본문 위계는 실용 톤) */
article.post-body h2 {
  font-family: var(--f-display);
  font-size: 27px; font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.38;
  margin: 72px 0 22px;
  word-break: keep-all;
}
article.post-body h3 {
  font-family: var(--f-display);
  font-size: 21px; font-weight: 700;
  letter-spacing: -0.016em; line-height: 1.42;
  margin: 50px 0 16px;
  word-break: keep-all;
}
article.post-body h2:first-child, article.post-body h3:first-child { margin-top: 0; }

article.post-body ul, article.post-body ol { padding-left: 1.35em; margin: 0 0 28px; }
article.post-body li { margin-bottom: 10px; }
article.post-body li::marker { color: var(--body-muted); }

/* 인용 — 명조 + 잉크 세로 괘선 */
article.post-body blockquote {
  border-left: 2px solid var(--ink);
  background: transparent;
  border-radius: 0;
  margin: 44px 0;
  padding: 4px 0 4px 30px;
  font-family: var(--f-serif);
  font-style: normal;
  font-size: 20px; font-weight: 500;
  line-height: 1.78;
  color: var(--ink);
}
article.post-body blockquote p { margin: 0 0 12px; }
article.post-body blockquote p:last-child { margin-bottom: 0; }

/* 구분선 — 짧은 헤어라인 */
article.post-body hr {
  border: 0;
  border-top: 1px solid var(--hairline-strong);
  width: 72px;
  margin: 56px auto;
}

/* 강조 */
article.post-body strong { font-weight: 700; color: var(--ink); }
article.post-body u {
  text-decoration: none;
  background: linear-gradient(transparent 62%, rgba(255, 208, 74, 0.5) 62%);
  padding: 0 1px;
}

/* 링크 — 은은한 브랜드 밑줄 */
article.post-body a {
  color: var(--ink); font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(65, 81, 255, 0.36);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  border-radius: 2px;
  transition: color 140ms, background-color 140ms, text-decoration-color 140ms;
}
article.post-body a:hover {
  color: var(--grad-3);
  text-decoration-color: currentColor;
  background: rgba(65, 81, 255, 0.06);
}

/* 코드 */
article.post-body code {
  background: var(--canvas-dim);
  border: 1px solid var(--hairline);
  padding: 2px 7px; border-radius: 4px;
  font-family: var(--f-mono); font-size: 0.85em;
}
article.post-body pre {
  background: var(--canvas-dark); color: var(--on-dark);
  padding: 22px 24px; border-radius: 6px;
  overflow-x: auto; line-height: 1.65; margin: 40px 0;
}
article.post-body pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: 14.5px; }

/* 도판 */
article.post-body img {
  margin: 44px auto; max-width: 100%; height: auto; display: block;
  border-radius: 0;
  border: 1px solid var(--hairline);
  cursor: zoom-in;
}
article.post-body figcaption {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--body-soft); text-align: center;
  margin-top: -30px; margin-bottom: 44px;
}

/* 표 */
article.post-body .tableWrapper {
  overflow-x: auto; overflow-y: hidden;
  margin: 40px 0;
  border: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
  background: transparent;
}
article.post-body .tableWrapper::-webkit-scrollbar { height: 6px; }
article.post-body .tableWrapper::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 999px; }
article.post-body table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: 15.5px; background: transparent;
}
article.post-body th, article.post-body td {
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 14px;
  text-align: left; vertical-align: top;
  word-break: break-word;
  line-height: 1.6;
}
article.post-body tr:last-child td { border-bottom: 0; }
article.post-body th {
  background: transparent;
  font-weight: 700; color: var(--ink);
  font-size: 13.5px;
  border-bottom: 1px solid var(--hairline-strong);
}
article.post-body table p { margin: 0; min-height: 1.5em; line-height: 1.55; }

/* 헤딩 앵커 — 왼쪽 여백에 매달아 헤딩이 본문과 같은 축에 정렬되게 */
article.post-body h2, article.post-body h3 { position: relative; }
article.post-body .anchor {
  position: absolute; left: -0.95em; top: 0;
  color: var(--body-muted); text-decoration: none;
  opacity: 0; transition: opacity 160ms; background: none;
}
article.post-body h2:hover .anchor, article.post-body h3:hover .anchor { opacity: 1; }
@media (max-width: 800px) { article.post-body .anchor { display: none; } }

/* 인라인 목차 */
.toc {
  border-left: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding: 18px 2px 20px;
  margin: 0 0 var(--s-10);
  font-size: 15.5px;
}
.toc-title {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--body-muted); margin-bottom: 14px;
}
.toc ul { list-style: none; padding-left: 0; margin: 0; }
.toc li { margin: 9px 0; }
.toc li.l3 { padding-left: 18px; font-size: 14px; }
article.post-body .toc a {
  color: var(--body); font-weight: 500;
  text-decoration: none; background: none;
  transition: color 140ms;
}
article.post-body .toc a:hover { color: var(--ink); background: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hairline-strong); }

/* Embeds */
article.post-body .embed, article.post-body figure.embed { margin: 44px 0; }
article.post-body .embed-youtube, article.post-body .embed-vimeo, article.post-body .embed-codepen {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  border: 1px solid var(--hairline); background: var(--canvas-dim);
}
article.post-body .embed-youtube iframe, article.post-body .embed-vimeo iframe, article.post-body .embed-codepen iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
article.post-body .embed-twitter { margin: 44px auto; }
article.post-body .embed-gist { background: var(--canvas-dim); padding: 12px; border: 1px solid var(--hairline); }
article.post-body .embed-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 22px;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  text-decoration: none !important;
  transition: border-color 160ms;
  position: relative;
}
article.post-body .embed-card:hover { border-color: var(--ink); background: transparent; }
article.post-body .embed-card .card-host { font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--body-muted); }
article.post-body .embed-card .card-url { font-size: 15.5px; color: var(--ink); word-break: break-all; }
article.post-body .embed-card .card-arrow { position: absolute; top: 18px; right: 22px; color: var(--body-muted); font-size: 18px; }

/* ═══════════════════════════════════════════════════
   6. 글 끝 영역 (post-after)
   ═══════════════════════════════════════════════════ */
.post-after {
  background: var(--canvas);
  border-top: 0;
  padding: 0 0 var(--s-20);
  margin-top: var(--s-6);
}
.post-after .container-narrow { max-width: var(--bl-measure); padding: 0 var(--s-6); }

/* 글쓴이 — 괘선 사이 */
.author-card {
  display: flex; align-items: center; gap: 18px;
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  padding: 26px 0 24px;
  margin-bottom: var(--s-6);
}
.author-card .a-photo {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: var(--brand-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px;
  background-size: cover; background-position: center;
}
.author-card .a-eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--body-muted); margin-bottom: 4px; }
.author-card .a-name { font-family: var(--f-serif); font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.author-card .a-role { font-size: 14px; color: var(--body); margin-top: 2px; }

/* 태그 — 텍스트만 */
.tag-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: var(--s-8); }
.tag-row .tag {
  font-family: var(--f-mono);
  font-size: 12.5px; letter-spacing: 0.02em;
  padding: 0; border-radius: 0;
  background: transparent; border: 0;
  color: var(--body-soft);
}

/* 공유 — 모노크롬 고스트 */
.share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--s-10); }
.share-row .share-label {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--body-muted); margin-right: 4px;
}
.share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; font-family: var(--f-display);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink);
  transition: all 160ms; text-decoration: none;
}
.share-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--canvas); transform: none; }
.share-btn svg { display: block; }
.share-li, .share-x { background: transparent; border-color: var(--hairline-strong); color: var(--ink); }
.share-li:hover, .share-x:hover { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.share-copy.ok { background: var(--canvas-dim); border-color: var(--ink); color: var(--ink); }

/* 이전/다음 글 — 괘선 분할 */
.nav-prev-next {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-10);
}
.nav-prev-next a {
  display: block; background: transparent;
  border: 0; border-radius: 0;
  padding: 24px 26px 24px 0;
  text-decoration: none !important;
  color: var(--ink);
  transition: none; box-shadow: none; transform: none;
  flex: none;
}
.nav-prev-next a + a { border-left: 1px solid var(--hairline); padding: 24px 0 24px 26px; }
.nav-prev-next a:hover { border-color: var(--hairline); transform: none; box-shadow: none; }
.nav-prev-next a small {
  display: block; font-family: var(--f-mono);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--body-muted); margin-bottom: 10px;
}
.nav-prev-next a .ttl {
  font-family: var(--f-serif);
  font-size: 17px; font-weight: 700; color: var(--ink);
  line-height: 1.5; letter-spacing: -0.008em;
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: text-decoration-color 160ms;
}
.nav-prev-next a:hover .ttl { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--hairline-strong); }
.nav-prev-next a.next { text-align: right; }
@media (max-width: 600px) {
  .nav-prev-next { grid-template-columns: 1fr; }
  .nav-prev-next a + a { border-left: 0; border-top: 1px solid var(--hairline); padding: 24px 0; }
  .nav-prev-next a { padding: 24px 0; }
  .nav-prev-next a.next { text-align: left; }
}

/* ═══════════════════════════════════════════════════
   7. 구독 — 뉴스레터 박스 (목록·본문 공용)
   ═══════════════════════════════════════════════════ */
.subscribe-card {
  background: var(--canvas-dim);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 46px 36px 38px;
  text-align: center;
  margin-top: var(--s-8);
  position: relative;
}
.subscribe-card::before {
  content: "";
  position: absolute; top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--brand-gradient);
}
.subscribe-card h3, .subscribe-card h2 {
  font-family: var(--f-serif);
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 10px; color: var(--ink);
  word-break: keep-all;
}
.subscribe-card p {
  font-size: 15px; color: var(--body); line-height: 1.7;
  max-width: 460px; margin: 0 auto 26px;
  word-break: keep-all;
}
.subscribe-card form {
  display: flex; gap: 10px; max-width: 460px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.subscribe-card input[type=email] {
  flex: 1; min-width: 220px;
  padding: 12px 4px; font-size: 15px;
  border: 0; border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--f-display); outline: none;
  transition: border-color 120ms;
}
.subscribe-card input[type=email]::placeholder { color: var(--body-muted); }
.subscribe-card input[type=email]:focus { border-bottom-color: var(--grad-3); }
.subscribe-card button, .subscribe-card .btn {
  padding: 12px 26px; font-size: 14.5px; font-weight: 600;
  background: var(--ink); color: var(--on-dark, #fff);
  border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--f-display); transition: background 120ms;
}
.subscribe-card button:hover, .subscribe-card .btn:hover { background: var(--ink-strong); transform: none; }
.subscribe-card .legal {
  font-family: var(--f-mono);
  font-size: 11.5px; color: var(--body-muted);
  margin-top: 18px; letter-spacing: 0.01em;
  max-width: none;
}

/* ═══════════════════════════════════════════════════
   8. 읽기 진행 바 · 목차 레일 · 라이트박스 · 리드 게이트
   ═══════════════════════════════════════════════════ */
#read-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--brand-gradient); z-index: 300; pointer-events: none;
}

#toc-rail {
  position: fixed; top: 150px; left: calc(50% + 384px); width: 240px;
  display: none; opacity: 0; transition: opacity 220ms var(--ease);
}
#toc-rail.show { opacity: 1; }
#toc-rail .rail-title {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--body-muted); margin-bottom: 12px;
}
#toc-rail ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline); }
#toc-rail li a {
  display: block; padding: 6px 0 6px 14px; margin-left: -1px;
  font-size: 13.5px; line-height: 1.55; color: var(--body-soft);
  text-decoration: none; border-left: 2px solid transparent;
  transition: color 140ms, border-color 140ms;
  word-break: keep-all;
}
#toc-rail li.l3 a { padding-left: 26px; font-size: 12.5px; }
#toc-rail li a:hover { color: var(--ink); }
#toc-rail li a.active { color: var(--ink); border-left-color: var(--ink); font-weight: 600; }
@media (min-width: 1400px) { #toc-rail.on { display: block; } }

.lb-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10,10,14,0.93);
  display: flex; align-items: center; justify-content: center;
  padding: 28px; cursor: zoom-out;
}
.lb-overlay img { max-width: 100%; max-height: 100%; border-radius: 4px; cursor: zoom-out; }

/* 리드 게이트 */
.lead-gate { position: relative; margin-top: -8px; }
.lead-gate .gate-fade {
  position: absolute; top: -170px; left: 0; right: 0; height: 170px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 88%);
  pointer-events: none;
}
.lead-gate .gate-card {
  background: var(--canvas);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--hairline);
  padding: 40px 32px 32px;
  text-align: center;
  margin: 0 0 var(--s-10);
  position: relative;
}
.lead-gate .gate-card::before {
  content: "";
  position: absolute; top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--brand-gradient);
}
.lead-gate .gate-eyebrow {
  font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink); font-weight: 600; margin-bottom: 14px;
}
.lead-gate h3 {
  font-family: var(--f-serif);
  font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4;
  margin-bottom: 10px; color: var(--ink); word-break: keep-all;
}
.lead-gate .gate-sub { font-size: 15.5px; color: var(--body); line-height: 1.7; max-width: 460px; margin: 0 auto 24px; word-break: keep-all; }
.lead-gate .gate-google { display: flex; justify-content: center; margin-bottom: 18px; min-height: 44px; }
.lead-gate .gate-consent {
  display: inline-flex; align-items: flex-start; gap: 9px; text-align: left;
  font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.55;
  background: var(--canvas-dim); border: 1px solid var(--hairline);
  border-radius: 0; padding: 12px 16px; max-width: 420px;
}
.lead-gate .gate-consent input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.lead-gate .gate-legal { font-family: var(--f-mono); font-size: 11px; color: var(--body-muted); margin-top: 14px; line-height: 1.7; }

/* ═══════════════════════════════════════════════════
   9. 멤버 UI — GNB 칩 · 로그아웃 모달 (목록·글 공용)
   ═══════════════════════════════════════════════════ */
.reader-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--canvas);
  cursor: pointer; transition: border-color 140ms;
  font-family: var(--f-display);
}
.reader-chip:hover { border-color: var(--hairline-strong); }
.reader-chip .rc-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--brand-gradient) center/cover;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.reader-chip .rc-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 중앙 고정 메뉴와 겹치지 않게 중간 폭에선 이름 숨김(아바타만) */
@media (max-width: 1280px) { .reader-chip .rc-name { display: none; } }

.rc-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(11,11,18,0.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: rcFade 160ms ease;
}
@keyframes rcFade { from { opacity: 0; } to { opacity: 1; } }
.rc-modal {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(14,14,18,0.35);
  width: 100%; max-width: 400px;
  padding: 26px 26px 20px;
  animation: rcIn 180ms var(--ease, ease);
  font-family: var(--f-display);
}
@keyframes rcIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.rc-modal h3 { font-size: 19px; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; }
.rc-modal p { font-size: 14.5px; color: var(--body); line-height: 1.65; margin: 0 0 20px; word-break: keep-all; }
.rc-modal .rc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rc-modal .rc-actions button {
  padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--hairline-strong); background: var(--canvas);
  color: var(--ink); cursor: pointer; font-family: var(--f-display);
  transition: background 120ms;
}
.rc-modal .rc-actions button:hover { background: var(--canvas-dim); }
.rc-modal .rc-actions button.rc-out {
  background: var(--ink); color: var(--on-dark, #fff); border-color: var(--ink);
}
.rc-modal .rc-actions button.rc-out:hover { background: var(--ink-strong); }

/* ═══════════════════════════════════════════════════
   10. 접근성 · 모션
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cover-story .cs-art img, .story-row .sr-thumb img { transition: none; }
  .cover-story:hover .cs-art img, .story-row:hover .sr-thumb img { transform: none; }
}