/* 브랜다이브 Lab 사이트 v5 · 메뉴 아티클·프로젝트·소개 · 홈 탭 없앰(섹션) · 2026-10-27 시안
   v5: 주소를 폴더형(/articles/ /projects/ /about/)으로 나눴다. 홈 탭(5절)을 지우고 카드 섹션·아티클 상세 규칙으로 바꿨다. v4c 보관본: prototype/_v4c/.
   v4c: v4b의 구조(표지 카드 격자·분류 탭·움직임)를 그대로 두고 바탕을 흰색(tokens.css 3절 라이트 별칭)으로 바꿨다.
   진한 면은 두 자리: 모든 쪽 바닥(단색 --bg-strong)과 소개 머리(진한 띠 --grad-1 + 흰 낱알). 위 글자·링크·포커스 링은 흰색.
   홈·상세 머리는 띠 없이 흰 바탕(옅은 띠를 두면 상세 머리 표지가 띠 위의 면이 되고, 홈은 띠 바로 아래 회색 표지 열 장과 면이 세 겹으로 쌓인다).
   v4b 보관본: prototype/_v4b/. 아래 v4b 설명 중 "숯"은 다크 별칭(보관)일 때의 값이다.
   tokens.css 의 변수만 쓴다. 색 값(hex)·그림자·곡선·지속 시간 숫자는 이 파일에 적지 않는다.
   해석 근거: docs/reference/reinterpretation.md ("v4b" 절. 무채색 다크 + 표지 카드 격자 + 분류 탭 = 기사 매체형 참고 사이트의 인상,
   움직임 = 실험형 참고 사이트). 원 사이트의 사진·문구·로고·강조색·클래스 이름·색 값은 쓰지 않는다.
   화면 조립 기준(v3 유지): 마진 20 한 값, 12열(1024 이상, 거터 28) / 8열(600~1023, 거터 16) / 4열(600 미만, 거터 16).
   세로 리듬: 그룹 안 4·8 < 섹션 제목→콘텐츠 16 < 그룹 사이 48(모바일 32) < 섹션 사이 96(모바일 64).
   선: 목록·표 가로 구분선, 섹션 경계선, 머리 메뉴 끝선, 포커스 링, 인풋 라인, 메뉴 밑줄만. 1px(포커스 링 2px).
   면: 표지(카드의 위 면, --bg-cover)·코드 묶음·도식 칸(--bg-subtle)·아티클 썸네일 자리(.thumb, 분류색)·아티클 용어 상자(.term-box)·핵심 요약 칸(.summary-list > li)만. 테두리·그림자 없음, 카드 속 카드 없음.
   그라데이션·질감: 소개 머리(.about-head) 한 곳. 그 밖의 선택자 0곳(brand-guide 4절).
   심청: 버튼 바탕·포커스 링·링크 글자(700, 흰 바탕에서만). 라임: <mark>(형광펜)와 글자 선택 영역에서만, 한 쪽 두 곳 이하.
   예외(C5): 아티클 썸네일 분류색 면(라임 200·심청 900 포함)은 그림 배경이다.
   움직임: 표지 면 한 단 바뀜·제목 글자색·화살표 밀림·메뉴 밑줄 그리기·격자 순차 등장·읽은 만큼 막대(상세).
   움직임 줄이기 설정이면 전환과 등장을 끈다. 그림: 홈·프로젝트 표지는 글자만. 아티클 썸네일(.thumb)은 3:2 그림 자리이고 그림 파일이 생기기 전에는 분류색 면만 보인다. */

/* 1. 기본 ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-page);
}

/* 바닥이 짧은 쪽에서도 화면 아래 끝에 붙게: 본문이 남는 높이를 채운다 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg-page);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-ko);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 어두운 바탕 위 밝은 글자는 회색 계조 안티에일리어싱으로 그린다(번져 굵어 보이는 것을 줄인다) */
[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote, pre { margin: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--text-1); text-wrap: balance; }
p, li { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }
main { flex: 1 0 auto; }

a {
  color: var(--link-color);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
  transition: color var(--dur-1) ease;
}
a:hover { text-decoration-thickness: var(--link-underline-hover); }

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 형광펜: 사람이 직접 정한 구절. 면 + 잉크 글자. 줄이 바뀌어도 칸이 끊기지 않게 clone */
mark {
  padding-inline: var(--sp-1);
  background: var(--mark);
  color: var(--text-on-point);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 방문자가 칠하는 선택 영역도 같은 형광펜 */
::selection {
  background: var(--selection);
  color: var(--text-on-point);
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--page-margin);
  top: var(--sp-2);
  z-index: 30;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-m);
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* 컨테이너는 한 가지 방식만: 최대 1320, 안쪽 마진 20 */
.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

/* 섹션 경계선: 공간을 차지하지 않는 1px 선. 섹션 사이 간격은 위아래 여백만으로 정해진다 */
.sec,
.subscribe,
.next { position: relative; }
.sec::before,
.subscribe::before,
.next::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-1);
}

/* 2. 머리 메뉴 ------------------------------------------------------- */

.gnb {
  background: var(--bg-page);
  border-bottom: 1px solid var(--line-1);
}

/* 글자를 키워 한 줄에 안 들어가면 메뉴가 다음 줄 오른쪽으로 내려간다(가로 스크롤 없음) */
.gnb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--sp-4);
  min-height: var(--gnb-h);
}

/* 워드마크: 다이빙 i 단색 로고(docs/brand/logo/final, 2026-10-27 확정).
   SVG를 HTML 안에 넣고(머리 메뉴에 symbol 정의, 바닥은 같은 symbol 을 use) 칠을 currentColor 로 둔다.
   흰 바탕은 잉크(--text-1), 진한 면(바닥)은 흰색(--text-on-brand). 이름은 링크의 aria-label·숨긴 글자가 읽는다.
   v4c 이전의 CSS 마스크(url 로 외부 SVG)는 쪽을 파일로 직접 열면 마스크 그림을 못 읽어 로고가 통째로 사라졌다 */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-1);
  text-decoration: none;
}
.logo-mark {
  display: block;
  height: 28px;
  width: auto;
  aspect-ratio: 2102 / 617;
  fill: currentColor;
}
.logo-mark--sm { height: 20px; }

/* 마지막 메뉴의 오른쪽 안쪽 여백(12)만큼 바깥으로 빼서 글자 끝 = 콘텐츠 오른쪽 끝. 누름 영역 44는 그대로 */
.gnb-menu {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-1);
  margin-right: calc(-1 * var(--sp-3));
}
.gnb-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--sp-3);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
  text-decoration: none;
}
/* 메뉴 밑줄: 왼쪽에서 오른쪽으로 그린다. 지금 쪽은 그려진 채로 둔다 */
.gnb-menu a::before {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-2);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}
.gnb-menu a:hover,
.gnb-menu a[aria-current] { color: var(--text-1); }
.gnb-menu a:hover::before,
.gnb-menu a[aria-current]::before { transform: scaleX(1); }

/* 3. 페이지 머리: 홈·상세·404 는 흰 바탕(띠 없음), 소개는 진한 띠 ---------------------- */

.page-head {
  background: var(--bg-page);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

/* 진한 띠: 소개 머리 한 곳. 심청 900 → 700(--grad-1) 위에 흰 낱알(--band-grain-dark) 한 겹. 위 글자는 흰색만(brand-guide 4.5) */
.about-head {
  background-color: var(--bg-strong);
  background-image: var(--band-grain-dark), var(--grad-1);
  color: var(--text-on-brand);
}
.about-head .detail-title { color: var(--text-on-brand); }

/* 진한 면(소개 머리·바닥) 위 링크·포커스: 흰 글자 + 밑줄, 흰 포커스 링. 라임·청록·연청 글자·선·빛 금지 */
.about-head a,
.footer a { color: var(--link-on-dark); }
.about-head :focus-visible,
.footer :focus-visible { outline-color: var(--focus-ring-on-dark); }

.home-title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-semibold);
}

.home-lead {
  margin-top: var(--sp-4);
  color: var(--text-on-band-2);
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--text-link);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* 상세 머리: 표지 → 메타·제목·리드. 600 이상에서는 표지(왼쪽)와 글(오른쪽, 아래 끝 맞춤)을 나란히 */
.detail-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-4);
}
.detail-head-text { align-self: end; }

.detail-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
}
.row-meta + .detail-title { margin-top: var(--sp-2); }

.detail-lead {
  margin-top: var(--sp-2);
  color: var(--text-2);
}
.about-head .detail-lead,
.about-lead > p { color: var(--text-on-brand); }

.about-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}
.about-lead > p + p { margin-top: var(--sp-2); }
.about-lead .detail-lead { margin-top: 0; }

.notfound .back-link { margin-top: var(--sp-4); }

/* 메타 한 줄: 상태(흰색 500) · 단계 · 구분. 13px */
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.row-status { color: var(--text-1); font-weight: var(--fw-medium); }

/* 라벨-값 목록: 같은 라벨 칸(7rem)과 칸 사이(16)를 써서 한 쪽 안의 값 시작선이 하나다.
   글자를 크게 키운 좁은 화면에서만 라벨 칸이 행 폭의 40%를 넘지 않게 줄어든다 */
.summary > div,
.talk-facts > div {
  display: grid;
  grid-template-columns: min(7rem, 40%) minmax(0, 1fr);
  column-gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-2);
}
.summary > div:first-child { padding-top: 0; }
.summary > div:last-child { padding-bottom: 0; border-bottom: 0; }
.talk-facts > div:last-child { border-bottom: 0; }
.summary dt,
.talk-facts dt {
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-small);
}
.summary dd,
.talk-facts dd {
  color: var(--text-1);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* 4. 상세 섹션(좌 요약 / 우 내용) ------------------------------------- */

.sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-8);
}
.wrap > .sec:first-child::before { content: none; }
/* 전폭 칸(도식) 앞뒤는 같은 섹션 안 그룹 사이: 칸 사이 16 + 16 = 32(600 이상 16 + 32 = 48) */
.sec > .sec-full,
.sec > .sec-full + .sec-body { margin-top: var(--sp-4); }

.sec-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
}
.sec-summary {
  margin-top: var(--sp-2);
  color: var(--text-2);
}

.sec-body > * + * { margin-top: var(--sp-4); }
.sec-body .sub-title + p,
.sec-body .sub-title + .quote { margin-top: var(--sp-2); }
.sec-body p + .sub-title { margin-top: var(--sp-8); }

.sub-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}

/* 번호 목록·확인 목록은 600 미만에서는 번호·라벨을 글 위에, 600 이상에서는 라벨 칸(7rem) 옆에 둔다 */
.num-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-2);
}
.num-list > li:first-child { border-top: 0; padding-top: 0; }
.num-list > li:last-child { padding-bottom: 0; }
.num {
  color: var(--text-3);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
}

.check-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-2);
}
.check-list > div:first-child { border-top: 0; padding-top: 0; }
.check-list > div:last-child { padding-bottom: 0; }
.check-list dt {
  color: var(--text-1);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
}

/* 5. 카드 섹션(홈·목록): 섹션 제목 → 표지 카드 격자 → 덧붙임·전체 보기 ----------------
   v5: 홈 분류 탭을 없애고 섹션(최근 아티클 · 일하며 정한 기준 · 프로젝트)으로 나눴다. 탭 CSS·JS 는 _v4c/ 에 보관.
   제목 → 격자 16(그룹 안), 격자 → 덧붙임 32(600 이상 48). 전체 보기 링크는 44px 줄을 차지한다 */
.sec.sec-cards { display: block; }
.sec-cards > .sec-title { margin-bottom: var(--sp-4); }
.sec-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--gap-group);
}
.sec-foot .list-note { margin-top: 0; }
.more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-link);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
}


/* 6. 표지 카드 격자 ---------------------------------------------------
   카드 = 표지(면 한 단 위 큰 굵은 글자만) + 제목 + 분류·상태 한 줄. 테두리·그림자·카드 속 카드 없음.
   열: 1024 이상 4열(12열에서 3씩), 1024 미만 2열(8열에서 4씩, 4열에서 2씩). 세로 간격 48(600 미만 32), 가로 = 거터.
   표지 글자 크기·안쪽 여백은 화면 폭이 아니라 표지 폭을 따른다(컨테이너 조건, 토큰 4절 네 단).
   상세가 있는 카드(.card-link)만 제목 링크가 카드 전체를 덮고 hover·누름·초점 반응이 있다. 없는 카드는 반응 없음 */
.cover-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-row-gap) var(--gutter);
}

.card,
.cover-frame {
  position: relative;
  container: card / inline-size;
}
.card { border-radius: var(--radius-m); }

.cover {
  aspect-ratio: var(--cover-ratio);
  padding: var(--sp-4);
  border-radius: var(--radius-m);
  background: var(--bg-cover);
  transition: background-color var(--dur-2) var(--ease-standard);
}
.cover-text {
  color: var(--text-1);
  font-size: var(--fs-cover-4);
  line-height: var(--lh-cover-4);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}
@container card (min-width: 200px) {
  .cover-text { font-size: var(--fs-cover-3); line-height: var(--lh-cover-3); }
}
@container card (min-width: 280px) {
  .cover { padding: var(--sp-6); }
  .cover-text { font-size: var(--fs-cover-2); line-height: var(--lh-cover-2); }
}
@container card (min-width: 400px) {
  .cover-text { font-size: var(--fs-cover-1); line-height: var(--lh-cover-1); }
}

.card-title {
  margin-top: var(--cover-gap);
  color: var(--text-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  transition: color var(--dur-1) ease;
}
.card-title a {
  color: inherit;
  text-decoration: none;
}
/* 카드 전체가 누름 영역 */
.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card-title a:focus-visible { outline: none; }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
  margin-top: var(--sp-1);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.card-meta { justify-content: space-between; }
.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
}
.meta-list > .meta-item + .meta-item::before {
  content: "·";
  margin-right: var(--sp-2);
}
/* 상세가 있는 카드만 끝에 화살표. hover 때 4px 밀린다(밀린 뒤에도 카드 폭 안) */
.card-go {
  margin-right: var(--sp-1);
  color: var(--text-1);
  transition: transform var(--dur-2) var(--ease-standard);
}

.card-link:hover .cover,
.card-link:has(.card-title a:focus-visible) .cover { background: var(--bg-cover-hover); }
.card-link:active .cover { background: var(--bg-cover-pressed); }
.card-link:hover .card-title,
.card-link:has(.card-title a:focus-visible) .card-title { color: var(--text-1); }
.card-link:hover .card-go { transform: translateX(var(--nudge-x)); }
.card-link:has(.card-title a:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
@supports not selector(:has(*)) {
  .card-title a:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
}

.list-note {
  margin-top: var(--gap-group);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* 상세 머리 표지: 600 미만은 가로 2:1 띠, 600 이상은 홈과 같은 세로 4:5 */
.detail-head .cover { aspect-ratio: var(--cover-ratio-wide); }

/* 6-2. 아티클 목록·상세 (C4·C5) -------------------------------------------------
   목록 카드는 .cover-grid/.card/.cover(프로젝트·홈·"이어서 볼 프로젝트")와 따로 둔다. 그쪽 규칙은 건드리지 않는다.
   카드 = 3:2 썸네일 → 분류·날짜 → 제목(링크가 카드 전체를 덮음) → 요약. 테두리·그림자 없음.
   목록 모양은 글 편수를 따라 CSS 가 스스로 바꾼다(C5, JS 없음):
     1~2편: 600 이상 2열 큰 카드(제목 24, 요약 줄 제한 없음)
     3편 이상: 600~1023 2열, 1024 이상 3열
     6편 이상: HTML 에서 분류 메뉴·대표 글의 hidden 을 지운다(대표 글 = 가장 최근 글, 격자에서는 뺀다).
   썸네일 배경 = 분류색(tokens.css --thumb-*). 그림 배경과 같은 값이라 그림이 늦게 떠도 같은 색 면이 먼저 보인다. */
.thumb {
  --thumb-bg: var(--bg-cover);
  aspect-ratio: var(--thumb-ratio);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--thumb-bg);
}
.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-thumb) var(--ease-standard);
}
.thumb--video   { --thumb-bg: var(--thumb-video); }
.thumb--writing { --thumb-bg: var(--thumb-writing); }
.thumb--design  { --thumb-bg: var(--thumb-design); }
.thumb--make    { --thumb-bg: var(--thumb-make); }

/* 목록 머리: 제목 → 소개 → 편수 한 줄. 머리 아래 여백은 빼고 격자 섹션 여백(32 / 48)만 둔다 */
.page-head.list-head { padding-bottom: 0; }
.list-count {
  margin-top: var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-row-gap) var(--gutter);
}
.article-card {
  position: relative;
  border-radius: var(--radius-m);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--sp-2);
  margin-top: var(--cover-gap);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
/* 분류 이름은 진한 글자, 날짜는 회색 */
.meta-cat { color: var(--text-1); font-weight: var(--fw-semibold); }
.article-title {
  margin-top: var(--sp-2);
  color: var(--text-1);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}
.article-title a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
.article-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.article-title a:focus-visible { outline: none; }
.article-summary {
  margin-top: var(--sp-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.article-go {
  margin-right: var(--sp-1);
  color: var(--text-1);
  transition: transform var(--dur-2) var(--ease-standard);
}
/* hover: 그림이 3% 다가오고, 제목에 밑줄, 화살표가 4px 밀린다 */
.article-card:not(.article-card--soon):hover .thumb img { transform: scale(var(--thumb-zoom)); }
.article-card:hover .article-title a,
.article-title a:focus-visible { text-decoration-line: underline; }
.article-card:hover .article-go { transform: translateX(var(--nudge-x)); }
.article-card:has(.article-title a:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
@supports not selector(:has(*)) {
  .article-title a:focus-visible {
    outline: var(--focus-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }
}
/* 준비 중 카드: 링크·hover 없음. 상세 페이지가 생기면 이 클래스를 빼고 제목을 링크로 감싼다 */
.article-card--soon .article-title { color: var(--text-2); }
.soon-label { color: var(--text-3); }

/* 분류 메뉴·대표 글: 글이 6편 이상일 때만 켠다(HTML 의 hidden 을 지운다) */
.article-filter { margin-bottom: var(--sp-8); }
.article-filter ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-6); }
.article-filter a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--text-3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-small);
  text-decoration: none;
}
.article-filter a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-2);
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}
.article-filter a:hover,
.article-filter a[aria-current] { color: var(--text-1); }
.article-filter a:hover::before,
.article-filter a[aria-current]::before { transform: scaleX(1); }

.article-feature { margin-bottom: var(--gap-group); }
.article-card--feature { display: grid; gap: var(--cover-gap); }
.article-card--feature .article-meta { margin-top: 0; justify-content: flex-start; }
.article-card--feature .article-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
.article-card--feature .article-summary {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* 아티클 상세 머리: 600 미만·600~1023 은 그림 → 분류·제목·요약 순으로 쌓고,
   1024 이상은 12열에서 글 1~6열, 그림 7~12열을 나란히 둔다(C5). 머리와 본문 사이에 섹션 경계선 하나 */
.article-head { padding-bottom: var(--sp-10); }
.article-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-2);
}
.article-head .row-meta { gap: var(--sp-1) var(--sp-3); }
.article-head .meta-cat { color: var(--text-1); font-weight: var(--fw-semibold); }
.article-head .detail-title { text-wrap: balance; }
.article-head .detail-lead { margin-top: var(--sp-4); }

.sec.sec-article {
  display: block;
  border-top: 1px solid var(--line-1);
}

/* 목차: 본문 앞. 1024 이상에서는 왼쪽 3열에 붙어 따라온다 */
.toc { margin-bottom: var(--sp-10); }
.toc-title {
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
}
.toc-list { counter-reset: toc; margin-top: var(--sp-2); }
.toc-list > li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
  border-top: 1px solid var(--line-2);
}
.toc-list > li::before {
  content: counter(toc, decimal-leading-zero);
  padding-top: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.toc-list a {
  display: block;
  min-height: 44px;
  padding-block: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-decoration: none;
  transition: color var(--dur-1) ease;
}
.toc-list a:hover { color: var(--text-1); text-decoration: underline; text-underline-offset: var(--link-underline-offset); }

/* 본문 리듬: 문단 행간 1.75, 문단 사이 20, 질문형 h2 앞 48(600 이상 64). h2 위에 목차와 같은 번호 */
.prose { counter-reset: q; }
.sec-body.prose > * + * { margin-top: var(--sp-5); }
.prose p,
.prose li { line-height: var(--lh-prose); }
.prose > .sub-title {
  counter-increment: q;
  scroll-margin-top: var(--sp-6);
  color: var(--text-1);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.prose > .sub-title::before {
  content: counter(q, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-variant-numeric: tabular-nums;
}
.sec-body.prose > * + .sub-title { margin-top: var(--sp-12); }
.sec-body.prose > .sub-title + * { margin-top: var(--sp-3); }
.num-list strong {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
}
.sec-body.prose > .article-tools { margin-top: var(--sp-8); }

/* 번호 단계 소제목: 순서가 있는 과정에만. h2(.sub-title) 규칙과 겹치지 않게 따로 둔다 */
.sec-body.prose > .step-title {
  margin-top: var(--sp-8);
  color: var(--text-1);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}
.sec-body.prose > .step-title + p { margin-top: var(--sp-2); }

/* 본문 그림·영상(.media): 글만 이어지지 않게 해당 대목 바로 뒤에 둔다. 읽기 폭 전체, 모서리 4, 테두리·그림자 없음.
   영상은 소리 없이 자동 반복(움직임 줄이기 설정이면 site.js 가 멈춘다), 조작 막대로 멈출 수 있다.
   비교(.compare): 왼쪽 밑그림 · 오른쪽 완성, 한 줄에 두 장. 아래 회색 라벨 */
.sec-body.prose > .media { margin-block: var(--sp-8); }
.media video,
.media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  background: var(--bg-cover);
}
.media video { aspect-ratio: 16 / 9; }
.media figcaption {
  margin-top: var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.compare-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.compare-row + .compare-row { margin-top: var(--sp-4); }
.compare-label {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* 용어 상자(회색 면)·핵심 요약 상자(심청 면). 테두리 없이 면으로만 묶는다 */
.term-box {
  padding: var(--sp-6);
  border-radius: var(--radius-m);
  background: var(--bg-cover);
}
.box-label {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
}
.box-title {
  color: var(--text-1);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}
.term-box p { font-size: var(--fs-small); }
.term-box p + p,
.box-title + p { margin-top: var(--sp-2); }

/* 핵심 요약: 바깥 상자 없이 제목 + 번호 칸 격자(인포그래픽형, 사용자 선택 2026-10-27).
   칸 = 회색 면 한 장(큰 번호 → 꼬리표 → 기준 한 줄). 글자는 모두 HTML 이라 검색·AI 답변이 그대로 읽는다(GEO).
   열: 600 미만 1열, 600 이상 2열, 1200 이상 3열(읽기 폭 8열 안) */
.sec-body.prose > .summary-box { margin-top: var(--sp-12); }
.summary-box { scroll-margin-top: var(--sp-6); }
.prose > .summary-box .box-title { counter-increment: q; }
.prose > .summary-box .box-title::before {
  content: counter(q, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
}
.summary-box .box-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
.summary-list {
  counter-reset: sum;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.summary-list > li {
  counter-increment: sum;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border-radius: var(--radius-m);
  background: var(--bg-cover);
}
.summary-list > li::before {
  content: counter(sum, decimal-leading-zero);
  color: var(--text-1);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.sum-tag {
  margin-top: var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
}
.summary-list p {
  margin-top: var(--sp-1);
  color: var(--text-1);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
}

/* 접는 토글(설치 방법 등): 위아래 가로선만. 줄 전체가 누름 영역(48 이상), 오른쪽 + 가 열리면 − 로 */
.fold { border-block: 1px solid var(--line-1); }
.fold + .fold { border-top: 0; }
.fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--btn-h);
  padding-block: var(--sp-3);
  color: var(--text-1);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: "+";
  flex: none;
  color: var(--text-2);
  font-size: var(--fs-h2);
  line-height: 1;
  font-weight: var(--fw-regular);
}
.fold[open] > summary::after { content: "−"; }
.fold > summary:hover { color: var(--text-link); }
.fold > summary:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.fold-body { padding-bottom: var(--sp-6); }
.fold-body > * + * { margin-top: var(--sp-3); }
.fold-body ol { list-style: decimal; padding-left: 1.25em; }
.fold-body li + li { margin-top: var(--sp-2); }
.fold-body pre {
  overflow-x: auto;
  padding: var(--sp-4);
  border-radius: var(--radius-m);
  background: var(--bg-subtle);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

@media (min-width: 600px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 1~2편: 큰 카드 */
  .article-grid:not(:has(> li:nth-child(3))) .article-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }
  .article-grid:not(:has(> li:nth-child(3))) .article-summary {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .article-card--feature {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
  }
  .article-card--feature .thumb { grid-column: 1 / span 4; }
  .article-card--feature .article-body { grid-column: 5 / -1; }
  .article-card--feature .article-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
  /* 1편뿐일 때: 한 장이 전폭 가로 카드(그림 4열 + 글 4열, 1024 이상 7 + 5)가 되어 오른쪽이 비지 않는다 */
  .article-grid > li:only-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: var(--gutter);
  }
  .article-grid > li:only-child > .thumb { grid-column: 1 / span 4; grid-row: 1 / -1; }
  .article-grid > li:only-child > :not(.thumb) { grid-column: 5 / -1; }
  .article-grid > li:only-child > .article-meta { grid-row: 2; margin-top: 0; }
  .article-grid > li:only-child > .article-title { grid-row: 3; }
  .article-grid > li:only-child > .article-summary { grid-row: 4; }
  /* 상세 머리: 600부터 8열에서 글 1~4열, 그림 5~8열로 나란히(제목이 첫 화면에 들어오게) */
  .article-head-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
  }
  .article-head-grid > .thumb { grid-column: 5 / -1; grid-row: 1; }
  .article-head-grid > .article-head-text { grid-column: 1 / span 4; grid-row: 1; }
  .article-head { padding-bottom: var(--sp-12); }
  .page-head.list-head { padding-bottom: 0; }
  .toc { margin-bottom: var(--sp-12); }
  .term-box { padding: var(--sp-8); }
  .summary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-body.prose > * + .sub-title { margin-top: var(--sp-16); }
  .sec-body.prose > .summary-box { margin-top: var(--sp-16); }
  .sec-body.prose > .media { margin-block: var(--sp-10); }
}
@media (min-width: 1024px) {
  .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-grid:not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-card--feature { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .article-card--feature .thumb { grid-column: 1 / span 7; }
  .article-card--feature .article-body { grid-column: 8 / -1; }
  .article-card--feature .article-title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
  .article-grid > li:only-child { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .article-grid > li:only-child > .thumb { grid-column: 1 / span 7; }
  .article-grid > li:only-child > :not(.thumb) { grid-column: 8 / -1; }

  .article-head-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .article-head-grid > .thumb { grid-column: 7 / -1; grid-row: 1; }
  .article-head-grid > .article-head-text { grid-column: 1 / span 6; grid-row: 1; padding-right: var(--gutter); }
  .article-head .detail-title,
  .list-head .detail-title { font-size: var(--fs-display); line-height: var(--lh-display); }

  /* 본문: 목차 1~3열(따라옴), 글 4~11열(8열 = 읽기 폭) */
  .sec.sec-article {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .sec-article > .toc {
    grid-column: 1 / span 3;
    position: sticky;
    top: var(--sp-6);
    max-height: calc(100vh - var(--sp-12));
    overflow-y: auto;
    margin-bottom: 0;
  }
  .sec.sec-article > .prose { grid-column: 4 / span 8; }
}

@media (min-width: 1200px) {
  .summary-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 7. 흐름 띠 도식: 선·화살표 없이 면·번호·크기·톤 ----------------------- */

.dg { container: dg / inline-size; }

.dg-grid {
  display: flex;
  flex-direction: column;
  gap: var(--dg-gap);
}

.dg-step,
.dg-half {
  border-radius: var(--radius-m);
  padding: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.dg-step {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sp-2);
  background: var(--dg-1);
  color: var(--text-1);
}
.dg-step .num {
  color: inherit;
  font-size: var(--fs-body);
}
.dg-note {
  flex-basis: 100%;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.dg-step .dg-note { color: var(--text-2); }

.dg-who {
  flex-basis: 100%;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
}

.dg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dg-gap);
  padding: 0;
  background: none;
}
.dg-split > .dg-split-title {
  grid-column: 1 / -1;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}
.dg-half { background: var(--dg-1); }

.dg-lane { display: none; }

.dg-legend {
  margin-top: var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

@container dg (min-width: 720px) {
  .dg-grid {
    display: grid;
    grid-template-columns: calc(var(--sp-24) + var(--sp-4)) repeat(var(--dg-cols), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--sp-24), auto);
    column-gap: var(--dg-gap);
    row-gap: var(--dg-gap-lane);
  }
  .dg-grid > * {
    grid-row: var(--row);
    grid-column: calc(var(--col) + 1) / span var(--span, 1);
  }
  .dg-grid > .dg-lane {
    display: flex;
    align-items: center;
    grid-column: 1;
    color: var(--text-1);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    font-weight: var(--fw-semibold);
  }
  .dg-step { display: block; }
  .dg-step .num,
  .dg-step .dg-note { display: block; }
  .dg-step .dg-note { margin-top: var(--sp-1); }
  .dg-split { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr 1fr; }
  .dg-split > .dg-split-title { padding-top: 0; color: var(--text-1); }
  .dg-who {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 8. 표 ------------------------------------------------------------ */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
caption {
  padding-bottom: var(--sp-4);
  color: var(--text-1);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  text-align: left;
}
th, td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line-1);
  text-align: left;
  vertical-align: top;
}
th:first-child, td:first-child { padding-left: 0; }
tbody tr:last-child > th,
tbody tr:last-child > td { padding-bottom: 0; border-bottom: 0; }
thead th {
  color: var(--text-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}
tbody th { color: var(--text-1); font-weight: var(--fw-semibold); }

/* 가져갈 것: 복사해 쓰는 코드 묶음(면만, 테두리 없음) */
.code {
  padding: var(--sp-4);
  border-radius: var(--radius-m);
  background: var(--bg-subtle);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-en);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.code code { font: inherit; }

/* 9. 디자인 가이드 발췌(직접 정한 기준 네 가지) ------------------------------- */

.excerpt + .excerpt { margin-top: var(--sp-8); }
.excerpt > * + * { margin-top: var(--sp-2); }
.quote {
  color: var(--text-1);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
}
.excerpt-name { color: var(--text-1); font-weight: var(--fw-semibold); }
.excerpt-from {
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* 10. 소개·연락 ------------------------------------------------------- */

.how-list > li {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-2);
}
.how-list > li:first-child { border-top: 0; padding-top: 0; }
.how-list > li:last-child { padding-bottom: 0; }
.ref-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-link);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.talk + .talk { margin-top: var(--sp-8); }
.talk-sub { margin-top: var(--sp-1); color: var(--text-2); }
.talk-facts { margin-top: var(--sp-4); border-top: 1px solid var(--line-1); }
/* 링크 칸: 링크마다 44px 줄을 차지해 줄이 바뀌어도 누름 영역이 겹치지 않는다 */
.talk-facts .talk-links { margin-block: calc(-1 * var(--sp-3)); }
.talk-facts a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.contact-mail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
}
.contact-mail-label { color: var(--text-3); font-size: var(--fs-caption); }
.contact-mail .mail {
  color: var(--text-1);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}
.contact-note {
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.sec-body .contact-note + .contact-note { margin-top: var(--sp-1); }

/* 11. 다음 기록(홈과 같은 표지 카드 한 장, 격자 한 칸 폭) · 구독(꺼 둠) ------------- */

.next { padding-block: var(--sp-8); }
.next-label {
  padding-bottom: var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* 구독: 자리만 둔다(hidden). 켜는 시점은 따로 정한다 */
.subscribe { padding-block: var(--sp-8); }
.subscribe-desc,
.subscribe-help { margin-top: var(--sp-2); color: var(--text-2); font-size: var(--fs-small); }
.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: calc(var(--sp-24) * 4 + var(--sp-4));
  margin-top: var(--sp-4);
}
.subscribe-form input {
  flex: 1 1 calc(var(--sp-24) * 2);
  min-height: var(--btn-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius-m);
  background: var(--bg-page);
  color: var(--text-1);
  font: inherit;
}
.btn-primary {
  min-width: var(--btn-min-w);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard);
}
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-primary:active { background: var(--btn-primary-bg-pressed); }

/* 12. 바닥: 모든 쪽 같은 단색 진한 면(--bg-strong 심청 900). 그라데이션·질감·윗선 없음.
   글자 흰색(이름·로고) / 보조 회색 200, 링크 흰 밑줄, 포커스 흰 링(위 3절) ---------- */

.footer {
  background: var(--bg-strong);
  color: var(--text-on-brand-2);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-8);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.footer-name { color: var(--text-on-brand); font-weight: var(--fw-semibold); }

/* 13. 읽은 만큼 막대(상세 두 쪽): 화면 맨 위 2px. 스크롤 연동 애니메이션을 지원하는 브라우저에서만 보인다 */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: 2px;
    background: var(--text-2);
    transform: scaleX(0);
    transform-origin: left center;
    animation: read-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes read-progress { to { transform: scaleX(1); } }
}

/* 14. 순차 등장: site.js 가 html 에 .can-reveal 을 붙인 경우에만(스크립트가 없거나 움직임 줄이기면 처음부터 보인다).
   [data-reveal] 묶음(카드 격자·상세 "가져갈 것"·다음 카드)의 자식마다 화면에 들어올 때 .is-in 이 붙는다.
   같은 순간 들어온 자식끼리 왼쪽 위부터 120ms 간격(네 번째부터 같은 지연, 최대 360ms)으로 아래 24px에서 올라온다.
   지연(--reveal-delay)은 site.js 가 --stagger 배수로 적는다. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .can-reveal [data-reveal] > * {
    opacity: 0;
    transform: translateY(var(--reveal-y));
    transition:
      opacity var(--dur-4) var(--ease-standard) var(--reveal-delay, 0s),
      transform var(--dur-4) var(--ease-standard) var(--reveal-delay, 0s);
  }
  .can-reveal [data-reveal] > .is-in {
    opacity: 1;
    transform: none;
  }
}

/* 움직임 줄이기: 전환을 모두 끈다(읽은 만큼 막대는 스크롤 위치를 보여 주는 표시라 그대로 둔다) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* 15. 모바일(600 미만) 전용 ------------------------------------------- */

/* 360 미만: 메뉴 세 칸(아티클·프로젝트·소개)이 로고와 한 줄에 들어가게 칸 안쪽 여백을 12 → 8. 누름 영역 44는 그대로 */
@media (max-width: 359px) {
  .gnb-menu { margin-right: calc(-1 * var(--sp-2)); }
  .gnb-menu a { padding-inline: var(--sp-2); }
  .gnb-menu a::before { left: var(--sp-2); right: var(--sp-2); }
}

@media (max-width: 599px) {
  /* 표를 행 단위 블록으로(역할은 HTML role 로 유지) */
  table[role="table"] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  table[role="table"],
  table[role="table"] caption,
  table[role="table"] tbody,
  table[role="table"] tr { display: block; }
  table[role="table"] tr {
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--line-1);
  }
  table[role="table"] th[scope="row"] {
    display: block;
    padding: 0 0 var(--sp-2);
    border: 0;
  }
  table[role="table"] td {
    display: grid;
    grid-template-columns: min(7rem, 40%) minmax(0, 1fr);
    column-gap: var(--sp-4);
    padding: var(--sp-2) 0;
    border: 0;
  }
  table[role="table"] tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
  table[role="table"] tbody tr:last-child td:last-child { padding-bottom: 0; }
  table[role="table"] td::before {
    content: attr(data-label);
    color: var(--text-3);
    font-size: var(--fs-caption);
    font-weight: var(--fw-regular);
  }
}

/* 16. 태블릿 이상(600 이상): 8열, 거터 16 --------------------------- */

@media (min-width: 600px) {
  .page-head { padding-top: var(--sp-10); padding-bottom: var(--sp-12); }
  .sec,
  .subscribe,
  .next,
  .footer-bar { padding-block: var(--sp-12); }
  .sec-body p + .sub-title,
  .excerpt + .excerpt,
  .talk + .talk { margin-top: var(--sp-12); }
  .sec > .sec-full,
  .sec > .sec-full + .sec-body { margin-top: var(--sp-8); }

  .num-list > li,
  .check-list > div {
    grid-template-columns: min(7rem, 40%) minmax(0, 1fr);
    gap: var(--sp-1) var(--sp-4);
  }

  /* 상세 머리: 8열에서 표지 1~3열, 글 4~8열 */
  .detail-head-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .detail-head-grid > .cover-frame { grid-column: 1 / span 3; }
  .detail-head-grid > .detail-head-text { grid-column: 4 / -1; }
  .detail-head .cover { aspect-ratio: var(--cover-ratio); }
}

/* 17. 데스크톱(1024 이상): 12열, 거터 28 ----------------------------- */

@media (min-width: 1024px) {
  .home-title,
  .home-lead,
  .read { max-width: calc((100% - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter)); }

  /* 표지 카드 4열(12열에서 3씩) */
  .cover-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 상세 머리: 12열에서 표지 1~4열, 글 5~12열(아래 섹션 본문 칸과 같은 시작선) */
  .detail-head-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .detail-head-grid > .cover-frame { grid-column: 1 / span 4; }
  .detail-head-grid > .detail-head-text { grid-column: 5 / -1; }

  .about-head-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .about-head-grid > .detail-title { grid-column: 1 / span 4; }
  .about-head-grid > .about-lead { grid-column: 5 / span 8; }

  .sec {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .sec > .sec-side { grid-column: 1 / span 4; }
  .sec > .sec-body { grid-column: 5 / span 8; }
  .sec > .sec-full { grid-column: 1 / -1; }
}