@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════
   stage4.css - 본문 내 콘텐츠 박스 + 댓글 영역 + 모바일 마무리
   ────────────────────────────────────────────────────────────────────
   원본 style.css 의 STAGE 4 영역을 분리.
   포함 컴포넌트:
   - .box-affiliate     (제휴 안내 박스)
   - .box-summary       (핵심 요약)
   - .box-product       (상품 카드)
   - .article-reply     (댓글 영역 정밀화)
   - Stage 4 모바일 보정 (~768px)

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

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


/* ════════════════════════════════════════════════════════════════════
   STAGE 4 - 본문 내 콘텐츠 박스 + 댓글 영역 + 모바일 마무리
   ════════════════════════════════════════════════════════════════════
   사용법:
   본문 작성 시 티스토리 에디터의 [HTML 모드] 에서 다음과 같이 직접 삽입.

   ── 1) 제휴 안내 (주황 왼쪽 4px 바) ─────────────────────────
     <div class="box-affiliate">
       <p><strong>제휴 안내</strong>이 글은 쿠팡 파트너스 활동을 …</p>
     </div>

   ── 2) 핵심 요약 (세이지 카드 + 체크 마커) ──────────────────
     <div class="box-summary">
       <h3>핵심 요약</h3>
       <ul><li>…</li><li>…</li></ul>
     </div>

   ── 3) 장점 / 아쉬운 점 (양쪽 모두 청록 제목) ───────────────
     <div class="box-pros-cons">
       <div class="pros"><h4>장점</h4><ul><li>…</li></ul></div>
       <div class="cons"><h4>아쉬운 점</h4><ul><li>…</li></ul></div>
     </div>

   ── 4) 마무리 (옵션: 풀폭 주황 CTA 버튼) ────────────────────
     <div class="box-conclusion">
       <h3>마무리: …</h3>
       <p>…</p>
       <a class="conclusion-cta" href="…">상품 상세보기</a>
     </div>

   ── 6) 상품 추천 (썸네일 + 3분할 미니 스탯 + CTA) ──────────
     <div class="box-product">
       <p class="product-thumb">
         <img src="…" alt="…">
         <!-- 또는 텍스트 placeholder: -->
         <!-- <span class="product-thumb-label">상품 이미지</span> -->
       </p>
       <div class="product-body">
         <span class="product-cat">추천템</span>
         <h4 class="product-name">공간 절약형 미니 가전</h4>
         <p class="product-desc">…</p>
         <dl class="product-stats">
           <div class="stat">
             <dt class="stat-label">장점</dt>
             <dd class="stat-value">공간을 적게 차지하고 매일 쓰기 좋음</dd>
           </div>
           <div class="stat">
             <dt class="stat-label">아쉬운 점</dt>
             <dd class="stat-value">가족용으로는 용량이 작을 수 있음</dd>
           </div>
           <div class="stat">
             <dt class="stat-label">추천 대상</dt>
             <dd class="stat-value">원룸, 자취방, 기숙사 생활자</dd>
           </div>
         </dl>
         <a class="product-cta" href="…">가격 확인하기</a>
       </div>
     </div>
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   35. 본문 내 박스 - 공통 베이스
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .box-affiliate,
body.theme-odyssey-custom .article-view .box-summary,
body.theme-odyssey-custom .article-view .box-pros-cons,
body.theme-odyssey-custom .article-view .box-conclusion,
body.theme-odyssey-custom .article-view .box-product {
  margin: var(--space-7) 0;
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  letter-spacing: var(--letter-spacing);
}

/* 박스 안 첫/마지막 자식 마진 보정 */
body.theme-odyssey-custom .article-view .box-affiliate > *:first-child,
body.theme-odyssey-custom .article-view .box-summary > *:first-child,
body.theme-odyssey-custom .article-view .box-conclusion > *:first-child,
body.theme-odyssey-custom .article-view .box-product > *:first-child {
  margin-top: 0;
}
body.theme-odyssey-custom .article-view .box-affiliate > *:last-child,
body.theme-odyssey-custom .article-view .box-summary > *:last-child,
body.theme-odyssey-custom .article-view .box-conclusion > *:last-child,
body.theme-odyssey-custom .article-view .box-product > *:last-child {
  margin-bottom: 0;
}

/* 박스 안 헤딩에는 자동 구분선 적용 안 함 (article-view h2 무력화) */
body.theme-odyssey-custom .article-view [class^="box-"] h2,
body.theme-odyssey-custom .article-view [class^="box-"] h3,
body.theme-odyssey-custom .article-view [class^="box-"] h4 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}


/* ════════════════════════════════════════════════════════════════════
   36. .box-affiliate - 제휴 안내
   시안 02·05: 노티스 크림 배경 + 주황 왼쪽 4px 바
   ──────────────────────────────────────────────────────────────────
   ※ 추가.txt 의 "제휴 안내 박스 띠 사용 안 함" 항목과 시안이 충돌하는
     지점은 사용자 확인 결과 시안 우선으로 결정 (주황 왼쪽 4px 바 적용).
     ⇒ 변경이 필요하면 :root 의 --affiliate-rail-w 만 0 으로 두면 됨.
   ※ 사용자 요청: ⓘ 아이콘 의사요소 제거 — 단순 텍스트 박스로 표시
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .box-affiliate {
  background-color: var(--affiliate-bg);
  border: var(--affiliate-border);
  /* 왼쪽 바: 토큰만 끄면 사라지는 구조 (모바일은 @media 에서 rail-w-mobile 로 swap) */
  border-left-width: var(--affiliate-rail-w);
  border-left-style: solid;
  border-left-color: var(--affiliate-rail-color);
  border-radius: var(--affiliate-radius);
  /* 기준 정리 §1: PC 위 54px / 아래 30px / 여백 26px 30px / 본문 글씨 15.5px */
  margin-top: var(--space-affiliate-top-pc);
  margin-bottom: var(--space-article-affiliate-bottom);   /* PC 30px - 모바일은 @media 에서 swap */
  padding: var(--affiliate-pad-y) var(--affiliate-pad-x);
  font-size: var(--text-affiliate-pc);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
/* 제휴 안내 제목 (strong 으로 마크업된 첫 강조 텍스트) — 기준 §1 제목 글씨
 * PC 17px / 모바일 15px / weight 900 */
body.theme-odyssey-custom .article-view .box-affiliate strong {
  color: var(--color-article-title);
  font-size: var(--text-affiliate-title-pc);
  font-weight: var(--weight-black);
  margin-right: var(--space-2);
}


/* ════════════════════════════════════════════════════════════════════
   37. .box-summary - 핵심 요약 (체크 리스트) — 기준 정리 §11·§12·§13 적용
   시안 02·05·11: 세이지 메인 배경 (#DDE8E3) + 청록 제목 + 체크 마커 불릿
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .box-summary {
  background-color: var(--summary-bg);
  /* 기준 §11: 테두리 없음 (--summary-border: 0 - 이전 --border-teal 제거) */
  border: var(--summary-border);
  /* 기준 §11: border-radius 24px / padding 27px (공통 베이스 18px/24×28 override) */
  border-radius: var(--summary-radius);
  padding: var(--summary-pad);
  /* 기준 §11: 아래 간격 34px — 공통 margin (var(--space-7)=28) 보다 우선 */
  margin-bottom: var(--space-article-summary-bottom);
}
body.theme-odyssey-custom .article-view .box-summary > h3,
body.theme-odyssey-custom .article-view .box-summary > .box-title {
  font-size: var(--summary-title-size);
  font-weight: var(--weight-black);
  color: var(--summary-title-color);
  /* 기준 §12: 자간 -0.045em (--summary-title-letter, 이전 --letter-spacing -0.02em) */
  letter-spacing: var(--summary-title-letter);
  line-height: var(--leading-snug);
  /* 기준 §12: 제목 아래 간격 13px (이전 16) */
  margin: 0 0 var(--summary-title-bottom);
}
body.theme-odyssey-custom .article-view .box-summary ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
body.theme-odyssey-custom .article-view .box-summary ul li {
  position: relative;
  /* 기준 §13: 왼쪽 여백 21px (이전 28px) — 체크마커 자리 + 텍스트 시작점 */
  padding-left: var(--summary-li-pad-l);
  /* 기준 §13: 글씨 크기 16px (--summary-li-size, 이전 17px) */
  font-size: var(--summary-li-size);
  color: var(--color-article-body);
  /* 기준 §13: 줄간격 1.78 (--summary-li-line, 이전 1.7) */
  line-height: var(--summary-li-line);
  letter-spacing: var(--letter-spacing);
  margin: 0 0 var(--summary-li-gap);
}
body.theme-odyssey-custom .article-view .box-summary ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--check-mark-top);
  width: var(--check-mark-size);
  height: var(--check-mark-size);
  background-color: var(--summary-mark-bg);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--check-mark-icon) var(--check-mark-icon);
}
body.theme-odyssey-custom .article-view .box-summary ul li::marker {
  color: transparent;
}


/* ════════════════════════════════════════════════════════════════════
   38. .post-toc - 본문 바로가기 (시안: 살구색 카드 + 알약 wrap)
   ────────────────────────────────────────────────────────────────────
   시안 매칭:
   - 박스: 살구색 카드 (제휴 안내 톤 일관) + 라운드 22px
   - 제목: 청록 800 굵기
   - 설명문: 회색 14px (선택사항)
   - 알약 wrap: 옅은 세이지 알약 (사이드바 .toc-link 톤 재사용)
   - PC/모바일: flex-wrap 으로 자동 줄바꿈
   
   작성자 마크업 예시:
   <nav class="post-toc" aria-label="본문 바로가기">
     <h3 class="post-toc-title">본문 바로가기</h3>
     <p class="post-toc-desc">핵심 요약을 읽은 뒤, 궁금한 섹션으로 바로 이동...</p>
     <ul class="post-toc-list">
       <li><a class="post-toc-link" href="#item-1">고르는 기준</a></li>
       <li><a class="post-toc-link" href="#item-2">추천 비교표</a></li>
       ...
     </ul>
   </nav>
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .post-toc {
  margin: 0 0 var(--post-toc-bottom-pc);
  padding: var(--post-toc-pad-y) var(--post-toc-pad-x);
  background-color: var(--post-toc-bg);
  border: var(--post-toc-border);
  border-radius: var(--post-toc-radius);
  box-shadow: var(--post-toc-shadow);                /* 기준 §1 그림자 */
}

/* 제목 (h2/h3 어느 쪽이든 .post-toc-title 클래스 부여 시 동일 톤) */
body.theme-odyssey-custom .article-view .post-toc > .post-toc-title,
body.theme-odyssey-custom .article-view .post-toc > h2,
body.theme-odyssey-custom .article-view .post-toc > h3 {
  margin: 0 0 var(--post-toc-title-bottom);
  font-size: var(--post-toc-title-size);
  font-weight: var(--post-toc-title-weight);
  color: var(--post-toc-title-color);
  letter-spacing: var(--post-toc-title-letter);     /* 기준 §2 -0.045em */
}

/* 설명문 (선택 사항) */
body.theme-odyssey-custom .article-view .post-toc > .post-toc-desc {
  margin: 0 0 var(--post-toc-desc-bottom);
  font-size: var(--post-toc-desc-size);
  font-weight: var(--weight-normal);
  color: var(--post-toc-desc-color);
  line-height: var(--post-toc-desc-line);            /* 기준 §3 PC 1.68 / 모바일 @media 에서 1.66 swap */
  letter-spacing: var(--letter-spacing);
}

/* 알약 wrap — grid 4열 (모바일 @media 에서 2열로 swap)
 * ※ 기존 flex-wrap → grid 변경: 기준 §4 "PC 열 개수 4열" 정확 매핑 */
body.theme-odyssey-custom .article-view .post-toc > .post-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--post-toc-list-cols-pc), 1fr);
  gap: var(--post-toc-list-gap);
}
body.theme-odyssey-custom .article-view .post-toc > .post-toc-list > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.theme-odyssey-custom .article-view .post-toc > .post-toc-list > li::marker {
  content: '';
}

/* 알약 자체 (anchor 링크) — 기준 §4·§5 적용
 * grid 셀을 100% 채워서 항상 동일 폭으로 정렬 (좌우 가운데 정렬) */
body.theme-odyssey-custom .article-view .post-toc .post-toc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;                            /* grid 셀 내 가로 가운데 */
  width: 100%;                                        /* grid 셀 채우기 */
  min-height: var(--post-toc-link-min-h);             /* 기준 §4 PC 48px */
  padding: var(--post-toc-link-pad-y) var(--post-toc-link-pad-x);
  background-color: var(--post-toc-link-bg);
  color: var(--post-toc-link-color);
  border: var(--post-toc-link-border);
  border-radius: var(--post-toc-link-radius);
  font-size: var(--post-toc-link-font-size);
  font-weight: var(--post-toc-link-font-weight);
  letter-spacing: var(--letter-spacing);
  text-decoration: none;
  transition:
    background-color var(--post-toc-link-transition) ease,
    transform        var(--post-toc-link-transition) var(--ease-soft),
    box-shadow       var(--post-toc-link-transition) var(--ease-soft);
}
body.theme-odyssey-custom .article-view .post-toc .post-toc-link:hover {
  background-color: var(--post-toc-link-bg-hover);
  transform: translateY(var(--post-toc-link-hover-shift));   /* 기준 §5: -1px */
  box-shadow: var(--post-toc-link-hover-shadow);             /* 기준 §5 호버 그림자 */
  text-decoration: none;
}
body.theme-odyssey-custom .article-view .post-toc .post-toc-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
/* 모바일 active(tap) 상태 — 기준 §5 모바일 상태값 */
body.theme-odyssey-custom .article-view .post-toc .post-toc-link:active {
  background-color: var(--post-toc-link-bg-active);
}

/* 모바일 — 기준 §11 박스 / §2 제목 / §3 설명 / §4 버튼 (2열) / §5 active */
@media (max-width: 768px) {
  body.theme-odyssey-custom .article-view .post-toc {
    margin-bottom: var(--post-toc-bottom-mobile);
    padding: var(--post-toc-pad-y-mobile) var(--post-toc-pad-x-mobile);
    border-radius: var(--post-toc-radius-mobile);
  }
  body.theme-odyssey-custom .article-view .post-toc > .post-toc-title,
  body.theme-odyssey-custom .article-view .post-toc > h2,
  body.theme-odyssey-custom .article-view .post-toc > h3 {
    margin-bottom: var(--post-toc-title-bottom-mobile);
    font-size: var(--post-toc-title-size-mobile);
    line-height: var(--post-toc-title-line-mobile);
  }
  body.theme-odyssey-custom .article-view .post-toc > .post-toc-desc {
    margin-bottom: var(--post-toc-desc-bottom-mobile);
    font-size: var(--post-toc-desc-size-mobile);
    line-height: var(--post-toc-desc-line-mobile);
  }
  body.theme-odyssey-custom .article-view .post-toc > .post-toc-list {
    grid-template-columns: repeat(var(--post-toc-list-cols-mobile), 1fr);
    gap: var(--post-toc-list-gap-mobile);
  }
  body.theme-odyssey-custom .article-view .post-toc .post-toc-link {
    min-height: var(--post-toc-link-min-h-mobile);
    padding: var(--post-toc-link-pad-y-mobile) var(--post-toc-link-pad-x-mobile);
    border-radius: var(--post-toc-link-radius-mobile);
  }
}


/* ════════════════════════════════════════════════════════════════════
   38-A. .box-ad - 광고 박스 (애드센스/제휴 광고 자리) — 기준 정리 §21
   ────────────────────────────────────────────────────────────────────
   시안: 본문 흐름 안의 광고 자리 — 옅은 흰 배경 + 점선 테두리로 광고 영역임을 명확히 표시
   작성자 마크업 예시:
   <div class="box-ad">
     <!-- 애드센스 광고 코드 또는 제휴 배너 -->
   </div>
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .box-ad {
  background-color: var(--ad-bg);
  border: var(--ad-border);
  border-radius: var(--ad-radius);
  padding: var(--ad-pad);
  margin: var(--space-article-ad-y) 0;
  font-size: var(--ad-font-size);
  color: var(--ad-color);
  letter-spacing: var(--letter-spacing);
}
/* 본문 인라인 광고 (인-아티클·인-피드) — CLS 방지 [중요].txt #7
 * 사용: <div class="box-ad box-ad--inline"> ... </div>
 * 단계 5 본문 작성 시 활용. 큰 광고는 .box-ad (기본 26px 패딩) 만 사용. */
body.theme-odyssey-custom .article-view .box-ad--inline {
  min-height: var(--ad-slot-min-h-inline);         /* 90px */
}


/* ════════════════════════════════════════════════════════════════════
   38-C. .revenue-slot — 티스토리 자동 광고 슬롯 (CLS 방지) — [중요].txt #7
   ────────────────────────────────────────────────────────────────────
   본문 위 [##_revenue_list_upper_##] / 본문 아래 [##_revenue_list_lower_##]
   티스토리가 자동 삽입하는 광고 영역을 감싸는 wrapper.

   목적: 광고 도착 전 min-height 로 공간을 미리 예약해
        Cumulative Layout Shift (CLS) 방지 → Google Core Web Vitals 개선.

   디자인 톤: .box-ad 와 동일 패밀리 (옅은 배경 + 점선 테두리 placeholder)
            광고가 도착하면 광고가 영역을 채우고, 비어있을 때는 점선만 보임.

   적용 마크업:
     <div class="revenue-slot revenue-slot--upper"> [##_revenue_list_upper_##] </div>
     <div class="revenue-slot revenue-slot--lower"> [##_revenue_list_lower_##] </div>
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .revenue-slot {
  display: block;
  min-height: var(--ad-slot-min-h);                /* 280px — CLS 방지 [중요].txt #7 */
  margin: var(--space-article-ad-y) 0;
  padding: var(--ad-pad);
  background-color: var(--ad-bg);
  border: var(--ad-border);                        /* 1px dashed placeholder-border-color */
  border-radius: var(--ad-radius);
  font-size: var(--ad-font-size);
  color: var(--ad-color);
  letter-spacing: var(--letter-spacing);
}
/* 모바일: 광고 슬롯 축소 (CLS 방지 유지) */
@media (max-width: 768px) {
  body.theme-odyssey-custom .revenue-slot {
    min-height: var(--ad-slot-min-h-mobile);       /* 250px — [중요].txt #7 */
    padding: var(--ad-pad-mobile);
    font-size: var(--ad-font-size-mobile);
  }
}


/* ════════════════════════════════════════════════════════════════════
   38-B. .comments-placeholder - 댓글 영역 자리 (빈 상태) — 기준 정리 §42
   ────────────────────────────────────────────────────────────────────
   시안: 본문 끝 댓글 영역이 비어있을 때 표시되는 안내 박스
        (광고 박스와 동일한 dashed 톤 — placeholder 패밀리)
   작성자 마크업 예시:
   <div class="comments-placeholder">
     아직 댓글이 없습니다.
   </div>
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .comments-placeholder {
  margin-top: var(--comments-top);
  padding: var(--comments-pad);
  background-color: var(--comments-bg);
  border: var(--comments-border);
  border-radius: var(--comments-radius);
  font-size: var(--comments-font-size);
  color: var(--comments-color);
  letter-spacing: var(--letter-spacing);
  text-align: center;
}


/* ════════════════════════════════════════════════════════════════════
   39. .box-pros-cons - 장점 / 아쉬운 점 (2열 그리드) — 기준 정리 §30·§31
   시안:
   - 양쪽 모두 흰 카드 + 1px solid #E8E2DA + radius 22 + padding 22 + 그림자 (기준 §30)
   - 청록 제목 / 청록 마커
   - 리스트 글씨 15.5px / 줄간격 1.76 / 왼쪽 여백 20 (기준 §31)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .box-pros-cons {
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 기준 정리 §30: 카드 간격 15px */
  gap: var(--proscons-gap);
  border-radius: 0;
}
body.theme-odyssey-custom .article-view .box-pros-cons > .pros,
body.theme-odyssey-custom .article-view .box-pros-cons > .cons {
  /* 기준 정리 §30: 양쪽 다 흰 카드 + radius 22 + padding 22 + 그림자 */
  padding: var(--proscons-pad);
  border-radius: var(--proscons-radius);
  box-shadow: var(--proscons-shadow);
}
body.theme-odyssey-custom .article-view .box-pros-cons > .pros {
  background-color: var(--pros-bg);
  border: var(--pros-border);
}
body.theme-odyssey-custom .article-view .box-pros-cons > .cons {
  background-color: var(--cons-bg);
  border: var(--cons-border);
}

body.theme-odyssey-custom .article-view .box-pros-cons h3,
body.theme-odyssey-custom .article-view .box-pros-cons h4,
body.theme-odyssey-custom .article-view .box-pros-cons .box-title {
  font-size: var(--proscons-title-size);
  font-weight: var(--weight-black);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
}
body.theme-odyssey-custom .article-view .box-pros-cons .pros h3,
body.theme-odyssey-custom .article-view .box-pros-cons .pros h4,
body.theme-odyssey-custom .article-view .box-pros-cons .pros .box-title {
  color: var(--pros-title-color);
}
body.theme-odyssey-custom .article-view .box-pros-cons .cons h3,
body.theme-odyssey-custom .article-view .box-pros-cons .cons h4,
body.theme-odyssey-custom .article-view .box-pros-cons .cons .box-title {
  color: var(--cons-title-color);
}

body.theme-odyssey-custom .article-view .box-pros-cons ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
body.theme-odyssey-custom .article-view .box-pros-cons li {
  position: relative;
  /* 기준 정리 §31: 왼쪽 여백 20px, 글씨 15.5px, 줄간격 1.76 */
  padding-left: var(--proscons-list-pad-l);
  margin: 0 0 var(--space-2);
  font-size: var(--proscons-list-size);
  color: var(--color-article-body);
  line-height: var(--proscons-list-line);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .article-view .box-pros-cons li::marker {
  content: '';
}
body.theme-odyssey-custom .article-view .box-pros-cons .pros li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-4);
  font-weight: var(--weight-black);
  color: var(--pros-marker-color);
  font-size: var(--text-lg);
  line-height: var(--proscons-list-line);
}
body.theme-odyssey-custom .article-view .box-pros-cons .cons li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-4);
  font-weight: var(--weight-black);
  color: var(--cons-marker-color);
  font-size: var(--text-lg);
  line-height: var(--proscons-list-line);
}


/* ════════════════════════════════════════════════════════════════════
   40. .box-conclusion - 마무리 강조 박스 (+ 옵션 풀폭 CTA 버튼)
   시안 03·08:
   - 세이지(#DDE8E3) 카드 + 청록 제목
   - 본문 끝에 옵션으로 "상품 상세보기" 같은 풀폭 주황 CTA 삽입 가능
   - CTA 가 없는 경우 단순 마무리 카드로 작동 (이전 호환)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .box-conclusion {
  background-color: var(--conclusion-bg);
  border: var(--conclusion-border);
  /* 기준 정리 §32: radius 26 / padding 27 / 위아래 42 0 32 */
  border-radius: var(--conclusion-radius);
  padding: var(--conclusion-pad);
  margin: var(--conclusion-top) 0 var(--conclusion-bottom);
}
body.theme-odyssey-custom .article-view .box-conclusion > h3,
body.theme-odyssey-custom .article-view .box-conclusion > .box-title {
  /* 기준 정리 §33: 25px / #2F6F73 / 아래 11px */
  font-size: var(--conclusion-title-size);
  font-weight: var(--weight-black);
  color: var(--conclusion-title-color);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--leading-snug);
  margin: 0 0 var(--conclusion-title-bottom);
}
body.theme-odyssey-custom .article-view .box-conclusion p {
  font-size: var(--text-article-body-pc);
  color: var(--conclusion-text-color);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-loose);
}

/* 풀폭 CTA 버튼 (옵션) - 마무리 박스 내부 마지막에 배치 — 기준 §29 cta-* 토큰 그룹 사용
   hover/active/focus 모두 글씨색 #222222 유지 */
body.theme-odyssey-custom .article-view .box-conclusion .conclusion-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--conclusion-cta-h);
  margin-top: var(--conclusion-cta-gap);
  padding: 0 var(--space-6);
  background-color: var(--conclusion-cta-bg);
  color: var(--conclusion-cta-text);
  border: var(--conclusion-cta-border);
  border-radius: var(--conclusion-cta-radius);
  font-size: var(--text-lg);
  font-weight: var(--cta-font-weight);
  letter-spacing: var(--letter-spacing);
  text-decoration: none;
  box-shadow: var(--cta-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-view .box-conclusion .conclusion-cta:hover {
  background-color: var(--conclusion-cta-bg-hover);
  color: var(--conclusion-cta-text);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
}
body.theme-odyssey-custom .article-view .box-conclusion .conclusion-cta:active {
  background-color: var(--conclusion-cta-bg-active);
  color: var(--conclusion-cta-text);
}
body.theme-odyssey-custom .article-view .box-conclusion .conclusion-cta:focus-visible {
  background-color: var(--conclusion-cta-bg);
  color: var(--conclusion-cta-text);
  outline: var(--focus-ring-w) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}


/* ════════════════════════════════════════════════════════════════════
   41. .box-product - 상품 추천 (썸네일 + 정보 + 미니 스탯 + CTA)
   시안 04·10:
   - 흰 카드 + 좌측 정사각 썸네일 + 우측 컬럼
   - 우측 구조: 배지 → 제품명 → 설명 → 미니 스탯(3분할) → CTA 버튼
   - 미니 스탯: 장점 / 아쉬운 점 / 추천 대상 (peach-cream 배경)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .box-product {
  background-color: var(--product-bg);
  border: var(--product-border);
  /* 기준 §24: radius 26 / padding 26 / 그림자 / 위아래 26
   * ※ 공통 베이스 (.box-product 가 .box-affiliate 등과 공유하는 padding) 위에서 override */
  border-radius: var(--product-radius);
  padding: var(--product-pad);
  box-shadow: var(--product-shadow);
  margin: var(--space-article-product-y) 0;
  display: grid;
  grid-template-columns: var(--product-thumb-w) 1fr;
  gap: var(--product-gap);
  align-items: center;
}
/* 상품 이미지 (썸네일) — 기준 §25
 * ※ aspect-ratio 1/1 (PC 기준 160×160) → 명시적 height 142px 로 변경 (기준 §25) */
body.theme-odyssey-custom .article-view .box-product .product-thumb {
  width: 100%;
  height: var(--product-thumb-h);
  margin: 0;
  background-color: var(--product-thumb-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: var(--product-thumb-border);
  border-radius: var(--product-thumb-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.theme-odyssey-custom .article-view .box-product .product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;     /* 부모 박스가 이미 radius + overflow:hidden 처리 */
  margin: 0;
}
/* 썸네일 자리에 텍스트만 들어간 placeholder ("상품 이미지" 같은 안내) */
body.theme-odyssey-custom .article-view .box-product .product-thumb .product-thumb-label {
  font-size: var(--text-base);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .article-view .box-product .product-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
/* 상품 라벨 (.product-cat / .product-label) — 기준 §26 */
body.theme-odyssey-custom .article-view .box-product .product-cat,
body.theme-odyssey-custom .article-view .box-product .product-label {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  background-color: var(--product-label-bg);
  color: var(--product-label-color);
  border-radius: var(--product-label-radius);
  padding: var(--product-label-pad-y) var(--product-label-pad-x);
  font-size: var(--product-label-size);
  font-weight: var(--badge-weight);
  letter-spacing: var(--letter-spacing);
  margin: 0 0 var(--product-label-bottom);
}
/* 상품 제목 — 기준 §27 */
body.theme-odyssey-custom .article-view .box-product .product-name {
  font-size: var(--product-name-size);
  font-weight: var(--weight-black);
  color: var(--product-name-color);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  margin: 0 0 var(--product-name-bottom);
}
/* 상품 설명 — 기준 §27 */
body.theme-odyssey-custom .article-view .box-product .product-desc {
  font-size: var(--product-desc-size);
  color: var(--product-desc-color);
  line-height: var(--product-desc-line);
  letter-spacing: var(--letter-spacing);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   product-stats - 3분할 미니 스탯 (장점 / 아쉬운 점 / 추천 대상)
   시안 04·10: peach-cream 톤 배경 + 라벨(굵게) + 짧은 설명(회색)
   기본 마크업: <dl> / <div class="stat"> 둘 다 지원
   ───────────────────────────────────────────────────────────── */
body.theme-odyssey-custom .article-view .box-product .product-stats {
  display: grid;
  grid-template-columns: repeat(var(--product-stats-cols), minmax(0, 1fr));
  gap: var(--product-stats-gap);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
body.theme-odyssey-custom .article-view .box-product .product-stats .stat,
body.theme-odyssey-custom .article-view .box-product .product-stats > div {
  display: flex;
  flex-direction: column;
  gap: var(--product-stat-gap);
  /* 기준 §28: padding 11px / radius 15px / 줄간격 1.55 */
  padding: var(--product-stat-pad);
  background-color: var(--product-stat-bg);
  border: var(--product-stat-border);
  border-radius: var(--product-stat-radius);
  font-size: var(--product-stat-font-size);
  line-height: var(--product-stat-line);
}
body.theme-odyssey-custom .article-view .box-product .product-stats .stat-label,
body.theme-odyssey-custom .article-view .box-product .product-stats dt {
  font-size: var(--product-stat-label-size);
  font-weight: var(--product-stat-label-weight);
  color: var(--product-stat-label-color);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  margin: 0;
}
body.theme-odyssey-custom .article-view .box-product .product-stats .stat-value,
body.theme-odyssey-custom .article-view .box-product .product-stats dd {
  font-size: var(--product-stat-value-size);
  color: var(--product-stat-value-color);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  margin: 0;
}

/* CTA 버튼 (가격 확인하기 등) — 기준 정리 §29
 * ※ 상품 카드 안 padding: 14px 23px (--cta-pad-y/x), 최소 높이 50px (--cta-min-h)
 * ※ 마무리 CTA(.conclusion-cta) 와 동일한 --cta-* 토큰 그룹 공유 */
body.theme-odyssey-custom .article-view .box-product .product-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-height: var(--product-cta-h);                    /* 50px - 기준 §29 */
  padding: var(--cta-pad-y) var(--cta-pad-x);          /* 14 23 - 기준 §29 */
  margin-top: var(--space-2);
  background-color: var(--cta-bg);
  color: var(--cta-color);
  border-radius: var(--cta-radius);                    /* 17px - 기준 §29 */
  border: var(--cta-border);                           /* 1px solid rgba(244,162,97,0.32) - 기준 §29 */
  font-size: var(--cta-font-size);                     /* 14px - 기준 §29 */
  font-weight: var(--cta-font-weight);                 /* 900 - 기준 §29 */
  letter-spacing: var(--letter-spacing);
  text-decoration: none;
  box-shadow: var(--cta-shadow);                       /* 기준 §29 그림자 */
  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-view .box-product .product-cta:hover {
  background-color: var(--cta-bg-hover);
  color: var(--cta-color);   /* hover 글씨색 #222 유지 */
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
}
body.theme-odyssey-custom .article-view .box-product .product-cta:active {
  background-color: var(--cta-bg-active);
  color: var(--cta-color);   /* active 글씨색 #222 유지 */
}
body.theme-odyssey-custom .article-view .box-product .product-cta:focus-visible {
  background-color: var(--cta-bg);
  color: var(--cta-color);
  outline: var(--focus-ring-w) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}


/* ════════════════════════════════════════════════════════════════════
   41-Z. AI 모듈형 콘텐츠 컴포넌트 — [중요].txt #30 (+#35 +#41)
   ────────────────────────────────────────────────────────────────────
   단계 5 본문 작성 시 AI 가 사용할 모듈형 시각 컴포넌트.
   의류 블로그 방문자 욕망 5종에 직접 답하는 본문 모듈.

   ┌──────────────────────────────────────────────────────────────┐
   │  AI 사용 가이드 — 본문 작성 시 욕망별 모듈 매핑               │
   ├──────────────────────────────────────────────────────────────┤
   │  A. 비교 욕망  → .box-compare    (가격대별 비교 표)          │
   │  B. 확인 욕망  → .box-pros-cons  (장단점 — 기존 §30·§31)     │
   │  C. 선택 욕망  → .box-recommend  (이런 분께 추천)            │
   │  D. 검증 욕망  → .box-review     (실착 리뷰 카드)            │
   │  E. 행동 욕망  → .box-cta        (구매 CTA)                  │
   │                  .box-product    (상품 카드 — 기존 §24·§25)  │
   │                  .box-affiliate  (제휴 — 기존)               │
   │  F. FAQ        → .box-faq        (<details> 활용 — #35)      │
   │  G. 인라인     → .highlight (<mark>) — #41 핵심 강조         │
   │                  .term      (<dfn>)  — #41 용어 정의         │
   │                  .price-tag        — 가격 알약               │
   └──────────────────────────────────────────────────────────────┘
   ════════════════════════════════════════════════════════════════════ */

/* ─── 41-Z-A. .box-compare — 가격대별 비교 표 (욕망 A) ─── #30
 * 마크업:
 *   <table class="box-compare">
 *     <thead><tr><th>쿠팡 (가성비)</th><th>무신사 (브랜드)</th></tr></thead>
 *     <tbody><tr><td>오버핏 셔츠 29,900원</td><td>인사일런스 79,000원</td></tr></tbody>
 *   </table> */
body.theme-odyssey-custom .article-view .box-compare {
  width: 100%;
  margin: var(--module-margin-y-pc) 0;
  background-color: var(--color-card);
  border: var(--border-soft);
  border-radius: var(--module-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--module-body-size-pc);
  color: var(--color-text);
}
body.theme-odyssey-custom .article-view .box-compare th,
body.theme-odyssey-custom .article-view .box-compare td {
  padding: var(--module-pad-pc);
  text-align: left;
  border-top: var(--border-soft);
}
body.theme-odyssey-custom .article-view .box-compare thead th {
  background-color: var(--color-secondary-soft);
  color: var(--color-primary);
  font-weight: var(--module-title-weight);
  font-size: var(--module-title-size-pc);
  border-top: none;
}
body.theme-odyssey-custom .article-view .box-compare th + th,
body.theme-odyssey-custom .article-view .box-compare td + td {
  border-left: var(--border-soft);
}

/* ─── 41-Z-B. .box-recommend — 이런 분께 추천 (욕망 C) ─── #30
 * 마크업:
 *   <div class="box-recommend">
 *     <h3>이런 분께 추천</h3>
 *     <ul>
 *       <li>출근복으로 캐주얼함을 더하고 싶은 분</li>
 *       <li>...</li>
 *     </ul>
 *   </div> */
body.theme-odyssey-custom .article-view .box-recommend {
  margin: var(--module-margin-y-pc) 0;
  padding: var(--module-pad-pc);
  background-color: var(--color-secondary-soft);
  border: 1px solid var(--color-secondary-border);
  border-radius: var(--module-radius);
  font-size: var(--module-body-size-pc);
  color: var(--color-text);
}
body.theme-odyssey-custom .article-view .box-recommend > h3,
body.theme-odyssey-custom .article-view .box-recommend > .box-title {
  margin: 0 0 var(--module-gap-inner);
  font-size: var(--module-title-size-pc);
  font-weight: var(--module-title-weight);
  color: var(--color-primary);
}
body.theme-odyssey-custom .article-view .box-recommend ul,
body.theme-odyssey-custom .article-view .box-recommend ol {
  margin: 0;
  padding-left: var(--space-5);
}
body.theme-odyssey-custom .article-view .box-recommend li {
  padding: var(--space-1) 0;
}

/* ─── 41-Z-C. .box-review — 실착 리뷰 카드 (욕망 D) ─── #30
 * 마크업:
 *   <div class="box-review">
 *     <div class="box-review__header">
 *       <strong class="box-review__author">정윤</strong>
 *       <span class="box-review__rating">★★★★☆</span>
 *     </div>
 *     <div class="box-review__body"><p>실제 입어보니 ...</p></div>
 *   </div> */
body.theme-odyssey-custom .article-view .box-review {
  margin: var(--module-margin-y-pc) 0;
  padding: var(--module-pad-pc);
  background-color: var(--color-card);
  border: var(--border-soft);
  border-radius: var(--module-radius);
  box-shadow: var(--shadow-xs);
}
body.theme-odyssey-custom .article-view .box-review > .box-review__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--module-gap-inner);
  padding-bottom: var(--module-gap-inner);
  border-bottom: var(--border-soft);
}
body.theme-odyssey-custom .article-view .box-review > .box-review__header > .box-review__author {
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
}
body.theme-odyssey-custom .article-view .box-review > .box-review__header > .box-review__rating {
  color: var(--color-accent);
  font-size: var(--module-title-size-pc);
}
body.theme-odyssey-custom .article-view .box-review > .box-review__body {
  font-size: var(--module-body-size-pc);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* ─── 41-Z-D. .box-cta — 구매 CTA (욕망 E) ─── #30
 * 마크업:
 *   <div class="box-cta">
 *     <p class="box-cta__text">쿠팡에서 최저가 확인</p>
 *     <a class="box-cta__btn" href="..." rel="sponsored">최저가 보기</a>
 *   </div> */
body.theme-odyssey-custom .article-view .box-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--module-gap-inner);
  margin: var(--module-margin-y-pc) 0;
  padding: var(--module-pad-pc);
  background-color: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--module-radius);
  text-align: center;
}
body.theme-odyssey-custom .article-view .box-cta > .box-cta__text {
  margin: 0;
  font-size: var(--module-title-size-pc);
  font-weight: var(--module-title-weight);
  color: var(--color-text-strong);
}
body.theme-odyssey-custom .article-view .box-cta > .box-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-comfort);
  padding: 0 var(--space-7);
  background-color: var(--color-accent);
  color: var(--color-card);
  border-radius: var(--btn-radius);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing);
  transition: background-color var(--duration-fast) ease;
}
body.theme-odyssey-custom .article-view .box-cta > .box-cta__btn:hover {
  background-color: var(--color-accent-hover);
}

/* ─── 41-Z-E. .box-faq — FAQ details/summary (욕망 F) ─── #30 + #35
 * 마크업:
 *   <details class="box-faq">
 *     <summary>사이즈는 어떻게 골라야 하나요?</summary>
 *     <div class="box-faq__a"><p>...</p></div>
 *   </details>
 * 동작: 접힌 + 상태에서 클릭 시 답변 펼침 (브라우저 기본). 마커는 자체 +/− 사용. */
body.theme-odyssey-custom .article-view .box-faq {
  margin: var(--module-margin-y-pc) 0;
  padding: 0;
  background-color: var(--color-card);
  border: var(--border-soft);
  border-radius: var(--module-radius);
  overflow: hidden;
}
body.theme-odyssey-custom .article-view .box-faq > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--module-pad-pc);
  padding-right: calc(var(--module-pad-pc) + var(--space-6));
  font-size: var(--module-title-size-pc);
  font-weight: var(--module-title-weight);
  color: var(--color-text-strong);
  position: relative;
}
body.theme-odyssey-custom .article-view .box-faq > summary::-webkit-details-marker {
  display: none;
}
body.theme-odyssey-custom .article-view .box-faq > summary::after {
  content: '+';
  position: absolute;
  right: var(--module-pad-pc);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-size: var(--module-title-size-pc);
}
body.theme-odyssey-custom .article-view .box-faq[open] > summary::after {
  content: '−';
}
body.theme-odyssey-custom .article-view .box-faq > .box-faq__a {
  padding: 0 var(--module-pad-pc) var(--module-pad-pc);
  font-size: var(--module-body-size-pc);
  color: var(--color-text);
  border-top: var(--border-soft);
}

/* ─── 41-Z-F. .highlight — 핵심 단어 인라인 강조 (<mark>) ─── #41
 * 마크업: <mark class="highlight">출근복</mark>
 *        또는 <span class="highlight">키워드</span> */
body.theme-odyssey-custom .article-view .highlight,
body.theme-odyssey-custom .article-view mark.highlight {
  display: inline-block;
  padding: var(--inline-pad-y) var(--inline-pad-x);
  background-color: var(--color-accent-soft);
  color: var(--color-text-strong);
  border-radius: var(--inline-radius);
  font-weight: var(--weight-bold);
}

/* ─── 41-Z-G. .term — 용어 정의 인라인 (<dfn> + abbr 호환) ─── #41
 * 마크업: <dfn class="term" title="과거에 입던 의복 스타일">레트로 룩</dfn>
 *        또는 <abbr class="term" title="Customer Acquisition Cost">CAC</abbr> */
body.theme-odyssey-custom .article-view .term,
body.theme-odyssey-custom .article-view dfn.term,
body.theme-odyssey-custom .article-view abbr.term {
  border-bottom: var(--inline-term-border-style);
  font-style: normal;
  cursor: help;
  text-decoration: none;
}

/* ─── 41-Z-H. .price-tag — 가격 인라인 알약 ─── #30
 * 마크업: <span class="price-tag">29,900원</span> */
body.theme-odyssey-custom .article-view .price-tag {
  display: inline-block;
  padding: var(--inline-pad-y) var(--inline-pad-x);
  background-color: var(--color-secondary-soft);
  color: var(--color-primary);
  border-radius: var(--inline-radius);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
   41-Z-CV. content-visibility 자동 적용 — [중요].txt #29
   ────────────────────────────────────────────────────────────────────
   본문 박스 컴포넌트는 화면 밖에 있을 가능성이 크고 자체가 무거워서
   content-visibility: auto 의 효과가 큼. 마크업 변경 없이 자동 활성화.

   추가로 .cv-auto-{md,lg} 유틸 클래스를 제공 → 단계 5 본문 작성 시
   임의 영역에 자유 적용 가능 (예: <section class="cv-auto-md">…</section>).

   미지원 브라우저(예: 구형)는 두 속성을 무시하므로 안전.
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .box-compare,
body.theme-odyssey-custom .article-view .box-recommend,
body.theme-odyssey-custom .article-view .box-review,
body.theme-odyssey-custom .article-view .box-cta,
body.theme-odyssey-custom .article-view .box-faq,
body.theme-odyssey-custom .article-view .box-pros-cons,
body.theme-odyssey-custom .article-view .box-conclusion,
body.theme-odyssey-custom .article-view .box-affiliate,
body.theme-odyssey-custom .article-view .box-ad,
body.theme-odyssey-custom .revenue-slot {
  content-visibility: auto;
  contain-intrinsic-size: 0 var(--cv-intrinsic-h-md);    /* 300px */
}
/* 큰 박스 (썸네일·이미지 포함) — 별도 lg 사이즈 */
body.theme-odyssey-custom .article-view .box-product {
  content-visibility: auto;
  contain-intrinsic-size: 0 var(--cv-intrinsic-h-lg);    /* 600px */
}

/* 유틸 클래스 — 본문 작성 시 임의 영역에 자유 적용
 * 마크업: <section class="cv-auto-md"> ... </section> */
body.theme-odyssey-custom .article-view .cv-auto-sm {
  content-visibility: auto;
  contain-intrinsic-size: 0 var(--cv-intrinsic-h-sm);    /* 100px */
}
body.theme-odyssey-custom .article-view .cv-auto-md {
  content-visibility: auto;
  contain-intrinsic-size: 0 var(--cv-intrinsic-h-md);    /* 300px */
}
body.theme-odyssey-custom .article-view .cv-auto-lg {
  content-visibility: auto;
  contain-intrinsic-size: 0 var(--cv-intrinsic-h-lg);    /* 600px */
}

/* ════════════════════════════════════════════════════════════════════
   41-Z-PB. Reading Progress Bar — [중요].txt #19
   ────────────────────────────────────────────────────────────────────
   본문 페이지 상단의 가느다란 진행률 막대.
   기본 비표시 → body.is-article-page 에서만 표시.
   진행률은 JS 가 --progress 커스텀 속성 (0~1) 으로 주입,
   transform: scaleX(--progress) 로 부드럽게 표현.
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .reading-progress {
  display: none;   /* 기본 비표시 — 본문 페이지에서만 활성화 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--progress-bar-h);
  background-color: var(--progress-bar-bg);
  z-index: var(--progress-bar-z);
  pointer-events: none;
  overflow: hidden;
}
body.theme-odyssey-custom .reading-progress::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--progress-bar-color);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform var(--duration-fast) linear;
}
body.theme-odyssey-custom.is-article-page .reading-progress {
  display: block;
}

/* ════════════════════════════════════════════════════════════════════
   41-Z-BC. Breadcrumbs (홈 > 카테고리 > 제목) — [중요].txt #12
   ────────────────────────────────────────────────────────────────────
   본문 페이지에서 동적 생성 (JS) → article-header 앞에 삽입.
   JSON-LD BreadcrumbList 도 함께 자동 생성.

   디자인 토큰 (기존):
   - --color-breadcrumb-link/-current/-sep
   - --space-article-breadcrumb-bottom (24px)
   - --breadcrumb-display-pc/-mobile (PC flex / 모바일 숨김)
   - --breadcrumb-current-* (PC normal / 모바일 ellipsis)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .breadcrumbs {
  display: var(--breadcrumb-display-pc);     /* PC flex */
  margin-bottom: var(--space-article-breadcrumb-bottom);
  font-size: var(--breadcrumb-font-size);
  color: var(--color-breadcrumb-link);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--breadcrumb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
body.theme-odyssey-custom .breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
}
body.theme-odyssey-custom .breadcrumbs-item + .breadcrumbs-item::before {
  content: var(--breadcrumb-sep-char);    /* › */
  color: var(--color-breadcrumb-sep);
}
body.theme-odyssey-custom .breadcrumbs-item > a {
  color: var(--color-breadcrumb-link);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .breadcrumbs-item > a:hover {
  color: var(--color-primary-dark);
}
body.theme-odyssey-custom .breadcrumbs-item[aria-current="page"] {
  color: var(--color-breadcrumb-current);
  white-space: var(--breadcrumb-current-white-space-pc);
  overflow: var(--breadcrumb-current-overflow-pc);
  text-overflow: var(--breadcrumb-current-text-overflow-pc);
  min-width: var(--breadcrumb-current-min-width-pc);
  flex: var(--breadcrumb-current-flex-pc);
}
/* 모바일: 숨김 (사용자 요청 — 햄버거 드로어 중복 방지) */
@media (max-width: 768px) {
  body.theme-odyssey-custom .breadcrumbs {
    display: var(--breadcrumb-display-mobile);
  }
  /* 만약 모바일에서 표시하도록 토큰 변경 시 ellipsis 처리 활성화 */
  body.theme-odyssey-custom .breadcrumbs-item[aria-current="page"] {
    white-space: var(--breadcrumb-current-white-space-mobile);
    overflow: var(--breadcrumb-current-overflow-mobile);
    text-overflow: var(--breadcrumb-current-text-overflow-mobile);
    min-width: var(--breadcrumb-current-min-width-mobile);
    flex: var(--breadcrumb-current-flex-mobile);
  }
}

/* ════════════════════════════════════════════════════════════════════
   41-Z-M. AI 모듈 모바일 분기 — 패딩·여백·폰트 사이즈 축소
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.theme-odyssey-custom .article-view .box-compare,
  body.theme-odyssey-custom .article-view .box-recommend,
  body.theme-odyssey-custom .article-view .box-review,
  body.theme-odyssey-custom .article-view .box-cta,
  body.theme-odyssey-custom .article-view .box-faq {
    margin: var(--module-margin-y-mobile) 0;
    font-size: var(--module-body-size-mobile);
  }
  body.theme-odyssey-custom .article-view .box-compare th,
  body.theme-odyssey-custom .article-view .box-compare td,
  body.theme-odyssey-custom .article-view .box-recommend,
  body.theme-odyssey-custom .article-view .box-review,
  body.theme-odyssey-custom .article-view .box-cta,
  body.theme-odyssey-custom .article-view .box-faq > summary {
    padding: var(--module-pad-mobile);
  }
  body.theme-odyssey-custom .article-view .box-faq > .box-faq__a {
    padding: 0 var(--module-pad-mobile) var(--module-pad-mobile);
  }
  body.theme-odyssey-custom .article-view .box-compare thead th,
  body.theme-odyssey-custom .article-view .box-recommend > h3,
  body.theme-odyssey-custom .article-view .box-recommend > .box-title,
  body.theme-odyssey-custom .article-view .box-cta > .box-cta__text,
  body.theme-odyssey-custom .article-view .box-faq > summary {
    font-size: var(--module-title-size-mobile);
  }
}


/* ════════════════════════════════════════════════════════════════════
   42. 댓글 영역 (.area-reply / 티스토리 [##_comment_group_##])
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .area-reply {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
body.theme-odyssey-custom .area-reply > h3,
body.theme-odyssey-custom .area-reply .reply-head {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
  margin: 0;
}

/* 댓글 리스트 (티스토리 마크업 호환) */
body.theme-odyssey-custom .area-reply .reply_list,
body.theme-odyssey-custom .area-reply ul.list_reply,
body.theme-odyssey-custom .area-reply .list-comment {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
body.theme-odyssey-custom .area-reply .reply_list > li,
body.theme-odyssey-custom .area-reply ul.list_reply > li,
body.theme-odyssey-custom .area-reply .list-comment > li {
  list-style: none;
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-secondary-soft);
  border: var(--border-teal);
  border-radius: var(--radius-md);
}

/* 답글 (depth 2 이상) - 들여쓰기 + 다른 톤 */
body.theme-odyssey-custom .area-reply .reply_list > li ul li,
body.theme-odyssey-custom .area-reply ul.list_reply > li ul li,
body.theme-odyssey-custom .area-reply .list-comment > li ul li {
  margin-top: var(--space-3);
  margin-left: var(--reply-avatar-size);
  background-color: var(--color-card);
  border: var(--border-soft);
}

/* 댓글 헤더 (작성자 + 날짜) */
body.theme-odyssey-custom .area-reply .reply-info,
body.theme-odyssey-custom .area-reply .reply_info,
body.theme-odyssey-custom .area-reply .info-comment {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
body.theme-odyssey-custom .area-reply .reply-name,
body.theme-odyssey-custom .area-reply .reply_name,
body.theme-odyssey-custom .area-reply .name-comment {
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .area-reply .reply-date,
body.theme-odyssey-custom .area-reply .reply_date,
body.theme-odyssey-custom .area-reply .date-comment {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* 댓글 본문 */
body.theme-odyssey-custom .area-reply .reply-text,
body.theme-odyssey-custom .area-reply .reply_text,
body.theme-odyssey-custom .area-reply .desc_reply,
body.theme-odyssey-custom .area-reply .desc-comment {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  word-break: keep-all;
}

/* 댓글 컨트롤 (수정 / 삭제 / 답글) */
body.theme-odyssey-custom .area-reply .reply-control,
body.theme-odyssey-custom .area-reply .reply_control,
body.theme-odyssey-custom .area-reply .control-comment {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
body.theme-odyssey-custom .area-reply .reply-control a,
body.theme-odyssey-custom .area-reply .reply_control a,
body.theme-odyssey-custom .area-reply .control-comment a {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .area-reply .reply-control a:hover,
body.theme-odyssey-custom .area-reply .reply_control a:hover,
body.theme-odyssey-custom .area-reply .control-comment a:hover {
  color: var(--color-primary);
}

/* 댓글 입력 폼 */
body.theme-odyssey-custom .area-reply .area_input_reply,
body.theme-odyssey-custom .area-reply .area_form_reply,
body.theme-odyssey-custom .area-reply .form-reply {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-card);
  border: var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

body.theme-odyssey-custom .area-reply input[type="text"],
body.theme-odyssey-custom .area-reply input[type="password"],
body.theme-odyssey-custom .area-reply input[type="email"] {
  /* 추가.txt §2 Form/Input: 베이스 15px / radius 18 / padding 0 16 / line 1.5 */
  width: 100%;
  height: var(--input-h);
  padding: var(--input-pad);
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font-base);
  font-size: var(--text-md);
  line-height: var(--input-line);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  transition:
    border-color var(--duration-fast) ease,
    box-shadow   var(--duration-fast) ease;
  margin-bottom: var(--space-2);
}
body.theme-odyssey-custom .area-reply textarea {
  /* 추가.txt §2 Form/Input - textarea 전용: radius 22 / padding 16 18 */
  width: 100%;
  min-height: var(--textarea-min-h);
  padding: var(--textarea-pad);
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--textarea-radius);
  font-family: var(--font-base);
  font-size: var(--text-md);
  line-height: var(--input-line);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  resize: vertical;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow   var(--duration-fast) ease;
  margin-bottom: var(--space-2);
}
body.theme-odyssey-custom .area-reply input[type="text"]::placeholder,
body.theme-odyssey-custom .area-reply input[type="password"]::placeholder,
body.theme-odyssey-custom .area-reply input[type="email"]::placeholder,
body.theme-odyssey-custom .area-reply textarea::placeholder {
  color: var(--color-muted-light);
}
body.theme-odyssey-custom .area-reply input[type="text"]:focus,
body.theme-odyssey-custom .area-reply input[type="password"]:focus,
body.theme-odyssey-custom .area-reply input[type="email"]:focus,
body.theme-odyssey-custom .area-reply textarea:focus {
  /* 추가.txt §2: focus shadow 0 0 0 4px rgba(47,111,115,0.12) */
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-spread) var(--color-input-focus-bg);
  outline: none;
}

/* 댓글 작성 / 등록 버튼
 * ─────────────────────────────────────────────────────────
 * TOC pill (.toc-link) 과 동일한 옅은 세이지 알약 패턴.
 * 단순 댓글 작성 액션이라 CTA 강조 톤 대신 차분한 보조 버튼 톤. */
body.theme-odyssey-custom .area-reply input[type="submit"],
body.theme-odyssey-custom .area-reply button[type="submit"],
body.theme-odyssey-custom .area-reply .btn-submit,
body.theme-odyssey-custom .area-reply .btn_register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--reply-submit-h);
  padding: 0 var(--reply-submit-pad-x);
  background-color: var(--reply-submit-bg);
  color: var(--reply-submit-color);
  border: var(--reply-submit-border);
  border-radius: var(--reply-submit-radius);
  font-size: var(--reply-submit-font-size);
  font-weight: var(--reply-submit-font-weight);
  letter-spacing: var(--letter-spacing);
  /* 한국어 2글자("등록") 좁은 폭에서 세로로 줄바꿈되는 것 방지 */
  white-space: var(--reply-submit-white-space);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    color            var(--duration-fast) ease;
}
body.theme-odyssey-custom .area-reply input[type="submit"]:hover,
body.theme-odyssey-custom .area-reply button[type="submit"]:hover,
body.theme-odyssey-custom .area-reply .btn-submit:hover,
body.theme-odyssey-custom .area-reply .btn_register:hover {
  background-color: var(--reply-submit-bg-hover);
  color: var(--reply-submit-color-hover);
}

/* 비밀댓글 체크박스 */
body.theme-odyssey-custom .area-reply input[type="checkbox"] {
  margin-right: var(--space-2);
  accent-color: var(--color-primary);
}
body.theme-odyssey-custom .area-reply label {
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
  margin-right: var(--space-3);
}

/* 비밀 댓글 잠금 표시 */
body.theme-odyssey-custom .area-reply .lock_reply,
body.theme-odyssey-custom .area-reply .secret-lock {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  font-style: italic;
}

/* 댓글 페이징 */
body.theme-odyssey-custom .area-reply .reply-paging,
body.theme-odyssey-custom .area-reply .paging-reply {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}


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

  /* 본문 박스 모바일 - padding 축소 */
  body.theme-odyssey-custom .article-view .box-affiliate,
  body.theme-odyssey-custom .article-view .box-summary,
  body.theme-odyssey-custom .article-view .box-conclusion,
  body.theme-odyssey-custom .article-view .box-product {
    padding: var(--space-5) var(--space-5);
    margin: var(--space-6) 0;
  }

  /* ════════════════════════════════════════════════════════════════════
   * 4단계 — 기준 정리.txt 모바일 본문 페이지 §1~§21 적용
   *
   *   ※ 모바일 토큰(--*-mobile)을 PC 컴포넌트 적용부 위에 override
   *   ※ 위 공통 padding/margin (var(--space-5)) 보다 specificity 가 동일하면 cascade 순서로 이김
   * ════════════════════════════════════════════════════════════════════ */

  /* §3 본문 메인 카드 모바일 — radius 28 / padding 30 (이전 article-card는 클리핑용, 내부는 article-header / article-view 가 처리) */
  body.theme-odyssey-custom .article-card {
    border-radius: var(--article-card-radius-mobile);
  }
  body.theme-odyssey-custom .article-header {
    padding: var(--space-article-pad-mobile) var(--space-article-pad-mobile) var(--space-article-meta-bottom-mobile);
  }
  body.theme-odyssey-custom .article-view {
    padding: 0 var(--space-article-pad-mobile) var(--space-article-pad-mobile);
  }

  /* §4 카테고리 라벨 모바일 */
  body.theme-odyssey-custom .article-cat,
  body.theme-odyssey-custom .article-view .category-label {
    padding: var(--category-label-pad-y-mobile) var(--category-label-pad-x-mobile);
    margin-bottom: var(--category-label-bottom-mobile);
  }

  /* §5 H1 제목 모바일 — 32px / 줄간격 1.28 / 자간 -0.055em / 아래 14
   * ※ 기존 --text-article-title-mobile (33px) 을 정확값 32px 로 override */
  body.theme-odyssey-custom .article-title {
    font-size: 32px;                                                       /* 기준 모바일 §5 정확값 */
    line-height: var(--leading-display-mobile);                            /* 1.28 - 기준 모바일 §5 */
    margin-bottom: var(--space-article-title-bottom-mobile);               /* 14px - 기준 모바일 §5 */
  }

  /* §6 리드문 모바일 — 16 ✓ / 줄간격 1.78 ✓ / 아래 20 */
  body.theme-odyssey-custom .article-lead {
    margin-bottom: var(--space-article-lead-bottom-mobile);
  }

  /* §7 메타 정보 모바일 — 13 ✓ / gap 9 / padding-bottom 22 / 아래 24 (article-header padding-bottom 으로 처리) */
  body.theme-odyssey-custom .article-meta {
    gap: var(--space-article-meta-gap-mobile);
    padding-bottom: var(--space-article-meta-pad-bottom-mobile);
  }

  /* §8 대표 이미지 모바일 — height 220 / radius 24 / 아래 24 */
  body.theme-odyssey-custom .article-view .post-hero {
    border-radius: var(--post-hero-radius-mobile);
    margin-bottom: var(--space-article-thumb-bottom-mobile);
  }
  body.theme-odyssey-custom .article-view .post-hero img {
    height: var(--post-hero-img-h-mobile);
  }

  /* §10 핵심 요약 박스 모바일 — radius 24 ✓ / padding 22 / 아래 30 */
  body.theme-odyssey-custom .article-view .box-summary {
    border-radius: var(--summary-radius-mobile);
    padding: var(--summary-pad-mobile);
    margin-bottom: var(--space-article-summary-bottom-mobile);
  }

  /* §12 H2 / H3 / 문단 모바일 */
  body.theme-odyssey-custom .article-view h2 {
    font-size: 25px;                                                       /* 기준 모바일 §12 정확값 (--text-article-h2-mobile 24 → 25 override) */
    margin-top: var(--space-article-h2-top-mobile);                        /* 36px - 기준 모바일 §12 */
    margin-bottom: var(--space-article-h2-bottom-mobile);                  /* 13px - 기준 모바일 §12 */
    line-height: var(--leading-h2-mobile);                                 /* 1.36 - 기준 모바일 §12 */
  }
  body.theme-odyssey-custom .article-view h3 {
    margin-top: var(--space-article-h3-top-mobile);                        /* 26px - 기준 모바일 §12 */
    margin-bottom: var(--space-article-h3-bottom-mobile);                  /* 10px - 기준 모바일 §12 */
  }
  body.theme-odyssey-custom .article-view p {
    margin-bottom: var(--space-article-paragraph-bottom-mobile);           /* 18px - 기준 모바일 §12 */
  }

  /* §13 광고 박스 모바일 */
  body.theme-odyssey-custom .article-view .box-ad {
    padding: var(--ad-pad-mobile);
    font-size: var(--ad-font-size-mobile);
    margin: var(--space-article-ad-y-mobile) 0;
  }

  /* §14 비교표 모바일 + 가로 스크롤 — radius 20 / 글씨 14 / 셀 14×15 / 위아래 20/30
   * ※ 기준 §44 우선순위 2: "표 모바일 가로 스크롤 wrapper"
   * ※ .table-scroll 는 작성자가 <div class="table-scroll"><table>...</table></div> 형식으로 감싸야 작동
   * ※ 작성자가 wrapper 안 감싸도 .compare-table 자체가 overflow-x: auto 로 동작하도록 fallback 추가 */
  body.theme-odyssey-custom .article-view table,
  body.theme-odyssey-custom .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--table-radius-mobile);                             /* 20px - 기준 모바일 §14 */
    font-size: var(--text-table-mobile);                                   /* 14px - 기준 모바일 §14 */
    margin: var(--space-table-top-mobile) 0 var(--space-table-bottom-mobile);  /* 20 0 30 - 기준 모바일 §14 */
  }
  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: var(--space-table-pad-y-mobile) var(--space-table-pad-x-mobile);  /* 14 15 - 기준 모바일 §14 */
  }

  /* 제휴 안내 — 기준 모바일 §9 (1단계 §1 비교표 → 모바일 §9 정확값 갱신 반영)
   * 살구색 라인 4px / radius 22px / padding 18×20 / 본문 14 / 줄간격 1.68 / 아래 24 */
  body.theme-odyssey-custom .article-view .box-affiliate {
    border-left-width: var(--affiliate-rail-w-mobile);
    border-radius: var(--affiliate-radius-mobile);
    padding: var(--affiliate-pad-y-mobile) var(--affiliate-pad-x-mobile);
    margin-bottom: var(--space-affiliate-bottom-mobile);
    font-size: var(--text-affiliate-mobile);
    line-height: var(--leading-affiliate-mobile);                          /* 1.68 - 기준 모바일 §9 신규 적용 */
  }
  /* 제휴 안내 제목 (strong) — 기준 §1 모바일 15px */
  body.theme-odyssey-custom .article-view .box-affiliate strong {
    font-size: var(--text-affiliate-title-mobile);
  }

  /* §19 장점 / 아쉬운 점 모바일 — 1열, gap 14, padding 20, 리스트 15/1.74 */
  body.theme-odyssey-custom .article-view .box-pros-cons {
    grid-template-columns: repeat(var(--proscons-cols-mobile), 1fr);       /* 1 - 기준 모바일 §19 */
    gap: var(--proscons-gap-mobile);                                       /* 14 - 기준 모바일 §19 */
    margin: var(--space-6) 0;
  }
  body.theme-odyssey-custom .article-view .box-pros-cons > .pros,
  body.theme-odyssey-custom .article-view .box-pros-cons > .cons {
    border-radius: var(--proscons-radius-mobile);                          /* 22 - 기준 모바일 §19 */
    padding: var(--proscons-pad-mobile);                                   /* 20 - 기준 모바일 §19 */
  }
  body.theme-odyssey-custom .article-view .box-pros-cons li {
    font-size: var(--proscons-list-size-mobile);                           /* 15 - 기준 모바일 §19 */
    line-height: var(--proscons-list-line-mobile);                         /* 1.74 - 기준 모바일 §19 */
  }

  /* §20 마무리 CTA 박스 모바일 — radius 24 / padding 22 / 위아래 38/30 / 제목 23 / 문단 15.5 */
  body.theme-odyssey-custom .article-view .box-conclusion {
    border-radius: var(--conclusion-radius-mobile);
    padding: var(--conclusion-pad-mobile);
    margin: var(--conclusion-top-mobile) 0 var(--conclusion-bottom-mobile);
  }
  body.theme-odyssey-custom .article-view .box-conclusion > h3,
  body.theme-odyssey-custom .article-view .box-conclusion > .box-title {
    font-size: var(--conclusion-title-size-mobile);                        /* 23 - 기준 모바일 §20 */
  }
  body.theme-odyssey-custom .article-view .box-conclusion p {
    font-size: var(--conclusion-text-size-mobile);                         /* 15.5 - 기준 모바일 §20 */
  }
  /* 마무리 CTA 버튼 모바일 — 기준 §18: 100% 폭 + radius 16 + 높이 48 + padding 14×20 + 글씨 14 */
  body.theme-odyssey-custom .article-view .box-conclusion .conclusion-cta {
    height: var(--cta-min-h-mobile);                                       /* 48 - 기준 모바일 §18 */
    border-radius: var(--cta-radius-mobile);                               /* 16 - 기준 모바일 §18 */
    padding: var(--cta-pad-y-mobile) var(--cta-pad-x-mobile);              /* 14 20 - 기준 모바일 §18 */
    font-size: var(--cta-font-size-mobile);                                /* 14 - 기준 모바일 §18 */
    width: var(--cta-width-mobile);                                        /* 100% - 기준 모바일 §18 */
  }

  /* §15·§16·§17 상품 박스 모바일 — 1열 세로 배치 + 이미지 220 + 카드 padding/radius/gap/그림자 */
  body.theme-odyssey-custom .article-view .box-product {
    grid-template-columns: 1fr;                                            /* 기준 모바일 §15: 1열 */
    gap: var(--product-gap-mobile);                                        /* 18 - 기준 모바일 §15 */
    border-radius: var(--product-radius-mobile);                           /* 24 - 기준 모바일 §15 */
    padding: var(--product-pad-mobile);                                    /* 22 - 기준 모바일 §15 */
    margin: var(--space-article-product-y-mobile) 0;                       /* 24 0 - 기준 모바일 §15 */
    box-shadow: var(--product-shadow-mobile);                              /* 0 8 22 0.055 - 기준 모바일 §15 */
  }
  body.theme-odyssey-custom .article-view .box-product .product-thumb {
    width: var(--product-thumb-w-mobile);                                  /* 100% - 기준 모바일 §16 */
    height: var(--product-thumb-h-mobile);                                 /* 220 - 기준 모바일 §16 */
    aspect-ratio: auto;                                                    /* PC aspect-ratio 1/1 override → 명시 height 사용 */
    border-radius: var(--product-thumb-radius-mobile);                     /* 22 - 기준 모바일 §16 */
  }
  /* 상품 라벨 / 제목 / 설명 모바일 — 기준 §17 */
  body.theme-odyssey-custom .article-view .box-product .product-cat,
  body.theme-odyssey-custom .article-view .box-product .product-label {
    font-size: var(--product-label-size-mobile);                           /* 12 - 기준 모바일 §17 */
  }
  body.theme-odyssey-custom .article-view .box-product .product-name {
    font-size: var(--product-name-size-mobile);                            /* 20 - 기준 모바일 §17 */
  }
  body.theme-odyssey-custom .article-view .box-product .product-desc {
    font-size: var(--product-desc-size-mobile);                            /* 14.5 - 기준 모바일 §17 */
  }
  /* 상품 미니 스탯 - 모바일은 1열 + radius/padding 동일 */
  body.theme-odyssey-custom .article-view .box-product .product-stats {
    grid-template-columns: repeat(var(--product-stats-cols-mobile), 1fr);  /* 1 - 기준 모바일 §17 */
  }
  /* 상품 CTA 모바일 — 기준 §18 적용 */
  body.theme-odyssey-custom .article-view .box-product .product-cta {
    width: var(--cta-width-mobile);                                        /* 100% - 기준 모바일 §18 */
    min-height: var(--cta-min-h-mobile);                                   /* 48 - 기준 모바일 §18 */
    border-radius: var(--cta-radius-mobile);                               /* 16 - 기준 모바일 §18 */
    padding: var(--cta-pad-y-mobile) var(--cta-pad-x-mobile);              /* 14 20 - 기준 모바일 §18 */
    font-size: var(--cta-font-size-mobile);                                /* 14 - 기준 모바일 §18 */
    justify-content: center;                                               /* 100% 폭에서 글씨 가운데 정렬 */
    align-self: stretch;                                                   /* flex 컨테이너 안에서 100% 폭 */
  }

  /* §21 본문 끝 태그 모바일 */
  body.theme-odyssey-custom .article-tag {
    margin: var(--article-tag-y-mobile) 0;                                 /* 30 0 - 기준 모바일 §21 */
  }
  body.theme-odyssey-custom .article-tag .tag-list a {
    min-height: var(--tag-btn-min-h-mobile);                               /* 34 - 기준 모바일 §21 */
    padding: var(--tag-btn-pad-y-mobile) var(--tag-btn-pad-x-mobile);      /* 7 11 - 기준 모바일 §21 */
    font-size: var(--tag-btn-font-size-mobile);                            /* 12.5 - 기준 모바일 §21 */
  }

  /* §21 관련글 모바일 — 1열, 제목 23, 설명 14, 카드 radius 18 / padding 17 / gap 10 */
  body.theme-odyssey-custom .article-related .related-list {
    grid-template-columns: repeat(var(--related-grid-cols-mobile), minmax(0, 1fr));  /* 1 - 기준 모바일 §21 */
    gap: var(--related-grid-gap-mobile);                                   /* 10 - 기준 모바일 §21 */
  }
  body.theme-odyssey-custom .article-related .article-foot-title {
    font-size: var(--related-title-size-mobile);                           /* 23 - 기준 모바일 §21 */
  }
  body.theme-odyssey-custom .article-related .article-related-desc {
    font-size: var(--related-desc-size-mobile);                            /* 14 - 기준 모바일 §21 */
  }
  body.theme-odyssey-custom .article-related .related-link {
    padding: var(--related-item-pad-mobile);                               /* 17 단일 - 기준 모바일 §21 */
    border-radius: var(--related-item-radius-mobile);                      /* 18 - 기준 모바일 §21 (PC와 동일) */
  }

  /* §21 이전글 / 다음글 모바일 — 1열, padding 16×17, gap 10 */
  body.theme-odyssey-custom .article-page-list {
    grid-template-columns: repeat(var(--article-page-cols-mobile), minmax(0, 1fr));  /* 1 - 기준 모바일 §21 */
    gap: var(--article-page-gap-mobile);                                   /* 10 - 기준 모바일 §21 */
  }
  body.theme-odyssey-custom .article-page-item a {
    padding: var(--article-page-card-pad-y-mobile) var(--article-page-card-pad-x-mobile);  /* 16 17 - 기준 모바일 §21 */
    border-radius: var(--article-page-card-radius-mobile);                 /* 18 - 기준 모바일 §21 (PC와 동일) */
  }

  /* §21 댓글 영역 자리 모바일 — margin-top 22, radius 20, padding 20, 글씨 13 */
  body.theme-odyssey-custom .comments-placeholder {
    margin-top: var(--comments-top-mobile);                                /* 22 - 기준 모바일 §21 */
    border-radius: var(--comments-radius-mobile);                          /* 20 - 기준 모바일 §21 */
    padding: var(--comments-pad-mobile);                                   /* 20 - 기준 모바일 §21 */
    font-size: var(--comments-font-size-mobile);                           /* 13 - 기준 모바일 §21 */
  }

  /* 댓글 영역 모바일 (티스토리 reply / list-comment) — 기존 영역 유지 */
  body.theme-odyssey-custom .area-reply .reply_list > li,
  body.theme-odyssey-custom .area-reply ul.list_reply > li,
  body.theme-odyssey-custom .area-reply .list-comment > li {
    padding: var(--space-4) var(--space-5);
  }
  body.theme-odyssey-custom .area-reply .reply_list > li ul li,
  body.theme-odyssey-custom .area-reply ul.list_reply > li ul li,
  body.theme-odyssey-custom .area-reply .list-comment > li ul li {
    margin-left: var(--space-7);
  }
  body.theme-odyssey-custom .area-reply .area_input_reply,
  body.theme-odyssey-custom .area-reply .area_form_reply,
  body.theme-odyssey-custom .area-reply .form-reply {
    padding: var(--space-4) var(--space-5);
  }
}


/* ════════════════════════════════════════════════════════════════════
   ※ Stage 4 종료 - 전체 작업 완료
   ────────────────────────────────────────────────────────────────────
   원칙 준수 확인:
   ✓ !important 0개 (specificity 로만 처리)
   ✓ 하드코딩 색상 0개 (모두 CSS 변수)
   ✓ 하드코딩 px 0개 (모두 CSS 변수)
   ✓ HTML/CSS 모두 토큰화 + 변수화
   ✓ 사이드바 9개 모듈 마크업 보존 ("최근글과 인기글"만 활성)
   ════════════════════════════════════════════════════════════════════ */