@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════
   stage5.css - 시안 100% 일치를 위한 사이드바 추가 카드
   ────────────────────────────────────────────────────────────────────
   원본 style.css 의 STAGE 5 영역 (L8023~L8502) 을 분리.
   본문(article)  : 글 목차(.box-toc) + 추천 읽기 순서(.box-reading-order)
   메인(index)    : 구글 친화 체크(.box-google-check)
   인기글(popular): 둥근 핑크 썸네일 톤(.box-recent 보정)

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


/* ════════════════════════════════════════════════════════════════════
   STAGE 5 - 시안 100% 일치를 위한 사이드바 추가 카드
   - 본문(article): 글 목차 + 추천 읽기 순서
   - 메인(index)  : 구글 친화 체크
   - 인기글(popular): 본문 페이지에서 둥근 핑크 썸네일 톤
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   44. 페이지 컨텍스트 기반 표시 / 숨김
   - 기본은 모두 숨김
   - body.is-article-page : .box-toc, .box-reading-order 표시
   - body.is-index-page   : .box-google-check 표시
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .box-toc,
body.theme-odyssey-custom .box-reading-order,
body.theme-odyssey-custom .box-google-check {
  display: none;
}

/* 본문(article) 페이지: TOC + 추천 읽기 순서 표시 (PC 사이드바 카드만)
 * ※ 모바일에서는 본문에 글 목차 컴포넌트 없음 (햄버거 드로어 사용) */
body.theme-odyssey-custom.is-article-page .area-aside .box-toc,
body.theme-odyssey-custom.is-article-page .area-aside .box-reading-order {
  display: block;
}

/* 모바일 햄버거 드로어에서는 본문 페이지 컨텍스트 카드(.box-toc, .box-reading-order) 숨김
 * - PC 사이드바에서는 본문 페이지 한정으로 노출 (위 §44 컨텍스트 규칙)
 * - 모바일 드로어는 카테고리/검색/네비 용도라 본문 컨텍스트 카드 표시 불필요
 * - 동일 specificity (0,4,1) 의 위 규칙(line ~5802)을 같은 가시성 섹션 안에서
 *   미디어 쿼리 + source order 로 오버라이드
 * ※ 이전엔 box-toc 만 처리되어 있어 본문 페이지 모바일 드로어에 .box-reading-order 가
 *   '추천 읽기 순서' 카드로 노출되어 상단 큰 빈 공간 차지 — box-reading-order 함께 추가 */
@media (max-width: 768px) {
  body.theme-odyssey-custom.is-article-page .area-aside .box-toc,
  body.theme-odyssey-custom.is-article-page .area-aside .box-reading-order {
    display: none;
  }
}

/* 메인(index) 페이지: 구글 친화 체크 표시 */
body.theme-odyssey-custom.is-index-page .area-aside .box-google-check {
  display: block;
}

/* 본문(article) 페이지 전용 정렬 보정
   ────────────────────────────────────────────────────────────────
   - .area-common 은 s_list 가 출력 안 되어 비어 있음 → 시각적 공간 차지 방지
   - .area-view 안 breadcrumb 의 음수 margin-top 제거 (정렬 정확도 향상)
   - PC 에서 .area-aside 를 breadcrumb 높이만큼 내려 article-card 와 정렬 */
body.theme-odyssey-custom.is-article-page .area-common {
  display: none;
}
body.theme-odyssey-custom.is-article-page .area-view > .breadcrumb-nav {
  /* 시안 매칭: breadcrumb 가 article-card 와 너무 붙어 보이는 문제 해결
     - margin-top 은 0 유지 (container margin 으로 헤더와 간격 확보)
     - margin-bottom 을 토큰화한 24px 로 늘려 breadcrumb 를 위로 분리 */
  margin-top: 0;
  margin-bottom: var(--space-article-breadcrumb-bottom);
}

/* 모바일 한정: breadcrumb 현재 페이지(긴 제목) 1줄 ellipsis 처리
   ※ 모바일에서 제목이 너무 길어 3줄 차지하는 문제 해결
   ※ 토큰 재정의가 아닌, 모바일 전용 토큰을 직접 적용 (프로젝트 패턴 일관성)
   ※ 사용자 요청: 모바일에서 breadcrumb 전체 숨김 (햄버거 드로어와 중복) */
@media (max-width: 768px) {
  /* breadcrumb 전체 숨김 — 토큰 --breadcrumb-display-mobile 로 통제 (기본 none) */
  body.theme-odyssey-custom .breadcrumb-nav {
    display: var(--breadcrumb-display-mobile);
  }
  body.theme-odyssey-custom .breadcrumb-current {
    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);
  }
}

/* TOC 빈 글 토글:
   - 기본 상태(헤딩 있음, JS 가 data-empty 제거)  → toc-list 표시 / toc-empty 숨김
   - data-empty="true" (헤딩 0개) → toc-list 숨김 / toc-empty 표시
   ※ 박스 자체는 본문 페이지에서 항상 표시 */
body.theme-odyssey-custom .box-toc .toc-empty {
  display: none;
}
body.theme-odyssey-custom .box-toc[data-empty="true"] .toc-list {
  display: none;
}
body.theme-odyssey-custom .box-toc[data-empty="true"] .toc-empty {
  display: block;
  margin: 0;
  padding: var(--toc-empty-pad) 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
  word-break: keep-all;
}

/* 인기글 카드 제목 - 페이지 컨텍스트별 표시
   ────────────────────────────────────────────────────────────
   - 메인 페이지(.is-index-page): '많이 찾는 글' (시안 메인02·03)
   - 본문 페이지(.is-article-page): '인기글' (시안 본문02·03·09)
   - 다른 페이지: 기본은 모두 숨김 (fallback 으로 첫 span 만 표시) */
body.theme-odyssey-custom .box-recent--popular .popular-title {
  display: none;
}
body.theme-odyssey-custom.is-index-page .box-recent--popular .popular-title--index,
body.theme-odyssey-custom.is-article-page .box-recent--popular .popular-title--article {
  display: inline;
}
/* fallback: 컨텍스트 클래스 없는 경우(예: 카테고리·태그 페이지) 메인 라벨 표시 */
body.theme-odyssey-custom:not(.is-index-page):not(.is-article-page) .box-recent--popular .popular-title--index {
  display: inline;
}

/* 인기글 박스 — 비어있을 때 자동 숨김 (PC / 모바일 공통)
 * - JS 가 page load 시 .recent-item 개수 확인 후 data-empty="true" 부여 (.box-toc 와 동일 패턴)
 * - 향후 Tistory 인기글 플러그인이 게시물을 채우면 → JS 가 data-empty 안 붙임 → 자동 노출
 * - 라벨(h3) 만 떠있고 콘텐츠 없는 빈 박스 방지 */
body.theme-odyssey-custom .box-recent--popular[data-empty="true"] {
  display: none;
}

/* ─ 깜빡임 방지 (FOUC 제거) ─
 *  빈 카드 판정 대상 박스(.box-recent--popular, .box-recent--recent)는
 *  JS 가 .recent-item 개수를 확인하기 전까지 "보이는 상태"로 첫 페인트되었다가,
 *  JS 후 빈 카드면 is-empty/data-empty 가 붙어 숨겨지면서 "보임 → 사라짐" 깜빡임이 발생.
 *
 *  해결:
 *    [pre]  is-aside-ready 미부여 시 → display: none (첫 페인트에서 노출 안 됨)
 *    [post] is-aside-ready 부여 + 비어있지 않은 박스만 → display: block (한 번의 페인트로 완성)
 *  ※ JS 가 빈 카드 판정 완료 후 body 에 'is-aside-ready' 클래스를 부여 */
body.theme-odyssey-custom .area-aside .box-recent--popular,
body.theme-odyssey-custom .area-aside .box-recent--recent {
  display: var(--aside-checkable-display-pre);
}
body.theme-odyssey-custom.is-aside-ready .area-aside .box-recent--popular:not([data-empty="true"]),
body.theme-odyssey-custom.is-aside-ready .area-aside .box-recent--recent:not(.is-empty) {
  display: var(--aside-checkable-display-post);
}

/* 최근 글 카드 (.box-recent--recent) - 메인 페이지에서만 PC 숨김
   ────────────────────────────────────────────────────────────
   - 메인 시안: '많이 찾는 글' 한 카드만 표시 → 최근글 숨김
   - 본문 시안: 시안에는 없으나 사용자 요청으로 최근글+인기글 둘 다 표시
   - 모바일 드로어: 모든 페이지 표시 (모바일 시안 '최근글 · 인기글' 영역)
   ※ specificity 매칭: 위 [post] 노출 규칙(0,5,1)과 동률을 위해 .is-aside-ready 추가
      → 같은 specificity 에서 더 뒤에 위치한 본 규칙이 우선 적용되어 회귀 방지 */
@media (min-width: 1024px) {
  body.theme-odyssey-custom.is-index-page.is-aside-ready .area-aside .box-recent--recent {
    display: none;
  }
}

/* 카테고리/태그/검색/방명록 등 PC 페이지 - 사이드바 영역 자체 숨김
   ────────────────────────────────────────────────────────────
   - is-index-page / is-article-page 두 클래스 모두 없는 페이지에서
     사이드바를 숨기고 본문 영역을 풀폭으로 확장 */
@media (min-width: 1024px) {
  body.theme-odyssey-custom:not(.is-index-page):not(.is-article-page) .area-aside {
    display: none;
  }
  body.theme-odyssey-custom:not(.is-index-page):not(.is-article-page) .main {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 본문 페이지 - 본문 카드와 푸터 사이 여백 축소
   ────────────────────────────────────────────────────────────
   - 기본은 article-card margin-bottom 36 + footer margin-top 72 = 108px
   - 본문 페이지에서는 댓글 카드 다음 내용이 없어 큰 여백이 시각적으로 비어 보임
   - article-card 의 margin-bottom 을 0 으로 + footer 위 간격을 줄여 깔끔하게 */
body.theme-odyssey-custom.is-article-page .article-card {
  margin-bottom: 0;
}
body.theme-odyssey-custom.is-article-page .site-footer {
  margin-top: var(--space-9);  /* 36px (기본 72px 의 절반) */
}

/* 페이스북 트위터 플러그인 빈 슬롯 - 사이드바에서 완전 숨김
   (Tistory 플러그인 모듈 비활성화 전까지의 fallback) */
body.theme-odyssey-custom .box-plugins-empty {
  display: none;
}


/* ════════════════════════════════════════════════════════════════════
   45. 글 목차 (TOC) - .box-toc
   시안: 본문 시안 01~08 사이드바 첫 번째 카드
   - H2 : 번호형 알약 (1, 2, 3...)  — 옅은 세이지 배경
   - H3 : 부모 H2 안쪽 들여쓰기 + 점 마커
   ════════════════════════════════════════════════════════════════════ */

/* ─ 메인 리스트 (H2 컨테이너) ─ */
body.theme-odyssey-custom .box-toc .toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: var(--toc-pill-gap);
}

/* ─ H2 항목 (직계 자식만 카운터 적용) ─ */
body.theme-odyssey-custom .box-toc .toc-list > .toc-item {
  list-style: none;
  margin: 0;
  counter-increment: toc;
}
body.theme-odyssey-custom .box-toc .toc-list > .toc-item > .toc-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--toc-pill-h);
  padding: var(--space-2) var(--toc-pill-pad-x);
  background-color: var(--toc-pill-bg);
  border: var(--toc-pill-border);
  border-radius: var(--toc-pill-radius);
  color: var(--toc-pill-text);
  font-size: var(--toc-pill-font-size);
  font-weight: var(--toc-pill-font-weight);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) ease,
    color            var(--duration-fast) ease,
    transform        var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .box-toc .toc-list > .toc-item > .toc-link::before {
  content: counter(toc) ".";
  flex: 0 0 auto;
  min-width: var(--toc-num-w);
  color: var(--toc-pill-num-color);
  font-weight: var(--weight-black);
}
body.theme-odyssey-custom .box-toc .toc-list > .toc-item > .toc-link:hover {
  background-color: var(--toc-pill-bg-hover);
  color: var(--toc-pill-text-hover);
  transform: translateX(var(--motion-shift-sm));
}

/* ─ H3 서브 리스트 (H2 안쪽으로 들여쓰기) ─ */
body.theme-odyssey-custom .box-toc .toc-sub-list {
  margin: var(--space-2) 0 0;
  padding: 0 0 0 var(--toc-sub-indent);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 방어 케이스: 부모 H2 없이 H3 부터 시작한 경우 (sub-list 가 toc-list 직계 자식) */
body.theme-odyssey-custom .box-toc .toc-list > .toc-sub-list {
  padding-left: 0;
  margin-top: 0;
}

body.theme-odyssey-custom .box-toc .toc-sub-item {
  list-style: none;
  margin: 0;
}
body.theme-odyssey-custom .box-toc .toc-sub-item > .toc-link {
  position: relative;
  display: block;
  padding: var(--toc-sub-pad-y) var(--space-3) var(--toc-sub-pad-y) var(--toc-sub-pad-l);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--toc-sublink-font-size);
  font-weight: var(--toc-sublink-font-weight);
  color: var(--toc-sublink-color);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  text-decoration: none;
  transition:
    color            var(--duration-fast) ease,
    background-color var(--duration-fast) ease,
    transform        var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .box-toc .toc-sub-item > .toc-link::before {
  content: '';
  position: absolute;
  left: var(--toc-sub-marker-l);
  top: 50%;
  transform: translateY(-50%);
  width: var(--toc-sub-marker-w);
  height: var(--toc-sub-marker-h);
  background-color: var(--toc-sublink-marker-color);
  border-radius: var(--radius-pill);
}
body.theme-odyssey-custom .box-toc .toc-sub-item > .toc-link:hover {
  color: var(--toc-sublink-color-hover);
  background-color: var(--toc-sublink-bg-hover);
  transform: translateX(var(--motion-shift-sm));
}


/* ════════════════════════════════════════════════════════════════════
   46. 추천 읽기 순서 - .box-reading-order
   시안: 본문 시안 02~08 사이드바 두 번째 카드 (다크 틸 배경)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .box-reading-order {
  background-color: var(--reading-order-bg);
  color: var(--reading-order-text);
  border-color: var(--reading-order-border);
}
body.theme-odyssey-custom .area-aside .box-reading-order .sidebar-title {
  color: var(--reading-order-title-color);
}
body.theme-odyssey-custom .box-reading-order .reading-order-desc {
  margin: 0;
  font-size: var(--reading-order-desc-size);
  font-weight: var(--reading-order-desc-weight);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--letter-spacing);
  color: var(--reading-order-desc-color);
  word-break: keep-all;
}


/* ════════════════════════════════════════════════════════════════════
   47. 구글 친화 체크 - .box-google-check
   시안: 메인 시안 메인02~04 사이드바 두 번째 카드
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .box-google-check .check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
body.theme-odyssey-custom .box-google-check .check-list li {
  list-style: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--check-row-pad-y) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  word-break: keep-all;
}
body.theme-odyssey-custom .box-google-check .check-list li::before {
  content: '';
  flex: 0 0 auto;
  width: var(--check-icon-w);
  height: var(--check-icon-w);
  margin-top: var(--check-icon-mt);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F73' 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: contain;
}


/* ════════════════════════════════════════════════════════════════════
   48. 최근글 + 인기글 사이드바 (.box-recent--recent / .box-recent--popular)
   시안: 본문 시안 02·03·08 사이드바
   - 원형 placeholder 썸네일 (peach→sage 그라데이션)
   - 시안에는 숫자 표시 안 됨. --popular-num-display 토큰으로 토글 가능
     (none = OFF / flex = ON)
   - 빈 카드는 JS 가 .is-empty 클래스 부여 → 자동 숨김
   ════════════════════════════════════════════════════════════════════ */

/* 두 카드 공통 - 리스트 컨테이너 (CSS counter 시작) */
body.theme-odyssey-custom .area-aside .box-recent .recent-list {
  display: flex;
  flex-direction: column;
  /* 추가.txt §3: 카드 hover 효과 안 하고 단순 리스트로 - gap 만 */
  gap: 0;
  margin: 0;
  padding: 0;
  /* CSS counter 시작 - 숫자 표시 ON 일 때만 사용됨 */
  counter-reset: popular;
}

/* 항목 카운터 증가 */
body.theme-odyssey-custom .area-aside .box-recent .recent-item {
  counter-increment: popular;
  list-style: none;
}

/* 항목 링크 - 항목 사이 hairline / 가운데 정렬 */
body.theme-odyssey-custom .area-aside .box-recent .recent-link {
  align-items: center;
  gap: var(--popular-row-gap);
  /* 중간 플러스: 인기글 항목 여백 PC 19px 21px */
  padding: var(--popular-row-pad-y) var(--popular-row-pad-x);
  border-bottom: var(--popular-row-border);
}
/* 마지막 보이는 항목 아래 hairline 제거
 * ※ PC: 항목 개수 제한이 없으므로 진짜 :last-child 만 처리
 * ※ 모바일: display:none + :nth-child(5) hairline 제거가 짝으로 작동 (모바일 @media 안 별도 규칙) */
body.theme-odyssey-custom .area-aside .box-recent .recent-item:last-child .recent-link {
  border-bottom: 0;
}

/* 시안 02·03·08: 원형 placeholder 썸네일 (peach→sage 그라데이션)
 * - 썸네일 inline style background-image 가 있으면 자동으로 덮음
 * - 없을 때는 토큰 그라데이션이 placeholder 로 표시 */
body.theme-odyssey-custom .area-aside .box-recent .recent-thumb {
  position: relative;
  width: var(--popular-thumb-size);
  height: var(--popular-thumb-size);
  border-radius: var(--popular-thumb-radius);
  background-color: var(--popular-thumb-bg);
  background-image: var(--popular-thumb-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
  overflow: hidden;
}

/* 숫자 오버레이 - 기본 OFF (시안 일치). 켜고 싶으면 토큰 --popular-num-display: flex */
body.theme-odyssey-custom .area-aside .box-recent .recent-thumb::before {
  content: counter(popular);
  position: absolute;
  inset: 0;
  display: var(--popular-num-display);
  align-items: center;
  justify-content: center;
  font-size: var(--popular-num-size);
  font-weight: var(--popular-num-weight);
  color: var(--popular-num-color);
  letter-spacing: var(--letter-spacing);
  background-color: var(--popular-num-bg);
  border-radius: var(--popular-thumb-radius);
}

/* 인기글/최근글 제목·날짜 색/굵기/크기 컴포넌트 토큰 매핑 */
body.theme-odyssey-custom .area-aside .box-recent .recent-title {
  color: var(--popular-title-color);
  font-size: var(--popular-title-size-pc);
  font-weight: var(--popular-title-weight);
}
body.theme-odyssey-custom .area-aside .box-recent .recent-date {
  color: var(--popular-date-color);
  font-size: var(--popular-date-size-pc);
}

/* 빈 카드 자동 숨김 (JS 가 .is-empty 부여) */
body.theme-odyssey-custom .area-aside .box-recent.is-empty {
  display: none;
}


/* ════════════════════════════════════════════════════════════════════
   49. Stage 5 모바일 보정 (~768px)
   - 모바일 햄버거 메뉴에서는 시안 추가 카드 모두 숨김
     (모바일 시안에는 카테고리·최근글·인기글·운영 안내·CTA·검색만 표시)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.theme-odyssey-custom .area-aside .box-toc,
  body.theme-odyssey-custom .area-aside .box-reading-order,
  body.theme-odyssey-custom .area-aside .box-google-check {
    display: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   ※ Stage 5 종료 - 시안 100% 일치 작업 완료
   ────────────────────────────────────────────────────────────────────
   추가 항목:
   ✓ .box-toc           - 글 목차 (본문 H2 자동 수집)
   ✓ .box-reading-order - 추천 읽기 순서 (다크 틸 카드)
   ✓ .box-google-check  - 구글 친화 체크 (메인 전용)
   ✓ .box-recent 보정   - 인기글 / 많이 찾는 글 시안 톤
   ──────────────────────────────────────────────────────────────────── */