@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════
   stage3.css - 본문 view (article-card / header / body / footer)
   ────────────────────────────────────────────────────────────────────
   원본 style.css 의 STAGE 3 영역을 분리.
   포함 컴포넌트:
   - .article-card (본문 페이지 카드 베이스 + radius 30px)
   - .article-card .area-view (제목/메타/요약/본문 영역)
   - .article-card .area-tag (태그 리스트)
   - .article-card .area-article-foot (이전/다음 글 페이지네이션)
   - Stage 3 모바일 보정 (~768px)

   파일 끝의 'Stage 3 종료' 박스 주석은 의도적으로 포함됨
   (각 stage 파일의 자기 완결성 유지).

   원칙 준수:
   - !important 0개
   - 하드코딩 0개 (모두 CSS 변수)
   - 시맨틱+컴포넌트 2단 구조
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   STAGE 3 - 본문 view (article-card / header / body / footer)
   - 시안 01~07 본문 페이지 디자인 일치
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   28. article-card 베이스 — 기준 정리 §2 적용
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-card {
  /* 공통 카드 베이스(--card-radius = 28px) 보다 한 단계 큰 radius (기준 §2: 30px)
   * ※ 다른 카드(hero/category/post)는 영향 받지 않도록 article-card 전용 토큰 사용 */
  border-radius: var(--article-card-radius);
  margin-bottom: var(--space-9);
  /* 둥근 모서리 안 콘텐츠 클리핑 — 카드 모서리 밖으로 자식 요소가 튀어나오지 않도록 */
  overflow: clip;
}


/* ════════════════════════════════════════════════════════════════════
   29. article-header (카테고리 / 제목 / lead / 메타)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-header {
  position: relative;
  /* 추가.txt: 본문 카드 내부 여백 45px (좌우/위) + 메타정보 아래 간격 30px (아래) */
  padding: var(--space-article-pad) var(--space-article-pad) var(--space-article-meta-bottom);
  /* hairline 은 .article-meta 의 border-bottom 으로 처리 (시안 매칭 후 위→아래로 이동) */
}

body.theme-odyssey-custom .article-header-inner {
  display: flex;
  flex-direction: column;
  /* gap 사용 안 함 - 각 요소 margin-bottom 으로 추가.txt 표 정확값 적용 */
}

/* 카테고리 라벨 (.article-cat / .category-label) — 기준 정리 §3
 * ※ .category-label 은 기준 §3 이 명시한 클래스 — 본문 박스 안 작성자 마크업용
 * ※ .article-cat 은 스킨이 출력하는 자동 카테고리 메타 — 동일 톤 공유
 * ※ Badge 공통값 위에서 padding 만 7×14 로, 아래 margin 18px 로 override (기준 §3) */
body.theme-odyssey-custom .article-cat,
body.theme-odyssey-custom .article-view .category-label {
  /* 추가.txt Badge 시스템 - 기본 카테고리 톤 */
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: var(--badge-min-h);
  padding: var(--category-label-pad-y) var(--category-label-pad-x);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-radius: var(--badge-radius);
  font-size: var(--badge-text);
  font-weight: var(--badge-weight);
  letter-spacing: var(--letter-spacing);
  /* 기준 정리 §3: 아래 간격 18px */
  margin: 0 0 var(--category-label-bottom);
}

body.theme-odyssey-custom .article-title {
  font-size: var(--text-article-title-pc);
  font-weight: var(--weight-article-title);
  color: var(--color-article-title);
  /* 기준 정리 §4: 줄간격 1.22 (--leading-display, 이전 --leading-tight 1.25) */
  line-height: var(--leading-display);
  /* 기준 정리 §4: 자간 -0.055em (--letter-spacing-display, 이전 --letter-spacing -0.02em) */
  letter-spacing: var(--letter-spacing-display);
  /* 기준 정리 §4: 제목 아래 간격 17px */
  margin: 0 0 var(--space-article-title-bottom);
  word-break: keep-all;
}

body.theme-odyssey-custom .article-lead {
  font-size: var(--text-article-lead-pc);
  font-weight: var(--weight-article-lead);
  color: var(--color-article-meta);
  /* 기준 정리 §5: 리드문 줄간격 1.78 (--leading-loose, 이전 --leading-relaxed 1.7) */
  line-height: var(--leading-loose);
  letter-spacing: var(--letter-spacing);
  /* 기준 정리 §5: 리드문 아래 간격 24px */
  margin: 0 0 var(--space-article-lead-bottom);
  /* 시안 매칭: H1 아래 설명은 약 2줄에서 끝나도록 line-clamp */
  display: -webkit-box;
  -webkit-line-clamp: var(--article-lead-line-clamp);
  line-clamp: var(--article-lead-line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* lead 가 비어있으면 숨김 (data-summary / meta description 어디에도 없을 때) */
body.theme-odyssey-custom .article-lead:empty {
  display: none;
}

body.theme-odyssey-custom .article-meta {
  display: flex;
  align-items: center;
  /* 기준 정리 §6: 메타 항목 간격 12px (--space-article-meta-gap, 이전 16) */
  gap: var(--space-article-meta-gap);
  flex-wrap: wrap;
  /* 기준 정리 §6: 메타 텍스트 ↔ 구분선 26px (--space-article-meta-pad-bottom, 이전 20)
   * 구분선 ↔ 본문 28px 은 .article-header padding-bottom 으로 처리 (이중 적용 방지) */
  padding-bottom: var(--space-article-meta-pad-bottom);
  border-bottom: var(--article-meta-border-bottom);
  font-size: var(--text-article-meta-pc);
  /* 기준 정리 §6: 글씨 굵기 700 (--weight-article-meta, 이전 --weight-medium 500) */
  font-weight: var(--weight-article-meta);
  color: var(--color-article-meta);
  letter-spacing: var(--letter-spacing);
  /* 메타 아래 간격은 article-header padding-bottom 으로 처리 (이중 적용 방지) */
  margin: 0;
}

body.theme-odyssey-custom .article-date {
  color: var(--color-article-meta);
}
body.theme-odyssey-custom .article-writer {
  /* 시안 매칭: 작성자 이름도 날짜와 동일한 muted 톤 (이전: --color-article-body 다크) */
  color: var(--color-article-writer);
  font-weight: var(--weight-article-writer);
}


/* ════════════════════════════════════════════════════════════════════
   30. article-view 본문 타이포그래피 (h1~h6 / p / ul / ol / dl)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view {
  /* 추가.txt: 본문 카드 내부 여백 45px (좌우/하). 위는 0 = article-header padding-bottom 이 30px 처리 */
  padding: 0 var(--space-article-pad) var(--space-article-pad);
  font-size: var(--text-article-body-pc);
  font-weight: var(--weight-article-body);
  line-height: var(--leading-relaxed);
  color: var(--color-article-body);
  letter-spacing: var(--letter-spacing);
  word-wrap: break-word;
  word-break: keep-all;
}

/* 첫 / 마지막 자식 요소 마진 보정 */
body.theme-odyssey-custom .article-view > *:first-child {
  margin-top: 0;
}
body.theme-odyssey-custom .article-view > *:last-child {
  margin-bottom: 0;
}

/* p */
body.theme-odyssey-custom .article-view p {
  /* 기준 정리 §20: 문단 아래 간격 19px, 글씨 17px, 줄간격 1.78 */
  margin: 0 0 var(--space-article-paragraph-bottom);
  font-size: var(--text-article-body-pc);
  font-weight: var(--weight-article-body);
  color: var(--color-article-body);
  line-height: var(--leading-loose);
}

/* h1 (본문 안에서 쓰일 가능성 낮지만 fallback) */
body.theme-odyssey-custom .article-view h1 {
  /* H1 위는 H2 와 동일 처리, 아래는 H2 와 동일 처리 (16px) */
  margin: var(--space-article-h2-top) 0 var(--space-article-h2-bottom);
  font-size: var(--text-article-title-pc);
  font-weight: var(--weight-article-title);
  color: var(--color-article-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--letter-spacing);
}

/* h2 - 큰 섹션 — 기준 정리 §18 적용
 * ※ 사용자 요청: h2 위 hairline 제거 (border-top + 관련 padding-top 함께 제거)
 * ※ 위 간격은 margin-top 만으로 처리 (--space-article-h2-top 42px)
 * ※ 자간 -0.045em (--letter-spacing-tight), 줄간격 1.35 (--leading-h2) */
body.theme-odyssey-custom .article-view h2 {
  /* 기준 §18: H2 위 42 / 아래 15 */
  margin: var(--space-article-h2-top) 0 var(--space-article-h2-bottom);
  font-size: var(--text-article-h2-pc);
  font-weight: var(--weight-article-h2);
  color: var(--color-article-title);
  /* 기준 §18: 줄간격 1.35 (이전 --leading-snug 1.4 → 1.35) */
  line-height: var(--leading-h2);
  /* 기준 §18: 자간 -0.045em (이전 --letter-spacing -0.02 → -0.045) */
  letter-spacing: var(--letter-spacing-tight);
  word-break: keep-all;
}
body.theme-odyssey-custom .article-view > h2:first-child {
  margin-top: 0;
}

/* h3 - 중간 섹션 — 기준 정리 §19 적용 */
body.theme-odyssey-custom .article-view h3 {
  /* 기준 §19: H3 위 30 / 아래 11 (이전 36 / 16) */
  margin: var(--space-article-h3-top) 0 var(--space-article-h3-bottom);
  font-size: var(--text-article-h3-pc);
  font-weight: var(--weight-article-h3);
  color: var(--color-article-title);
  /* 기준 §19: 줄간격 1.38 (이전 --leading-snug 1.4 → 1.38) */
  line-height: var(--leading-h3);
  letter-spacing: var(--letter-spacing);
  word-break: keep-all;
}

/* h4 - 소섹션 */
body.theme-odyssey-custom .article-view h4 {
  margin: var(--space-7) 0 var(--space-3);
  font-size: var(--text-article-h4-pc);
  font-weight: var(--weight-article-h4);
  color: var(--color-article-title);
  line-height: var(--leading-snug);
  letter-spacing: var(--letter-spacing);
}

body.theme-odyssey-custom .article-view h5 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-article-h5-pc);
  font-weight: var(--weight-article-h5);
  color: var(--color-article-title);
  line-height: var(--leading-snug);
  letter-spacing: var(--letter-spacing);
}

body.theme-odyssey-custom .article-view h6 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-article-h6-pc);
  font-weight: var(--weight-article-h6);
  color: var(--color-article-title);
  line-height: var(--leading-snug);
  letter-spacing: var(--letter-spacing);
}

/* a - 본문 링크 */
body.theme-odyssey-custom .article-view a {
  color: var(--color-article-link);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-thickness: var(--hairline);
  text-underline-offset: var(--underline-offset);
  letter-spacing: var(--letter-spacing);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .article-view a:hover {
  color: var(--color-article-link-hover);
}

/* strong / b */
body.theme-odyssey-custom .article-view strong,
body.theme-odyssey-custom .article-view b {
  font-weight: var(--weight-article-strong);
  color: var(--color-article-title);
}

/* em / i */
body.theme-odyssey-custom .article-view em,
body.theme-odyssey-custom .article-view i {
  font-style: italic;
}

/* del / s */
body.theme-odyssey-custom .article-view del,
body.theme-odyssey-custom .article-view s {
  color: var(--color-article-meta);
  text-decoration: line-through;
}

/* mark */
body.theme-odyssey-custom .article-view mark {
  background-color: var(--color-article-mark-bg);
  color: var(--color-article-mark-text);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
}

/* small */
body.theme-odyssey-custom .article-view small {
  font-size: var(--text-article-small-pc);
  color: var(--color-article-meta);
  letter-spacing: var(--letter-spacing);
}

/* ul / ol */
body.theme-odyssey-custom .article-view ul,
body.theme-odyssey-custom .article-view ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-7);
}
body.theme-odyssey-custom .article-view ul {
  list-style: disc;
}
body.theme-odyssey-custom .article-view ol {
  list-style: decimal;
}
body.theme-odyssey-custom .article-view li {
  margin: 0 0 var(--space-2);
  font-size: var(--text-article-body-pc);
  color: var(--color-article-body);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .article-view li::marker {
  color: var(--color-article-link);
  font-weight: var(--weight-bold);
}
body.theme-odyssey-custom .article-view li > ul,
body.theme-odyssey-custom .article-view li > ol {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* dl */
body.theme-odyssey-custom .article-view dl {
  margin: 0 0 var(--space-5);
}
body.theme-odyssey-custom .article-view dt {
  font-size: var(--text-article-body-pc);
  font-weight: var(--weight-article-strong);
  color: var(--color-article-title);
  letter-spacing: var(--letter-spacing);
  margin-bottom: var(--space-2);
}
body.theme-odyssey-custom .article-view dd {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  font-size: var(--text-article-body-pc);
  color: var(--color-article-meta);
  letter-spacing: var(--letter-spacing);
}


/* ════════════════════════════════════════════════════════════════════
   31. article-view 인용 / 코드 / 구분선
   ════════════════════════════════════════════════════════════════════ */

/* blockquote */
body.theme-odyssey-custom .article-view blockquote {
  margin: var(--space-7) 0;
  padding: var(--space-5) var(--space-7);
  background-color: var(--color-article-bq-bg);
  border-left: var(--quote-border-w) solid var(--color-article-bq-border);
  border-radius: var(--radius-md);
  color: var(--color-article-body);
  font-size: var(--text-article-blockquote-pc);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .article-view blockquote p {
  margin-bottom: var(--space-3);
  font-size: inherit;
  color: inherit;
}
body.theme-odyssey-custom .article-view blockquote p:last-child {
  margin-bottom: 0;
}
body.theme-odyssey-custom .article-view blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-article-small-pc);
  font-style: normal;
  color: var(--color-article-meta);
  letter-spacing: var(--letter-spacing);
}

/* ─ 본문 안의 시맨틱 컴포넌트 — .post-lead (도입부 리드 문단)
 * ※ 본문(.article-view p, 17px) 과 동일 크기. weight 500 으로 시각적 강조 차별화
 * ※ specificity (0,4,1) — .article-view p (0,3,1) 보다 한 단계 위 → font-size 등이 정상 덮어짐 */
body.theme-odyssey-custom .article-view p.post-lead {
  font-size:     var(--text-post-lead-pc);
  font-weight:   var(--weight-post-lead);
  color:         var(--color-post-lead);
  line-height:   var(--leading-post-lead);
  margin-bottom: var(--space-post-lead-bottom);
}

/* ════════════════════════════════════════════════════════════════════
   본문 영역 — Tistory 에디터 글씨 크기 매핑 (data-ke-size)
   - 에디터에서 사용자가 선택한 사이즈 (예: "16px" → data-ke-size="size16") 적용
   - 대상: p / li / blockquote / span / em / i / b / strong / dd / dt (본문 단락 요소)
   - 제외: h1~h6 헤딩 — :is() 리스트에 없으므로 자동으로 매칭되지 않음
           → 테마 토큰 (--text-article-h2-pc 등) 으로 일관 유지
   - PC/모바일 동일값 — 사용자가 명시한 절대 크기 우선
   - specificity: body(1tag) + .theme-odyssey-custom(1cls) + .article-view(1cls)
                  + :is(p,li,...)(1tag) + [data-ke-size="..."](1cls)
                  = (0,3,2) → .article-view p (0,2,2) 보다 한 단계 위 → 정상 덮어짐
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size12"] { font-size: var(--text-ke-size-12); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size14"] { font-size: var(--text-ke-size-14); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size15"] { font-size: var(--text-ke-size-15); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size16"] { font-size: var(--text-ke-size-16); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size17"] { font-size: var(--text-ke-size-17); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size18"] { font-size: var(--text-ke-size-18); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size20"] { font-size: var(--text-ke-size-20); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size22"] { font-size: var(--text-ke-size-22); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size24"] { font-size: var(--text-ke-size-24); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size26"] { font-size: var(--text-ke-size-26); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size28"] { font-size: var(--text-ke-size-28); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size30"] { font-size: var(--text-ke-size-30); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size32"] { font-size: var(--text-ke-size-32); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size34"] { font-size: var(--text-ke-size-34); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size36"] { font-size: var(--text-ke-size-36); }
body.theme-odyssey-custom .article-view :is(p, li, blockquote, span, em, i, b, strong, dd, dt)[data-ke-size="size38"] { font-size: var(--text-ke-size-38); }

/* pre + code (블록) */
body.theme-odyssey-custom .article-view pre {
  margin: var(--space-7) 0;
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-secondary-soft);
  border: var(--border-teal);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-article-code-pc);
  line-height: var(--leading-snug);
  color: var(--color-article-title);
  letter-spacing: var(--letter-spacing);
  overflow-x: auto;
}
body.theme-odyssey-custom .article-view pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* inline code */
body.theme-odyssey-custom .article-view code {
  background-color: var(--color-accent-soft);
  color: var(--color-article-title);
  padding: var(--code-pad-y) var(--code-pad-x);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--weight-medium);
  letter-spacing: var(--letter-spacing);
}

/* kbd */
body.theme-odyssey-custom .article-view kbd {
  background-color: var(--color-card);
  border: var(--border-soft);
  border-radius: var(--radius-xs);
  padding: var(--code-pad-y) var(--code-pad-x);
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: var(--weight-bold);
  color: var(--color-article-title);
  box-shadow: 0 var(--hairline) 0 var(--color-line);
}

/* hr */
body.theme-odyssey-custom .article-view hr {
  margin: var(--space-9) 0;
  border: 0;
  border-top: var(--border-soft);
  height: 0;
}


/* ════════════════════════════════════════════════════════════════════
   32. article-view 표 / 이미지 / 동영상 임베드
   ════════════════════════════════════════════════════════════════════ */

/* ─ 표(Table) 시스템 (추가.txt "표 Table 시스템") ─
 *
 *   .compare-table {
 *     border-radius: 24px;       → --radius-2xl
 *     font-size: 15.5px;          → --text-table
 *     padding: 17px 18px;         → --space-table-pad-y / --space-table-pad-x
 *   }
 *   .compare-table th {
 *     background: #DDE8E3;        → --color-secondary
 *     color: #2F6F73;             → --color-primary
 *     font-weight: 900;           → --weight-black
 *   }
 *
 *   본문 안의 일반 <table> 도 동일한 톤을 받도록 .article-view table 에도 적용.
 */
body.theme-odyssey-custom .article-view table,
body.theme-odyssey-custom .compare-table {
  width: 100%;
  /* 기준 정리 §22: 위 22 / 아래 32 */
  margin: var(--space-table-top) 0 var(--space-table-bottom);
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--color-card);
  border: var(--border-soft);
  /* 기준 정리 §22: border-radius 22px (이전 24 → 22) */
  border-radius: var(--table-radius);
  overflow: hidden;
  /* 기준 정리 §22: font-size 15px (이전 15.5 → 15) */
  font-size: var(--text-table);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .article-view thead th,
body.theme-odyssey-custom .compare-table th {
  /* 기준 정리 §23: 헤더 배경 #DDE8E3 / 헤더 글씨 #2F6F73 / weight 900 */
  background-color: var(--color-secondary);
  color: var(--color-primary);
  font-weight: var(--weight-black);
}
body.theme-odyssey-custom .article-view th,
body.theme-odyssey-custom .article-view td,
body.theme-odyssey-custom .compare-table th,
body.theme-odyssey-custom .compare-table td {
  /* 기준 정리 §23: 셀 padding 16 17 (이전 17 18 → 16 17) */
  padding: var(--space-table-pad-y) var(--space-table-pad-x);
  border-bottom: var(--border-soft);
  text-align: left;
  vertical-align: top;
}
body.theme-odyssey-custom .article-view th + th,
body.theme-odyssey-custom .article-view td + td,
body.theme-odyssey-custom .compare-table th + th,
body.theme-odyssey-custom .compare-table td + td {
  border-left: var(--border-soft);
}
body.theme-odyssey-custom .article-view tr:last-child td,
body.theme-odyssey-custom .article-view tr:last-child th,
body.theme-odyssey-custom .compare-table tr:last-child td {
  /* 추가.txt: tr:last-child td { border-bottom: 0 } */
  border-bottom: 0;
}

/* ─ .table-scroll - 추가.txt: "모바일에서 표가 깨질 수 있어 감싸는 박스" ─ */
body.theme-odyssey-custom .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 이미지 (티스토리 에디터 출력 형태) */
body.theme-odyssey-custom .article-view img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-5) 0;
}

/* figure / imageblock 컨테이너 */
body.theme-odyssey-custom .article-view figure,
body.theme-odyssey-custom .article-view .imageblock {
  margin: var(--space-7) 0;
}
body.theme-odyssey-custom .article-view figure img,
body.theme-odyssey-custom .article-view .imageblock img {
  display: block;
  margin: 0 auto;
}
body.theme-odyssey-custom .article-view figcaption {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-article-small-pc);
  color: var(--color-article-meta);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-normal);
}

/* ─ .post-hero — 시안 대표 이미지 컴포넌트 — 기준 정리 §7·§8 적용
 *  ※ 박스 (figure) : 살구 배경 + 라인 테두리 + 28px radius — 이미지/캡션을 감싸는 컨테이너
 *  ※ 이미지 (img)  : 높이 330px + object-fit cover — 같은 비율로 잘려서 일관된 시각 톤
 *  ※ 캡션 (figcaption) : 반투명 흰 배경 + 위 구분선 — 박스 안쪽 하단에 띠 형태
 *  ※ 마크업 예시:
 *     <figure class="post-hero">
 *       <img src="..." alt="...">
 *       <figcaption>한 달간 매일 사용한 자취 필수템 다섯 가지</figcaption>
 *     </figure>
 *  ※ 이미지가 없는 placeholder 상태(시안 검토용 빈 figure)도 동일 박스 배경으로 자연스럽게 표시 */
body.theme-odyssey-custom .article-view .post-hero {
  /* 박스 자체 — 기준 §7 */
  background-color: var(--post-hero-bg);
  border: var(--post-hero-border);
  border-radius: var(--post-hero-radius);
  /* 라운드 안쪽 캡션 띠가 박스 밖으로 새지 않도록 클립 */
  overflow: hidden;
  margin: var(--post-hero-margin-top) 0 var(--post-hero-margin-bottom);
}
body.theme-odyssey-custom .article-view .post-hero img {
  /* 이미지 — 기준 §7: 높이 330px + object-fit cover */
  display: block;
  width: 100%;
  height: var(--post-hero-img-h);
  object-fit: var(--post-hero-img-fit);
  /* 박스 자체가 radius 와 overflow:hidden 으로 라운드를 만들기 때문에 img radius 는 불필요 */
}
body.theme-odyssey-custom .article-view .post-hero figcaption {
  /* 캡션 — 기준 §8: 박스 안쪽 하단 띠, 반투명 흰 + 위 구분선 */
  background-color: var(--post-hero-caption-bg);
  border-top: var(--post-hero-caption-border-top);
  padding: var(--post-hero-caption-pad-y) var(--post-hero-caption-pad-x);
  font-size: var(--post-hero-caption-size);
  font-weight: var(--post-hero-caption-weight);
  color: var(--post-hero-caption-color);
  text-align: var(--post-hero-caption-align);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-normal);
  /* 박스 안쪽에 붙는 띠이므로 위 margin 제거 (이전 caption-top 토큰 폐기) */
  margin: 0;
}
/* placeholder: 이미지가 없을 때 — 박스 배경과 동일 살구색으로 자연스럽게
 * ※ 박스 자체에 이미 배경/border/radius 가 있어서 별도 처리 최소화, 최소 높이만 보장 */
body.theme-odyssey-custom .article-view .post-hero:not(:has(img)) {
  min-height: var(--post-hero-min-h-placeholder);
}

/* 이미지 정렬 - 티스토리 신/구버전 클래스 모두 지원 */
body.theme-odyssey-custom .article-view .imageblock.alignLeft,
body.theme-odyssey-custom .article-view .imageblock.fl {
  text-align: left;
}
body.theme-odyssey-custom .article-view .imageblock.alignLeft img,
body.theme-odyssey-custom .article-view .imageblock.fl img {
  margin-left: 0;
  margin-right: auto;
}
body.theme-odyssey-custom .article-view .imageblock.alignCenter,
body.theme-odyssey-custom .article-view .imageblock.fc {
  text-align: center;
}
body.theme-odyssey-custom .article-view .imageblock.alignRight,
body.theme-odyssey-custom .article-view .imageblock.fr {
  text-align: right;
}
body.theme-odyssey-custom .article-view .imageblock.alignRight img,
body.theme-odyssey-custom .article-view .imageblock.fr img {
  margin-left: auto;
  margin-right: 0;
}

/* 이미지 그리드 (티스토리 콜라주) */
body.theme-odyssey-custom .article-view .imagegridblock {
  margin: var(--space-7) 0;
}

/* 동영상 / iframe 임베드 */
body.theme-odyssey-custom .article-view .video,
body.theme-odyssey-custom .article-view .videoblock {
  margin: var(--space-7) 0;
}
body.theme-odyssey-custom .article-view iframe {
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 0;
}


/* ════════════════════════════════════════════════════════════════════
   33. article-footer (태그 / 함께 보면 좋은 글 / 이전·다음 글)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-footer {
  /* 추가.txt: 본문 카드 내부 여백 45px */
  padding: var(--space-article-pad);
  /* 상단 hairline — 함께 보면 좋은 글 박스의 자체 테두리와 중복되어 토큰값 none 처리 */
  border-top: var(--article-footer-border-top);
  display: flex;
  flex-direction: column;
  /* gap 사용 안 함 - 자식 margin-top 으로 추가.txt 정확값 적용 */
}

/* article-footer 자식 요소 기본 위 간격 36px (= --space-9) */
body.theme-odyssey-custom .article-footer > * + * {
  margin-top: var(--space-9);
}

/* 추가.txt: 관련글 위 간격 46px (override)
 * + 사용자 요청: 관련 글 영역 위 길다란 hairline
 *   ※ ::before 의사요소를 카드 외부 (margin-top 영역 가운데) 에 절대 위치로 띄움
 *     - 카드의 padding/border/background-radius 는 영향 없음
 *     - top: calc(-1 * margin-top / 2) 로 margin 가운데에 hairline 표시
 *   ※ position:relative — ::before 의 containing block 역할 */
body.theme-odyssey-custom .article-footer > .article-related {
  position: relative;
  margin-top: var(--space-article-related-top);
}
body.theme-odyssey-custom .article-footer > .article-related::before {
  content: '';
  position: absolute;
  top: calc(var(--space-article-related-top) / -2);
  left: 0;
  right: 0;
  border-top: var(--related-border-top);
}

/* footer 공통 제목 */
body.theme-odyssey-custom .article-foot-title {
  font-size: var(--text-article-foot-title-pc);
  font-weight: var(--weight-article-h3);
  color: var(--color-article-title);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4);
}

/* 본문 끝 태그 — 기준 정리 §34·§35 적용
 * ※ 시맨틱 변경: 배경 secondary → card #FFFFFF, 글씨 primary → muted #6B7280
 *   (이전 시안 매칭 → 기준 §35 라인 강조 톤으로 변경) */
body.theme-odyssey-custom .article-tag {
  /* 기준 §34: 전체 위아래 간격 32 0 */
  margin: var(--article-tag-y) 0;
}
body.theme-odyssey-custom .article-tag .tag-list {
  display: flex;
  flex-wrap: wrap;
  /* 기준 §34: 태그 간격 9px (이전 8 → 9) */
  gap: var(--article-tag-gap);
}
body.theme-odyssey-custom .article-tag .tag-list a {
  display: inline-flex;
  align-items: center;
  /* 기준 §35: 최소 높이 36px / radius 999px / padding 7 12 / 글씨 13px / 색 #6B7280 / 배경 #FFFFFF */
  min-height: var(--tag-btn-min-h);
  padding: var(--tag-btn-pad-y) var(--tag-btn-pad-x);
  background-color: var(--tag-btn-bg);
  color: var(--tag-btn-color);
  border: var(--tag-btn-border);
  border-radius: var(--tag-btn-radius);
  font-size: var(--tag-btn-font-size);
  font-weight: var(--tag-btn-font-weight);
  letter-spacing: var(--letter-spacing);
  transition:
    background-color var(--duration-fast) ease,
    color            var(--duration-fast) ease,
    transform        var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .article-tag .tag-list a:hover {
  background-color: var(--tag-btn-bg-hover);
  color: var(--tag-btn-color-hover);
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
}

/* ════════════════════════════════════════════════════════════════════
   함께 보면 좋은 글 (article-related) — 시안 매칭
   ─────────────────────────────────────────────────────────────────
   외곽: peach 카드 (rounded), 내부: 흰 카드 3개 (max), 썸네일 숨김
   ──────────────────────────────────────────────────────────────── */
/* 함께 보면 좋은 글 — 기준 정리 §36·§37·§38·§39 적용
 * ※ 시맨틱 변경: 외곽 박스(크림 배경 + 라인 + radius) 제거 → 구분선 + 흰 내부 카드만 (기준 §36)
 * ※ 위 구분선(::before) + 내부 위 32px / 아래 8px padding 으로 영역 분리 표현 */
body.theme-odyssey-custom .article-related {
  background-color: var(--related-card-bg);   /* transparent */
  border: var(--related-card-border);         /* 0 */
  border-radius: var(--related-card-radius);  /* 0 */
  /* 기준 §36: 내부 위 32 / 좌우 0 / 아래 8 */
  padding: var(--related-card-pad-top) var(--related-card-pad-x) var(--related-card-pad-bottom);
}
/* §37 관련글 제목 - article-foot-title 의 base override */
body.theme-odyssey-custom .article-related .article-foot-title {
  font-size: var(--related-title-size);              /* 24px - 기준 §37 */
  color: var(--related-title-color);                 /* #222 - 기준 §37 */
  margin: 0 0 var(--related-title-bottom);           /* 8px - 기준 §37 */
}
/* §38 관련글 설명 (선택, 작성자가 추가 가능) */
body.theme-odyssey-custom .article-related .article-related-desc {
  font-size: var(--related-desc-size);               /* 14.5px - 기준 §38 */
  color: var(--related-desc-color);                  /* #6B7280 - 기준 §38 */
  line-height: var(--related-desc-line);             /* 1.7 - 기준 §38 */
  letter-spacing: var(--letter-spacing);
  margin: 0 0 var(--related-desc-bottom);            /* 17px - 기준 §38 */
}
body.theme-odyssey-custom .article-related .related-list {
  display: grid;
  grid-template-columns: repeat(var(--related-grid-cols-pc), minmax(0, 1fr));
  /* 기준 §39: 카드 간격 12px */
  gap: var(--related-grid-gap);
  margin: 0;
  padding: 0;
}
/* 시안: 최대 3개만 노출 (s_rctps_rep 가 더 많이 출력해도 4번째부터 숨김) */
body.theme-odyssey-custom .article-related .related-item:nth-child(n+4) {
  display: none;
}
body.theme-odyssey-custom .article-related .related-item {
  list-style: none;
  margin: 0;
}
/* §39 관련글 카드 - 흰 + 라인 + radius 18 + min-h 104 + padding 17 40 17 17 + 그림자 */
body.theme-odyssey-custom .article-related .related-link {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--related-item-pad);                  /* 17 40 17 17 - 기준 §39 */
  background-color: var(--related-item-bg);
  border: var(--related-item-border);
  border-radius: var(--related-item-radius);          /* 18px - 기준 §39 */
  min-height: var(--related-item-min-h);              /* 104px - 기준 §39 */
  box-shadow: var(--related-item-shadow);             /* 0 6px 16px rgba(47,111,115,0.035) - 기준 §39 */
  height: 100%;
  transition:
    background-color var(--duration-fast) ease,
    transform        var(--duration-base) var(--ease-soft),
    box-shadow       var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .article-related .related-link:hover {
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
  box-shadow: var(--related-item-shadow-hover);
}
/* 시안: 썸네일 안 보임 — 토큰으로 토글 가능 (display: flex 로 바꾸면 다시 노출) */
body.theme-odyssey-custom .article-related .related-thumb {
  display: var(--related-thumb-display);
  flex: 0 0 auto;
  width: var(--thumb-md);
  height: var(--thumb-md);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-soft);
  background-image: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-secondary-soft) 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
body.theme-odyssey-custom .article-related .related-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
}
body.theme-odyssey-custom .article-related .related-title {
  font-size: var(--text-article-body-pc);
  font-weight: var(--weight-bold);
  color: var(--color-article-body);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.theme-odyssey-custom .article-related .related-date {
  font-size: var(--text-article-small-pc);
  color: var(--color-article-meta);
  letter-spacing: var(--letter-spacing);
}

/* 이전글 / 다음글 — 기준 정리 §40·§41 적용
 * ※ 시맨틱 변경: 카드 배경 secondary-soft → transparent, 테두리 teal → border-soft */
body.theme-odyssey-custom .article-page {
  /* 기준 §40: 위 간격 28px, 위 padding 24px, 위 구분선 */
  margin-top: var(--article-page-top);
  padding-top: var(--article-page-pad-top);
  border-top: var(--article-page-border-top);
}
body.theme-odyssey-custom .article-page-list {
  display: grid;
  /* 기준 §40: 2열, 간격 12px */
  grid-template-columns: repeat(var(--article-page-cols), minmax(0, 1fr));
  gap: var(--article-page-gap);
  margin: 0;
  padding: 0;
}
body.theme-odyssey-custom .article-page-item {
  list-style: none;
  margin: 0;
}
body.theme-odyssey-custom .article-page-item a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  /* 기준 §41: padding 17 18, radius 18, 배경 transparent, 테두리 1px #E8E2DA, 그림자 없음 */
  padding: var(--article-page-card-pad-y) var(--article-page-card-pad-x);
  background-color: var(--article-page-card-bg);
  border: var(--article-page-card-border);
  border-radius: var(--article-page-card-radius);
  box-shadow: var(--article-page-card-shadow);
  transition:
    background-color var(--duration-fast) ease,
    transform        var(--duration-base) var(--ease-soft),
    box-shadow       var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .article-page-item a:hover {
  background-color: var(--article-page-card-bg-hover);
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
  box-shadow: var(--shadow-xs);
}
body.theme-odyssey-custom .article-page-label {
  font-size: var(--text-article-small-pc);
  font-weight: var(--weight-bold);
  color: var(--color-article-link);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .article-page-prev .article-page-label::before {
  content: '← ';
}
body.theme-odyssey-custom .article-page-next {
  text-align: right;
}
body.theme-odyssey-custom .article-page-next .article-page-label::after {
  content: ' →';
}
body.theme-odyssey-custom .article-page-title {
  font-size: var(--text-article-body-pc);
  font-weight: var(--weight-bold);
  color: var(--color-article-body);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 빈 이전글/다음글 박스 처리 (s_article_prev/next 가 출력 안 될 때) */
body.theme-odyssey-custom .article-page-item:not(:has(a)) {
  visibility: hidden;
}

/* article-reply 베이스 (Stage 4 에서 정밀화) */
body.theme-odyssey-custom .article-reply {
  margin-top: var(--space-3);
}


/* ════════════════════════════════════════════════════════════════════
   34. Stage 3 모바일 보정 (~768px)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* article-card */
  body.theme-odyssey-custom .article-card {
    margin-bottom: var(--space-7);
  }

  /* article-header */
  body.theme-odyssey-custom .article-header {
    padding: var(--space-7) var(--space-6);
  }
  body.theme-odyssey-custom .article-title {
    font-size: var(--text-article-title-mobile);
  }
  body.theme-odyssey-custom .article-lead {
    font-size: var(--text-article-lead-mobile);
  }
  body.theme-odyssey-custom .article-meta {
    font-size: var(--text-article-meta-mobile);
    gap: var(--space-3);
  }

  /* article-view 본문 */
  body.theme-odyssey-custom .article-view {
    padding: var(--space-7) var(--space-6);
    font-size: var(--text-article-body-mobile);
  }
  body.theme-odyssey-custom .article-view p {
    font-size: var(--text-article-body-mobile);
  }
  body.theme-odyssey-custom .article-view li {
    font-size: var(--text-article-body-mobile);
  }
  body.theme-odyssey-custom .article-view h1 {
    font-size: var(--text-article-title-mobile);
    margin-top: var(--space-9);
  }
  body.theme-odyssey-custom .article-view h2 {
    font-size: var(--text-article-h2-mobile);
    margin: var(--space-9) 0 var(--space-4);
  }
  body.theme-odyssey-custom .article-view h3 {
    font-size: var(--text-article-h3-mobile);
    margin: var(--space-7) 0 var(--space-3);
  }
  body.theme-odyssey-custom .article-view h4 {
    font-size: var(--text-article-h4-mobile);
    margin: var(--space-6) 0 var(--space-3);
  }
  body.theme-odyssey-custom .article-view h5 {
    font-size: var(--text-article-h5-mobile);
  }
  body.theme-odyssey-custom .article-view h6 {
    font-size: var(--text-article-h6-mobile);
  }
  /* .post-lead 모바일 — PC 17px → 모바일 16px */
  body.theme-odyssey-custom .article-view p.post-lead {
    font-size: var(--text-post-lead-mobile);
  }
  body.theme-odyssey-custom .article-view ul,
  body.theme-odyssey-custom .article-view ol {
    padding-left: var(--space-5);
  }
  body.theme-odyssey-custom .article-view blockquote {
    padding: var(--space-4) var(--space-5);
    margin: var(--space-6) 0;
    font-size: var(--text-article-blockquote-mobile);
  }
  body.theme-odyssey-custom .article-view pre {
    padding: var(--space-4) var(--space-5);
    margin: var(--space-6) 0;
    font-size: var(--text-article-code-mobile);
  }
  body.theme-odyssey-custom .article-view small,
  body.theme-odyssey-custom .article-view figcaption,
  body.theme-odyssey-custom .article-view blockquote cite {
    font-size: var(--text-article-small-mobile);
  }
  body.theme-odyssey-custom .article-view table,
  body.theme-odyssey-custom .compare-table {
    /* 모바일: 표 폰트 14px (PC 15.5 → 14) */
    font-size: var(--text-base);
  }
  body.theme-odyssey-custom .article-view th,
  body.theme-odyssey-custom .article-view td,
  body.theme-odyssey-custom .compare-table th,
  body.theme-odyssey-custom .compare-table td {
    /* 모바일: 좁은 폭 가독성 위해 padding 축소 */
    padding: var(--space-3) var(--space-4);
  }

  /* article-footer */
  body.theme-odyssey-custom .article-footer {
    padding: var(--space-7) var(--space-6);
    gap: var(--space-7);
  }
  /* 시안: 모바일 함께 보면 좋은 글 1컬럼 (토큰 --related-grid-cols-mobile = 1) */
  body.theme-odyssey-custom .article-related .related-list {
    grid-template-columns: repeat(var(--related-grid-cols-mobile), minmax(0, 1fr));
  }
  body.theme-odyssey-custom .article-page-list {
    grid-template-columns: 1fr;
  }
  body.theme-odyssey-custom .article-page-item a {
    padding: var(--space-4) var(--space-5);
  }
}


/* ════════════════════════════════════════════════════════════════════
   ※ Stage 3 종료 - Stage 4 시작
   ════════════════════════════════════════════════════════════════════ */