/* TrendPress — GeneratePress 커스텀 CSS ("Data Sheet" 디자인 시스템)
 * 배포: wp-content/mu-plugins/trendpress-style.css (mu-plugin이 로드)
 * 기준 문서: MASTER-DESIGN-PLAN.md — Phase 2 (토큰·타이포·거터)
 *
 * Pretendard는 mu-plugin(trendpress-site.php)이 <link>로 병렬 로드한다.
 * @import는 HTML→이 파일→폰트CSS→woff2 3단 직렬 체인을 만들어 LCP를 깎으므로 금지.
 *
 * 남겨둔 것(Phase 3에서 MU 래퍼와 함께 배포):
 *   - 표 display:block (시맨틱 복구는 figure.tp-table 래퍼와 한 몸)
 *   - 요약 blockquote 다크 패널화, FAQ 카드화
 * .tp-* 선택자는 Phase 3의 mu-plugin 출력용 선제 정의다 — 지금은 매치되지 않는다.
 */

/* ══ 1. 디자인 토큰 ═══════════════════════════════════════════
   대비비는 전부 WCAG 상대휘도 공식 계산값. */
:root {
  /* ── 표면 ── */
  --tp-canvas:        #F6F7F9;  /* 페이지 배경 */
  --tp-surface:       #FFFFFF;  /* 카드·본문 배경 */
  --tp-surface-sunk:  #F3F4F6;  /* 표 헤더, 인라인 코드 */
  --tp-panel:         #101828;  /* 다크 데이터 패널 = thumbnail.py BG */
  --tp-panel-2:       #1A2438;  /* 패널 내부 카드 = infographic.py CARD_BG */

  /* ── 잉크 (흰 배경 기준 대비비) ── */
  --tp-ink-900:       #0B1220;  /* 제목            18.72:1 */
  --tp-ink-700:       #1F2937;  /* 본문            14.68:1 */
  --tp-ink-500:       #4B5563;  /* 보조 텍스트      7.56:1 */
  --tp-ink-400:       #6B7280;  /* 캡션(하한)       4.83:1 */
  --tp-ink-inv:       #F5F7FA;  /* 패널 위 텍스트   16.54:1 on #101828 */
  --tp-ink-inv-sub:   #94A3B8;  /* 패널 위 보조      6.92:1 on #101828 */

  /* ── 액센트 ── */
  --tp-accent:        #0F766E;  /* 링크·강조 텍스트  5.47:1 (흰 배경) */
  --tp-accent-hover:  #115E56;  /* hover — 본문색과 구분되는 어두운 청록 */
  --tp-accent-wash:   #ECFDF5;  /* 칩·요약 배경 (#0F766E 위 5.20:1) */
  --tp-mint:          #5EEAD4;  /* 다크 패널 전용   12.00:1 on #101828
                                   ※ 흰 배경 1.48:1 — 텍스트·흰 배경 장식 금지.
                                   thumbnail.py ACCENT와 동일값으로 통일. */
  --tp-warn:          #9A3412;  /* 시효성 배지      6.88:1 on #FFF7ED */
  --tp-warn-wash:     #FFF7ED;

  /* ── 선 ── */
  --tp-line:          #E5E7EB;  /* 헤어라인(장식) */
  --tp-line-strong:   #D1D5DB;  /* 표 구분선 */
  --tp-line-ui:       #8A94A6;  /* 입력·포커스 경계 3.06:1 — WCAG 1.4.11 */

  /* ── 타이포 스케일 (root 16px, 공비 ≈1.28) ── */
  --tp-fs-xs:    0.8125rem;  /* 13px 캡션·메타 */
  --tp-fs-sm:    0.9375rem;  /* 15px 표 셀·칩 */
  --tp-fs-base:  1.0625rem;  /* 17px 본문 */
  --tp-fs-md:    1.1875rem;  /* 19px 리드·요약 */
  --tp-fs-lg:    1.3750rem;  /* 22px h3   (본문 대비 1.29배) */
  --tp-fs-xl:    1.7500rem;  /* 28px h2 */
  --tp-fs-2xl:   2.2500rem;  /* 36px h1 */

  --tp-lh-body:   1.8;   /* 한글 본문 (규격 1.5~1.8 상한) */
  --tp-lh-tight:  1.3;   /* 헤딩 */
  --tp-lh-ui:     1.55;  /* 표·칩·메타 */
  --tp-ls-head:  -0.02em;
  --tp-fw-body:  400;
  --tp-fw-bold:  700;    /* 웨이트는 400·700 두 종 고정 —
                            600을 쓰면 폰트 조각 15개(≈195KB)가 추가된다 */

  /* ── 간격 (4px 베이스) ── */
  --tp-sp-1: 0.25rem;  --tp-sp-2: 0.5rem;   --tp-sp-3: 0.75rem;
  --tp-sp-4: 1rem;     --tp-sp-5: 1.5rem;   --tp-sp-6: 2rem;
  --tp-sp-7: 3rem;     --tp-sp-8: 4rem;

  /* ── 폭 ── */
  --tp-w-page:    70rem;    /* 1120px 컨테이너 목표 */
  --tp-w-measure: 42rem;    /* 672px = 39.5 한글자 (권장 35~45자 중앙) */
  --tp-w-wide:    56rem;    /* 896px — 표·인포그래픽 브레이크아웃 (사이드바 폐지 후) */
  --tp-w-rail:    13.75rem; /* 220px — 목차 레일 (Phase 4) */
  --tp-gutter:    clamp(1rem, 4vw, 2.5rem);

  /* ── 라운드·그림자 ── */
  --tp-r-sm: 6px;  --tp-r-md: 10px;  --tp-r-lg: 16px;  --tp-r-full: 999px;
  --tp-sh-1: 0 1px 2px rgba(11,18,32,.06), 0 1px 1px rgba(11,18,32,.04);
  --tp-sh-2: 0 6px 24px rgba(11,18,32,.10);

  /* GeneratePress 변수 덮어쓰기 — 테마 인라인 CSS보다 뒤에 로드되므로 유효 */
  --contrast:   var(--tp-ink-700);
  --contrast-2: var(--tp-ink-500);
  --contrast-3: var(--tp-line-ui);
  --base-2:     var(--tp-canvas);
  --base-3:     var(--tp-surface);
  --accent:     var(--tp-accent);
}

@media (max-width: 768px) {
  :root {
    --tp-fs-base: 1rem;      /* 16px */
    --tp-fs-md:   1.125rem;  /* 18px */
    --tp-fs-lg:   1.125rem;  /* 18px h3 */
    --tp-fs-xl:   1.375rem;  /* 22px h2 */
    --tp-fs-2xl:  1.75rem;   /* 28px h1 */
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ 2. 기본 타이포그래피 ═════════════════════════════════════ */
body, button, input, select, textarea {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Malgun Gothic', 'Noto Sans KR', 'Segoe UI', system-ui, sans-serif;
  word-break: keep-all;       /* 한글 어절 중간 끊김 방지 */
  overflow-wrap: break-word;  /* 긴 URL은 예외적으로 줄바꿈 */
  -webkit-text-size-adjust: 100%;
}
body {
  font-size: var(--tp-fs-base);   /* 테마의 px 고정(17px) 해제 → WCAG 1.4.4 */
}

.entry-content p,
.entry-content li {
  line-height: var(--tp-lh-body);   /* 한글 받침 고려 (기본 1.5는 답답함) */
}
/* 행간 사각지대 보강 — FAQ 답변·댓글·위젯도 한글 행간 확보 */
.comment-content p,
.widget,
.entry-content dd { line-height: 1.75; }

/* 숫자가 결론인 블로그다. 표·수치는 자릿수 정렬을 강제한다. */
.entry-content table, .tp-summary, .tp-stat, .tp-timeline time {
  font-variant-numeric: tabular-nums;
}

/* ══ 3. 링크·상호작용 ════════════════════════════════════════ */
a {
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
}
a:hover { color: var(--tp-accent-hover); }   /* 본문색과 구분 — 색상 정체성 유지 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--tp-accent);       /* 5.47:1 — WCAG 2.4.7 */
  outline-offset: 2px;
  border-radius: var(--tp-r-sm);
}
input, select, textarea { border: 1px solid var(--tp-line-ui); }  /* 3.06:1 — WCAG 1.4.11 */
::selection { background: var(--tp-accent-wash); color: var(--tp-ink-900); }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 1.75rem; }      /* 앵커 이동 시 상단 여유 — 고정 헤더 없음 */

/* ══ 4. 헤딩 스케일 ══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--tp-fw-bold);   /* 테마 기본 400 → 위계 확보 */
  letter-spacing: var(--tp-ls-head);
  line-height: var(--tp-lh-tight);
  color: var(--tp-ink-900);
}

.entry-title { font-size: var(--tp-fs-2xl); }
.entry-title a { color: var(--tp-ink-900); }

.entry-content h2 {
  font-size: var(--tp-fs-xl);
  margin-top: var(--tp-sp-7);
  padding-left: 0.7rem;
  border-left: 3px solid var(--tp-accent);   /* 밝은 지면 장식은 액센트로 —
                                                민트(#5EEAD4)는 다크 패널 전용 */
}
.entry-content h3 {
  font-size: var(--tp-fs-lg);      /* 19.2px → 22px: 본문 대비 1.29배로 위계 복원 */
  margin-top: var(--tp-sp-6);
}
.entry-content h2, .entry-content h3 { scroll-margin-top: 1.75rem; }

/* 리드 문단(본문 첫 문단)은 반 단계 크게 — 목차가 첫 자식이므로 first-of-type */
.single .entry-content > p:first-of-type { font-size: var(--tp-fs-md); }

/* ══ 5. 본문 글줄 폭 (measure) — 중앙 정렬 컬럼 ══════════════
   사이드바 폐지로 콘텐츠 영역이 넓어졌으므로 본문·제목·하단 신뢰 스택을
   42rem(672px = 39.5 한글자) 컬럼으로 중앙 배치한다.
   표·이미지도 같은 컬럼에 정렬(3~4열 비교표는 672px로 충분). */
.single .tp-crumbs,
.single .entry-header,
.single .entry-content,
.single .tp-related,
.single .tp-author,
.single .post-navigation,
.single footer.entry-meta,
.single .comments-area > *,   /* 댓글은 별도 박스 — 박스가 아니라 내용물만 컬럼에 맞춘다 */
.page .entry-header,
.page .entry-content {
  max-width: var(--tp-w-measure);
  margin-inline: auto;
}

/* 빵부스러기 — 글 최상단 현재 위치 */
.tp-crumbs {
  font-size: var(--tp-fs-xs);
  color: var(--tp-ink-400);
  margin-bottom: var(--tp-sp-3);
}
.tp-crumbs a { color: var(--tp-ink-500); text-decoration: none; }
.tp-crumbs a:hover { color: var(--tp-accent); text-decoration: underline; }

/* 테마 기본 목록 들여쓰기 3em(51px)은 모바일 본문 폭의 16%를 잠식한다 */
.entry-content ul,
.entry-content ol { margin-left: 1.6em; }

/* ══ 6. 거터 — 769~1200px 좌측 여백 0 교정 (P1-6) ════════════ */
@media (min-width: 769px) {
  .site-content { padding-inline: var(--tp-gutter); }
  /* ≥1200px에서는 1200px 컨테이너 − 거터 80px ≈ --tp-w-page(1120px)와 일치 */
}

/* ══ 7. 표: figure.tp-table 래퍼 + 시맨틱 복구 ═══════════════
   mu-plugin이 <figure class="tp-table" role="region" tabindex="0">로 감싼다.
   스크롤은 래퍼가 담당하고 table은 display:table로 복구한다(WCAG 1.3.1/2.1.1). */
.tp-table {
  margin: var(--tp-sp-6) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-md);

  /* Edge-Fading Scroll Blur — 덮개는 콘텐츠와 함께 흐르고(local) 그림자는
     상자에 고정(scroll)돼 양끝에 닿으면 저절로 사라진다. JS 불필요. */
  background-image:
    linear-gradient(to right, var(--tp-surface) 45%, rgba(255, 255, 255, 0)),
    linear-gradient(to left,  var(--tp-surface) 45%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0    50%, rgba(11, 18, 32, 0.18), rgba(11, 18, 32, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(11, 18, 32, 0.18), rgba(11, 18, 32, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 2.6rem 100%, 2.6rem 100%, 0.95rem 100%, 0.95rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.entry-content table {
  display: table;              /* 시맨틱 복구 — 래퍼가 있으므로 안전 */
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--tp-fs-sm);
  line-height: var(--tp-lh-ui);
}
.entry-content table th,
.entry-content table td {
  min-width: 7.5rem;           /* 좁은 화면에서 래퍼 가로 스크롤 유도 */
  padding: var(--tp-sp-3) var(--tp-sp-4);
  border-bottom: 1px solid var(--tp-line);
  text-align: left;
  vertical-align: top;
}
.entry-content table th {
  background: var(--tp-surface-sunk);
  color: var(--tp-ink-900);
  font-weight: var(--tp-fw-bold);
  border-bottom: 2px solid var(--tp-line-strong);
}
.entry-content table tbody tr:last-child td { border-bottom: 0; }

/* ══ 8. 인용문 ═══════════════════════════════════════════════
   한글 폰트에는 이탤릭 자형이 없어 합성 기울임을 차단한다. */
.entry-content blockquote {
  font-style: normal;
  font-size: 1.05em;
  line-height: 1.75;
  border-left: 3px solid var(--tp-accent);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: var(--tp-sp-6) 0;
  color: var(--tp-ink-900);
}

/* 요약 박스 — 본문 첫 blockquote("한 줄 요약")를 다크 데이터 패널로 승격.
   밝은 지면 위 유일한 다크 텍스트 블록 = "결론이 여기 있다"는 One Thing 신호.
   본문 중간의 일반 인용은 위의 기본 모양(세로 바)을 유지한다. */
.single .entry-content > blockquote:first-of-type {
  background: var(--tp-panel);
  color: var(--tp-ink-inv);
  border: 0;
  border-left: 4px solid var(--tp-mint);   /* 민트는 다크 패널 위에서만 — 12.00:1 */
  border-radius: var(--tp-r-md);
  padding: var(--tp-sp-5) var(--tp-sp-5) var(--tp-sp-5) var(--tp-sp-6);
  font-size: var(--tp-fs-md);
  line-height: 1.65;
}
.single .entry-content > blockquote:first-of-type strong { color: var(--tp-mint); }
.single .entry-content > blockquote:first-of-type a { color: var(--tp-mint); }
.single .entry-content > blockquote:first-of-type p:last-child { margin-bottom: 0; }

/* ══ 9. FAQ 카드 (:has() 조판 — 미지원 브라우저는 문단 모양 유지) ═ */
.entry-content p:has(> strong:first-child + br) {
  background: var(--tp-surface);
  border: 1px solid var(--tp-line);
  border-left: 3px solid var(--tp-accent);
  border-radius: var(--tp-r-md);
  padding: var(--tp-sp-4) var(--tp-sp-5);
  margin-bottom: var(--tp-sp-4);
  color: var(--tp-ink-700);
}
.entry-content p:has(> strong:first-child + br) > strong:first-child {
  display: block;
  font-size: var(--tp-fs-md);
  line-height: var(--tp-lh-tight);
  color: var(--tp-ink-900);
  margin-bottom: var(--tp-sp-2);
}
.entry-content p:has(> strong:first-child + br) > strong:first-child + br {
  display: none;
}

/* ══ 10. 이미지와 캡션 ═══════════════════════════════════════ */
.entry-content img { border-radius: var(--tp-r-md); }
.entry-content p > img { display: block; }

.entry-content p > em:only-child {
  display: block;
  font-style: normal;
  font-size: var(--tp-fs-xs);
  color: var(--tp-ink-400);
  text-align: center;
  margin-top: -1.1rem;
}
.entry-content p > em:only-child a { color: inherit; }

/* 대표 이미지 숨김 폴백 — mu-plugin 부재 환경 대비 */
.single .featured-image,
.single .post-image { display: none; }

/* ══ 11. 홈·아카이브 벤토 그리드 ═════════════════════════════
   2열 카드 그리드 + 첫 글 히어로(전폭). Subgrid로 카드들의
   이미지/칩/제목/요약 시작선을 맞추고, 미지원 브라우저는 일반 grid 폴백.
   375px에서는 minmax(20rem, 1fr)이 자동으로 1열이 된다. */
.blog .site-main,
.archive .site-main,
.search .site-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--tp-sp-5);
  align-items: start;
}
/* 아카이브 제목·페이지네이션·안내문 등 카드가 아닌 것은 전폭 */
.blog .site-main > *:not(.post),
.archive .site-main > *:not(.post),
.search .site-main > *:not(.post) { grid-column: 1 / -1; }

.blog .post, .archive .post, .search .post {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  margin: 0;
  background: var(--tp-surface);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-lg);
  overflow: clip;
  transition: border-color .15s, box-shadow .15s;
}
@supports (grid-template-rows: subgrid) {
  .blog .post, .archive .post, .search .post {
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}
.blog .post:hover, .archive .post:hover, .search .post:hover {
  border-color: var(--tp-line-ui);
  box-shadow: var(--tp-sh-1);
}
/* GP 래퍼를 그리드에서 투명화 — 카드 내부 요소가 직접 행에 배치된다 */
.blog .inside-article,
.archive .inside-article,
.search .inside-article { display: contents; }

.blog .post-image, .archive .post-image, .search .post-image {
  grid-row: 1;
  margin: 0;
}
/* 인포그래픽 비율 편차 → contain + 다크 패널 배경(2표면 시스템) */
.blog .post-image img,
.archive .post-image img,
.search .post-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--tp-panel);
  border-radius: 0;          /* 카드 모서리는 article의 overflow:clip이 처리 */
  display: block;
}
.blog footer.entry-meta,
.archive footer.entry-meta,
.search footer.entry-meta {
  grid-row: 2;
  padding: var(--tp-sp-4) var(--tp-sp-5) 0;
  margin: 0;
}
.blog .entry-header,
.archive .entry-header,
.search .entry-header {
  grid-row: 3;
  padding: 0 var(--tp-sp-5);
  margin: 0;
}
.blog .entry-title,
.archive .entry-title,
.search .entry-title {
  font-size: var(--tp-fs-lg);
  margin: var(--tp-sp-2) 0;
}
.blog .entry-summary,
.archive .entry-summary,
.search .entry-summary {
  grid-row: 4;
  padding: 0 var(--tp-sp-5) var(--tp-sp-5);
  margin: 0;
}
.blog .entry-summary p,
.archive .entry-summary p,
.search .entry-summary p {
  line-height: 1.75;
  color: var(--tp-ink-500);
  font-size: var(--tp-fs-sm);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 요약 2줄 클램프 — 카드 높이 리듬 유지 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 히어로 — 첫 글은 전폭 카드 + 제목 한 단계 크게 */
.blog .site-main > .post:first-of-type { grid-column: 1 / -1; }
.blog .site-main > .post:first-of-type .entry-title { font-size: var(--tp-fs-xl); }

/* 카테고리 칩 — 터치 타깃 28px (WCAG 2.5.8) */
.blog .cat-links, .archive .cat-links, .search .cat-links {
  display: inline-flex;
  margin-bottom: var(--tp-sp-2);
}
.blog .cat-links .gp-icon, .archive .cat-links .gp-icon, .search .cat-links .gp-icon {
  display: none;
}
.blog .cat-links a, .archive .cat-links a, .search .cat-links a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--tp-sp-1) var(--tp-sp-3);
  border-radius: var(--tp-r-full);
  background: var(--tp-accent-wash);
  color: var(--tp-accent);
  font-size: var(--tp-fs-xs);
  font-weight: var(--tp-fw-bold);
  line-height: 1.4;
  text-decoration: none;
}
.blog .cat-links a:hover, .archive .cat-links a:hover, .search .cat-links a:hover {
  background: var(--tp-accent);
  color: #fff;
}

/* One Thing — 목록 카드에서는 날짜·카테고리만 남긴다 */
.blog .byline,      .archive .byline,      .search .byline,
.blog .tags-links,  .archive .tags-links,  .search .tags-links,
.blog .comments-link, .archive .comments-link, .search .comments-link {
  display: none;
}

/* ══ 12. 페이지네이션 (선제 정의 — 글 10건 초과 시 노출) ═════ */
.paging-navigation {
  display: flex;
  justify-content: center;
  gap: var(--tp-sp-2);
  padding: var(--tp-sp-6) 0;
  background: transparent;
}
.paging-navigation .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;              /* 44px 터치 타깃 */
  border-radius: var(--tp-r-md);
  border: 1px solid var(--tp-line);
  background: var(--tp-surface);
  color: var(--tp-ink-700);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.paging-navigation .page-numbers.current {
  background: var(--tp-accent);
  border-color: var(--tp-accent);
  color: #fff;                       /* 5.47:1 */
}
.paging-navigation .page-numbers:hover { border-color: var(--tp-line-ui); }

/* ══ 13. 코드블록 (선제 정의 — 기술 글 대비) ═════════════════
   다크 패널과 동일 톤: "다크 면 = 코드·데이터"라는 일관된 문법. */
.entry-content pre {
  background: var(--tp-panel);
  color: var(--tp-ink-inv);
  border-radius: var(--tp-r-md);
  padding: var(--tp-sp-4) var(--tp-sp-5);
  font-size: 0.9rem;
  line-height: 1.6;
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}
.entry-content :not(pre) > code {
  background: var(--tp-surface-sunk);
  color: #BE185D;                    /* 흰 배경 대비 6.6:1 */
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* ══ 14. Phase 3 컴포넌트 선제 정의 (.tp-* — mu-plugin 출력용) ═ */

/* 목차 */
.tp-toc {
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-md);
  padding: var(--tp-sp-4) var(--tp-sp-5);
  margin: var(--tp-sp-6) 0;
  background: var(--tp-surface);
  font-size: var(--tp-fs-sm);
}
.tp-toc__title {
  font-size: var(--tp-fs-sm);
  color: var(--tp-ink-500);
  letter-spacing: .04em;
  margin: 0 0 var(--tp-sp-2);
}
.tp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.tp-toc li {
  counter-increment: toc;
  padding: var(--tp-sp-2) 0;
  border-top: 1px solid var(--tp-line);
}
.tp-toc li:first-child { border-top: 0; }
.tp-toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--tp-ink-400);
  margin-right: var(--tp-sp-3);
  font-variant-numeric: tabular-nums;
}
.tp-toc a { color: var(--tp-ink-700); text-decoration: none; }
.tp-toc a:hover, .tp-toc a:focus-visible {
  color: var(--tp-accent);
  text-decoration: underline;
}
.tp-toc summary.tp-toc__title { cursor: pointer; }
.tp-toc details[open] > summary { margin-bottom: var(--tp-sp-2); }

/* 본문 첫 자식일 때 위쪽 여백 제거 */
.entry-content > .tp-toc:first-child { margin-top: 0; }

/* ≥1280px: 목차를 좌측 sticky 레일로 승격.
   흰 박스를 콘텐츠에 딱 맞게 줄인다: 패딩40 + 레일220 + 간격32 + 본문672 + 패딩40
   = 1004px(62.75rem). 본문 컬럼은 중앙 정렬 대신 레일 오른쪽에 좌측 정렬 —
   중앙 정렬을 유지하면 레일 없는 오른쪽에 224px 빈 여백이 남는다. */
@media (min-width: 1280px) {
  .single #page { max-width: 62.75rem; }
  .single .site-content { padding-inline: 0; }
  .single .tp-crumbs,
  .single .entry-header,
  .single .entry-content,
  .single .tp-related,
  .single .tp-author,
  .single .post-navigation,
  .single footer.entry-meta,
  .single .comments-area > * {
    margin-left: calc(var(--tp-w-rail) + var(--tp-sp-6));
    margin-right: 0;
  }
  .single .tp-toc {
    position: sticky;
    top: 2rem;               /* 고정 헤더 없음 — 상단에 바짝 따라온다 */
    float: left;
    width: var(--tp-w-rail);
    margin-left: calc(-1 * (var(--tp-w-rail) + var(--tp-sp-6)));
    margin-top: 0;
    padding: 12px 0;         /* 좌우 0 = 박스 패딩(40px) 선에 정렬.
                                상하 12px = 마스크 페이드 폭 — 첫 줄이 흐려지지 않게 */
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    border: 0;
    background: transparent;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent, #000 12px, #000 calc(100% - 12px), transparent);
            mask-image: linear-gradient(to bottom,
        transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
}

/* 타임라인 */
.tp-timeline {
  list-style: none;
  margin: var(--tp-sp-6) 0;
  padding-left: var(--tp-sp-5);
  border-left: 2px solid var(--tp-line);
}
.tp-timeline li { position: relative; padding: 0 0 var(--tp-sp-5) var(--tp-sp-4); }
.tp-timeline li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--tp-sp-5) - 5px);
  top: .45em;
  width: 10px;
  height: 10px;
  border-radius: var(--tp-r-full);
  background: var(--tp-accent);
  box-shadow: 0 0 0 3px var(--tp-surface);
}
.tp-timeline time {
  display: block;
  font-size: var(--tp-fs-xs);
  font-weight: var(--tp-fw-bold);
  color: var(--tp-accent);
}

/* 관련글 (함께 읽기) */
.tp-related { margin: var(--tp-sp-7) 0; }
.tp-related > h2 { font-size: var(--tp-fs-lg); border: 0; padding: 0; }
.tp-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--tp-sp-3);
}
.tp-related li a {
  display: block;
  padding: var(--tp-sp-4);
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-md);
  color: var(--tp-ink-900);
  text-decoration: none;
  font-size: var(--tp-fs-sm);
  line-height: var(--tp-lh-tight);
}
.tp-related li a:hover { border-color: var(--tp-accent); color: var(--tp-accent); }

/* 참고 자료 */
.tp-sources > h2 { font-size: var(--tp-fs-lg); }
.tp-sources ul { list-style: none; margin: 0; padding: 0; }
.tp-sources li { border-top: 1px solid var(--tp-line); padding: var(--tp-sp-3) 0; }
.tp-sources a {
  color: var(--tp-ink-700);
  text-decoration: none;
  font-size: var(--tp-fs-sm);
  line-height: var(--tp-lh-ui);
}
.tp-sources a::after { content: ' ↗'; color: var(--tp-ink-400); }
.tp-sources a:hover { color: var(--tp-accent); text-decoration: underline; }

/* 필진 프로필 카드 */
.tp-author {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--tp-sp-4);
  align-items: start;
  padding: var(--tp-sp-5);
  background: var(--tp-surface-sunk);
  border-radius: var(--tp-r-lg);
  margin: var(--tp-sp-7) 0;
}
.tp-author__img { border-radius: var(--tp-r-full); }
.tp-author__name {
  font-weight: var(--tp-fw-bold);
  color: var(--tp-ink-900);
  font-size: var(--tp-fs-base);
  margin: 0 0 var(--tp-sp-1);
}
.tp-author__name span { font-weight: 400; color: var(--tp-ink-500); font-size: var(--tp-fs-xs); }
.tp-author__bio {
  font-size: var(--tp-fs-sm);
  color: var(--tp-ink-500);
  line-height: var(--tp-lh-ui);
  margin: 0 0 var(--tp-sp-2);
}
.tp-author__meta {
  font-size: var(--tp-fs-xs);
  color: var(--tp-ink-400);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.tp-author--noimg { grid-template-columns: 1fr; }   /* 사이트 아이콘 부재 폴백 */

/* 푸터 정책 링크 */
.tp-footer-links { margin-bottom: var(--tp-sp-2); }
.tp-footer-links a { color: inherit; }

/* ══ 15. 모바일 ══════════════════════════════════════════════
   폰트 크기는 토큰 미디어쿼리, 카드 1열 전환은 minmax(20rem,1fr)이 처리한다.

   375px 기준: 테마 좌우 30px 패딩은 화면 폭의 16% — 20px으로 줄여 글줄 +6% */
@media (max-width: 480px) {
  .separate-containers .inside-article { padding: 20px; }
  .separate-containers .comments-area { padding: 20px; }
  .widget-area .widget { padding: 20px; }
  .entry-content ul,
  .entry-content ol { margin-left: 1.15em; }
}