@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════
   stage2.css - 서브 페이지 (카테고리/검색/태그/아카이브) 정밀 매칭
                + PC 메인+사이드바 레이아웃 + 페이징 + 사이드바 카드
   ────────────────────────────────────────────────────────────────────
   원본 style.css 의 STAGE 2 영역을 분리.
   포함 컴포넌트:
   - PC 메인+사이드바 2-column grid 레이아웃
   - .post-card (카테고리/검색/태그/아카이브 글 목록 카드)
   - .area-paging (페이지네이션)
   - .area-aside .box-* (사이드바 카드)
   - Stage 2 모바일 보정 (~768px)

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

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


/* ════════════════════════════════════════════════════════════════════
   STAGE 2 - 서브 페이지 (카테고리/검색/태그/아카이브) 정밀 매칭
            + PC 메인+사이드바 레이아웃 + 페이징 + 사이드바 카드
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   20. PC 레이아웃 - 메인 + 사이드바 2-column grid
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.theme-odyssey-custom .main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
    column-gap: var(--sidebar-gap);
    /* row-gap 0 — 풀폭 요소와 컬럼 영역 사이 간격은 각 자식의 margin/section-gap 으로 처리
     * (이중 간격 누적 방지) */
    row-gap: 0;
    align-items: flex-start;
  }
  /* 메인(index) 페이지 풀폭 섹션 — 두 컬럼 모두 차지 (grid-column: 1 / -1)
   *  ─────────────────────────────────────────────────────────────────────
   *  .index-only-block 두 곳 (.main 직계 자식):
   *   1) hero + categories (사이드바 위쪽 풀폭)
   *   2) index-cta-wrap (사이드바 아래쪽 풀폭)
   *  ※ .area-main 안에 중첩된 .index-only-block (예: 최근 추천 글 헤더 wrapper) 은
   *    .main 의 직계 자식이 아니므로 자식 결합자(>)로 정확히 제외 — 그쪽은 블록 흐름에서
   *    .area-main 의 너비(왼쪽 컬럼) 안에 자연스럽게 배치됨
   *  ※ body.is-index-page 가 아니면 .index-only-block 자체가 hidden 이므로
   *    카테고리/검색/태그/본문 페이지에는 영향 없음 */
  body.theme-odyssey-custom .main > .index-only-block {
    grid-column: 1 / -1;
  }
  body.theme-odyssey-custom .area-main {
    grid-column: 1;
    min-width: 0;
  }
  body.theme-odyssey-custom .area-aside {
    grid-column: 2;
    position: sticky;
    top: var(--space-7);
    align-self: flex-start;
    /* max-height / overflow 미사용 — 사이드바 내부 별도 스크롤 발생 X.
     * 사이드바가 viewport 보다 짧으면 휠 스크롤 시 viewport 상단에 sticky 로 고정됨.
     * 사이드바가 viewport 보다 길면 sticky 가 자연스럽게 풀려서
     * 페이지 흐름에 따라 같이 스크롤됨 (휠 한 번에 끝까지 도달). */
  }
  /* 본문 페이지 전용: 사이드바를 breadcrumb 높이 + 하단 여백만큼 내려 article-card 와 시작선 정렬
   *  ─────────────────────────────────────────────────────────────────────
   *  계산식 = (breadcrumb 폰트 크기) × (실제 적용되는 line-height) + (breadcrumb 의 margin-bottom)
   *  ─────────────────────────────────────────────────────────────────────
   *  ※ breadcrumb-nav 는 line-height 미지정 → body 의 --leading-body(1.74) 상속
   *  ※ breadcrumb 의 margin-bottom 은 본문 페이지에서 --space-article-breadcrumb-bottom 사용
   *  ※ 두 토큰 중 어느 값이 바뀌어도 자동으로 정렬이 따라옴 — 하드코딩 회피 목적 */
  body.theme-odyssey-custom.is-article-page .area-aside {
    margin-top: calc(
      var(--text-base) * var(--leading-body)
      + var(--space-article-breadcrumb-bottom)
    );
  }
}


/* ════════════════════════════════════════════════════════════════════
   21. 카테고리/검색/태그 페이지 헤더 (분류명 + 글 개수)
   - 메인 페이지가 아닐 때 .title-search 를 카드 헤더로 노출
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom:not(.is-index-page) .area-common .title-search {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-7);
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom:not(.is-index-page) .area-common .title-search .archives {
  font-size: var(--text-7xl);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  line-height: var(--leading-tight);
}
body.theme-odyssey-custom:not(.is-index-page) .area-common .title-search > span {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

/* 검색 결과 페이지 - "검색결과" 컨텍스트 추가 가능 (시안 통일) */
body.theme-odyssey-custom:not(.is-index-page) .area-common .article-title-search > span::before {
  content: '검색 결과 ';
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}

/* breadcrumb 위치 보정 (메인 외 페이지) */
body.theme-odyssey-custom:not(.is-index-page) .area-common .breadcrumb-nav {
  margin: 0 0 var(--space-2);
}


/* ════════════════════════════════════════════════════════════════════
   22. 페이징 (시안: 박스/구분선 없이 < 1 2 > 만 자연스럽게 노출)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .paging {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--paging-margin-top);
}
body.theme-odyssey-custom .paging-num {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

body.theme-odyssey-custom .paging-link,
body.theme-odyssey-custom .paging-arrow,
body.theme-odyssey-custom .paging-num strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--paging-min-w);
  height: var(--paging-h);
  padding: 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  border-radius: var(--radius-md);
  transition:
    background-color var(--duration-fast) ease,
    color            var(--duration-fast) ease;
}
body.theme-odyssey-custom .paging-link:hover,
body.theme-odyssey-custom .paging-arrow:hover {
  background-color: var(--color-secondary-soft);
  color: var(--color-primary);
}
body.theme-odyssey-custom .paging-link.selected,
body.theme-odyssey-custom .paging-num strong {
  background-color: var(--color-primary);
  color: var(--color-card);
}
body.theme-odyssey-custom .paging-arrow.no_more_prev,
body.theme-odyssey-custom .paging-arrow.no_more_next {
  display: none;
}

/* 더보기 버튼 (티스토리 옵션) */
body.theme-odyssey-custom .paging-more-wrap {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}
body.theme-odyssey-custom .paging-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--space-7);
  background-color: var(--color-secondary);
  border: var(--border-teal);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  transition: background-color var(--duration-fast) ease, transform var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .paging-more:hover {
  background-color: var(--color-secondary-soft);
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
}


/* ════════════════════════════════════════════════════════════════════
   23. 태그 클라우드 페이지
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .tag-page {
  grid-column: 1 / -1;
  margin-bottom: var(--space-9);
  padding: var(--space-9) var(--space-9);
  background-color: var(--color-card);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
body.theme-odyssey-custom .tag-page-title {
  font-size: var(--text-7xl);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-7);
}
body.theme-odyssey-custom .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
body.theme-odyssey-custom .tag-list a {
  display: inline-flex;
  align-items: center;
  height: var(--pill-h-xl);
  padding: 0 var(--space-4);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  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 .tag-list a:hover {
  background-color: var(--color-primary);
  color: var(--color-card);
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
}
/* 태그 사용 빈도별 크기 (cloud_size) */
body.theme-odyssey-custom .tag-list .cloud1 { font-size: var(--text-sm);   height: var(--pill-h-sm); }
body.theme-odyssey-custom .tag-list .cloud2 { font-size: var(--text-base); height: var(--pill-h-lg); }
body.theme-odyssey-custom .tag-list .cloud3 { font-size: var(--text-md);   height: var(--paging-h); }
body.theme-odyssey-custom .tag-list .cloud4 { font-size: var(--text-lg);   height: var(--icon-xl); font-weight: var(--weight-extrabold); }
body.theme-odyssey-custom .tag-list .cloud5 { font-size: var(--text-2xl);  height: var(--pill-h-3xl); font-weight: var(--weight-extrabold); }

/* 태그 클라우드 모바일: WCAG 2.1 AA 터치 타겟 44px — [중요].txt #9
 * (cloud1: 32px, cloud2: 36px 가 모바일에서 작은 터치 영역이 되는 문제 보강.
 *  min-height 만 추가하므로 cloud3~5 의 더 큰 height 는 그대로 유지됨) */
@media (max-width: 768px) {
  body.theme-odyssey-custom .tag-list a {
    min-height: var(--tag-btn-min-h-mobile);
  }
}


/* ════════════════════════════════════════════════════════════════════
   24. 보호글 / 방명록 / 보관함 (위치 로그)
   ════════════════════════════════════════════════════════════════════ */

/* 보호글 - 비밀번호 입력 박스 */
body.theme-odyssey-custom .article-protected-card .article-view {
  padding: 0;
}
body.theme-odyssey-custom .protected-box {
  text-align: center;
  padding: var(--space-12) var(--space-7);
}
body.theme-odyssey-custom .protected-text {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-7);
}
body.theme-odyssey-custom .protected-text span {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
}
body.theme-odyssey-custom .protected-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--protected-form-max);
}
body.theme-odyssey-custom .protected-form input[type="password"] {
  flex: 1 1 auto;
  height: var(--input-h);
  padding: var(--input-pad);
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
body.theme-odyssey-custom .protected-form input[type="password"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-spread) var(--color-primary-soft);
  outline: none;
}
body.theme-odyssey-custom .protected-form button {
  flex: 0 0 auto;
  height: var(--btn-h);
  padding: 0 var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-card);
  border: 0;
  border-radius: var(--btn-radius);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}
body.theme-odyssey-custom .protected-form button:hover {
  background-color: var(--color-primary-dark);
}

/* 위치 로그 (Local Log) */
body.theme-odyssey-custom .local-log {
  padding: var(--card-pad);
  background-color: var(--color-card);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
body.theme-odyssey-custom .local-log-title {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-5);
}
body.theme-odyssey-custom .local-spot,
body.theme-odyssey-custom .local-info {
  padding: var(--space-2) 0;
  font-size: var(--text-md);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .local-spot {
  font-weight: var(--weight-bold);
  color: var(--color-text);
}
body.theme-odyssey-custom .local-info a {
  color: var(--color-primary);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .local-info a:hover {
  color: var(--color-primary-dark);
}


/* ════════════════════════════════════════════════════════════════════
   25. 사이드바 - 최근글과 인기글 (시안 톤 일관 / 사용자가 활성화한 모듈)
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .area-aside .sidebar-card {
  margin-bottom: var(--space-5);
}

/* 최근글 / 인기글 탭 */
body.theme-odyssey-custom .recent-tabs {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  border-bottom: var(--border-soft);
}
body.theme-odyssey-custom .recent-tab {
  list-style: none;
  margin: 0;
}
body.theme-odyssey-custom .recent-tab a,
body.theme-odyssey-custom .recent-tab .tab-button {
  display: inline-flex;
  align-items: center;
  height: var(--tab-h);
  padding: 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
  border-bottom: var(--tab-line-w) solid transparent;
  margin-bottom: calc(-1 * var(--hairline));
  cursor: pointer;
  transition:
    color        var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}
body.theme-odyssey-custom .recent-tab a:hover {
  color: var(--color-primary);
}
body.theme-odyssey-custom .recent-tab.on a,
body.theme-odyssey-custom .recent-tab.on .tab-button {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* 최근글 / 인기글 리스트 */
body.theme-odyssey-custom .recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
body.theme-odyssey-custom .recent-item {
  list-style: none;
  margin: 0;
}
body.theme-odyssey-custom .recent-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  transition: transform var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .recent-link:hover {
  transform: translateX(var(--motion-shift-sm));
}
body.theme-odyssey-custom .recent-thumb {
  flex: 0 0 auto;
  /* 중간 플러스: 글 리스트 썸네일 PC 88px */
  width: var(--recent-thumb-size-pc);
  height: var(--recent-thumb-size-pc);
  border-radius: var(--radius-md);
  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 .recent-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
body.theme-odyssey-custom .recent-title {
  /* 메인화면 상세값 §28: PC 17 / weight 800 / 줄간격 1.52
   *  모바일 §31: 16 / 800 / 1.56 (모바일 @media 에서 토큰 swap)
   *  컴포넌트 토큰 --popular-title-* 를 경유해서 한 곳에서 색/크기/굵기/줄간격 제어 */
  font-size: var(--popular-title-size-pc);
  font-weight: var(--popular-title-weight);
  color: var(--popular-title-color);
  letter-spacing: var(--letter-spacing);
  line-height: var(--popular-title-line-pc);    /* 1.52 - 메인화면 상세값 §28 (이전 --leading-snug 변경) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .recent-link:hover .recent-title {
  color: var(--color-primary);
}
body.theme-odyssey-custom .recent-date {
  /* 추가.txt: PC 날짜 12px (모바일 13px - 미디어쿼리에서 오버라이드) */
  font-size: var(--popular-date-size-pc);
  color: var(--popular-date-color);
  letter-spacing: var(--letter-spacing);
}


/* ════════════════════════════════════════════════════════════════════
   26. 사이드바 - 사용 안 하는 모듈 (마크업만 보존, 미니멀 베이스)
   - 사용자가 티스토리 관리자에서 활성화하면 자동 출력됨
   ════════════════════════════════════════════════════════════════════ */

/* ─ 프로필 박스 ─ */
body.theme-odyssey-custom .area-aside .box-profile .profile-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.theme-odyssey-custom .area-aside .profile-img {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-3);
}
body.theme-odyssey-custom .area-aside .profile-name {
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
  margin: 0 0 var(--space-1);
}
body.theme-odyssey-custom .area-aside .profile-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}
body.theme-odyssey-custom .area-aside .profile-btn-group {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-3);
}
body.theme-odyssey-custom .area-aside .profile-btn-group .btn {
  flex: 1;
  height: var(--btn-h-sm);
  font-size: var(--text-sm);
  padding: 0 var(--space-3);
}
body.theme-odyssey-custom .area-aside .profile-sns {
  display: flex;
  gap: var(--space-2);
}
body.theme-odyssey-custom .area-aside .profile-sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sns-icon-size);
  height: var(--sns-icon-size);
  background-color: var(--color-secondary-soft);
  color: var(--color-primary);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing);
  transition: background-color var(--duration-fast) ease;
}
body.theme-odyssey-custom .area-aside .profile-sns-link:hover {
  background-color: var(--color-secondary);
}
/* 모바일: WCAG 2.1 AA 터치 타겟 44px — [중요].txt #9 */
@media (max-width: 768px) {
  body.theme-odyssey-custom .area-aside .profile-sns-link {
    width:  var(--sns-icon-size-mobile);   /* 44px (이전 32px) */
    height: var(--sns-icon-size-mobile);
  }
}

/* ─ 보관함 / 공지사항 / 최근댓글 - 공용 sidebar-list ─ */
body.theme-odyssey-custom .area-aside .sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}
body.theme-odyssey-custom .area-aside .sidebar-list li {
  list-style: none;
  margin: 0;
}
body.theme-odyssey-custom .area-aside .sidebar-link {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-snug);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .area-aside .sidebar-link:hover {
  color: var(--color-primary);
}
/* 최근댓글 박스 - 댓글 본문 + 작성자 */
body.theme-odyssey-custom .area-aside .box-reply .sidebar-link strong {
  display: block;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
body.theme-odyssey-custom .area-aside .box-reply .sidebar-link p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}

/* ─ 사이드바 태그 ─ */
body.theme-odyssey-custom .area-aside .sidebar-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
body.theme-odyssey-custom .area-aside .sidebar-tag-list a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .area-aside .sidebar-tag-list a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ─ 방문자수 박스 ─ */
body.theme-odyssey-custom .area-aside .visit-total {
  font-size: var(--text-7xl);
  font-weight: var(--weight-black);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}
body.theme-odyssey-custom .area-aside .visit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
}
body.theme-odyssey-custom .area-aside .visit-list li {
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
}

/* ─ 카테고리 메뉴 (사이드바) ─ */
body.theme-odyssey-custom .area-aside .box-category nav,
body.theme-odyssey-custom .area-aside .box-category nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.theme-odyssey-custom .area-aside .box-category li {
  list-style: none;
  margin: 0;
}
body.theme-odyssey-custom .area-aside .box-category a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .area-aside .box-category a:hover {
  color: var(--color-primary);
}
/* 2-depth 들여쓰기 */
body.theme-odyssey-custom .area-aside .box-category ul ul a {
  padding-left: var(--space-4);
  font-size: var(--text-base);
  color: var(--color-muted);
}
body.theme-odyssey-custom .area-aside .box-category ul ul a:hover {
  color: var(--color-primary);
}

/* ─ 달력 ─ */
body.theme-odyssey-custom .area-aside .box-calendar table {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: collapse;
}
body.theme-odyssey-custom .area-aside .box-calendar caption {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
  margin-bottom: var(--space-2);
}
body.theme-odyssey-custom .area-aside .box-calendar th,
body.theme-odyssey-custom .area-aside .box-calendar td {
  padding: var(--space-1);
  text-align: center;
  font-weight: var(--weight-medium);
}
body.theme-odyssey-custom .area-aside .box-calendar th {
  color: var(--color-muted);
}
body.theme-odyssey-custom .area-aside .box-calendar a {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .area-aside .box-calendar a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ─ 페북·트윗 플러그인 박스 ─ */
body.theme-odyssey-custom .area-aside .box-plugins .recent-tabs {
  margin-bottom: var(--space-3);
}


/* ════════════════════════════════════════════════════════════════════
   27. Stage 2 모바일 보정 (~768px)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 카테고리/검색 페이지 헤더 폰트 축소 */
  body.theme-odyssey-custom:not(.is-index-page) .area-common .title-search .archives {
    font-size: var(--text-mobile-section);
  }
  body.theme-odyssey-custom:not(.is-index-page) .area-common .title-search > span {
    font-size: var(--text-lg);
  }

  /* 페이징 — 박스/구분선 제거된 형태, 위 여백만 모바일 토큰으로 분기 */
  body.theme-odyssey-custom .paging {
    gap: var(--space-1);
    margin-top: var(--paging-margin-top-mobile);
  }
  body.theme-odyssey-custom .paging-link,
  body.theme-odyssey-custom .paging-arrow,
  body.theme-odyssey-custom .paging-num strong {
    min-width: var(--paging-min-w-mobile);
    height: var(--paging-h-mobile);
    font-size: var(--text-base);
  }

  /* 태그 페이지 */
  body.theme-odyssey-custom .tag-page {
    padding: var(--space-7) var(--space-6);
  }
  body.theme-odyssey-custom .tag-page-title {
    font-size: var(--text-mobile-section);
    margin-bottom: var(--space-5);
  }

  /* 위치 로그 */
  body.theme-odyssey-custom .local-log {
    padding: var(--card-pad-mobile);
  }
  body.theme-odyssey-custom .local-log-title {
    font-size: var(--text-mobile-section);
  }

  /* 보호글 박스 */
  body.theme-odyssey-custom .protected-box {
    padding: var(--space-9) var(--space-5);
  }
  body.theme-odyssey-custom .protected-text {
    font-size: var(--text-xl);
  }
}


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