/* tsl-tpl.css — 시스템 템플릿 화면(글 상세·목록·작성자·검색·404)에만 싣는다(생성). */
/* 템플릿 부품 — 글 상세·아카이브·작성자·검색·404가 쓰는 부품의 기본 모양(wp-site-kit 엔진).
   디자인 시스템 bundle.css에 같은 부품(.tsl-prose)이 들어가면 엔진은 이 파일을 싣지 않는다 — 그때부터 디자인 시스템이 맡는다.
   값은 표준 토큰 변수와 면 문맥 변수(--fg·--fg-2·--fg-muted·--rule·--panel·--accent-text)만 쓴다. bundle.css 뒤에 싣는다.
   부품: Byline(글 정보) · Article(글 2단) · Toc(목차) · Prose(글 본문) · Chips(태그·카테고리) · Share(공유) · PostNav(이전·다음 글)
        · Search(검색 폼) · Results(검색 결과) + 기존 부품의 변형(Person --author · Split --num/--profile · Figure --wide) */

/* ── Byline: 글 정보 한 줄 ── */
.tsl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 15px; line-height: 22px; color: var(--fg-muted); }
.tsl-byline__ava { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--paper-deep); color: var(--ink-muted); font-size: 15px; line-height: 1; font-weight: 800; }
.tsl-byline__name { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: 700; text-decoration: none; }
a.tsl-byline__name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.tsl-byline__name:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.tsl-byline__sep { opacity: .6; }
.tsl-byline__item { font-variant-numeric: tabular-nums; }

/* ── Figure·PostCard 변형: 이미지 비율 ── */
.tsl-figure--wide { --ratio: 16 / 9; }
.tsl-figure--square { --ratio: 1 / 1; }
.tsl-post__img--wide, .tsl-post__slot--wide { aspect-ratio: 16 / 9; }

/* ── Article: 본문 열 + 옆 열(목차). 마크업은 옆 열이 먼저 — 좁은 화면에서 목차가 본문 위에 온다 ── */
.tsl-article { display: flex; flex-direction: column; gap: var(--space-7); }
.tsl-article__main, .tsl-article__aside { min-width: 0; }
.tsl-article__main { max-width: 760px; }
@media (min-width: 1024px) {
  .tsl-article { display: grid; grid-template-columns: minmax(0, 760px) minmax(240px, 320px); grid-template-areas: "main aside"; gap: 80px; align-items: start; }
  .tsl-article--solo { grid-template-columns: minmax(0, 760px); grid-template-areas: "main"; }
  .tsl-article__main { grid-area: main; }
  .tsl-article__aside { grid-area: aside; position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; }
}

/* ── Toc: 목차 ── */
.tsl-toc { box-sizing: border-box; padding: 8px 24px; border-radius: var(--radius-2); background: var(--panel); color: var(--fg); }
.tsl-toc__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; margin: 0; list-style: none; cursor: pointer;   /* summary(사이트) 또는 p(캔버스 보드) */ font-size: 15px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; }
.tsl-toc__title::-webkit-details-marker { display: none; }
.tsl-toc__title::marker { content: ""; }
.tsl-toc__title .tsl-icon { transition: transform .15s ease; }
.tsl-toc[open] .tsl-toc__title .tsl-icon { transform: rotate(180deg); }
.tsl-toc__title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
.tsl-toc__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 4px 0 12px; list-style: none; counter-reset: tsl-toc; }
.tsl-toc__list a { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--fg-2); text-decoration: none; }
.tsl-toc__list a::before { counter-increment: tsl-toc; content: counter(tsl-toc); flex: none; min-width: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-text); }
.tsl-toc__list a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.tsl-toc__list a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
@media (min-width: 1024px) {
  .tsl-toc__title { cursor: default; pointer-events: none; }
  .tsl-toc__title .tsl-icon { display: none; }
}
@media (max-width: 1023px) { .tsl-toc__list a { padding: 11px 0; } }

/* ── Prose: 글 본문(편집기가 낸 마크업을 태그 기준으로 입힌다) ── */
.tsl-prose { --p-size: 17px; --p-lh: 30px; --p-h2: 26px; --p-h2-lh: 34px; --p-h3: 20px; --p-h3-lh: 28px; max-width: 760px; color: var(--fg); font-size: var(--p-size); line-height: var(--p-lh); }
.tsl-prose > * { margin: 0; }
.tsl-prose > * + * { margin-top: 20px; }
.tsl-prose h2 { margin-top: 56px; font-size: var(--p-h2); line-height: var(--p-h2-lh); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; scroll-margin-top: calc(var(--header-h) + 16px); }
.tsl-prose h3, .tsl-prose h4 { margin-top: 36px; font-size: var(--p-h3); line-height: var(--p-h3-lh); font-weight: 800; letter-spacing: -0.01em; }
.tsl-prose > :first-child { margin-top: 0; }
.tsl-prose h2 + *, .tsl-prose h3 + *, .tsl-prose h4 + * { margin-top: 14px; }
.tsl-prose strong, .tsl-prose b { font-weight: 700; }
.tsl-prose a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tsl-prose a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.tsl-prose a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.tsl-prose ul, .tsl-prose ol { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; }
.tsl-prose li { position: relative; padding-left: 24px; }
.tsl-prose ul > li::before { content: ""; position: absolute; left: 2px; top: calc(var(--p-lh) / 2 - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tsl-prose ol { counter-reset: tsl-ol; }
.tsl-prose ol > li { padding-left: 36px; counter-increment: tsl-ol; }
.tsl-prose ol > li::before { content: counter(tsl-ol); position: absolute; left: 0; top: calc(var(--p-lh) / 2 - 12px); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 13px; line-height: 1; font-weight: 800; }
.tsl-prose li > ul, .tsl-prose li > ol { margin-top: 10px; }
.tsl-prose code { padding: 2px 6px; border-radius: 6px; background: var(--panel); font-size: .9em; overflow-wrap: anywhere; }
.tsl-prose pre { overflow-x: auto; padding: 20px 24px; border-radius: var(--radius-2); background: var(--ink); color: var(--on-ink); font-size: 14px; line-height: 24px; }
.tsl-prose pre code { padding: 0; border-radius: 0; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.tsl-prose blockquote { position: relative; padding: 22px 28px 20px; border-radius: var(--radius-3); background: var(--panel); font-weight: 600; }
.tsl-prose blockquote::after { content: ""; position: absolute; left: 40px; bottom: -14px; width: 28px; height: 28px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tsl-prose blockquote + * { margin-top: 34px; }
.tsl-prose blockquote > * { margin: 0; }
.tsl-prose blockquote > * + * { margin-top: 12px; }
.tsl-prose figure { margin-inline: 0; }
.tsl-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-2); }
.tsl-prose figcaption { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--fg-muted); }
.tsl-prose .wp-block-table, .tsl-prose figure:has(> table) { overflow-x: auto; }
.tsl-prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 25px; }
.tsl-prose th, .tsl-prose td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.tsl-prose thead th { font-size: 14px; line-height: 22px; font-weight: 700; color: var(--fg-muted); border-bottom: 2px solid var(--fg); }
.tsl-prose hr { height: 1px; margin-block: 40px; border: 0; background: var(--rule); }
@media (max-width: 767px) {
  .tsl-prose { --p-size: 16px; --p-lh: 28px; --p-h2: 22px; --p-h2-lh: 30px; --p-h3: 18px; --p-h3-lh: 26px; }
  .tsl-prose h2 { margin-top: 44px; }
  .tsl-prose pre { padding: 16px 18px; }
}

/* ── Bubble 변형: 원고 라벨 「말풍선」 ── */
.tsl-bubble--say { max-width: 620px; }

/* ── Chips: 태그·카테고리(작은 선 알약 묶음) ── */
.tsl-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tsl-chips .tsl-btn[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ── Share: 공유 ── */
.tsl-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tsl-share__label { margin-right: 4px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--fg-muted); }

/* ── Person 변형: 글 아래 작성자 카드 ── */
.tsl-person--author { max-width: 880px; }
.tsl-person--author .tsl-person__role { min-height: 0; }
.tsl-person--author .tsl-person__talk { flex: none; min-height: 0; }
.tsl-person__name a { color: inherit; text-decoration: none; }
.tsl-person__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tsl-person__links { margin-top: 10px; }

/* ── Split 변형: 큰 숫자 · 작성자 첫 화면 ── */
.tsl-split--num, .tsl-split--profile { align-items: center; }
@media (min-width: 1024px) { .tsl-split--profile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .tsl-split--num > :last-child { order: -1; } }

/* ── PostNav: 이전·다음 글 ── */
.tsl-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); max-width: 880px; }
.tsl-postnav__a { display: flex; flex-direction: column; gap: var(--space-2); box-sizing: border-box; min-width: 0; padding: 24px 28px; border-radius: var(--radius-2); background: var(--panel); color: var(--fg); text-decoration: none; }
.tsl-postnav__a--next { grid-column: 2; align-items: flex-end; text-align: right; }
.tsl-postnav__k { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--accent-text); }
.tsl-postnav__a--prev .tsl-icon { transform: rotate(180deg); }
.tsl-postnav__t { font-size: 18px; line-height: 27px; font-weight: 800; letter-spacing: -0.01em; text-wrap: pretty; }
.tsl-postnav__a:hover .tsl-postnav__t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tsl-postnav__a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 767px) {
  .tsl-postnav { grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap-m); }
  .tsl-postnav__a { padding: 20px 22px; }
  .tsl-postnav__a--next { grid-column: auto; }
}

/* ── Search: 검색 폼 ── */
.tsl-search { display: flex; align-items: center; gap: var(--space-3); max-width: 640px; margin: 0; }
.tsl-search .tsl-input { flex: 1; min-width: 0; padding-inline: 22px; border-radius: var(--radius-full); }
.tsl-search .tsl-btn { flex: none; }

/* ── Results: 검색 결과 ── */
.tsl-results { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--fg); }
.tsl-result { border-bottom: 1px solid var(--rule); }
.tsl-result__a { display: flex; flex-direction: column; gap: var(--space-2); padding: 24px 0; color: var(--fg); text-decoration: none; }
.tsl-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 14px; line-height: 20px; color: var(--fg-muted); }
.tsl-result__title { margin: 0; font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; text-wrap: pretty; }
.tsl-result__a:hover .tsl-result__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tsl-result__excerpt { margin: 0; max-width: 760px; font-size: 16px; line-height: 27px; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tsl-result__a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
@media (max-width: 767px) { .tsl-result__title { font-size: 19px; line-height: 27px; } }

@media (prefers-reduced-motion: reduce) { .tsl-toc__title .tsl-icon { transition: none; } }

/* 템플릿 유틸 클래스(생성) */
.tsl-u-b5a98e { display:flex; flex-direction:column; gap:20px }
.tsl-u-031ffe { display:flex; flex-direction:column; gap:32px }