/* ═══════════════════════════════════════════════════════════
   블로그 목록 — 메인(tolerancelab.net) 전용
   `mu-plugins/gdt-blog-list.php` 가 **블로그 화면에서만** 불러온다.
   커뮤니티·강의·마이페이지에는 한 줄도 안 나간다.

   ⚠️ **공용 모양을 여기 다시 적지 않는다.**
      칩 모양(`@칩모양`)·머리(`@머리`)·토큰(§0)·푸터(§10)는 메인의 추가 CSS
      (`courses.css`)에 **이미 있고 그대로 적용된다.** 여기 있는 것은
        · 블로그 목록의 **자리**(2단·칩 줄이 어디에 서는가)
        · 블로그에만 있는 것(편수 배지·글 본문 폭·쪽 이동)
      뿐이다. 같은 규칙을 두 파일에 적으면 한쪽만 고쳐진다.

   ⚠️ **기준 폭은 960/961 이다** — 커뮤니티가 실측으로 정한 값과 같다
      (`courses.css` 의 `@칩자리` 주석: 768 로 잡았다가 769~960 에 틈이 났다).
      블로그가 다른 숫자를 쓰면 한 사이트 안에서 두 번 꺾인다.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   1. 2단 짜임 (목록과 글 보기가 같이 쓴다)
   마크업 차례는 제목 → 분류 → 본문. 넓은 화면에서 분류가 왼쪽에 서는 것은
   격자 이름칸이 한다 — 마크업을 뒤집지 않는다.
   폭·여백은 커뮤니티와 같은 값이다(왼쪽 칸 260 · 좌우 30).
   ─────────────────────────────────────────── */
.tl-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--tl-px, 30px);   /* 2026-10-06: 30px 고정 → 쪽 여백 토큰(courses.css, 폰 16px) */
}

/* ⚠️ 넓은 화면에서는 **쪽 여백을 걷는다**(2026-10-02). 커뮤니티 목록은 테마 상자
   (1200px) 가장자리에 바로 붙어 1440 에서 사이드바가 x=120 에 선다. 블로그는 위
   30px 때문에 150 에서 시작해 **한 줄이 통째로 30px 밀려** 있었다(본문도 380 ↔ 410).
   좁은 화면은 그 30px 이 **바깥 여백** 노릇을 하므로 그대로 둔다. */
@media (min-width: 961px) {
  .tl-two { padding-inline: 0; }
}
.tl-two__body { min-width: 0; }
.tl-two__intro:empty { display: none; }

@media (min-width: 961px) {
  .tl-two {
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas: "nav intro" "nav body";
    /* ⚠️ 두 줄 모두 `auto` 면 왼쪽 목록(펼친 글 목록)이 머리+본문보다 길 때 **남는 높이를 두 줄이 나눠 가진다**
       — 펼친 글이 많은 분류일수록 머리 칸이 늘어나 「제안순」 줄이 아래로 밀렸다(2026-10-21, 시작 전에 ↔ 기본).
       머리 줄은 제 내용만큼, 남는 높이는 모두 본문 줄이 가진다. */
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .tl-two__intro { grid-area: intro; }
  /* 글 보기는 머리 칸을 안 쓴다(제목이 카드 안으로 들어갔다) — 격자가 한 줄이 된다 */
  body.tl-blogpost .tl-two { grid-template-areas: "nav body"; grid-template-rows: auto; }

  /* ⚠️ **본문 칸을 좌우 30px 들인다**(2026-10-02). 커뮤니티는 콘텐츠 영역(940) 안에서
     `body.bbpress .entry-content { padding-inline: var(--tl-px) }` 로 **880** 이 되고,
     그만큼 사이드바와 **30px 틈**이 생긴다(`courses.css` 614줄, `--tl-px: 30px`).
     블로그는 그 들임이 없어 본문이 940 을 꽉 채우고 사이드바에 **딱 붙어** 있었다
     (실측 2026-10-02: 피드·카드 l380 w940, 틈 0).

     ⚠️ 머리 칸에도 같이 준다 — 안 그러면 제목만 380 에 서고 카드는 410 에서 시작해
     **블로그 안에서도 어긋난다.** 커뮤니티는 머리와 목록이 같은 `.entry-content`
     안이라 함께 들어간다.
     ⚠️ 분류 칸(`nav`)에는 **주지 않는다** — 사이드바는 120 에서 시작해야 한다.
     ⚠️ 이중 들임이 아니다 — `.tl-postcard`·`.tl-recent`·댓글은 이 칸 **안**이라 한 번만
     들어간다. 커뮤니티도 `.tl-td`·`.tl-recent` 가 들인 `.entry-content` 안에 있다. */
  .tl-two__intro,
  .tl-two__body { padding-inline: var(--tl-px, 30px); }

  /* ③ 머리의 「전체 글」을 **왼쪽 목록의 「전체 글」과 같은 줄**에 세운다(2026-10-02).
     둘 다 같은 격자의 첫 줄에서 시작하는데, 왼쪽은 목록 상자가 12px 내려앉고 항목
     안쪽 여백이 9px 더 있어 **글자가 26px 아래**에서 시작했다(실측: 머리 글자 y=120,
     항목 글자 y=145.8). 상자끼리 맞추면(12px) 글자는 여전히 14px 어긋나므로
     **글자 윗선**을 맞춘다.
     ⚠️ 글 보기(`body.tl-blogpost`)는 머리 칸을 안 쓰므로 빼 둔다.
     ⚠️ 좁은 화면은 목록이 위아래로 서므로 줄을 맞출 상대가 없다 — 이 미디어쿼리
     안에만 둔다. */
  body:not(.tl-blogpost) .tl-two__intro { padding-top: 26px; }
  /* ⚠️ 글 보기에서는 분류가 `.tl-chipfoot` 에 **감싸여** 온다(글 끝 차림 때문).
     그래서 격자 항목이 `.tl-catnav` 가 아니라 `.tl-chipfoot` 이다 — 둘 다 적지 않으면
     글 화면에서만 왼쪽 칸이 제자리를 못 찾는다(2026-09-30 실측: left=0 으로 떨어졌다). */
  /* ⚠️ `courses.css` 의 `@칩자리` 가 `.tl-chipfoot { display: none }` 을 걸어 둔다
     (커뮤니티는 넓은 화면에 왼쪽 목록이 늘 있어 「다른 게시판 보기」가 할 말이 없다).
     블로그는 그 상자가 **왼쪽 칸 자체**라 되살려야 한다. */
  /* ⚠️ 왼쪽 칸에 설 수 있는 것이 **셋**이다 — 세로 목록(`.tl-blognav`), 칩 줄
     (`.tl-catnav`, 좁은 화면용이지만 격자에는 올라온다), 글 끝 차림(`.tl-chipfoot`),
     (검색 폼은 **세로 목록 안쪽**에 넣었다 — 아래 참고).
     하나라도 빠뜨리면 그것만 칸을 못 받아 **자동 배치로 흘러간다** — 두 번 겪었다:
       · `.tl-blognav` 를 빠뜨려 제목과 목록 사이가 비었다(2026-10-02)
       · 검색 폼을 빠뜨려 검색창이 사이드바가 아니라 **본문 아래**(y≈1076)에 혼자 섰다
         (2026-10-02, 사람이 화면에서 짚음). `display` 만 주고 자리를 안 줘서다.
         ⚠️ 그런데 이 목록에 **더하기만 하면 안 된다** — 같은 이름칸에 둘을 넣으면
         세로로 쌓이지 않고 **겹친다**(목록 위에 검색이 얹혔다). 그래서 검색 폼은
         세로 목록 `<nav>` **안쪽**으로 넣었다. 한 칸에는 요소 하나다.
     ⚠️ **왼쪽 칸에 새 요소를 넣을 때는 이 목록에 반드시 더한다.** */
  .tl-two > .tl-blognav,
  .tl-two > .tl-catnav,
  .tl-two > .tl-chipfoot { grid-area: nav; }
  .tl-two > .tl-chipfoot { display: block; }
  .tl-two__body { grid-area: body; }
}

/* ───────────────────────────────────────────
   2. 분류 이동 — 넓은 화면(≥961): 왼쪽 세로 목록
   ⚠️ 여기는 **courses.css 의 `@칩모양`·`@칩자리` 를 되돌리는 자리**다.
      · `@칩자리` 가 `.tl-chiprow { display: none }` 을 **조건 없이** 건다
        (커뮤니티는 넓은 화면에서 칩을 안 쓴다). 우리는 같은 요소를 세로 목록으로
        쓰므로 되살려야 한다 — `.tl-chiprow.tl-catnav` (0,2,0) 로 이긴다.
      · `@칩모양` 은 `@media` 없이 알약 모양을 못 박는다. 세로 목록으로 세우려면
        하나씩 푼다.
   ─────────────────────────────────────────── */
/* ⚠️ **모든 되돌림 규칙에 `.tl-two` 를 붙여 명시도를 올린다.**
   메인의 추가 CSS(`courses.css`)는 워드프레스가 `wp_head` **맨 끝**에 인라인으로 내므로
   우리 파일보다 **항상 나중**이다. 같은 힘(0,1,0)이면 언제나 저쪽이 이긴다 —
   2026-09-30 실측: `.tl-catnav__list { display:block }` 이 `@칩모양` 의
   `.tl-chiprow__list { display:flex; width:max-content }` 에 져서, 1440 에서도 칩이
   가로로 펼쳐져 제목 위를 덮었다. `.tl-two` 하나를 앞에 붙이면 (0,2,0) 이 되어 이긴다. */
/* ⚠️ **세로 목록의 생김새는 여기 없다**(2026-10-02 에 걷어냄). 블로그도 커뮤니티와
   **같은 마크업**(`.tl-board-nav-item` / `-icon` / `-label` / `-count`)을 내므로
   `courses.css` 의 `.tl-board-nav-*` 가 그대로 듣는다 — 칸 높이·여백·둥근 정도·
   글자 굵기·아이콘 크기·`+N` 색이 전부 저쪽 한 곳에서 나온다.

   전에는 칩 마크업 한 벌을 `.tl-catnav` 로 다시 칠해 세로로 세웠고, 그래서 값이 갈렸다
   (실측 2026-10-02: 여백 12/16 ↔ 9/11 · 둥근 정도 10 ↔ 8 · 아이콘 14 ↔ 18 ·
   굵기 600 ↔ 500). 카드에서 겪은 것과 같은 일이다(§23) — **지우는 것이 고치는 것**이다.

   여기 남은 것은 **자리**뿐이다: 어느 폭에서 어느 쪽을 보일지. */
@media (min-width: 961px) {
  /* 칩 줄을 감추고 세로 목록을 세운다 */
  .tl-two .tl-chiprow.tl-catnav { display: none; }
  .tl-two .tl-blognav { display: block; }

  /* ⚠️ 「전체 글」 아래 가는 줄은 **걷어냈다**(2026-10-02). 커뮤니티는 그 선을
     2026-09-20 에 일부러 뺐다 — 「항목마다 배경으로 구분이 되는데 선까지 있으면
     사이드바가 무거워진다」(`courses.css` §목록 주석). 블로그만 두면 어긋난다.
     곁들여: 그 규칙의 `margin`·`padding` 8+8 이 **항목 사이 간격까지** 벌리고
     있었다(실측 21px ↔ 커뮤니티 4px). 지우니 둘 다 4px 로 맞는다. */

  /* 검색 상자는 세로 목록 `<nav>` **안쪽**, 목록 바로 아래에 있다 — 커뮤니티와 같은
     차례다(실측: `gdt-bbp-community-nav.php` 399줄 목록 → 434줄 검색).
     생김새는 `courses.css` 의 `.tl-board-search` 가 낸다. 여기는 **위 여백**뿐.
     ⚠️ 맨 위로 올리고 싶으면 `.tl-blognav { display: flex; flex-direction: column }` 에
     `.tl-blogsearch { order: -1 }` 이면 된다 — 다만 커뮤니티와 차례가 갈린다. */
  .tl-two .tl-blogsearch { margin-top: var(--tl-5); }

  /* 글 끝 차림(가는 줄·머리말)은 넓은 화면에서 쓰지 않는다 — 왼쪽 칸에 서기 때문 */
  .tl-two .tl-chipfoot { margin-top: 0; padding-top: 0; border-top: 0; }
  .tl-two .tl-chipfoot__label { display: none; }
}

@media (max-width: 960px) {
  /* 좁은 화면은 칩 줄만 — 세로 목록도 검색 상자도 안 낸다(머리의 검색을 쓴다) */
  .tl-two .tl-blognav,
  .tl-two .tl-blogsearch { display: none; }
}

/* ───────────────────────────────────────────
   2-1. 바탕색 — 커뮤니티 목록과 같은 흰색
   `courses.css` 가 커뮤니티에 `body.bbpress { background:#fff }` 을 주고 있다(618줄).
   사이트 기본값은 `--tl-bg: #fdfdfb`(크림빛)이라, 그 규칙이 안 걸리는 블로그 화면만
   크림빛으로 남아 있었다. 같은 값을 **블로그 화면에만** 준다.
   ⚠️ `courses.css` 의 그 줄에 우리 선택자를 보태지 않는다 — 커뮤니티 세션 파일이다.
   ⚠️ `body` 만으로는 테마가 넣는 `body { background-color: … }` 와 힘이 같아 차례로
      갈린다. `tl-twocol` 은 `gdt-blog-list.php` 가 붙이는 우리 클래스다.
   ─────────────────────────────────────────── */
body.tl-twocol { background: #fff; }


/* ───────────────────────────────────────────
   3. 분류 이동 — 좁은 화면(≤960): 가로 칩 한 줄
   **모양은 여기 없다** — `courses.css` 의 `@칩모양` 이 낸다. 여기는 자리뿐이다.
   ⚠️ `@칩자리` 가 `.tl-chiprow { display:none }` 을 기본으로 걸어 두었으므로
      블로그 화면에서는 우리가 되살린다.
   ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .tl-two .tl-chiprow { display: block; min-width: 0; margin: 0 0 var(--tl-6); }
  .tl-two .tl-chipfoot { display: block; }

  /* ⚠️ **칩 줄에서는 글 수를 뺀다**(2026-10-01, 안 ㄱ — 커뮤니티에 맞춤).
     커뮤니티가 같은 판단을 적어 둔 까닭을 그대로 쓴다: 「수가 붙는 칩과 안 붙는
     칩이 섞이면 폭이 들쭉날쭉해」(`gdt-bbp-community-nav.php`). 블로그는 모든
     분류에 수가 있지만, 수를 달면 칩 하나가 길어져 390px 에서 보이는 칩이
     줄어든다. 수는 자리가 넉넉한 **세로 목록(≥961)** 에서만 보인다.
     지우지 않고 감추는 까닭 — 마크업은 한 벌이고, 세로 목록이 같은 요소를 쓴다. */
  .tl-two .tl-chip__count { display: none; }
}

/* 글 보기(좁은 화면)에서는 칩 줄을 **글 끝**으로 내린다.
   글은 이미 골라서 들어온 뒤라 읽기를 막지 않고, 다 읽은 뒤에 옮기는 자리다. */
@media (max-width: 960px) {
  body.tl-blogpost .tl-two { display: flex; flex-direction: column; }
  body.tl-blogpost .tl-two__intro { order: 1; }
  body.tl-blogpost .tl-two__body  { order: 2; }
  body.tl-blogpost .tl-chipfoot   { order: 3; }
  body.tl-blogpost .tl-catnav     { margin: 0; }
}

/* 커뮤니티에 맞춤 (2026-10-15, 커뮤니티세션-04 — 컴퓨터에서 나란히 놓고 보심).
   ① 목록 칩 줄 아래 — 769~960 에서 커뮤니티는 16(`courses.css` §960 `.tl-chiprow`), 블로그는 24 라
      정렬 줄·첫 카드가 7px 아래였다(실측 155/201 vs 148/194). 768 이하는 커뮤니티도 24(03 Phase 4)라 그대로.
   ② 글 보기 **위** 칩 줄(`.tl-catnav--top`, gdt-blog-list.php) — 커뮤니티 글 한 편의 머리 칩 줄과 같은
      자리·같은 아래 여백 16. 961 이상은 위 「② 넓은 화면」 블록의 `.tl-two .tl-chiprow.tl-catnav
      { display:none }` 이 감춘다 — 커뮤니티 글 한 편도 그 폭에서는 왼쪽 목록만 쓴다.
      ⚠️ 바로 위 `body.tl-blogpost .tl-catnav { margin:0 }`(0-2-1)을 이겨야 해서 0-3-1. */
/* (①은 커뮤니티세션-05 에서 걷었다 — 커뮤니티의 칩 줄 아래 24 가 휴대폰 보기와 함께 960 까지 넓어져
   769~960 에서도 블로그 24 와 같아졌다.) */
@media (max-width: 960px) {
  body.tl-blogpost .tl-two .tl-catnav--top { margin: 0 0 var(--tl-5); }
}

/* 글 보기 아래쪽 — 커뮤니티 글 한 편과 같은 값으로 (2026-10-15, 커뮤니티세션-04 · 선임님 빨간 표시 다섯).
   1000·1280 실측(블로그 → 커뮤니티):
     ① 글 카드 → 댓글 64 → 24 · ④ 댓글 → 이어서 읽기 64 → 24 — GP 댓글 틀(`.comments-area`)의 위아래
        안쪽 여백 40 이 카드 아래 24 에 더해졌다. 커뮤니티는 카드끼리 24 하나.
     ② 빈 상태 글 17px → 14px — 커뮤니티는 bbPress 틀의 글자 크기(14)를 물려받는다. 줄 높이도 같은 1.85,
        아래 여백은 GP 의 1.5em 이 따라와 21.
     ③ 쓰기 상자 179 → 140 — 워드프레스 댓글 폼의 `p.form-submit`(아래 25.5) · 남기기 `<input>`(아래 10,
        GP 의 위아래 10)이 도구 줄을 78px 로 키워 「자세히 쓰기」가 가운데로 내려앉았다. 커뮤니티는
        `.bbp-submit-wrapper { display: contents }` 로 단추를 도구 줄에 바로 세운다 — 같게.
        (블로그에는 사진 단추가 없다 — 그 자리는 비어 있다.)
     ⑤ 「이어서 읽기」 더보기 96 → 64, 세로 가운데. */
body.tl-blogpost .comments-area { padding-top: 0; padding-bottom: 0; }
body.tl-blogpost .tl-comments__empty { font-size: var(--tl-f-sm); line-height: 1.85; }
body.tl-blogpost #tl-comments .tl-qp-tools .form-submit { display: contents; }
body.tl-blogpost #tl-comments .tl-qp-tools input.tl-qp-submit { margin: 0; padding: 9px 20px; border: 0; }   /* GP 의 투명 1px 테두리까지 빼야 39 */
/* 글 보기 카드 윗선 — 961 이상에서 커뮤니티 글 한 편(46)과 같게(2026-10-15, 커뮤니티세션-05 「4」).
   커뮤니티 껍데기는 03 Phase 3 에서 블로그 **목록**의 20 + 26 에 맞췄는데 글 보기는 26 을 안 썼다(20 이었다).
   본문 칸에만 준다 — 왼쪽 칸(글 끝 차림)은 커뮤니티 사이드바처럼 그대로. */
@media (min-width: 961px) { body.tl-blogpost .tl-two__body { padding-top: 26px; } }
/* 961~1259 — 왼쪽 칸(분류 목록)이 창 왼쪽에 붙던 것(커뮤니티세션-05 「3 (가)」). 961 이상에서 `.tl-two`
   의 쪽 여백을 0 으로 둔 것(35행 — 「1440 에서 x=120 이 같게」)이 좁은 창에서는 왼쪽을 0 으로 만든다.
   커뮤니티 `#left-sidebar` 와 같은 식 — 창 가장자리에서 늘 30, 상자 바깥 여백이 모자란 만큼만. 1260 이상은 0(그대로). */
@media (min-width: 961px) { .tl-two { padding-left: max(0px, calc(var(--tl-px) - max(0px, (100vw - 1200px) / 2))); } }
@media (min-width: 601px) {
  /* 아래쪽 669행 근처 「이어서 읽기」 규칙(0-2-0)보다 앞에 있으므로 한 단계 높여(0-3-0) 이긴다 */
  .tl-two .tl-series .tl-series__more { min-height: 0; height: 64px; padding: 0; align-self: center; }
}

/* ───────────────────────────────────────────
   4. 목록 머리말 · 정렬 · 보기 전환
   ⚠️ 커뮤니티가 `courses.css` §7-4 에 같은 이름으로 이미 갖고 있다
      (`.tl-board-head__title`·`.tl-sort-select`·`.tl-view-mode-btn`).
      그래서 **여기서는 아무것도 적지 않는다.** 그대로 물려받는다.
   ─────────────────────────────────────────── */

/* ───────────────────────────────────────────
   5. 글 카드
   ⚠️ **거의 아무것도 적지 않는다**(2026-10-01 에 걷어냄). 블로그 카드는
      `courses.css` §7-3 의 `.tl-topic-card*` 를 **클래스 이름까지 그대로** 쓴다.
      마크업 차례도 커뮤니티와 같게 맞췄다(발췌를 `__main` 안으로 옮김), 그래서
      사진 보기·목록 보기 규칙이 전부 저쪽에서 온다.

      전에는 여기에 사진 보기 한 벌(타일·구분선·그림 칸·발췌·메타줄·빈 면)과
      목록형 썸네일(180px 16:9)을 다시 적어 두었다. 같은 것을 두 곳에 적어 두면
      커뮤니티가 고칠 때 블로그만 옛 값에 남는다 — 실제로 커뮤니티가 가운데 칸
      셋을 `--tl-card-ratio` 한 변수로 모았을 때(`a1ae010`) 블로그 쪽 사본은
      `aspect-ratio: 16 / 9` 가 박힌 채였고, `.tl-two` 가 붙어 있어 **저쪽 규칙을
      이기고 있었다.** 그래서 지우는 것이 고치는 것이다.

   저쪽에서 그대로 오는 것(여기 다시 적지 않는다):
     · 가운데 칸 비율 `--tl-card-ratio` — 그림 칸 · 발췌 칸 · 빈 면 셋이 같은 높이
     · 넘치는 발췌를 아래 한 줄 반 **가리개**로 녹여 끊기 (「…」·line-clamp 안 씀)
     · 사진 보기에서 **그림이 있으면 발췌를 감춘다** (`--thumb .tl-topic-card__excerpt`)
       — 상자가 둘 생겨 타일이 두 배로 길어지는 것을 막는다
     · 사진 타일 단 수 3 → 2(≤960) → **1(≤600)**. 블로그도 **같은 600** 이다
       — 전에 768 로 따로 두었던 것을 걷었다. 그래서 여기 미디어쿼리가 없다
     · 목록 보기(`is-compact`)에서 **썸네일을 감춘다** — 116px 정사각 바탕 규칙은
       어느 보기에서도 화면에 나오지 않는다. 그래서 블로그에도 썸네일 규칙이 없다
     · 그림 칸의 `height: auto` — 바탕 규칙의 `height: 116px`(≤480 은 80px)을 눌러
       `aspect-ratio` 가 듣게 하는 짝. 저쪽에 있으므로 블로그에도 함께 듣는다

   ⚠️ 그러니 **블로그 카드에 무언가를 적기 전에 `courses.css` 를 먼저 보라.**
      `.tl-two` 를 붙이는 순간 저쪽 규칙을 이기므로, 모르고 적으면 조용히 갈린다.
   ─────────────────────────────────────────── */

/* ── 블로그 마크업이 커뮤니티와 **다른 곳만** ──
   목록 보기의 칸이 다르다: 커뮤니티는 배지·제목·댓글·아바타·글쓴이·좋아요·시간,
   블로그는 배지·제목·조회수·날짜 넷이다. 그래서 칸 배치만 다시 적는다. */
.tl-two .tl-topic-cards.is-compact .tl-topic-card {
  /* 오른쪽 세 칸은 **고정 너비**다 — 커뮤니티 카드가 그렇게 해 둔 까닭 그대로
     (`courses.css` §1573 「있는 줄만 폭이 달라져 열이 어긋난다」). 카드는 하나하나가
     저마다 격자라 `auto` 로 두면 **줄마다 칸 너비가 달라진다** — 댓글이 없는 줄(대부분)
     과 있는 줄에서 조회수·날짜가 좌우로 흔들린다. 고정으로 두면 댓글수가 안 그려진
     줄도 그 칸을 비워 둔 채 나머지가 제자리에 선다.
     ⚠️ 숫자는 칸 안에서 **오른쪽 맞춤**이다(아래 각 규칙) — 자릿수가 달라도 오른쪽
     끝이 한 줄로 맞는다. 자릿수 기준: 조회수는 네 자리+쉼표(「1,222」)까지, 날짜는
     `Y.m.d`(「2026.03.30」) 고정이다. */
  --c-replies: 38px;
  --c-views:   56px;
  --c-time:    74px;
  --c-gap:     var(--tl-5);

  display: grid;
  grid-template-columns:
    auto                 /* 1 배지 */
    minmax(0, 1fr)       /* 2 제목 — 남는 폭을 다 먹어 오른쪽 셋을 끝으로 민다 */
    var(--c-replies)     /* 3 댓글수 */
    var(--c-views)       /* 4 조회수 */
    var(--c-time);       /* 5 작성일 */
  align-items: center;
  column-gap: var(--c-gap);
  /* 좌우 0 (2026-10-15, 커뮤니티세션-10 — 선임님 「왼쪽 오른쪽 끝을 맞춰줘」 · 「커뮤니티도 마찬가지」).
     2026-10-02 에는 커뮤니티에 맞춰 22 를 줬는데, 그러면 글자가 구분선·머리띠보다 22 안쪽에 섰다.
     이제 커뮤니티(`courses.css` `--c-pad: 0`)와 함께 0 — 배지·제목 왼쪽 끝과 날짜 오른쪽 끝이 선 끝이다.
     마우스를 올린 배경은 `courses.css` 「배경 번짐」이 좌우 12px 번지게 한다. */
  padding: var(--tl-4) 0;
}
.tl-two .tl-topic-cards.is-compact .tl-topic-card__main,
.tl-two .tl-topic-cards.is-compact .tl-topic-card__meta,
.tl-two .tl-topic-cards.is-compact .tl-topic-card__who,
.tl-two .tl-topic-cards.is-compact .tl-topic-card__stats { display: contents; }

/* 발췌·썸네일 숨김은 `courses.css` 가 이미 한다(`.tl-topic-cards.is-compact`) —
   다시 적지 않는다. */

/* ⚠️ 모든 칸에 `grid-row: 1` 을 못 박는다. `display: contents` 로 상자를 지우면
   알맹이가 격자에 직접 올라오는데, 격자는 **뒤로 돌아가 채우지 않는다** —
   날짜가 조회수보다 DOM 에서 앞서 있어 못 박지 않으면 조회수가 다음 줄로 밀린다. */
.tl-two .tl-topic-cards.is-compact .tl-topic-card > *,
.tl-two .tl-topic-cards.is-compact .tl-topic-card__main > *,
.tl-two .tl-topic-cards.is-compact .tl-topic-card__meta > *,
.tl-two .tl-topic-cards.is-compact .tl-topic-card__who > *,
.tl-two .tl-topic-cards.is-compact .tl-topic-card__stats > * { grid-row: 1; }

.tl-two .tl-topic-cards.is-compact .tl-topic-card__tags  { grid-column: 1; margin-bottom: 0; }
.tl-two .tl-topic-cards.is-compact .tl-topic-card__title {
  grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
/* ⚠️ `display` 를 **되돌려야** 보인다(2026-10-02). `courses.css` 1610줄이
   `.tl-topic-cards.is-compact .tl-topic-card__views { display: none }` 을 **미디어쿼리
   없이 전 폭에** 걸어 둔다 — 커뮤니티 목록 보기는 한 줄에 배지·제목·댓글·아바타·
   글쓴이·좋아요·시간이 들어가 조회수까지 넣을 칸이 없다는 판단이다.
   블로그 목록 보기는 **칸이 넷**뿐이라(배지·제목·조회수·시간) 들어갈 자리가 있다.
   `grid-column` 만 주면 자리는 잡히지만 **안 보인다** — 숨김을 안 덮기 때문이다.
   `.tl-two` 가 앞에 붙어 (0,4,0) 이라 저쪽 (0,3,0) 을 이긴다.
   `align-items`·`gap` 은 바탕 규칙(1388줄)에서 그대로 온다 — `display` 만 되돌린다. */
/* 사진 보기 날짜 앞의 **점(·)을 지운다**(2026-10-02). `courses.css` 1379줄이
   `.tl-topic-card__time::before { content: "·" }` 를 바탕에 깔아 둔다 — 커뮤니티
   카드는 그 앞에 글쓴이가 서서 둘을 가르는 점이지만, 블로그 카드는 앞에 아무도
   없어 **점만 혼자** 남는다. 목록 보기는 저쪽 1650줄이 이미 `content: none` 으로
   지워 두므로 **사진 보기만** 덮으면 된다.
   가름값 (0,3,1) 로 저쪽 (0,1,1) 을 이긴다. `margin-right` 도 같이 사라진다 —
   상자가 아예 안 만들어지기 때문이다. */
.tl-two .tl-topic-cards.is-photo .tl-topic-card__time::before { content: none; }

.tl-two .tl-topic-cards.is-compact .tl-topic-card__replies { grid-column: 3; }
.tl-two .tl-topic-cards.is-compact .tl-topic-card__views   { grid-column: 4; display: inline-flex; }
.tl-two .tl-topic-cards.is-compact .tl-topic-card__time    { grid-column: 5; }

/* ⚠️ 세 지표 모두 **오른쪽 맞춤**이다 — 위 고정 칸과 한 몸이라 따로 고치지 말 것.
   `min-width` 를 쓰지 않는다(전에는 날짜에 74px 를 줬다) — 칸이 너비를 주므로
   두 군데에 같은 숫자가 생기는 것을 막는다. */
.tl-two .tl-topic-cards.is-compact .tl-topic-card__replies,
.tl-two .tl-topic-cards.is-compact .tl-topic-card__views { justify-content: flex-end; }
.tl-two .tl-topic-cards.is-compact .tl-topic-card__time  { text-align: right; }

/* ④ 목록·사진 보기에서 **좋아요 단추를 감춘다**(2026-10-02). 카드 줄에서 누를 일이
   없고, 목록 보기에서는 `courses.css` 1630줄이 그 단추를 **8번 칸**에 못 박아 두어
   (커뮤니티는 아바타·글쓴이 칸이 있어 9칸이다) 블로그 카드에 없는 칸 5·6·7 이
   빈 칸으로 생기고 날짜 뒤에 단추만 떨어져 섰다(실측 2026-10-02: 날짜 끝 1186,
   단추 1250).
   ⚠️ **CSS 로 감추는 것뿐이다** — 좋아요 장치(`gdt-blog-like.php`)와 마크업은 그대로
   둔다. 글 보기의 `.tl-td__actions` 좋아요는 여기 걸리지 않는다(`.tl-topic-cards`
   안쪽만 고른다).
   ⚠️ 가름값이 (0,5,0) 이어야 한다 — `courses.css` 가 머리의 **맨 뒤**에 찍혀서
   (0,4,0) 끼리는 저쪽이 이긴다. */
.tl-two .tl-topic-cards.is-compact .tl-topic-card .tl-topic-like-btn,
.tl-two .tl-topic-cards.is-photo   .tl-topic-card .tl-topic-like-btn { display: none; }

@media (max-width: 768px) {
  /* 좁은 화면에서는 조회수를 뺀다 — 넷을 한 줄에 두면 제목이 몇 글자만 남는다 */
  .tl-two .tl-topic-cards.is-compact .tl-topic-card { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--tl-1); }
  .tl-two .tl-topic-cards.is-compact .tl-topic-card__tags  { grid-column: 1; grid-row: 1; }
  .tl-two .tl-topic-cards.is-compact .tl-topic-card__title { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .tl-two .tl-topic-cards.is-compact .tl-topic-card__views   { display: none; }
  /* 댓글수도 뺀다 — 위에서 준 고정 칸(3·4·5)이 여기서는 없어지므로, 남겨 두면
     날짜 뒤 빈 칸으로 흘러 줄이 어긋난다. */
  .tl-two .tl-topic-cards.is-compact .tl-topic-card__replies { display: none; }
  .tl-two .tl-topic-cards.is-compact .tl-topic-card__time    { grid-column: 2; grid-row: 1; text-align: right; }
}

/* ───────────────────────────────────────────
   6. 쪽 이동
   ─────────────────────────────────────────── */
.tl-blogpager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tl-2); margin-top: var(--tl-8); }
.tl-blogpager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 var(--tl-3);
  border: 1px solid var(--tl-s2); border-radius: var(--tl-r-sm);
  font-size: var(--tl-f-sm); font-weight: 600; color: var(--tl-ink-2);
  text-decoration: none; background: #fff;
  transition: border-color var(--tl-fast), color var(--tl-fast);
}
.tl-blogpager .page-numbers:hover { border-color: var(--tl-teal-300); color: var(--tl-ink); }
.tl-blogpager .page-numbers.current { background: var(--tl-teal-deep); border-color: var(--tl-teal-deep); color: #fff; }
.tl-blogpager .page-numbers.dots { border-color: transparent; background: none; }

/* ───────────────────────────────────────────
   7. 글 본문
   ⚠️ `margin` 을 단축으로 쓰지 않는다 — `margin: 0 0 24px` 는 좌우를 0 으로 덮어
      가운데 맞춤이 조용히 풀린다. 좌우 자리에는 늘 `auto` 를 적는다.
   ─────────────────────────────────────────── */
/* ── 글 카드 — 커뮤니티 `.tl-td` 와 **같은 값** ──
   ⚠️ `.tl-td` 는 `courses.css`(커뮤니티 것)라 건드리지 않는다. 그 클래스를 빌려 쓰지도
   않는다 — 저쪽이 `.tl-td` 에 글 보기 전용 규칙을 더하면 블로그가 딸려 간다.
   **같은 값을 블로그 전용 클래스에 적는다.** 값이 갈리면 그때 맞춘다(출처: courses.css
   `.tl-td, .tl-comments, .tl-recent` 선언).

   ⚠️ 최근 글·분류 칩·댓글은 **카드 밖**이다 — 커뮤니티도 `.tl-td` 와 `.tl-recent` ·
   `.tl-comments` 가 **나란한 형제**다. 마크업에서 `generate_after_content` 가
   본문 바로 뒤에서 카드를 닫는 까닭이 이것이다. */
.tl-postcard {
  background: #fff;
  border: 1px solid var(--tl-s2);          /* rgb(239,237,230) */
  border-radius: 8px;                       /* 실측값 — 토큰은 5px/10px 뿐이라 리터럴 */
  padding: var(--tl-7) 36px;                /* 32px 36px — 36px 은 토큰 없음 */
  margin-bottom: var(--tl-6);
}
/* 좁은 화면에서는 여백을 줄인다 — 커뮤니티가 `.tl-td` 에 하는 것과 **같은 값·같은 경계**
   (`courses.css` 3025줄, `@media (max-width: 768px)`). 36px 을 그대로 두면 390px 에서
   글자 칸이 256px 밖에 안 남는다(실측). */
@media (max-width: 768px) {
  .tl-postcard { padding: var(--tl-6) var(--tl-5); }
}

/* ⚠️ **댓글 카드가 위아래 카드보다 좁았다**(2026-10-02, 사람이 실사이트에서 짚음).
   테마가 댓글 칸(`.comments-area`)에 사면 40px 여백을 준다. 그래서 그 안의
   `.tl-comments` 만 좌우로 40씩 밀려 **w800** 이 되고, 본문 카드·최근 글(둘 다 w880,
   `.tl-two__body` 직속)과 테두리 줄이 어긋났다(실측 L450 R1250 ↔ L410 R1290).
   ⚠️ 고치는 자리는 **부모 여백**이지 `.tl-comments` 의 width·margin 이 아니다 —
   저 상자는 `courses.css` 가 커뮤니티와 공유하는 것이라, 블로그에서 폭을 못 박으면
   저쪽이 값을 바꿀 때 블로그만 뒤처진다. 부모를 열어 두면 **자연히 전폭을 채운다.**
   ⚠️ **좌우만** 연다. 위아래 40px 은 카드 사이 틈이라 그대로 둔다.
   (단일 글의 `.comments-area` 안에는 `.tl-comments` 하나뿐인 것을 확인했다.) */
body.tl-blogpost .comments-area { padding-left: 0; padding-right: 0; }

body.tl-blogpost .entry-content { font-size: var(--tl-f-base); line-height: 1.85; color: var(--tl-ink-2); }
body.tl-blogpost .entry-content > *,
body.tl-blogpost .tl-postcard > *,
body.tl-blogpost .tl-two__intro > * { max-width: 760px; margin-inline: auto; }
/* ⚠️ **알약 줄은 글자 폭에 가두지 않는다**(2026-10-02). 좋아요·공유를 카드 **안**으로
   들이고 보니 위 규칙의 `.tl-postcard > *` 에 걸려 760 으로 좁아지고 가운데로 몰렸다
   (실측: x=470 w=760, 카드 안쪽은 446~1254). 커뮤니티의 같은 줄(`.tl-td__actions`)은
   **카드 안쪽 폭을 다 쓰고** 그 위에 구분선을 긋는다 — 선이 글자 폭에서 끊기면
   카드를 가로지르는 칸막이로 안 읽힌다. */
body.tl-blogpost .tl-postcard > .tl-td__actions { max-width: none; margin-inline: 0; }
/* 좋아요·공유 줄을 본문에서 100px 더 뗀다 (2026-10-07, 사람이 화면을 보며 정함 — 20 → 60 → 100).
   구분선 위가 마지막 문단의 아래 여백 24px 뿐이라, 본문 끝과 알약 줄이 붙어 보였다 — 이제 124px.
   본문이 끝났다는 숨 고르기다.
   ⚠️ 블로그 글에만 준다. 커뮤니티 글 보기의 같은 줄(courses.css `.tl-td__actions`)은 그대로다. */
body.tl-blogpost .tl-postcard > .tl-td__actions { margin-top: 100px; }
/* ⚠️ **그림은 글자 폭에 맞춘다**(2026-10-02). 전에는 여기서 `figure`·`.wp-block-image` 를
   `max-width: 100%` 로 풀어 본문 칸(940)을 다 쓰게 했는데, 글자는 760 이라 그림만
   **양옆으로 90px 씩 비어져 나왔다**. 글을 읽다 그림에서 눈이 바깥으로 끌린다.
   ⚠️ 표(`.wp-block-table`)는 **그대로 넓게 둔다** — 칸이 많은 표는 760 에 가두면
   글자가 겹치거나 가로로 밀린다. 그림과 사정이 다르다. */
body.tl-blogpost .entry-content > figure,
body.tl-blogpost .entry-content > .wp-block-image { max-width: 760px; margin-inline: auto; }
body.tl-blogpost .entry-content > .wp-block-table { max-width: 100%; }

.tl-post-title {
  margin: 0 auto var(--tl-2); font-size: var(--tl-f-3xl); font-weight: 700;
  line-height: 1.35; letter-spacing: -0.02em; color: var(--tl-ink);
}
.tl-post-meta { margin: 0 auto var(--tl-7); font-size: var(--tl-f-sm); color: var(--tl-ink-3); }

/* 위 60 · 아래 20 (2026-10-07, 사람이 실제 글을 보고 정함). 처음 값은 64 · 16 이었는데
   제목이 윗글에서 너무 멀고 아랫글에 너무 붙어 보였다 — 위를 4 줄이고 아래를 4 늘렸다.
   합은 80 으로 같아서 글 전체 길이는 변하지 않는다. 토큰에 60·20 이 없어 숫자로 적는다. */
body.tl-blogpost .entry-content h2 {
  margin: 60px auto 20px; font-size: var(--tl-f-2xl); font-weight: 700;
  letter-spacing: -0.02em; color: var(--tl-ink);
}
body.tl-blogpost .entry-content h3 {
  margin: var(--tl-8) auto var(--tl-4); font-size: var(--tl-f-xl); font-weight: 700; color: var(--tl-ink);
}
/* 세 번째 단계(2026-10-07). 글 6편이 `####` 를 쓰는데 모양이 없어 테마 기본값으로 나왔다.
   h3(20px · 위 48)과 본문(16px) 사이에 둔다 — 크기 차이가 작아서 위 여백(32)으로도 단계를 가른다.
   ⚠️ 네 번째 단계는 만들지 않는다. 더 깊어지면 글을 나눌 때다. */
body.tl-blogpost .entry-content h4 {
  margin: var(--tl-7) auto var(--tl-3); font-size: var(--tl-f-lg); font-weight: 700; color: var(--tl-ink);
}
/* 제목 바로 아래 제목 (2026-10-07, 사람이 정함). 아래 제목의 위 여백(48·32)이 그대로 벌어져,
   큰 제목과 그 첫 작은 제목이 남남처럼 떨어져 보였다. 「제목 → 문단」 과 눈으로 같게 맞춘다
   (큰 제목 아래 31 · 작은 제목 아래 23). 제목끼리는 글자 위아래 빈 자리가 작아서 숫자는
   「제목 → 문단」(20·12)보다 조금 크다. 앞 제목의 아래 여백과 겹치므로 여기 값이 곧 간격이다. */
body.tl-blogpost .entry-content h2 + :is(h3, h4) { margin-top: 24px; }
body.tl-blogpost .entry-content h3 + h4 { margin-top: 16px; }
/* 빈 제목은 자리를 차지하지 않게 한다 (2026-10-07). 글 1편(해석하기 6)에 내용 없는 `<h3>` 가 2개 있어,
   그 앞 작은 제목과 문단 사이가 12 가 아니라 48 로 벌어졌다. 글에서 지우는 것이 맞고, 이 줄은 안전판이다. */
body.tl-blogpost .entry-content :is(h2, h3, h4):empty { display: none; }
body.tl-blogpost .entry-content p { margin: 0 auto var(--tl-6); }
body.tl-blogpost .entry-content ul,
body.tl-blogpost .entry-content ol { margin: 0 auto var(--tl-6); padding-left: var(--tl-7); }
body.tl-blogpost .entry-content li { margin-bottom: var(--tl-2); }
body.tl-blogpost .entry-content a { color: var(--tl-teal-deep); text-underline-offset: 3px; }
/* 인용 — **조용하게** (2026-10-07 선임님이 후보를 견줘 보고 고름: "지금꺼는 너무 시끄러워").
   전에는 s1 바탕 + 청록 줄 + 둥근 모서리였고, 글자는 우리가 정한 적이 없어 테마 기본값
   (기울임 + 1.2em)이 그대로 나왔다 — 한글은 기울임 글꼴이 없어 억지로 눕힌 모양이 됐다.
   이제 바탕은 본문 바탕과 거의 같은 bg, 줄은 s3, 글자는 본문과 같은 크기·바로 선 글자.
   모서리 둥글기는 바탕이 안 보이게 되어 뺐다. 여백은 그대로. 색은 토큰만 쓴다.
   ⚠️ **표준 인용 칸(`.tl-std`)도 이 상자를 같이 쓴다**(2026-10-08) — 띠·바탕·여백을 한 곳에서
      정해, 인용이 바뀌면 같이 바뀐다. 칸 안의 배치는 아래 「표준 인용 칸」. */
body.tl-blogpost .entry-content :is(blockquote, .tl-std) {
  margin: var(--tl-7) auto; padding: var(--tl-5) var(--tl-6);
  border-left: 3px solid var(--tl-s3); background: var(--tl-bg);
  font-style: normal; font-size: 1em; color: var(--tl-ink);
}
body.tl-blogpost .entry-content blockquote p:last-child { margin-bottom: 0; }

/* 표준 인용 칸 — 왼쪽 원문 그림 · 오른쪽 번역문 (2026-10-08 선임님이 정함)
   마크업(코크핏 ㊻이 배포본에 넣는다):
     <div class="tl-std"> <figure class="tl-std__fig"><img></figure>
                          <p class="tl-std__src">ASME Y14.5-2018</p>
                          <div class="tl-std__ko"><p>…</p></div> </div>
   · 상자는 바로 위 인용 규칙 그대로(띠 3px s3 · 바탕 bg · 여백).
   · 컴퓨터: 두 칸 — 그림 1.5fr : 글 1fr(≈ 6 : 4), 사이 28px. 오른쪽 칸은 규격 표기가 맨 위
     (오른쪽 정렬), 번역문이 맨 아래에 붙는다(그림 높이만큼 늘어난 칸의 바닥).
   · 600px 이하: 한 칸으로 쌓는다 — 그림 → 규격 표기(왼쪽 정렬) → 번역문.
   · 규격 표기 12.5px `--tl-ink-3` 600. 번역문 `--tl-ink`, 컴퓨터에선 13px · 줄 간격 1.3(오른쪽
     칸이 좁아 작게 — 2026-10-08 선임님이 15px·1.5 → 13px·1.3 으로 정함), 휴대폰에선 본문과
     같게(1em · 1.5). 문단 사이 0.8em. 자간 -0.02em(컴퓨터, 2026-10-08 — 제목 h2 와 같은 값),
     휴대폰은 normal(본문과 같게). 규격 표기의 자간은 그대로.
   · 컴퓨터에선 번역문 덩어리를 **오른쪽에 붙인다**(justify-self: end + width: fit-content,
     2026-10-08) — 한 줄짜리는 오른쪽 끝(규격 표기와 같은 선)에 서고, 여러 줄이면 칸을 채운다.
     글자 정렬은 왼쪽 그대로라 줄머리는 가지런하다. 600px 이하에선 되돌린다(왼쪽).
   · 번역문은 **양쪽 정렬**(text-align: justify, 2026-10-08) — 여러 줄이면 줄 끝도 가지런하다.
     마지막 줄과 한 줄짜리는 왼쪽(양쪽 정렬의 마지막 줄 규칙). 600px 이하도 같은 값을 물려받는다.
   · 그림은 칸 폭에 맞춘다. 모서리·테두리·높이 규칙은 본문 그림 규칙(`.entry-content img`)이
     그대로 걸린다. 새 색은 만들지 않는다. */
body.tl-blogpost .entry-content .tl-std {
  display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto 1fr;
  grid-template-areas: "fig src" "fig ko"; column-gap: 28px;
}
body.tl-blogpost .entry-content .tl-std__fig { grid-area: fig; margin: 0; min-width: 0; }
body.tl-blogpost .entry-content .tl-std__fig img { display: block; width: 100%; max-width: 100%; }
body.tl-blogpost .entry-content .tl-std__src {
  grid-area: src; margin: 0; text-align: right;
  font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--tl-ink-3);
}
body.tl-blogpost .entry-content .tl-std__ko {
  grid-area: ko; align-self: end; justify-self: end; width: fit-content; min-width: 0; padding-top: var(--tl-4);
  text-align: justify;
  font-size: 13px; line-height: 1.3; letter-spacing: -0.02em; color: var(--tl-ink);   /* 컴퓨터 — 휴대폰은 아래에서 따로 */
}
body.tl-blogpost .entry-content .tl-std__ko p { margin: 0 0 .8em; max-width: none; }
body.tl-blogpost .entry-content .tl-std__ko p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  body.tl-blogpost .entry-content .tl-std {
    grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "fig" "src" "ko";
  }
  body.tl-blogpost .entry-content .tl-std__src { text-align: left; margin-top: var(--tl-4); }
  body.tl-blogpost .entry-content .tl-std__ko { align-self: start; justify-self: stretch; width: auto; padding-top: var(--tl-2); font-size: 1em; line-height: 1.5; letter-spacing: normal; }
}
/* 구분선 — 1px 옅은 선 (2026-10-07, 사람이 후보 셋 중 고름).
   손대기 전에는 테마·블록 기본값(2px · #808080)이 그대로 나와, 사이트의 다른 선(카드 테두리·
   비교 박스 안 선 = --tl-s2/s3)보다 훨씬 진했다. 같은 계열 색으로 낮춘다.
   ⚠️ `hr.wp-block-separator` 를 따로 적은 것은 블록 기본 CSS(`.wp-block-separator` 의 border-top 2px)를
   이기기 위해서다. 글에는 구분선 모양을 쓰지 않는다 — md 의 `---` 는 늘 이 모양이다.
   가운데 짧은 선·점 세 개도 견줘 보고 뺐다(장식으로 읽힌다). */
body.tl-blogpost .entry-content hr,
body.tl-blogpost .entry-content hr.wp-block-separator {
  height: 0; border: 0; border-top: 1px solid var(--tl-s3); background: none;
  margin: var(--tl-8) auto;
}
/* 본문 그림은 **모서리를 굴리지 않는다** (2026-10-07, 사람이 정함).
   전에는 5px(--tl-r-md)로 굴렸는데, 그림 **안에 그려 넣은 테두리**(도면 틀·표 테두리)의
   네 귀가 잘려 나갔다. 도면 그림은 귀가 서 있어야 맞다. */
body.tl-blogpost .entry-content img { height: auto; border-radius: 0; }
/* 본문 그림의 위아래 간격 — **그림이 정한다** (2026-10-07, 사람이 지금/제안 화면을 견줘 보고 정함).
   전에는 그림 위 간격이 「앞 블록의 아래 여백 + 6」 이라 앞에 무엇이 오느냐로 달라졌다
   (문단 뒤 30 · 작은 제목 뒤 18). 게다가 문단은 줄 간격 때문에 글자 위아래로 빈 자리가
   8px 쯤 딸려 있고 제목은 3px 쯤이라(실측: 문단 7.7/8.0 · h2 3.7 · h3 3.0/3.2),
   눈에는 38 대 21 로 더 벌어져 보였다.
   이제 그림 **앞 블록의 아래 여백을 지우고**(`:has(+ figure)`) 그림의 padding 만으로 간격을 낸다.
   목표는 「글자 끝 ↔ 그림」 이 눈으로 26~28px.
     문단·목록 → 그림   18   (글자 아래 빈 자리 8 + 18 = 26)
     제목 → 그림        24   (빈 자리 3~4 + 24 = 27~28)
     그림 → 문단        18   (18 + 글자 위 빈 자리 8 = 26)
     그림 → 그림        24   (앞 그림 아래 18 + 6)
     그림 → 제목·구분선  그쪽 위 여백 + 8   (문단 뒤 제목과 눈으로 같게 — 문단에 딸린 빈 자리 8 을 대신한다)
   ⚠️ margin 이 아니라 padding 으로 준다 — 앞뒤 블록의 여백과 겹쳐 사라지지 않게.
   ⚠️ 숫자를 바꿀 때는 아래 여섯 줄을 **같이** 본다. 하나만 바꾸면 다시 자리마다 달라진다.
   표도 같은 규칙(2026-10-17, 66-22) — GP 가 figure 여백을 0 으로 두고, 10-07 정리 때는 표가 든 글이 없었다(표는 전부 그림이었다).
   표도 테두리가 있는 덩어리라 「글자 끝 ↔ 표 테두리」 를 그림과 같은 눈값으로 둔다. 그래서 `figure:is(.wp-block-image, .wp-block-table)`. */
body.tl-blogpost .entry-content > :has(+ figure:is(.wp-block-image, .wp-block-table)) { margin-bottom: 0; }
body.tl-blogpost .entry-content figure:is(.wp-block-image, .wp-block-table) { padding-block: 18px; }
body.tl-blogpost .entry-content :is(h2, h3, h4) + figure:is(.wp-block-image, .wp-block-table) { padding-top: 24px; }
body.tl-blogpost .entry-content figure:is(.wp-block-image, .wp-block-table) + figure:is(.wp-block-image, .wp-block-table) { padding-top: 6px; }
body.tl-blogpost .entry-content figure:is(.wp-block-image, .wp-block-table):has(+ :is(h2, h3, h4, hr)) { padding-bottom: 8px; }
body.tl-blogpost .entry-content > figure:is(.wp-block-image, .wp-block-table):first-child { padding-top: 0; }
/* 목록 뒤 그림도 18 로 맞춘다 — 마지막 항목의 아래 여백(6)이 목록 밖으로 새어 나와 24 가 됐다.
   목록 뒤가 문단·제목일 때는 목록 자체의 아래 여백(24)이 더 커서 달라지는 것이 없다(실측 24 그대로). */
body.tl-blogpost .entry-content li:last-child { margin-bottom: 0; }
/* 본문 그림에는 테두리를 주지 않는다 (2026-10-07, 사람이 정함).
   옛 글 9편의 그림 37장에 편집기로 준 1px 테두리가 남아 있었다 — 색 클래스(palette-color-10)가
   지금 테마에 없어 글자색(#3a3933)으로 떨어져, 처음 의도보다 진하게 보였다.
   ⚠️ `!important` 는 그 그림들의 **인라인 style(`border-width:1px`)** 을 이기려고 쓴다.
   글 쪽의 테두리 지정은 일괄 정리(코크핏 2단계 묶음 나·다)로 걷어내는 중이고, 다 걷힌 뒤에도
   이 규칙은 남겨 둔다 — 누가 편집기에서 테두리를 줘도 화면에는 안 나오게 하는 안전판이다. */
body.tl-blogpost .entry-content img { border: 0 !important; }

/* 테마 글 상자의 여백·흰 바탕을 뗀다 — 이제 `.tl-postcard` 가 여백과 바탕을 맡는다.
   두 겹이면 안쪽이 36+테마여백 만큼 들어가고 흰 상자가 두 장 겹쳐 보인다. */
body.tl-blogpost .tl-two__body .inside-article {
  padding: 0; background: none; border: 0; box-shadow: none; margin-bottom: 0;
}

/* ⚠️ `.tl-postnav`(「○○ 글 더 보기」 + 이전/다음 글 상자) 규칙은 **걷어냈다**
   (2026-10-02). 마크업을 안 그리므로 칠할 것이 없다 — 커뮤니티 글 보기에 그 상자가
   없고, `.tl-recent` 와 하는 일이 겹쳤다. 되살릴 일이 생기면 `7289b55` 에 있다. */

/* ───────────────────────────────────────────
   8. 위치 표시 · 빈 화면
   ─────────────────────────────────────────── */
.tl-crumbs {
  max-width: 760px; margin: 0 auto var(--tl-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tl-2);
  font-size: var(--tl-f-xs); color: var(--tl-ink-3);
}
.tl-crumbs a { color: var(--tl-teal-deep); text-decoration: none; }
.tl-crumbs a:hover { text-decoration: underline; }
.tl-crumbs span[aria-hidden] { opacity: .6; }

/* 글 머리 한 줄 — 이동 경로(왼쪽) + 「‹ 이전 글 · 다음 글 ›」(오른쪽) (2026-10-08 선임님 덧붙임)
   차례는 글 끝 「이어서 읽기」와 같다. 이동 경로의 폭·아래 간격은 이 줄이 맡는다.
   한 줄에 안 들어가면(휴대폰 등) 스크립트가 `is-tight` 를 켜 글자를 빼고 화살표만 남긴다. */
.tl-posthead-bar {
  max-width: 760px; margin: 0 auto var(--tl-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--tl-4);
}
.tl-posthead-bar .tl-crumbs { margin: 0; max-width: none; min-width: 0; flex-wrap: nowrap; }
.tl-posthead-bar .tl-crumbs > * { flex: none; white-space: nowrap; }
.tl-posthead-bar .tl-crumbs > a:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 이동 경로(「홈 › 전체 글 › 분류」)는 **감춘다**(2026-10-15, 커뮤니티세션-11 — 선임님 「일단 지금은 안 필요한 거 같은데」).
   사이트가 얕아(홈 → 블로그 → 글) 알려 주는 게 적고, 휴대폰은 아래 탭 막대·컴퓨터는 왼쪽 분류 목록이 같은 일을 한다.
   **마크업은 둔다**(`tl_blog_post_head()`) — 강의 › 과정 › 레슨처럼 깊어지면 이 두 줄만 지워 되살린다.
   검색엔진용 구조 데이터(Yoast 브레드크럼)는 화면과 따로라 그대로다.
   줄에는 「‹ 이전 글 · 다음 글 ›」만 남으므로 **오른쪽 끝**에 세운다(space-between 혼자면 왼쪽으로 쏠린다).
   줄 스크립트의 `is-tight` 판정은 숨은 경로의 폭이 0 이라 이전·다음 자체가 넘칠 때만 켜진다(390 에서 글자째 한 줄 — 실측). */
.tl-posthead-bar .tl-crumbs { display: none; }
/* 줄 높이는 경로가 있던 때(작은 글씨 12 × 1.5 = 18)로 붙잡는다 — 이전·다음만 남으면 17 이 되어 제목이 1~2px 올라간다 */
.tl-posthead-bar { justify-content: flex-end; min-height: 18px; }
.tl-pnav {
  flex: none; display: flex; align-items: center; gap: var(--tl-2);
  font-size: var(--tl-f-xs); line-height: 1.4; white-space: nowrap;
}
.tl-pnav__link {
  display: inline-flex; align-items: center; gap: 2px;
  color: var(--tl-ink-2); text-decoration: none;
}
a.tl-pnav__link:hover { color: var(--tl-teal-deep); }
a.tl-pnav__link:focus-visible { outline: 2px solid var(--tl-teal); outline-offset: 2px; border-radius: var(--tl-r-sm); }
.tl-pnav__link.is-off { color: var(--tl-ink-3); opacity: .5; }
.tl-pnav__dot { color: var(--tl-ink-3); opacity: .6; }
.tl-pnav .tl-series__chev { flex: none; }
.tl-posthead-bar.is-tight .tl-pnav__text { display: none; }
.tl-posthead-bar.is-tight .tl-pnav__link { padding: 2px; }

/* 왼쪽 칸 — 분류마다의 글 목록, ∨ 단추로 접고 편다 (넓은 화면, 2026-10-08 · 2026-10-18 커뮤니티세션-17)
   세로 분류 목록(`.tl-blognav`, 961px 이상에서만 보인다) 안에서 분류 줄 바로 뒤에 선다. 한 번에 하나만 펼친다
   (`gdt-blog-list.php` 「분류 글 목록 접고 펴기」 스크립트). 현재 글은 굵게 + 앞에 작은 점, 제목은 한 줄 + 말줄임.
   ⚠️ 단추 · 목록 모양은 **여기(.tl-blognav 아래)에만** 적는다 — `.tl-board-nav-*` 는 커뮤니티 사이드바와 함께
      쓰는 courses.css 규칙이라 손대지 않는다. */
/* ∨ 단추 — 분류 줄(li)의 오른쪽 끝에 띄운다. 이름 링크는 그 폭만큼 오른쪽 여백을 늘려 글 수(+n)와 안 겹치게 한다.
   눌리는 면 32×32, 줄(44) 가운데. */
.tl-blognav .tl-blognav__has-posts { position: relative; }
.tl-blognav .tl-blognav__has-posts > a { padding-right: calc(32px + var(--tl-2) + 6px); }
.tl-blognav .tl-blognav__toggle {
  position: absolute; top: 6px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: var(--tl-r-md); background: none; color: var(--tl-ink-3); cursor: pointer;
}
.tl-blognav button.tl-blognav__toggle:hover,
.tl-blognav button.tl-blognav__toggle:focus { background: var(--tl-s1); color: var(--tl-ink); }   /* 테마의 button:focus 검정 바탕을 이긴다 */
.tl-blognav button.tl-blognav__toggle:focus:not(:focus-visible) { background: none; color: var(--tl-ink-3); }
.tl-blognav button.tl-blognav__toggle:focus-visible { outline: 2px solid var(--tl-teal); outline-offset: -2px; }
.tl-blognav .tl-blognav__toggle svg { display: block; transition: transform .15s ease; }
.tl-blognav .tl-blognav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }   /* ∨ → ∧ */
@media (prefers-reduced-motion: reduce) { .tl-blognav .tl-blognav__toggle svg { transition: none; } }

/* 목록 — 길면 **이 상자 안에서** 스크롤된다(사이드바 전체가 밀려 내려가지 않게). 높이는 화면 높이에서 고정된 것을
   뺀 값이다(1280×900 실측, 결과보고 17): 사이드바 위끝 133(글 화면) + 분류 일곱 줄(48 × 7 = 336) + 검색 칸 68
   + 목록 아래 12 + 남는 틈 ≈ 580. 화면이 낮아도 200 아래로는 줄이지 않는다(그때는 사이드바가 화면보다 길어진다).
   스크롤은 바깥 `li` 가 맡는다 — 안쪽 `ul` 에 걸면 줄 위에 걸친 현재 글 점이 잘린다. */
.tl-blognav .tl-catposts-wrap {
  position: relative; list-style: none; margin: 0 0 var(--tl-3); padding: 0;
  max-height: max(200px, calc(100vh - 580px)); overflow-y: auto; overscroll-behavior: contain;
}
.tl-blognav .tl-catposts-wrap[hidden] { display: none; }
/* 분류를 옮겨 새 화면이 열릴 때 — 펼쳐진 글 목록이 위에서부터 서서히 펼쳐진다(2026-10-21, 선임님 요청).
   CSS 애니메이션이라 첫 그림부터 돈다(스크립트가 늦게 돌아 깜빡이지 않게). 스크립트가 0.5초 뒤 `is-ready` 를
   달면 끝난다 — 그 뒤 ∨ 를 눌러 펴고 접는 것은 스크립트가 따로 움직인다. */
@keyframes tl-catposts-open {
  from { max-height: 0; opacity: 0; }
  to   { max-height: max(200px, calc(100vh - 580px)); opacity: 1; }
}
.tl-blognav:not(.is-ready) .tl-catposts-wrap:not([hidden]) { animation: tl-catposts-open .45s ease both; overflow-y: hidden; }
@media (prefers-reduced-motion: reduce) { .tl-blognav:not(.is-ready) .tl-catposts-wrap:not([hidden]) { animation: none; } }
.tl-blognav .tl-catposts {
  list-style: none; margin: var(--tl-1) 0 0; padding: 0 0 0 var(--tl-4);
  border-left: 1px solid var(--tl-s3); margin-left: 20px;
}
.tl-blognav .tl-catposts__item { margin: 0; padding: 0; }
.tl-blognav .tl-catposts__link {
  display: block; padding: 5px var(--tl-2); border-radius: var(--tl-r-md);
  font-size: var(--tl-f-sm); line-height: 1.45; color: var(--tl-ink-2); text-decoration: none;
}
/* 제목 한 줄 + 말줄임 — 안쪽 span 에 건다(링크에 overflow 를 걸면 아래 점이 잘린다). 전체 제목은 title. */
.tl-blognav .tl-catposts__text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tl-blognav a.tl-catposts__link:hover { background: var(--tl-s1); color: var(--tl-ink); }
.tl-blognav .tl-catposts__item.is-current .tl-catposts__link {
  position: relative; font-weight: 700; color: var(--tl-ink);
}
.tl-blognav .tl-catposts__item.is-current .tl-catposts__link::before {
  content: ""; position: absolute; left: calc(-1 * var(--tl-4) - 3px); top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: var(--tl-r-full); background: var(--tl-ink);
}

.tl-two .tl-empty--inline { padding: var(--tl-9) var(--tl-6); text-align: center; }
.tl-two .tl-empty__title { margin: 0 0 var(--tl-3); font-size: var(--tl-f-xl); font-weight: 700; color: var(--tl-ink); }
.tl-two .tl-empty__desc  { margin: 0; font-size: var(--tl-f-sm); color: var(--tl-ink-3); }

/* ═══════════════════════════════════════════════════════════
   글 끝 「이어서 읽기」 — [◀ 더보기] [이전] [현재] [다음] [더보기 ▶] (2026-10-08, 선임님이 정함)

   마크업은 `gdt-blog-list.php` 의 `tl_blog_series()` — 카드는 목록의 사진 보기 카드 그대로다.
   (그 전의 「관련 글」 휴대폰 옆 넘김 줄(747ba5c)은 이 칸으로 갈아 끼우며 걷어냈다.)
   · 컴퓨터·태블릿(600px 초과): 단추 · 카드 3장 · 단추 한 줄. 카드는 **늘 3열** — 목록 사진 보기의
     960px 이하 2열 규칙을 이 칸에서는 덮는다(세 칸이 이전·현재·다음이라 한 줄이어야 읽힌다).
   · 더보기: 테두리 s3 · 흰 바탕 · ink-2 글자, 꺾쇠 위에 「더보기」. 끝이면 흐리게(disabled).
   · 현재 글 카드: 썸네일 흐림(blur 3px · 옅게 0.45) + 가운데 「현재 글」 표시(ink 바탕 · 흰 글자 · 알약).
     링크가 아니므로 손가락 모양·떠오르는 그림자·제목 색 바뀜을 끈다.
   · 휴대폰(600px 이하): 카드 3장을 세로 3줄(작은 썸네일 104px + 분류 + 제목 두 줄)로 바꾸고,
     더보기는 위·아래 단추(꺾쇠를 위·아래로 돌린다). 날짜·조회수는 줄에서 뺀다.
   ⚠️ `.tl-two` 를 앞에 붙여 명시도를 올린다 — 목록 사진 보기 규칙(`.tl-two .tl-topic-cards.is-photo …`)을 이긴다. */
.tl-two .tl-series__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--tl-4);
}
.tl-two .tl-series .tl-topic-cards.is-photo {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tl-4); margin: 0; padding: 0;
}
.tl-two .tl-series__more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tl-1);
  width: 48px; min-height: 96px; padding: var(--tl-3) 0; margin: 0;
  border: 1px solid var(--tl-s3); border-radius: var(--tl-r-nm);
  background: #fff; color: var(--tl-ink-2);
  font: inherit; font-size: var(--tl-f-xs); font-weight: 600; line-height: 1.2; letter-spacing: 0;
  cursor: pointer; transition: background var(--tl-fast), color var(--tl-fast);
}
.tl-two .tl-series__more--next .tl-series__chev { order: -1; }   /* 꺾쇠를 늘 위에 */
.tl-two .tl-series__more:hover:not(:disabled) { background: var(--tl-s1); color: var(--tl-ink); }
.tl-two .tl-series__more:focus-visible { outline: 2px solid var(--tl-teal); outline-offset: 2px; }
.tl-two .tl-series__more:disabled { opacity: .35; cursor: default; }
.tl-two .tl-series__chev { flex: none; }

.tl-two .tl-series .tl-topic-card__thumb { position: relative; }
/* 눌림은 덮개 링크로 보낸다(2026-10-18, 커뮤니티세션-16 — 선임님 「이어서 보기의 글을 클릭해도 그 글로 이동이 되지 않아」).
   위 relative 로 그림 상자가 위치 지정 요소가 되어 덮개 링크(absolute · z 0, li 의 첫 자식)보다 **나중에** 그려져
   그 위를 덮었다 — 카드 가운데를 눌러도 그림이 받았다. 덮개의 z-index 를 올리는 대신 그림 상자를 통과시킨다:
   「현재 글」 표시는 이 상자 기준 absolute 라 자리가 그대로이고, 카드 안 다른 요소의 겹침 순서를 건드리지 않는다.
   날짜·조회수 줄(`__meta`, relative)도 같은 까닭으로 덮개를 가려 같이 통과시킨다 — 블로그 카드에서 이 줄에는
   누를 것이 없다(좋아요는 감춤). 현재 글 카드는 덮개가 없어 눌러도 그대로 아무 일이 없다. */
.tl-two .tl-series .tl-topic-card__thumb,
.tl-two .tl-series .tl-topic-card__meta { pointer-events: none; }
.tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card.is-current { cursor: default; }
.tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card.is-current:hover { box-shadow: none; }
.tl-two .tl-series .tl-topic-card.is-current:hover .tl-topic-card__title { color: var(--tl-ink); }
.tl-two .tl-series .tl-topic-card.is-current .tl-topic-card__thumb img {
  filter: blur(3px); opacity: .45; transform: scale(1.06);   /* 흐린 가장자리가 비치지 않게 살짝 키운다 */
}
.tl-two .tl-series__now {
  position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: var(--tl-1) var(--tl-3); border-radius: var(--tl-r-full);
  background: var(--tl-ink); color: #fff;
  font-size: var(--tl-f-xs); font-weight: 700; line-height: 1.4; white-space: nowrap;
}
/* 썸네일이 없는 글이면 표시는 분류 배지 앞에 선다 */
.tl-two .tl-series .tl-topic-card__tags .tl-series__now {
  position: static; transform: none; display: inline-block; margin-right: var(--tl-2);
}

@media (max-width: 600px) {
  .tl-two .tl-series__row { grid-template-columns: minmax(0, 1fr); gap: var(--tl-3); }
  .tl-two .tl-series__more {
    flex-direction: row; width: 100%; min-height: 40px; padding: 0 var(--tl-4);
    gap: var(--tl-2); font-size: var(--tl-f-sm);
  }
  .tl-two .tl-series__more .tl-series__chev { transform: rotate(90deg); }   /* ◀ → ▲ , ▶ → ▼ — 더보기 단추만(글 머리 ‹ › 는 그대로) */
  .tl-two .tl-series .tl-topic-cards.is-photo { grid-template-columns: minmax(0, 1fr); gap: var(--tl-3); }
  .tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card {
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas: "thumb tags" "thumb title"; grid-template-rows: auto 1fr;
    column-gap: var(--tl-4); row-gap: var(--tl-1); align-items: start; padding: var(--tl-3);
  }
  .tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card::before,
  .tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card::after { content: none; }
  .tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card__tags { grid-area: tags; padding: 0; margin: 0; }
  .tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card__title {
    grid-area: title; padding: 0; margin: 0; font-size: var(--tl-f-md); line-height: 1.4;
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card__thumb {
    grid-area: thumb; align-self: center; width: 104px; aspect-ratio: 16 / 9;
    border-radius: var(--tl-r-md);
  }
  .tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card__meta,
  .tl-two .tl-series .tl-topic-cards.is-photo .tl-topic-card__excerpt { display: none; }
  .tl-two .tl-series__now { padding: 2px var(--tl-2); font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   본문 표 — 표1(청록) · 표2(따뜻한 색) · 머리만 · 견줌 (2026-10-08, 선임님이 색을 정함)

   그림 속 표와 글에서 직접 만드는 표가 **같은 네 색**을 쓴다. 주 색 둘·보조 색 둘은 각각
   밝기·진하기를 맞춘 짝이라 값을 바꾸지 않는다. **본문 표와 그림 속 표에만** 쓴다 —
   단추·메뉴·바탕에는 쓰지 않는다(00_디자인시스템.md 「표」).
   토큰은 여기(블로그 글 CSS)에 둔다 — 쓰는 곳이 블로그 본문 표뿐이다.

   class 약속(코크핏 ㊺이 배포본에 넣는다) — `<figure class="wp-block-table …">` 에 붙든
   `<table class="…">` 에 붙든 같다:
     (없음)         표1 — 머리줄 = 표1 주, 첫 열 = 표1 보조(조금 굵게)
     tl-table-2     표2 — 머리줄 = 표2 주, 첫 열 = 표2 보조
     tl-table-head  머리줄에만 색(첫 열은 흰색·보통 굵기). tl-table-2 와 함께 올 수 있다
     tl-table-vs    견줌 — 끝의 두 열: 앞 열 청록(머리 표1 주, 아래 표1 보조), 뒤 열 따뜻한 색
                    (머리 표2 주, 아래 표2 보조). 3열이면 맨 앞 열은 구분 열(색 없음·굵게)
   나머지 칸은 흰색.
   ⚠️ 견줌은 열 수를 세지 않고 **끝에서부터** 고른다(`:nth-last-child`) — 2열이면 앞 열이 곧 첫
      열이고, 3열이면 첫 열이 끝에서 셋째라 구분 열이 된다. `:has()` 없이 갈린다.
   ⚠️ 선택자는 `body.tl-blogpost .entry-content` 안 — 게시판·강의·용어집의 표는 안 걸린다.
      칸이 많은 표를 넓게 두는 규칙(위 `.wp-block-table { max-width: 100% }`)과 휴대폰에서
      넘칠 때 표 안에서 옆으로 미는 동작(워드프레스 `.wp-block-table { overflow-x: auto }`)은 그대로.
   글자 15px(`--tl-f-md`, 본문보다 한 단계 작게 — 칸 안에서 줄이 덜 꺾인다), 줄 간격 1.6,
   칸 여백 10px × 14px(토큰 8·12 는 시안보다 빽빽해 리터럴). */
:root {
  --tl-table-1:      #e0f5f2;   /* 표1 주   — 청록 머리줄 */
  --tl-table-1-soft: #ecf7f6;   /* 표1 보조 — 청록 옅은 칸 */
  --tl-table-2:      #f8eee0;   /* 표2 주   — 따뜻한 머리줄 */
  --tl-table-2-soft: #f9f4ec;   /* 표2 보조 — 따뜻한 옅은 칸 */
}
body.tl-blogpost .entry-content table {
  --tl-t-main: var(--tl-table-1); --tl-t-soft: var(--tl-table-1-soft);
  border-collapse: collapse; border: 1px solid var(--tl-s3); margin: 0;
  font-size: var(--tl-f-md); line-height: 1.6; color: var(--tl-ink); background: #fff;
}
body.tl-blogpost .entry-content :is(.tl-table-2 > table, table.tl-table-2) {
  --tl-t-main: var(--tl-table-2); --tl-t-soft: var(--tl-table-2-soft);
}
body.tl-blogpost .entry-content table :is(th, td) {
  border: 1px solid var(--tl-s3); padding: 10px 14px;
  text-align: left; vertical-align: top; background: #fff; color: var(--tl-ink); font-weight: 400;
}
/* 워드프레스 표 블록은 머리줄 아래에 3px 선을 긋는다 — 격자 1px 로 맞춘다 */
body.tl-blogpost .entry-content table :is(thead, tfoot) { border: 0; }
body.tl-blogpost .entry-content table thead :is(th, td) { background: var(--tl-t-main); font-weight: 700; }
body.tl-blogpost .entry-content table tbody tr > :first-child { background: var(--tl-t-soft); font-weight: 600; }

/* 머리만 — 첫 열은 흰색·보통 굵기 */
body.tl-blogpost .entry-content :is(.tl-table-head > table, table.tl-table-head) tbody tr > :first-child {
  background: #fff; font-weight: 400;
}

/* 견줌 — 끝의 두 열에 청록·따뜻한 색, 3열이면 맨 앞은 구분 열 */
body.tl-blogpost .entry-content :is(.tl-table-vs > table, table.tl-table-vs) tr > * { background: #fff; font-weight: 400; }
body.tl-blogpost .entry-content :is(.tl-table-vs > table, table.tl-table-vs) thead tr > * { font-weight: 700; }
body.tl-blogpost .entry-content :is(.tl-table-vs > table, table.tl-table-vs) thead tr > :nth-last-child(2) { background: var(--tl-table-1); }
body.tl-blogpost .entry-content :is(.tl-table-vs > table, table.tl-table-vs) thead tr > :last-child       { background: var(--tl-table-2); }
body.tl-blogpost .entry-content :is(.tl-table-vs > table, table.tl-table-vs) tbody tr > :nth-last-child(2) { background: var(--tl-table-1-soft); font-weight: 400; }
body.tl-blogpost .entry-content :is(.tl-table-vs > table, table.tl-table-vs) tbody tr > :last-child       { background: var(--tl-table-2-soft); }
body.tl-blogpost .entry-content :is(.tl-table-vs > table, table.tl-table-vs) tr > :nth-last-child(3)      { background: #fff; font-weight: 700; }

/* ══ 표 틀 — 틀 대장은 글쓰기 문법 「표」 꼭지 ═══════════════════════════════
   (66-21, 2026-10-17) 그림으로 넣던 표를 그림과 같은 html 표로. 변환기 regen.py `TABLE_MARKS` 가 표시를 class 로 바꾼다:
     [!표1 머리만 가운데] tl-table-head tl-table-center · [!표2 가운데] tl-table-2 tl-table-center ·
     [!표1 카드] tl-table-card · [!표2 카드] tl-table-2 tl-table-card · [!표2 식] tl-table-2 tl-table-formula · [!표 맨] tl-table-bare
   설계 기록: 10-projects/도구개발 - 그래프/표틀_설계.md(표틀.css 에서 옮김 — 정본은 이제 여기). 표 틀 관리 절차: tolerancelab-blog/CLAUDE.md ㊺.
   여백: 선이 있는 칸 = 위아래 10 · 좌우 14px(위 기본과 같음), 선이 없는 줄(식·맨) = 위아래 0 · 좌우 14px — 식 줄의 첫 줄 위·끝 줄 아래만 10px.
   줄간격: 글줄은 모두 1.6(칸 안 <br> 줄과 칸을 나눈 줄의 줄 사이가 같다), 카드 큰 이름·<small> 만 1.2.
   글자 크기는 사이트 토큰(--tl-f-*, 사이트 추가 CSS): 작은 글자 xs 12 · 본문 줄 sm 14 · 기본 칸·제목 줄 md 15 · 식 머리줄 base 16 · 카드 큰 이름만 28px.
   ⚠️ 카드 틀은 칸(td)에 class 를 달지 않는다 — 워드프레스 표 블록이 저장할 때 칸 class 를 지워 편집기에서 「예기치 않은 콘텐츠」가 된다
      (2026-10-17 WP 7.1.3 블록 검사로 확인). 이름 칸 = 첫 줄 첫 칸(합친 칸, rowspan) · 제목 칸 = 첫 줄 둘째 칸을 자리로 고른다.
      칸 안의 span(tl-card-name · tl-card-sub · tl-li)과 <small> 은 표 블록이 그대로 둔다. */
:root {
  --tl-table-hl:   #C65D33;   /* 카드·식 틀의 강조 글자 (옛 그림의 주황) */
  --tl-table-note: #9D9D9D;   /* <small> 작은 회색 글자 */
}

/* ── 줄바꿈 (모든 블로그 표 — 휴대폰에서 낱말 중간이 끊기던 것, 2026-10-17 선임님 지시)
   keep-all = 한글도 띄어쓰기에서만 끊는다. 칸보다 긴 한 낱말만 어쩔 수 없이 끊는다(break-word).
   공차값 상자·FCF 는 한 덩어리 — 안에서 줄이 바뀌면 「∅0.5 / Ⓛ」처럼 기호가 떨어진다. */
body.tl-blogpost .entry-content .wp-block-table :is(th, td) { word-break: keep-all; overflow-wrap: break-word; }
body.tl-blogpost .entry-content .wp-block-table :is(.gdt-basic, .gdt-fcf) { white-space: nowrap; }

/* 작은 회색 글자 — 가운데·카드 틀 안의 `<small>…</small>` */
body.tl-blogpost .entry-content .tl-table-center small,
body.tl-blogpost .entry-content .tl-table-card small {
  color: var(--tl-table-note); font-size: var(--tl-f-xs, 12px); line-height: 1.2; font-weight: 400;
}

/* ── 가운데 : 모든 칸 가운데·보통 굵기, 빈 머리 칸은 흰색·선 없음 */
body.tl-blogpost .entry-content :is(.tl-table-center > table, table.tl-table-center) :is(th, td) {
  text-align: center; vertical-align: middle; font-weight: 400 !important; padding: 10px 14px;
}
body.tl-blogpost .entry-content :is(.tl-table-center > table, table.tl-table-center) thead :is(th, td):empty {
  background: #fff !important; border-top-color: #fff; border-left-color: #fff;
}
/* 휴대폰처럼 표 폭이 480px 아래면 좌우 여백 14 → 7px — 4열 표(GD&T는 체계다)가 낱말을 끊지 않게 된 뒤 최소 폭이
   358px 에 딱 붙어 오른쪽 칸이 잘렸다(검토 385px). 화면 폭이 아니라 **표 폭**으로 가른다(container query — 식 틀과 같은 방식). */
body.tl-blogpost .entry-content .tl-table-center { container-type: inline-size; }
@container (max-width: 480px) {
  body.tl-blogpost .entry-content .tl-table-center :is(th, td) { padding: 10px 7px !important; }
}
body.tl-blogpost .entry-content .tl-table-center small { display: inline-block; vertical-align: middle; text-align: left; margin-left: .5em; }
body.tl-blogpost .entry-content .tl-table-center small:first-child { margin-left: 0; }
body.tl-blogpost .entry-content .tl-table-center br + small { display: block; text-align: center; margin: 2px 0 0; }

/* ── 카드 : 왼쪽 이름 칸(첫 줄 첫 칸 — 변환기가 첫 열을 rowspan 한 칸으로 합친다) + 오른쪽 제목 줄(첫 줄 둘째 칸) · 본문 줄 */
body.tl-blogpost .entry-content :is(.tl-table-card > table, table.tl-table-card) { width: 100%; }
body.tl-blogpost .entry-content :is(.tl-table-card > table, table.tl-table-card) :is(th, td),
body.tl-blogpost .entry-content :is(.tl-table-card > table, table.tl-table-card) tbody tr > :first-child {
  background: #fff; font-weight: 400; padding: 10px 14px; vertical-align: middle; text-align: left;
}
body.tl-blogpost .entry-content :is(.tl-table-card > table, table.tl-table-card) tbody tr:first-child > td:first-child {
  background: var(--tl-table-1-soft) !important; width: 20%; text-align: center !important; padding: 10px 14px !important;
}
body.tl-blogpost .entry-content :is(.tl-table-2.tl-table-card > table, table.tl-table-2.tl-table-card) tbody tr:first-child > td:first-child {
  background: var(--tl-table-2-soft) !important;
}
body.tl-blogpost .entry-content .tl-table-card .tl-card-name { display: block; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
body.tl-blogpost .entry-content .tl-table-card tbody tr:first-child > td:first-child small { display: block; text-align: left; font-size: var(--tl-f-xs, 12px); color: var(--tl-ink); margin: 0 0 2px 8%; }
/* 표1 카드(공차·편차·오차): 영문은 이름 아래, 이름·영문 모두 가운데 (2026-10-17 선임님 지시) */
body.tl-blogpost .entry-content .tl-table-card:not(.tl-table-2) tbody tr:first-child > td:first-child small { margin: 2px 0 0; text-align: center; }
body.tl-blogpost .entry-content .tl-table-card .tl-card-sub { display: block; margin-top: 6px; }
body.tl-blogpost .entry-content .tl-table-card tbody td { line-height: 1.6; font-size: var(--tl-f-sm, 14px); }
body.tl-blogpost .entry-content :is(.tl-table-card > table, table.tl-table-card) tbody tr:first-child > td:nth-child(2) { font-size: var(--tl-f-md, 15px); font-weight: 700; }
body.tl-blogpost .entry-content :is(.tl-table-2.tl-table-card > table, table.tl-table-2.tl-table-card) tbody tr:first-child > td:nth-child(2) { font-weight: 400; }
body.tl-blogpost .entry-content .tl-table-card strong { color: var(--tl-table-hl); font-weight: inherit; }
/* 카드 본문의 글머리 줄 — 넘어간 둘째 줄이 글머리(•) 뒤 글자 밑에 서게 (변환기가 <br> 줄을 span.tl-li 로 감싼다) */
body.tl-blogpost .entry-content .tl-table-card .tl-li { display: block; padding-left: .8em; text-indent: -.8em; }
/* 카드 안의 Ⓜ·Ⓛ 은 강조색으로 (2026-10-17 선임님 지시). 기호는 <img> SVG 라 글자색이 안 먹어서
   검정 → --tl-table-hl(#C65D33) 로 바꾸는 필터(계산값, 채널마다 오차 1 미만). 색을 바꾸면 필터도 다시 계산. */
body.tl-blogpost .entry-content .tl-table-card img.gdt-sym:is([src*="symbol_raw_m."], [src*="symbol_raw_l."]) {
  filter: brightness(0) saturate(100%) invert(80%) sepia(14%) saturate(1722%) hue-rotate(318deg) brightness(63%) contrast(207%);
}

/* ── 식 : 머리줄(강조 글자) + 선 없는 식 줄. 식 줄은 머리줄보다 28px 안쪽(첫 줄 42px) · 넘어간 줄은 거기서 28px 더(70px) */
body.tl-blogpost .entry-content :is(.tl-table-formula > table, table.tl-table-formula) { width: 100%; }
body.tl-blogpost .entry-content :is(.tl-table-formula > table, table.tl-table-formula) thead th {
  color: var(--tl-table-hl); font-weight: 400 !important; padding: 10px 14px; font-size: var(--tl-f-base, 16px);
}
body.tl-blogpost .entry-content :is(.tl-table-formula > table, table.tl-table-formula) tbody td {
  background: #fff !important; font-weight: 400 !important; border-width: 0 1px; padding: 0 14px 0 70px; text-indent: -28px; line-height: 1.6; font-size: var(--tl-f-sm, 14px);
}
/* 표 폭이 480px 아래면 들여쓰기 없이 머리줄과 같은 14px 에서(container query — 표 폭으로 가른다) */
body.tl-blogpost .entry-content .tl-table-formula { container-type: inline-size; }
@container (max-width: 480px) {
  body.tl-blogpost .entry-content .tl-table-formula tbody td { padding-left: 14px !important; text-indent: 0 !important; }
}
body.tl-blogpost .entry-content :is(.tl-table-formula > table, table.tl-table-formula) tbody tr:first-child td { padding-top: 10px; }
body.tl-blogpost .entry-content :is(.tl-table-formula > table, table.tl-table-formula) tbody tr:last-child td { padding-bottom: 10px; border-bottom-width: 1px; }

/* ── 맨 : 선·색 없이 가운데에 작게 (일반공차 표 같은 것) — 머리줄은 비워 두고 그리지 않는다(변환기가 비었는지 본다) */
body.tl-blogpost .entry-content :is(.tl-table-bare > table, table.tl-table-bare) { width: auto !important; margin: 0 auto !important; border: 0 !important; background: transparent; }
body.tl-blogpost .entry-content :is(.tl-table-bare > table, table.tl-table-bare) :is(th, td) {
  border: 0 !important; background: transparent !important; font-weight: 400 !important; padding: 0 14px; line-height: 1.6; font-size: var(--tl-f-sm, 14px);
}
body.tl-blogpost .entry-content :is(.tl-table-bare > table, table.tl-table-bare) thead { display: none; }
body.tl-blogpost .entry-content .tl-table-bare { text-align: center; }


/* ══ 표 틀 — 칸 합치기 · 머리줄 여러 줄/없음 · 열 정렬 · 표 제목 · 교차 (66-23, 2026-10-18) ═══════════
   변환기(regen.py `_grid_html`) md 약속: `^` 위 칸에 합침(rowspan) · `<` 왼쪽 칸에 합침(colspan) · 구분줄 위 줄은 모두 머리줄, 구분줄이 첫 줄이면 머리줄 없음 ·
   구분줄 `:---:`/`---:`/`:---` 열 정렬 · 표시 뒤의 글 = 표 제목 · `[!표 교차]`. 설계 기록 표틀_설계.md 맨 아래 꼭지(표틀.css 「표 제목」 꼭지부터 옮김).
   ⚠️ 워드프레스 표 블록이 그대로 두는 꼴만 쓴다(로컬 WP 7.1.3 블록 검사) — 칸 class·style 은 저장 때 지워져 「예기치 않은 콘텐츠」가 된다. 그래서
      정렬 = 블록 제 꼴 `has-text-align-*`(설계의 tl-ac·tl-ar 대신) · 제목 = 블록 제 캡션 `figcaption.wp-element-caption`(표 **뒤**에 붙으므로 아래에서 위로 올림 — 설계의 앞에 둔 tl-table-title 대신) ·
      첫 열을 세로로 합친 표에서 밀려 들어온 칸 = 자리로 고름(설계의 td.tl-c0 · tl-table-merged 대신). */

/* 표 제목 — 표 위 가운데 굵은 글자. 블록 캡션은 표 뒤에 있으므로 figure 를 세로 flex 로 두고 캡션을 맨 앞으로 */
body.tl-blogpost .entry-content figure.wp-block-table:has(> figcaption.wp-element-caption) { display: flex; flex-direction: column; }
body.tl-blogpost .entry-content figure.wp-block-table > figcaption.wp-element-caption {
  order: -1; caption-side: top; text-align: center; font-weight: 700; font-size: var(--tl-f-base, 16px); line-height: 1.6;
  margin: 0 0 10px; color: var(--tl-ink);
}

/* 열 정렬 — 블록 제 정렬 class(사이트 표 기본 `text-align: left` 보다 세게). 가운데 열은 세로도 가운데(설계 tl-ac 와 같음) */
body.tl-blogpost .entry-content .wp-block-table :is(th, td).has-text-align-center { text-align: center; vertical-align: middle; }
body.tl-blogpost .entry-content .wp-block-table :is(th, td).has-text-align-right { text-align: right; }
body.tl-blogpost .entry-content .wp-block-table :is(th, td).has-text-align-left { text-align: left; }

/* 합친 칸: 세로로 합친 칸은 가운데에 선다 · 머리줄이 여러 줄이면 줄 사이에도 1px 격자 */
body.tl-blogpost .entry-content .wp-block-table :is(th, td)[rowspan] { vertical-align: middle; }
body.tl-blogpost .entry-content .wp-block-table thead tr + tr :is(th, td) { border-top-width: 1px; }
/* 첫 열을 세로로 합친 표: 아래 줄들의 첫 칸은 진짜 첫 열이 아니다(둘째 열이 밀려 들어옴) — 사이트의 `tbody tr > :first-child`(첫 열 옅은 색·굵게)를
   흰색·보통 굵기로 되돌린다. 첫 칸의 rowspan 이 k 면 그 아래 k-1 줄(2~8줄까지 — 변환기가 더 긴 세로 합치기를 막는다).
   한계: 첫 열이 이미 덮인 줄에서 둘째 열 칸이 세로로 합쳐져 있으면 그 칸을 첫 열 합치기로 잘못 읽는다(지금 글에는 없음). */
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="2"]) + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="3"]) + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="3"]) + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="4"]) + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="4"]) + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="4"]) + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="5"]) + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="5"]) + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="5"]) + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="5"]) + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="6"]) + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="6"]) + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="6"]) + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="6"]) + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="6"]) + tr + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="7"]) + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="7"]) + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="7"]) + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="7"]) + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="7"]) + tr + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="7"]) + tr + tr + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="8"]) + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="8"]) + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="8"]) + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="8"]) + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="8"]) + tr + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="8"]) + tr + tr + tr + tr + tr + tr > :first-child,
body.tl-blogpost .entry-content .wp-block-table tbody tr:has(> :first-child[rowspan="8"]) + tr + tr + tr + tr + tr + tr + tr > :first-child {
  background: #fff; font-weight: 400;
}

/* 교차(`[!표 교차]`, 도형 × 공간): 모서리 칸 회색 · 윗머리 둘째 줄 옅게 · 첫 열 따뜻한 색 · 둘째 열(머리열 둘째) 옅게 */
body.tl-blogpost .entry-content :is(.tl-table-cross > table, table.tl-table-cross) thead tr:first-child > :first-child { background: #ECEBE8 !important; }
body.tl-blogpost .entry-content :is(.tl-table-cross > table, table.tl-table-cross) thead tr:nth-child(2) > * { background: #F7F7F5 !important; }
body.tl-blogpost .entry-content :is(.tl-table-cross > table, table.tl-table-cross) tbody tr > :first-child { background: var(--tl-table-2-soft) !important; font-weight: 400 !important; }
body.tl-blogpost .entry-content :is(.tl-table-cross > table, table.tl-table-cross) tbody tr > :nth-child(2) { background: #F7F7F5 !important; }

/* ══ 표 — 옆으로 밀 수 있다는 표시 (66-24, 2026-10-18 선임님 결정) ══════════════════════════════════
   휴대폰에서 칸보다 넓은 표는 지금처럼 표 안에서 옆으로 민다(워드프레스 `.wp-block-table { overflow-x: auto }`). 밀 수 있을 때만
   가장자리 24px 가 흰 바탕으로 스러진다 — 처음엔 오른쪽, 민 뒤엔 왼쪽도, 끝까지 밀면 오른쪽이 사라진다. 글자 안내는 없다.
   왜 그림이 아니라 밀기인가: 표가 글자로 남아야 고르기·검색·확대·다크 모드가 산다. 441px 표를 324px 칸에 그림으로 맞추면 글자가 11px 이 된다.
   방법: 스크롤 연동 애니메이션(`animation-timeline: scroll(self inline)`)이 figure 에 mask 를 씌운다. 넘치지 않는 표는 스크롤 타임라인이 비활성이라
   애니메이션이 걸리지 않고 mask 도 없다(그래서 넘치지 않는 표는 1px 도 안 바뀐다). mask 는 figure 상자에 고정이라 칸 바탕색 위에서도 보인다
   (figure background 에 그리는 옛 「scroll shadow」 는 표 칸에 가려 안 보인다). 위아래는 66-22 padding 그대로 — 그 자리는 비어 있어 띠는 표 높이에만 보인다.
   지원: 크롬·엣지 115+ · 사파리 26+(iOS 26 포함, 2026-10-18 WebKit 26.5 로 확인). 그 밖(옛 iOS·파이어폭스)은 표시 없이 지금처럼 민다. */
@keyframes tl-table-swipe {
  0%, 3%    { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
              mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  4%, 96%   { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
              mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
  97%, 100% { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px);
              mask-image: linear-gradient(to right, transparent, #000 24px); }
}
@supports (animation-timeline: scroll()) {
  body.tl-blogpost .entry-content figure.wp-block-table {
    animation: tl-table-swipe linear both;
    animation-timeline: scroll(self inline);
  }
}

/* ═══════════════════════════════════════════════════════════
   화면을 옮길 때 하얗게 번쩍이지 않게 (2026-10-21, 선임님 「푸터가 하얗게 번쩍인다」)
   같은 사이트 안에서 쪽을 옮길 때 브라우저가 옛 화면을 붙들고 있다가 새 화면으로 부드럽게 바꿔 준다
   (크롬·엣지·사파리 신형의 「쪽 간 전환」). 지원하지 않는 브라우저는 예전 그대로 — 해가 없다.
   푸터는 이름을 붙여 따로 두어, 본문이 바뀌는 동안 흔들리지 않고 새 자리로 미끄러진다. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-footer { view-transition-name: tl-footer; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
  ::view-transition-group(tl-footer) { animation-duration: .25s; }
}