@charset "UTF-8";
/*
 Theme Name:   GeneratePress EP Theme
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme made by EP.
 Author:       EVERYDAY PRACTICE
 Author URI:   http://everyday-practice.com
 License:      GNU General Public License v3.0 (or later)
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Template:     generatepress
 Version:      0.1
*/
/* Initialize */
:root {
  --color-white: #fff;
  --color-black: #000;
}

html,
body,
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* 모바일 판형과 넓은 화면 사이. PC 레이아웃 그대로인데 칸만 좁아지는
   구간이라, 여기서만 글자 급을 한 단계 내린다(_midrange.scss).
   아래끝은 $tablet 바로 위다 — 1024px 이하는 모바일 규칙이 맡는다. */
/* 한 줄짜리 색 박스. 안에 [왼쪽 내용]과 [오른쪽 내용]을 담는 띠다.
   TQS 의 티켓 버튼·FAQ 질문 줄, Magazine 의 관련 글이 같은 물건이라
   모양을 여기 한 곳에서 낸다 — 따로 적어두면 한쪽만 고쳐져 서로 어긋난다.
   색만 다르므로 인자로 받는다. */
/* 배경 칠한 라벨 태그의 겉모양. 색만 빼고 전부 여기 있다.
   기준은 Movement 아카이브 카드의 유형 태그(.mv-card__type)이고, 사이트의 나머지
   태그가 같은 값을 쓴다 — 상세 페이지의 유형(.movement-single__type),
   Now 의 status(카드·상세), 칸 라벨(.thaum-grid__tag), About 소제목.
   같은 물건이 화면마다 다른 크기로 서 있으면 안 되니 한 곳에서 낸다.

   색(배경·글자)은 태그마다 다르므로 여기서 정하지 않는다 — status 는 상태별로,
   Movement 유형은 term 의 icon-color 로 갈린다. 겉모양만 공유한다.

   좁은 화면 기준값이다. 지금 쓰는 곳은 전부 @include tablet 안이다. */
header {
  z-index: 10;
  position: sticky;
  padding: var(--ep-margin);
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  gap: var(--ep-margin);
  grid-template-columns: repeat(12, 1fr);
  /* 메뉴를 읽는 동안만 깔리는 단색 바탕.
     헤더는 배경 없이 본문(네트워크 캔버스·이미지·색 배경) 위에 sticky 로 떠
     있어서, 밑에 밝거나 복잡한 게 지나가면 메뉴가 안 읽힌다. 그래서 메뉴에
     마우스를 올린 동안만 헤더 높이만큼 단색을 깔아 글자를 띄운다.

     색은 페이지 배경과 같아야 띠로 보이지 않는다. TQS 상세는 들어올 때마다
     배경색이 달라지는데(--tqs-bg, inc/tqs-background.php), 그 값이 :root 에
     꽂히므로 여기서 그대로 받아 쓴다. 다른 페이지에는 그 변수가 없으니
     폴백인 흰색이 된다 — 규칙을 따로 둘 필요가 없다.

     inset: 0 이라 패딩까지 헤더 전체를 덮는다. z-index: -1 은 헤더 안에서만
     뒤로 가는 것이다(헤더가 z-index: 10 + sticky 로 자기 쌓임 맥락을 만든다).
     그래서 헤더 내용보다는 뒤, 본문보다는 앞에 놓인다. */
}
header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--tqs-bg, #fff);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
header:has(.menu-container:hover)::before {
  opacity: 1;
}
header .header--home-logo {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-column: 1/3;
}
header .header--home-logo h1 {
  font-size: 1.3125rem;
  font-weight: 600;
  margin: 0;
}
header .menu-container {
  display: flex;
  gap: var(--ep-margin);
  grid-column: 3/10;
  height: -moz-fit-content;
  height: fit-content;
}
header .menu-container .menu-menu-col-1-container ul, header .menu-container .menu-menu-col-2-container ul, header .menu-container .menu-menu-col-3-container ul {
  margin: 0;
}
header .menu-container .menu-menu-col-1-container ul li, header .menu-container .menu-menu-col-2-container ul li, header .menu-container .menu-menu-col-3-container ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: opacity 0.3s ease;
}
header .menu-container .menu-menu-col-1-container ul li.disabled, header .menu-container .menu-menu-col-2-container ul li.disabled, header .menu-container .menu-menu-col-3-container ul li.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
header .menu-container .menu-menu-col-1-container ul li.disabled:hover, header .menu-container .menu-menu-col-2-container ul li.disabled:hover, header .menu-container .menu-menu-col-3-container ul li.disabled:hover {
  background: none;
  color: #000;
}
header .menu-container .menu-menu-col-1-container ul li a, header .menu-container .menu-menu-col-2-container ul li a, header .menu-container .menu-menu-col-3-container ul li a {
  font-size: 1.3125rem;
  font-weight: 600;
}
header .menu-container .menu-menu-col-1-container ul li, header .menu-container .menu-menu-col-2-container ul li, header .menu-container .menu-menu-col-3-container ul li {
  /* 지금 보고 있는 페이지 표시.
     라벨 앞에 작은 정사각형을 채운다 — 필터 바 체크박스·아카이브
     전환 탭(.thaum-bar__tab.is-active)과 같은 표식이다.
     활성 항목만 사각형+여백만큼 오른쪽으로 밀려 나온다.

     current-menu-ancestor 는 상세 페이지 몫이다. 워드프레스는
     주소가 똑같을 때(=아카이브)만 current-menu-item 을 주므로,
     상세에서 제 섹션을 찾아 표시하는 건 inc/nav-current.php 가 한다. */
  /* 링크를 inline-flex 로 두고 사각형을 글줄 한가운데에 맞춘다.
     inline-block + baseline 이면 사각형이 글자 밑선에 앉아
     아래로 치우쳐 보인다. 아카이브 전환 탭(.thaum-bar__tab)이
     쓰는 것과 같은 방식이다. */
}
header .menu-container .menu-menu-col-1-container ul li.current-menu-item > a, header .menu-container .menu-menu-col-1-container ul li.current-menu-ancestor > a, header .menu-container .menu-menu-col-2-container ul li.current-menu-item > a, header .menu-container .menu-menu-col-2-container ul li.current-menu-ancestor > a, header .menu-container .menu-menu-col-3-container ul li.current-menu-item > a, header .menu-container .menu-menu-col-3-container ul li.current-menu-ancestor > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
header .menu-container .menu-menu-col-1-container ul li.current-menu-item > a::before, header .menu-container .menu-menu-col-1-container ul li.current-menu-ancestor > a::before, header .menu-container .menu-menu-col-2-container ul li.current-menu-item > a::before, header .menu-container .menu-menu-col-2-container ul li.current-menu-ancestor > a::before, header .menu-container .menu-menu-col-3-container ul li.current-menu-item > a::before, header .menu-container .menu-menu-col-3-container ul li.current-menu-ancestor > a::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background-color: currentColor;
}
header .menu-container {
  /* 지금 보고 있는 섹션이 아닌 항목은 흐리게 둔다.
     세 칸(col-1·2·3)을 통틀어 활성 항목이 하나라도 있을 때만이라,
     판단은 .menu-container 가 통째로 한다 — ul 마다 보면 활성 항목이
     없는 나머지 두 칸이 흐려지지 않는다.

     메인 페이지는 어느 섹션도 아니라 활성 항목이 없다. 그래서 따로
     빼지 않아도 메뉴가 다 같은 무게로 남는다(검색 결과·404 도 같다).
     :has() 를 모르는 브라우저에서는 흐려지지 않을 뿐, 표식은 그대로다. */
}
header .menu-container:has(.current-menu-item, .current-menu-ancestor) li:not(.current-menu-item):not(.current-menu-ancestor) {
  opacity: 0.5;
}
header .menu-container:has(.current-menu-item, .current-menu-ancestor) li:not(.current-menu-item):not(.current-menu-ancestor):hover {
  opacity: 1;
}
header .header--sub-components {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ep-margin) / 2);
  grid-column: 11/13;
}
header .header--sub-components .header--info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
header .header--sub-components .header--info p {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
  color: #000;
}
header .header--sub-components .header--info {
  /* 두 줄은 링크다([print_header_info]). 예전엔 그냥 글자였고 지금도
     같아 보여야 하므로, 테마(GP)가 a 에 얹는 색·밑줄을 눌러 위 p 의
     값을 그대로 물려받게 한다 — 모바일 푸터의 정책 링크와 같은 처리
     (_mobile-footer.scss 의 .thaum-mfooter__link).
     대신 누를 수 있다는 표시는 남긴다. */
}
header .header--sub-components .header--info a,
header .header--sub-components .header--info a:hover,
header .header--sub-components .header--info a:focus {
  color: inherit;
  text-decoration: none;
}
header .header--sub-components .header--info a:hover,
header .header--sub-components .header--info a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

header.page-header {
  display: none;
}

/* ── 본문 컨테이너 ──────────────────────────────────────────
   GeneratePress 의 #page. 헤더 바로 뒤에 오는 형제이고, 푸터(.site-footer)는
   이 요소 바깥에 있다. 내용이 짧으면 푸터가 화면 중간까지 올라오므로
   최소 높이를 "뷰포트 − 헤더"로 잡아 항상 첫 화면 아래로 밀어둔다.

   헤더가 position:sticky(=문서 흐름에 자리를 차지)라 그대로 빼면 된다.
   fixed 였다면 #page 가 이미 화면 꼭대기에서 시작하므로 빼면 안 된다.

   높이는 상수(--ep-headerH, 64/50px)가 아니라 실측값(--ep-headerBottom)을
   먼저 본다. 헤더는 높이를 못박지 않아 메뉴 줄 수·웹폰트에 따라 달라진다 —
   script.js 의 MeasuredHeight 가 ResizeObserver 로 재서 꽂아준다. 상수는
   그 값이 도착하기 전(첫 페인트)에만 쓰이는 대비책이다.

   .site 만으로 잡지 않는 이유: GeneratePress 는 푸터 위젯 영역에도 같은
   클래스를 준다(#footer-widgets.site). 지금 이 사이트에선 그 영역이 비활성이라
   안 나오지만, 나중에 켜면 푸터가 통째로 한 화면 높이가 된다.
   ───────────────────────────────────────────────────────── */
#page.site {
  min-height: calc(100vh - var(--ep-headerBottom, var(--ep-headerH)));
  min-height: calc(100dvh - var(--ep-headerBottom, var(--ep-headerH)));
}

/* 메뉴 라벨의 영문 → 국문 교체 (inc/nav-menu-ko.php 가 심는 마크업).
   쓰는 곳은 헤더 메뉴지만 규칙은 전역이다 — 같은 마크업이 다른 메뉴(모바일 등)
   에도 나갈 수 있고, 여기서 국문을 감춰두지 않으면 두 이름이 나란히 보인다.

   두 글자를 같은 그리드 칸에 겹쳐 둔다. 칸 너비는 둘 중 넓은 쪽으로 잡히므로,
   바뀔 때 옆 항목이 밀리지 않는다.
   국문명이 없는 항목엔 이 마크업 자체가 안 붙는다. */
.thaum-menu-swap {
  display: inline-grid;
  grid-template-areas: "swap";
  vertical-align: bottom;
}

.thaum-menu-swap__en,
.thaum-menu-swap__ko {
  grid-area: swap;
  /* 톡 튀어나왔다 사르르 멎는 느낌 — expo-out 은 앞머리에서 거리를 거의 다
     먹어치우고 끝에서 길게 잦아든다. 페이드는 그보다 짧게 끊어야 두 글자가
     겹쳐 보이지 않는다. */
  transition: opacity 0.15s ease-out, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.thaum-menu-swap__ko {
  opacity: 0;
  transform: translateY(0.38em);
}

li:hover > a .thaum-menu-swap__en,
a:focus-visible .thaum-menu-swap__en {
  opacity: 0;
  transform: translateY(-0.38em);
}

li:hover > a .thaum-menu-swap__ko,
a:focus-visible .thaum-menu-swap__ko {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  li:hover > a .thaum-menu-swap__en {
    opacity: 1;
    transform: none;
  }
  li:hover > a .thaum-menu-swap__ko {
    opacity: 0;
    transform: translateY(0.38em);
  }
}
@media (prefers-reduced-motion: reduce) {
  .thaum-menu-swap__en,
  .thaum-menu-swap__ko {
    transition: opacity 0.15s ease-out;
    transform: none !important;
  }
}
/* ── mesh 그라디언트 배경 ───────────────────────────────────
   흰 바탕 위에 흐르는 색덩이들. 지금 두 곳이 같은 물건을 쓴다 —
   전체화면 모바일 메뉴(.thaum-mmenu__mesh)와 메인 페이지의 분야 바
   (.thaum-scopes-mesh). 색은 PHP 가 span 마다 --c 로 꽂는다
   (templates/mobile-header.php 의 thaum_mheader_mesh_colors).

   덩이 하나하나를 담는 상자만 하게 키우고 중심을 여섯 자리에 흩어 놓는다.
   그래서 어느 지점이든 두세 덩이가 겹치고, 흰 바탕은 색과 색 사이로만 비친다 —
   가장자리에 작은 덩이를 걸쳐 두면 가운데가 허옇게 빈다.

   섞임은 블렌드 모드 없이 알파 합성으로 낸다. multiply 는 겹칠수록 색을 곱해서
   어두워지는데(색 셋이 겹치면 거의 먹색이 된다), 그냥 반투명하게 쌓으면 겹친
   자리가 두 색의 평균이 된다 — 밝기는 그대로 두고 색만 섞이는 게 이쪽이다.

   덩이는 상자보다 조금만 크게 잡는다. 가장자리와 덩이 사이로 흰 바탕이 살짝씩
   비쳐야 여백감이 남는다 — 색으로 꽉 채우면 그게 사라진다.

   움직임은 transform 만 건드린다 — 위치나 크기를 애니메이션하면 매 프레임
   레이아웃이 다시 계산된다.

   크기(--mesh-unit)·흐림·투명도·속도는 변수로 빼뒀다. 쓰는 자리마다 상자가
   달라서다 — 화면만 한 메뉴와 손바닥만 한 분야 바에 같은 값을 주면 한쪽은
   움직임이 안 보인다.
   ───────────────────────────────────────────────────────── */
.thaum-mesh {
  /* 덩이 크기의 기준 단위. 아래 nth-child 가 이 값에 배수를 곱해 쓴다.
     화면을 덮는 자리(모바일 메뉴)의 기본값이다. */
  --mesh-unit: 1vmax;
  --mesh-blur: 40px;
  --mesh-opacity: 0.55;
  --mesh-speed: 1s;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.thaum-mesh span {
  position: absolute;
  display: block;
  width: var(--s);
  height: var(--s);
  left: var(--x, 50%);
  top: var(--y, 50%);
  margin-left: calc(var(--s) / -2);
  margin-top: calc(var(--s) / -2);
  border-radius: 50%;
  /* 한가운데만 제 색이고 바깥으로 갈수록 끝없이 옅어진다.
     끝을 100% 까지 끌고 가야 옆 덩이와 만나는 자리에 경계가 안 생긴다. */
  background: radial-gradient(circle closest-side, var(--c, #eee) 0%, var(--c, #eee) 22%, rgba(255, 255, 255, 0) 100%);
  filter: blur(var(--mesh-blur));
  opacity: var(--mesh-opacity);
  will-change: transform;
  animation: thaum-mesh-a var(--mesh-speed) ease-in-out infinite alternate;
}
.thaum-mesh {
  /* 여섯 자리. 네 귀퉁이와 가운데 위·아래로 흩어 놓는다. 덮되 꽉 채우지는
     않는 크기라 사이사이로 흰 바탕이 비친다.
     크기·주기를 서로 나눠떨어지지 않게 둬서 같은 배열이 좀처럼 반복되지
     않는다(16·18·20·22·25·28 배). */
}
.thaum-mesh span:nth-child(1) {
  --x: 14%;
  --y: 10%;
  --s: calc(82 * var(--mesh-unit));
  animation-duration: calc(18 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(2) {
  --x: 86%;
  --y: 20%;
  --s: calc(72 * var(--mesh-unit));
  animation-name: thaum-mesh-b;
  animation-duration: calc(22 * var(--mesh-speed));
  animation-delay: calc(-9 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(3) {
  --x: 50%;
  --y: 46%;
  --s: calc(88 * var(--mesh-unit));
  animation-name: thaum-mesh-c;
  animation-duration: calc(20 * var(--mesh-speed));
  animation-delay: calc(-17 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(4) {
  --x: 10%;
  --y: 78%;
  --s: calc(78 * var(--mesh-unit));
  animation-name: thaum-mesh-b;
  animation-duration: calc(16 * var(--mesh-speed));
  animation-delay: calc(-5 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(5) {
  --x: 90%;
  --y: 74%;
  --s: calc(70 * var(--mesh-unit));
  animation-name: thaum-mesh-c;
  animation-duration: calc(25 * var(--mesh-speed));
  animation-delay: calc(-22 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(6) {
  --x: 56%;
  --y: 96%;
  --s: calc(76 * var(--mesh-unit));
  animation-duration: calc(28 * var(--mesh-speed));
  animation-delay: calc(-31 * var(--mesh-speed));
}
.thaum-mesh {
  /* 일곱째부터는 기본적으로 없다. 여섯이면 충분한 상자(화면을 덮는 메뉴, 손바닥만
     한 분야 바)가 대부분이고, 작은 상자에 덩이를 더 깔면 색이 뭉개져 균일한
     색판이 된다 — 여섯이 겹치는 사이로 흰 바탕이 비치는 게 이 배경의 요점이다.

     가로로 긴 상자에서만 켠다(지금은 넓은 화면의 댓글 판 —
     _readersclub-social.scss). 그런 자리는 여섯으로는 덩이 사이가 허옇게 비어
     듬성듬성해 보인다. 마크업은 열둘을 늘 내보내므로(thaum_bar_panel_markup)
     켜고 끄는 일은 여기서만 하면 된다. */
}
.thaum-mesh span:nth-child(n+7) {
  display: none;
}
.thaum-mesh {
  /* 앞의 여섯과 자리가 겹치지 않게 사이사이를 메운다. 크기·주기도 같은 결로
     서로 나눠떨어지지 않는 값을 쓴다(17·19·21·23·24·26 배). */
}
.thaum-mesh span:nth-child(7) {
  --x: 30%;
  --y: 62%;
  --s: calc(74 * var(--mesh-unit));
  animation-name: thaum-mesh-b;
  animation-duration: calc(19 * var(--mesh-speed));
  animation-delay: calc(-13 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(8) {
  --x: 70%;
  --y: 34%;
  --s: calc(84 * var(--mesh-unit));
  animation-name: thaum-mesh-c;
  animation-duration: calc(21 * var(--mesh-speed));
  animation-delay: calc(-7 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(9) {
  --x: 38%;
  --y: 6%;
  --s: calc(68 * var(--mesh-unit));
  animation-duration: calc(17 * var(--mesh-speed));
  animation-delay: calc(-25 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(10) {
  --x: 68%;
  --y: 88%;
  --s: calc(80 * var(--mesh-unit));
  animation-name: thaum-mesh-b;
  animation-duration: calc(24 * var(--mesh-speed));
  animation-delay: calc(-3 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(11) {
  --x: 2%;
  --y: 40%;
  --s: calc(72 * var(--mesh-unit));
  animation-name: thaum-mesh-c;
  animation-duration: calc(26 * var(--mesh-speed));
  animation-delay: calc(-15 * var(--mesh-speed));
}
.thaum-mesh span:nth-child(12) {
  --x: 98%;
  --y: 52%;
  --s: calc(76 * var(--mesh-unit));
  animation-duration: calc(23 * var(--mesh-speed));
  animation-delay: calc(-19 * var(--mesh-speed));
}

/* 손바닥만 한 상자용 값. 분야 바(#thaum-scopes)와 화면 아래 바 판이 쓴다.

   기본값은 화면을 덮는 자리(모바일 메뉴) 기준이라 그대로 쓰면 덩이 하나가
   70~88vmax, 즉 상자보다 몇 배 크다. 그러면 상자에는 덩이의 한가운데 한
   조각만 비쳐서, 색은 보여도 움직이는 게 안 보인다.

   덩이가 작아지면 흐림도 같이 줄여야 한다 — 200px 짜리에 40px 블러를 걸면
   형체가 뭉개져 균일한 색판이 된다. 주기도 줄인다. 상자가 작으면 같은 속도로는
   정지 화면처럼 보인다. */
.thaum-mesh--compact {
  --mesh-unit: 2.5px;
  --mesh-blur: 18px;
  --mesh-opacity: 0.45;
  --mesh-speed: 0.45s;
}

/* mesh 덩이의 궤적 셋.

   덩이가 상자만 하게 커서 이동폭은 %(제 크기 기준)로 작아 보여도 화면에서는
   크게 움직인다. 다만 너무 밀면 반대쪽 가장자리가 허옇게 비므로 폭은 제
   크기의 1/5 언저리에서 멈추고, 나머지는 크기 변화가 채운다.

   빠르게 하되 산만해지지 않는 건 ease-in-out + alternate 덕이다 — 끝에서
   멈췄다 되돌아오므로 방향이 튀지 않고, 여섯 덩이의 주기가 서로 어긋나
   상자 전체가 한 박자로 들썩이지 않는다. */
@keyframes thaum-mesh-a {
  0% {
    transform: translate3d(-14%, -11%, 0) scale(0.93);
  }
  50% {
    transform: translate3d(16%, 14%, 0) scale(1.2);
  }
  100% {
    transform: translate3d(-7%, 20%, 0) scale(1.02);
  }
}
@keyframes thaum-mesh-b {
  0% {
    transform: translate3d(14%, 12%, 0) scale(1.16);
  }
  50% {
    transform: translate3d(-17%, -14%, 0) scale(0.91);
  }
  100% {
    transform: translate3d(11%, -19%, 0) scale(1.12);
  }
}
@keyframes thaum-mesh-c {
  0% {
    transform: translate3d(-11%, 17%, 0) scale(1.1);
  }
  50% {
    transform: translate3d(19%, -12%, 0) scale(0.9);
  }
  100% {
    transform: translate3d(-17%, 7%, 0) scale(1.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .thaum-mesh span {
    animation: none;
  }
}
/* ── 접기/펼치기 토글 ───────────────────────────────────────
   선 두 개가 겹쳐 '−', 하나가 돌아서 '+'. 지금 두 곳이 같은 물건을 쓴다 —
   메인 페이지의 분야 바(#thaum-scopes)와 좁은 화면에서 화면 아래에 붙는
   바 판(.thaum-bar__panel).

   상태를 클래스가 아니라 버튼의 aria-expanded 로 읽는다. 접힘 클래스는 여닫는
   대상(바깥 상자)에 붙는데 그 이름이 자리마다 다르고, 어차피 JS 가 두 값을 같이
   갱신해야 한다 — 접근성 속성 하나를 기준으로 삼으면 CSS 가 어디서든 통한다.

   원과 그 안의 선은 같은 굵기여야 한 도형으로 읽힌다(둘 다 1px).
   ───────────────────────────────────────────────────────── */
/* 여닫는 동작의 타이밍. 토글 자신(선 회전)과 그 토글이 여닫는 것들(태그 목록,
   바 판, 인트로 진입 버튼)이 같은 값을 써야 한 동작으로 읽힌다 — 값이 갈리면
   버튼은 벌써 +로 바뀌었는데 내용은 아직 접히는 중인 식이 된다.

   커브는 뒤로 갈수록 길게 느려지는 쪽(easeOutQuint)이다. 기본 ease 는 끝에서
   급하게 멈춰 딱딱하게 읽힌다. 그만큼 시간도 넉넉히 준다(원래 0.35s).
   느리게 느껴지지 않는 건 이 커브가 앞쪽에서 거리를 거의 다 가기 때문이다 —
   뒤의 절반은 눈에 띄지 않게 잦아드는 구간이다.

   여닫는 속도를 바꾸고 싶으면 이 값 하나만 고치면 된다. 쓰는 곳은 토글의 선
   회전, 바 판, 분야 바의 태그 목록·진입 버튼, 그리고 접힐 때 같이 줄어드는
   gap 들이다. */
:root {
  --thaum-collapse-dur: 0.7s;
  --thaum-collapse-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 움직임을 줄이기로 한 환경에서는 시간을 0 으로 만든다 — 토큰 하나만 눌러도
   이 값을 쓰는 전환이 전부 따라 멈춘다. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --thaum-collapse-dur: 0.01ms;
  }
}
.thaum-toggle {
  --toggle-size: 26px;
  --toggle-line: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 0;
  width: var(--toggle-size);
  height: var(--toggle-size);
  padding: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: transparent;
  color: #000;
  cursor: pointer;
}

/* 손가락에는 호버가 없다. 탭한 자리에 :hover 가 걸린 채 남아 버튼이 계속
   눌린 것처럼 보인다 — 게다가 이 버튼은 아무 규칙도 주지 않으면 테마(GP)의
   `button:hover { background: #3f4047; color: #fff }` 를 그대로 받아 시커멓게
   찬다. 좁은 화면에서는 바탕 규칙과 같은 값으로 눌러둔다.

   :focus-visible 은 건드리지 않는다 — 탭으로는 걸리지 않고 키보드로 옮겨
   다닐 때만 켜지는 표시다. */
@media (max-width: 1024px) {
  .thaum-toggle:hover,
  .thaum-toggle:focus,
  .thaum-toggle:active {
    border-color: #000;
    background: transparent;
    color: #000;
  }
}
.thaum-toggle__icon {
  position: relative;
  display: block;
  width: var(--toggle-line);
  height: var(--toggle-line);
}
.thaum-toggle__icon::before, .thaum-toggle__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--toggle-line);
  height: 1px;
  margin-top: -0.5px;
  background: currentColor;
  transition: transform var(--thaum-collapse-dur) var(--thaum-collapse-ease);
}
.thaum-toggle__icon::after {
  transform: rotate(0deg);
}

.thaum-toggle[aria-expanded=false] .thaum-toggle__icon::after {
  transform: rotate(90deg);
}

/* ══ 모바일 헤더 + 전체화면 메뉴 ═══════════════════════════════════════
   마크업은 templates/mobile-header.php, 여닫는 동작은 assets/js/mobile-menu.js.

   PC 헤더와 모바일 헤더는 둘 다 generate_header 훅으로 나가고 여기서 폭으로
   가른다. 서버는 화면 폭을 모르니 고르는 일은 CSS 몫이다.
     ~1024px  PC 헤더(body > header) 숨김 / 모바일 헤더 보임
     1025px~  그 반대

   body > header 로 집는 이유: 사이트에서 body 의 직계 <header> 는 PC 헤더
   엘리먼트 하나뿐이다. 그냥 header 로 적으면 본문 안의 header.page-header 까지
   같이 사라진다.

   --ep-margin 에는 폴백을 붙여 쓴다. 이 변수는 :root[data-size=…] 안에만
   선언돼 있는데 그 data-size 를 붙이는 코드가 사이트에 없어서, 폴백 없이 쓰면
   여백이 통째로 0 이 된다. */
.thaum-mheader {
  display: none;
}

@media (max-width: 1024px) {
  body > header {
    display: none;
  }
  .thaum-mheader {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--ep-margin, 15px);
    padding: var(--ep-margin, 15px);
    background-color: transparent;
  }
  .thaum-mheader__home {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #000;
    text-decoration: none;
  }
  .thaum-mheader__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.15;
  }
  .thaum-mheader__title-ko {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.15;
  }
  /* 메뉴 버튼 — 사각형 안에 2px 선 셋.
       테두리도 같은 2px 다 — 상자와 선이 한 굵기라야 도형으로 읽힌다.
       상태에 따라 색이 변하지 않는다: 열고 닫는 건 X 로 접히는 움직임이
       혼자 말한다. 그래서 hover/focus/active 를 바탕 규칙과 같이 묶어
       테마(GP)가 버튼에 얹는 색까지 한 번에 눌러둔다. */
  .thaum-mheader__toggle,
  .thaum-mheader__toggle:hover,
  .thaum-mheader__toggle:focus,
  .thaum-mheader__toggle:active {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    border: 1px solid rgb(0, 0, 0);
    backdrop-filter: blur(100px);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
  }
  .thaum-mheader__bars {
    position: relative;
    display: block;
    width: 22px;
    height: 14px;
  }
  .thaum-mheader__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease-out;
  }
  .thaum-mheader__bars span:nth-child(1) {
    top: 0;
  }
  .thaum-mheader__bars span:nth-child(2) {
    top: 50%;
    margin-top: -1px;
  }
  .thaum-mheader__bars span:nth-child(3) {
    bottom: 0;
  }
  .thaum-mheader__toggle.is-open .thaum-mheader__bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .thaum-mheader__toggle.is-open .thaum-mheader__bars span:nth-child(2) {
    opacity: 0;
  }
  .thaum-mheader__toggle.is-open .thaum-mheader__bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* ── 전체화면 메뉴 패널 ──────────────────────────────────────── */
  .thaum-mmenu {
    position: fixed;
    inset: 0;
    z-index: 9998;
    height: 100dvh;
    background-color: var(--tqs-bg, #fff);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.28s ease-out, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .thaum-mmenu.is-open {
    opacity: 1;
    transform: none;
  }
  body.thaum-mmenu-open {
    overflow: hidden;
  }
  /* 배경 mesh 그라디언트는 분야 바와 함께 쓰는 컴포넌트다 — styles/_mesh.scss.
     색은 아래 마크업(templates/mobile-header.php)이 span 마다 --c 로 꽂는다.
     여기서 따로 손댈 값은 없다. 화면을 덮는 자리라 기본값이 곧 이 자리의 값이다. */
  /* 위(검색+메뉴)를 위로, 아래(회원+정책)를 바닥으로 미는 세로 배치.
       헤더 줄이 패널 위에 겹쳐 떠 있으므로 그 높이만큼 위를 비워둔다.
       높이는 상수로 박지 않고 실측값을 쓴다(assets/js/mobile-menu.js 가
       --thaum-mheader-h 에 넣는다) — 국문 한 줄이 늘고 줄면 바 높이도 변한다. */
  .thaum-mmenu__inner {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--ep-margin, 15px) * 2);
    padding: calc(var(--thaum-mheader-h, 72px) + var(--ep-margin, 15px)) var(--ep-margin, 15px) calc(var(--ep-margin, 15px) * 2 + env(safe-area-inset-bottom, 0px));
  }
  .thaum-mmenu__top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ep-margin, 15px) * 1.5);
  }
  .thaum-mmenu__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  /* 검색 — SearchWP 폼의 기본 모양을 갈아끼운다.
       뒤에 mesh 가 흐르는 자리라 반투명 판으로 띄운다. backdrop-filter 가
       입력칸 뒤편(=mesh)만 흐리게 만들어, 색은 비쳐 보이되 글자는 안 묻힌다. */
  .thaum-mmenu__search .searchwp-form {
    width: 100%;
  }
  .thaum-mmenu__search {
    /* 선택자를 플러그인 기본 규칙(form.searchwp-form input.swp-input--search)
           보다 무겁게 적는다 — 그러지 않으면 패딩과 색이 그쪽에 밀린다.

           돋보기 아이콘은 그 기본 규칙이 입력칸 배경으로 넣어주는 것이라
           건드리지 않고 살려둔다(PC 헤더도 돋보기만 남긴다). 그래서 배경은
           shorthand 대신 background-color 로만 얹고, 오른쪽에 아이콘 자리를
           비워 글자가 겹치지 않게 한다. */
  }
  .thaum-mmenu__search form.searchwp-form input.swp-input--search {
    width: 100%;
    border: solid 1px rgb(0, 0, 0);
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    /* 돋보기도 플레이스홀더와 같은 농도로. 플러그인 기본 아이콘은
             fill 이 #CFCFCF 로 박혀 있어 CSS 로는 못 바꾼다 — 같은 path 를
             rgba(0,0,0,0.45) 로 칠해 얹는다(모양은 그대로). */
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.06786 12.1357C7.3777 12.1357 8.60074 11.7096 9.59495 10.9995L13.3351 14.7396C13.5087 14.9132 13.7375 15 13.9742 15C14.4871 15 14.858 14.6055 14.858 14.1005C14.858 13.8638 14.7791 13.6428 14.6055 13.4692L10.889 9.74487C11.6702 8.7191 12.1357 7.44871 12.1357 6.06786C12.1357 2.73014 9.40558 0 6.06786 0C2.72225 0 0 2.73014 0 6.06786C0 9.40558 2.72225 12.1357 6.06786 12.1357ZM6.06786 10.8259C3.45608 10.8259 1.30984 8.67175 1.30984 6.06786C1.30984 3.46397 3.45608 1.30984 6.06786 1.30984C8.67175 1.30984 10.8259 3.46397 10.8259 6.06786C10.8259 8.67175 8.67175 10.8259 6.06786 10.8259Z' fill='black' fill-opacity='1'/%3E%3C/svg%3E");
    backdrop-filter: blur(100px);
    padding: 7px 9px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
  }
  .thaum-mmenu__search form.searchwp-form input.swp-input--search::-moz-placeholder {
    color: rgb(0, 0, 0);
  }
  .thaum-mmenu__search form.searchwp-form input.swp-input--search::placeholder {
    color: rgb(0, 0, 0);
  }
  .thaum-mmenu__search .search-submit {
    display: none;
  }
  /* 메뉴 — 한 줄에 하나씩. */
  .thaum-mmenu__nav ul.thaum-mmenu__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .thaum-mmenu__nav ul.thaum-mmenu__list li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .thaum-mmenu__nav ul.thaum-mmenu__list a {
    display: inline-block;
    padding: 2px 0;
    font-size: 1.3125rem;
    font-weight: 500;
    line-height: 1.1;
    color: #000;
    text-decoration: none;
  }
  .thaum-mmenu__nav ul.thaum-mmenu__list li.current-menu-item > a,
  .thaum-mmenu__nav ul.thaum-mmenu__list li.current-menu-ancestor > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .thaum-mmenu__nav ul.thaum-mmenu__list li.current-menu-item > a::before,
  .thaum-mmenu__nav ul.thaum-mmenu__list li.current-menu-ancestor > a::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    background-color: currentColor;
  }
  /* 아래 — 회원은 한 행, 정책은 한 열. */
  .thaum-mmenu__account {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: calc(var(--ep-margin, 15px) * 1.5);
  }
  .thaum-mmenu__links {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .thaum-mmenu__link {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    text-decoration: none;
  }
  /* 마지막 링크만 2px 끌어올린다. 세로로 쌓인 정책 열에서 줄 간격을 다듬는
     값이다 — 가로로 선 회원 행(회원가입·로그인)에서는 마지막 하나만 위로
     떠서 둘의 y 가 어긋난다. 그래서 열 안으로 자리를 좁힌다. */
  .thaum-mmenu__links .thaum-mmenu__link:last-child {
    margin-top: -2px;
  }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .thaum-mmenu {
    transform: none;
    transition: opacity 0.28s ease-out;
  }
  .thaum-mheader__bars span {
    transition: opacity 0.15s ease-out;
  }
}
/* ── Bar ────────────────────────────────────────────────────
   가로 바 컴포넌트의 공통 레이아웃·타이포.
   헤더와 같은 12분할 그리드 위에 [left 2] [center 4] [right 6] 으로 앉는다.
   슬롯 이름은 위치만 가리킨다 — 안에 뭐가 들어가든 상관없게.

   <div class="thaum-bar">
     <div class="thaum-bar__left"><h2 class="thaum-bar__heading">제목</h2></div>
     <div class="thaum-bar__center">…</div>
     <div class="thaum-bar__right">…</div>
   </div>

   칸 비율은 커스텀 프로퍼티로 갈아끼운다. 12분할 기준 grid-column 값이라
   헤더·리스팅과 세로선이 항상 맞는다.
     <div class="thaum-bar" style="--bar-center: 3 / 9; --bar-right: 9 / 13;">

   가운데 칸이 없는 자리(상세 페이지)는 2단 변형을 쓴다. 칸이 6+6이라
   본문 그리드(.thaum-grid--duo)와 세로선이 이어진다. 아카이브 필터 바와는
   아예 다른 그리드라는 뜻이므로, 빈 center를 남기지 않고 마크업에서 뺀다.
     <div class="thaum-bar thaum-bar--duo">
       <div class="thaum-bar__left">…</div>
       <div class="thaum-bar__right">…</div>
     </div>
   (PHP는 thaum_bar_markup(['layout' => 'duo', …]) 로 만든다.)
   ───────────────────────────────────────────────────────── */
.thaum-bar {
  --bar-left: 1 / 3;
  --bar-center: 3 / 7;
  --bar-right: 7 / 13;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ep-margin);
  align-items: start;
  padding: 0.5rem 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  /* 폰에서는 바의 선과 여백을 걷는다 — 칸이 세로로 쌓인 자리에 가로선이 남으면
     본문 사이에 검은 줄이 그어진 것처럼 읽힌다.

     상세 페이지 바(.thaum-bar--single)는 뺀다. 그쪽은 헤더 바로 아래에 붙는
     자리라 오히려 떼어 놓을 선이 필요하고, 아래 절에서 옅은 회색으로 따로
     두른다. :not() 으로 비켜 세우는 건 이 규칙이 !important 라 나중 규칙으로는
     못 이기기 때문이다. */
}
@media (max-width: 780px) {
  .thaum-bar:not(.thaum-bar--single) {
    border: none !important;
    padding: 0 !important;
  }
}
.thaum-bar.no-border {
  border-top: 0;
  border-bottom: 0;
}
.thaum-bar.no-border .thaum-bar__center,
.thaum-bar.no-border .thaum-bar__right {
  padding-left: 0;
  border-left: 0;
}
.thaum-bar .thaum-bar__left {
  grid-column: var(--bar-left);
}
.thaum-bar .thaum-bar__center {
  grid-column: var(--bar-center);
  padding-left: 10px;
  border-left: 1px solid #000;
}
.thaum-bar .thaum-bar__right {
  grid-column: var(--bar-right);
  padding-left: 10px;
  border-left: 1px solid #000;
}
.thaum-bar .thaum-bar__left,
.thaum-bar .thaum-bar__center,
.thaum-bar .thaum-bar__right {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ep-margin) / 2);
}
.thaum-bar .thaum-bar__left[hidden],
.thaum-bar .thaum-bar__left [hidden],
.thaum-bar .thaum-bar__center[hidden],
.thaum-bar .thaum-bar__center [hidden],
.thaum-bar .thaum-bar__right[hidden],
.thaum-bar .thaum-bar__right [hidden] {
  display: none;
}
.thaum-bar .thaum-bar__heading {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  line-height: 1.2 !important;
  margin: 0;
}
.thaum-bar {
  /* 아카이브 전환 탭 (.upper 바 가운데 칸).
     앞의 12×12 사각형은 필터 바 체크박스와 같은 표식이다 — 지금 보고 있는
     쪽이 검게 채워진다. 가로 배치·간격은 .upper 가 이미 잡아 둔다.

     지금 페이지도 링크로 두고 있다(components.php 참고). 태그가 갈리면
     두 칸의 크기·정렬이 미묘하게 어긋나서다. */
}
.thaum-bar .thaum-bar__tab {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #000;
}
.thaum-bar .thaum-bar__tab::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: transparent;
}
.thaum-bar .thaum-bar__tab:hover {
  color: #000;
}
.thaum-bar .thaum-bar__tab.is-active::before {
  background-color: #000;
}
.thaum-bar .thaum-bar__group {
  display: flex;
  align-items: baseline;
  gap: var(--ep-margin);
}
.thaum-bar .thaum-bar__label {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
}
.thaum-bar .thaum-bar__content {
  flex: 1 1 auto;
  min-width: 0;
}
.thaum-bar :where(h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
figure,
figcaption,
blockquote,
address) {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}
.thaum-bar.thaum-bar--plain {
  border-top: 0;
  border-bottom: 0;
}
.thaum-bar.thaum-bar--plain .thaum-bar__center,
.thaum-bar.thaum-bar--plain .thaum-bar__right {
  padding-left: 0;
  border-left: 0;
}
.thaum-bar {
  /* 좁은 화면에서는 그리드를 걷어내고 칸을 그냥 세로로 쌓는다.
     칸마다 grid-column: 1 / 7 을 줘도 결과는 같아 보이지만, 그리드는 트랙
     최소폭이 내용(min-width:auto)이라 안 접히는 긴 낱말 하나가 트랙째 넓혀
     바가 화면 밖으로 삐져나간다. flex column 은 칸이 부모 폭을 그대로 받으므로
     그럴 일이 없다 — 여기서는 나눌 칼럼도 없으니 그리드를 쓸 이유가 없다. */
}
@media (max-width: 1024px) {
  .thaum-bar {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ep-margin) / 2);
    /* 그리드에서 align-items 는 세로 정렬이었지만 flex column 에서는 가로다.
       위에서 물려받은 start 를 그대로 두면 칸이 글자 폭만큼만 좁아진다. */
    align-items: stretch;
  }
  .thaum-bar .thaum-bar__left,
  .thaum-bar .thaum-bar__center,
  .thaum-bar .thaum-bar__right {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .thaum-bar .thaum-bar__center,
  .thaum-bar .thaum-bar__right {
    padding-left: 0;
    border-left: 0;
  }
  .thaum-bar .thaum-bar__group {
    flex-wrap: wrap;
  }
}

/* ── 판 껍데기 (넓은 화면) ──────────────────────────────────
   판(thaum_bar_panel_markup)은 좁은 화면에서 화면 아래에 붙는 물건이라,
   넓은 화면에서는 없는 셈 쳐야 한다. 두 가지를 한다.

   1) 바 안에 든 판은 껍데기를 통과시킨다 — display: contents 면 안의 칸들이
      그대로 바 그리드의 자식이 되어 12분할 배치가 하나도 달라지지 않는다.
      겹이 셋이어도 사슬처럼 이어져 통과한다.
   2) 판에서만 쓰는 것들(접기 토글 줄, 배경 mesh)은 감춘다.

   :where() 로 감싸 앞의 .thaum-bar 를 특이도에서 뺀다. 아래 "화면 아래에
   붙인다" 절이 클래스 하나짜리 선택자로 이 값들을 되돌리는데, 그러려면 이쪽이
   그보다 무거우면 안 된다 — 무게가 같으면 나중에 오는 저쪽이 이긴다.
   (판을 바 밖에서 빌려 쓰는 자리도 있다: Readers Club 상세의 댓글.
    거기서는 1)이 아예 안 걸리고 2)만 걸린다 — 판은 흐름 안의 평범한 div 로
    남고 토글·mesh 만 사라져, 예전처럼 본문 뒤에 그냥 이어 붙는다.)
   ───────────────────────────────────────────────────────── */
:where(.thaum-bar) .thaum-bar__panel,
:where(.thaum-bar) .thaum-bar__panel-inner,
:where(.thaum-bar) .thaum-bar__panel-body {
  display: contents;
}

.thaum-bar__panel-head,
:where(.thaum-bar__panel) .thaum-mesh {
  display: none;
}

/* ── 상세 페이지 바 (모바일) ────────────────────────────────
   Movement·Now·News·Magazine·Readers Club 상세의 상단 바가 공유한다
   (PHP 쪽 thaum_bar_markup(['class' => 'thaum-bar--single', …])).

   좁은 화면에서는 칸이 세로로 쌓여 [제목]이 더 이상 가운데 칸에 갇혀 있지
   않다. 그래서 바 전체를 한 급 낮추고 제목만 키워 위아래 위계를 세운다 —
   PC 는 칸이 나뉘어 있어 크기를 안 건드려도 무엇이 제목인지 읽힌다.

   선택자에 .thaum-bar 를 한 번 더 붙여 클래스 셋(0,3,0)으로 만든다.
   포스트타입별 규칙(.thaum-bar--movement-single .movement-single__title 등)이
   클래스 둘이고 @import 순서상 뒤에 오므로, 클래스 둘로는 이 값이 밀린다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-bar.thaum-bar--single {
    font-size: 1rem;
    /* 위 flex column 블록과 같은 이유. 여기서 한 번 더 못박는 건 포스트타입별
       규칙이 바 전체에 align-items: start 를 걸어두기도 해서다
       (.thaum-bar--movement-single). 클래스 하나짜리라 이 줄이 이긴다. */
    align-items: stretch;
    /* 헤더 바로 아래에 붙는 자리다. 좁은 화면에서는 사이에 아무것도 없어서
       제목이 헤더에 얹힌 것처럼 읽힌다 — 위아래로 선을 둘러 한 덩어리로 떼어
       놓고, 안쪽 여백으로 글자를 선에서 띄운다.

       PC 의 검정 선은 이 자리에서 너무 세다. 나누는 일만 하면 되므로 옅게
       둔다(댓글 칸의 연한 구분선 --tc-line-soft 와 같은 값). */
    border-color: #c8c8c8;
    padding: 10px 0;
  }
  .thaum-bar.thaum-bar--single .thaum-bar__heading {
    font-size: 1.125rem;
  }
  .thaum-bar.thaum-bar--single .thaum-bar__label {
    font-size: 1rem;
  }
  .thaum-bar.thaum-bar--single {
    /* 제목에 딸리는 값들 — 카테고리·유형·시리즈·클럽·질문 분야·아티스트.
       칸이 세로로 쌓이면 이것들은 제목 아래 한 줄씩 붙는데, 그 자리에서 제목과
       같은 급이면 무엇이 제목인지 읽히지 않는다. 기준은 Movement 상세의 아티스트
       줄이다(0.8125rem) — 사이트의 '보조' 급이기도 하다(댓글 메타·관련 글 타입).
       포스트타입마다 이름만 다를 뿐 자리도 역할도 같은 값이라 여기서 한 번에 낸다.

       선택자가 클래스 셋(0,3,0)이라 각 포스트타입 파일의 PC 값(클래스 하나)을
       그대로 이긴다 — 저쪽을 건드리지 않아도 된다.

       줄바꿈도 함께 푼다. PC 는 한 줄짜리 라벨이라 nowrap 으로 잡아두지만,
       칸이 화면 폭을 다 쓰는 여기서는 긴 이름이 바를 화면 밖으로 밀어낸다. */
  }
  .thaum-bar.thaum-bar--single .now-single__cat,
  .thaum-bar.thaum-bar--single .news-single__type,
  .thaum-bar.thaum-bar--single .magazine-single__series,
  .thaum-bar.thaum-bar--single .readersclub-single__club,
  .thaum-bar.thaum-bar--single .readersclub-single__scope,
  .thaum-bar.thaum-bar--single .movement-single__artist {
    font-size: 0.8125rem;
    line-height: 1.3;
    white-space: normal;
  }
}
/* ── 2단 바 ────────────────────────────────────────────────
   center 없이 왼쪽·오른쪽 절반씩. 본문 그리드(--duo)와 같은 경계다.

   가운데 세로선은 바와 본문이 각자 자기 칸의 border-left 로 긋는다.
   바 아래로 이어지는 부분은 본문 그리드 몫이다(_grid.scss 의 .thaum-grid--duo).
   안쪽 여백(10px)도 양쪽이 같은 값을 써야 글줄이 한 줄로 이어진다.
   ───────────────────────────────────────────────────────── */
.thaum-bar--duo {
  --bar-left: 1 / 7;
  --bar-right: 7 / 13;
}
.thaum-bar--duo .thaum-bar__right {
  padding-right: 10px;
}
@media (max-width: 1024px) {
  .thaum-bar--duo .thaum-bar__right {
    padding-right: 0;
  }
}

/* ── Filter Bar ─────────────────────────────────────────────
   .thaum-bar 위에 FacetWP 전용 스타일만 얹는다.
   레이아웃·타이포는 건드리지 않는다 — 일반 바와 어긋나면 안 되므로.
   ───────────────────────────────────────────────────────── */
.thaum-filterbar .facetwp-facet {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
  margin: 0;
}
.thaum-filterbar .facetwp-checkbox,
.thaum-filterbar .thaum-facet-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  background: none;
  cursor: pointer;
}
.thaum-filterbar .facetwp-checkbox::before,
.thaum-filterbar .thaum-facet-all::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: transparent;
}
.thaum-filterbar .thaum-facet-all {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-family: inherit;
}
.thaum-filterbar .facetwp-checkbox.checked {
  background: none;
}
.thaum-filterbar .facetwp-checkbox.checked::before,
.thaum-filterbar .thaum-facet-all.is-active::before {
  background-color: #000;
}
.thaum-filterbar .facetwp-checkbox.disabled {
  opacity: 1;
  cursor: default;
}
.thaum-filterbar .facetwp-counter {
  display: none;
}
.thaum-filterbar .facetwp-display-value {
  padding-right: 0;
}
.thaum-filterbar .facetwp-expand {
  display: none;
}

/* ── 모바일: 필터 바 ────────────────────────────────────────
   [Category] 라벨과 칩 목록을 한 덩어리로 묶어 회색 판 위에 올린다.
   페이지 제목(Now·News…)은 판 밖에 남는다 — 묶이는 건 고르는 부분뿐이다.

   칩 모양은 메인 페이지의 모바일 태그(#thaum-scopes)와 같은 어법이다:
   테두리 없이 면으로 채우고 모서리 8px. 그래야 사이트 안에서 '고르는 것'이
   한 가지 모양으로 읽힌다.

   PC 는 [라벨][칩…] 한 줄이지만 여기서는 세로로 쌓는다 — 좁은 폭에서 한 줄에
   두면 라벨이 자리를 먹고 칩이 두세 줄로 접힌다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-filterbar {
    /* 판(배경·모서리·안쪽 여백)은 판 껍데기가 짊어진다 — 아래 "화면 아래에
       붙인다" 절의 .thaum-bar__panel-inner. 여기는 배치만 남는다. */
  }
  .thaum-filterbar .thaum-bar__group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .thaum-filterbar .thaum-bar__label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
  }
  .thaum-filterbar .facetwp-facet {
    gap: 6px;
  }
  .thaum-filterbar {
    /* 칩. 회색 판 위에 한 톤 진한 회색으로 얹어 판과 갈린다.
       고른 칩은 검게 채운다 — 페이지 번호(.facetwp-page.active)와 같은 어법. */
  }
  .thaum-filterbar .facetwp-checkbox,
  .thaum-filterbar .thaum-facet-all {
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .thaum-filterbar .facetwp-checkbox::before,
  .thaum-filterbar .thaum-facet-all::before {
    display: none;
  }
  .thaum-filterbar .facetwp-checkbox.checked,
  .thaum-filterbar .thaum-facet-all.is-active {
    background-color: #000;
    color: #fff;
  }
  /* facet 이 둘 이상이면(Movement 의 Year·Type) 조각이 둘로 온다. 예전에는
     조각마다 판을 깔고 모서리를 나눠 이어 붙였는데, 이제 판이 껍데기 하나라
     그럴 일이 없다 — 조각 사이 간격만 판의 안쪽 여백과 같게 둔다. */
  .thaum-filterbar .thaum-bar__center,
  .thaum-filterbar .thaum-bar__right {
    gap: 10px;
  }
}
/* ── 모바일: 전환 바 (Magazine · Thaumazein Q · About) ───────
   이 바들에는 facet 이 없다. 대신 [Magazine][Thaumazein Q] · [Intro][Main
   Project]… 같은 전환 탭이 '고르는 부분' 이라, 필터 바와 같은 어법으로
   맞춘다 — 고르는 것끼리 모양이 갈리면 같은 사이트로 안 읽힌다.

   회색 판은 탭이 든 가운데 칸만 감싼다(필터 바에서 .thaum-bar__group 만
   감쌌던 것과 같은 자리). 페이지 제목은 판 밖에 남는다.

   둘 다 .upper 를 쓰지만 선택자는 클래스를 하나씩 적는다 — .upper 는 지금
   이 둘만 쓰는 골격이라, 나중에 탭이 아닌 바가 붙어도 여기 딸려오지 않게. */
@media (max-width: 1024px) {
  /* 선택자에 .thaum-bar.upper 를 함께 적어 클래스 셋(0,3,0)으로 만든다.
     이 바의 값을 쥔 규칙들(.thaum-bar.upper, .thaum-bar.upper .thaum-bar__center)이
     클래스 둘·셋인 데다 @import 순서상 뒤(_about.scss)라, 클래스 하나로는
     여기 적은 값이 통째로 밀린다. */
  .thaum-bar--publication.thaum-bar.upper,
  .thaum-bar--about.thaum-bar.upper {
    /* .upper 의 align-items: center 는 PC 에서 한 줄 안의 세로 가운데 정렬이지만,
       칸이 세로로 쌓이는 모바일에서 같은 값은 '가로 가운데'가 된다 — 제목도
       회색 판도 한복판에 떠 있게 된다. 칸을 폭에 맞춰 펴서 왼쪽에 세운다. */
    align-items: stretch;
    /* 판은 껍데기(.thaum-bar__panel-inner)가 깐다. 여기는 탭 배치만. */
  }
  .thaum-bar--publication.thaum-bar.upper .thaum-bar__center,
  .thaum-bar--about.thaum-bar.upper .thaum-bar__center {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }
  .thaum-bar--publication.thaum-bar.upper .thaum-bar__tab,
  .thaum-bar--about.thaum-bar.upper .thaum-bar__tab {
    padding: 2px 5px;
    border-radius: 5px;
    background-color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
  }
  .thaum-bar--publication.thaum-bar.upper .thaum-bar__tab::before,
  .thaum-bar--about.thaum-bar.upper .thaum-bar__tab::before {
    display: none;
  }
  .thaum-bar--publication.thaum-bar.upper .thaum-bar__tab.is-active,
  .thaum-bar--about.thaum-bar.upper .thaum-bar__tab.is-active {
    background-color: #000;
    color: #fff;
  }
}
/* ── 모바일: 목록 페이지의 제목 바 ──────────────────────────
   좁은 화면에서는 고르는 판이 화면 아래로 떠나므로(위 절), 이 바에 남는 건
   페이지 제목 하나뿐이다. 그런데 이 자리는 헤더 바로 아래라 사이에 아무것도
   없다 — 선이 없으면 제목이 헤더에 얹힌 것처럼 읽힌다.

   상세 페이지 바(.thaum-bar--single)와 사정이 같으므로 값도 그쪽과 같게 둔다:
   위아래로 옅은 선(#c8c8c8)을 두르고 10px 로 글자를 선에서 띄운다. 검정 선은
   이 자리에서 너무 세다 — 나누는 일만 하면 된다.

   !important 는 이 파일 위쪽에서 780px 아래의 바 여백과 선을 통째로 지우기
   때문이다(.thaum-bar:not(.thaum-bar--single)). 그 규칙이 !important 라
   같은 무게로만 되받을 수 있다. 780~1024px 구간에서는 지워질 것이 없지만,
   같은 값으로 덮어써 두 구간의 모양을 하나로 맞춘다(원래 값은 검정 선에
   0.5rem 여백이다).

   About 은 아카이브가 아니지만 같은 골격(.upper)을 쓰고 화면에서도 같은
   자리라 함께 넣는다 — 앞서 탭 모양을 맞춰 둔 것과 같은 이유다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-bar.thaum-filterbar,
  .thaum-bar--publication.thaum-bar.upper,
  .thaum-bar--about.thaum-bar.upper {
    padding: 10px 0 !important;
    border-top: 1px solid #c8c8c8 !important;
    border-bottom: 1px solid #c8c8c8 !important;
  }
}
/* ── 판의 겉모양 ────────────────────────────────────────────
   배경 mesh · 둥근 회색 판 · 접기 토글 · 접히는 부분. 판이 어디에 앉는지
   (화면 아래 고정이냐, 아래에 붙었다 흘러가느냐)만 빼고 전부 여기 있다.

   쓰는 자리가 둘이고 켜지는 조건이 서로 달라서 믹스인으로 뺀다.
     · 바 판(아카이브 필터·전환 탭) — 좁은 화면에서만. 넓은 화면에서는
       껍데기가 display: contents 라 판이 아예 없다(위 "판 껍데기" 절).
     · Readers Club 상세의 댓글 판 — 폭과 무관하게 언제나 판이다
       (_readersclub-social.scss).
   선택자를 인자로 받는 건 그래야 각자 자기 조건 안에서만 켜지기 때문이다.
   값은 한 곳에 있으니 둘의 모양이 갈릴 일은 없다.
   ───────────────────────────────────────────────────────── */
/* ── 모바일: 고르는 판을 화면 아래에 붙인다 ─────────────────
   필터 바(.thaum-filterbar)와 전환 바(.upper)의 회색 판은 페이지 맨 위에 있다.
   목록이 한 화면을 넘기는 순간부터 그 판은 화면 밖이라, 다른 걸 고르려면 매번
   맨 위까지 되돌아가야 한다. 판만 떼어 화면 아래에 띄워 늘 손에 닿게 한다.

   여기서 하는 일은 자리를 옮기는 것뿐이다 — 판의 모양은 위 믹스인이 낸다.
   제목(.thaum-bar__left)은 바에 그대로 남아 페이지 위쪽을 지킨다.

   바 밖에서 이 판을 빌려 쓰는 자리도 여기로 함께 들어온다 — Readers Club
   상세의 댓글(templates/readersclub_single.php). 그래서 선택자에 .thaum-bar 를
   적지 않는다. 넓은 화면 쪽 규칙을 :where() 로 가볍게 눌러둔 덕에(위 "판 껍데기"
   절) 클래스 하나로도 이 값들이 그 위에 얹힌다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-bar__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 모바일 헤더(9999)·메뉴 패널(9998) 아래. 메뉴를 열면 그 뒤로 들어간다. */
    z-index: 999;
    display: block;
  }
  .thaum-bar__panel {
    /* 판이 가장자리에 딱 붙지 않게 띄운다. 이 여백까지 포함한 높이를
       script.js 가 재서 --thaum-barpanel-h 로 꽂으므로, 문서 끝에 비워둘
       자리도 그 값 하나로 끝난다(아래 주석). */
    padding: var(--ep-margin);
    /* 실제로 보이는 판. 배경·모서리·안쪽 여백이 여기 있다 — 예전에는 칸들이
       하나씩 짊어졌는데, 토글과 mesh 까지 한 판에 얹으려면 그것들을 담는 상자가
       하나 있어야 한다.
       overflow 는 mesh 때문이다. 색덩이가 모서리 밖으로 새면 둥근 모서리가 사라진다. */
  }
  .thaum-bar__panel .thaum-bar__panel-inner {
    --panel-pad: 10px;
    --panel-toggle: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--panel-pad);
    border-radius: 5px;
    background-color: #f2f2f2;
    overflow: hidden;
    /* 접히면 내용이 사라져 안쪽 여백만 남는데, 토글은 흐름 밖이라 높이를 못 낸다.
       토글이 설 자리는 지켜둔다. */
    min-height: calc(var(--panel-toggle) + var(--panel-pad) * 2);
    transition: gap var(--thaum-collapse-dur) var(--thaum-collapse-ease);
  }
  .thaum-bar__panel .thaum-mesh {
    display: block;
  }
  .thaum-bar__panel {
    /* 토글 줄은 판 맨 윗줄에 얹는다. 흐름에 두면 자기 줄을 차지해서, 판의 첫 줄
       (필터 바의 [Category] 라벨, 전환 바의 탭, 댓글의 "댓글 N")이 그 아래로
       밀린다 — 둘은 한 행에 있어야 읽힌다.

       기준 상자는 .thaum-bar__panel-inner 다(전역 `* { position: relative }`).

       이 줄이 첫 줄 위에 겹쳐 떠 있으므로, 아래 칩을 누르는 손가락을 가로채지
       않게 통과시킨다. 토글만 다시 받는다. */
  }
  .thaum-bar__panel .thaum-bar__panel-head {
    position: absolute;
    top: var(--panel-pad);
    left: var(--panel-pad);
    right: var(--panel-pad);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    /* 펼치면 내용(.thaum-bar__panel-body)이 이 줄과 같은 자리에 서는데, DOM 이
       뒤라 위에 그려진다 — 그대로 두면 토글이 그 밑에 깔려 눌리지 않는다
       (접힌 동안에는 내용 높이가 0 이라 안 가려서, 펴기만 되고 접기는 안 됐다).
       전역 `* { position: relative }` 라 둘 다 위치 지정 요소이므로 한 겹 올린다. */
    z-index: 1;
  }
  .thaum-bar__panel .thaum-bar__panel-head .thaum-toggle {
    pointer-events: auto;
    /* 토글은 언제나 오른쪽 끝. space-between 은 라벨이 감춰진 펼침 상태에서
       자식이 하나뿐이라 왼쪽으로 붙어 버린다 — 남는 자리를 여백이 먹게 한다. */
    margin-left: auto;
  }
  .thaum-bar__panel {
    /* 접었을 때 남는 이름(필터 이름 / 지금 보고 있는 페이지 이름 / 댓글 수).
       펼친 상태에서는 감춘다 — 판 안에 같은 말이 이미 있어서 두 번 읽힌다.
       크기는 판 안의 라벨·탭과 같은 급이라 접고 펴도 글자가 튀지 않는다. */
  }
  .thaum-bar__panel .thaum-bar__panel-label {
    display: none;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .thaum-bar__panel .thaum-toggle {
    --toggle-size: var(--panel-toggle);
    --toggle-line: 11px;
  }
  .thaum-bar__panel {
    /* 접히는 부분. 칸(center·right)이 여럿이라 하나로 묶어야 한 번에 여닫힌다.
       내용이 길면(facet 이 서넛인 바, 댓글이 여럿인 글) 판이 화면을 다 먹으므로
       상한을 두고 넘치는 만큼은 판 안에서 굴린다. */
  }
  .thaum-bar__panel .thaum-bar__panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 내용이 토글 밑으로 파고들지 않게 오른쪽을 비운다. 흐름 밖으로 뺀 요소라
       자리를 스스로 만들지 못한다. 8px 은 토글과의 간격. */
    padding-right: calc(var(--panel-toggle) + 8px);
    max-height: 50vh;
    overflow-y: auto;
    opacity: 1;
    transition: max-height var(--thaum-collapse-dur) var(--thaum-collapse-ease), opacity var(--thaum-collapse-dur) var(--thaum-collapse-ease);
    /* facet 이 하나뿐인 바의 오른쪽 칸은 자리만 지키는 빈 div 다. 접히는 칸
       안에서 gap 만 벌리므로 접는다. (칸이 flex 라 UA 기본값으로는 안 사라진다.) */
  }
  .thaum-bar__panel .thaum-bar__panel-body > :empty {
    display: none;
  }
  .thaum-bar__panel {
    /* 접힘. 분야 바와 같은 방식이다 — 높이를 0 으로 눌러 접고, 껍데기의 gap 도
       같이 지워 토글 줄만 남긴다. 전역 box-sizing: border-box 라 max-height: 0 이면
       안쪽 여백까지 눌린다. */
  }
  .thaum-bar__panel.is-collapsed .thaum-bar__panel-label:not(:empty) {
    display: block;
  }
  .thaum-bar__panel.is-collapsed .thaum-bar__panel-body {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height var(--thaum-collapse-dur) var(--thaum-collapse-ease), opacity var(--thaum-collapse-dur) var(--thaum-collapse-ease);
  }
  .thaum-bar__panel.is-collapsed .thaum-bar__panel-inner {
    gap: 0;
    cursor: pointer;
  }
  /* 판이 문서의 마지막 부분을 덮는다. 목록 끝 카드·페이지 번호가 그 밑에 깔려
     못 눌리지 않도록 판이 차지하는 만큼 자리를 비워야 하는데, 그 자리는 푸터가
     자기 아래 여백으로 내준다(styles/_mobile-footer.scss 의 .thaum-mfooter).

     body 에 주면 푸터 아래로 페이지 배경색 띠가 한 겹 생긴다 — 어차피 화면
     맨 밑은 푸터가 차지하므로 푸터를 늘리는 편이 색까지 저절로 맞는다.

     높이(--thaum-barpanel-h)는 필터 개수와 줄바꿈에 따라 달라져 상수로 적을 수
     없다 — script.js(MeasuredHeight)가 재서 꽂는다. 판이 없는 페이지에서는 값이
     안 들어오므로 0 이 되어 아무 일도 일어나지 않는다. */
}
/* ── Footer ─────────────────────────────────────────────────
   사이트 푸터. [print_footer_content] (templates/footer.php) 전용.

   칸 비율은 2/4/4/2 다. fr 로 적지 않고 12분할 위의 grid-column 으로 잡는다 —
   `2fr 4fr 4fr 2fr` 은 gap 이 끼는 순간 12분할과 경계선이 어긋난다.
   12분할 위에 얹어야 헤더·바(.thaum-bar)·본문(.thaum-grid)과 세로선이 맞는다.

     <div class="thaum-footer__grid">
       <div class="thaum-footer__col thaum-footer__col--brand">   1 / 3
       <div class="thaum-footer__col thaum-footer__col--links">   3 / 7
       <div class="thaum-footer__col thaum-footer__col--info">    7 / 11
       <div class="thaum-footer__col thaum-footer__col--gov">    11 / 13

   칸마다 __top(위)과 __bottom(아래)이 있는데 --info 칸은 __bottom 만 있다.
   빈 __top 으로 자리를 맞추는 대신 __bottom 에 margin-top:auto 를 걸어 바닥에
   붙인다. 그래서 그리드의 align-items 는 stretch 여야 한다 — .thaum-grid /
   .thaum-bar 는 start 를 쓰므로 그대로 베껴오면 칸 높이가 내용만큼 줄어들어
   아래 줄이 서로 다른 높이에 앉는다.

   가로 여백은 넣지 않는다. .thaum-bar 와 같은 규칙으로, 바깥 컨테이너
   (.grid-container 의 padding: 0 var(--ep-margin))가 맡는다.
   ───────────────────────────────────────────────────────── */
.thaum-footer {
  --footer-brand: 1 / 3;
  --footer-links: 3 / 7;
  --footer-info: 7 / 11;
  --footer-gov: 11 / 13;
  --footer-pad: var(--ep-margin);
  --footer-gap: var(--ep-margin);
  --footer-line-gap: calc(var(--ep-margin) / 4);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: var(--footer-pad);
  background-color: #F8F8F8;
}
.thaum-footer :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd,
figure, figcaption, blockquote, address) {
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thaum-footer__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  -moz-column-gap: var(--ep-margin);
       column-gap: var(--ep-margin);
  row-gap: var(--footer-pad);
  align-items: stretch;
}

.thaum-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap);
  min-width: 0;
}

.thaum-footer__col--brand {
  grid-column: var(--footer-brand);
}

.thaum-footer__col--links {
  grid-column: var(--footer-links);
}

.thaum-footer__col--info {
  grid-column: var(--footer-info);
}

.thaum-footer__col--gov {
  grid-column: var(--footer-gov);
}

.thaum-footer__top {
  flex: 0 0 auto;
}

.thaum-footer__bottom {
  flex: 0 0 auto;
  margin-top: auto;
}

/* ── 링크 두 묶음 ───────────────────────────────────────────
   1fr 1fr. 각 묶음은 세로로 쌓이는 링크 목록이다.
   ───────────────────────────────────────────────────────── */
.thaum-footer__navs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ep-margin);
  align-items: start;
}

.thaum-footer__nav {
  display: flex;
  flex-direction: column;
}

.thaum-footer__nav-link {
  display: inline-block;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.5;
}
.thaum-footer__nav-link:hover, .thaum-footer__nav-link:focus-visible {
  text-decoration: underline;
}

/* ── 텍스트 정보 ────────────────────────────────────────────
   사업자 정보·주소·연락처처럼 읽기만 하는 줄들.
   ───────────────────────────────────────────────────────── */
.thaum-footer__texts {
  display: flex;
  flex-direction: column;
}

.thaum-footer__text,
.thaum-footer__copyright {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.thaum-footer__text a,
.thaum-footer__copyright a {
  text-decoration: underline;
}

/* ── 로고 ───────────────────────────────────────────────────
   두 SVG 모두 width/height 속성이 박혀 있다(226×230, 260×44).
   width:100% + height:auto 로 덮어써서 칸 폭을 따라가게 하고, 원본 크기를
   넘지 않도록 max-width 로 잡는다 — 넓은 화면에서 로고만 커지지 않게.
   ───────────────────────────────────────────────────────── */
.thaum-footer__logo,
.thaum-footer__gov {
  display: block;
  width: 100%;
  height: auto;
}

.thaum-footer__logo {
  max-width: 226px;
}

.thaum-footer__gov {
  max-width: 100%;
}

.thaum-footer__logo-link,
.thaum-footer__gov-link {
  display: block;
}

/* ── 태블릿 이하 ────────────────────────────────────────────
   6분할로 좁히고 네 칸을 세로로 쌓는다. 칸이 한 줄씩 차지하면
   "바닥에 붙인다"는 말이 성립하지 않으므로 margin-top:auto 도 푼다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-footer {
    --footer-gap: var(--ep-margin);
  }
  .thaum-footer__grid {
    grid-template-columns: repeat(6, 1fr);
    row-gap: calc(var(--ep-margin) * 2);
  }
  .thaum-footer__col--brand,
  .thaum-footer__col--links,
  .thaum-footer__col--info,
  .thaum-footer__col--gov {
    grid-column: 1/7;
  }
  .thaum-footer__bottom {
    margin-top: 0;
  }
  .thaum-footer__logo {
    max-width: 140px;
  }
}
@media (max-width: 780px) {
  .thaum-footer__navs {
    grid-template-columns: 1fr;
    gap: var(--ep-margin);
  }
}
/* ══ 모바일 푸터 ═══════════════════════════════════════════════════════
   마크업은 templates/mobile-footer.php.

   PC 푸터(.thaum-footer)와 둘 다 generate_footer 훅으로 나가고 여기서 폭으로
   가른다 — 모바일 헤더와 같은 방식이다.
     ~1024px  PC 푸터 숨김 / 모바일 푸터 보임
     1025px~  그 반대
   ══════════════════════════════════════════════════════════════════════ */
.thaum-mfooter {
  display: none;
}

@media (max-width: 1024px) {
  .thaum-footer {
    display: none;
  }
  .thaum-mfooter {
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* 아래로 한 겹 더 비우는 --thaum-barpanel-h 는 화면 아래에 붙는 필터 판이
       덮는 높이다(_bar.scss). 그 자리를 body 여백으로 내주면 푸터 밑에 페이지
       배경색 띠가 생기므로, 푸터가 자기 여백으로 내준다 — 색이 저절로 맞는다.
       판이 없는 페이지에서는 값이 안 들어와 0 이 된다. */
    padding: 25px var(--ep-margin, 10px) calc(25px + env(safe-area-inset-bottom, 0px) + var(--thaum-barpanel-h, 0px));
    color: #000;
    background-color: #EDEDED;
    margin-top: 40px;
  }
  /* 1 — 로고와 정책 링크가 양 끝으로.
     align-items: end 로 둔다. 로고는 높이가 있고 링크는 한 줄이라, 가운데
     정렬이면 링크가 로고 한복판에 떠 보인다. 밑선을 맞추는 쪽이 안정적이다. */
  .thaum-mfooter__top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--ep-margin, 10px);
  }
  .thaum-mfooter__logo-link {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
  }
  .thaum-mfooter__logo {
    display: block;
    width: auto;
    height: auto;
  }
  .thaum-mfooter__links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  /* 버튼 티를 다 걷어낸 글자 링크. 테마(GP)가 a 에 얹는 색·밑줄까지 눌러둔다. */
  .thaum-mfooter__link,
  .thaum-mfooter__link:hover,
  .thaum-mfooter__link:focus {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: #000;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
  }
  /* 2 — 회사 정보와 연락처. 줄 사이는 8px, 두 묶음 사이만 한 칸 더 띄운다. */
  .thaum-mfooter__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .thaum-mfooter__block {
    display: flex;
    flex-direction: column;
  }
  .thaum-mfooter__line {
    margin: 0;
    font-size: 0.7125rem;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
  }
  .thaum-mfooter__line a {
    color: inherit;
    text-decoration: none;
  }
  /* 3 — 카피라이트와 정부 지원 로고가 양 끝으로. */
  .thaum-mfooter__bottom {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ep-margin, 10px);
  }
  .thaum-mfooter__copy {
    margin: 0;
    font-size: 0.7125rem;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
  }
  .thaum-mfooter__gov-link {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
  }
  .thaum-mfooter__gov {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 200px;
  }
}
#thaum-symbol {
  position: fixed;
  bottom: var(--ep-margin);
  left: var(--ep-margin);
  z-index: 1000;
  background-color: transparent;
  display: block;
  transition: opacity 0.3s ease-in-out;
  padding: 0;
}

/* ── 아카이브 그리드 (공통) ─────────────────────────────────
   6열 → 태블릿 3열 → 780px 이하 2열. 아카이브가 늘어나도 여기만 고치면 된다.
   ───────────────────────────────────────────────────────── */
.readersclub-list,
.magazine-list,
.thaumazein-q-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ep-margin);
  padding: var(--ep-margin) 0;
}
@media (max-width: 1024px) {
  .readersclub-list,
  .magazine-list,
  .thaumazein-q-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.readersclub-list,
.magazine-list,
.thaumazein-q-list {
  /* 좁은 화면에서도 한 장씩 눕히지 않고 두 장씩 세운다 — 셋 다 세로로 선
     카드라, 한 칸을 다 주면 카드 하나가 화면을 통째로 먹는다. */
}
@media (max-width: 780px) {
  .readersclub-list,
  .magazine-list,
  .thaumazein-q-list {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 !important;
    gap: 10px !important;
    row-gap: 15px !important;
  }
}

/* 칸이 내용 때문에 넓어지지 않게 한다.
   그리드 트랙의 최소폭은 기본이 내용 크기(min-width: auto)다. 그런데 전역
   word-break: keep-all 이 한글을 낱말 단위로 지키므로, 칸보다 긴 낱말이 하나만
   있어도 트랙이 그 낱말 폭까지 벌어지고 목록이 화면 밖으로 밀려 나간다.
   (예: 폭 390px 폰에서 두 칸짜리 Readers Club 은 칸 안쪽이 134px 인데,
   1.5rem 짜리 일곱 글자 낱말은 그것만으로 168px 다.)
   칸을 0 까지 줄일 수 있게 풀어 트랙이 언제나 1fr 몫만 갖게 한다. */
.readersclub-list > *,
.magazine-list > *,
.thaumazein-q-list > *,
.now-list > *,
.news-list > *,
.search-list > *,
.tqs-list > *,
.movement-list > * {
  min-width: 0;
}

/* 칸이 좁아진 만큼, 칸보다 긴 낱말은 낱말 안에서라도 접는다.
   keep-all 은 그대로 살아 있어 평소에는 낱말 단위로 끊긴다 — anywhere 는
   달리 접을 자리가 없을 때만 개입한다. 안 그러면 글자가 카드 밖으로 나가
   잘린다(카드가 overflow: hidden 이라 눈에는 잘린 글자로 보인다). */
@media (max-width: 1024px) {
  .rc-card__title,
  .mg-card__title,
  .now-card__title,
  .news-card__title,
  .search-card__title,
  .tqs-card__title,
  .mv-card__title,
  .rc-card__meta,
  .now-card__cat,
  .news-card__type {
    overflow-wrap: anywhere;
  }
}
/* ── Readers Club ──────────────────────────────────────────
   각 아이템은 A4 비율의 종이 한 장이고,
   배경은 그 글의 question-scope 대표색(--rc-bg, PHP가 인라인으로 꽂아줌).
   ───────────────────────────────────────────────────────── */
.readersclub-list-item,
.thaumazein-q-list-item {
  --rc-bg: #e5e5e5;
  --rc-ink: #000;
  --rc-spring-count: 20;
  --rc-gutter: 14px;
}

.rc-card {
  display: block;
  aspect-ratio: 210/297;
  padding: var(--rc-gutter);
  padding-left: calc(var(--rc-gutter) * 2 + 4px);
  background-color: var(--rc-bg);
  color: var(--rc-ink);
  overflow: hidden;
  border: 1px solid #000;
  transition: transform 0.2s ease;
  /* 좁은 화면에서도 A4 그대로다. 예전에는 여기서 정사각형이 됐는데, 카드가
     한 칸을 통째로 쓰던 시절 — A4 비율이면 카드 하나가 화면보다 길어져서 —
     의 값이다. 두 칸으로 서는 지금은 카드가 화면 절반 폭이라 그럴 일이 없고,
     같은 카드를 쓰는 Thaumazein Q 와도 비율이 갈리지 않는다. */
}
.rc-card:hover {
  transform: translateY(-10px);
  color: var(--rc-ink);
}

/* 줄노트 스프링 제본. 4×4 정사각형을 세로로 균등 배치.
   타일 높이 = (전체 - 점 하나) / (개수 - 1) → 마지막 점이 정확히 바닥에 닿는다. */
.rc-card__spring {
  position: absolute;
  left: var(--rc-gutter);
  top: var(--rc-gutter);
  bottom: var(--rc-gutter);
  width: 4px;
  color: var(--rc-ink);
  background-image: linear-gradient(to bottom, currentColor 4px, transparent 4px);
  background-size: 4px calc((100% - 4px) / (var(--rc-spring-count) - 1));
  background-repeat: repeat-y;
  pointer-events: none;
}

.rc-card__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: calc(var(--ep-margin) / 2);
}

.rc-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.rc-card__club {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.1;
  aspect-ratio: 1/1;
  width: 75%;
  font-size: 2dvw;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 50%;
  color: #000;
  padding: 0.5rem;
  /* 카드가 두 칸으로 서는 폭. 글자는 원 지름(카드 폭의 75%)에 맞춰 잡는다 —
     8dvw 는 카드가 한 칸을 다 쓰던 시절의 값이라, 지금 원 안에 넣으면
     클럽 이름이 원 밖으로 넘친다. */
}
@media (max-width: 780px) {
  .rc-card__club {
    font-size: 5dvw;
    font-weight: 600;
  }
}

/* 카드 제목은 아카이브가 달라도 한 크기다(1.3125rem) — 목록끼리 나란히 놓였을
   때 제목만 크기가 갈리면 같은 층위로 안 읽힌다. 좁은 화면에서 내리는 값은
   각자 절에서 따로 낸다. */
.rc-card__title,
.mg-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: keep-all;
}
@media (max-width: 780px) {
  .rc-card__title,
  .mg-card__title {
    font-size: 1rem;
    font-weight: 600;
  }
}

/* ── Thaumazein Q ──────────────────────────────────────────
   Readers Club 카드를 그대로 쓴다(마크업에 .rc-card 를 같이 단다).
   다른 건 두 가지다.
     · 배경 — 글마다 색이 다르지 않고 언제나 흰 종이다.
     · 스프링 제본 — 여기는 없다. 마크업에도 .rc-card__spring 을 넣지 않으므로
       비워둔 왼쪽 여백만 도로 거둔다(패딩을 사방 같게).

   카드를 누르면 상세 페이지가 아니라 PDF 플립북 팝업이 열린다.
   링크의 href 는 PDF 라서, 스크립트가 없으면 브라우저가 PDF 를 연다.
   ───────────────────────────────────────────────────────── */
.tq-card {
  --rc-bg: #f6f6f6;
  --rc-ink: #000;
  padding-left: var(--rc-gutter);
  cursor: pointer;
  /* 좁은 화면에서는 사방 여백을 한 급 줄인다. 카드가 두 칸으로 서는 폭이라
     14px 를 그대로 두면 표지 자리가 그만큼 좁아진다. (Readers Club 은 왼쪽
     스프링 자리를 지켜야 해서 14px 그대로다.) */
}
@media (max-width: 780px) {
  .tq-card {
    padding: 10px;
  }
}

/* ── Magazine ──────────────────────────────────────────────
   썸네일 + 그 아래 제목. 테두리·타이포는 Readers Club과 맞춘다.
   이미지 비율만 --mg-ratio 로 따로 뺐다.
   ───────────────────────────────────────────────────────── */
.magazine-list-item {
  --mg-ratio: auto;
}

.mg-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #000;
  transition: transform 0.2s ease;
}
.mg-card:hover {
  transform: translateY(-10px);
  color: #000;
}

.mg-card__thumb {
  display: block;
  aspect-ratio: var(--mg-ratio);
  overflow: hidden;
  border: 1px solid #000;
  background-color: #e5e5e5;
}
.mg-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.mg-card__title {
  width: 100%;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  padding-top: 0.5rem;
  border-top: 1px solid #000;
}

/* ── Now · News ────────────────────────────────────────────
   흰 바탕 + 검은 테두리 카드. 한 줄에 3개(= 한 페이지 9개, PHP와 맞춤).
   그리드 열 수가 위 공통 규칙과 달라서 별도로 뒀다.

   News 는 같은 카드다. 아래 두 자리만 내용이 다르다 —
   왼쪽(Now 의 카테고리 자리)은 news-type 이름, 오른쪽(status 자리)은 유형별 심볼.
   그래서 클래스만 얹어 같은 규칙을 쓰고, News 에만 있는 것들은 아래 절에 모았다.

   검색 결과(.search-*)도 같은 카드다. 아래 라벨 자리에 포스트타입 이름이 오고
   오른쪽 심볼이 없는 것만 다르다 — 그 둘은 _search-results.scss 에 있다.

   TQS 아카이브(.tqs-*)도 같은 카드다. 아래 라벨 자리에 회차 날짜가 온다.
   검색 결과와 마찬가지로 오른쪽 심볼이 없다 — 아래 절 참고.
   ───────────────────────────────────────────────────────── */
.now-list,
.news-list,
.search-list,
.tqs-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ep-margin);
  padding: var(--ep-margin) 0;
}
@media (max-width: 1024px) {
  .now-list,
  .news-list,
  .search-list,
  .tqs-list {
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
}
@media (max-width: 780px) {
  .now-list,
  .news-list,
  .search-list,
  .tqs-list {
    grid-template-columns: 1fr;
  }
}

.now-card,
.news-card,
.search-card,
.tqs-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 240px;
  padding: var(--ep-margin);
  background-color: var(--color-white);
  border: 1px solid #000;
  aspect-ratio: 1.75/1;
  color: #000;
  transition: transform 0.2s ease;
}
.now-card:hover,
.news-card:hover,
.search-card:hover,
.tqs-card:hover {
  transform: translateY(-10px);
  color: #000;
}
.now-card,
.news-card,
.search-card,
.tqs-card {
  /* 좁은 화면에서는 종횡비를 걷어낸다.
       종횡비는 최소 높이를 가로폭으로 되옮긴다 — min-height 240px 이 곧
       240 × 1.75 = 420px 짜리 최소 너비가 되어, 폭 390px 폰에서 카드가
       화면을 넘긴다. 어차피 한 칸으로 서는 폭에서는 min-height 가 항상
       이겨서(370 / 1.75 = 211px < 240px) 비율이 지켜지지도 않는다.
       높이는 min-height 와 내용이 정하게 두면 된다. */
}
@media (max-width: 1024px) {
  .now-card,
  .news-card,
  .search-card,
  .tqs-card {
    aspect-ratio: auto;
    min-width: 0;
    max-width: 100%;
    padding: 10px;
    min-height: 200px;
  }
}

/* 카드 아래쪽에 깔리는 큰 회색 라벨. Movement 카드의 유형 이름도 같은 물건이라
   여기서 함께 낸다 — 아카이브끼리 같은 목소리로 읽혀야 하고, 값을 따로 적어두면
   한쪽만 고쳐져 어긋난다. Movement 카드도 이 규칙 하나로 끝난다 — 자리까지 같다. */
.now-card__cat,
.news-card__type,
.mv-card__type,
.search-card__type,
.tqs-card__date {
  font-size: 3dvw;
  font-weight: 900;
  line-height: 0.9;
  color: #b4b4b4;
  letter-spacing: -0.02em;
}
@media (max-width: 780px) {
  .now-card__cat,
  .news-card__type,
  .mv-card__type,
  .search-card__type,
  .tqs-card__date {
    font-size: 8dvw;
  }
}

/* TQS 회차 날짜. <time> 은 인라인이라 아래 라벨 자리에서 한 줄을 못 쓴다
   (검색 결과의 .search-card__type 과 같은 사정). 크기·색은 위 규칙이 잡는다. */
.tqs-card__date {
  display: block;
}

/* Now·News 만 폭을 물린다. 라벨 오른쪽에 status·심볼이 나란히 앉는 자리라,
   긴 이름이 그 자리를 밀어내지 않도록 잡아두는 값이다.
   Movement 는 라벨 혼자 한 줄을 쓰므로 물릴 이유가 없다. */
.now-card__cat,
.news-card__type {
  max-width: 80%;
}

/* 제목이 남는 높이를 다 먹어서 status를 카드 바닥에 붙인다.
   카테고리·status가 비어도 자리는 그대로 — 그리드 높이가 흔들리지 않는다. */
.now-card__title,
.news-card__title,
.search-card__title,
.tqs-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  flex: 1;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: keep-all;
}

.now-card__meta,
.news-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.5rem;
}

.now-card__status {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 8px 3px 8px;
}
@media (max-width: 1024px) {
  .now-card__status {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
  }
}

.now-card__status--draft,
.now-card__status--ended {
  color: #b4b4b4;
  background-color: #e5e5e5;
}

.now-card__status--in-progress {
  color: #000;
  background-color: #2dff7d;
}

/* ── 모바일: 모집 상황을 카드 오른쪽 위로 ──────────────────
   카드가 한두 칸으로 넓어지면 아래줄이 [카테고리][status] 인데, 카테고리 글자가
   8dvw 로 커져서 status 를 구석으로 밀어낸다. 카드에서 가장 먼저 읽혀야 하는
   값이라 흐름에서 빼내 오른쪽 위에 고정한다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* status 가 기댈 상자를 카드로 만든다.
     전역 `* { position: relative }` 때문에 부모인 .now-card__meta 도 위치 지정
     요소여서, 그냥 두면 status 가 카드가 아니라 아래줄 기준으로 앉는다.
     (.now-card 는 그 전역 규칙 덕에 이미 relative 다.) */
  .now-card__meta {
    position: static;
  }
  .now-card__status {
    position: absolute;
    /* 카드의 안쪽 여백과 같은 값. 절대 위치의 기준은 패딩 박스라, 이 값이 곧
       제목 첫 줄과 같은 선이다. */
    top: 10px;
    right: 10px;
    white-space: nowrap;
  }
  /* status 가 흐름에서 빠졌으니 제목이 그 밑으로 파고든다. 태그가 차지하는
     만큼 오른쪽을 비워둔다.

     값은 가장 긴 라벨 "모집 진행 중"(한글 5자 + 공백 2)이 정한다. 태그 글자
     크기(사이트 공통 태그 값 0.8125rem)에 매어 두면 그 값이 바뀔 때 같이
     움직인다 — 한글 한 글자가 1em, 공백이 약 0.3em, 태그 좌우 안쪽 여백이
     5px 씩, 마지막 항이 제목과 벌리는 간격이다.
     라벨이 더 길어지면 글자 수만 고치면 된다. */
  .now-card__title {
    padding-right: calc(4.55rem + 10px + var(--ep-margin, 10px));
  }
  /* 아래줄에 카테고리만 남았다. 옆자리를 지켜줄 이유가 없어졌으므로 폭을 푼다
     (위 .now-card__cat, .news-card__type 의 80% 는 status 자리를 위한 값이다). */
  .now-card__cat {
    max-width: 100%;
  }
}
/* News 전용 ─ 유형 두 줄과 심볼.

   유형(Media)은 두 줄이 된다: 위가 유형 이름, 아래가 매체 이름.
   두 줄을 한 덩어리로 읽히게 크기·굵기는 위 .news-card__type 값을 그대로 물려받고,
   여기서는 줄을 나누는 일만 한다. */
.news-card__type-name,
.news-card__source {
  display: block;
}

/* Now 의 status 자리에 들어가는 유형별 심볼.
   크기 기준은 --news-symbol 하나다 — SVG 는 높이만 받고 폭은 자기 비율대로
   두고(원본 비율이 39:39, 34:42 로 다르다), + 는 그 값으로 정사각형이 된다.
   색은 카테고리 텍스트와 같은 회색. SVG 도 PHP 에서 currentColor 로 바꿔 넣어서
   여기 한 곳만 고치면 둘이 같이 따라온다.

   변수를 심볼이 아니라 카드에 두는 건, 좁은 화면에서 옆의 유형 글자가 심볼
   자리를 비켜 앉아야 해서다 — 형제끼리는 서로의 값을 못 읽으니 공통 조상에
   둔다(아래 @include tablet 블록). */
.news-card {
  --news-symbol: 3rem;
  /* + 의 획 두께. 예전엔 7px 로 박혀 있었는데, 크기만 줄이면 획이 혼자 남아
     굵어 보인다. 비율로 매어 두면 --news-symbol 하나로 같이 움직인다.
     0.13 은 원래 조합(3rem = 54px, 7px)에서 나온 값이라 PC 는 그대로다. */
  --news-plus-weight: calc(var(--news-symbol) * 0.13);
}

.news-card__symbol {
  display: block;
  flex: none;
  height: var(--news-symbol);
  color: #b4b4b4;
}

.news-card__symbol-icon {
  display: block;
  height: 100%;
  width: auto;
}

/* + 는 실제 선 두 개다(글자 ＋ 도, 배경 그라디언트도 아니다).
   상자를 정사각형으로 두면 두 선의 길이가 같아지고, 하나만 90° 돌리면
   중심이 정확히 겹친다. */
.news-card__symbol--plus {
  width: var(--news-symbol);
}

.news-card__plus-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--news-plus-weight);
  margin-top: calc(var(--news-plus-weight) / -2);
  background-color: currentColor;
}
.news-card__plus-line:last-child {
  transform: rotate(90deg);
}

/* ── 모바일: 심볼을 줄이고 카드 오른쪽 아래로 ───────────────
   심볼은 화면 폭과 무관한 3rem 이라, 카드가 작아지는 만큼 혼자 커 보인다.
   크기를 한 급 내리고(획 두께는 위 비율이 따라온다) 흐름에서 빼내
   카드 오른쪽 아래 구석에 고정한다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 심볼이 기댈 상자를 카드로 만든다.
     전역 `* { position: relative }` 때문에 부모인 .news-card__meta 도 위치 지정
     요소여서, 그냥 두면 심볼이 카드가 아니라 아래줄 기준으로 앉는다.
     (Now 카드의 status 를 오른쪽 위로 뺄 때와 같은 사정이다.) */
  .news-card__meta {
    position: static;
  }
  .news-card {
    --news-symbol: 1.75rem;
  }
  .news-card__symbol {
    position: absolute;
    /* 카드의 안쪽 여백과 같은 값. 절대 위치의 기준은 패딩 박스라,
       이 값이 곧 카드 내용의 오른쪽·아래 끝선이다. */
    right: var(--ep-margin);
    bottom: var(--ep-margin);
  }
  /* 심볼이 흐름에서 빠졌으니 유형 글자가 그 밑으로 파고든다. 심볼이 차지하는
     만큼 오른쪽을 비운다 — 심볼은 높이만 정해두고 폭은 원본 비율대로 나오는데,
     가장 넓은 것(정사각형인 + 와 39:39 아이콘)이 곧 높이와 같은 폭이다.
     max-width 80%(위 .now-card__cat 와 공용)는 심볼이 이 줄에 있을 때
     자리를 지켜주던 값이라 여기서 푼다. */
  .news-card__type {
    max-width: 100%;
    padding-right: calc(var(--news-symbol) + var(--ep-margin));
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
}
/* ── Movement ──────────────────────────────────────────────
   정사각형 카드. 회색 판 위에 movement-type 아이콘이 깔리고
   그 위에 유형 이름·제목이 얹힌다. 한 줄에 4개(= 한 페이지 12개, PHP와 맞춤).

   모바일에서는 겹침을 푼다 — 사각형 안에는 아이콘만 두고 유형·제목은 그 아래로
   내린다. 카드가 두 칸으로 서면 폭이 200px 안팎이라 글자와 아이콘이 겹친 채로는
   둘 다 안 읽힌다. 자세한 건 아래 @include tablet 블록 한 곳에 모아뒀다.
   ───────────────────────────────────────────────────────── */
.movement-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ep-margin);
  padding: var(--ep-margin) 0;
}
@media (max-width: 1024px) {
  .movement-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}
.movement-list {
  /* 폰에서도 두 칸. 아래 @include tablet 블록이 겹침을 이미 풀어놨으므로
     (사각형 → 제목 → 유형 태그) 칸이 좁아져도 읽히는 순서는 그대로다.
     간격은 태블릿에서 정한 10px 를 그대로 물려받는다. */
}
@media (max-width: 780px) {
  .movement-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.movement-list-item {
  overflow: hidden;
  border: 1px solid #000;
  transition: transform 0.2s ease;
}
.movement-list-item:hover {
  transform: translateY(-10px);
  color: #000;
}

.mv-card {
  --mv-icon: #fff;
  /* 모바일에서 사각형 아래로 내려오는 유형 태그의 색. 색을 안 정한 term 을
     위한 기본값이고, 색이 있으면 PHP 가 인라인으로 덮는다 — 그래서 태그 자신이
     아니라 여기(인라인이 얹히는 요소)에 적어야 덮인다.
     회색 기본값은 상세 페이지의 유형 태그와 같은 값이다. */
  --mv-tag: #c8c8c8;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  aspect-ratio: 1/1;
  padding: var(--ep-margin);
  background-color: #fff;
  color: #000;
  overflow: hidden;
}

/* 아이콘이 앉는 정사각형. PC 에서는 카드를 통째로 덮어서, 아이콘이 예전처럼
   카드 한가운데에 깔린다(그래서 이 요소가 생겨도 PC 는 달라지는 게 없다).
   모바일에서만 흐름 안으로 들어와 테두리를 두른 사각형이 된다. */
.mv-card__frame {
  position: absolute;
  inset: 0;
}

/* 아이콘은 사각형 한가운데 깔리는 배경. 텍스트와 겹치므로 클릭 대상에서 뺀다.
   상자의 비율(--mv-ratio)과 폭(--mv-width)은 아이콘마다 달라서 PHP 가 꽂아준다 —
   원본 비율이 제각각이어도 눈에 들어오는 크기가 같아지도록 면적을 맞춘 값이다.
   자세한 계산은 thaum_movement_icon_box() 참고. 여기 값은 안전망일 뿐이다.
   색은 term 의 icon-color(--mv-icon) → currentColor 로 흘러 들어간다.

   --mv-scale 은 그 값 전체를 한 번에 밀고 당기는 배율이다. PHP 상수를 건드리면
   PC 까지 따라오므로, 화면 폭마다 크기를 달리하는 일은 여기서 한다.
   긴 변 상한(90%)은 납작한 아이콘(Forum)이 배율을 타고 사각형 밖으로
   나가지 않게 잡아두는 값 — PHP 의 THAUM_MOVEMENT_ICON_MAX 와 같은 역할이다. */
.mv-card__art {
  --mv-ratio: 1;
  --mv-width: 56%;
  --mv-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--mv-width) * var(--mv-scale));
  aspect-ratio: var(--mv-ratio);
  /* 두 축을 다 잡아야 한다. 폭만 잡으면 길쭉한 아이콘(Academy 0.8:1)이
     비율을 타고 위아래로 넘친다. aspect-ratio 는 이 상한에 걸리면 비율을
     지킨 채 반대 축을 함께 줄인다. */
  max-width: 90%;
  max-height: 90%;
  color: var(--mv-icon);
  pointer-events: none;
}

.mv-card__icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* 유형 이름은 News 카드의 유형 라벨과 완전히 같다 — 타이포도 자리도.
   그래서 규칙이 따로 없다(위 .news-card__type 절이 전부다).
   배경 칠한 알약 칩은 걷어냈다. News 쪽에 없는 것이기도 하고, 3dvw 글씨를
   담으면 칩이 카드 폭을 거의 채워 카드가 라벨 하나로 보인다. */
/* 제목이 남는 높이를 다 먹어서 유형 이름을 카드 바닥에 붙인다 —
   Now·News 카드(.now-card__title)와 같은 방식이다.
   줄 수만 3줄로 둔다. 정사각형 카드라 4줄이면 유형 이름 자리가 없어진다. */
.mv-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  flex: 1;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: keep-all;
}

/* ── Movement 카드 (모바일) ────────────────────────────────
   겹침을 푼다. 테두리는 카드 전체가 아니라 아이콘이 앉는 사각형만 두르고,
   제목·유형은 그 아래 맨살로 내려온다 — 카드 폭이 200px 안팎이라 3dvw 라벨과
   아이콘이 한자리에 겹쳐 있으면 둘 다 안 읽힌다.

   순서는 마크업 그대로다(사각형 → 제목 → 유형). PC 에서 유형이 카드 바닥에
   앉는 것과 같은 자리라 order 로 뒤집지 않는다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 테두리는 아래 .mv-card__frame 으로 옮겨간다.
       overflow 도 푼다 — 텍스트가 사각형 밖에 있으니 자르면 안 된다. */
  .movement-list-item {
    overflow: visible;
    border: 0;
  }
  .mv-card {
    aspect-ratio: auto;
    padding: 0;
    gap: 0px;
    background-color: transparent;
  }
  /* 아이콘의 사각형. 카드에서 테두리를 넘겨받는다. */
  .mv-card__frame {
    position: relative;
    inset: auto;
    display: block;
    flex: none;
    width: 100%;
    aspect-ratio: 1/1;
    border: 1px solid #000;
    background-color: #fff;
    overflow: hidden;
  }
  /* 사각형이 아이콘만 담게 됐으니 그 안을 더 채운다.
       PC 값(--mv-width)에 배율만 얹어서 다섯 유형이 같은 비율로 함께 커진다. */
  .mv-card__art {
    /* 1.2 는 Forum 이 정한다. 다섯 유형 중 가장 납작해서(2:1) 긴 변이 이미
       PC 상한(75%)에 닿아 있고, 여기서 1.2 를 넘기면 저 혼자 사각형 밖으로
       나간다 — 그러면 Forum 만 덜 커져 다섯이 같은 크기로 읽히지 않는다.
       더 키우려면 PC 쪽 THAUM_MOVEMENT_ICON_MAX 부터 손봐야 한다. */
    --mv-scale: 1.2;
  }
  /* 유형 태그. 상세 페이지 모바일의 유형 태그(.movement-single__type)와 같은
     모양이고, 색은 term 의 icon-color — 즉 바로 위 아이콘과 같은 색이다.

     그 색을 배경으로 꽉 채우면 글자가 묻힌다. 유형 색은 운영자가 term 편집화면에서
     자유롭게 고르는 값이라 밝기를 미리 알 수 없어서, 어느 색에서든 읽히게 하려면
     글자색을 색마다 계산해 갈아끼워야 했다.
     대신 색을 테두리로 세우고 배경에는 옅게만 깐다 — 바탕이 흰색에 가깝게 남아
     글자는 어떤 유형이든 검정 하나로 끝난다. 색은 테두리가 알려준다. */
  .mv-card__type {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    border: 1px solid var(--mv-tag);
    background-color: color-mix(in srgb, var(--mv-tag) 20%, transparent);
    color: #000;
    font-weight: 500;
    font-size: 0.75rem;
  }
  .mv-card__type:empty {
    display: none;
  }
  /* 크기는 여기서 안 정한다 — 아래 "모바일: 카드 제목 한 급 낮추기" 절이
       Now·News 와 함께 1.125rem 으로 내린다. 두 곳에 적으면 한쪽만 고쳐진다. */
  .mv-card__title {
    flex: none;
    font-size: 1rem;
    margin-top: 8px;
  }
}
/* ── Movement 카드 (폰) ────────────────────────────────────
   사각형이 180px 안팎까지 줄어드는 구간. 아이콘 크기는 사각형에 대한 비율이라
   저절로 따라 줄지만, 작은 사각형에서 같은 비율은 더 꽉 차 보인다 — 두 칸이
   10px 간격으로 붙어 서면 아이콘끼리도 그만큼 가까워져서다. 한 급 낮춘다.

   1.05 는 다섯 유형이 모두 같은 비율로 줄어드는 마지막 값이기도 하다.
   가장 납작한 Forum 은 PC 상한(75%)에 이미 닿아 있어서, 배율이 1.2 를 넘으면
   저 혼자 CSS 상한(90%)에 걸려 덜 커진다(위 태블릿 블록 주석 참고).
   ───────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .mv-card__art {
    --mv-scale: 1.05;
  }
}
/* ── 페이지네이션 ──────────────────────────────────────── */
.readersclub-pagination,
.magazine-pagination,
.now-pagination,
.movement-pagination,
.news-pagination,
.thaumazein-q-pagination,
.tqs-pagination {
  display: flex;
  justify-content: center;
  padding: var(--ep-margin) 0 calc(var(--ep-margin) * 3);
}
.readersclub-pagination:not(:has(.facetwp-page)),
.magazine-pagination:not(:has(.facetwp-page)),
.now-pagination:not(:has(.facetwp-page)),
.movement-pagination:not(:has(.facetwp-page)),
.news-pagination:not(:has(.facetwp-page)),
.thaumazein-q-pagination:not(:has(.facetwp-page)),
.tqs-pagination:not(:has(.facetwp-page)) {
  display: none;
}
.readersclub-pagination .facetwp-pager,
.magazine-pagination .facetwp-pager,
.now-pagination .facetwp-pager,
.movement-pagination .facetwp-pager,
.news-pagination .facetwp-pager,
.thaumazein-q-pagination .facetwp-pager,
.tqs-pagination .facetwp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.readersclub-pagination .facetwp-page,
.magazine-pagination .facetwp-page,
.now-pagination .facetwp-page,
.movement-pagination .facetwp-page,
.news-pagination .facetwp-page,
.thaumazein-q-pagination .facetwp-page,
.tqs-pagination .facetwp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #000;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.readersclub-pagination .facetwp-page:hover,
.magazine-pagination .facetwp-page:hover,
.now-pagination .facetwp-page:hover,
.movement-pagination .facetwp-page:hover,
.news-pagination .facetwp-page:hover,
.thaumazein-q-pagination .facetwp-page:hover,
.tqs-pagination .facetwp-page:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.readersclub-pagination .facetwp-page.active,
.magazine-pagination .facetwp-page.active,
.now-pagination .facetwp-page.active,
.movement-pagination .facetwp-page.active,
.news-pagination .facetwp-page.active,
.thaumazein-q-pagination .facetwp-page.active,
.tqs-pagination .facetwp-page.active {
  background-color: #000;
  color: #fff;
  cursor: default;
}
.readersclub-pagination .facetwp-page.dots,
.magazine-pagination .facetwp-page.dots,
.now-pagination .facetwp-page.dots,
.movement-pagination .facetwp-page.dots,
.news-pagination .facetwp-page.dots,
.thaumazein-q-pagination .facetwp-page.dots,
.tqs-pagination .facetwp-page.dots {
  border-color: transparent;
  background-color: transparent;
  cursor: default;
  opacity: 0.4;
}
.readersclub-pagination .facetwp-page,
.magazine-pagination .facetwp-page,
.now-pagination .facetwp-page,
.movement-pagination .facetwp-page,
.news-pagination .facetwp-page,
.thaumazein-q-pagination .facetwp-page,
.tqs-pagination .facetwp-page {
  /* 모바일에서는 선을 빼고 회색 면으로 간다 — 필터 칩·스와이퍼 화살표와
     같은 어법이다(작은 회색 판 + 4px 모서리).
     고른 쪽도 굵기를 올리지 않는다. 채움만으로 충분히 드러나고, 굵기까지
     바뀌면 숫자 폭이 흔들려 줄이 덜컹거린다. */
}
@media (max-width: 1024px) {
  .readersclub-pagination .facetwp-page,
  .magazine-pagination .facetwp-page,
  .now-pagination .facetwp-page,
  .movement-pagination .facetwp-page,
  .news-pagination .facetwp-page,
  .thaumazein-q-pagination .facetwp-page,
  .tqs-pagination .facetwp-page {
    width: 1.3rem;
    height: 1.3rem;
    border: none;
    border-radius: 4px;
    background-color: #e6e6e6;
    font-size: 1rem;
    font-weight: 500;
  }
  .readersclub-pagination .facetwp-page.active,
  .magazine-pagination .facetwp-page.active,
  .now-pagination .facetwp-page.active,
  .movement-pagination .facetwp-page.active,
  .news-pagination .facetwp-page.active,
  .thaumazein-q-pagination .facetwp-page.active,
  .tqs-pagination .facetwp-page.active {
    font-weight: 500;
  }
  .readersclub-pagination .facetwp-page.dots,
  .magazine-pagination .facetwp-page.dots,
  .now-pagination .facetwp-page.dots,
  .movement-pagination .facetwp-page.dots,
  .news-pagination .facetwp-page.dots,
  .thaumazein-q-pagination .facetwp-page.dots,
  .tqs-pagination .facetwp-page.dots {
    background-color: transparent;
  }
}

/* ── 모바일: 호버 효과 끄기 ─────────────────────────────────
   손가락에는 호버가 없다. 탭한 자리에 :hover 가 걸린 채 남아, 카드 하나만
   떠 있거나 페이지 번호 하나가 계속 눌린 것처럼 보인다.

   카드가 뜨는 것(translateY)은 transition 까지 함께 끈다 — 상태만 지우고
   전환을 남기면, 탭 뒤에 카드가 제자리로 스르륵 내려오는 잔상이 남는다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rc-card,
  .mg-card,
  .now-card,
  .news-card,
  .search-card,
  .tqs-card,
  .movement-list-item {
    transition: none;
  }
  .rc-card:hover,
  .mg-card:hover,
  .now-card:hover,
  .news-card:hover,
  .search-card:hover,
  .tqs-card:hover,
  .movement-list-item:hover {
    transform: none;
  }
  .rc-card:hover {
    color: var(--rc-ink);
  }
  .mg-card:hover,
  .now-card:hover,
  .news-card:hover,
  .search-card:hover,
  .tqs-card:hover,
  .movement-list-item:hover {
    color: #000;
  }
  .mg-card {
    gap: 10px;
  }
  .mg-card .mg-card__title {
    font-size: 0.875rem;
    line-height: 1.35;
    padding-top: 5px;
  }
  .now-pagination .facetwp-page:hover,
  .movement-pagination .facetwp-page:hover,
  .news-pagination .facetwp-page:hover,
  .thaumazein-q-pagination .facetwp-page:hover,
  .tqs-pagination .facetwp-page:hover {
    background-color: #e6e6e6;
  }
  .now-pagination .facetwp-page.dots:hover,
  .movement-pagination .facetwp-page.dots:hover,
  .news-pagination .facetwp-page.dots:hover,
  .thaumazein-q-pagination .facetwp-page.dots:hover,
  .tqs-pagination .facetwp-page.dots:hover {
    background-color: transparent;
  }
  .now-pagination .facetwp-page.active:hover,
  .movement-pagination .facetwp-page.active:hover,
  .news-pagination .facetwp-page.active:hover,
  .thaumazein-q-pagination .facetwp-page.active:hover,
  .tqs-pagination .facetwp-page.active:hover {
    background-color: #000;
  }
}
/* ── 모바일: 카드 제목 한 급 낮추기 ─────────────────────────
   좁은 화면에서는 카드가 한두 칸으로 서므로 제목이 카드를 다 먹는다.
   PC 는 아카이브가 달라도 1.3125rem 한 값인데, 내리는 폭은 카드 모양에 따라
   갈린다 — 여기 오는 건 상자형 카드(Now·News·검색·TQS·Movement)다.
   Readers Club·Thaumazein Q 는 phone_large 에서, Magazine 은 .mg-card 절에서
   각자 낸다(카드 비율과 줄 수가 달라 같은 값을 쓰면 한쪽이 넘친다).
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .now-card__title,
  .news-card__title,
  .search-card__title,
  .tqs-card__title,
  .mv-card__title {
    font-size: 0.875rem;
    line-height: 1.35;
    margin-bottom: 5px;
  }
}
/* ── PDF 플립북 팝업 ────────────────────────────────────────
   [data-tq-pdf] 링크를 누르면 뜨는 전체화면 팝업. 마크업은
   assets/js/pdf-flipbook.js 가 만든다 — 페이지마다 다른 게 없어서
   PHP 에 남길 이유가 없다.

     .tq-flip            화면을 덮는 판 (fixed)
       .tq-flip__backdrop  뒤 어둠. 누르면 닫힌다.
       .tq-flip__dialog    제목줄 + 무대 + 화살표
         .tq-flip__stage     펼침이 들어갈 자리. 가로 상한(--tq-flip-max)은
                             JS 가 화면 높이에서 계산해 꽂는다.
           .tq-flip__book      StPageFlip 이 잡는 요소
             .tq-flip__page      한 장. 안에 canvas 가 채워진다.

   페이지 크기는 CSS 가 정하지 않는다. StPageFlip 이 'stretch' 로 부모 폭에
   맞춰 잡고 canvas 는 그 안을 100% 로 채운다 — 여기서 폭·높이를 못박으면
   라이브러리가 잰 값과 어긋난다.
   ───────────────────────────────────────────────────────── */
:root.tq-flip-open {
  overflow: hidden;
}

.tq-flip {
  --tq-veil: rgba(255, 255, 255, 0.7);
  --tq-blur: 14px;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.tq-flip.is-open {
  opacity: 1;
}
.tq-flip[hidden] {
  display: none;
}

.tq-flip__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--tq-veil);
  backdrop-filter: blur(var(--tq-blur));
  -webkit-backdrop-filter: blur(var(--tq-blur));
  cursor: pointer;
}

.tq-flip__dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ep-margin) / 2);
  width: 100%;
  height: 100%;
  padding: 20px;
  color: #000;
  transform: translateY(10px);
  transition: transform 0.28s ease;
}
.tq-flip.is-open .tq-flip__dialog {
  transform: none;
}

/* 제목줄. 제목은 가운데, 닫기는 오른쪽 끝. */
.tq-flip__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ep-margin);
  width: 100%;
  flex: 0 0 auto;
}

.tq-flip__title {
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 버튼 공통.

   font-family 를 물려받게 하는 게 요점이다. 전역 폰트 규칙(style.scss)이
   body·input·select·textarea 만 잡고 button 은 빼놓아서, 그냥 두면 여기만
   브라우저 기본 UI 폰트로 나온다. */
.tq-flip__close,
.tq-flip__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
  color: #000;
  font-family: inherit;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

/* 닫기는 아카이브 페이지네이션과 같은 정사각형 박스다. */
.tq-flip__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid #000;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tq-flip__close:hover, .tq-flip__close:focus, .tq-flip__close:active, .tq-flip__close:focus-visible, .tq-flip__close:focus-within {
  background-color: #000;
  color: #fff;
}

/* 넘김은 글자만 둔다. 박스를 씌우면 아래 줄에 사각형이 셋(이전·쪽수·다음)
   늘어서서 어느 게 눌리는 것인지 안 읽힌다.

   크기 기준은 메인 페이지의 그 문장(#thaum-question, _network-nodes.scss)이다. */
.tq-flip__arrow {
  border: 0;
  font-size: 2dvw;
  font-weight: 900;
  opacity: 0.5;
}
.tq-flip__arrow:hover, .tq-flip__arrow:focus, .tq-flip__arrow:active, .tq-flip__arrow:focus-visible, .tq-flip__arrow:focus-within {
  background-color: transparent;
  color: #000;
  opacity: 1;
}

/* 닫기의 ✕ 는 글자가 아니라 실제 선 두 개다.
   글자로 두면 굵기·크기·중심이 글꼴에 딸려 가서, 옆의 사각형 테두리(1px)와
   굵기가 안 맞는다. 선으로 그으면 사이트의 다른 선들과 같은 1px 이 된다.

   색은 currentColor 라 호버로 글자색이 뒤집힐 때 같이 따라온다. */
.tq-flip__close {
  --tq-x: 1.125rem;
}
.tq-flip__close::before, .tq-flip__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tq-x);
  height: 1px;
  background-color: currentColor;
}
.tq-flip__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.tq-flip__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 무대. 남는 높이를 다 먹고, 가로는 JS 가 준 상한까지만 넓어진다.
   그 상한이 "화면 높이에 들어가는 펼침의 폭"이라, 세로가 넘칠 일이 없다. */
.tq-flip__stage {
  --tq-flip-max: 100%;
  /* 손가락으로 밀어 넘기는 면이다(assets/js/pdf-flipbook.js 의 bindFlipInput).
     이 값을 안 주면 브라우저가 가로로 미는 동작을 뒤로가기 제스처나 확대로
     먼저 채가서, pointerup 이 오기도 전에 손짓이 끝난다. */
  touch-action: none;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--tq-flip-max);
  min-height: 0;
}

.tq-flip__book {
  width: 100%;
}

/* 한 장. 아직 안 그려진 장은 흰 종이로 자리만 잡아둔다 —
   canvas 가 도착하기 전에도 넘기는 동작이 어색하지 않게.

   테두리는 막이 밝아지면서 필요해졌다. 흰 종이가 흐린 흰 배경 위에 놓이면
   책의 가장자리가 어디인지 안 보인다. 카드(.rc-card, .now-card)와 같은 1px 검정. */
.tq-flip__page {
  background-color: #fff;
  border: 1px solid #000;
  overflow: hidden;
}

/* 그려지는 동안의 표시. 사각형 셋이 차례로 켜졌다 꺼진다 —
   페이지네이션·필터 체크박스와 같은 사각형 어휘를 쓴다.
   가운데 칸이 요소 자신이고 좌우는 의사요소다. 다 그려지면 JS 가 지운다.
   (styles 는 여기, 넣고 빼는 건 assets/js/pdf-flipbook.js) */
.tq-flip__loader {
  --tq-dot: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tq-dot);
  height: var(--tq-dot);
  margin: calc(var(--tq-dot) / -2) 0 0 calc(var(--tq-dot) / -2);
  background-color: #b4b4b4;
  animation: tq-flip-pulse 1.2s ease-in-out 0.15s infinite;
}
.tq-flip__loader::before, .tq-flip__loader::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--tq-dot);
  height: var(--tq-dot);
  background-color: inherit;
}
.tq-flip__loader::before {
  left: calc(var(--tq-dot) * -2);
  animation: tq-flip-pulse 1.2s ease-in-out 0s infinite;
}
.tq-flip__loader::after {
  left: calc(var(--tq-dot) * 2);
  animation: tq-flip-pulse 1.2s ease-in-out 0.3s infinite;
}

@keyframes tq-flip-pulse {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tq-flip__loader, .tq-flip__loader::before, .tq-flip__loader::after {
    animation: none;
    opacity: 0.5;
  }
  .tq-flip,
  .tq-flip__dialog {
    transition: none;
  }
}
.tq-flip__canvas {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 넘김 줄. 흐름에서 빼내 화면 왼쪽 아래에 붙인다 — 책은 가운데에 그대로 두고
   조작만 한쪽 구석으로 내린다.

   width·justify-content 는 흐름에 있을 때 가운데로 모으던 값이라 뺐다.
   fixed 로 왼쪽에 붙는 지금은 폭을 100% 로 두면 도로 화면 전체에 퍼진다.

   z-index 는 StPageFlip 이 장마다 매기는 값(쪽수만큼 올라간다) 위로 올리려는
   것이다. 이 안(.tq-flip, z-index 100)에서만 겨루므로 넉넉히 준다. */
.tq-flip__nav {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--ep-margin);
  flex: 0 0 auto;
}

/* 어디까지 봤는지. 숫자 대신 쪽당 사각형 하나씩 늘어놓고 본 데까지 채운다 —
   아카이브 페이지네이션·필터 체크박스와 같은 사각형 어휘다.
   (사각형을 만들고 채우는 건 assets/js/pdf-flipbook.js)

   min-width 는 화살표 두 개가 쪽수에 따라 좌우로 흔들리지 않게 잡아둔 것이다. */
.tq-flip__count {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 5em;
}

.tq-flip__ticks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 30em;
}

.tq-flip__tick {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1px solid #000;
  background-color: transparent;
  transition: background-color 0.2s ease;
}
.tq-flip__tick.is-read {
  background-color: #000;
}

/* 불러오는 중 / 실패 안내. 할 말이 없으면 자리도 차지하지 않는다. */
.tq-flip__status {
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}
.tq-flip__status:empty {
  display: none;
}

@media (max-width: 780px) {
  .tq-flip__dialog {
    padding: calc(var(--ep-margin));
  }
}
/* ── 모바일 ─────────────────────────────────────────────────
   좁은 화면에서는 StPageFlip 이 한 장씩 넘긴다(usePortrait). 무대 상한도
   한 장 몫으로 잡아야 책이 화면에 들어온다 — 그쪽은 JS 가 맡는다
   (assets/js/pdf-flipbook.js 의 spreadPages).
   여기서는 겹침과 글자 크기를 손본다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 모바일 사이트 헤더가 z-index 9999 로 떠 있어(_mobile-header.scss)
     팝업(100) 위에 얹혔다 — 팝업 제목줄과 사이트 헤더가 겹쳐 보이던 이유다.
     팝업을 그 위로 올려 화면을 온전히 덮게 한다. */
  .tq-flip {
    z-index: 10000;
  }
  .tq-flip__dialog {
    gap: 10px;
  }
  .tq-flip__title {
    font-size: 1rem;
  }
  /* 닫기 상자도 한 급 줄인다 — 제목과 높이를 맞춘다.
     호버는 끈다: 손가락에는 호버가 없어서 탭한 자리에 검은 채움이 걸린 채
     남는다. 바탕 규칙과 같은 값으로 눌러 둔다. */
  .tq-flip__close,
  .tq-flip__close:hover,
  .tq-flip__close:focus,
  .tq-flip__close:active,
  .tq-flip__close:focus-within {
    width: 1.75rem;
    height: 1.75rem;
    --tq-x: 0.875rem;
    background-color: transparent;
    color: #000;
    transition: none;
  }
  /* 넘김 버튼은 페이지 번호(.facetwp-page)·스와이퍼 화살표와 같은 규격이다 —
     1.3rem 정사각형, 선 없이 회색 면, 모서리 4px. 넘기는 것끼리 사이트 안에서
     한 모양으로 읽혀야 한다.

     '이전/다음' 글자는 자리만 두고 감춘다(font-size: 0). 지우지 않는 건 그
     글자가 이 버튼의 이름이기 때문이다 — 화면 낭독기는 그대로 읽는다.
     그림은 아래 두 의사요소가 1px 선으로 긋는다(스와이퍼와 같은 방식). */
  .tq-flip__arrow,
  .tq-flip__arrow:hover,
  .tq-flip__arrow:focus,
  .tq-flip__arrow:active,
  .tq-flip__arrow:focus-within {
    --arrow-shaft: 9px;
    --arrow-head: 5px;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background-color: #000000;
    color: #ffffff;
    font-size: 0;
    opacity: 1;
    transition: none;
  }
  .tq-flip__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--arrow-shaft);
    height: 1px;
    margin: -0.5px 0 0 calc(var(--arrow-shaft) / -2);
    background-color: currentColor;
  }
  /* 머리. 정사각형에서 두 변만 남겨 45° 돌리면 각진 꺾쇠가 된다.
     돌리고 나면 꼭짓점이 중심에서 0.7071×(한 변)만큼 옆으로 가므로,
     그만큼 되당겨 축 끝에 정확히 맞춘다. */
  .tq-flip__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--arrow-head);
    height: var(--arrow-head);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  [data-tq-prev]::after {
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    left: calc(50% - var(--arrow-shaft) / 2 + 0.7071 * var(--arrow-head));
  }
  [data-tq-next]::after {
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    left: calc(50% + var(--arrow-shaft) / 2 - 0.7071 * var(--arrow-head));
  }
  /* 넘김 줄은 화면 아래 가운데로. 오른쪽 구석에 붙여두면 한 장짜리로 커진
     책과 겹친다. */
  .tq-flip__nav {
    left: 20px;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    gap: 12px;
  }
  /* 쪽 표시는 화면 폭 안에서만. 30em 은 폰에서 화면보다 넓다. */
  .tq-flip__ticks {
    max-width: 100%;
    gap: 3px;
  }
  .tq-flip__tick {
    width: 6px;
    height: 6px;
  }
}
/* SearchWP 검색 폼 (#searchwp-form-1)
   플러그인 기본 스타일(assets/css/frontend/search-forms.css + 폼별 인라인 <style>)을
   전부 덮어쓴다. 인라인 <style>이 body에 출력되므로 id + 엘리먼트 선택자로 우선순위를 올린다. */
form#searchwp-form-1 {
  width: 100%;
  margin: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid #000;
}
form#searchwp-form-1 .swp-flex--col,
form#searchwp-form-1 .swp-flex--row,
form#searchwp-form-1 .searchwp-form-input-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}
form#searchwp-form-1 .searchwp-form-input-container {
  flex: 1 1 auto;
  min-width: 0;
}
form#searchwp-form-1 input.swp-input,
form#searchwp-form-1 input.swp-input--search {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  outline: none;
  font-size: 1.3125rem !important;
  font-weight: 600 !important;
  color: var(--color-black);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
form#searchwp-form-1 input.swp-input::-moz-placeholder, form#searchwp-form-1 input.swp-input--search::-moz-placeholder {
  color: var(--color-black);
  opacity: 1;
}
form#searchwp-form-1 input.swp-input::placeholder,
form#searchwp-form-1 input.swp-input--search::placeholder {
  color: var(--color-black);
  opacity: 1;
}
form#searchwp-form-1 input.swp-input::-webkit-search-cancel-button, form#searchwp-form-1 input.swp-input::-webkit-search-decoration,
form#searchwp-form-1 input.swp-input--search::-webkit-search-cancel-button,
form#searchwp-form-1 input.swp-input--search::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
form#searchwp-form-1 input.swp-input:focus, form#searchwp-form-1 input.swp-input:active,
form#searchwp-form-1 input.swp-input--search:focus,
form#searchwp-form-1 input.swp-input--search:active {
  border: 0;
  box-shadow: none;
  outline: none;
  background: none;
}
form#searchwp-form-1 input[type=submit].search-submit,
form#searchwp-form-1 input[type=submit].swp-button {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 0 0 0.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.06786 12.1357C7.3777 12.1357 8.60074 11.7096 9.59495 10.9995L13.3351 14.7396C13.5087 14.9132 13.7375 15 13.9742 15C14.4871 15 14.858 14.6055 14.858 14.1005C14.858 13.8638 14.7791 13.6428 14.6055 13.4692L10.889 9.74487C11.6702 8.7191 12.1357 7.44871 12.1357 6.06786C12.1357 2.73014 9.40558 0 6.06786 0C2.72225 0 0 2.73014 0 6.06786C0 9.40558 2.72225 12.1357 6.06786 12.1357ZM6.06786 10.8259C3.45608 10.8259 1.30984 8.67175 1.30984 6.06786C1.30984 3.46397 3.45608 1.30984 6.06786 1.30984C8.67175 1.30984 10.8259 3.46397 10.8259 6.06786C10.8259 8.67175 8.67175 10.8259 6.06786 10.8259Z' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
form#searchwp-form-1 input[type=submit].search-submit:hover, form#searchwp-form-1 input[type=submit].search-submit:focus, form#searchwp-form-1 input[type=submit].search-submit:active,
form#searchwp-form-1 input[type=submit].swp-button:hover,
form#searchwp-form-1 input[type=submit].swp-button:focus,
form#searchwp-form-1 input[type=submit].swp-button:active {
  background-color: transparent;
  outline: none;
  opacity: 0.6;
}

.thaum-bar.upper {
  align-items: center;
}
.thaum-bar.upper p {
  margin: 0;
}
.thaum-bar.upper .thaum-bar__left {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
}
.thaum-bar.upper .thaum-bar__center {
  display: flex;
  flex-direction: row;
  gap: calc(var(--ep-margin));
}
.thaum-bar.upper .thaum-bar__center p {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
}
.thaum-bar.upper .thaum-bar__center p::before {
  display: block;
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  background-color: transparent;
}
.thaum-bar.contents {
  align-items: start;
  --bar-left: 1 / 3;
  --bar-center: 3 / 8;
  --bar-right: 8 / 13;
}
.thaum-bar.contents .thaum-bar__left,
.thaum-bar.contents .thaum-bar__center,
.thaum-bar.contents .thaum-bar__right {
  gap: var(--ep-margin);
  min-width: 0;
}
@media (max-width: 1024px) {
  .thaum-bar.contents {
    row-gap: var(--ep-margin);
    /* 위의 align-items: start 는 칸이 가로로 나뉜 PC 기준이다 — 칸마다
       내용 길이가 달라 첫 줄을 맞추려는 값이다. 칸이 세로로 쌓이는
       모바일에서 같은 값은 '가로 정렬'이 되어, 칸이 제 글자 폭만큼만
       좁아진다(국문/영문 토글이 화면을 못 채우던 이유). */
    align-items: stretch;
  }
}
.thaum-bar.contents {
  /* 위아래 여백. 이 바는 About 계열 네 페이지(About · Main Project ·
     Location · People)의 본문 자리다. 위로는 전환 탭 바가, 아래로는
     곧바로 푸터가 붙는다 — 둘 다 맞닿아 있으면 본문이 사이에 낀 것처럼
     읽힌다. 위아래를 같은 값으로 벌린다.

     780px 아래에서는 _bar.scss 가 바의 여백을 통째로 지운다(선과 함께
     지우는 규칙이라 padding 도 !important 로 0 이 된다). 그래서 같은
     무게로 되받고, 값만 좁은 화면 기준으로 한 급 내린다 — 페이지 좌우
     여백(--ep-margin, 10px)의 두 배다. */
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (max-width: 780px) {
  .thaum-bar.contents {
    padding-top: calc(var(--ep-margin) * 2) !important;
    padding-bottom: calc(var(--ep-margin) * 2) !important;
  }
}
.thaum-bar.contents .toggle-lang--bar {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
@media (max-width: 1024px) {
  .thaum-bar.contents .toggle-lang--bar {
    width: 100%;
  }
  .thaum-bar.contents .toggle-lang--bar p {
    flex: 1 1 0;
    min-width: 0;
  }
}
.thaum-bar.contents .toggle-lang--bar p {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1;
  background-color: #ebebeb;
  padding: 5px 0;
  cursor: pointer;
}
.thaum-bar.contents .toggle-lang--bar p.active {
  background-color: #5C5C5C;
  color: #fff;
}
.thaum-bar.contents h4 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}
.thaum-bar.contents p {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 15px;
}
.thaum-bar.contents {
  /* 오른쪽 칸의 문단은 아래 여백을 갖지 않는다. 칸이 flex column + gap 이라
     줄 간격은 이미 gap 이 만들고 있어서, margin 이 남으면 그 위에 한 겹 더
     얹힌다 — Main Project(.main-project__body p)와 People(.thaum-bar__right p)
     이 각자 절에서 같은 이유로 이미 0 으로 두고 있다. 여기가 그 나머지다.

     선택자가 클래스 셋이라 위 기본값과 아래 모바일 블록(둘 다 클래스 둘)을
     함께 이긴다 — 폭과 상관없이 0 이다. */
}
.thaum-bar.contents .thaum-bar__right p {
  margin-bottom: 0;
}
.thaum-bar.contents .about__sub-title {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  background-color: #5C5C5C;
  color: #fff;
  padding: 5px 7px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  .thaum-bar.contents .about__sub-title {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    background-color: transparent;
    color: #000;
    border: none;
    text-decoration: underline;
    text-underline-offset: 5px;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0;
    margin-bottom: 8px;
  }
}
.thaum-bar.contents .img-container {
  margin-top: calc(var(--ep-margin) * 2);
  margin-bottom: calc(var(--ep-margin) * 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ep-margin) * 4);
}
.thaum-bar.contents .img-container figure {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--ep-margin));
}
.thaum-bar.contents .img-container figure:first-child img {
  width: 65%;
}
.thaum-bar.contents .img-container figure:last-child img {
  width: 40%;
}
.thaum-bar.contents .img-container img {
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ── 모바일: 어바웃 본문 글자 급 정리 ───────────────────────
   좁은 화면에서는 두 급으로만 읽히게 한다.
     큰 글자 1.125rem — 국문/영문 토글, 소제목(h4)
     본문   1rem      — 문단

   .about__sub-title 은 좁은 화면에서 이미 사이트 공통 태그(thaum-tag,
   0.8125rem)로 바뀌므로 여기서 다시 잡지 않는다.

   값을 쥔 규칙들과 선택자 무게가 같아서(.thaum-bar.contents p 등) 순서로
   이긴다 — 이 블록이 파일 끝에 있어야 하는 이유다.

   토글과 소제목을 문단보다 먼저 적는 건 무게가 갈리기 때문이다.
   .contents .toggle-lang--bar p(클래스 셋)가 .contents p(클래스 둘)를 이겨서,
   뒤에 오는 문단 규칙에 토글이 딸려가지 않는다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-bar.contents .toggle-lang--bar p,
  .thaum-bar.contents h4 {
    font-size: 1.125rem;
  }
  .thaum-bar.contents p {
    font-size: 1rem;
    margin-bottom: 10px;
  }
}
/* ── Grid (상세 페이지 공통) ────────────────────────────────
   포스트 타입과 무관하게 상세 페이지 본문을 얹는 그리드 템플릿.
   헤더·바와 같은 12분할 위에 앉으므로 세로선이 항상 맞는다.
   슬롯 이름은 위치만 가리킨다 — 안에 뭐가 들어가든 상관없게.

   2단 (1fr 1fr = 6 + 6) — 보통 왼쪽 이미지 / 오른쪽 텍스트·메타
     <div class="thaum-grid thaum-grid--duo">
       <div class="thaum-grid__left"> … </div>
       <div class="thaum-grid__right"> … </div>
     </div>

   3단 (2fr 5fr 5fr = 2 + 5 + 5) — 어바웃과 같은 비율
     <div class="thaum-grid thaum-grid--trio">
       <div class="thaum-grid__left"> … </div>
       <div class="thaum-grid__center"> … </div>
       <div class="thaum-grid__right"> … </div>
     </div>

   칸 비율은 커스텀 프로퍼티로 갈아끼운다. 12분할 기준 grid-column 값이라
   바·리스팅과 세로선이 어긋나지 않는다.
     <div class="thaum-grid thaum-grid--trio" style="--grid-center: 3 / 9; --grid-right: 9 / 13;">

   한 페이지에 여러 덩어리를 쌓을 땐 .thaum-grid 를 여러 번 반복한다.
   (칸 안에서 세로로 쌓는 것과 그리드를 새로 여는 것은 다른 일이다 —
    새 그리드를 열어야 칸 비율을 덩어리마다 다르게 줄 수 있다.)

   칸 안에 들어가는 내용물 클래스(__title, __text, __meta, __figure …)는
   위치와 무관하다. 어느 슬롯에 넣어도 같은 타이포로 나온다.
   ───────────────────────────────────────────────────────── */
.thaum-grid {
  --grid-left: 1 / 3;
  --grid-center: 3 / 8;
  --grid-right: 8 / 13;
  --grid-row-gap: calc(var(--ep-margin) * 2);
  --grid-slot-gap: var(--ep-margin);
  --grid-pad: var(--ep-margin);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  -moz-column-gap: var(--ep-margin);
       column-gap: var(--ep-margin);
  row-gap: var(--grid-row-gap);
  align-items: start;
  padding: var(--grid-pad) 0;
}
.thaum-grid .thaum-grid__left {
  grid-column: var(--grid-left);
}
.thaum-grid .thaum-grid__center {
  grid-column: var(--grid-center);
}
.thaum-grid .thaum-grid__right {
  grid-column: var(--grid-right);
}
.thaum-grid .thaum-grid__left,
.thaum-grid .thaum-grid__center,
.thaum-grid .thaum-grid__right {
  display: flex;
  flex-direction: column;
  gap: var(--grid-slot-gap);
  min-width: 0;
}
.thaum-grid .thaum-grid__left[hidden],
.thaum-grid .thaum-grid__left [hidden],
.thaum-grid .thaum-grid__center[hidden],
.thaum-grid .thaum-grid__center [hidden],
.thaum-grid .thaum-grid__right[hidden],
.thaum-grid .thaum-grid__right [hidden] {
  display: none;
}
@media (max-width: 1024px) {
  .thaum-grid {
    grid-template-columns: repeat(6, 1fr);
    row-gap: var(--ep-margin);
  }
  .thaum-grid .thaum-grid__left,
  .thaum-grid .thaum-grid__center,
  .thaum-grid .thaum-grid__right {
    grid-column: 1/7;
  }
}

/* ── 2단: 1fr 1fr ──────────────────────────────────────────
   왼쪽 이미지 / 오른쪽 텍스트·메타가 기본 조합이지만 강제하지 않는다.
   이미지를 오른쪽에 두고 싶으면 마크업에서 자리만 바꾸면 된다.
   ───────────────────────────────────────────────────────── */
.thaum-grid--duo {
  --grid-left: 1 / 7;
  --grid-right: 7 / 13;
  --grid-center: var(--grid-left);
  /* 두 칸을 나누는 세로선. 오른쪽 칸의 테두리다 — 위에 앉는 바
     (.thaum-bar--duo 의 오른쪽 칸)와 같은 자리·같은 안쪽 여백이라
     바에서 내려오는 선과 그대로 이어진다.
     왼쪽 칸 내용과의 20px 간격은 그리드 거터(column-gap)가 이미 만들어 둔 것이다.

     선 길이는 칸 길이를 따른다. 화면에 고정해두는 방법(absolute 겉 박스 +
     fixed 선, assets/js/grid-divider.js)도 있었는데, 선이 본문·푸터와 무관하게
     떠 있어서 걷어냈다. 되살릴 일이 있으면 그 파일을 다시 enqueue 하면 된다. */
}
.thaum-grid--duo .thaum-grid__right {
  padding-left: 10px;
  padding-right: 10px;
  border-left: 1px solid #000;
}
@media (max-width: 1024px) {
  .thaum-grid--duo .thaum-grid__right {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
}

/* ── 3단: 2fr 5fr 5fr ─────────────────────────────────────
   베이스 값 그대로다. 클래스는 마크업에서 의도를 읽히게 하려고 둔다.
   ───────────────────────────────────────────────────────── */
.thaum-grid--trio {
  --grid-left: 1 / 3;
  --grid-center: 3 / 8;
  --grid-right: 8 / 13;
  /* 칸을 나누는 세로선. 2단(--duo)과 같은 물건이고 규칙도 같다 —
     선은 칼럼 시작선 위에 앉고 내용만 10px 안으로 물린다. 3단은 경계가
     둘이라 가운데·오른쪽 칸이 각자 자기 왼쪽에 긋는다. 위에 앉는 바
     (.thaum-bar 의 center·right)와 같은 자리·같은 여백이라 바에서 내려오는
     선과 그대로 이어진다.

     선 길이는 칸 길이를 따른다(--duo 와 같다). --sticky 그리드에서는 칸이
     자기 높이만큼만 서 있으므로 선도 그만큼이다. */
}
.thaum-grid--trio .thaum-grid__center,
.thaum-grid--trio .thaum-grid__right {
  padding-left: 10px;
  border-left: 1px solid #000;
}
.thaum-grid--trio .thaum-grid__right {
  padding-right: 10px;
}
@media (max-width: 1024px) {
  .thaum-grid--trio .thaum-grid__center,
  .thaum-grid--trio .thaum-grid__right {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
}

/* ── 옵션 ──────────────────────────────────────────────────
   스크롤은 페이지 전체가 한다. 각 칸을 sticky로 붙여두면 짧은 칸은
   제자리에 머무르고 긴 칸만 흘러가서, 칸마다 따로 스크롤되는 것처럼 보인다.
   헤더가 sticky top:0 이라 그 아래로 물리도록 top 값을 빼뒀다.

   --fill 과는 같이 쓰지 않는다. 칸에 화면 높이만큼 min-height 가 붙으면
   sticky 가 움직일 거리를 그만큼 잃어 칸이 본문 한가운데서 풀린다.
   칸 전체가 아니라 목차만 붙여두고 싶은 경우가 대부분인데, 그건
   .thaum-toc--sticky 가 이미 한다(_toc.scss). 지금 상세 페이지들은 그쪽이다.
   ───────────────────────────────────────────────────────── */
.thaum-grid--sticky {
  --grid-sticky-top: calc(var(--ep-headerH) + var(--ep-margin));
}
.thaum-grid--sticky .thaum-grid__left,
.thaum-grid--sticky .thaum-grid__center,
.thaum-grid--sticky .thaum-grid__right {
  position: sticky;
  top: var(--grid-sticky-top);
  align-self: start;
}
@media (max-width: 1024px) {
  .thaum-grid--sticky .thaum-grid__left,
  .thaum-grid--sticky .thaum-grid__center,
  .thaum-grid--sticky .thaum-grid__right {
    position: static;
  }
}

/* 짧은 칸도 화면 아래 끝까지 내려오게 하는 최소 높이.
   칸을 나누는 세로선(--duo 의 border-left)이 본문이 짧다고 중간에서 끊기지 않는다.

   빼야 할 것은 헤더만이 아니다 — 그리드 위에는 바가 앉아 있고 그 높이는
   제목 줄 수·메타 개수에 따라 달라져 상수로 적을 수 없다. 그래서 높이를
   하나씩 더하는 대신, 그리드가 문서 맨 위에서 얼마나 내려와 있는지를
   script.js(GridFill)가 재서 --grid-fill-above 로 꽂아준다.
   헤더·바·관리자 바가 한 번에 들어온 값이라 더 뺄 것이 없다.

   위아래 여백(--grid-pad)도 뺀다. 칸이 아니라 그리드 블록의 아래끝을 화면 끝에
   맞춘다는 뜻이다 — 안 빼면 짧은 페이지에 그 여백만큼 스크롤이 생긴다.

   JS 가 아직 안 돌았을 때의 안전망은 헤더 상수 + 바 한 줄 높이
   (글줄 1.125rem×1.2 + 위아래 padding 0.5rem + 테두리 2px)다.
   min-height 라 잠깐 어긋나도 내용이 잘리지는 않는다. */
.thaum-grid--fill {
  --grid-fill-above: calc(
      var(--ep-headerBottom, var(--ep-headerH)) + 1.125rem * 1.2 + 1rem + 2px
  );
  /* 칸을 행 높이만큼 늘린다. 기본값(align-items: start)이면 칸이 자기 내용에서
     끝나 세로선이 긴 칸 중간에서 잘린다. 내용은 여전히 칸 위쪽부터 쌓인다 —
     칸이 flex column 이라 늘어난 높이는 빈 자리로 남는다. */
  align-items: stretch;
}
.thaum-grid--fill .thaum-grid__left,
.thaum-grid--fill .thaum-grid__center,
.thaum-grid--fill .thaum-grid__right {
  min-height: calc(100vh - var(--grid-fill-above) - var(--grid-pad) * 2);
  min-height: calc(100dvh - var(--grid-fill-above) - var(--grid-pad) * 2);
}
@media (max-width: 1024px) {
  .thaum-grid--fill .thaum-grid__left,
  .thaum-grid--fill .thaum-grid__center,
  .thaum-grid--fill .thaum-grid__right {
    min-height: 0;
  }
}

.thaum-grid--flush {
  --grid-pad: 0;
}

.thaum-grid--bordered {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

/* ── 칸 내용물 ─────────────────────────────────────────────
   전부 위치 중립이다. 2단이든 3단이든, 어느 슬롯에 넣든 같게 나온다.
   ───────────────────────────────────────────────────────── */
.thaum-grid__title {
  font-size: 1.8125rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.thaum-grid__heading {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.thaum-grid__tag {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
  padding: 5px 7px;
  background-color: #5c5c5c;
  color: #fff;
  margin: 0;
}
@media (max-width: 1024px) {
  .thaum-grid__tag {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
  }
}

/* 본문 덩어리. 에디터가 뱉는 p·h4·ul·a 를 여기서 한 번에 받는다.
   덩어리의 첫/마지막 여백은 지운다 — 칸의 gap이 이미 간격을 만들고 있다. */
.thaum-grid__text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.thaum-grid__text > :first-child {
  margin-top: 0;
}
.thaum-grid__text > :last-child {
  margin-bottom: 0;
}
.thaum-grid__text p {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 10px;
}
.thaum-grid__text h3,
.thaum-grid__text h4 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 15px;
}
.thaum-grid__text ul,
.thaum-grid__text ol {
  margin: 0 0 15px;
  padding-left: 1.2em;
}
.thaum-grid__text li {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.thaum-grid__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.thaum-grid__text img {
  display: block;
  max-width: 100%;
  height: auto;
}
.thaum-grid__text {
  /* ── 모바일 ────────────────────────────────────────────
     칸이 세로로 쌓이면 본문이 화면 폭을 다 쓴다. PC 의 1.125rem 은 좁은 칸에
     맞춰 잡은 값이라 그 폭에서는 한 줄이 너무 길게 읽힌다 — 본문을 한 급
     내리고 헤딩만 남겨 위계를 세운다. 상세 페이지 상단 바(.thaum-bar--single)
     와 같은 두 값이라 바에서 본문으로 넘어올 때 글자 크기가 튀지 않는다.

     h1·h2 까지 적는 건 본문을 GenerateBlocks 텍스트 블록으로 쓰는 포스트
     타입이 있어서다(Movement). 에디터에서 무슨 태그가 나오든 헤딩은 한 크기다.
     ───────────────────────────────────────────────────── */
}
@media (max-width: 1024px) {
  .thaum-grid__text {
    /* 행간은 PC(1.4)보다 넉넉하게. 화면 폭을 다 쓰는 글줄은 그만큼 길어서,
       같은 행간이면 눈이 다음 줄 첫 글자를 놓친다. 값은 Movement 상세 본문
       (.movement-single__contents p)이 쓰던 것으로, 상세 페이지들의 본문이
       한 호흡으로 읽히도록 여기로 올려 공통값으로 삼는다. */
  }
  .thaum-grid__text p,
  .thaum-grid__text li {
    font-size: 1rem;
    line-height: 1.6;
  }
  .thaum-grid__text {
    /* 굵기와 여백도 Movement 본문 헤딩 기준이다. 700 은 칸이 좁은 PC 에서
       소제목을 세우려는 값인데, 글자가 작아지는 여기서는 획이 뭉쳐 보인다.
       여백은 위를 넓게 아래를 좁게 — 소제목이 뒤따르는 문단에 붙어야
       한 덩어리로 읽힌다(PC 의 `0 0 15px` 는 그 반대다). */
  }
  .thaum-grid__text h1,
  .thaum-grid__text h2,
  .thaum-grid__text h3,
  .thaum-grid__text h4 {
    font-size: 1.3125rem;
    font-weight: 600;
    margin: 20px 0 10px;
  }
}

/* 메타 정보. [라벨] [값] 가로 배치이고, 라벨은 줄어들지 않고 값만 wrap된다.
   바의 __group / __label / __content 와 같은 규칙 — 상세 페이지에서도 동일하게 읽히도록. */
.thaum-grid__meta {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.thaum-grid__meta-item {
  display: flex;
  align-items: baseline;
  gap: var(--ep-margin);
  padding: 0.5rem 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-top: -1px;
  /* 모바일에서는 [라벨][값] 을 위아래로 쌓는다. 좁은 폭에서 한 줄에 두면
     라벨이 100px 를 먼저 떼어가고 값이 두세 줄로 접혀, 행마다 높이가 들쭉
     날쭉해진다. 기준점 1024px 는 사이트의 다른 모바일 분기와 같다. */
}
@media (max-width: 1024px) {
  .thaum-grid__meta-item {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0.25rem 0;
  }
}

.thaum-grid__meta-label {
  min-width: 100px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  flex: 0 0 auto;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .thaum-grid__meta-label {
    font-size: 1rem;
    margin-bottom: 2px;
    /* 세로로 쌓이면 라벨이 제 줄을 다 쓴다 — 한 줄일 때 값을 밀어내지
       않으려고 잡아둔 최소폭과 줄바꿈 금지를 여기서는 푼다. */
    min-width: 0;
    white-space: normal;
  }
}

.thaum-grid__meta-value {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  flex: 1 1 auto;
  line-height: 1.2;
  min-width: 0;
  margin: 0;
}
@media (max-width: 1024px) {
  .thaum-grid__meta-value {
    font-size: 1rem;
  }
}

/* 이미지 여러 장을 세로로 쌓는 자리. figure 하나만 넣어도 된다. */
.thaum-grid__media {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ep-margin) * 2);
  margin: 0;
}

/* 이미지 한 장 + 캡션.
   비율을 못박고 싶으면 --grid-figure-ratio 를 준다 (기본은 원본 비율).
     <figure class="thaum-grid__figure" style="--grid-figure-ratio: 3 / 4;"> */
.thaum-grid__figure {
  --grid-figure-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--ep-margin) / 2);
  margin: 0;
}
.thaum-grid__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--grid-figure-ratio);
  -o-object-fit: cover;
     object-fit: cover;
}

.thaum-grid__caption {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

/* ── TOC (상세 페이지 목차) ────────────────────────────────
   본문 헤딩을 훑어 만든 목차. 마크업은 [print_toc] 가 껍데기만 내고
   <li> 는 script.js 의 Toc 가 채운다.

   <nav class="thaum-toc" data-toc-source=".thaum-grid__text" data-toc-levels="h2,h3,h4">
     <p class="thaum-toc__heading">Index</p>
     <ul class="thaum-toc__list">
       <li class="thaum-toc__item is-active" style="--toc-depth: 0">
         <a class="thaum-toc__link" href="#…">…</a>
       </li>
     </ul>
   </nav>

   현재 위치 표시는 밝기와 자리다 — 지금 항목만 또렷하고(opacity 1) 살짝 오른쪽으로
   나와 있다. 나머지는 반쯤 눌러둔다(opacity 0.5).
   자리를 옮기는 데 transform 을 쓰는 건 레이아웃을 건드리지 않기 때문이다.
   margin/padding 으로 밀면 그 줄의 상자가 바뀌어 옆 줄까지 흔들린다.
   ───────────────────────────────────────────────────────── */
.thaum-toc {
  --toc-indent: var(--ep-margin);
  --toc-row-gap: 5px;
  --toc-shift: 5px;
  /* 헤더가 sticky top:0 이라 그 아래로 물리도록 뺀다.
     헤더는 높이를 못박지 않아 상수(--ep-headerH, 64px)와 실제(100px 이상)가
     다르다 — 상수만 쓰면 목차가 헤더 밑으로 파고든다. script.js 가 재서
     꽂아주는 실측값을 먼저 보고, JS 가 막힌 환경에서만 상수로 물러선다.
     (.thaum-toc-target 의 scroll-margin-top 과 같은 값이라 눌러서 이동한
      헤딩이 목차와 같은 선에서 멈춘다.) */
  --toc-sticky-top: calc(
      var(--ep-headerBottom, var(--ep-headerH)) + var(--ep-margin)
  );
  display: flex;
  flex-direction: column;
  gap: calc(var(--ep-margin) / 2);
  margin: 0;
}
.thaum-toc[hidden] {
  display: none;
}

.thaum-toc__heading {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  line-height: 1.2;
  margin: 0;
}

.thaum-toc__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.thaum-toc__item {
  --toc-depth: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: calc(var(--toc-depth) * var(--toc-indent));
}

.thaum-toc__link {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  display: block;
  color: #000;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.thaum-toc__link:hover, .thaum-toc__link:focus-visible {
  opacity: 1;
}

.thaum-toc__item.is-active > .thaum-toc__link {
  opacity: 1;
  transform: translateX(var(--toc-shift));
}

/* 칸 자체가 sticky가 아닐 때(단독 배치) 목차만 따라오게 한다.
   .thaum-grid--sticky 안에서는 칸이 이미 붙으므로 쓸 필요 없다. */
.thaum-toc--sticky {
  position: sticky;
  top: var(--toc-sticky-top);
  align-self: start;
  width: 100%;
}
@media (max-width: 1024px) {
  .thaum-toc--sticky {
    position: static;
  }
}

/* 목차가 가리키는 헤딩. JS가 이 클래스를 붙인다.
   클릭 스크롤·해시 진입 모두 이 값만큼 sticky 헤더 아래에서 멈춘다 —
   scrollIntoView 가 이 값을 그대로 존중하므로 여백은 여기 한 곳에서만 손대면 된다.

   헤더는 높이를 정해두지 않아 상수 --ep-headerH 와 실제 높이가 다르다. 상수만
   쓰면 헤딩이 헤더 밑으로 들어가 가려진 채 멈춘다. script.js 가 재서 꽂아주는
   실측값을 먼저 쓰고, JS 가 막힌 환경에서만 상수로 물러선다. */
.thaum-toc-target {
  scroll-margin-top: calc(var(--ep-headerBottom, var(--ep-headerH)) + var(--ep-margin));
}

/* ── 도착 표시 ─────────────────────────────────────────────
   목차를 눌러 이동한 헤딩을 한 번 깜빡인다. 글이 짧아 화면이 움직이지 않을
   때도 "어디로 갔는지"가 보이게 하려는 것이다. 클래스는 JS 가 붙인다.

   자리를 차지하지 않는 opacity 만 건드린다 — 배경이나 크기를 바꾸면 그 순간
   레이아웃이 흔들리고, 페이지마다 다른 배경색과도 부딪힌다.
   ───────────────────────────────────────────────────────── */
.thaum-toc-target.is-toc-flash {
  animation: thaum-toc-flash 0.7s ease-in-out 2;
}

@keyframes thaum-toc-flash {
  50% {
    opacity: 0.2;
  }
}
/* 모션을 줄이기로 한 환경에서는 한 번만. 아예 끄면 클릭에 아무 반응이 없어진다. */
@media (prefers-reduced-motion: reduce) {
  .thaum-toc-target.is-toc-flash {
    animation-iteration-count: 1;
  }
}
/* ── status 칩 ─────────────────────────────────────────────
   ACF select(status)의 저장값이 그대로 modifier 클래스로 붙는다.
     draft → .now-single__status--draft
     in-progress → .now-single__status--in-progress
     ended → .now-single__status--ended
   (라벨 텍스트는 필드 설정의 choices에서 가져오므로, 라벨을 고쳐도
    클래스는 그대로다. 반대로 선택지를 추가하면 아래 맵에 한 줄 넣으면 된다.)

   색은 아카이브 카드(.now-card__status)와 맞춘다 — 같은 상태가 목록과
   상세에서 다르게 보이면 안 되므로.
   ───────────────────────────────────────────────────────── */
.now-single__status {
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 8px 3px 8px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  /* 좁은 화면에서는 사이트 공통 태그 겉모양을 쓴다(_asset.scss). 색은 아래 그대로.
     display 는 inline-flex 로 되돌린다 — 세로 가운데 정렬이 이 값에 걸려 있다.

     글자만 상세 바의 칩 값으로 한 급 더 내린다(Movement 상세의 유형 태그와
     같은 0.75rem/500). 목록 카드의 태그(.now-card__status)는 공통값 그대로다 —
     거기서는 카드 안의 유일한 글자 중 하나지만, 여기서는 제목 옆에 붙는 표식이라
     제목·부가 정보와 층이 갈려야 한다. */
}
@media (max-width: 1024px) {
  .now-single__status {
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 500;
  }
}
.now-single__status--draft {
  color: #b4b4b4;
  background-color: #e5e5e5;
}
.now-single__status--in-progress {
  color: #000;
  background-color: #2dff7d;
}
.now-single__status--ended {
  color: #fff;
  background-color: #5c5c5c;
}

/* 제목 + status 한 줄.
   .thaum-bar 안의 group 기본값(align-items: baseline)을 덮어써야 하는데
   그쪽 선택자가 `.thaum-bar .thaum-bar__group`(클래스 2개)라서,
   여기도 바 modifier로 감싸 같은 무게를 만든다. (import 순서상 이쪽이 나중) */
.thaum-bar--now-single .thaum-bar__group {
  justify-content: space-between;
  align-items: center;
}

/* ── Now 상세 갤러리 (구조용) ───────────────────────────────
   Swiper가 제대로 넘어가려면 지켜야 하는 최소 규칙만 둔다.
   색·여백·화살표 모양 같은 건 여기 없다 — 마음대로 얹어도 된다.

   Swiper는 초기화 시점에 컨테이너 크기를 재서 슬라이드 크기와 이동 거리를 확정한다.
   그래서 슬라이드가 상위 그리드 칸을 넘어가면 넘긴 뒤 어긋난 자리에 선다.
   여기서 하는 일은 세 가지다.
     1. 갤러리를 상위 그리드 한 칸(--duo 기준 1fr) 밖으로 못 나가게 못박기 (가로)
     2. 슬라이드 높이를 남는 화면 높이로 통일하기 (세로)
     3. 이미지를 그 안에 한 겹 작게, 한가운데 두기

   크기는 갤러리 단위로 갈아끼운다.
     <div class="now-single__gallery swiper" style="--now-image-inset: 60px;">
   ───────────────────────────────────────────────────────── */
.now-single__gallery {
  --now-gallery-h: calc(100dvh - var(--ep-headerH, 64px) - var(--ep-margin, 20px) * 2);
  --now-image-inset: calc(var(--ep-margin) * 2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.now-single__slide {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ep-margin) / 2);
  height: var(--now-gallery-h);
  padding: var(--now-image-inset);
}

.now-single__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid #000;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}

/* ── 조작 UI ───────────────────────────────────────────────
   전부 .swiper 위에 겹쳐 앉는다. 슬라이드에 --now-image-inset 만큼
   안쪽 여백이 있어서, 화살표와 페이지네이션은 그 여백 위에 놓인다.
   ───────────────────────────────────────────────────────── */
/* 넘김 버튼.

   모양은 사이트의 다른 정사각 버튼과 같다 — 페이지네이션(.facetwp-page),
   플립북 닫기(.tq-flip__close)와 한 어휘다: 2rem 정사각형, 1px 검정 테두리,
   누를 수 있는 자리는 채워서 알린다.

   바탕을 깔아두는 건 이 버튼이 사진 위로 물리기 때문이다. 속이 비어 있으면
   밝은 사진 위에서 화살표가 통째로 묻는다.

   화살표는 글꼴 기호(←/→)가 아니라 선으로 긋는다. 글리프는 끝이 둥글고 굵기가
   글꼴에 딸려 가서, 옆의 1px 테두리와 어긋난다. 선으로 그으면 사이트의 다른
   선들과 같은 1px 각진 획이 된다 — 플립북의 ✕ 가 같은 이유로 선이다.
   (마크업의 ←/→ 글자는 그대로 두고 감춘다. 라벨은 aria-label 이 맡는다.) */
.now-single__prev,
.now-single__next {
  --arrow-shaft: 12px;
  --arrow-head: 6px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #000;
  background-color: #fff;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.now-single__prev::before,
.now-single__next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--arrow-shaft);
  height: 1px;
  margin: -0.5px 0 0 calc(var(--arrow-shaft) / -2);
  background-color: currentColor;
}
.now-single__prev,
.now-single__next {
  /* 머리. 정사각형에서 두 변만 남겨 45° 돌리면 각진 꺾쇠가 된다.
     돌리고 나면 꼭짓점은 중심에서 0.7071×(한 변)만큼 옆으로 간다 — 그만큼
     되당겨 꼭짓점을 축 끝에 정확히 맞춘다. */
}
.now-single__prev::after,
.now-single__next::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--arrow-head);
  height: var(--arrow-head);
  transform: translate(-50%, -50%) rotate(45deg);
}
.now-single__prev:hover, .now-single__prev:focus-visible,
.now-single__next:hover,
.now-single__next:focus-visible {
  background-color: #000;
  color: #fff;
}
.now-single__prev.swiper-button-disabled,
.now-single__next.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.now-single__prev {
  left: 0;
}
.now-single__prev::after {
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  left: calc(50% - var(--arrow-shaft) / 2 + 0.7071 * var(--arrow-head));
}

.now-single__next {
  right: 0;
}
.now-single__next::after {
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  left: calc(50% + var(--arrow-shaft) / 2 - 0.7071 * var(--arrow-head));
}

.now-single__pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--ep-margin) / 2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 사각형 박스. 필터 바 체크박스와 같은 어법이다 —
     빈 사각형이 현재 위치에서만 검정으로 채워진다.
     (Swiper 기본 불릿은 원형 + opacity 0.2라 전부 덮어쓴다.) */
}
.now-single__pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0;
  border: 1px solid #000;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
}
.now-single__pagination .swiper-pagination-bullet-active {
  background-color: #000;
}

/* ── 신청 링크 ─────────────────────────────────────────────
   오른쪽 칸(7/13)의 맨 아래에 붙는 CTA. 화면에 띄우지(fixed) 않는다 —
   본문에 속한 물건이라 스크롤과 같이 움직이는 편이 맞고, 떠 있으면
   푸터·다음 섹션 위를 계속 가린다.

   붙이는 일은 margin-top: auto 하나가 한다. 칸이 flex column 이라
   (_grid.scss 의 .thaum-grid__*) 남는 세로 공간을 이 여백이 전부 먹고
   링크를 바닥으로 민다. 칸 높이는 --fill 이 한 화면만큼 잡아두므로
   (.thaum-grid--fill 의 min-height), 본문이 짧아도 칸 아래끝 —
   즉 화면 아래끝 — 에 앉는다. 본문이 길면 그만큼 아래로 내려간다.

   폭은 칸이 정한다. 칸의 안쪽 여백(--duo 의 좌우 10px) 안에 들어가므로
   위의 본문·메타와 좌우 끝이 맞는다. 예전(fixed)에는 칼럼 경계선까지
   꽉 찼는데, 흐름 안으로 들어온 지금은 글줄과 맞추는 쪽이 자연스럽다.

   칸이 세로로 쌓이는 구간(tablet 이하)에서는 --fill 이 min-height 를 풀어
   칸이 내용 높이가 된다. 그때는 밀어낼 여백이 없으니 본문 바로 뒤에 온다.
   ───────────────────────────────────────────────────────── */
.now-single__link {
  margin-top: auto;
  /* 한 줄짜리 색 띠. Magazine 의 관련 글·TQS 의 티켓 버튼과 같은 물건이라
     모양은 공통 믹스인이 낸다(_asset.scss) — 예전엔 같은 값을 여기 따로
     적어두어서, 모바일에서 저쪽만 1rem 으로 내려가고 이 링크만 1.3125rem
     으로 남아 있었다. */
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 10px;
  background-color: #000;
  color: #fff;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  /* 좁은 화면에서는 본문과 같은 급으로 내린다. 1.3125rem 은 칸이 가로로 나뉜
     PC 기준값이라, 화면 폭을 다 쓰는 띠에 그대로 두면 글자가 두 줄로 접힌다.
     상세 페이지들이 이 띠를 하나씩 갖고 있어서(Now 신청 링크, Magazine 관련 글,
     TQS 티켓·FAQ) 값이 갈리면 페이지마다 띠 크기가 달라진다 — 여기서 한 번에 낸다. */
}
@media (max-width: 1024px) {
  .now-single__link {
    font-size: 1rem;
  }
}
.now-single__link {
  justify-content: start;
}
.now-single__link:hover, .now-single__link:focus-visible {
  color: #fff;
}
.now-single__link .now-single__link-icon {
  display: block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  transform: translateY(1px);
}

.now-single__cat {
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 모바일: 갤러리 높이는 사진이 정한다 ────────────────────
   PC 에서 슬라이드 높이는 "남는 화면을 꽉 채우는" 값이다(--now-gallery-h,
   now-single.js 가 재서 꽂는다). 칸이 세로로 나뉘어 있어 갤러리가 화면의 절반
   폭만 쓰는 자리라, 그 높이가 곧 사진이 커질 수 있는 만큼이었다.

   칸이 화면 폭을 다 쓰는 여기서는 그 전제가 깨진다. 가로 사진은 폭에 맞추기만
   해도 높이가 얼마 안 되는데, 슬라이드는 여전히 한 화면 높이라 사진 위아래로
   빈자리만 크게 남는다. 높이를 풀어 사진이 정하게 두고, 그 값은 상한으로만
   남긴다 — 세로 사진이 첫 화면을 넘겨 한 장이 다 안 보이는 일은 그대로 막는다.

   슬라이드끼리 높이가 갈리지 않는 건 .swiper-wrapper 가 flex row
   (align-items: stretch)라서다 — 모두 가장 높은 것에 맞춰 서고, 그 값은
   넘겨도 그대로다. 그래서 넘길 때 칸이 튀지 않는다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 갤러리는 화면 폭을 통째로 쓴다. 페이지 좌우 여백이 얼마인지 몰라도 되게
     "칸 가운데를 축으로 100vw 를 편다"는 식으로 적는다 — margin 의 50% 는
     칸 폭 기준이라 (50% − 50vw) 를 양쪽에 걸면 상자 가운데가 칸 가운데에
     그대로 남는다. Movement 상세가 본문 칸에 쓰는 것과 같은 식이다
     (_movement-single.scss). 그 자리를 슬라이드가 자기 여백 20px 으로 다시
     깔아, 사진은 화면 끝에서 20px 안쪽에 선다.

     이 갤러리는 Magazine 상세도 함께 쓴다. 두 곳의 사진 자리가 갈리지
     않도록 값은 여기 한 곳에만 둔다. */
  .now-single__gallery {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .now-single__slide {
    height: auto;
    /* 좌우만 20px. 위아래는 비운다 — 높이가 사진에 맞춰 풀리는 구간이라
       세로 여백까지 주면 갤러리만 혼자 위아래로 벌어진다. */
    padding: 0 20px;
  }
  .now-single__img {
    /* PC 값(100%)은 부모 높이가 auto 라 여기서 저절로 풀린다. 그 자리에
       실측값을 상한으로 넣는다. 폭(max-width: 100%)은 그대로라, 둘 중 먼저
       닿는 쪽에서 멈추고 비율은 지켜진다. */
    max-height: var(--now-gallery-h);
  }
}
/* ── 모바일: 넘김 버튼 ──────────────────────────────────────
   손가락에는 호버가 없다. 탭한 자리에 :hover 가 걸린 채 남아, 누르지도 않은
   버튼이 계속 검게 채워져 있다. 전환도 함께 끈다 — 상태만 지우면 탭 뒤에
   색이 스르륵 빠지는 잔상이 남는다.

   :focus-visible 은 남긴다. 탭으로는 걸리지 않고 키보드로 옮겨 다닐 때만
   켜지는 표시라, 여기서 지우면 키보드 사용자가 어디 있는지 알 수 없다.

   상자와 화살표는 한 급 줄인다. 화면이 좁아 사진 위로 물리는 면적이 큰데,
   PC 와 같은 크기면 그림을 가린다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .now-single__prev,
  .now-single__next {
    --arrow-shaft: 9px;
    --arrow-head: 5px;
    /* 페이지 번호(.facetwp-page)와 같은 규격이다 — 1.3rem 정사각형, 선 없이
       회색 면, 모서리 4px. 넘기는 것끼리 한 모양으로 읽혀야 한다.
       값을 고칠 일이 있으면 _archive-list.scss 의 페이저도 같이 본다. */
    width: 1.3rem;
    height: 1.3rem;
    border: none;
    border-radius: 4px;
    background-color: #e6e6e6;
    transition: none;
  }
  .now-single__prev:hover,
  .now-single__next:hover {
    background-color: #e6e6e6;
    color: #000;
  }
}
/* ── Movement 상세 ─────────────────────────────────────────
   레이아웃은 공통 컴포넌트가 다 하고 있다 — 바는 .thaum-bar, 본문은
   .thaum-grid--trio, 목차는 .thaum-toc, 갤러리는 .now-single__* 를 그대로 쓴다.
   여기에는 바에 들어가는 세 조각의 타이포만 둔다.
   ───────────────────────────────────────────────────────── */
/* 목차가 헤더 아래에 붙는 자리는 _toc.scss 의 --toc-sticky-top 이 정한다
   (script.js 가 잰 실제 헤더 높이 + 거터). 여기서 따로 손대지 않는다 —
   목차를 눌러 이동한 헤딩이 멈추는 자리(.thaum-toc-target)와 같은 값이어야
   목차와 본문이 같은 선에서 만난다. */
.movement-single__body {
  /* 아이콘을 z-index:-1 로 깔기 위한 기준면.
     칸에 z-index 를 얹어 올리는 방법도 있지만, --sticky 는 태블릿 이하에서
     sticky 를 풀어버리므로 브레이크포인트마다 다시 손봐야 한다.
     여기서 스태킹 컨텍스트를 하나 만들어두면 아이콘이 이 칸 밖으로(상위 요소의
     배경 뒤로) 빠지지 않고, 칸은 건드릴 필요가 없다. */
  isolation: isolate;
}

/* 본문 뒤에 깔리는 유형 아이콘.

   두 겹이다 — .movement-single__art 는 본문 섹션을 그대로 덮는 판이고,
   아이콘(.movement-single__art-icon)은 그 안에서 sticky 로 붙어 스크롤에도
   화면 같은 자리에 머문다. 판을 따로 두는 이유는 두 가지다.
   sticky 는 절대 위치 요소에 걸 수 없고(붙을 기준이 사라진다), 판이 inset:0 이라
   판의 높이가 곧 섹션 높이여서 아이콘의 height:75% 가 여기서 해석된다.
   판이 sticky 의 이동 범위도 정한다 — 섹션을 벗어나면 함께 흘러 나간다.

   비율(--mv-ratio)과 색(--mv-icon)은 term 마다 달라 PHP 가 꽂아준다.
   여기 값은 안전망이다. 자세한 건 thaum_movement_single_art() 참고. */
.movement-single__art {
  --mv-icon: #e2e2e2;
  --mv-ratio: 1;
  /* 섹션 높이에서 아이콘이 차지할 몫. */
  --mv-art-height: 75%;
  /* 헤더 아래로 남는 화면 높이. 크기 상한과 sticky 위치가 이 값을 쓴다.
     (--ep-headerBottom 은 script.js 가 재서 꽂는 실측값이다.) */
  --mv-art-view: calc(100vh - var(--ep-headerBottom, var(--ep-headerH)));
  /* 그 화면에서 아이콘이 차지할 최대 몫. 본문이 길면 섹션이 화면보다 몇 배
     길어지는데, 그때 75% 를 그대로 쓰면 아이콘이 화면을 넘겨 한 조각만 보인다.
     화면에 붙어 있는 물건이라 화면에 들어오는 크기가 상한이다. */
  --mv-art-fit: 0.75;
  /* 본문 글자 뒤에 깔리는 자리라 색을 그대로 쓰면 글이 읽히지 않는다.
     term 마다 색이 달라 어떤 색은 이 값에서도 글자와 맞부딪힌다 — 배경으로
     읽힐 만큼 낮게 둔다. 크기·자리와 무관한 값이라 여기만 고치면 된다. */
  --mv-art-opacity: 0.25;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  z-index: -1;
  color: var(--mv-icon);
  opacity: var(--mv-art-opacity);
  pointer-events: none;
}
@media (max-width: 780px) {
  .movement-single__art {
    display: none;
  }
}

/* 폭은 높이와 비율에서 나온다 — 그래서 width 를 재지 않고 aspect-ratio 에 맡긴다.
   섹션이 좁으면 그 비율대로도 폭이 넘칠 수 있어 max-width 로 잡아둔다
   (그때는 SVG 가 상자 안에서 자기 비율을 지키며 작아진다). */
.movement-single__art-icon {
  position: sticky;
  /* 헤더 아래 남는 자리의 가운데. 아이콘이 상한(--mv-art-fit)까지 커진 상태를
     기준으로 위아래 여백의 절반만 내려앉힌다. 섹션이 짧아 아이콘이 상한보다
     작을 때는 가운데보다 조금 위에 서는데, 그런 섹션은 스크롤 자체가 짧다. */
  top: calc(var(--ep-headerBottom, var(--ep-headerH)) + var(--mv-art-view) * (1 - var(--mv-art-fit)) / 2);
  flex: none;
  height: min(var(--mv-art-height), var(--mv-art-view) * var(--mv-art-fit));
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--mv-ratio);
}

.thaum-bar--movement-single {
  /* 칸마다 내용 길이가 다르다(유형 한 줄 vs 제목 두세 줄). 바 기본값인
     가운데 정렬이면 짧은 칸이 아래로 밀려 첫 줄이 안 맞는다 —
     어바웃의 `.thaum-bar.contents` 와 같은 이유로 위쪽에 맞춘다. */
  align-items: start;
  /* 제목. 이 페이지의 h1 이다.
     전역 h1(3.125rem)은 바 안에서 .thaum-bar__heading 이 1.125rem 으로
     이미 눌러놨고, 그 위에 이 값이 얹힌다. */
}
.thaum-bar--movement-single .movement-single__title {
  font-size: 1.125rem;
  line-height: 1.25;
}
.thaum-bar--movement-single {
  /* 유형(왼쪽) · 아티스트(오른쪽). 한 줄짜리 라벨이라 접히지 않게 둔다.
     크기는 바가 물려주는 값(1.125rem/600)을 그대로 쓴다. */
}
.thaum-bar--movement-single .movement-single__type,
.thaum-bar--movement-single .movement-single__artist {
  white-space: nowrap;
}
.thaum-bar--movement-single {
  /* 유형은 여러 개 붙을 수 있다. 붙어서 한 낱말처럼 읽히지 않게 사이를 벌린다. */
}
.thaum-bar--movement-single .movement-single__type + .movement-single__type {
  margin-left: calc(var(--ep-margin) / 2);
}
.thaum-bar--movement-single {
  /* ── 모바일 ────────────────────────────────────────────
     칸이 세로로 쌓이면(_bar.scss 의 flex column) 유형은 제목 위에 혼자 한 줄을
     쓴다. 그 자리에서 유형은 "이 글이 무엇인가"를 먼저 알리는 표식이라
     term 색을 두른 태그로 만든다 — 본문 뒤에 깔리는 아이콘과 같은 색이다
     (thaum_movement_single_bar 가 --mv-tag 로 꽂아준다).
     크기(태그·아티스트 1rem, 제목 1.3125rem)는 .thaum-bar--single 이
     이미 잡아 두었으므로 여기서 다시 적지 않는다.
     ───────────────────────────────────────────────────── */
}
@media (max-width: 1024px) {
  .thaum-bar--movement-single {
    gap: 0 !important;
    /* 태그가 칸 폭만큼 늘어나면 색 띠가 되어 버린다. 글자만큼만 차지하게
       칸(flex column) 안에서 왼쪽에 붙여둔다. */
  }
  .thaum-bar--movement-single .thaum-bar__left {
    align-items: start;
    margin-bottom: 8px;
  }
  .thaum-bar--movement-single .movement-single__type {
    --mv-tag: #c8c8c8;
    /* 크기·여백·모서리는 아카이브 카드의 유형 태그와 같은 값이다
       (_asset.scss). 같은 유형 이름이 목록과 상세에서 다른 크기로
       서 있으면 안 된다. 여기서는 색만 정한다.

       term 색은 테두리로 세우고 배경에는 옅게만 깐다 — 꽉 채우면 색마다
       밝기가 달라 글자가 묻힌다. 바탕이 흰색에 가깝게 남으니 글자는 어떤
       유형이든 검정 하나로 끝난다(아카이브 카드와 같은 규칙). */
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    border: 1px solid var(--mv-tag);
    background-color: color-mix(in srgb, var(--mv-tag) 20%, transparent);
    color: #000;
    font-size: 0.75rem;
    font-weight: 500;
  }
  .thaum-bar--movement-single {
    /* 유형이 여럿이면 세로로 쌓인다(칸이 flex column). 가로 여백이 아니라
       줄 간격으로 벌려야 한다 — 위 margin-left 는 여기서 쓸모가 없다. */
  }
  .thaum-bar--movement-single .movement-single__type + .movement-single__type {
    margin-left: 0;
    margin-top: 5px;
  }
  .thaum-bar--movement-single {
    /* 한 줄로 붙들어 두면 이름이 길 때 바가 화면 밖으로 나간다.
       칸이 화면 폭을 다 쓰는 지금은 접히는 편이 맞다. */
  }
  .thaum-bar--movement-single .movement-single__type,
  .thaum-bar--movement-single .movement-single__artist {
    white-space: normal;
  }
  .thaum-bar--movement-single {
    /* 크기·행간은 여기서 안 정한다 — 다른 상세의 카테고리·시리즈·클럽과
       같은 자리라 _bar.scss 의 .thaum-bar--single 이 한 번에 낸다.
       여기 남는 건 이 페이지에만 있는 것뿐이다: 제목 아래 딸리는 줄이라
       블록으로 떼어내고, 사람 이름이라 한 톤 눕혀 둔다. */
  }
  .thaum-bar--movement-single .movement-single__artist {
    display: block;
    padding-top: 5px;
    color: #717171;
  }
}

/* ── 본문 ──────────────────────────────────────────────────
   글자 스타일은 .thaum-grid__text 가 대부분 이미 잡고 있다(p·h3·h4·ul·li·a·img).
   여기 남는 건 그쪽에 없는 태그뿐이다 — 이 포스트 타입은 본문을 GenerateBlocks
   텍스트 블록으로 쓰는데 그게 h1 으로 나온다.

   전역 `h1 { font-size: 3.125rem }` 을 이겨야 하지만 !important 는 필요 없다.
   `.movement-single__contents h1`(클래스1+태그1)이 `h1`(태그1)보다 무겁다.
   ───────────────────────────────────────────────────────── */
.movement-single__contents h1,
.movement-single__contents h2 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 20px 0 10px;
  /* 굵기를 내리는 자리는 다른 상세의 본문 헤딩과 같아야 한다 —
     그쪽은 .thaum-grid__text 가 1024px 에서 내린다(_grid.scss).
     780px 로 두면 그 사이 폭에서 이 페이지만 700 으로 남는다. */
}
@media (max-width: 1024px) {
  .movement-single__contents h1,
  .movement-single__contents h2 {
    font-weight: 600;
  }
}
.movement-single__contents {
  /* 행간은 이제 공통 본문이 들고 있다(.thaum-grid__text, 모바일 1.6).
     PC 값만 여기 남는다 — 이 포스트 타입은 본문이 GenerateBlocks 라
     문단이 길게 이어지는 편이라 좁은 칸에서도 한 급 넉넉하게 둔다. */
}
.movement-single__contents p {
  line-height: 1.6;
}
.movement-single__contents strong {
  display: block;
  margin-top: 20px;
}
.movement-single__contents .wp-block-separator {
  border-top: 1px solid #000;
}

/* ── 모바일 목차 ───────────────────────────────────────────
   칸이 세로로 쌓이면 목차는 본문 위 한 덩어리가 된다. 그대로 두면 조금만
   내려가도 화면 밖으로 사라져 목차 구실을 못 한다 — 회색 상자로 묶어
   헤더 아래에 붙여둔다.

   붙이는 건 목차(.thaum-toc)가 아니라 목차가 든 칸(.thaum-grid__left)이다.
   sticky 는 부모 안에서만 움직이는데 칸 높이가 곧 목차 높이라, 목차 자신에
   걸면 움직일 여지가 0 이다. 칸은 그리드(본문·갤러리 전체)를 기준으로 삼으므로
   글 끝까지 따라온다. (_toc.scss 의 .thaum-toc--sticky 는 이 구간에서 static
   으로 풀리므로 서로 부딪히지 않는다.)
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .movement-single__body {
    /* 목차가 붙는 자리 — 헤더 아래끝에 딱 붙는다. 사이 여백은 두지 않는다.
       헤더 높이는 script.js(MeasuredHeight)가 재서 꽂는 실측값이다 —
       모바일 헤더도 높이를 못박지 않아 상수로 적을 수 없다.
       폴백은 JS 가 막힌 환경 대비용이고, 로고 두 줄 + 상하 여백 기준이다. */
    --mv-toc-top: var(--ep-headerBottom, 66px);
  }
  .movement-single__body > .thaum-grid__left {
    position: sticky;
    top: var(--mv-toc-top);
    align-self: start;
    /* 전역 `* { position: relative }` 때문에 뒤따르는 칸(본문·갤러리)도
       위치 지정 요소다 — z-index 없이는 그리는 순서대로 목차 위에 얹혀
       목차가 가려진다. 그래서 한 겹 올려둔다.

       2 인 이유: 갤러리가 Swiper 자체 CSS 로 `.swiper { z-index: 1 }` 을
       들고 있다. 목차도 1 이면 값이 같아 그리는 순서가 가르는데,
       갤러리가 뒤라서 목차를 덮는다. 한 칸 더 올려 확실히 위에 둔다.

       갤러리 안의 화살표·페이지네이션(z-index: 2)이 이 값을 넘지 못하는 건
       .swiper 가 position + z-index 로 스태킹 컨텍스트를 만들어서다 —
       그 안의 2 는 갤러리 안에서만 유효하다.

       유형 아이콘(z-index: -1)과 부딪히지 않는 건 .movement-single__body
       가 isolate 라 둘이 같은 스태킹 컨텍스트 안에서 정리되기 때문이다. */
    z-index: 2;
  }
  .movement-single__body .thaum-toc {
    padding: var(--ep-margin, 10px);
    background-color: #ededed;
    border-radius: 5px;
    /* 헤딩이 많으면 상자가 화면을 통째로 덮는다. 화면에 남는 만큼까지만
       키우고 넘치는 항목은 상자 안에서 굴린다. */
    max-height: calc(100vh - var(--mv-toc-top) - var(--ep-margin, 10px));
    max-height: calc(100dvh - var(--mv-toc-top) - var(--ep-margin, 10px));
    overflow-y: auto;
  }
  .movement-single__body {
    /* 본문과 같은 급으로 눌러둔다(PC 는 1.125rem). */
  }
  .movement-single__body .thaum-toc__heading {
    font-size: 1rem;
  }
  .movement-single__body .thaum-toc__link {
    font-size: 0.8125rem;
    line-height: 1.3;
  }
  .movement-single__body {
    /* 목차를 눌러 이동한 헤딩이 멈추는 자리. 헤더뿐 아니라 그 아래 붙어 있는
       목차 상자만큼도 더 내려와야 글자가 상자 뒤로 숨지 않는다. 상자 높이는
       항목 수에 따라 달라져 script.js 가 재서 --toc-boxH 로 꽂아준다.
       (script.js 의 Toc.measure() 가 이 값을 그대로 읽으므로, 현재 항목
        판정선도 같이 내려간다 — 상자에 가린 헤딩이 켜지지 않는다.) */
  }
  .movement-single__body .movement-single__contents .thaum-toc-target {
    scroll-margin-top: calc(var(--mv-toc-top) + var(--toc-boxH, 0px) + var(--ep-margin, 10px));
  }
  .movement-single__body {
    /* ── 갤러리 ────────────────────────────────────────
       그리는 순서를 [갤러리][목차][본문]로 바꾼다. 마크업은 [목차][본문]
       [갤러리] 순이라 그대로 두면 갤러리가 글 끝까지 내려간 뒤에야 나온다 —
       글이 길수록 이미지는 사실상 없는 것과 같아진다. 상단 바 바로 밑,
       페이지에 들어오면 먼저 보이는 자리로 올린다.

       order 는 그리는 순서만 바꾼다. DOM 은 그대로라 읽기·탭 순서는
       [목차][본문][갤러리] 그대로 남는다.

       목차는 갤러리 다음이다. sticky 라 갤러리를 지나 올라오는 순간 헤더
       아래에 붙고, 그때부터 본문 끝까지 따라온다 — 자리만 뒤로 갈 뿐
       하는 일은 달라지지 않는다. */
  }
  .movement-single__body > .thaum-grid__right {
    order: 1;
  }
  .movement-single__body > .thaum-grid__left {
    order: 2;
  }
  .movement-single__body > .thaum-grid__center {
    order: 3;
  }
  .movement-single__body {
    /* 화면 폭을 그대로 쓴다.
       페이지 좌우 여백이 얼마인지 여기서 알 필요가 없도록 "칸 가운데를 축으로
       100vw 를 편다"는 식으로 적는다 — margin 의 50% 는 칸 폭 기준이라
       (50% − 50vw) 를 양쪽에 걸면 상자 가운데가 칸 가운데에 그대로 남는다.
       칸이 얼마나 안쪽에 있든 좌우가 똑같이 밀려 나가 화면에 딱 맞는다.

       이 폭이 그리드 트랙을 밀어내지 않는 건 칸에 min-width: 0 이 걸려 있어서다
       (_grid.scss). 없으면 100vw 가 칸의 최소폭이 되어 그리드가 통째로 넓어진다. */
  }
  .movement-single__body .now-single__gallery {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .movement-single__body {
    /* 슬라이드 높이를 사진에 맡기는 일은 이제 갤러리 공통 규칙이 한다
       (_now-single.scss 의 "모바일: 갤러리 높이는 사진이 정한다") — 상세
       페이지마다 갤러리 높이가 다르게 굴면 안 되므로 한 곳에서 낸다.
       여기 남는 건 이 페이지에만 있는 것뿐이다(위 full-bleed, 아래 화살표).

       Swiper 의 autoHeight 는 여전히 끈 채로 둔다 — 켜면 loop 재배치 중에
       높이를 재서 칸이 접힌다(now-single.js 주석 참고). */
    /* 흰 판과 1px 테두리는 이제 버튼 기본값이다(_now-single.scss) — 여기서
       따로 얹지 않는다.

       갤러리가 화면 끝까지 펴지면서 left/right: 0 이 화면 가장자리가 됐다.
       페이지 여백만큼 안으로 들여 버튼이 화면에 붙지 않게 한다 —
       full-bleed 전과 같은 간격이다. */
  }
  .movement-single__body .now-single__prev {
    left: var(--ep-margin, 10px);
  }
  .movement-single__body .now-single__next {
    right: var(--ep-margin, 10px);
  }
}
/* ── TQS 상세 ──────────────────────────────────────────────
   레이아웃은 그리드(.thaum-grid--trio / --fill)가 이미 다 잡고 있다.
   여기에는 TQS 에만 있는 것들만 둔다 — 페이지 배경, 칸별 스크롤, 로고,
   이미지 테두리, wysiwyg 로 들어오는 메타 값, 그리고 티켓 버튼과
   FAQ 질문 줄이 공유하는 검정 막대.

   Now 상세와는 이제 공유하는 스타일이 없다(스와이퍼도 fixed CTA 도 안 쓴다).
   ───────────────────────────────────────────────────────── */
/* ── 페이지 배경 ───────────────────────────────────────────
   색 값은 <head> 인라인 스크립트가 --tqs-bg 에 꽂는다(inc/tqs-background.php).
   여기서는 그 값을 어디에 바를지만 정한다.

   폴백을 transparent 로 둔 건, JS 가 막힌 환경에서 색이 안 정해졌을 때
   지금과 똑같은(흰) 화면으로 남게 하려는 것이다.
   ───────────────────────────────────────────────────────── */
body.tqs-page {
  background-color: var(--tqs-bg, transparent);
}

/* GeneratePress 가 흰색(--base-3)으로 칠하는 판들. 그대로 두면 배경색 위에
   흰 띠로 남는다.

   이 사이트에서 실제로 걸리는 건 푸터(.site-info) 하나다 — 헤더는 GP 것이
   아니라 GenerateBlocks 로 짠 <header> 라 배경이 없고, 본문도 카드(.inside-article)
   없이 그려진다. 나머지는 레이아웃 설정을 바꿔 그 판들이 살아났을 때 같이
   따라오라고 함께 적어둔 것이다. */
body.tqs-page .site-info,
body.tqs-page .site-header,
body.tqs-page .inside-article,
body.tqs-page .separate-containers .inside-article,
body.tqs-page .separate-containers .page-header,
body.tqs-page .one-container .container {
  background-color: transparent;
}

/* 푸터는 배경색을 한 겹 눌러 본문과 구분한다.

   원래 자체 배경(#F8F8F8)이 있어 그대로 두면 배경색 아래에 회색 띠로 남는다.
   그렇다고 투명하게만 두면 본문과 경계가 사라진다. 그래서 검정을 옅게 덮는다 —
   뒤에 깔린 body 색이 그대로 비치면서 같은 색조의 조금 어두운 톤이 된다.

   어두운 색을 직접 계산하지 않는 건 그 값이 매번 달라지기 때문이다. 겹치는
   방식이면 팔레트에 어떤 색을 넣든, 색이 몇 개로 늘든 여기를 따라 고칠 일이 없다.
   (JS 가 막혀 --tqs-bg 가 없을 때도 흰 배경 위 옅은 회색이 되어 구분은 남는다.)

   body 배경은 캔버스로 전파되므로 푸터 뒤까지 덮고, .site-footer 자체에는
   GP 가 배경을 주지 않아 사이에 낄 판도 없다. */
body.tqs-page .thaum-footer {
  background-color: rgba(0, 0, 0, 0.08);
}

/* ── 칸별 스크롤 ───────────────────────────────────────────
   가운데(본문)와 오른쪽(이미지) 칸이 각자 스크롤한다. 길이가 크게 다른 두 칸을
   나란히 두는 자리라, 한쪽을 끝까지 보려고 다른 쪽까지 흘려보내지 않게 한다.

   그러려면 칸의 높이가 정해져 있어야 한다 — .thaum-grid--fill 의 min-height
   만으로는 안 된다(내용만큼 늘어나므로 넘칠 일이 없다). 그래서 그리드 자체를
   화면 높이로 못박고 두 칸에만 overflow 를 준다. 칸은 --fill 의
   align-items: stretch 로 그 높이를 그대로 물려받는다.

   높이 기준은 --fill 이 이미 재둔 --grid-fill-above 다 — 그리드가 문서 맨 위에서
   얼마나 내려와 있는지(헤더 + 그 위의 모든 것)를 script.js 가 잰 값이라 여기서
   다시 계산할 게 없다. 전역 box-sizing: border-box 라 그리드의 위아래 여백은
   이 높이 안에 이미 들어 있다.

   스크롤 막대는 전역에서 감춘다(_asset.scss). overscroll-behavior 는 건드리지
   않는다 — 칸 끝에 닿으면 페이지가 이어서 스크롤돼야 푸터로 내려갈 길이 남는다.
   ───────────────────────────────────────────────────────── */
.tqs-single__body {
  --tqs-fade: 56px;
  height: calc(100vh - var(--grid-fill-above));
  height: calc(100dvh - var(--grid-fill-above));
}
.tqs-single__body .thaum-grid__center,
.tqs-single__body .thaum-grid__right {
  overflow-y: auto;
}
.tqs-single__body {
  /* 위아래로 더 있다는 표시. 칸의 끝을 페이지 색으로 덮어 글이 화면 밖으로
     이어지는 것처럼 보이게 한다. 스크롤 막대를 사이트 전역에서 감춰 두었으므로
     (_asset.scss) "더 있다"는 신호가 사실상 이것뿐이다.

     칸마다 따로 스크롤하므로 덮개도 칸마다 하나씩이다 — ::before 는 가운데,
     ::after 는 오른쪽. 한쪽이 끝에 닿아도 다른 쪽은 그대로다.

     덮개 하나가 칸 높이를 다 덮고, 위아래 띠는 그 안의 배경 두 겹이다.
     의사 요소는 둘뿐인데 자리는 넷(칸 2 × 위아래)이라 이렇게 묶었다.
     높이를 0 으로 만들면 그 띠만 사라진다 — 켜고 끄는 값이 --fade-top /
     --fade-bottom 이고, transition 도 그 값에 걸린다.

     그리드 아이템으로 두지 않는다. 칼럼을 못박은 아이템은 자동 배치보다 먼저
     자리를 잡아서, 뒤에 놓이는 칸들이 1행에 못 들어가고 다음 줄로 밀려난다
     (레이아웃이 통째로 어긋난다). 절대 위치로 띄우면 배치에서 아예 빠지는데,
     그리드의 절대 위치 자식은 grid-column 을 주면 그 칸의 자리를 기준면으로
     삼는다 — 그래서 좌우는 칸 변수(--grid-center / --grid-right)를 그대로
     쓰고 픽셀 계산을 하지 않는다. 세로 기준은 그리드의 패딩 박스라
     위아래를 --grid-pad 만큼 물려야 칸의 끝과 맞는다.

     칸도 전역 * { position: relative } 로 위치 지정 요소라 DOM 순서대로
     그려진다. 덮개가 칸 위에 오도록 z-index 를 한 단 올린다.

     색은 페이지 배경과 같은 --tqs-bg 다(inc/tqs-background.php 가 :root 에
     꽂는 그날의 색). 글이 이 색으로 사라져야 배경으로 녹아든다.

     맨 위·맨 아래에 닿았거나 넘칠 것이 아예 없으면 script.js(ScrollFade)가
     그리드에 클래스를 붙여 그쪽 띠를 지운다 — 없는 내용을 가리키지 않도록. */
}
.tqs-single__body::before, .tqs-single__body::after {
  --fade-top: var(--tqs-fade);
  --fade-bottom: var(--tqs-fade);
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--grid-pad);
  bottom: var(--grid-pad);
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to bottom, var(--tqs-bg, #fff), transparent), linear-gradient(to top, var(--tqs-bg, #fff), transparent);
  background-repeat: no-repeat;
  background-position: top, bottom;
  background-size: 100% var(--fade-top), 100% var(--fade-bottom);
  transition: background-size 0.2s ease;
}
.tqs-single__body::before {
  grid-column: var(--grid-center);
}
.tqs-single__body::after {
  grid-column: var(--grid-right);
}
.tqs-single__body.is-center-start::before, .tqs-single__body.is-right-start::after {
  --fade-top: 0px;
}
.tqs-single__body.is-center-end::before, .tqs-single__body.is-right-end::after {
  --fade-bottom: 0px;
}
.tqs-single__body {
  /* 칸이 세로로 쌓이는 구간에선 칸마다 한 화면씩 잡아먹는다.
     페이지가 통으로 스크롤하도록 되돌린다. 칸 안에서 넘칠 일이 없으니
     아래를 덮을 이유도 없다. */
}
@media (max-width: 1024px) {
  .tqs-single__body {
    height: auto;
  }
  .tqs-single__body .thaum-grid__center,
  .tqs-single__body .thaum-grid__right {
    overflow-y: visible;
  }
  .tqs-single__body::before, .tqs-single__body::after {
    display: none;
  }
}

/* ── 로고 (왼쪽 칸) ────────────────────────────────────────
   제목 자리를 대신하는 <h1> 이라 글자 관련 전역값(h1 3.125rem, margin)이
   따라온다. 안에 svg 하나뿐이라 폰트 크기는 상관없지만, 여백과 줄 높이는
   그림 아래 빈 칸으로 남으므로 지운다.
   ───────────────────────────────────────────────────────── */
.tqs-single__logo {
  margin: 0;
  line-height: 0;
}

/* svg 태그에 박혀 있는 width/height(1024×503)는 CSS 가 이긴다.
   비율은 viewBox 가 지키므로 height 는 auto 로 두면 된다. */
/* 목록으로 가는 링크. 블록으로 두어 인라인 줄 높이가 그림 아래
   빈 칸으로 남지 않게 한다. */
.tqs-single__logo-link {
  display: block;
}
@media (max-width: 780px) {
  .tqs-single__logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tqs-single__logo-link .tqs-single__logo-svg {
    max-width: 250px;
    height: auto;
  }
}

.tqs-single__logo-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 이미지 (오른쪽 칸) ────────────────────────────────────
   원본 비율 그대로 세로로 쌓기만 하면 되는 자리다.

   그리드의 .thaum-grid__media / .thaum-grid__figure 를 일부러 쓰지 않는다.
   그쪽은 비율을 못박을 수 있게 만들어져 있어서
     - figure 가 flex 컬럼 → 이미지가 flex 아이템이 되고, 주축(세로) 크기를
       "이미지의 원래 높이"에서 가져온다. 폭은 칸에 맞춰 이미 줄어든 뒤라
       상자 비율이 어긋난다.
     - 그 어긋난 상자를 object-fit 이 채운다 (cover 면 잘리고, fill 이면 늘어난다)
   여기서는 그 장치가 전부 방해만 되므로, 얹었다가 하나씩 되돌리는 대신
   플레인한 블록 박스로 새로 짠다. 블록 흐름에서 width:100% + height:auto 는
   언제나 원본 비율 그대로의 상자를 만든다.
   ───────────────────────────────────────────────────────── */
.tqs-single__images {
  display: block;
}

.tqs-single__figure {
  display: block;
  margin: 0;
}
.tqs-single__figure + .tqs-single__figure {
  margin-top: var(--ep-margin);
}

/* 비율을 정하는 건 이 세 줄이 전부다. aspect-ratio 도 object-fit 도 쓰지 않는다 —
   상자가 늘 원본 비율이라 채울 일 자체가 없다.

   전역 box-sizing: border-box 라 테두리는 이미지 폭 안쪽으로 그려진다 —
   칸 폭을 밀어내지 않는다. */
.tqs-single__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #000;
}

.tqs-single__caption {
  margin: calc(var(--ep-margin) / 2) 0 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

/* 메타 값이 에디터(wysiwyg) 필드라 <p> 로 감싸여 온다. Now 는 여기가 text 라서
   문제가 없었지만, 전역 `p { font-size: 1rem; line-height: 1.5rem }` 이 칸의
   타이포를 끊어버리므로 도로 상속시킨다. 값을 다시 적지 않고 inherit 로 받으면
   .thaum-grid__meta-value 한 곳만 고쳐도 따라온다.

   앞뒤 여백은 지운다 — 행 높이는 .thaum-grid__meta-item 의 padding 이 잡는다. */
.tqs-single__meta .thaum-grid__meta-value :where(p, ul, ol, li) {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
@media (max-width: 780px) {
  .tqs-single__meta .thaum-grid__meta-value {
    color: #000;
  }
}
.tqs-single__meta .thaum-grid__meta-value p {
  margin: 0 0 0.5em;
}
.tqs-single__meta .thaum-grid__meta-value > :first-child {
  margin-top: 0;
}
.tqs-single__meta .thaum-grid__meta-value > :last-child {
  margin-bottom: 0;
}

/* ── 섹션 라벨 ─────────────────────────────────────────────
   "행사 개요", "FAQ" 같은 칸 안의 소제목. 배경 칠한 칩(.thaum-grid__tag)이
   아니라 본문과 같은 크기에 굵기만 올린다 — 본문 흐름을 끊지 않고 층만 만든다.
   ───────────────────────────────────────────────────────── */
.tqs-single__label {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 780px) {
  .tqs-single__intro {
    margin-top: -10px;
  }
}

/* ── 검정 막대 ─────────────────────────────────────────────
   티켓 버튼과 FAQ 질문 줄이 같은 물건이다. 한 곳에서 모양을 내고 두 군데서
   불러 쓴다 — 따로 적어두면 한쪽만 고쳐져 서로 어긋난다.
   ───────────────────────────────────────────────────────── */
/* ── 티켓 링크 ─────────────────────────────────────────────
   메타 정보 바로 아래에 그냥 놓인다. 예전에는 화면 아래에 fixed 로 떠 있어
   본문 컬럼 폭을 직접 계산해야 했는데, 이제 칸 안에 들어가므로 그럴 필요가 없다 —
   폭은 가운데 칸이 정한다.
   ───────────────────────────────────────────────────────── */
.tqs-single__ticket {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 10px;
  background-color: #000;
  color: #fff;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  /* 좁은 화면에서는 본문과 같은 급으로 내린다. 1.3125rem 은 칸이 가로로 나뉜
     PC 기준값이라, 화면 폭을 다 쓰는 띠에 그대로 두면 글자가 두 줄로 접힌다.
     상세 페이지들이 이 띠를 하나씩 갖고 있어서(Now 신청 링크, Magazine 관련 글,
     TQS 티켓·FAQ) 값이 갈리면 페이지마다 띠 크기가 달라진다 — 여기서 한 번에 낸다. */
}
@media (max-width: 1024px) {
  .tqs-single__ticket {
    font-size: 1rem;
  }
}
.tqs-single__ticket {
  justify-content: start;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, gap 0.3s ease-in-out;
}
.tqs-single__ticket:hover, .tqs-single__ticket:focus-visible {
  background-color: #636363;
  color: #fff;
}
.tqs-single__ticket .tqs-single__ticket-icon {
  display: block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  transform: translateY(1px);
}

/* ── FAQ 아코디언 ──────────────────────────────────────────
   질문 줄은 티켓 버튼과 같은 검정 막대다. 여닫는 동작은 details/summary 가
   그대로 하고, 여기서는 UA 기본 마커만 걷어낸다.
   ───────────────────────────────────────────────────────── */
.tqs-single__faq {
  display: flex;
  flex-direction: column;
}

/* 제목과 항목이 같은 스택을 이룬다. 흰 선을 위아래로 두르고 1px 씩 겹쳐 올려,
   이어진 막대 사이에 선이 한 줄만 남게 한다. */
.tqs-single__faq-title,
.tqs-single__faq-item {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin-top: -1px;
}

/* 목록 첫 막대인 제목. 질문 줄과 같은 모양이되 여닫이 표시는 없다. */
.tqs-single__faq-title {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 10px;
  background-color: #000;
  color: #fff;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  /* 좁은 화면에서는 본문과 같은 급으로 내린다. 1.3125rem 은 칸이 가로로 나뉜
     PC 기준값이라, 화면 폭을 다 쓰는 띠에 그대로 두면 글자가 두 줄로 접힌다.
     상세 페이지들이 이 띠를 하나씩 갖고 있어서(Now 신청 링크, Magazine 관련 글,
     TQS 티켓·FAQ) 값이 갈리면 페이지마다 띠 크기가 달라진다 — 여기서 한 번에 낸다. */
}
@media (max-width: 1024px) {
  .tqs-single__faq-title {
    font-size: 1rem;
  }
}
.tqs-single__faq-title {
  margin-bottom: 0;
}

.tqs-single__faq-q {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 10px;
  background-color: #000;
  color: #fff;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  /* 좁은 화면에서는 본문과 같은 급으로 내린다. 1.3125rem 은 칸이 가로로 나뉜
     PC 기준값이라, 화면 폭을 다 쓰는 띠에 그대로 두면 글자가 두 줄로 접힌다.
     상세 페이지들이 이 띠를 하나씩 갖고 있어서(Now 신청 링크, Magazine 관련 글,
     TQS 티켓·FAQ) 값이 갈리면 페이지마다 띠 크기가 달라진다 — 여기서 한 번에 낸다. */
}
@media (max-width: 1024px) {
  .tqs-single__faq-q {
    font-size: 1rem;
  }
}
.tqs-single__faq-q {
  cursor: pointer;
  padding-right: 34px;
  list-style: none;
}
.tqs-single__faq-q::-webkit-details-marker {
  display: none;
}
.tqs-single__faq-q {
  /* 여닫이 표시 — 글자가 아니라 1px 선이다.
     같은 14×14 상자를 둘 겹쳐두고 배경 그라디언트로 한쪽엔 가로선, 다른 쪽엔
     세로선을 그린다. 서체에 기대지 않으므로 굵기가 정확히 1px 이고, 폰트가
     바뀌어도 모양·위치가 흔들리지 않는다.
     (전역 `* { position: relative }` 덕에 summary 가 이미 기준 상자다.) */
}
.tqs-single__faq-q::before, .tqs-single__faq-q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: center;
}
.tqs-single__faq-q::before {
  background-size: 100% 1px;
}
.tqs-single__faq-q {
  /* 세로선 — 열리면 90° 돌아 가로선과 정확히 겹치면서 한 줄로 보인다.
     지우지 않고 돌리는 건 그 사이를 이을 수 있기 때문이다. 상자가 정사각형이라
     가운데를 축으로 돌아도 자리가 밀리지 않는다. */
}
.tqs-single__faq-q::after {
  background-size: 1px 100%;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.tqs-single__faq-item[open] .tqs-single__faq-q::after {
  transform: translateY(-50%) rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .tqs-single__faq-q::after {
    transition: none;
  }
}
/* 답변. 타이포는 .thaum-grid__text 가 잡고 여기서는 자리만 준다.
   막대 바로 밑에 붙지 않도록 위로만 여백을 준다. */
.tqs-single__faq-a {
  padding: 0.5rem;
}
.tqs-single__faq-a p {
  font-size: 1.3125rem;
}

/* ── 모바일: 글자 급 정리 ───────────────────────────────────
   좁은 화면에서는 두 급으로만 읽히게 한다.
     큰 글자 1.125rem — 검정 막대(티켓·FAQ 제목·질문)와 섹션 라벨
     본문   1rem      — 설명 글과 FAQ 답변

   PC 는 건드리지 않는다. 검정 막대는 원래 1.3125rem(_asset.scss 의
   thaum-slab)이고 본문은 1.125rem(_grid.scss 의 grid-type)인데, 그 값을 좁은
   화면에 그대로 두면 막대 글자가 두 줄로 접히고 본문이 화면을 다 먹는다.

   .thaum-grid__text 는 다른 상세도 함께 쓰는 공통 본문이라, 여기서는 TQS
   안(.tqs-single)으로만 좁혀 잡는다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tqs-single__label {
    font-size: 1.125rem;
  }
  .tqs-single .thaum-grid__text,
  .tqs-single .thaum-grid__text p,
  .tqs-single__faq-title,
  .tqs-single__faq-a,
  .tqs-single__faq-q,
  .tqs-single__ticket,
  .tqs-single__faq-a p {
    font-size: 1rem;
  }
}
/* ── Magazine 상세 ─────────────────────────────────────────
   레이아웃·타이포는 공통 컴포넌트가 이미 다 하고 있다 — 바는 .thaum-bar--duo,
   본문은 .thaum-grid--duo, 정보 목록은 .thaum-grid__meta, 설명은
   .thaum-grid__text, 갤러리는 .now-single__* 를 그대로 쓴다.
   여기에는 그 어디에도 없는 것만 둔다 — 바의 시리즈 칩과 관련 글 목록.
   ───────────────────────────────────────────────────────── */
.thaum-bar--magazine-single {
  /* 제목이 두세 줄로 접힐 수 있다. 바 기본값인 가운데 정렬이면 한 줄짜리
     시리즈가 아래로 밀려 첫 줄이 안 맞는다 — 위쪽에 맞춘다. */
  align-items: start;
  /* 시리즈는 한 줄짜리 라벨이라 접히지 않게 둔다.
     크기는 바가 물려주는 값(1.125rem/600)을 그대로 쓴다. */
}
.thaum-bar--magazine-single .magazine-single__series {
  white-space: nowrap;
}
.thaum-bar--magazine-single .magazine-single__series + .magazine-single__series {
  margin-left: calc(var(--ep-margin) / 2);
}

/* ── 관련 글 ───────────────────────────────────────────────
   설명 아래에 이어 붙는 목록. 한 줄이 [제목] … [포스트 타입] 인 색 박스다.
   모양은 TQS 의 티켓 버튼과 같은 물건이라 thaum-slab 을 함께 쓴다(_asset.scss).
   색만 다르다 — 배경 #d1d1d1, 글자 #000.

   아카이브의 A4 비율 카드를 쓰지 않는 건 여기가 본문 칸에 이어 붙는 자리라
   그 상자가 맞지 않아서다.

   자리는 언제나 칸의 맨 아래다 — 라벨의 화살표("관련 글 ↓")가 가리키는 곳이
   본문 끝이 아니라 칸의 끝이어야 읽힌다. 칸이 flex column 이므로 남는 공간을
   margin-top:auto 로 밀어 올린다. 내용이 칸을 다 채우면 auto 는 0이 되어
   그냥 이어 붙고, 칸 사이 간격은 칸의 gap 이 그대로 만든다.
   (칸이 짧아도 화면 아래까지 내려오는 건 .thaum-grid--fill 이 하는 일이다.)
   ───────────────────────────────────────────────────────── */
.magazine-single__related {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}
@media (max-width: 780px) {
  .magazine-single__related {
    margin-top: 20px;
  }
}

/* 섹션 라벨("관련 글 ↓"). 본문과 같은 크기에 굵기만 올린다 —
   배경 칠한 칩을 쓰지 않는 건 아래 박스들과 층이 겹쳐 보이지 않게 하려는 것이다. */
.magazine-single__label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 10px;
  background-color: #d1d1d1;
  color: #000;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  /* 좁은 화면에서는 본문과 같은 급으로 내린다. 1.3125rem 은 칸이 가로로 나뉜
     PC 기준값이라, 화면 폭을 다 쓰는 띠에 그대로 두면 글자가 두 줄로 접힌다.
     상세 페이지들이 이 띠를 하나씩 갖고 있어서(Now 신청 링크, Magazine 관련 글,
     TQS 티켓·FAQ) 값이 갈리면 페이지마다 띠 크기가 달라진다 — 여기서 한 번에 낸다. */
}
@media (max-width: 1024px) {
  .magazine-single__label {
    font-size: 1rem;
  }
}
.magazine-single__label {
  font-size: 1.3125rem !important;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  /* 띠의 공통값(_asset.scss)이 이미 1rem 으로 내려주지만, 위 !important 가
     그걸 이겨버려서 여기서 같은 무게로 되받는다.
     분기는 1024px — 다른 상세들이 모바일 타이포로 넘어가는 자리와 같다.
     780px 로 두면 그 사이 폭에서 이 페이지만 PC 크기로 남는다. */
}
@media (max-width: 1024px) {
  .magazine-single__label {
    font-size: 1rem !important;
  }
}

.magazine-single__related-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
}

.magazine-single__related-item {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #B1B1B1;
}

.magazine-single__related-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 10px;
  background-color: #d1d1d1;
  color: #000;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  /* 좁은 화면에서는 본문과 같은 급으로 내린다. 1.3125rem 은 칸이 가로로 나뉜
     PC 기준값이라, 화면 폭을 다 쓰는 띠에 그대로 두면 글자가 두 줄로 접힌다.
     상세 페이지들이 이 띠를 하나씩 갖고 있어서(Now 신청 링크, Magazine 관련 글,
     TQS 티켓·FAQ) 값이 갈리면 페이지마다 띠 크기가 달라진다 — 여기서 한 번에 낸다. */
}
@media (max-width: 1024px) {
  .magazine-single__related-link {
    font-size: 1rem;
  }
}
.magazine-single__related-link {
  justify-content: space-between;
  gap: var(--ep-margin);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.magazine-single__related-link, .magazine-single__related-link:hover, .magazine-single__related-link:focus-visible {
  color: #000;
}
.magazine-single__related-link:hover, .magazine-single__related-link:focus-visible {
  background-color: #c2c2c2;
}
@media (max-width: 780px) {
  .magazine-single__related-link:hover, .magazine-single__related-link:focus-visible {
    background-color: #d1d1d1;
  }
}
.magazine-single__related-link {
  /* 글자 크기는 여기서 안 정한다 — 띠의 공통값이 1024px 에서 1rem 으로
     내려준다(_asset.scss). 아래는 폭이 더 좁아졌을 때의 배치다:
     [제목][타입] 한 줄로는 자리가 안 나와 위아래로 쌓는다. */
}
@media (max-width: 780px) {
  .magazine-single__related-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
}

/* 제목은 길면 줄바꿈되고, 타입은 줄지 않고 오른쪽 끝을 지킨다. */
.magazine-single__related-title {
  min-width: 0;
}

.magazine-single__related-type {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #717171;
}
@media (max-width: 1024px) {
  .magazine-single__related-type {
    font-size: 0.8125rem;
  }
}

/* ── News 상세 ─────────────────────────────────────────────
   레이아웃은 공통 컴포넌트가 다 한다 — 바는 .thaum-bar(--duo), 본문은
   .thaum-grid--duo, 갤러리는 Now 상세의 .now-single__* 를 그대로 쓴다.
   그래서 이 파일에는 News 에서만 갈리는 것만 둔다.

   칸에 무엇이 들어가는지는 print_news_single() 이 정한다 — [본문, 갤러리]
   순서로 있는 것만 담으므로, 둘 다 있으면 왼쪽이 본문·오른쪽이 갤러리다.
   하나뿐이면 그것이 왼쪽 칸을 차지한다(오른쪽 칸은 아예 안 그린다).
   ───────────────────────────────────────────────────────── */
/* 좁은 화면에서 칸은 세로로 쌓인다 — 마크업 순서대로 [본문][갤러리]가 되어
   이미지가 글 끝까지 내려간다. 글이 길수록 이미지는 사실상 없는 것과 같아지므로,
   그리는 순서만 뒤집어 상단 바 바로 밑으로 올린다.

   order 는 그리는 순서만 바꾼다. DOM 은 그대로라 읽기·탭 순서는 [본문][갤러리]
   그대로 남는다.

   오른쪽 칸이 곧 갤러리인 건 위 슬롯 규칙에서 나온다 — 갤러리가 오른쪽에
   오는 경우는 본문이 함께 있을 때뿐이고, 갤러리만 있으면 왼쪽 칸 하나라
   뒤집을 것도 없다. */
@media (max-width: 1024px) {
  .news-single__body > .thaum-grid__right {
    order: 1;
  }
  .news-single__body > .thaum-grid__left {
    order: 2;
  }
}
:root[data-size=desktop] {
  --ep-margin: 20px;
  --ep-pageTop: 12px;
  --ep-headerH: 64px;
}

:root[data-size=tablet],
:root[data-size=phone_large],
:root[data-size=phone] {
  --ep-margin: 15px;
  --ep-pageTop: 10px;
  --ep-headerH: 50px;
}

/* 위 두 블록은 :root 에 data-size 를 붙여주는 코드가 사이트 어디에도 없어서
   한 번도 맞지 않는다 — 그래서 폴백 없이 쓴 var(--ep-margin) 은 전부 무효가
   되어 여백이 0 으로 계산돼 왔다.

   모바일 여백만 폭으로 직접 선언해 실제로 걸리게 한다. 기준점은 모바일
   헤더가 갈리는 지점(_mobile-header.scss)과 같은 1024px 다.
   PC 쪽은 건드리지 않는다 — 지금의 0 이 그대로 남는다. */
@media (max-width: 1024px) {
  :root {
    --ep-margin: 10px;
  }
}
* {
  word-break: keep-all;
  box-sizing: border-box;
  position: relative;
}

html {
  font-size: 18px !important;
}

body,
input,
select,
optgroup,
textarea {
  font-size: 1rem !important;
  line-height: 1.4em !important;
  font-family: "SL Gothic", "Br Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
}

body {
  background-color: var(--icaseoul-bg-1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
}

h1 {
  font-size: 3.125rem;
  line-height: 1.1;
  font-weight: 400;
}

h2 {
  font-size: 1.8125rem;
  line-height: 1.1;
  font-weight: 400;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
}

h4 {
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 700;
}

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.caption {
  font-size: 0.875rem;
}

a {
  text-decoration: none;
  color: #000;
}

/* ----- Initialize End ----- */
/* Global Styles */
.grid-container {
  max-width: 100%;
  padding: 0 var(--ep-margin);
}

.inside-article {
  padding: 0 !important;
}

@media (max-width: 780px) {
  .site-main {
    margin: 0 !important;
  }
}

/* ----- Global Styles End ----- */
/* Custom Styles */
/* ══════════════════════════════════════════════════════════════════
   Network Nodes / Intro 시퀀스 스타일 (SCSS 소스)
   style.scss 에서 @import "network-nodes" 로 포함되어 style.css 로 컴파일됨.
   style.css 는 전 사이트에 로드되므로, 전역으로 새는 선택자는 반드시
   .thaum-network-page / .thaum-intro-seq / 전용 id 로 스코프할 것.
   (원본 자산: assets/css/network-nodes.css — 컴파일 후 이 파일이 대체)
   ══════════════════════════════════════════════════════════════════ */
:root {
  --page-bg: #fff;
}

/* 원본의 `html` 전역 선택자는 전 사이트로 새므로 body 로만 스코프.
   (캔버스 레이어가 position:fixed 라 html 높이는 불필요) */
body.thaum-network-page {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--page-bg);
  overflow: hidden;
}

body.thaum-network-page * {
  box-sizing: border-box;
}

#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--page-bg);
}

/* 진입/이탈 페이드 오버레이 (인트로↔메인 크로스페이드) */
#thaum-fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--page-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, background-color 0.6s ease;
}

#thaum-fade.show {
  opacity: 1;
}

/* 인트로 → 메인 이탈: 흰색에서 메인 배경색(회색)으로 morph 하며 덮는다. */
#thaum-fade.to-main {
  opacity: 1;
}

.thaum-intro-seq #thaum-fade.to-main {
  background: var(--page-bg);
}

#bg-dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

#c {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  background: transparent;
  /* 손가락으로 구를 돌리는 면이다. 이 값을 안 주면 브라우저가 끄는 동작을
     스크롤·확대로 먼저 채가서, JS 가 touchmove 를 받기도 전에 제스처가
     끝난다(assets/js/network-nodes.js 의 touch* 참고). */
  touch-action: none;
}

#edge-vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 68% at 50% 50%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4) 72%, rgba(255, 255, 255, 0.92) 100%);
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.35) 68%, #000 100%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.35) 68%, #000 100%);
}

/* ── 사이트 메뉴 (상단 고정. 최소 기능 스타일 — 상세는 추후) ───────── */
#thaum-nav {
  position: fixed;
  top: 18px;
  left: 20px;
  z-index: 22;
  pointer-events: auto;
}

.admin-bar #thaum-nav {
  top: 50px;
}

#thaum-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}

#thaum-nav a {
  color: #333;
  text-decoration: none;
  font: 14px "Helvetica Neue", sans-serif;
}

#thaum-nav a:hover {
  color: #000;
}

/* ── hover 질문 레이어 (원본 커서 툴팁 → 화면 중앙 하단) ─────────────
   필터 바 바로 위에 놓는다. --thaum-scopes-h 는 JS 가 실측해 주입 (접힘/폭
   변화에 따라 갱신) → 필터 컴포넌트와 절대 겹치지 않는다. */
#thaum-question {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--thaum-scopes-h, 160px) + 28px);
  transform: translateX(-50%) translateY(8px);
  width: min(760px, 88vw);
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 3dvw;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  z-index: 12;
}
@media (max-width: 780px) {
  #thaum-question {
    font-size: 5dvw;
    font-weight: 700;
    line-height: 1.3;
  }
}

#thaum-question.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 카테고리(분야) 필터 바 (랜덤 '집합 분리' 버튼 대체) ────────────── */
#thaum-scopes {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ep-margin);
  max-width: 400px;
  border-radius: 15px;
  backdrop-filter: blur(15px);
  background-color: rgba(249, 249, 249, 0.5);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, gap var(--thaum-collapse-dur) var(--thaum-collapse-ease);
}

#thaum-scopes.on {
  opacity: 1;
  pointer-events: auto;
}

/* 바 뒤에 깔리는 mesh 는 공용 컴포넌트다(_mesh.scss). 작은 상자용 값은
   .thaum-mesh--compact 프리셋이 쥐고 있어서 여기서 적을 것이 없다 —
   화면 아래에 붙는 바 판도 같은 프리셋을 쓴다. */
#thaum-scopes button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #acacac;
  color: #000;
  border-radius: 18px;
  padding: 3px 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#thaum-scopes button:hover {
  background: color-mix(in srgb, var(--dot, #888) 50%, transparent);
  border-color: var(--dot, #888);
}

#thaum-scopes button.active {
  background: color-mix(in srgb, var(--dot, #888) 50%, transparent);
  color: #000;
  border-color: var(--dot, #888);
}

#thaum-scopes .thaum-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, #888);
  flex: 0 0 auto;
}

/* 헤더(제목 + 접기/펼치기 토글) */
#thaum-scopes .thaum-scopes-head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
#thaum-scopes .thaum-scopes-head p {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 700;
  color: #000;
}

/* 필터 버튼 목록: 접히면 높이 0으로 부드럽게 사라진다 */
#thaum-scopes .thaum-scopes-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 6px;
  overflow: hidden;
  max-height: 40vh;
  opacity: 1;
  transition: max-height var(--thaum-collapse-dur) var(--thaum-collapse-ease), opacity var(--thaum-collapse-dur) var(--thaum-collapse-ease);
}

#thaum-scopes.collapsed .thaum-scopes-list {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height var(--thaum-collapse-dur) var(--thaum-collapse-ease), opacity var(--thaum-collapse-dur) var(--thaum-collapse-ease);
}

/* 접기/펼치기 토글은 공용 컴포넌트다(_toggle.scss) — 화면 아래에 붙는 바 판이
   같은 버튼을 쓴다. 여기서 다시 적는 건 바로 위 `#thaum-scopes button` 이 id 라
   공용 값(클래스 하나)을 이기기 때문이다. 그 자리에서 원래 모양으로 되돌린다. */
#thaum-scopes button.thaum-toggle {
  width: var(--toggle-size);
  height: var(--toggle-size);
  padding: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: transparent;
}
#thaum-scopes button.thaum-toggle:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.45);
}

#thaum-scopes.collapsed {
  gap: 0;
  cursor: pointer;
}

/* 모바일 — 필터 바는 글자 급을 하나로 낮추고, 태그를 선에서 면으로 바꾼다.
   기준점 1024px 는 모바일 헤더(_mobile-header.scss)·노드 스크립트와 같다. */
@media (max-width: 1024px) {
  #thaum-scopes {
    /* 화면 폭을 그대로 쓴다. 가운데 400px 로 서 있으면 태그가 좁은 통 안에서
       줄바꿈되고, 폭 390px 폰에서는 그 400px 마저 화면을 넘겨 잘린다.
       좌우로는 사이트 기본 여백만 남긴다. */
    width: calc(100vw - 20px);
    bottom: 10px;
    max-width: none;
    padding: 7px 10px 10px;
    border-radius: 5px;
    gap: 12px;
  }
  #thaum-scopes .thaum-scopes-head p,
  #thaum-scopes button {
    font-size: 1rem;
    font-weight: 500;
  }
  /* 태그 목록도 머리말과 같은 왼쪽 선에서 시작하게 한다.
     바가 align-items: center 라, 폭을 안 주면 태그가 적을 때 목록 덩어리째
     한복판에 떠서 "Tags" 와 어긋난다. 아래 진입 버튼도 이 선에 맞춘다. */
  #thaum-scopes .thaum-scopes-list {
    width: 100%;
  }
  /* 인트로 진입 버튼. 좌하단 고정 자리가 화면 폭을 다 쓰는 이 바와 겹쳐서,
     assets/js/network-nodes.js 가 노드째 바 안으로 옮기고 글자도 갈아끼운다.
     자리는 태그 목록 바로 아래 — 고르는 것들 다음에 오는 행동이라 그 끝에 둔다.
     (접으면 목록과 함께 사라진다. 바로 아래 규칙.) */
  #thaum-scopes #thaum-symbol.thaum-scopes-add {
    position: static;
    flex: 0 0 auto;
    align-self: flex-start;
    border: none;
    border-radius: 4px;
    background: #d9d9d9;
    color: #000;
    padding: 1px 6px;
    /* 글자만 한 급 낮추고 세로 여백으로 메운다 — 태그(1rem/3px)와 덩어리
       높이가 같아야 크기감이 맞는다. */
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    transition: max-height var(--thaum-collapse-dur) var(--thaum-collapse-ease), opacity var(--thaum-collapse-dur) var(--thaum-collapse-ease);
  }
  /* 접힌 바에는 제목과 토글만 남는다. 목록과 같은 방식으로 접는다 —
     전역 box-sizing: border-box 라 max-height: 0 이면 안쪽 여백까지 눌려
     높이가 정확히 0 이 되고, 바의 gap 도 .collapsed 에서 0 이라 자국이 없다. */
  #thaum-scopes.collapsed #thaum-symbol.thaum-scopes-add {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height var(--thaum-collapse-dur) var(--thaum-collapse-ease), opacity var(--thaum-collapse-dur) var(--thaum-collapse-ease);
  }
  /* 태그 — 테두리 없이 면으로. 고른 것은 분야 색이 채워 알린다. */
  #thaum-scopes .thaum-scopes-list button {
    border: none;
    border-radius: 4px;
    background: #ffffff;
    padding: 1px 6px 0px;
    font-size: 0.8125rem;
  }
  /* 고른 것만 색이 채운다 — 호버는 뺀다. 손가락에는 호버가 없고, 탭한
     자리에 :hover 가 걸린 채 남아 고르지도 않은 태그가 골라진 것처럼 보인다.
     (위 #d0d0d0 규칙과 무게가 같아 순서로 이긴다. 그래서 PC 의 호버 규칙도
     여기서는 자연히 눌린다 — 지울 필요가 없다.)
     채움 값은 PC 의 고른 상태와 같다. */
  #thaum-scopes .thaum-scopes-list button.active {
    background: color-mix(in srgb, var(--dot, #d9d9d9) 50%, transparent);
  }
  /* 토글 — 글자가 작아진 만큼 원도 줄인다. 원과 선이 변수 둘로 같이 따라온다.
     호버 색은 여기서 눌러 둔다 — 손가락에는 호버가 없고, 탭한 자리에 흰 배경이
     남는다. */
  #thaum-scopes button.thaum-toggle,
  #thaum-scopes button.thaum-toggle:hover {
    --toggle-size: 22px;
    --toggle-line: 11px;
    background: transparent;
    border-color: #000;
  }
}
/* ══ 인트로 3단계 시퀀스 (백색 배경 / 흑색 텍스트) ══════════════════ */
body.thaum-intro-seq {
  margin: 0;
  min-height: 100vh;
  background: #fff;
  color: #000;
  overflow-x: hidden;
}

.thaum-intro-seq #thaum-fade {
  background: #fff;
}

#thaum-seq-skip {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 30;
  background: none;
  border: none;
  color: #000;
  opacity: 0.5;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
@media (max-width: 780px) {
  #thaum-seq-skip {
    top: 10px;
    right: 10px;
    padding: 0;
    font-size: 0.8125rem;
  }
}

.admin-bar #thaum-seq-skip {
  top: 54px;
}

#thaum-seq-skip:hover {
  opacity: 1;
}

/* 시퀀스 무대 — 프롬프트와 입력부를 한 흐름에 세로로 쌓는다.
   예전엔 둘 다 fixed 중앙 배치라 서로의 높이를 몰라서, 뷰포트가 낮으면 겹쳤다.
   지금은 같은 flex 흐름이라 겹칠 수 없고, 그래도 넘치면 무대가 스크롤된다. */
#seq {
  position: fixed;
  inset: 0;
  height: 100dvh; /* 모바일 주소창 접힘까지 따라간다 */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center; /* 넘칠 때 위쪽이 잘려 못 보는 일 방지 */
  gap: 0;
  padding: clamp(14px, 5vh, 64px) 5vw;
  padding-bottom: calc(clamp(14px, 5vh, 64px) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: gap 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-step="2"] #seq {
  gap: clamp(12px, 3vh, 40px);
}

/* 오프닝 배경. 사이트 공통 mesh 컴포넌트를 화면 전체에 깐다(_mesh.scss).

   첫 화면에만 있는 물건이다 — 질문을 적는 2단계로 넘어가면 걷히고, 그때부터는
   흰 바탕에 분야 태그만 남는다. 예전에는 이 자리에 유성우 캔버스가 돌았다.

   .thaum-mesh 는 position: absolute 라 부모를 기준으로 삼는데, 여기서는 기준이
   될 부모가 없다(body 직계). 화면에 고정해 무대(#seq, z-index 2) 뒤에 깐다. */
#seq-mesh {
  position: fixed;
  z-index: 1;
  /* 나타나고 사라지는 건 opacity 하나로 한다 — 덩이의 자체 애니메이션은
     그대로 흐르므로, 걷힐 때도 멈춘 그림이 아니라 흐르던 채로 옅어진다.
     들어올 때를 더 길게 잡는다: 처음 화면은 천천히 번지듯 나타나야 하고,
     나갈 때는 다음 단계가 기다리므로 질질 끌면 안 된다. */
  opacity: 0;
  transition: opacity 1.6s ease;
}

/* 프롬프트와 같은 신호로 함께 뜬다(assets/js/intro-sequence.js 가 붙인다). */
.seq-ready #seq-mesh {
  opacity: 1;
}

/* 2단계 = 질문을 적는 화면. 배경을 걷어 흰 바탕으로 되돌린다. */
body[data-step="2"] #seq-mesh {
  opacity: 0;
  transition: opacity 0.9s ease;
}

/* 덩이 개수는 화면이 정한다. 넓은 화면에서는 여섯으로는 사이가 허옇게 비어
   듬성듬성해 보이므로 감춰둔 일곱째부터를 켠다(넓은 화면의 댓글 판과 같은 방식).
   좁은 화면에서는 도로 여섯으로 — 작은 상자에 열둘을 깔면 색이 뭉개져 균일한
   색판이 된다.

   크기는 손대지 않는다. --mesh-unit 이 vmax 라 덩이가 화면을 따라 이미 커진다. */
#seq-mesh span:nth-child(n + 7) {
  display: block;
}

@media (max-width: 1024px) {
  #seq-mesh span:nth-child(n + 7) {
    display: none;
  }
}

/* 프롬프트: 1단계엔 무대 중앙 → 2단계엔 입력부가 펼쳐지며 위로 밀려 올라간다.
   (좌표를 옮기지 않는다. 아래 #seq-body 가 자라면서 자연스레 밀어낸다) */
#seq-prompt {
  flex: 0 0 auto;
  margin: 0;
  width: min(1000px, 100%);
  text-align: center;
  font-weight: 500;
  font-size: clamp(22px, min(4vw, 4.4vh), 48px);
  line-height: 1.3;
  color: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.seq-ready #seq-prompt {
  opacity: 1;
}

#seq-prompt-text {
  display: inline-block;
  transition: opacity 0.32s ease;
}

#seq-prompt-text.swap {
  opacity: 0;
}

/* 입력부: 1단계엔 높이 0(0fr)으로 접혀 있다가 2단계에 펼쳐진다.
   높이가 자라는 만큼 위의 프롬프트가 밀려 올라가므로, 예전의 "위로 이동" 연출은
   그대로면서 둘이 겹칠 수는 없다. */
#seq-body {
  flex: 0 0 auto;
  width: min(1000px, 100%);
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.8s cubic-bezier(0.4, 0, 0.2, 1), overflow 0s 0.8s allow-discrete;
}

body[data-step="2"] #seq-body {
  grid-template-rows: 1fr;
  overflow: visible;
}

#seq-body-inner {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seq-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.5vh, 44px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

body[data-step="2"] #seq-step2 {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* 질문 입력 (배경 없음, border-bottom만) */
#seq-question {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: #000;
  border-bottom: 2px solid #000;
  /* 뷰포트 높이도 함께 본다 — 낮은 화면에서 입력칸이 화면을 다 먹지 않도록 */
  font-size: clamp(26px, min(6vw, 7vh), 64px) !important;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  padding: 6px 4px 14px;
  overflow: hidden;
  margin-top: clamp(2px, 1.5vh, 16px);
}
@media (max-width: 780px) {
  #seq-question {
    font-size: clamp(20px, min(5vw, 5.5vh), 64px) !important;
  }
}

#seq-question::-moz-placeholder {
  color: rgba(0, 0, 0, 0.22);
}

#seq-question::placeholder {
  color: rgba(0, 0, 0, 0.22);
}

/* 분야 후보 (질문 입력 위)

   높이를 제한하지 않는다. 예전에는 max-height(40vh / 340px) + 안쪽 스크롤이었는데,
   분야가 늘면서(지금 열여섯) 그 선에서 잘려 나머지가 안 보였다 — 스크롤이 되긴
   해도 "여기가 끝"으로 읽혀서 아래쪽 분야는 없는 것과 같았다.

   넘치는 몫은 무대(#seq)가 받는다. 거기에 이미 overflow-y: auto 와
   justify-content: safe center 가 있어서, 내용이 화면보다 길면 위가 잘리지 않고
   페이지째 스크롤된다 — 잘린 목록보다 이쪽이 낫다.

   안쪽 여백 6px 은 남긴다. 고른 분야의 테두리 링(box-shadow 4px)과 호버 확대가
   설 자리다. */
#seq-scopes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 16px);
  max-width: 100%;
  padding: 6px;
}
@media (max-width: 780px) {
  #seq-scopes {
    gap: 10px;
  }
}

.seq-scope {
  --seq-scope-bg: color-mix(in srgb, var(--c, #eee) 75%, transparent);
  font-size: clamp(20px, min(5vw, 5.5vh), 64px);
  font-weight: 500;
  line-height: 1;
  color: #000;
  border: none;
  cursor: pointer;
  background: var(--seq-scope-bg);
  border-radius: 0.47em;
  padding: 0.16em 0.47em;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, scale 0.2s ease;
}
.seq-scope:hover {
  background: var(--c, #eee);
  color: #000;
  scale: 1.05;
}
.seq-scope {
  /* 손가락으로 누르는 화면에서는 :hover 가 탭한 뒤에도 남는다. 그러면 방금
     누른 분야가 고른 것처럼(.selected 와 같은 scale 1.05) 계속 커져 있어서,
     실제로 무엇을 골랐는지가 안 보인다. 되돌린다.
     .selected 는 아래에 있고 무게가 같아 그대로 이긴다 — 고른 표시는 남는다. */
}
@media (max-width: 1024px) {
  .seq-scope:hover {
    background: var(--seq-scope-bg);
    scale: 1;
  }
}

.seq-scope.in {
  opacity: 1;
  transform: scale(1);
}

.seq-scope.selected {
  background: var(--seq-scope-bg);
  color: #000;
  scale: 1.05;
  box-shadow: 0 0 0 4px var(--c, #eee);
  /* 모바일에서는 크기·테두리로 알리지 않는다. 태그가 화면 폭에 꽉 차게 흐르는
     자리라, 1.05 배로 커지면 옆 태그와 부딪히고 4px 링은 줄 간격까지 밀어낸다.

     구분은 색 하나로 한다 — 고르지 않은 태그가 75% 흐린 색이니(--seq-scope-bg)
     고른 것만 원래 색을 그대로 쓴다. PC 의 hover 와 같은 값이라 새 색이
     생기지는 않는다. (그 hover 는 위에서 모바일만 꺼뒀으므로 겹치지 않는다.) */
}
@media (max-width: 1024px) {
  .seq-scope.selected {
    background: var(--c, #eee);
    scale: 1;
    box-shadow: none;
  }
}

/* 확인 버튼 (확인 + 체크 아이콘) */
.seq-actions {
  display: flex;
  justify-content: center;
}

.seq-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #000;
  border: none;
  border-radius: 0;
  font-size: clamp(20px, min(4vw, 4.5vh), 48px);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.seq-confirm:hover {
  opacity: 0.85;
  background: transparent;
  color: #000;
  border: none;
  border-radius: 0;
}

.seq-confirm:disabled {
  opacity: 0.5;
  cursor: default;
}

.seq-confirm svg {
  width: 0.88em;
  height: 0.88em;
}

#seq-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

#seq-msg {
  margin-top: clamp(8px, 2vh, 20px);
  min-height: 18px;
  text-align: center;
  font: 14px "Helvetica Neue", sans-serif;
  color: #c0392b;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#seq-msg.show {
  opacity: 1;
}

/* 화면이 아주 낮으면(가로 모드 폰 등) 스크롤 대신 먼저 여백부터 줄인다.
   글자 크기는 위 clamp 들이 vh 를 함께 보고 있어서 따로 줄이지 않는다. */
@media (max-height: 520px) {
  #seq {
    padding-top: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}
/* ── 레인보드 게시판 스킨 ──────────────────────────────────
   플러그인이 실어오는 CSS 두 장을 덮어쓴다.
     · plugins/rainboard/css/style.css        — 플러그인 기본 스타일
     · uploads/rainboard_style/default_style.css — 스타일 마법사 산출물.
       이 파일은 우리 style.css 보다 뒤에 실린다.

   그래서 마법사가 잡는 속성(글자 크기·색·테두리색·패딩)에는 !important 를 쓴다.
   나머지는 선택자 무게로 이긴다 — .rainboard-wrapper.rainboard-custom 을 앞에 달면
   플러그인 선택자(div.rainboard-wrapper table#rainboard-table …)보다 클래스가 하나 많다.
   SearchWP 스킨(_searchwp.scss)과 같은 방식이다.

   생김새는 아카이브 카드·페이저(_archive-list.scss)의 어법을 그대로 따른다 —
   흰 바탕, 1px 검정 선, 라운드 없음, 강조는 검정 채움 + 흰 글씨.

   글쓰기 폼은 마크업을 못 고치므로(플러그인 템플릿) 레이아웃만 갈아끼운다.
   플러그인 원본은 [라벨 100px 절대배치 + 30px 고정 높이 행 + display:table-cell] 인데,
   이 테마는 input 에 1rem(=18px)을 !important 로 물린다(_main.scss). 18px 글자에
   GeneratePress 의 padding 10px/15px 가 붙으면 입력칸이 47px 가 되어 30px 행을 넘치고,
   table-cell 은 width:100% 를 자기 내용 폭으로만 계산해 칸이 쪼그라든다.
   그래서 행을 2열 그리드로 다시 세운다.
   ───────────────────────────────────────────────────────── */
.rainboard-wrapper.rainboard-custom {
  --rb-line: #000;
  --rb-line-soft: #c8c8c8;
  --rb-muted: #6f6f6f;
  padding: 0 0 calc(var(--ep-margin) * 2);
  font-size: 1rem !important;
  color: var(--color-black) !important;
  font-family: inherit !important;
}

/* ── 글쓰기 화면 제목 ────────────────────────────────────
   이 화면에는 제목이 없다(게시판은 페이지 안의 숏코드이고 테마는 .page-header 를
   감춘다). inc/rainboard-write-ui.php 가 내는 h1 이다.

   큰 900 짜리 표시용 글씨는 사이트의 다른 자리(.now-card__cat 등)와 같은 어법이다 —
   줄간을 0.9 로 좁혀야 두 줄이 한 덩어리로 읽힌다.

   4dvw 만 쓰면 좁은 화면에서 본문(18px)보다 작아진다(480px 에서 19px).
   max() 로 바닥을 깔아 900px 이상에서는 그대로 4dvw 다. */
.thaum-rb-write-title {
  margin: 0 0 60px;
  font-size: max(4dvw, 2rem);
  font-weight: 900;
  line-height: 0.9;
  color: #B4B4B4;
}

/* ── 분류 탭 ─────────────────────────────────────────────
   아카이브 페이저(.facetwp-page)와 같은 상자다. */
.rainboard-wrapper.rainboard-custom .rainboard-section-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: var(--ep-margin);
}

.rainboard-wrapper.rainboard-custom .rainboard-section-wrapper a.section_tab {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 4px 10px 3px !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--color-white) !important;
  color: var(--color-black) !important;
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rainboard-wrapper.rainboard-custom .rainboard-section-wrapper a.section_tab:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

.rainboard-wrapper.rainboard-custom .rainboard-section-wrapper a.section_tab.active {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
}

/* ── 목록 ────────────────────────────────────────────────
   제목 칸이 남는 폭을 다 먹도록 table-layout 을 고정하고
   나머지 칸에만 폭을 준다. */
.rainboard-wrapper.rainboard-custom #rainboard-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.rainboard-wrapper.rainboard-custom #rainboard-table thead th {
  padding: 8px 10px !important;
  border: 0 !important;
  border-top: 2px solid var(--rb-line) !important;
  border-bottom: 1px solid var(--rb-line) !important;
  background: transparent !important;
}

.rainboard-wrapper.rainboard-custom #rainboard-table thead th span {
  border: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--color-black) !important;
}

.rainboard-wrapper.rainboard-custom #rainboard-table tbody tr {
  background: transparent !important;
}

.rainboard-wrapper.rainboard-custom #rainboard-table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.rainboard-wrapper.rainboard-custom #rainboard-table tbody td {
  padding: 12px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rb-line-soft) !important;
  background: transparent;
  font-size: 0.875rem !important;
  color: var(--rb-muted) !important;
  vertical-align: middle;
}

.rainboard-wrapper.rainboard-custom #rainboard-table tbody tr:last-child td {
  border-bottom: 1px solid var(--rb-line) !important;
}

/* 제목은 목록에서 가장 큰 글씨다. 마법사가 13px/#333 을 물려서 !important 로 되찾는다. */
.rainboard-wrapper.rainboard-custom #rainboard-table td.rainboard-list-title {
  padding-left: 10px !important;
  text-align: left;
}

.rainboard-wrapper.rainboard-custom #rainboard-table td.rainboard-list-title > a {
  display: inline-block;
  max-width: 100%;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--color-black) !important;
  word-break: keep-all;
}

.rainboard-wrapper.rainboard-custom #rainboard-table td.rainboard-list-title > a:hover {
  color: var(--color-black) !important;
  opacity: 1 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rainboard-wrapper.rainboard-custom #rainboard-table td.rainboard-list-title span.entry_comment_count {
  color: var(--rb-muted) !important;
  font-weight: 600;
}

/* 칸 폭. 번호·작성자·날짜·조회는 고정, 남는 폭은 제목이 먹는다. */
.rainboard-wrapper.rainboard-custom #rainboard-table .entry-th-number,
.rainboard-wrapper.rainboard-custom #rainboard-table .rainboard-list-number {
  width: 3.5rem;
  text-align: center;
}

.rainboard-wrapper.rainboard-custom #rainboard-table .entry-th-writer,
.rainboard-wrapper.rainboard-custom #rainboard-table .rainboard-list-writer {
  width: 8rem;
  text-align: center;
}

.rainboard-wrapper.rainboard-custom #rainboard-table .entry-th-date,
.rainboard-wrapper.rainboard-custom #rainboard-table .rainboard-list-date {
  width: 6rem;
  text-align: center;
}

.rainboard-wrapper.rainboard-custom #rainboard-table .entry-th-hit,
.rainboard-wrapper.rainboard-custom #rainboard-table .rainboard-list-hit {
  width: 4rem;
  text-align: center;
}

/* 공지글 — 회색 판 대신 검정 배지 하나로 구분한다. */
.rainboard-wrapper.rainboard-custom #rainboard-table tbody tr td.noti-td {
  background: rgba(0, 0, 0, 0.04) !important;
}

.rainboard-wrapper.rainboard-custom .noti-td .noti-icon {
  padding: 2px 6px 1px !important;
  border-radius: 0 !important;
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* 작성자·번호·날짜는 제목을 받쳐주는 정보다. 링크라도 본문처럼 검게 두지 않는다.
   (전역 a { color: #000 } 이 걸리므로 여기서 다시 낮춘다.) */
.rainboard-wrapper.rainboard-custom #rainboard-table td.rainboard-list-writer a,
.rainboard-wrapper.rainboard-custom #rainboard-table td.rainboard-list-writer span {
  font-size: 0.875rem !important;
  color: var(--rb-muted) !important;
}

/* 작성자 이름 옆에 뜨는 말풍선. 테두리만 사이트 어법으로. */
.rainboard-wrapper.rainboard-custom .writer_layer .innerList {
  border: 1px solid var(--rb-line);
  border-radius: 0;
  box-shadow: none;
}

/* ── 페이징 ──────────────────────────────────────────────
   아카이브 페이저와 같은 2rem 정사각형 박스.
   화살표(.pre/.next…)는 배경 스프라이트를 쓰므로 background 를 건드리지 않는다. */
.rainboard-wrapper.rainboard-custom .paging-area {
  padding-top: var(--ep-margin);
}

.rainboard-wrapper.rainboard-custom .pagingNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.rainboard-wrapper.rainboard-custom .pagingNav a,
.rainboard-wrapper.rainboard-custom .pagingNav strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rb-line) !important;
  border-radius: 0;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--color-black) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rainboard-wrapper.rainboard-custom .pagingNav a:not(.pre):not(.pre_end):not(.next):not(.next_end) {
  background: var(--color-white) !important;
}

.rainboard-wrapper.rainboard-custom .pagingNav a:not(.pre):not(.pre_end):not(.next):not(.next_end):hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

.rainboard-wrapper.rainboard-custom .pagingNav strong {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
}

/* ── 버튼 ────────────────────────────────────────────────
   글쓰기·확인은 검정 채움(주 동작), 그 외는 흰 바탕 + 검정 선. */
.rainboard-wrapper.rainboard-custom .rainboard-controller {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  padding-top: var(--ep-margin);
}

.rainboard-wrapper.rainboard-custom .rainboard-controller.search-center {
  flex-wrap: wrap;
  justify-content: center;
}

.rainboard-wrapper.rainboard-custom .rainboard-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 2.2rem;
  margin: 0;
  padding: 6px 14px !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--color-white) !important;
  color: var(--color-black) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  float: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rainboard-wrapper.rainboard-custom .rainboard-button:hover {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
}

.rainboard-wrapper.rainboard-custom .rainboard-button.button-save,
.rainboard-wrapper.rainboard-custom .rainboard-button.write-button {
  background: var(--color-black) !important;
  color: var(--color-white) !important;
}

.rainboard-button.button-save {
  margin-left: 20px !important;
}

.rainboard-wrapper.rainboard-custom .rainboard-button.button-save:hover,
.rainboard-wrapper.rainboard-custom .rainboard-button.write-button:hover {
  background: #333 !important;
}

/* ── 검색 ────────────────────────────────────────────────
   .rainboard-search 는 플러그인에서 15×15 아이콘 클래스와 이름이 겹친다.
   여기서는 폼 래퍼이므로 크기를 풀어준다. */
.rainboard-wrapper.rainboard-custom .rainboard-search {
  width: auto !important;
  height: auto !important;
  background: none !important;
}

.rainboard-wrapper.rainboard-custom .rainboard-search form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.rainboard-wrapper.rainboard-custom .rainboard-search select,
.rainboard-wrapper.rainboard-custom .rainboard-search input[type=text] {
  height: auto;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--rb-line) !important;
  border-radius: 0 !important;
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

/* ── 읽기 ────────────────────────────────────────────────
   회색 제목 판을 걷고 위아래 선으로 구획한다. */
.rainboard-wrapper.rainboard-custom #rainboard-read-table {
  border-top: 2px solid var(--rb-line);
}

.rainboard-wrapper.rainboard-custom #rainboard-read-table div.title-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ep-margin);
  padding: 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rb-line-soft) !important;
  background: transparent !important;
}

.rainboard-wrapper.rainboard-custom #rainboard-read-table div.title-section h1.rainboard-read-h1 {
  font-size: 1.3125rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--color-black) !important;
  word-break: keep-all;
}

/* 날짜는 원본에서 float + top:-18px 로 제목 위에 얹혀 있다. 플렉스 한 줄로 되돌린다. */
.rainboard-wrapper.rainboard-custom #rainboard-read-table div.title-section div.regist-date {
  position: static !important;
  top: auto !important;
  float: none !important;
  flex: none;
  padding: 0 !important;
  line-height: 1.4 !important;
}

.rainboard-wrapper.rainboard-custom h2.rainboard-read-h2 {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--rb-muted) !important;
  line-height: 1.4 !important;
}

.rainboard-wrapper.rainboard-custom #rainboard-read-table div.writer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rb-line);
}

.rainboard-wrapper.rainboard-custom #rainboard-read-table div.writer-section div.regist-info {
  float: none !important;
}

/* 조회수도 원본은 absolute 다. 같은 줄에 세운다. */
.rainboard-wrapper.rainboard-custom #rainboard-read-table div.writer-section div.regist-info span {
  position: static !important;
  right: auto !important;
  font-size: 0.875rem !important;
  color: var(--rb-muted) !important;
}

.rainboard-wrapper.rainboard-custom #rainboard-read-table div.content-section {
  padding: var(--ep-margin) 0;
  font-size: 1rem;
  line-height: 1.6;
}

.rainboard-wrapper.rainboard-custom #rainboard-read-table div.content-section img {
  max-width: 100%;
  height: auto;
}

/* 이전·다음 글 */
.rainboard-wrapper.rainboard-custom table.prenext {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rb-line);
}

.rainboard-wrapper.rainboard-custom table.prenext th,
.rainboard-wrapper.rainboard-custom table.prenext td {
  padding: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rb-line-soft) !important;
  background: transparent !important;
  font-size: 0.875rem !important;
}

.rainboard-wrapper.rainboard-custom table.prenext td a {
  color: var(--color-black) !important;
  font-weight: 600;
}

/* ── 글쓰기 · 수정 폼 ────────────────────────────────────
   행 하나 = [라벨 | 입력]. 라벨 절대배치와 30px 고정 높이를 걷어낸다.

   이 화면은 글자와 빈 자리만으로 짜인다. 칸을 가르던 가로줄, 입력칸·버튼의 테두리를
   모두 걷어내고 그 자리를 gap 이 대신한다 — 화면 제목이 900 짜리 큰 글씨라
   (.thaum-rb-write-title) 그 아래에 선이 끼면 리듬이 끊긴다.
   글자는 자리마다 크기만 다르고 굵기·줄간은 제목과 같은 하나의 어법이다.

   선이 사라진 자리를 입력칸은 옅은 채움으로 대신한다 — 어디에 쓰는지는 보여야 한다.
   --rb-field / --rb-field-on 이 그 값이다.

   값은 폼에 둔다. 버튼 줄(.rainboard-controller)이 입력 묶음 바깥에 있어
   래퍼에 두면 거기까지 닿지 않는다. */
form#rainboard_post_form {
  --rb-field: rgba(0, 0, 0, 0.045);
  --rb-field-on: rgba(0, 0, 0, 0.08);
  --rb-dim: 0.45;
  --rb-tag-dim: 0.9;
  --rb-row-gap: calc(var(--ep-margin) * 1.6);
  --rb-text: max(2dvw, 1rem);
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--rb-row-gap);
  border-top: none !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper #post_password_row {
  display: flex;
  flex-direction: column;
  gap: var(--rb-row-gap);
}

/* 라벨 칸 : 입력칸 = 2 : 10. 모든 행이 같은 비율이라 어느 행에서든 입력칸이
   같은 자리에서 시작한다 — 선이 없는 폼에서는 이 세로 정렬이 유일한 격자다.

   minmax(0, …) 를 씌우는 이유가 있다. fr 의 기본 최소값은 min-content 라
   라벨이 길면 그 칸이 제 몫보다 넓어지면서 비율이 흐트러진다. 0 을 최소로 박으면
   비율이 먼저고 긴 라벨은 줄을 접는다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 10fr);
  align-items: start;
  gap: 10px;
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.check-box {
  height: auto !important;
  min-height: 0;
}

/* 공지사항은 이 게시판에서 쓰지 않는다. 관리자에게만 뜨는 행이라 헷갈리기만 한다.
   숨겨도 저장 값은 달라지지 않는다 — 체크 안 된 체크박스는 애초에 전송되지 않고,
   서버는 값이 없으면 공지 아님(0)으로 저장한다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.check-box:has(#input-checkbox-notice) {
  display: none;
}

/* 원본 구분선. 칸은 이제 선이 아니라 gap 으로 나뉜다 — 감춰도 간격은 래퍼가 준다
   (display:none 인 자식은 플렉스 gap 을 만들지 않는다). */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box-devider {
  display: none;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 900 !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box label span {
  display: block !important;
  height: auto !important;
  font-size: var(--rb-text) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box label span span.label-required {
  display: inline !important;
  margin: 0 0 0 2px !important;
  color: #213fda;
}

/* table-cell 이 입력칸 폭을 자기 내용만큼으로 줄인다. 블록으로 되돌린다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  align-self: center;
}

/* 플러그인은 입력칸을 행 안에 절대배치로 깔아둔다 —
   input[type='text'] { position:absolute; top:0; left:0; width:100%; height:100% }.
   30px 로 못박은 행을 꽉 채우는 방식이라 원본에서는 맞는 계산이었다.

   그런데 행을 그리드로 바꾸면 이 절대배치가 문제가 된다. 입력칸이 흐름에서 빠지므로
   .write-span 의 높이가 0 이 되고, 높이 0 인 칸이 세로 중앙에 놓이니 입력칸은
   행의 중앙에서 시작해 아래로 삐져나온다 — 라벨보다 내려앉고 다음 행을 덮는다.
   그래서 흐름 안으로 되돌린다.

   첨부 파일명 칸(input.text)은 예외다. 그쪽은 30px 상자를 절대배치로 채우는 게
   맞는 구조라 원본 그대로 둔다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=text]:not(.text),
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=password] {
  position: static !important;
  top: auto !important;
  left: auto !important;
}

/* 입력칸은 블록으로 둔다. inline-block 이면 부모가 줄상자를 만들면서
   글꼴의 내려뻗음(descender)만큼 아래에 빈 틈이 생긴다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=text],
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=password],
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box select {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0.3em 0.4em !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  background-color: var(--rb-field) !important;
  color: var(--color-black) !important;
  font-size: var(--rb-text) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  transition: background-color 0.15s ease;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=text]:focus,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=password]:focus,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box select:focus {
  background-color: var(--rb-field-on) !important;
  outline: none;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=text]:focus-visible,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=password]:focus-visible,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box select:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* 제목은 폼에서 가장 큰 칸이다. 어디에 무엇을 쓰는지 한눈에 보여야 한다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper input#entry-title {
  font-size: var(--rb-text) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

/* 분류 select 은 폼 폭을 다 먹을 필요가 없다.
   스크립트가 태그 목록을 만들어 붙이면 그때 숨는다(assets/js/rainboard-section-tags.js) —
   스크립트가 없거나 실패하면 이 드롭다운이 그대로 남는다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper select#rainboard-section-select {
  width: auto !important;
  min-width: 10rem;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box.thaum-rb-has-tags select#rainboard-section-select {
  display: none !important;
}

/* 분류는 반드시 골라야 저장된다(inc/rainboard-write-ui.php). 그런데 플러그인 라벨에는
   별표가 없다 — 템플릿을 못 고치니 다른 필수 칸과 같은 별표를 여기서 붙인다.
   태그가 실제로 붙은 폼에서만 필수다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box.thaum-rb-has-tags > label span::after {
  content: "*";
  margin-left: 2px;
  color: #213fda;
}

/* ── 분류 태그 ───────────────────────────────────────────
   색은 분야마다 정해둔 값을 스크립트가 인라인 변수로 꽂는다(--tag-color).
   짝이 되는 분야가 없는 분류는 아래 기본값(회색)으로 남는다.

   상자가 아니라 글자다 — 폼의 다른 글자와 같은 900, 색만 제 분야 색으로 간다.
   뿌리는 메인 인트로의 분야 태그와 같은 색이다(--c, templates/page-intro.php).
   다만 그 색은 판에 채우고 검정 글씨를 얹는 용도로 고른 옅은 파스텔이라 글자색으로는
   대비가 1.0~1.5:1 밖에 안 나온다. 그래서 색상은 그대로 두고 채도·밝기만 눌러
   가져온다(thaum_vivid_hex, inc/rainboard-write-ui.php) — 재어보면 4.15~7.62:1 이다.

   고르지 않은 것은 흐리게 두어 '누를 수 있는 글자'임을 알리고(--rb-tag-dim),
   고르면 또렷해지면서 밑줄이 붙는다. 밑줄까지 있어야 색을 못 가리는 눈에도
   무엇을 골랐는지 보인다 — 상자가 없으니 색만으로는 상태를 못 알린다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper .thaum-rb-tags {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--rb-text);
  line-height: 1.05;
  gap: 0.2em 0.6em;
  padding: 0;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper button.thaum-rb-tag {
  --tag-color: #6f6f6f;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--tag-color) !important;
  font-family: inherit;
  font-size: inherit !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-transform: none;
  text-decoration: none;
  opacity: var(--rb-tag-dim);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper button.thaum-rb-tag:hover {
  opacity: 1;
}

/* 고른 하나만 또렷하다. 밑줄은 색과 상관없이 읽히는 두 번째 표시다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper button.thaum-rb-tag[aria-checked=true] {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper button.thaum-rb-tag:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ── 폼 안의 버튼 ────────────────────────────────────────
   취소·확인·찾아보기 모두 상자를 벗는다. 남는 건 다른 글자와 같은 900 글자뿐이고,
   흐리게 두는 것만이 '누를 수 있다'는 표시다(--rb-dim) — 손이 닿거나 키보드가
   짚으면 또렷해진다. 게시판의 다른 화면(목록·읽기)의 버튼은 그대로 상자를 쓴다.

   폼 id 로 범위를 좁힌다. 글쓰기·수정 폼이 둘 다 rainboard_post_form 이고,
   id 가 하나 있으니 앞의 .rainboard-button 규칙(클래스 두 개 + !important)을 이긴다. */
form#rainboard_post_form .rainboard-button {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  color: var(--color-black) !important;
  font-family: inherit !important;
  font-size: var(--rb-text) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-decoration: none !important;
  float: none !important;
  opacity: var(--rb-dim, 0.45);
  transition: opacity 0.15s ease;
}

form#rainboard_post_form .rainboard-button:hover,
form#rainboard_post_form .rainboard-button:focus-visible {
  background: none !important;
  color: var(--color-black) !important;
  opacity: 1;
}

form#rainboard_post_form .rainboard-button:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 4px;
}

/* 버튼 줄은 '다 썼다'는 신호라 입력 묶음에서 한 칸 더 떨어뜨린다 —
   행 간격(--rb-row-gap)을 한 번 더 얹어 다른 칸 사이의 두 배가 된다.
   목록 화면의 버튼 줄(.search-center)은 그대로다. 이 규칙은 글쓰기·수정 폼
   안쪽에만 걸린다(두 폼 모두 id 가 rainboard_post_form 이다). */
form#rainboard_post_form .rainboard-controller {
  margin-top: var(--rb-row-gap);
  padding-top: var(--rb-row-gap);
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.check-box input[type=checkbox] {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  accent-color: var(--color-black);
}

/* 본문 에디터 — 다른 칸과 같은 옅은 채움 하나로 자리를 잡는다.
   에디터는 iframe 이라 그 안쪽 바탕도 투명해야 이 채움이 비쳐 보인다
   (assets/css/rainboard-editor.css). 안쪽 글자는 손대지 않는다 —
   폼의 UI 글자는 900 이지만 본문은 게시된 뒤 읽힐 모양 그대로여야 한다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.textarea-box {
  padding: 0;
  border: 0;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.textarea-box span.write-span {
  display: block;
  width: 100%;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper .wp-editor-container {
  border: 0 !important;
  border-radius: 0;
  background-color: var(--rb-field) !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper .quicktags-toolbar {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper textarea {
  width: 100% !important;
  min-height: 24rem;
  padding: 0.7em !important;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-black);
  font-size: 21px !important;
  line-height: 1.55 !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.textarea-box textarea:not(.wp-editor-area) {
  border: 0;
  background-color: var(--rb-field);
}

/* 첨부 — 인라인 width:300px 가 박혀 있어 !important 로 푼다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.attach-box span.write-span {
  width: 100% !important;
  max-width: 34rem;
}

/* 첨부 줄 — [파일명 | 찾아보기].

   플러그인은 이 줄을 30px 상자 하나로 짜뒀다. 파일명 칸이 절대배치로 깔리고,
   버튼은 오른쪽 바깥(right:-100px)에 90×30 으로 떠 있고, 그 위를 투명한 file 인풋이
   90×30 으로 덮는다. 글자가 커지면 90×30 을 다 넘친다 —
   덮개가 버튼에서 어긋나면 눌러도 파일 창이 안 뜬다.

   그래서 절대배치를 걷어내고 두 칸을 그냥 나란히 놓는다. .upload-btn 을 relative 로
   남겨 두면 그 안의 file 인풋이 버튼 상자를 그대로 덮으므로(100%×100%),
   글자가 얼마가 되든 눌리는 자리와 보이는 자리가 같다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.file-upload {
  display: flex !important;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  height: auto !important;
  margin: 0 !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.file-upload input.text {
  position: static !important;
  flex: 1 1 auto;
  width: auto;
  height: auto !important;
  padding: 0.6em 0.7em !important;
  line-height: 1.15 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--rb-field) !important;
  color: var(--color-black) !important;
  font-size: var(--rb-text) !important;
  font-weight: 900 !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.upload-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
}

form#rainboard_post_form div.rainboard-write-wrapper div.upload-btn .rainboard-button {
  width: auto !important;
  min-height: 0;
  height: 100%;
  padding: 0 !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.upload-btn input.file {
  width: 100% !important;
  height: 100% !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.added-file div.added-file-box {
  border: 0;
  border-radius: 0;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.max-attach-size,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.attach-message-box {
  padding: 0;
  font-size: var(--rb-text) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: var(--color-black) !important;
  opacity: 0.5;
}

/* 첨부 행의 라벨 아닌 것들(입력칸·썸네일·진행 줄)은 모두 오른쪽 칸에 쌓는다.
   행이 2열 그리드라 그냥 두면 세 번째 자식부터 라벨 칸으로 떨어진다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.attach-box > *:not(label) {
  grid-column: 2;
}

/* ── 올린 이미지 목록 ────────────────────────────────────
   여기 보이는 순서가 Readers Club 갤러리(ACF imgs)의 순서다.
   테두리 두 겹인 첫 장이 대표 이미지다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.fileThumbArea {
  border: 0 !important;
  width: auto !important;
  height: auto !important;
}

.rainboard-wrapper.rainboard-custom div.fileThumbArea ul.file_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.rainboard-wrapper.rainboard-custom div.fileThumbArea ul.file_list li {
  float: none !important;
  width: 64px !important;
  height: 64px;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--rb-line-soft);
  cursor: pointer;
}

.rainboard-wrapper.rainboard-custom div.fileThumbArea ul.file_list li.featured {
  border: 2px solid var(--rb-line) !important;
}

.rainboard-wrapper.rainboard-custom div.fileThumbArea ul.file_list li p {
  height: 100%;
  margin: 0;
}

.rainboard-wrapper.rainboard-custom div.fileThumbArea ul.file_list li img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 업로드 진행 줄 (assets/js/rainboard-write.js 가 만든다) */
.rainboard-wrapper.rainboard-custom .thaum-rb-upload-status {
  display: block;
  padding-top: 6px;
  font-size: var(--rb-text, 1rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-black);
  opacity: 0.5;
}

/* ── 썸네일을 누르면 뜨는 레이어 ─────────────────────────
   body 직속으로 붙으므로 .rainboard-wrapper 안쪽이 아니다.

   '에디터 삽입'은 감춘다 — 본문에는 텍스트만 남기기로 했고(상세가 2단이다),
   이미지는 글에 붙어 있기만 하면 갤러리로 넘어간다. */
.rainboard_thumb_layer_btn .thumb_layer_btn .layer_btn.insert_image {
  display: none !important;
}

.rainboard_thumb_layer_btn .thumb_layer_btn .layer_btn {
  padding: 10px 16px !important;
  border: 1px solid var(--color-white) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--color-black) !important;
  color: var(--color-white) !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* ── 글쓰기 조건 안내 ────────────────────────────────────
   로그인·클럽 선택이 안 된 사람에게 뜨는 띠(inc/rainboard-write-gate.php).
   같은 상황에서는 플러그인의 글쓰기 버튼을 감춘다 — 눌러도 막히는 버튼을
   보여줄 이유가 없다. 마크업을 문자열로 잘라내지 않고 여기서 감춘다. */
.thaum-rb-gate .rainboard-button.write-button {
  display: none !important;
}

.thaum-rb-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--ep-margin);
  padding: 14px var(--ep-margin);
  border: 1px solid #000;
  background-color: var(--color-white);
}

.thaum-rb-notice__text {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.thaum-rb-notice__cta {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid #000;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.15s ease;
}

.thaum-rb-notice__cta:hover {
  background-color: #333;
  color: var(--color-white);
}

/* ── 비밀번호 확인 레이어 · 알림 ──────────────────────── */
.rainboard-wrapper.rainboard-custom .rainboard-layer,
.rainboard-wrapper .rainboard-layer {
  border: 1px solid var(--rb-line, #000);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.rainboard-wrapper .rainboard-layer .layer-head {
  border-bottom: 1px solid #000;
  background: #fff;
}

.rainboard-wrapper .rainboard-layer .layer-head h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

.rainboard-wrapper .rainboard-layer .rainboard-input input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  color: #000 !important;
}

/* 게시판이 찍는 저작권 한 줄 */
.rainboard-wrapper > .rainboard-copyrights {
  padding-top: var(--ep-margin);
  font-size: 0.875rem;
  color: var(--rb-muted, #6f6f6f);
}

/* ── 좁은 화면 ───────────────────────────────────────────
   라벨을 위로 올리고, 목록은 제목·번호만 남긴다(나머지는 플러그인이 이미 숨긴다). */
@media (max-width: 780px) {
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }
  form#rainboard_post_form {
    --rb-row-gap: calc(var(--ep-margin) * 1.4);
  }
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.check-box {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box.thaum-rb-has-tags {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.attach-box > *:not(label) {
    grid-column: 1;
  }
  .rainboard-wrapper.rainboard-custom #rainboard-table td.rainboard-list-title > a {
    font-size: 1rem !important;
  }
  .rainboard-wrapper.rainboard-custom #rainboard-read-table div.title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .rainboard-wrapper.rainboard-custom .rainboard-controller {
    flex-wrap: wrap;
  }
}
/* ── 글쓰기 폼: 회원 화면과 같은 어법 ─────────────────────
   이 폼은 원래 '글자와 빈 자리'로만 짜여 있었다 — 선도 상자도 없이 900 짜리
   큰 글씨와 옅은 채움뿐이고, 라벨과 입력칸이 2:10 으로 나란히 섰다. 화면 제목이
   4dvw 짜리 표시용 글씨라 그 리듬에 맞춘 값이었다.

   그 어법을 걷고 회원 화면(로그인·내 계정 — _member.scss)을 그대로 따른다.
   같은 사람이 같은 흐름에서 오가는 화면이라 둘이 달리 생길 이유가 없다.
   폼이란 무엇을 어디에 쓰는지가 먼저 읽혀야 하는 물건이기도 하다 — 선이 없으면
   어디까지가 한 칸인지, 어디를 눌러야 하는지가 매번 헷갈린다.

     · 제목    위아래 선 사이에 한 줄 (1.125rem / 600)
     · 폭      가운데 한 칸 42rem — 내 계정과 같다
     · 라벨    보조 급 0.875rem / 600, 입력칸 바로 위
     · 입력칸  흰 바탕 + 1px 검정 선, 안쪽 10px 12px, 글자 1rem / 500
     · 버튼    주 버튼은 검정 채움 full-width, 취소는 그 아래 밑줄 글자
     · 칩      분류 태그는 사이트 공통 태그 겉모양, 고른 것만 검정 채움

   좁은 화면 몫은 이 절 끝의 @include tablet 하나뿐이다 — 글자 급을 한 단 내리고
   선을 옅게 바꾸는 정도다(회원 화면이 그 폭에서 하는 것과 같다).
   ───────────────────────────────────────────────────────── */
/* 제목 — 마이페이지 표제 바와 같은 줄이다(.thaum-bar--member).
   4dvw·900·회색은 표시용으로 세워둔 값이라, 폼 위에 놓이면 제목이 아니라
   배경 무늬처럼 읽힌다. */
.thaum-rb-write-title {
  margin: 0 0 var(--ep-margin, 20px);
  padding: 0.5rem 0;
  border-top: 1px solid var(--rb-line, #000);
  border-bottom: 1px solid var(--rb-line, #000);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-black);
}

/* 제목과 폼을 가운데 한 칸으로 모은다. 내 계정과 같은 폭이다
   (.thaum-member--account 의 42rem).

   :has() 로 글쓰기·수정 화면만 고른다 — 같은 래퍼를 목록·읽기 화면도 쓰는데
   그쪽은 표를 펴야 하는 자리라 폭을 좁히면 안 된다. 폼이 든 래퍼에만 걸린다. */
.thaum-rb-write-title,
.rainboard-wrapper.rainboard-custom:has(form#rainboard_post_form) {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

form#rainboard_post_form {
  --rb-text: 1rem;
  --rb-row-gap: 14px;
  /* 입력칸이 테두리를 되찾으므로 옅은 채움은 할 일이 없다. 변수만 흰색으로
     돌려두면 이 값을 쓰는 자리(에디터·첨부 칸)가 함께 따라온다. */
  --rb-field: #fff;
  --rb-field-on: #fff;
  --rb-dim: 1;
  --rb-tag-dim: 1;
}

/* 행 — [라벨] 위, [입력칸] 아래. 라벨과 입력칸 사이는 5px 로 붙이고
   칸과 칸 사이는 --rb-row-gap 이 벌린다. 그 차이가 묶음을 만든다.
   (2:10 세로 격자는 선이 없던 시절 칸을 갈라주던 장치라 여기서는 필요 없다.) */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.check-box {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.check-box input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box.thaum-rb-has-tags {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.attach-box > *:not(label) {
  grid-column: 1;
}

/* 라벨. 회원 화면의 입력 라벨과 같은 급이다 — 900 은 이 크기에서 획이 뭉친다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box label span {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* 입력칸 · 선택. 회원 화면의 input 과 같은 값이다.
   선이 돌아왔으니 '지금 쓰는 칸'은 채움이 아니라 윤곽으로 알린다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=text],
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=password],
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box select,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper input#entry-title {
  padding: 10px 12px !important;
  border: 1px solid var(--rb-line, #000) !important;
  background-color: var(--color-white) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=text]:focus,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box span.write-span input[type=password]:focus,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box select:focus {
  outline: 2px solid var(--rb-line, #000);
  outline-offset: -2px;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper select#rainboard-section-select {
  width: 100% !important;
}

/* 분류 태그 — 사이트 공통 태그 겉모양(_asset.scss 의 thaum-tag)에 얹는다.
   글자만 있던 어법은 걷는다. 고르는 것들이 사이트 어디서나 칩이라
   (아카이브 필터, 상세의 유형) 같은 모양이어야 무엇을 누르는지 읽힌다.

   색은 분야 색을 테두리와 글자에 남긴다 — 대비를 맞춰 가져온 값이라
   (thaum_vivid_hex) 흰 바탕 위에서 그대로 읽힌다. 고른 하나는 검정으로
   채운다: 색을 못 가리는 눈에도 상태가 보여야 하고, 채움이 곧 선택이라는
   어법은 필터 칩·페이지 번호와 같다. */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper .thaum-rb-tags {
  gap: 6px;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper button.thaum-rb-tag {
  padding: 2px 8px !important;
  border: 1px solid var(--tag-color) !important;
  border-radius: 4px !important;
  background-color: var(--color-white) !important;
  color: var(--tag-color) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  opacity: 1;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper button.thaum-rb-tag[aria-checked=true] {
  border-color: var(--rb-line, #000) !important;
  background-color: var(--rb-line, #000) !important;
  color: var(--color-white) !important;
  text-decoration: none;
}

/* 본문 에디터. 다른 칸과 같은 상자를 두른다.
   안쪽 글자 크기는 건드리지 않는다 — 그쪽은 쓰는 글 자체라 게시된 뒤의 모양을
   따라간다(넓은 화면 21px, 좁은 화면은 아래 절에서 1rem). */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper .wp-editor-container {
  border: 1px solid var(--rb-line, #000) !important;
  background-color: var(--color-white) !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper .quicktags-toolbar {
  border-bottom: 1px solid var(--rb-line-soft, #c8c8c8) !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper textarea {
  padding: 10px 12px !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.textarea-box textarea:not(.wp-editor-area) {
  border: 1px solid var(--rb-line, #000);
  background-color: var(--color-white);
}

/* 첨부 — [파일명][찾아보기]. 파일명 칸은 다른 입력칸과 같은 상자,
   찾아보기는 작은 회색 칩이다(페이지 번호·댓글의 수정/삭제와 같은 어법). */
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.file-upload {
  gap: 8px;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.file-upload input.text {
  padding: 8px 10px !important;
  border: 1px solid var(--rb-line, #000) !important;
  background-color: var(--color-white) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

form#rainboard_post_form div.rainboard-write-wrapper div.upload-btn .rainboard-button {
  padding: 0 12px !important;
  border-radius: 4px !important;
  background-color: #e6e6e6 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.max-attach-size,
.rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.attach-message-box,
.rainboard-wrapper.rainboard-custom .thaum-rb-upload-status {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--rb-muted, #6f6f6f) !important;
  opacity: 1;
}

/* 버튼 줄 — [취소][확인] 한 행.

   둘 다 첨부의 찾아보기 버튼과 같은 상자다(모서리 4px, 선 없이 면으로 채움).
   폼에서 누르는 것은 이 셋뿐이라 같은 모양이어야 한다.
   채움만 갈린다: 확인은 검정, 취소는 회색 — 검게 채우는 쪽이 주된 동작이라는
   어법은 사이트의 다른 자리와 같다(신청 링크, 댓글의 수정 버튼).

   폭은 반씩 나눈다. 한 행에 둘뿐이라 어느 쪽도 구석에 몰리지 않고, 손가락으로
   짚기에도 넉넉하다. (플러그인이 확인 버튼에 인라인 float:right 을 박아두는데,
   위 .rainboard-button 규칙이 이미 float 을 걷어낸다.) */
form#rainboard_post_form .rainboard-controller {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: var(--rb-row-gap);
  padding-top: var(--rb-row-gap);
  border-top: 1px solid var(--rb-line-soft, #c8c8c8);
}

form#rainboard_post_form .rainboard-controller .rainboard-button {
  flex: 1 1 0;
  justify-content: center;
  width: auto;
  padding: 11px 18px !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

form#rainboard_post_form .rainboard-controller .rainboard-button.button-save {
  background-color: var(--rb-line, #000) !important;
  color: var(--color-white) !important;
}

form#rainboard_post_form .rainboard-controller .rainboard-button.button-save:hover,
form#rainboard_post_form .rainboard-controller .rainboard-button.button-save:focus-visible {
  background-color: #333 !important;
  color: var(--color-white) !important;
}

form#rainboard_post_form .rainboard-controller .rainboard-button.button-prev:not(.button-save) {
  background-color: #e6e6e6 !important;
  color: var(--color-black) !important;
}

form#rainboard_post_form .rainboard-controller .rainboard-button.button-prev:not(.button-save):hover,
form#rainboard_post_form .rainboard-controller .rainboard-button.button-prev:not(.button-save):focus-visible {
  background-color: #dcdcdc !important;
  color: var(--color-black) !important;
}

/* ── 좁은 화면 ───────────────────────────────────────────
   회원 화면이 이 폭에서 하는 것과 같다 — 글자 급을 한 단 내리고, 제목의 선을
   옅게 바꾼다(헤더 바로 아래에 붙는 자리라 검정 선은 너무 세다).
   본문 에디터는 게시된 뒤 이 폭에서 읽힐 크기(1rem)로 맞추고, 한 화면을 다
   먹지 않게 높이를 줄인다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-rb-write-title {
    padding: 10px 0;
    border-color: var(--rb-line-soft, #c8c8c8);
  }
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.write-box label span {
    font-size: 0.8125rem !important;
  }
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper button.thaum-rb-tag {
    font-size: 0.8125rem !important;
  }
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper textarea {
    min-height: 14rem;
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.file-upload input.text,
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.max-attach-size,
  .rainboard-wrapper.rainboard-custom div.rainboard-write-wrapper div.attach-message-box,
  .rainboard-wrapper.rainboard-custom .thaum-rb-upload-status,
  form#rainboard_post_form div.rainboard-write-wrapper div.upload-btn .rainboard-button {
    font-size: 0.8125rem !important;
  }
}
/* ── 회원 화면 (로그인 / 회원가입 / 내 계정 / 비밀번호 재설정) ──
   inc/member-pages.php 의 숏코드가 그리는 폼들.

   생김새는 사이트의 다른 판들과 같은 어법이다 — 흰 바탕, 1px 검정 선,
   라운드 없음, 주 버튼은 검정 채움 + 흰 글씨.
   제목 줄은 사이트 공통 바 컴포넌트(thaum_bar_markup)를 그대로 쓰므로
   여기서는 폼 안쪽만 다룬다.
   ───────────────────────────────────────────────────────── */
.thaum-member {
  --tm-line: #000;
  --tm-line-soft: #c8c8c8;
  --tm-muted: #6f6f6f;
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--ep-margin) 0 calc(var(--ep-margin) * 3);
}

/* 내 계정은 칸이 여러 개라 조금 넓게 쓴다. */
.thaum-member--account {
  max-width: 42rem;
}

.thaum-member__title {
  font-size: 1.8125rem;
  font-weight: 400;
  margin: 0 0 var(--ep-margin);
}

.thaum-member__lead {
  margin: 0 0 var(--ep-margin);
  font-size: 1rem;
  line-height: 1.5;
}

/* ── 알림 · 오류 ─────────────────────────────────────── */
.thaum-member__notice {
  margin: 0 0 var(--ep-margin);
  padding: 10px 14px;
  border: 1px solid var(--tm-line);
  background-color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.thaum-member__errors {
  margin: 0 0 var(--ep-margin);
  padding: 10px 14px 10px 32px;
  border: 1px solid #da2128;
  list-style: disc;
  color: #da2128;
}
.thaum-member__errors li {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.thaum-member__errors a {
  color: inherit;
  text-decoration: underline;
}

/* ── 폼 ──────────────────────────────────────────────── */
.thaum-member__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

/* 내 계정의 클럽 저장처럼 한 줄로 끝나는 폼. */
.thaum-member__form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.thaum-member__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.thaum-member__field label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
.thaum-member__field input[type=text],
.thaum-member__field input[type=email],
.thaum-member__field input[type=password] {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tm-line);
  border-radius: 0;
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: 1rem;
  line-height: 1.3;
}
.thaum-member__field input:focus {
  outline: 2px solid var(--tm-line);
  outline-offset: -2px;
}

/* 클럽 선택 — 가입 폼과 내 계정이 같은 select 를 쓴다. */
.thaum-member select,
.thaum-member__field select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tm-line);
  border-radius: 0;
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: 1rem;
  line-height: 1.3;
}

.thaum-member__form--inline select {
  flex: 1 1 12rem;
  width: auto;
}

.thaum-member__hint {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--tm-muted);
}

.thaum-member__check {
  margin: 0;
}
.thaum-member__check label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  cursor: pointer;
}
.thaum-member__check input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--color-black);
}

.thaum-member__submit {
  margin: 6px 0 0;
}

/* ── 버튼 · 링크 ─────────────────────────────────────── */
.thaum-member__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 18px;
  border: 1px solid var(--tm-line);
  border-radius: 0;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.thaum-member__button:hover, .thaum-member__button:focus {
  background-color: #333;
  color: var(--color-white);
}

/* 한 줄 폼·안내 박스 안의 버튼은 내용만큼만. */
.thaum-member__form--inline .thaum-member__button,
.thaum-member__actions .thaum-member__button {
  width: auto;
}

.thaum-member__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ep-margin);
}

.thaum-member__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--tm-line-soft);
}

.thaum-member__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.thaum-member__link:hover {
  color: var(--color-black);
  opacity: 0.6;
}

/* ── 클럽 개설 문의 ──────────────────────────────────────
   가입 폼과 내 계정에 같은 덩어리가 붙는다(inc/club-request.php).
   접수 폼이 아니라 안내 한 줄 + 주소 한 줄이다 — 메일은 본인이 직접 쓴다.
   ───────────────────────────────────────────────────────── */
.thaum-club-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--ep-margin);
  padding-top: var(--ep-margin);
  border-top: 1px solid var(--tm-line-soft, #c8c8c8);
}

.thaum-club-contact__lead {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tm-muted, #6f6f6f);
}

/* 주소는 눌러야 할 것이므로 안내보다 한 단계 크고 검다. */
.thaum-club-contact__email {
  align-self: flex-start;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}
.thaum-club-contact__email:hover, .thaum-club-contact__email:focus-visible {
  color: var(--color-black);
  opacity: 0.6;
}

/* ── 내 계정 ─────────────────────────────────────────────
   칸마다 아코디언이다(details/summary — inc/member-pages.php).
   생김새는 목차 상자와 같은 어법을 쓴다: 회색 판에 살짝 둥근 모서리.
   칸을 선으로 나누던 예전 방식은 접었을 때 제목만 줄줄이 남아 어디까지가
   한 칸인지 안 읽힌다 — 판으로 묶으면 접혀도 덩어리가 보인다.
   ───────────────────────────────────────────────────────── */
.thaum-member__section {
  margin-top: var(--ep-margin);
  padding: var(--ep-margin);
  border-top: 0;
  border-radius: 8px;
  background-color: #ededed;
}

.thaum-member__subtitle {
  /* summary 기본 마커(▶)를 지운다. 글꼴마다 모양이 다르고 자리도 안 맞는다 —
     오른쪽 끝의 꺾쇠가 대신한다. 두 줄 다 필요하다: 표준 쪽은 list-style,
     웹킷은 자기 의사요소를 따로 본다. */
  list-style: none;
}
.thaum-member__subtitle::-webkit-details-marker {
  display: none;
}
.thaum-member__subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  /* 열림 표시. 정사각형에서 두 변만 남겨 돌린 꺾쇠다 — 사이트의 다른 화살표
     (스와이퍼·플립북·페이저)와 같은 1px 각진 획이다. */
}
.thaum-member__subtitle::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

/* 열린 칸. 꺾쇠가 위를 향하고, 제목 아래로 내용이 들어설 자리를 연다.
   (접힌 칸에는 그 여백이 필요 없다 — 제목 한 줄이 판의 전부다.) */
.thaum-member__section[open] > .thaum-member__subtitle {
  margin-bottom: 12px;
}
.thaum-member__section[open] > .thaum-member__subtitle::after {
  transform: translateY(2px) rotate(-135deg);
}

.thaum-member__posts {
  margin: 0;
  padding: 0;
  list-style: none;
}
.thaum-member__posts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--tm-line-soft);
}
.thaum-member__posts a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-black);
}
.thaum-member__posts a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.thaum-member__posts-date {
  flex: none;
  font-size: 0.875rem;
  color: var(--tm-muted);
}

/* ── 좁은 화면 ───────────────────────────────────────── */
@media (max-width: 780px) {
  .thaum-member,
  .thaum-member--account {
    max-width: 100%;
  }
  .thaum-member__form--inline {
    flex-direction: column;
    align-items: stretch;
  }
  .thaum-member__form--inline select,
  .thaum-member__form--inline .thaum-member__button {
    width: 100%;
    flex: none;
  }
}
/* ── 모바일: 글자 급 정리 ───────────────────────────────────
   PC 는 폼 하나가 화면 가운데 넓게 서 있어서 1.8125rem 제목이 자연스럽지만,
   좁은 화면에서는 제목·소제목·라벨·힌트가 저마다 다른 크기와 굵기로 서서
   한 화면에 예닐곱 급이 겹친다.

   사이트의 모바일 규칙대로 세 급으로만 정리한다.
     1.125rem  제목      — 화면에 하나뿐인 표제
     1rem      본문·조작 — 안내문·입력칸·버튼·목록
     0.8125rem 보조      — 라벨·힌트·날짜·부가 링크

   굵기도 둘로 줄인다: 읽는 글은 500, 누르거나 짚는 것(라벨·버튼·링크)은 600.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 제목 줄. 실제로 그려지는 건 이 클래스가 아니라 사이트 공통 바다
     (thaum_member_bar 가 thaum_bar_markup 을 부른다 — 이 클래스는 그 함수가
     없을 때의 안전망일 뿐이다). 선과 여백은 아래 .thaum-bar--member 절 참고. */
  .thaum-member__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .thaum-member__subtitle {
    font-size: 1rem;
    font-weight: 600;
  }
  /* 읽는 글. 안내문·알림·오류는 같은 급이다 — 알림만 굵게 두면 오류와
     위계가 뒤집혀 보인다(오류가 더 급한 말인데 덜 굵어진다). */
  .thaum-member__lead,
  .thaum-member__notice,
  .thaum-member__errors li {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }
  .thaum-member__field input,
  .thaum-member__field textarea,
  .thaum-member select,
  .thaum-member__field select,
  .thaum-member__button,
  .thaum-member__posts a,
  .thaum-club-contact__email {
    font-size: 1rem;
  }
  .thaum-member__button,
  .thaum-member__posts a,
  .thaum-club-contact__email {
    font-weight: 600;
  }
  /* 보조. 짚어 주는 말들이라 본문보다 작고, 라벨·링크는 짚는 것이라 600 이다.
     힌트·날짜·설명은 읽는 글이라 500. */
  .thaum-member__field label,
  .thaum-member__check label,
  .thaum-member__link {
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .thaum-member__hint,
  .thaum-member__posts-date,
  .thaum-club-contact__lead {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
  }
}
/* ── 모바일: 제목 바에 선을 되돌린다 ────────────────────────
   회원 화면의 제목 줄은 사이트 공통 바다(thaum_member_bar → thaum_bar_markup,
   .thaum-bar--member). 그 컴포넌트는 좁은 화면에서 위아래 선과 안쪽 여백을
   걷어낸다(_bar.scss) — 칸이 세로로 쌓인 자리에 가로선이 남으면 본문 사이에
   검은 줄이 그어진 것처럼 읽히기 때문이다.

   회원 화면은 상세 페이지 바(.thaum-bar--single)와 사정이 같다. 헤더 바로
   아래에 붙는 자리라 사이에 아무것도 없어서, 선이 없으면 제목이 헤더에 얹힌
   것처럼 읽힌다. 그래서 값도 그쪽과 같게 둔다 — 옅은 회색 선(#c8c8c8)에
   안쪽 여백 10px. 검정 선은 이 자리에서 너무 세다.

   선택자에 .thaum-bar 를 함께 적어 클래스 둘로 맞춘다. 걷어내는 규칙이
   `.thaum-bar:not(.thaum-bar--single)` + !important 라, 클래스 하나로는
   !important 를 붙여도 못 이긴다(무게가 낮으면 순서를 따지지 않는다).
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-bar.thaum-bar--member {
    border-top: 1px solid #c8c8c8 !important;
    border-bottom: 1px solid #c8c8c8 !important;
    padding: 10px 0 0 !important;
  }
}
/* ── Readers Club 좋아요 · 댓글 ─────────────────────────────
   inc/readersclub-likes.php / inc/readersclub-comments.php 가 그리는 것들.

   좋아요·댓글 수는 두 자리에 같은 모양으로 나온다.
     · 아카이브 카드 우측 하단   (.thaum-social-row--card) — 좋아요 + 댓글 수
     · 상세 제목 칸 오른쪽 끝    (.thaum-social-row--bar)  — 좋아요만
   둘 다 절대배치다. 카드는 카드 전체가 <a> 라서 그 위에 얹어야 하고,
   상세는 제목 옆 빈자리에 앉혀야 하기 때문이다.

   색은 물려받는다(currentColor). 카드는 배경이 글마다 달라서
   --rc-ink 를 따라야 하고, 바에서는 검정이다.
   ───────────────────────────────────────────────────────── */
.thaum-social-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 카드 우측 하단. 카드 전체가 <a> 라서 그 위에 얹는다 —
   .readersclub-list-item 은 전역 규칙(* { position: relative })으로 이미 기준점이다. */
.thaum-social-row--card {
  position: absolute;
  right: var(--rc-gutter, 14px);
  bottom: var(--rc-gutter, 14px);
  z-index: 1;
  color: var(--rc-ink, #000);
  transition: transform 0.2s ease;
}

.readersclub-list-item:hover .thaum-social-row--card {
  transform: translateY(-10px);
}

/* 모바일에서는 카드가 더 이상 떠오르지 않는다(_archive-list.scss 의 호버 끄기).
   이 줄만 남겨두면 손가락으로 탭한 자리에 :hover 가 걸린 채, 카드는 가만히
   있는데 좋아요 줄만 10px 올라가 어긋난다.
   전환도 함께 끈다 — 상태만 지우면 탭 뒤에 제자리로 내려오는 잔상이 남는다. */
@media (max-width: 1024px) {
  .thaum-social-row--card {
    transition: none;
  }
  .readersclub-list-item:hover .thaum-social-row--card {
    transform: none;
  }
}
/* 상세 상단바 — 제목 칸의 오른쪽 끝.
   기준점은 .thaum-bar__left 다(전역 * { position: relative } 로 이미 잡혀 있다).
   여백을 칸이 아니라 제목(h1)에 주는 게 요점이다 — 칸에 padding 을 주면
   right:0 이 그 여백 안쪽을 가리켜 좋아요가 칸 끝에 붙지 않는다. */
.thaum-social-row--bar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.readersclub-single .thaum-bar__heading {
  padding-right: 4rem;
}

/* ── 모바일: 질문 분야 태그 ─────────────────────────────────
   칸이 세로로 쌓이면 질문 분야는 제목 아래 혼자 한 줄을 쓴다. 그 자리에서
   분야는 "이 글이 무엇에 관한 것인가"를 먼저 알리는 표식이라, term 색을 두른
   태그로 만든다 — Movement 상세의 유형 태그와 같은 물건이고 값도 같다
   (_movement-single.scss). 두 상세에서 같은 자리의 표식이 다르게 서 있으면
   안 되므로, 고칠 일이 있으면 둘을 같이 본다.

   색은 term 의 대표색(thaum_scope_color)이 인라인으로 온다 — 아카이브 카드의
   종이 배경과 같은 값이라, 목록에서 색으로 익힌 분야가 상세에서도 같은 색으로
   읽힌다. 그 색을 테두리로 세우고 배경에는 옅게만 깐다: 꽉 채우면 분야마다
   밝기가 달라 어떤 색 위에서는 검은 글자가 묻는다. 바탕이 흰색에 가깝게 남으니
   글자는 어떤 분야든 검정 하나로 끝난다.

   클럽 이름(.readersclub-single__club)은 태그로 만들지 않는다 — 색이 없는
   값이라 회색 칩이 하나 더 서면 무엇이 표식인지 흐려진다. 크기·색은 상세 바의
   부가 정보 값 그대로다(_bar.scss).

   선택자 무게는 _bar.scss 의 부가 정보 규칙(클래스 셋)과 같게 맞춘다.
   이 파일이 @import 순서상 뒤라, 같은 무게면 여기 값이 이긴다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* 태그는 제목 위에 선다. 칸이 세로로 쌓이는 순서는 마크업 그대로
     (제목 → 클럽 이름 → 질문 분야)인데, 분야는 글을 읽기 전에 먼저 알리는
     표식이라 제목 뒤에 있으면 표식 구실을 못 한다 — Movement 상세도 유형이
     제목 위다. 바가 이 폭에서 flex column 이라 순서만 당기면 된다(_bar.scss).

     order 는 그리는 순서만 바꾼다. DOM 은 그대로라 읽기·탭 순서에서는 제목이
     먼저다(Movement 갤러리를 위로 올릴 때와 같은 방식). */
  .thaum-bar--readersclub-single .thaum-bar__right {
    order: -1;
  }
  .thaum-bar.thaum-bar--single .readersclub-single__scope {
    --rc-tag: #c8c8c8;
    display: inline-block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    border: 1px solid var(--rc-tag);
    background-color: color-mix(in srgb, var(--rc-tag) 20%, transparent);
    color: #000;
    font-size: 0.75rem;
    font-weight: 500;
  }
}
/* ── 모바일: 좋아요를 바의 오른쪽 아래로 ────────────────────
   PC 에서 좋아요는 제목 칸의 오른쪽 끝에 앉는다 — 칸이 가로로 나뉘어 있어
   제목 옆이 곧 빈자리다. 칸이 세로로 쌓이는 여기서는 그 자리가 제목 한복판
   오른쪽이 되어, 태그·제목·클럽 이름이 흐르는 한가운데에 아이콘이 끼어든다.
   바 전체를 기준으로 오른쪽 아래 구석에 내려놓는다 — 위에서부터 [분야][제목]
   [클럽 이름]을 읽고 마지막에 닿는 자리다.

   크기도 한 급 줄인다. 1rem·1.15rem 은 제목이 1.5rem 이던 PC 기준이라,
   바 안의 다른 글자가 전부 0.75~0.8125rem 인 여기서는 아이콘만 혼자 크다.
   ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-bar--readersclub-single {
    /* 좋아요가 기댈 상자를 바로 만든다. 전역 `* { position: relative }` 때문에
       제목 칸도 위치 지정 요소여서, 그냥 두면 좋아요가 바가 아니라 제목 칸
       기준으로 앉는다(Now 카드의 status 를 카드 구석으로 뺄 때와 같은 사정). */
  }
  .thaum-bar--readersclub-single .thaum-bar__left {
    position: static;
  }
  .thaum-bar--readersclub-single .thaum-social-row--bar {
    top: auto;
    bottom: 10px;
    right: 0;
    height: auto;
    /* 손가락이 닿게 한 겹 올린다. 좋아요는 제목 칸 안에 있는데 그 아래로
       내려앉은 자리는 클럽 이름 칸(DOM 상 뒤)과 겹친다 — 전역
       `* { position: relative }` 라 둘 다 위치 지정 요소여서, 그냥 두면
       뒤에 오는 칸이 위에 그려져 탭을 통째로 가로챈다(눌러도 아무 일이
       일어나지 않던 이유다. 카드 쪽 좋아요도 같은 이유로 z-index 를 쥔다). */
    z-index: 1;
  }
  .thaum-bar--readersclub-single {
    /* 좋아요가 앉을 자리. 흐름 밖으로 뺀 요소라 자리를 스스로 만들지 못한다.
       바의 마지막 줄인 클럽 이름과 같은 행이라 이름이 길면 그 밑으로 파고들고,
       클럽이 없는 글에서는 제목의 마지막 줄이 그 자리에 온다 — 둘 다 비운다. */
  }
  .thaum-bar--readersclub-single .thaum-bar__center,
  .thaum-bar--readersclub-single .thaum-bar__heading {
    padding-right: 3rem;
  }
  .thaum-bar--readersclub-single .thaum-social-row--bar {
    gap: 3px;
  }
  .thaum-bar--readersclub-single .thaum-social-row--bar .thaum-social {
    gap: 1px;
    font-size: 0.75rem;
  }
  .thaum-bar--readersclub-single .thaum-social-row--bar .thaum-social__icon {
    width: 0.875rem;
    height: 0.875rem;
  }
}
/* ── 낱개 버튼 ───────────────────────────────────────────
   버튼(좋아요)과 링크(댓글 수)가 같은 모양이어야 한다. 둘 다 기본 스타일을 벗긴다. */
.thaum-social {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.thaum-social:hover, .thaum-social:focus-visible {
  background-color: transparent;
  color: inherit;
  opacity: 0.6;
}
.thaum-social.is-busy {
  opacity: 0.4;
  pointer-events: none;
}

.thaum-social__icon {
  display: block;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
}

/* 숫자 칸은 한 줄만 보이는 창이다. 좋아요를 누르면 옛 숫자가 빠져나가고
   새 숫자가 반대쪽에서 올라온다(assets/js/readersclub-likes.js).

   height 를 못박아야 창이 된다 — overflow:hidden 만으로는 두 숫자가 겹치는 동안
   칸이 두 줄로 벌어진다. 자릿수가 늘어도(9 → 10) 폭이 덜컹거리지 않도록
   폭은 언제나 '들어오는 숫자'가 정한다(나가는 숫자는 absolute 로 흐름에서 뺀다). */
.thaum-social__count {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.thaum-social__num {
  display: block;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.thaum-social__num.is-out {
  position: absolute;
  top: 0;
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .thaum-social__num {
    transition: none;
  }
}
/* ── 댓글 ────────────────────────────────────────────────
   상세 오른쪽 칸 맨 아래. 본문과 확실히 나뉘도록 위에 선을 둔다.
   ───────────────────────────────────────────────────────── */
.thaum-comments {
  --tc-line: #000;
  --tc-line-soft: #c8c8c8;
  --tc-muted: #6f6f6f;
  display: flex;
  flex-direction: column;
  gap: var(--ep-margin);
  padding-top: var(--ep-margin);
  border-top: 1px solid var(--tc-line);
}

/* 내 계정의 '내가 쓴 댓글'은 아코디언 칸이다(details — inc/member-pages.php 참고).
   위 .thaum-comments 의 flex column·선·여백은 상세 페이지의 댓글 자리 값이라
   여기서는 걷어낸다 — 판의 모양·여백은 .thaum-member__section 이 이미 쥐고 있고,
   details 를 flex 로 두면 summary 가 flex 항목이 되어 여닫이 배치가 흔들린다.

   padding 은 되돌리지 않는다 — 판의 안쪽 여백(.thaum-member__section 의
   var(--ep-margin))을 그대로 쓴다. 예전에 여기서 padding-top:0 을 걸었는데,
   저 규칙이 이 파일보다 앞서 있어 판의 위쪽 여백까지 함께 지워졌다.
   이 칸만 제목이 판 꼭대기에 붙어 보인 이유다. */
.thaum-comments--account {
  display: block;
  border-top: 0;
}

/* 내 계정 안에서는 회원 화면의 글자 급을 그대로 따른다(_member.scss).
   이 파일 위쪽 값(본문 2rem/900)은 상세 페이지에서 칸을 통째로 쓰는 댓글
   기준이라, 아코디언 칸 안에 그대로 들어오면 옆 칸들과 크기가 두 배 넘게
   갈려 이 칸만 튄다.

   댓글 한 줄은 옆 칸의 '내가 쓴 글' 목록과 같은 물건이다 — 글 제목 링크와
   날짜가 한 줄에 서고 그 아래로 내용이 붙는다. 그래서 급도 그 목록에 맞춘다:

     원글 링크  1rem / 600      (.thaum-member__posts a 와 같다)
     댓글 본문  1rem / 500      (읽는 글)
     날짜·상태  0.875rem / 500  (.thaum-member__posts-date, 모바일 0.8125rem)
     수정·삭제  0.875rem / 600  (.thaum-member__link — 짚는 것이라 600)

   굵기에 !important 를 되받는 건 기본값이 900 을 !important 로 박아둬서다.
   ───────────────────────────────────────────────────────── */
.thaum-comments--account .thaum-comments__body,
.thaum-comments--account .thaum-comments__body p {
  font-size: 1rem;
  font-weight: 500 !important;
  line-height: 1.5;
  color: #000;
}
.thaum-comments--account {
  /* 원글 링크와 날짜가 한 줄이다. 줄에는 본문 급을 주고 날짜만 내린다 —
     링크는 이 줄에서 읽히는 말이고 날짜는 곁에 붙는 값이다. */
}
.thaum-comments--account .thaum-comments__meta {
  font-size: 1rem;
}
.thaum-comments--account .thaum-comments__author,
.thaum-comments--account .thaum-comments__post {
  font-size: inherit;
  font-weight: 600 !important;
  color: #000;
}
.thaum-comments--account .thaum-comments__date,
.thaum-comments--account .thaum-comments__pending,
.thaum-comments--account .thaum-comments__empty {
  font-size: 0.875rem;
  font-weight: 500 !important;
  line-height: 1.4;
}
.thaum-comments--account .thaum-comments__date,
.thaum-comments--account .thaum-comments__pending {
  color: var(--tc-muted);
}
.thaum-comments--account {
  /* 수정·삭제·취소. 상세 페이지의 좁은 화면에서 쓰는 칩(아래 모바일 절)을
     내 계정에서는 폭과 무관하게 쓴다 — 검게 채운 '수정'이 주된 동작이고
     '삭제'·'취소'는 회색으로 물러난다. 사이트의 다른 자리(신청 링크·등록
     버튼)와 같은 어법이다.

     회색만 #e6e6e6 이 아니라 #d0d0d0 이다. 저 값은 mesh 판 위에 얹히는
     칩의 색인데, 내 계정의 칸은 이미 #ededed 회색 판이라 두 회색이 한 톤
     차이도 안 나서 칩이 판에 묻힌다. #d0d0d0 은 모바일 태그 칩과 같은 값이다. */
}
.thaum-comments--account .thaum-comments__tools {
  gap: 6px;
}
.thaum-comments--account .thaum-comments__tool {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #d0d0d0;
  color: #000;
  font-size: 0.875rem;
  font-weight: 600 !important;
  line-height: 1.4;
  text-decoration: none;
}
.thaum-comments--account .thaum-comments__tool--edit {
  background-color: #000;
  color: #fff;
}
.thaum-comments--account .thaum-comments__tool--edit:hover,
.thaum-comments--account .thaum-comments__tool--edit:focus-visible {
  background-color: #000;
  color: #fff;
}
.thaum-comments--account .thaum-comments__tool--delete:hover,
.thaum-comments--account .thaum-comments__tool--delete:focus-visible,
.thaum-comments--account .thaum-comments__tool--cancel:hover,
.thaum-comments--account .thaum-comments__tool--cancel:focus-visible {
  background-color: #d0d0d0;
  color: #000;
}
@media (max-width: 1024px) {
  .thaum-comments--account .thaum-comments__date,
  .thaum-comments--account .thaum-comments__pending,
  .thaum-comments--account .thaum-comments__empty,
  .thaum-comments--account .thaum-comments__tool {
    font-size: 0.8125rem;
  }
}

.thaum-comments__title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  color: #c0c0c0;
}

.thaum-comments__title-count {
  font-size: 2rem;
  font-weight: 900;
  color: #c0c0c0;
}

.thaum-comments__empty {
  margin: 0;
  font-size: 2rem;
  color: var(--tc-muted);
}

.thaum-comments__errors {
  margin: 0;
  padding: 10px 14px 10px 30px;
  border: 1px solid #da2128;
  color: #da2128;
  list-style: disc;
}
.thaum-comments__errors li {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.thaum-comments__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thaum-comments__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--tc-line-soft);
}
.thaum-comments__item:first-child {
  padding-top: 0;
}

.thaum-comments__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 2rem;
  line-height: 1.3;
}

.thaum-comments__author {
  font-size: 2rem;
  font-weight: 900;
  color: #545454;
}

.thaum-comments__post {
  font-size: 2rem;
  font-weight: 900 !important;
  color: #545454;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.thaum-comments__date {
  color: #545454;
}

.thaum-comments__pending {
  padding: 1px 6px;
  background-color: #e5e5e5;
  color: var(--tc-muted);
  font-weight: 600;
}

.thaum-comments__body {
  font-size: 2rem;
  font-weight: 900 !important;
  color: #545454;
  line-height: 1.6;
  word-break: break-word;
}
.thaum-comments__body p {
  margin: 0 0 0.5em;
  font-size: inherit;
  font-weight: inherit !important;
  line-height: inherit;
}
.thaum-comments__body p:last-child {
  margin-bottom: 0;
}

/* 수정·삭제. 삭제는 값을 바꾸므로 링크가 아니라 폼 안의 버튼이다 —
   둘이 같은 모양이어야 해서 버튼의 기본 스타일을 벗긴다. */
.thaum-comments__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.thaum-comments__tool-form {
  margin: 0;
}

.thaum-comments__tool {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tc-muted);
  font-family: inherit;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.thaum-comments__tool:hover, .thaum-comments__tool:focus-visible {
  color: #000;
}

/* ── 쓰기 · 수정 폼 ──────────────────────────────────────── */
.thaum-comments__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.thaum-comments__form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tc-line);
  border-radius: 0;
  background-color: #fff;
  color: #000;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}
.thaum-comments__form textarea:focus {
  outline: 2px solid var(--tc-line);
  outline-offset: -2px;
}

.thaum-comments__form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.thaum-comments__submit {
  padding: 8px 16px;
  border: 1px solid var(--tc-line);
  border-radius: 0;
  background-color: #000;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.thaum-comments__submit:hover, .thaum-comments__submit:focus-visible {
  background-color: #333;
  color: #fff;
}

.thaum-comments__login {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tc-muted);
}

.thaum-comments__login-link {
  font-weight: 700;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 수정 · 삭제 · 취소 버튼의 겉모양. 손으로 누르는 자리라 밑줄 친 글자가 아니라
   작은 회색 판이다 — 페이지 번호(.facetwp-page)·스와이퍼 화살표와 같은 어법이고
   (선 없이 면, 모서리 4px), 좁은 화면에서 '누르는 것'은 사이트 어디서나 이
   모양 하나로 읽힌다.

   밑줄은 걷는다. 판 위에서는 글자 밑의 선이 판의 아래 테두리처럼 보인다.
   글자색도 회색(--tc-muted)에서 검정으로 올린다 — 면이 이미 배경에서 떠 있어
   글자까지 눕히면 두 겹으로 물러난다.

   쓰는 자리가 둘이라 믹스인으로 뺀다: 내 계정의 댓글 목록(좁은 화면에서만)과
   상세의 댓글 판(폭과 무관). 크기와 면 색만 자리마다 다르다. */
/* ── 모바일 ──────────────────────────────────────────────
   댓글 칸의 글자는 2rem(36px)·900 으로 잡혀 있다. 칸이 좁아지는 폭에서는
   한 줄에 열 몇 자밖에 안 들어가고, 굵기까지 최대라 본문보다 댓글이 더
   크게 읽힌다.

   사이트의 모바일 글자 단계에 맞춘다. 세 급뿐이다 —
     헤딩   1.3125rem / 700   (.thaum-grid__text h1~h4)
     본문   1rem     / 600   (.thaum-grid__text p·li)
     보조   0.8125rem / 600   (_asset.scss 의 thaum-tag, 상세 바 아티스트)

   폼 쪽(textarea·등록 버튼·로그인 안내)과 오류 목록은 이미 1rem 이라
   손대지 않는다.

   상세 페이지의 댓글은 이제 폭과 무관하게 판 안에 들어가므로 여기 해당하지
   않는다(아래 절). 이 값들이 실제로 쓰이는 곳은 내 계정의 '내가 쓴 댓글'이다.
   ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .thaum-comments__title,
  .thaum-comments__title-count {
    font-size: 1.3125rem;
    font-weight: 700;
  }
  .thaum-comments__empty {
    font-size: 1rem;
  }
  /* 작성자 · 날짜 · 원글 링크 · 승인 대기. 댓글 본문을 거드는 줄이라 한 급 낮춘다.
     크기는 줄이 정하고 안쪽 조각들은 물려받는다 — 한 줄 안에서 글자 크기가
     들쭉날쭉하지 않게. */
  .thaum-comments__meta {
    font-size: 0.8125rem;
  }
  .thaum-comments__author,
  .thaum-comments__post {
    font-size: inherit;
    font-weight: 600 !important;
  }
  .thaum-comments__body {
    font-size: 1rem;
    font-weight: 600 !important;
  }
  .thaum-comments__tools {
    gap: 6px;
  }
  .thaum-comments__tool {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #e6e6e6;
    color: #000;
    line-height: 1.4;
    text-decoration: none;
    font-size: 0.8125rem;
  }
  /* 수정만 검게 채운다. 둘 중 되돌릴 수 있는 쪽이고 더 자주 누르는 쪽이다 —
     삭제는 회색으로 남겨 먼저 손에 걸리지 않게 한다(취소도 같은 회색이다.
     그 줄에서 채워지는 자리는 옆의 "수정 완료" 버튼이다).
     검게 채우는 것이 곧 '주된 동작'이라는 어법은 신청 링크·등록 버튼과 같다. */
  .thaum-comments__tool--edit {
    background-color: #000;
    color: #fff;
  }
  .thaum-comments__tool--edit:hover, .thaum-comments__tool--edit:focus-visible {
    color: #fff;
  }
}
/* ── 댓글 판 ───────────────────────────────────────────────
   Readers Club 상세에서만(templates/readersclub_single.php 의
   thaum_readersclub_single_comments). 댓글은 글 뒤에 길게 이어 붙는 물건이라
   본문을 다 지나쳐야 닿는다 — 아카이브 필터 바가 쓰는 mesh 토글 판에 통째로
   넣어 어디서든 손에 닿게 한다.

   판의 겉모양(배경 mesh·둥근 모서리·접기 토글)은 그 컴포넌트가 낸다
   (_bar.scss 의 thaum-panel-chrome). 폭과 무관하게 켜는 것이 이 절의 첫 줄이고,
   자리만 폭에 따라 갈린다 — 좁은 화면은 화면 아래 고정(_bar.scss), 넓은 화면은
   아래에 붙었다 흘러가는 sticky(이 파일 맨 아래). 여기서는 판 안에 들어간
   댓글의 타이포를 판의 급으로 갈아끼운다.

   판의 글자 급은 두 단뿐이다 — 판 라벨·필터 칩이 쓰는 값이다.
     라벨 0.8125rem / 600   (.thaum-bar__panel-label)
     보조 0.75rem   / 500
   위 절의 모바일 값(본문 1rem, 제목 1.3125rem)은 칸을 통째로 쓰는 댓글 기준이라,
   손바닥만 한 판에 그대로 들이면 댓글 서넛에 화면 절반이 찬다.
   (내 계정의 '내가 쓴 댓글'은 판에 들어가지 않으므로 위 값 그대로다.)
   ───────────────────────────────────────────────────────── */
.thaum-bar__panel--comments {
  /* 판이 가장자리에 딱 붙지 않게 띄운다. 이 여백까지 포함한 높이를
     script.js 가 재서 --thaum-barpanel-h 로 꽂으므로, 문서 끝에 비워둘
     자리도 그 값 하나로 끝난다(아래 주석). */
  padding: var(--ep-margin);
  /* 실제로 보이는 판. 배경·모서리·안쪽 여백이 여기 있다 — 예전에는 칸들이
     하나씩 짊어졌는데, 토글과 mesh 까지 한 판에 얹으려면 그것들을 담는 상자가
     하나 있어야 한다.
     overflow 는 mesh 때문이다. 색덩이가 모서리 밖으로 새면 둥근 모서리가 사라진다. */
}
.thaum-bar__panel--comments .thaum-bar__panel-inner {
  --panel-pad: 10px;
  --panel-toggle: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--panel-pad);
  border-radius: 5px;
  background-color: #f2f2f2;
  overflow: hidden;
  /* 접히면 내용이 사라져 안쪽 여백만 남는데, 토글은 흐름 밖이라 높이를 못 낸다.
     토글이 설 자리는 지켜둔다. */
  min-height: calc(var(--panel-toggle) + var(--panel-pad) * 2);
  transition: gap var(--thaum-collapse-dur) var(--thaum-collapse-ease);
}
.thaum-bar__panel--comments .thaum-mesh {
  display: block;
}
.thaum-bar__panel--comments {
  /* 토글 줄은 판 맨 윗줄에 얹는다. 흐름에 두면 자기 줄을 차지해서, 판의 첫 줄
     (필터 바의 [Category] 라벨, 전환 바의 탭, 댓글의 "댓글 N")이 그 아래로
     밀린다 — 둘은 한 행에 있어야 읽힌다.

     기준 상자는 .thaum-bar__panel-inner 다(전역 `* { position: relative }`).

     이 줄이 첫 줄 위에 겹쳐 떠 있으므로, 아래 칩을 누르는 손가락을 가로채지
     않게 통과시킨다. 토글만 다시 받는다. */
}
.thaum-bar__panel--comments .thaum-bar__panel-head {
  position: absolute;
  top: var(--panel-pad);
  left: var(--panel-pad);
  right: var(--panel-pad);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  /* 펼치면 내용(.thaum-bar__panel-body)이 이 줄과 같은 자리에 서는데, DOM 이
     뒤라 위에 그려진다 — 그대로 두면 토글이 그 밑에 깔려 눌리지 않는다
     (접힌 동안에는 내용 높이가 0 이라 안 가려서, 펴기만 되고 접기는 안 됐다).
     전역 `* { position: relative }` 라 둘 다 위치 지정 요소이므로 한 겹 올린다. */
  z-index: 1;
}
.thaum-bar__panel--comments .thaum-bar__panel-head .thaum-toggle {
  pointer-events: auto;
  /* 토글은 언제나 오른쪽 끝. space-between 은 라벨이 감춰진 펼침 상태에서
     자식이 하나뿐이라 왼쪽으로 붙어 버린다 — 남는 자리를 여백이 먹게 한다. */
  margin-left: auto;
}
.thaum-bar__panel--comments {
  /* 접었을 때 남는 이름(필터 이름 / 지금 보고 있는 페이지 이름 / 댓글 수).
     펼친 상태에서는 감춘다 — 판 안에 같은 말이 이미 있어서 두 번 읽힌다.
     크기는 판 안의 라벨·탭과 같은 급이라 접고 펴도 글자가 튀지 않는다. */
}
.thaum-bar__panel--comments .thaum-bar__panel-label {
  display: none;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}
.thaum-bar__panel--comments .thaum-toggle {
  --toggle-size: var(--panel-toggle);
  --toggle-line: 11px;
}
.thaum-bar__panel--comments {
  /* 접히는 부분. 칸(center·right)이 여럿이라 하나로 묶어야 한 번에 여닫힌다.
     내용이 길면(facet 이 서넛인 바, 댓글이 여럿인 글) 판이 화면을 다 먹으므로
     상한을 두고 넘치는 만큼은 판 안에서 굴린다. */
}
.thaum-bar__panel--comments .thaum-bar__panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 내용이 토글 밑으로 파고들지 않게 오른쪽을 비운다. 흐름 밖으로 뺀 요소라
     자리를 스스로 만들지 못한다. 8px 은 토글과의 간격. */
  padding-right: calc(var(--panel-toggle) + 8px);
  max-height: 50vh;
  overflow-y: auto;
  opacity: 1;
  transition: max-height var(--thaum-collapse-dur) var(--thaum-collapse-ease), opacity var(--thaum-collapse-dur) var(--thaum-collapse-ease);
  /* facet 이 하나뿐인 바의 오른쪽 칸은 자리만 지키는 빈 div 다. 접히는 칸
     안에서 gap 만 벌리므로 접는다. (칸이 flex 라 UA 기본값으로는 안 사라진다.) */
}
.thaum-bar__panel--comments .thaum-bar__panel-body > :empty {
  display: none;
}
.thaum-bar__panel--comments {
  /* 접힘. 분야 바와 같은 방식이다 — 높이를 0 으로 눌러 접고, 껍데기의 gap 도
     같이 지워 토글 줄만 남긴다. 전역 box-sizing: border-box 라 max-height: 0 이면
     안쪽 여백까지 눌린다. */
}
.thaum-bar__panel--comments.is-collapsed .thaum-bar__panel-label:not(:empty) {
  display: block;
}
.thaum-bar__panel--comments.is-collapsed .thaum-bar__panel-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height var(--thaum-collapse-dur) var(--thaum-collapse-ease), opacity var(--thaum-collapse-dur) var(--thaum-collapse-ease);
}
.thaum-bar__panel--comments.is-collapsed .thaum-bar__panel-inner {
  gap: 0;
  cursor: pointer;
}

.thaum-bar__panel--comments {
  /* 판이 이미 상자다. 섹션이 자기 선과 위 여백을 또 가지면 판 안에 상자가
     한 겹 더 생긴다. */
}
.thaum-bar__panel--comments .thaum-comments {
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}
.thaum-bar__panel--comments {
  /* 토글이 비켜 앉을 자리는 첫 줄만 내면 된다. 판 공통값은 접히는 부분 전체를
     비우는데(_bar.scss), 칩 목록과 달리 여기는 그 아래로 댓글과 입력 상자가
     길게 이어져서 통째로 30px 좁아진다. */
}
.thaum-bar__panel--comments .thaum-bar__panel-body {
  padding-right: 0;
}
.thaum-bar__panel--comments {
  /* 섹션 제목 "댓글 N". 판의 첫 줄이라 토글과 한 행에 선다.
     접었을 때 남는 이름(.thaum-bar__panel-label)과 같은 값이다 — 접고 펴도
     같은 자리에서 같은 글자가 읽혀야 한 물건으로 보인다. */
}
.thaum-bar__panel--comments .thaum-comments__title,
.thaum-bar__panel--comments .thaum-comments__title-count {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
}
.thaum-bar__panel--comments .thaum-comments__title {
  padding-right: calc(var(--panel-toggle) + 8px);
}
.thaum-bar__panel--comments .thaum-comments__empty {
  font-size: 0.8125rem;
}
.thaum-bar__panel--comments .thaum-comments__item {
  gap: 3px;
  padding: 8px 0;
}
.thaum-bar__panel--comments .thaum-comments__meta {
  gap: 6px;
  font-size: 0.75rem;
}
.thaum-bar__panel--comments {
  /* 한 줄 안의 조각들은 줄이 정한 크기를 물려받는다. 굵기는 되받아야 한다 —
     기본값이 900 을 !important 로 박아둬서 상속이 도착하지 않는다. */
}
.thaum-bar__panel--comments .thaum-comments__author,
.thaum-bar__panel--comments .thaum-comments__post {
  font-size: inherit;
  font-weight: 600 !important;
}
.thaum-bar__panel--comments {
  /* 댓글 본문. 판 안에서 가장 많이 읽히는 글이라 라벨 급을 쓰고, 굵기는
     한 단 내려 라벨·제목과 층을 가른다(위와 같은 이유로 !important). */
}
.thaum-bar__panel--comments .thaum-comments__body {
  font-size: 0.8125rem;
  font-weight: 500 !important;
  line-height: 1.5;
  color: #000;
}
.thaum-bar__panel--comments .thaum-comments__tool,
.thaum-bar__panel--comments .thaum-comments__login,
.thaum-bar__panel--comments .thaum-comments__errors li {
  font-size: 0.75rem;
  font-weight: 500 !important;
  color: #000;
}
.thaum-bar__panel--comments .thaum-comments__tools {
  gap: 6px;
}
.thaum-bar__panel--comments {
  /* 판 위에서는 한 톤 진한 회색으로. 바깥의 #e6e6e6 은 흰 배경에서 떠 보이라고
     고른 값인데, 판 자신이 회색(#f2f2f2)이라 여기서는 거의 묻힌다 — 필터 칩이
     같은 판 위에서 쓰는 값과 같다(_bar.scss). */
}
.thaum-bar__panel--comments .thaum-comments__tool {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #e6e6e6;
  color: #000;
  line-height: 1.4;
  text-decoration: none;
  background-color: #d0d0d0;
}
.thaum-bar__panel--comments {
  /* 검게 채우는 수정은 판 위에서도 그대로다. 배경도 글자색도 여기 다시 적는다 —
     바로 위 두 규칙이 클래스 둘이라, 클래스 하나짜리 값으로는 밀린다. */
}
.thaum-bar__panel--comments .thaum-comments__tool--edit {
  background-color: #000;
  color: #fff;
}
.thaum-bar__panel--comments .thaum-comments__tool--edit:hover, .thaum-bar__panel--comments .thaum-comments__tool--edit:focus-visible {
  color: #fff;
}
.thaum-bar__panel--comments .thaum-comments__errors {
  padding: 6px 10px 6px 24px;
}
.thaum-bar__panel--comments {
  /* 쓰기 폼. 판 위에 얹히는 입력이라 필터 칩과 같은 어법으로 — 선 대신 면,
     4px 모서리. 세 줄짜리 textarea 는 판 높이의 절반을 먹으므로 줄 간격까지
     줄여 두 줄 남짓으로 앉힌다. */
}
.thaum-bar__panel--comments .thaum-comments__form {
  gap: 6px;
}
.thaum-bar__panel--comments .thaum-comments__form textarea {
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.4;
}
.thaum-bar__panel--comments .thaum-comments__submit {
  padding: 3px 10px;
  border: 0;
  border-radius: 4px;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.4;
}

/* ── 넓은 화면: 판이 아래에 붙었다가 흘러간다 ───────────────
   좁은 화면에서 판은 화면 아래에 고정이다(position: fixed — _bar.scss).
   여기서는 그렇게 두지 않는다. 칸이 가로로 나뉘어 있어 판이 화면에 못박히면
   오른쪽 칸의 글을 끝까지 덮고, 페이지가 끝나도 그 자리에 남는다.

   sticky 는 흐름 안에 있으면서 화면 아래에 붙는다 — 글을 읽는 동안에는 화면
   아래끝에 머물다가, 제 차례(칸의 맨 끝)에 닿으면 붙기를 그만두고 문서와 함께
   올라간다. 그 자리가 곧 푸터 직전이라, 푸터가 올라오면 판도 같이 흘러간다.

   기준점은 상세 페이지의 오른쪽 칸이다. 붙어 있는 범위도 그 칸 안이므로,
   칸이 끝나면 판도 따라 끝난다 — 따로 계산할 값이 없다.
   ───────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .thaum-bar__panel--comments {
    position: sticky;
    bottom: 0;
    /* 같은 칸 안의 글 위로 지나간다. 전역 `* { position: relative }` 때문에
       본문 덩어리도 위치 지정 요소라, 겹치는 동안 앞에 서려면 한 겹 올려야 한다.
       (판은 칸의 마지막 자식이라 그리는 순서로도 위지만, 못박아 둔다.) */
    z-index: 2;
    /* 좌우 여백은 거둔다. 화면 가장자리에서 띄우려던 값인데(공통 믹스인),
       여기서는 판이 칸 안에 있어 그 칸의 글줄과 좌우 끝이 맞아야 한다.
       아래만 띄워 화면 바닥에 딱 붙지 않게 한다. */
    padding: 0 0 20px;
  }
  /* 배경 mesh 도 이 폭에 맞춘다.
     기본값(--compact)은 손바닥만 한 판, 즉 폭 400px 안팎을 기준으로 잡은 것이라
     700px 가까이 되는 이 판에서는 덩이 사이가 허옇게 비어 듬성듬성해 보인다.
     덩이를 열둘로 늘리고(마크업은 늘 열둘을 내보낸다 — 감춰둔 일곱째부터를
     여기서 켠다) 크기도 한 급 올린다. 흐림은 크기를 따라간다 — 덩이가 커지면
     같은 블러로는 윤곽이 또렷해져 색판 여섯 개처럼 보인다.
     자리·주기는 _mesh.scss 가 이미 갖고 있다. */
  .thaum-bar__panel--comments .thaum-mesh {
    --mesh-unit: 4px;
    --mesh-blur: 26px;
  }
  .thaum-bar__panel--comments .thaum-mesh span:nth-child(n+7) {
    display: block;
  }
}
/* 검색 결과 (SearchWP) 목록.

   카드는 News·Now 아카이브 카드와 같은 물건이라, 목록 격자·카드 상자·제목·아래
   라벨은 그쪽 선택자에 .search-* 를 얹어 함께 쓴다(_archive-list.scss 의
   "Now · News" 절). 좁은 화면 규칙(종횡비 해제, 제목 한 급 낮추기, 호버 끄기)도
   그 김에 그대로 따라온다.

   예전에는 값을 여기 다시 적어 뒀었다 — style.scss 를 컴파일하지 못하는 서버에서
   styles/compile-css.py 로 이 파일만 style.css 에 펼쳐 넣던 시절의 사정이다.
   지금은 style.scss 가 이 파일을 @import 하므로 그럴 이유가 없다.

   여기 남는 건 검색 결과에만 있는 것들이다.
   ───────────────────────────────────────────────────────── */
/* 아래 라벨. 크기·색은 News 의 유형 이름과 같은 규칙이 잡는다.
   심볼이 옆에 앉지 않으므로 폭은 물리지 않는다(News 는 max-width: 80%) —
   긴 이름(Readers Club)도 한 줄로 두고 싶어서, 넘칠 때만 줄이 나뉜다. */
.search-card__type {
  display: block;
}

/* 결과가 없을 때. 목록 자리에 한 줄만 남는다. */
.search-empty {
  padding: var(--ep-margin) 0 calc(var(--ep-margin) * 3);
  font-size: 1.3125rem;
  font-weight: 600;
}
@media (max-width: 1024px) {
  .search-empty {
    font-size: 1rem;
  }
}

/* ── 페이지네이션 ────────────────────────────────────────
   FacetWP 페이저(_archive-list.scss)와 같은 모양이다. 마크업만 워드프레스
   기본 paginate_links() 의 .page-numbers 라 규칙을 따로 둔다.
   ───────────────────────────────────────────────────────── */
.search-pagination {
  display: flex;
  justify-content: center;
  padding: var(--ep-margin) 0 calc(var(--ep-margin) * 3);
}
.search-pagination .search-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.search-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #000;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: #000;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.search-pagination a.page-numbers:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: #000;
}
.search-pagination .page-numbers.current {
  background-color: #000;
  color: #fff;
  cursor: default;
}
.search-pagination .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
  cursor: default;
  opacity: 0.4;
}
.search-pagination {
  /* 손가락에는 호버가 없다. 탭한 자리에 회색이 남아 지금 보고 있는 쪽처럼
     읽히므로 되돌린다 — 아카이브 페이저와 같은 처리(_archive-list.scss). */
}
@media (max-width: 1024px) {
  .search-pagination a.page-numbers:hover {
    background-color: transparent;
  }
  .search-pagination .page-numbers.current:hover {
    background-color: #000;
    color: #fff;
  }
}

/* ── Main Project (About 하위 페이지) ───────────────────────
   About 과 같은 12분할 위에 앉지만, 가운데·오른쪽 칸의 쓰임이 다르다.

     [1-3]   국문/영문 토글  — About 과 같은 물건(.toggle-lang--bar)
     [3-13]  리드 문구       — 가운데+오른쪽 칸을 통으로 쓴다
     [3-8]   목차(sticky)    — 오른쪽 본문의 h2 를 훑는다
     [8-13]  본문            — 스크롤은 페이지 전체가 한다

   <div class="thaum-bar no-border contents main-project">
     <div class="toggle-lang--bar thaum-bar__left"> Kr / En </div>

     <div class="thaum-bar__center main-project__lead" id="kr"> … </div>
     <div class="thaum-bar__center main-project__toc"  id="kr">[print_toc …]</div>
     <div class="thaum-bar__right main-project__body main-project__body--kr" id="kr"> … </div>

     … 영문도 같은 순서로 한 벌 더 (id="en") …
   </div>

   칸이 국문·영문 두 벌이고 토글이 한쪽만 남긴다(script.js 의 LangToggle).
   마크업을 언어별로 묶어두는 게 요점이다 — 한 벌이 통째로 display:none 이면
   남은 벌이 그대로 1행(리드) 2행(목차+본문)에 앉는다. 언어끼리 번갈아 두면
   자동 배치가 어긋나 빈 줄이 생긴다.

   목차와 본문이 같은 행에 있어야 목차가 붙어 있을 수 있다. sticky 는 자기
   그리드 영역 안에서만 움직이는데, 그 영역의 높이를 옆칸 본문이 만들어 준다.
   ───────────────────────────────────────────────────────── */
.thaum-bar.main-project {
  --mp-sticky-top: calc(var(--ep-headerBottom, var(--ep-headerH)) + var(--ep-margin));
  --mp-text-size: 1.5dvw;
  --mp-desc-size: 1.3125rem;
  row-gap: calc(var(--ep-margin) * 3);
}
.thaum-bar.main-project .main-project__lead {
  grid-column: 3/13;
  margin-top: -10px;
}
.thaum-bar.main-project .main-project__lead p {
  font-size: var(--mp-text-size);
  font-weight: 900;
  line-height: 1.4;
  margin: 0;
  color: #545454;
}
.thaum-bar.main-project .main-project__toc {
  position: sticky;
  top: var(--mp-sticky-top);
  align-self: start;
}
.thaum-bar.main-project .main-project__toc .thaum-toc {
  --toc-row-gap: var(--ep-margin);
  --toc-shift: 0px;
}
.thaum-bar.main-project .main-project__toc .thaum-toc__link {
  font-size: var(--mp-text-size);
  font-weight: 900;
  line-height: 1.2;
  opacity: 0.22;
  color: #545454;
}
.thaum-bar.main-project .main-project__toc .thaum-toc__link:hover,
.thaum-bar.main-project .main-project__toc .thaum-toc__link:focus-visible {
  opacity: 1;
}
.thaum-bar.main-project .main-project__toc .thaum-toc__item.is-active > .thaum-toc__link {
  opacity: 1;
}
.thaum-bar.main-project .main-project__toc .thaum-toc__item.is-active > .thaum-toc__link::after {
  content: " →";
  margin-left: 0.2em;
}
.thaum-bar.main-project .thaum-bar__right.main-project__body {
  gap: calc(var(--ep-margin) * 3);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.thaum-bar.main-project .main-project__toc.is-stuck ~ .thaum-bar__right.main-project__body {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .thaum-bar.main-project .thaum-bar__right.main-project__body {
    transition: none;
  }
}
.thaum-bar.main-project .thaum-bar__right.main-project__body p {
  font-size: var(--mp-text-size);
  line-height: 1.4;
  margin: 0;
}
.thaum-bar.main-project .main-project__section {
  display: flex;
  flex-direction: column;
  gap: var(--ep-margin);
}
.thaum-bar.main-project .main-project__section > p {
  font-size: 2rem !important;
  font-weight: 900;
  line-height: 1.4;
  color: #545454;
}
.thaum-bar.main-project .main-project__section h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.thaum-bar.main-project .main-project__box {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: #5c5c5c;
  color: #fff;
  padding: var(--ep-margin);
}
.thaum-bar.main-project .main-project__box h3, .thaum-bar.main-project .main-project__box p {
  font-size: 2rem !important;
  font-weight: 900;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
@media (max-width: 1024px) {
  .thaum-bar.main-project {
    /* 글자 급은 사이트의 모바일 규칙을 따른다 — 큰 글자 1.125rem, 본문 1rem.
       1.5dvw 는 폭을 따라가는 값이라 좁은 화면에서 본문으로 읽기엔 너무 작다.
       여기서는 폭 추종을 그만두고 못박은 값으로 넘어간다. */
    --mp-text-size: 1rem;
    --mp-desc-size: 1.125rem;
    row-gap: calc(var(--ep-margin) * 2);
  }
  .thaum-bar.main-project .main-project__lead {
    grid-column: 1/7;
  }
  .thaum-bar.main-project .main-project__lead p {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
  }
  .thaum-bar.main-project .main-project__section > p,
  .thaum-bar.main-project .main-project__box h3 {
    font-size: 1rem !important;
    font-weight: 800;
  }
  .thaum-bar.main-project .main-project__box p {
    font-size: 1rem !important;
    font-weight: 800;
  }
  .thaum-bar.main-project {
    /* ── 목차 ──────────────────────────────────────────
       좁은 화면에서는 목차를 걷어내고, 대신 섹션 제목을 본문에 되살린다.

       PC 는 [목차][본문]이 나란히 서서 목차가 곧 이 페이지의 표제 노릇을
       한다. 칸이 세로로 쌓이면 그 관계가 깨진다 — 목차는 맨 위 한 번
       지나가고 마는 목록이 되고, 정작 본문에는 섹션을 가르는 표시가
       하나도 없다(제목을 목차에만 두느라 본문에서 숨겨 놨다).

       그래서 자리를 맞바꾼다. 마크업은 그대로다 — 목차 껍데기는 남겨두고
       보이기만 감춘다(script.js 의 Toc 가 헤딩을 훑어 채우는 동작과
       .thaum-toc-target 표시는 그대로 돌아간다). */
  }
  .thaum-bar.main-project .main-project__toc {
    display: none;
  }
  .thaum-bar.main-project {
    /* 숨겨 뒀던 섹션 제목을 되살린다. 위쪽 규칙이 화면에서만 지우는
       방식(absolute + clip-path)이라, 그 값들을 하나씩 되돌린다. */
  }
  .thaum-bar.main-project .main-project__section h2 {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.3;
    color: #000;
  }
  .thaum-bar.main-project .thaum-bar__right.main-project__body {
    opacity: 1;
  }
}

/* ── Location (About 하위 페이지) ────────────────────────────
   About 본문 바(.thaum-bar.contents)의 12분할을 그대로 빌려 쓴다.
   칸의 쓰임만 다르다.

     [1-3]   국문/영문 토글  — About·Main Project 와 같은 물건(.toggle-lang--bar)
     [3-8]   주소·연락처     — 언어별로 한 벌씩
     [8-13]  구글 지도       — 언어를 안 타므로 한 벌뿐이다

   <div class="thaum-bar no-border contents location">
     <div class="toggle-lang--bar thaum-bar__left"> Kr / En </div>
     <div class="thaum-bar__center" id="kr"> 주소 … </div>
     <div class="thaum-bar__center" id="en"> address … </div>
     <div class="thaum-bar__right">[print_location_map]</div>
   </div>

   오른쪽 칸에 id 를 안 붙이는 게 요점이다. 토글(script.js 의 LangToggle)은
   center·right 안의 #kr / #en 만 여닫으므로, id 없는 지도는 어느 쪽에서도
   그대로 남는다. 언어마다 지도를 한 벌씩 두면 감춰진 iframe 도 같이 불려
   지도를 두 번 내려받는다.
   ───────────────────────────────────────────────────────── */
.thaum-bar.location {
  --location-map-ratio: 4 / 3;
  --location-text-size: 1.5rem;
}
.thaum-bar.location .thaum-bar__center,
.thaum-bar.location .thaum-bar__center * {
  font-size: var(--location-text-size);
  font-weight: 900;
  line-height: 1.25;
  color: #545454;
}
@media (max-width: 780px) {
  .thaum-bar.location .thaum-bar__center,
  .thaum-bar.location .thaum-bar__center * {
    font-weight: 800;
  }
}
.thaum-bar.location .thaum-bar__center * {
  margin: 0;
}
.thaum-bar.location .location__block {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.thaum-bar.location .location__block address {
  font-style: normal;
}
.thaum-bar.location .location__block a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.thaum-bar.location .location__map {
  width: 100%;
  aspect-ratio: var(--location-map-ratio);
  background-color: #ebebeb;
}
.thaum-bar.location .location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 1024px) {
  .thaum-bar.location {
    --location-map-ratio: 3 / 2;
    /* 글자 급은 사이트의 모바일 규칙을 따른다 — 큰 글자 1.125rem, 본문 1rem.
       PC 는 제목·주소·연락처가 한 급이지만(위 --location-text-size), 좁은
       화면에서 그 크기를 그대로 두면 주소 한 줄이 화면을 다 먹는다. */
    --location-text-size: 1rem;
    /* 제목만 한 급 위로. 위의 * 규칙이 클래스 셋을 업고 있어서, 태그를
       직접 짚어(클래스 셋 + 요소 하나) 그보다 무겁게 적는다. */
  }
  .thaum-bar.location .thaum-bar__center h4 {
    font-size: 1.125rem;
  }
}
@media (max-width: 480px) {
  .thaum-bar.location {
    --location-map-ratio: 1 / 1;
  }
}

/* ── People (About 하위 페이지) ────────────────────────────
   About 본문 바(.thaum-bar.contents)의 12분할을 그대로 빌려 쓴다.
   다른 소개 페이지와 갈리는 점은 center·right 짝이 여러 번 반복된다는 것뿐이다.

     [1-3]   국문/영문 토글  — About·Location 과 같은 물건(.toggle-lang--bar)
     [3-8]   직책
     [8-13]  그 직책의 사람들 — 한 사람이 [국문][영문] 세로 한 벌

   <div class="thaum-bar no-border contents people">
     <div class="toggle-lang--bar thaum-bar__left"> Kr / En </div>

     <div class="thaum-bar__center people__position">이사장</div>   ← 첫째 줄
     <div class="thaum-bar__right people__names">
       <div class="people__person">
         <p data-lang="kr">홍길동</p>
         <p>Hong Gil-dong</p>
       </div>
     </div>

     <div class="thaum-bar__center people__position">이사</div>     ← 둘째 줄
     <div class="thaum-bar__right people__names"> … </div>
   </div>

   짝을 반복해도 줄이 어긋나지 않는 이유는 바가 grid 이기 때문이다. center(3/8)
   ·right(8/13) 는 칼럼이 못박혀 있어 자동 배치가 짝마다 새 행을 내주고,
   바 기본값이 align-items: start 라 두 칸의 첫 줄이 항상 맞는다. 직책 하나에
   사람이 몇이든 다음 직책은 그 아래에서 다시 나란히 시작한다는 뜻이다.

   영문 이름에는 표식이 없는 게 요점이다. 토글(script.js 의 LangToggle)은
   표식이 붙은 것만 여닫으므로, En 을 골라도 영문 이름은 그대로 남고 국문
   이름(data-lang="kr")만 빠진다 — Kr 은 국·영문 둘 다, En 은 영문만.
   직책도 국문 하나뿐이라 표식 없이 늘 남는다.

   id 가 아니라 data-lang 을 쓰는 것도 같은 이유다. 이름 줄마다 표식이 필요해
   About·Location 처럼 id="kr" 을 쓰면 한 페이지에 수십 개가 겹친다.
   ───────────────────────────────────────────────────────── */
.thaum-bar.people {
  --people-font-size: 1.5rem;
}
@media (max-width: 780px) {
  .thaum-bar.people {
    gap: 10px;
  }
}
.thaum-bar.people .thaum-bar__center, .thaum-bar.people .thaum-bar__right {
  padding: 10px 0 0;
  border-top: 1px solid #545454;
}
@media (max-width: 780px) {
  .thaum-bar.people .thaum-bar__center, .thaum-bar.people .thaum-bar__right {
    border-top: none;
  }
}
.thaum-bar.people .thaum-bar__center p,
.thaum-bar.people .thaum-bar__right p {
  font-size: var(--people-font-size);
  font-weight: 900;
  line-height: 1.2;
  color: #545454;
  margin: 0;
}
@media (max-width: 780px) {
  .thaum-bar.people .thaum-bar__center p,
  .thaum-bar.people .thaum-bar__right p {
    font-weight: 800;
  }
}
.thaum-bar.people .people__person {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ep-margin);
}
@media (max-width: 780px) {
  .thaum-bar.people .people__person {
    padding: 5px 0;
    border-top: solid 1px #545454;
    background-color: #f5f5f5;
  }
  .thaum-bar.people .people__person:last-child {
    border-bottom: solid 1px #545454;
  }
}
.thaum-bar.people .people__names {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ep-margin) / 2);
}
@media (max-width: 780px) {
  .thaum-bar.people .people__names {
    border-top: none;
    padding: 0;
    gap: 0;
  }
}
@media (max-width: 1024px) {
  .thaum-bar.people {
    /* 글자 급은 사이트의 모바일 규칙을 따른다 — 큰 글자 1.125rem, 본문 1rem.
       이름은 본문 급으로 내린다. */
    --people-font-size: 1rem;
    /* 직책은 그 아래 이름들을 묶는 표제다 — 한 급 위에 둬야 어디서 묶음이
       갈리는지 읽힌다. 칸이 세로로 쌓이면서 [직책][이름]이 좌우가 아니라
       위아래로 놓이기 때문에 더 그렇다.
       위 규칙(.thaum-bar__center p)보다 클래스 하나만큼 무겁게 적는다. */
  }
  .thaum-bar.people .thaum-bar__center.people__position p {
    font-size: 1.125rem;
  }
}

/* 중간 폭(1025~1400px)에서 글자 급을 한 단계 내린다. 다른 파일의 값을 같은
   선택자로 되받는 방식이라 반드시 맨 뒤여야 한다. */
/* ── 중간 폭 (1025 ~ 1500px) ────────────────────────────────
   노트북 화면대다. 여기는 아직 PC 판형이다 — 12칼럼 그리드도, 가로로
   나뉜 칸도, PC 헤더도 그대로 서 있다. 그런데 글자만 1920px 화면에서
   정한 값을 쓴다.

   1.3125rem(21px)이 그 값이다. 카드 제목·헤딩·메뉴·검색창까지 이 한
   급으로 묶여 있는데, 폭이 좁아지면 칸도 같이 좁아지므로 같은 글자가
   한 칸에 훨씬 적게 들어간다 — 카드 제목이 두세 줄로 접히고, 12칼럼
   중 두 칸짜리 라벨은 낱말마다 줄이 바뀐다. 칸은 줄었는데 글자는 안
   줄어서 생기는 일이다.

   그래서 이 구간에서만 본문과 같은 급(1rem)으로 내린다. 아래(≤1024px)는
   모바일 판형이 따로 자기 값을 갖고 있으므로 손대지 않는다 — 그쪽은
   큰 글자 1.125rem / 본문 1rem 의 세 급짜리 체계다.

   값을 바꾸는 게 아니라 되받는 방식이다. 원래 규칙은 저마다 제 파일에
   그대로 두고, 여기서 같은 선택자로 한 번 더 적는다(@import 순서상 맨
   뒤라 같은 무게면 이긴다). 원본이 !important 인 자리만 여기서도
   !important 를 되받는다 — 검색창·매거진 라벨·레인보드 제목 셋이다.

   새로 1.3125rem 을 쓰는 자리가 생기면 여기에도 한 줄 더한다.
   ───────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1500px) {
  /* 헤더 — 로고와 메뉴. 이 구간은 아직 PC 헤더다(모바일 헤더는 1024px 아래). */
  header .header--home-logo h1,
  header .menu-container .menu-menu-col-1-container ul li a,
  header .menu-container .menu-menu-col-2-container ul li a,
  header .menu-container .menu-menu-col-3-container ul li a {
    font-size: 1rem;
  }
  .thaum-footer__nav-link {
    font-size: 1rem;
  }
  /* 아카이브 카드 제목. 목록끼리 나란히 놓였을 때 한 크기로 읽혀야 하므로
     아카이브가 달라도 같이 내린다. */
  .rc-card__title,
  .mg-card__title,
  .now-card__title,
  .news-card__title,
  .search-card__title,
  .tqs-card__title,
  .mv-card__title {
    font-size: 1rem;
  }
  .search-empty {
    font-size: 1rem;
  }
  form#searchwp-form-1 input.swp-input,
  form#searchwp-form-1 input.swp-input--search {
    font-size: 1rem !important;
  }
  .thaum-bar.contents .toggle-lang--bar p,
  .thaum-bar.contents h4 {
    font-size: 1rem;
  }
  /* Main Project 는 크기를 변수로 넘긴다(--mp-desc-size). 값만 갈아끼운다 —
     이 변수를 보는 자리가 여럿이라 하나씩 되받을 이유가 없다. */
  .thaum-bar.main-project {
    --mp-desc-size: 1rem;
  }
  .thaum-grid__heading,
  .thaum-grid__text h3,
  .thaum-grid__text h4 {
    font-size: 1rem;
  }
  .now-single__link,
  .movement-single__contents h1,
  .movement-single__contents h2 {
    font-size: 1rem;
  }
  .tqs-single__ticket,
  .tqs-single__faq-title,
  .tqs-single__faq-q,
  .tqs-single__faq-a p {
    font-size: 1rem;
  }
  .magazine-single__label {
    font-size: 1rem !important;
  }
  .magazine-single__related-link {
    font-size: 1rem;
  }
  #thaum-scopes .thaum-scopes-head p {
    font-size: 1rem;
  }
  .tq-flip__title {
    font-size: 1rem;
  }
  .rainboard-wrapper.rainboard-custom #rainboard-read-table div.title-section h1.rainboard-read-h1 {
    font-size: 1rem !important;
  }
}
/* ----- Custom Styles End ----- */