/*
	교회 전용 컴포넌트 — 3-10 ~ 3-19 (3-14 · 3-15 포함)

	토큰 이름은 부모가 정한다 (G-2). 여기서는 값을 직접 쓰지 않는다.

	⚠️ **부모 클래스 이름과 겹치지 않게 한다.** 자식 CSS 가 나중에 실려
	   같은 이름이면 조용히 이긴다. `check.sh V-7` 은 PHP 만 보고
	   **CSS 는 안 본다** — 사람이 읽어야 잡힌다 (3-12 게이트).

	   부모가 쓰는 이름   .course-list · .course-card* · .prose · .visually-hidden
	   여기서 쓰는 이름   .sermon-list · .sermon-card* · .sermon-single*
	                      .notice-list · .notice-row* · .notice-single*
	                      .hero* (부모에 없음) · .service-times*
	                      .home-columns · .home-section*
	                      .location*
	                      .page-content__figure · .page-content__image · .page-children*
	                      .coming-soon* · .newcomer-form*
	                      .newcomer-steps* · .newcomer__actions
	                      .hero-course__anchor · .enroll-box__heading (3-43)
	                      ⚠️ .hero-course · .enroll-box 본체는 **부모 것이다** (3-43)
	                      ⚠️ .page-content__header 는 부모 것이다
	                      ⚠️ .page-content__title · __body 는 **어느 쪽에도 규칙이 없다**
	                         (3-48 전수). 제목은 h1 요소 규칙이, 본문은 함께 붙은
	                         .prose 가 그린다 — 구조 이름이라 남긴다 (G-129)

	⚠️ `.hero` 는 `hero-course.php` 의 `.hero-course` 와 다른 파트다.
	   이름을 갈라 두지 않으면 과정 소개 머리가 홈 히어로 스타일을 먹는다.

	⚠️ **`3-17` 홈이 이 파일의 첫 전면 조립이다.** 히어로·예배 시간·설교
	   카드·공지 줄의 CSS 가 **한 페이지에 처음 모인다.** 위 목록이
	   서로 안 겹치는지가 그때 실제로 판단된다 (`3-17` 게이트에서 실측).

	   `.home-*` 은 **홈이 파트들을 놓는 틀**이다. 파트 안쪽 이름과
	   겹치지 않게 접두사를 갈라 뒀다 — 파트는 자기 배치를 스스로
	   정하고, 홈은 그 덩어리들을 어디에 놓을지만 정한다.

	`.prose` 는 부모 것을 그대로 쓴다 — 긴 글 서식은 두 사이트가 같다.
*/

/* ═══════════════════════════════════════════
   설교 목록 — 3-12 · WH-30
   ═══════════════════════════════════════════ */

/*
	1열이다 (WH-30). 강의 목록과 다르다 — 저쪽은 데스크톱 2열이다.
	설교는 카드가 가로로 길어 훑기가 낫다.
*/
.sermon-list {
	display: grid;
	gap: var(--space-6);
}

.sermon-list__empty {
	color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   설교 카드 — 3-12 · WH-30
   ═══════════════════════════════════════════ */

/*
	position 은 __link::after 가 덮을 기준이다 (G-108).
	카드 전체를 <a> 로 감싸지 않는다 — 스크린리더가 안의 글자를 전부
	링크 이름으로 읽는다.
*/
.sermon-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	transition: var(--transition);
}

.sermon-card:hover {
	border-color: var(--color-border-strong);
}

.sermon-card:focus-within {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

.sermon-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-subtle);
}

.sermon-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
	그림이 없을 때도 자리를 낸다 — 없애면 목록에서 줄이 어긋난다.
	글자는 넣지 않는다. 제목이 바로 아래에 있다.
*/
.sermon-card__thumb--empty {
	background: var(--color-bg-subtle);
}

.sermon-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.sermon-card__title {
	margin: 0;
	font-size: var(--text-lg);
}

.sermon-card__link {
	color: inherit;
	text-decoration: none;
}

/*
	카드 전체를 누를 수 있게 덮는다. 링크 이름은 제목 하나로 남는다.
*/
.sermon-card__link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.sermon-card__facts {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	날짜 줄은 맨 아래에 붙는다. 카드마다 제목 줄 수가 달라도 맞는다.
*/
.sermon-card__foot {
	display: flex;
	gap: var(--space-3);
	margin: auto 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.sermon-card__series {
	color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   설교 상세 — 3-18 · WH-31~37
   ═══════════════════════════════════════════ */

.sermon-single__head {
	margin-bottom: var(--space-8);
}

.sermon-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	color: var(--color-text-muted);
}

.sermon-single__series {
	margin: var(--space-2) 0 0;
	color: var(--color-primary);
}

/*
	영상은 폭에 맞춰 늘어나고 비율을 지킨다. 늦게 와도 화면이 안 밀린다.
*/
.sermon-single__frame {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-bg-subtle);
}

.sermon-single__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.sermon-single__video,
.sermon-single__audio,
.sermon-single__summary,
.sermon-single__transcript,
.sermon-single__worship,
.sermon-single__others {
	margin-top: var(--space-12);
}

/*
	⚠️ 전문이 이 페이지의 본체다 (S-60 · WH-35).

	폭을 좁히고(G-80) 행간을 넓힌다(G-52). 한 줄이 길면 긴 글은 안 읽힌다.
	1400자짜리 설교가 있어 여기가 실제로 판단된다.
*/
.sermon-single__transcript .prose {
	max-width: var(--container-narrow);
	line-height: var(--leading-loose);
}

.sermon-single__transcript .prose p {
	margin: 0 0 var(--space-4);
}

/* ═══════════════════════════════════════════
   공지 목록 — 3-13 · WH-60
   ═══════════════════════════════════════════ */

/*
	회차 4 (`3-54`) 가 표 격자로 다시 지으면서 규칙이 아래
	「공지 목록 — 3-54 회차 4」 구역으로 내려갔다.

	⚠️ 회차 3 의 줄 규칙이 여기 남아 **줄마다 구분선이 둘**이 됐었다 —
	   옛 `.notice-row` 아래 1px 에 새 `.notice-row__link` 아래 1px.
	   사람이 화면에서 잡았다 (회차 5 ⑵). 옛 규칙을 지웠다.
	   같은 부품을 홈도 쓴다 — 홈 목록도 같이 얇아진다.
	   줄의 포커스는 전역 `:focus-visible` 이 링크에 그린다.
*/

/* ═══════════════════════════════════════════
   공지 상세 — 3-19 · IH-38
   ═══════════════════════════════════════════ */

/*
	`__head` · `__meta` 는 회차 4 구역(아래)이 다시 정했다. 옛 `__head` 의
	`margin-bottom` 32px 가 시안에 없는 간격을 본문 위에 얹고 있었다 —
	회차 5 ⑷ 에서 지웠다.
*/

/*
	지난 공지는 주소로 열린다. 지났다는 것을 글자로 말한다.
*/
.notice-single__over {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius);
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
}

.notice-single__file {
	margin-top: var(--space-8);
}

/* ═══════════════════════════════════════════
   홈 히어로 — 3-10 · WH-10
   ═══════════════════════════════════════════ */

/*
	`hero-course` 와 다른 파트다 (저쪽은 과정 소개 머리 · IH-110).
	이름을 갈라 둔 이유가 그것이다.
*/
.hero {
	position: relative;
	padding: var(--space-10) 0;
	background: var(--color-bg-subtle);
}

/* 넓은 화면에서만 64 (`3-54` 모바일 회차 ㉠) */
@media (min-width: 48rem) {

	.hero {
		padding: var(--space-16) 0;
	}
}

/*
	그림이 있을 때만 글자를 그림 위에 올린다. 없으면 평범한 섹션이다 —
	빈 색 덩어리를 만들지 않는다.
*/
.hero--image {
	overflow: hidden;
	background: var(--color-bg-inverse);
}

.hero__image {
	position: absolute;
	inset: 0;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.hero__body {
	position: relative;
	max-width: var(--container-base);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.hero--image .hero__body {
	color: var(--color-text-invert);
}

/*
	어두운 바닥 위의 링크 (`3-50` · 2026-08-27).

	🔴 **본문만 흰 글자로 바뀌고 링크는 안 바뀌었다.** `base.css` 의 `a` 규칙이
	`--color-primary` 를 주는데 그 색이 이 바탕에서 **3.17:1** 이었다.

	⚠️ **값을 여기 박지 않는다.** 토큰 이름만 읽는다 (`G-2`) — 값을 박으면
		교회 파일에 강의 색이 들어가거나 그 반대가 된다.
	⚠️ **호버는 흰색으로 올린다.** `--color-primary-hover` 는 원색보다 **더
		어두워서**(`#006D8F`) 이 바탕에서 더 나빠진다. 색이 아니라 **밝기**로
		호버를 알린다 — 밑줄은 그대로 있다.
	⚠️ **규칙이 자식에 있다** (`R-1`). `.hero--image` 는 교회에만 있는 자리다 —
		강의에 어두운 바닥이 생기면 그때 그 자식이 같은 규칙을 쓴다.
		**토큰 이름은 부모에 있으므로 값을 다시 정할 일은 없다.**
	⚠️ **버튼은 안 건드렸다** — `.button` 은 자기 바탕을 갖고 있어 이 바탕과
		무관하다 (홈 히어로의 「설교 다시 듣기」가 그것이다).
*/
.hero--image a:not(.button) {
	color: var(--color-link-invert);
}

.hero--image a:not(.button):hover {
	color: var(--color-text-invert);
}

.hero__heading {
	margin: 0;
}

.hero__sub {
	margin: var(--space-3) 0 0;
	font-size: var(--text-lg);
}

.hero__actions {
	margin: var(--space-6) 0 0;
}

/* ═══════════════════════════════════════════
   예배 시간 — 3-11 · WH-11 · WH-15
   ═══════════════════════════════════════════ */

/*
	⚠️ <table> 을 쓰지 않는다 (WH-15). 모바일에서 깨진다.

	모바일은 세로로 쌓고 데스크톱은 가로로 늘어선다. **예배가 하나든
	여섯을 넘든 같은 배치다** — 개수를 CSS 가 모른다.
*/
.service-times__list {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.service-times__item {
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
}

.service-times__name {
	margin: 0;
	font-weight: var(--weight-semibold);
}

.service-times__when {
	display: flex;
	gap: var(--space-2);
	margin: var(--space-1) 0 0;
	font-size: var(--text-lg);
}

.service-times__place,
.service-times__note {
	margin: var(--space-1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.service-times__note {
	margin-top: var(--space-4);
}

@media (min-width: 48rem) {
	.service-times__list {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

/* ═══════════════════════════════════════════
   홈 배치 — 3-17 · WH-12 · WH-13
   ═══════════════════════════════════════════ */

/*
	⚠️ **파트가 아니라 홈의 틀이다.** 여기서 정하는 것은 「설교 덩어리와
	   공지 덩어리를 어디에 놓나」뿐이다. 덩어리 안쪽은 `.sermon-list` ·
	   `.notice-list` 가 스스로 정한다 — 홈이 그 안을 건드리면 목록 화면과
	   설교가 다르게 보인다.

	모바일은 1열로 쌓는다 (WH-12 · WH-13). 데스크톱은 설교 2/3 · 공지 1/3 —
	설교가 카드라 넓은 쪽이 맞고, 공지는 제목 줄이라 좁아도 읽힌다.

	⚠️ **넓이는 순서가 정한다.** `--wide` · `--side` 같은 이름을 붙였다가
	   지웠다 — **아무 규칙도 없는 이름이었다** (`3-17` 게이트가 「홈이
	   썼는데 어느 쪽에도 정의가 없는 이름」으로 잡았다). 클래스가 붙어
	   있으면 읽는 사람은 그것이 넓이를 정한다고 믿는다.

	`.home-section` 자체에는 규칙이 없다. `__heading` · `__more` 의 이름
	기준일 뿐이다.
*/
.home-columns {
	display: grid;
	gap: var(--space-12);
	margin-top: var(--space-12);
}

.home-section__heading {
	margin: 0 0 var(--space-6);
}

.home-section__more {
	margin: var(--space-6) 0 0;
}

@media (min-width: 60rem) {
	.home-columns {
		grid-template-columns: 2fr 1fr;
		gap: var(--space-12);
		align-items: start;
	}
}

/* ═══════════════════════════════════════════
   오시는 길 — 3-15 · WH-40~43
   ═══════════════════════════════════════════ */

.location {
	margin-top: var(--space-12);
}

.location__heading {
	margin: 0 0 var(--space-6);
}

.location__map {
	margin: 0 0 var(--space-6);
}

/*
	<address> 는 기울임이 기본이다. 주소는 기울일 이유가 없다.
*/
.location__contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-style: normal;
}

.location__phone a {
	color: var(--color-primary);
}

.location__block {
	margin-top: var(--space-8);
}

/*
	⚠️ 주차가 이 화면에서 가장 많이 읽히는 조각이다 (WH-42 · P-37).
	   테두리로 눈에 먼저 걸리게 한다. **색만으로 알리지 않는다** —
	   소제목 글자가 이미 「주차 안내」라고 말한다 (G-118).
*/
.location__block--parking {
	padding: var(--space-4) var(--space-6);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-lg);
	background: var(--color-bg-subtle);
}

.location__block-heading {
	margin: 0 0 var(--space-2);
	font-size: var(--text-base);
}

/*
	항목 목록이다 (WH-42 의 「담을 내용 셋」). 산문이 아니라 <ul> 이다 —
	담당자가 한 줄에 하나씩 적은 것이 그대로 한 줄이 된다 (D-140 · D-141).

	⚠️ **들여쓰지 않는다** (3-22 재실측에서 고침). `base.css` 가 마커를
	   지우므로 `padding-left` 만 남으면 **번호도 점도 없이 밀리기만** 한다 —
	   「목록」이 아니라 「왜 밀렸지」로 읽힌다.

	   묶는 일은 이미 바깥이 한다: 상자 테두리 · 안쪽 여백 · 소제목.
	   여기서는 소제목에 **왼쪽을 맞춘다.**

	   순서가 뜻을 가지는 목록만 마커를 되살린다 (`newcomer-steps__list`
	   의 `decimal`) → design-system.md G-120~122
*/
.location__block-list {
	margin: 0;
	padding-left: 0;
	color: var(--color-text-muted);
}

.location__block-list li + li {
	margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════
   교회 소개 페이지 — 3-20 · IH-10 · IH-11
   ═══════════════════════════════════════════ */

/*
	⚠️ `.page-content` 계열은 **부모 것이다** (`page.php` · `page-content__header`
	   · `__title` · `__body`). 여기서는 부모에 없는 둘만 더한다 —
	   같은 이름을 다시 쓰면 자식 CSS 가 나중에 실려 조용히 이긴다.
*/
.page-content__figure {
	margin: 0 0 var(--space-8);
}

.page-content__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/*
	하위 페이지로 가는 길. 목록을 손으로 안 나열하므로 개수가 변한다.
*/
.page-children {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.page-children__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ═══════════════════════════════════════════
   준비 중 페이지 — 3-23 · WH-70~72
   ═══════════════════════════════════════════ */

/*
	빈 화면을 보여주지 않는다. 안내 한 줄과 다음에 갈 곳.
*/
.coming-soon__notice {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.coming-soon__links {
	display: flex;
	gap: var(--space-6);
	margin: var(--space-8) 0 0;
}

/* ═══════════════════════════════════════════
   새가족 신청 폼 — 3-16 · WH-55
   ═══════════════════════════════════════════ */

.newcomer-form__actions {
	margin: var(--space-8) 0 0;
}

/* ═══════════════════════════════════════════
   새가족 안내 — 3-22 · WH-52 · WH-54
   ═══════════════════════════════════════════ */

/*
	⚠️ `.newcomer-*` 과 `.newcomer-form*` 은 다른 파트다. 안내 페이지와
	   신청 폼이라 자리가 갈린다 — 접두사를 섞지 않는다.
*/
.newcomer-steps {
	margin: var(--space-12) 0 0;
}

.newcomer-steps__heading {
	margin: 0 0 var(--space-4);
	font-size: var(--text-xl);
}

/*
	번호를 브라우저 기본 자리가 아니라 안쪽에 둔다. 좁은 화면에서
	기본 `list-style` 은 컨테이너 밖으로 밀려 잘린다.
*/
.newcomer-steps__list {
	margin: 0;
	padding: 0 0 0 var(--space-6);
	list-style: decimal;
}

.newcomer-steps__item {
	margin: 0 0 var(--space-3);
	color: var(--color-text);
	line-height: var(--leading-normal);
}

.newcomer-steps__item:last-child {
	margin-bottom: 0;
}

.newcomer__actions {
	margin: var(--space-12) 0 0;
}

/* ═══════════════════════════════════════════
   과정 소개 — 교회만 다른 것 (3-43 · IH-110 · IH-111)
   ═══════════════════════════════════════════ */

/*
	⚠️ **상자와 히어로는 부모에 있다** (`3-43`). 여기 있는 셋은 **교회에만
	   있는 조각**이다 — 강의 파트가 안 그린다.

	   부모가 쓰는 이름  .hero-course* · .enroll-box* (상자 · 사실 · 안내 · 문의)
	   여기서 더하는 것  .hero-course__anchor · .enroll-box__heading
	                     .enroll-box__actions

	겹치는 규칙을 여기 되살리지 않는다. `check.sh V-7` 은 **CSS 를 안 본다.**
*/

/*
	모바일 상단 앵커 (3-39a ⑩). 12주차 커리큘럼이 들어오니 유일한 행동인
	등록 안내가 대여섯 화면 아래로 묻혔다.

	⚠️ **데스크톱에서도 그대로 둔다.** 감추면 「모바일에만 있는 링크」가
	   되어 자리마다 다른 화면이 된다 — 한 줄이라 손해가 작다.
*/
.hero-course__anchor {
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
}

/*
	강의 상자에는 제목이 없다. 가격이 첫 줄이라 그것이 곧 제목 노릇을 한다.
	교회는 값이 없어 **무엇을 하는 상자인지 글자로 말해야** 한다.
*/
.enroll-box__heading {
	margin: 0 0 var(--space-2);
	font-size: var(--text-lg);
}

/*
	⚠️ **`.enroll-box__actions` 에 규칙을 안 붙였다.** 교회는 `apply_url` 이
	   **영원히 비어** 그 덩어리가 안 그려진다 (`3-22` 넷째 축 — 자가 신청
	   경로가 없다). 안 그려지는 마크업에 스타일을 붙이면 **읽는 사람이
	   그것이 화면에 있다고 믿는다.**

	   파트의 그 가지를 지울지는 판단이 필요해 남겨 뒀다 → 체크리스트 `3-43`
*/

/* ═══════════════════════════════════════════════════════════
   디자인 꾸러미 반영 1 — 머리 · 바닥 (`3-54` · 2026-08-31)

   🔴 **마크업은 한 줄도 안 바꿨다.** 머리·바닥 파트는 **부모 것**이라
      고치면 강의 화면이 같이 바뀐다. 여기서는 **모양만 겹쳐 쓴다.**

   ⚠️ **부모 규칙을 지우지 않는다.** 뒤에 오는 이 파일이 이길 뿐이다 —
      부모가 고쳐지면 여기서 안 덮은 것은 따라온다.

   ⚠️ **로고 자리는 글자다.** 고산 마크는 저장소에 안 넣는다 (`R-20`) —
      사람이 화면에서 올리는 날 `.site-header__brand-link` 안이 그림으로 바뀐다.
      지금은 글자에 브랜드 색과 굵기만 준다.
   ═══════════════════════════════════════════════════════════ */

/*
	머리 — 붙어 있고 높이 72, 흰 배경 92% 에 blur, 아래 1px 검은 선.

	⚠️ **`position: sticky` 는 부모가 안 준다.** 여기서 처음 준다 —
	   교회만 붙는 머리를 쓴다.
	🔵 **되찾았다** (2026-08-31 · 회차 2). `V-6`(색 하드코딩 금지)이 울어
	   회차 1 에서는 불투명으로 물러섰는데, **부모에 이름이 생겨**
	   (`--color-bg-translucent`·`--blur-panel` · `G-152~153`) 값으로 돌아왔다.
	   ⚠️ **부모 기본값은 불투명이다** — 강의 머리는 안 바뀐다.
*/
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 1px solid var(--color-text);
	background: var(--color-bg-translucent);
	backdrop-filter: var(--blur-panel);
}

.site-header__inner {
	gap: var(--space-3);
	padding-block: var(--space-2);
}

/*
	🔴 **한 줄로 세우는 것은 넓은 화면에서만이다** (2026-08-31 · 회차 2 에 물렸다).

	검색 단추(44px)가 들어오면서 **320px 에서 머리가 3px 넘쳤다** — 열 화면 전부.
	부모는 좁은 화면에서 로고에 한 줄을 통째로 주고 나머지를 접는데,
	회차 1 에서 `flex-wrap: nowrap` 으로 그 접힘을 막아 버린 것이 원인이었다.
	**꾸러미는 데스크톱 전용이라(`@media` 0곳) 좁은 화면을 안 그린다** —
	그 자리는 우리가 지켜야 한다.
*/
@media (min-width: 48rem) {

	.site-header__inner {
		flex-wrap: nowrap;
		gap: var(--space-6);
		/* 로고 64 + 위아래 숨통 16 (사람 「헤더 키워라」 · 2026-09-01) */
		min-height: var(--header-height);
		padding-block: 0;
	}

	/* 머리가 떠 있으니 그 높이만큼 위를 비운다 — 숫자를 박지 않고 같은 토큰을 읽는다. */
	.home .home-hero__inner {
		padding-block-start: calc(var(--header-height) + var(--space-12));
	}
}

/*
	🔴 **홈 머리는 스크롤로 갈린다** (회차 30 · 사람 지시).

	  최상단(히어로 위)   **투명** — 히어로 흰 판이 끊기지 않는다
	  스크롤을 내리면      **흰 머리** — 지금까지의 그 머리다

	🔴 **`absolute` 가 아니라 `fixed` 다** (회차 27 을 뒤집었다). `absolute` 는
	   스크롤하면 머리가 **위로 사라진다** — 사람이 원한 것은 「내리면 흰 머리로
	   **나타난다**」였다. `sticky` 는 **자리를 차지해** 히어로가 96 만큼 밀리고
	   겹침 자체가 사라진다(회차 27 이 `absolute` 를 고른 까닭). `fixed` 는
	   자리를 안 차지하면서 스크롤해도 남는다 — **둘 다 만족하는 유일한 값**이다.

	🔴 **기본이 흰 머리다** (`1-111` — 실패하는 쪽이 안전해야 한다). 투명은
	   **스크립트가 최상단에서 붙인다**(`--over`). JS 가 없거나 꺼지면 흰 머리로
	   남아 메뉴 글자가 늘 읽힌다.

	⚠️ **아래선은 색만 지운다.** `border-bottom: 0` 으로 지우면 상태가 바뀔 때
	   1px 씩 흔들린다 — 투명하게만 둔다.

	⚠️ **좁은 화면도 같은 원리다** (사람 지시). 회차 27 은 「그 폭 머리 높이를
	   모른다」며 안 걸었는데, 회차 30 이 **재서 토큰으로 적었다**
	   (`--header-height-narrow` · 로고 44 + 검색 단추 들어올림 6 + 위아래 8×2 = 66).
*/
.home .site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 10;
}

/*
	🔴 **관리자 막대와 겹친다** (회차 36 · 사람이 로그인 상태에서 잡았다).

	워드프레스는 로그인하면 `html` 에 위 여백을 줘서 막대 자리를 비운다.
	그런데 **`fixed` 는 뷰포트 기준**이라 그 여백을 안 받는다 — 홈 머리만
	`fixed` 라서(다른 화면은 `sticky`) **홈에서만** 막대가 머리를 덮었다.

	**코어에서 재서 적은 값** (2026-09-02 · 이 설치본):
	  `wp-includes/admin-bar.php` 1393줄 — 기본 위 여백 **32**
	  `wp-includes/admin-bar.php` 1394줄 — 폭 **782** 아래에서 **46**
	  `wp-includes/css/admin-bar.css` 1111줄 — 폭 **600** 아래에서 막대가 `absolute`
	  (코어가 `--wp-admin--admin-bar--height` 라는 이름도 같은 값으로 들고 있지만
	   **우리 자(`V-13`)가 모르는 이름**이라 안 쓴다 — 수를 여기 적고 출처를 남긴다)

	⚠️ **600 아래에서도 `html` 여백은 46 그대로다** — 0 으로 안 되돌린다(코어에
	   그런 규칙이 없다 · 실측). 막대는 `absolute` 지만 `top`·`height` 를 다시
	   안 줘서 **`top: 0` · 높이 46** 그대로다(실측 2026-09-02 ·
	   `admin-bar.css` 95줄·791줄). `absolute` 는 `html` 여백에 안 밀리고
	   **문서 맨 위**에 그려진다.

	🔴 **그래서 그 폭에서 남는 증상은 「머리 아래가 비는 것」이 아니라 이것이다 —
	   스크롤 0 에서 막대가 머리 위 46px 를 덮는다.** 좁은 머리는 66 이고
	   로고가 44 라 **로고가 거의 다 가려진다.** 스크롤하면 막대가 딸려
	   올라가 정상이 된다.

	🔴 **그래도 `0` 이 맞다 — 셋을 재 보고 고른 값이다. 「고치지」 마라**:
	     `top: 46` … 막대는 46 만 스크롤해도 사라지는데 머리는 계속 46 아래에
	                 있다 ⇒ **끝까지 빈 자리.** 더 나쁘다
	     그 폭만 `position: absolute` … 깔끔하지만 회차 30 의 사람 지시
	                 (「내리면 흰 머리로 나타난다」)가 폰에서 깨진다.
	                 **사람이 정할 일이다**
	     `--over` 로 갈라 태우기 … `--over` 임계는
	                 `scrollY <= header.offsetHeight`(=66 · `assets/js/header.js`)
	                 인데 막대는 46 에 사라진다 ⇒ **46~66 구간에서 20px 이
	                 깜빡인다**

	🔴 **폭을 px 로 적는다.** 우리 관용은 `rem` 이지만 이 둘은 **워드프레스 코어
	   스타일시트의 분기점**에 맞추는 값이다 — `rem` 으로 바꾸면 글자 크기
	   설정에 따라 한 픽셀씩 어긋난다.

	⚠️ 우리 `z-index` 를 안 올렸다(막대가 위에 있는 것이 맞다) ·
	   `show_admin_bar` 를 안 껐다 · 히어로 위 여백은 문서 흐름 안이라
	   `html` 여백이 이미 밀어 준다.
*/
.admin-bar.home .site-header {
	/*
		⚠️ **수를 성분 지역 속성에 담는다** — `V-6b` 는 자리 값에 raw 숫자가
		   박히는 것을 잡는다. 이 셋은 우리 눈금이 아니라 **코어 분기점**이라
		   토큰으로 못 만들고, 그렇다고 그냥 박으면 자가 운다 (`--switch-*` ·
		   `--action-lift` 와 같은 수법).
	*/
	--admin-bar-h: 32px;

	top: var(--admin-bar-h);
}

@media screen and (max-width: 782px) {

	.admin-bar.home .site-header {
		--admin-bar-h: 46px;
	}
}

@media screen and (max-width: 600px) {

	/*
		막대가 `absolute` 라 **스크롤에 딸려 올라간다** — 내려 두면 끝까지
		빈 자리가 남는다. 대신 **스크롤 0 에서는 막대가 머리를 덮는다**(위 주석의
		기하 · 로고가 거의 가려진다). **폰에서 이대로 둘지는 사람이 정한다**
		(`3-69` 눈확인 (다)).
	*/
	.admin-bar.home .site-header {
		--admin-bar-h: 0px;
	}
}

.home .site-header--over {
	border-bottom-color: transparent;
	background: none;
	backdrop-filter: none;
}

/*
	🔴 **서랍이 열리면 흰 머리로 돌아온다.** 투명인 채로 열리면 패널 위쪽
	   막대 뒤로 히어로가 비친다 (패널 자체는 부모가 흰 바탕을 준다).
*/
.home .site-header--over:has(.site-header__drawer[open]) {
	border-bottom-color: var(--color-text);
	background: var(--color-bg-translucent);
	backdrop-filter: var(--blur-panel);
}

/*
	좁은 화면에서도 머리가 떠 있으니 그만큼 비운다 — 실측을 토큰으로 읽는다.

	⚠️ **미디어로 가둔다.** 안 가두면 이 규칙이 **파일 뒤쪽에 있다는 이유로**
	   위의 넓은 화면 규칙(96 + 48)을 덮는다 — 실측에서 모든 폭이 98 로 나왔다.
*/
@media (max-width: 47.9375rem) {

	.home .home-hero__inner {
		padding-block-start: calc(var(--header-height-narrow) + var(--space-8));
	}
}

/*
	로고 자리. 부모는 좁은 화면을 생각해 한 줄을 통째로 준다 —
	교회 머리는 한 줄이라 그 규칙을 되돌린다.
*/
.site-header__brand {
	margin: 0;
	font-size: var(--text-xl);
}

@media (min-width: 48rem) {

	.site-header__brand {
		flex: 0 0 auto;
	}
}

.site-header__brand-link {
	color: var(--color-primary);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-heading);
}

/*
	메뉴는 가운데.

	🔴 **주 메뉴를 감싸는 `nav` 클래스는 안 꾸민다.** 그것은 부모 파트의 클래스인데
	   부모 CSS 에 규칙이 없다 — 자식에서만 꾸미면 다른 사이트에서 맨몸으로
	   선다(`V-14` 가 그 자리에서 울었다). 부모에 규칙을 더하면 강의 화면이
	   움직이므로, **부모가 이미 꾸미는 메뉴 목록으로만** 가운데를 만든다.
	   ⚠️ **이 주석에 그 클래스 이름을 안 적는다** — 자가 주석의 이름도
	      데이터로 읽어 또 운다 (`LS-009` · 규칙을 적는 자리가 가장 위험하다).
	⚠️ `margin-inline: auto` 는 남는 자리를 양쪽으로 똑같이 민다 — 결과가 같다.
*/
.site-header .site-header__menu {
	justify-content: center;
	gap: var(--space-6);
	margin-inline: auto;
}

/*
	② 주 메뉴만 넓힌다 (회차 19 · 사람 지시). 계정 줄은 `--space-4` 그대로다.

	위 규칙이 두 `<nav>` 를 다 잡으므로 **주 메뉴 쪽만** 다시 적는다.
	⚠️ ① 이 글자를 키우고 이것이 간격을 넓혀 **가로가 두 번 는다** — 1280 ·
	   1024 · 320 을 재고 넣었다 (1024 에서 넘침 0).

	🔴 **넓은 화면에서만 더 벌린다** (회차 20). `--space-10`(40px)을 모든 폭에
	   주면 **1024 에서 좌우 여백이 10px 만 남는다** — 넘치지는 않지만 로고와
	   계정에 **붙어 보인다.** 넘침 0 은 최소 조건이지 완료 조건이 아니다.

	   실측(칸 여섯 × 8px = 48px 이 더 는다):
	     1024   여백 34px → **10px**   ← 그래서 안 준다
	     1280   여백 162px → 138px
	   갈린 자리는 **75rem(1200px)** 이다. 그 폭에서 여백이 98px 이라
	   더 좁아져도 24px 아래로 안 내려간다.
*/
.site-header__nav .site-header__menu {
	gap: var(--space-8);
}

@media (min-width: 75rem) {
	.site-header__nav .site-header__menu {
		gap: var(--space-10);
	}
}

/*
	🔴 **오른쪽 묶음을 오른쪽 끝으로 민다** (2026-08-31 · 회차 3).

	시안 짜임은 [로고 고정] [메뉴 가운데] [오른쪽 묶음 고정] 셋이다.
	우리 마크업은 로고 · 주 메뉴 · **검색** · 계정 넷이고, **검색이 메뉴 바로
	뒤에 붙어** 메뉴가 왼쪽으로 몰려 있었다 (실측: 메뉴 112~578 · 화면 1280).

	⚠️ **마크업을 안 옮겼다.** 검색을 계정 뒤로 옮기려고 PHP 섬을 새로 열었더니
	   **강의 HTML 에 빈 줄이 하나 늘었다** — 같은 파일의 CTA 주석이 적어 둔
	   그 함정을 그대로 밟았다. 들여쓰기를 맞추면 `lint` 가 울고, `lint` 를
	   맞추면 공백이 샜다. ⇒ **되돌리고 자리만 CSS 로 민다.**
	   ⚠️ 오른쪽 묶음 안의 **차례**(검색 · 로그인 · 회원가입)는 마크업 순서라
	      CSS 로 안 바꾼다 — 그건 사람이 정할 자리다 (`3-54` 갈래).
*/
/*
	③ **검색 아이콘을 메뉴 글자에 맞춘다** (회차 20 · 사람 지시).

	원인은 잰 대로다 — 메뉴 링크는 `padding-bottom` 4px + 투명 밑줄 2px 을
	갖는다. 상자는 44 인데 **글자는 위쪽 38 안에서 가운데**라 글자 중심이
	상자 중심보다 위에 있다. 검색 단추(44×44)는 줄 한가운데에 서므로
	**글자가 3.3px 위**였다 (실측 · 고치기 전).

	⇒ 단추를 **그만큼 위로 올린다.** 상자 크기는 그대로 44×44 라 **터치 영역이
	   안 줄어든다** (`G-104`).

	🔵 **회차 23 에 수법을 바꿨다.** 처음엔 링크와 같은 `padding-bottom` +
	   투명 밑줄을 줬는데, 그러면 **안쪽 아이콘만 올라가고 상자는 그대로**라
	   hover 원(`--radius-full`)과 아이콘이 **3px 어긋났다**(실측).
	   `margin-block-end` 는 **마진 상자**를 가운데 두는 `align-items: center`
	   가 상자째 올려 준다 — **원과 아이콘이 함께** 올라간다.

	⚠️ 부모를 안 고친다. 강의 머리에는 검색이 아예 없다 (`G-2`).
*/
.site-header__action {
	/*
		올릴 값 = 링크의 아래 여백(`--space-1` 4px) + 투명 밑줄(2px) = 6px.
		⚠️ **2px 은 토큰이 아니다** — 눈금으로 적는다(`--space-1` 의 1.5배).
		   `V-6b` 가 raw 값을 잡는 자리라 `--switch-*` 와 같은 수법을 쓴다.
	*/
	--action-lift: calc(var(--space-1) * 1.5);

	margin-block-end: var(--action-lift);
}

/*
	③ **검색을 「행정실」 옆에 붙인다** (회차 19 · 사람 지시).

	전에는 `.site-header__action` 이 `margin-left: auto` 로 검색을 오른쪽 끝까지
	밀고 있었다. 그 `auto` 를 **없애고**, 대신 주 메뉴 앞에 `auto` 를 둔다.

	남는 자리를 나누는 `auto` 가 둘이 된다 — **주 메뉴 앞**과 **계정 앞**
	(계정 쪽은 **부모**가 이미 갖고 있다: `base/…/components.css` 의
	`@media (min-width: 768px)` **안**이다. 실측하고 넣었다 — 두 곳에 같은
	규칙을 새로 적지 않는다). 둘이 남는 자리를 반씩 가져가므로
	**[로고] … [메뉴+검색] … [계정]** 이 되고 검색은 메뉴에 붙는다.

	⚠️ **마크업은 한 줄도 안 옮겼다** — 위 주석이 적어 둔 PHP 섬 함정 그대로다.
	⚠️ `flex: 1 1 auto` 를 `0 1 auto` 로 내린다. 늘어나는 상자가 남는 자리를
	   다 먹으면 `auto` 여백이 나눌 것이 없다.
*/
.site-header__nav {
	flex: 0 1 auto;
	margin-inline-start: auto;
}

/*
	⚠️ 계정 줄은 가운데로 밀지 않는다 — 검색 바로 뒤에 붙는다.
	   위 규칙이 두 `<nav>` 를 다 잡으므로 여기서 되돌린다.
*/
.site-header__account .site-header__menu {
	margin-inline: 0;
	justify-content: flex-end;
}

/*
	메뉴 글자 — 지금 쪽은 아래 2px 브랜드 밑줄.

	⚠️ **밑줄을 `border-bottom` 으로 준다.** 안 눌린 것도 투명 2px 을 깔아
	   글자가 위아래로 안 흔들린다 — 흔들리면 눈이 먼저 알아챈다.
*/
.site-header__menu a {
	padding-bottom: var(--space-1);
	border-bottom: 2px solid transparent;
	color: var(--color-text-muted);
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
}

.site-header__menu a:hover {
	color: var(--color-text);
}

.site-header__menu a[aria-current="page"] {
	border-bottom-color: var(--color-primary);
	color: var(--color-text);
	font-weight: var(--weight-semibold);
}

/*
	① **주 메뉴가 계정보다 크고 굵다** (회차 19 · 사람 지시 · 참조 화면은 문서에).

	전에는 위 규칙 하나가 두 `<nav>` 를 다 잡아 **크기도 굵기도 같았다.**

	  주 메뉴   16px(`--text-base`) · 600     ← 일곱 항목이라 18px 은 안 갔다
	  계정      14px(`--text-sm`)   · 400

	🔴 **현재 쪽 신호를 지켰다.** 기본이 600 이 되면서 「지금 쪽」의 굵기 신호가
	   묻힌다 — 그래서 현재 쪽만 **700** 으로 한 칸 더 올린다. 밑줄 2px · 진한
	   글자색 · 굵기, **신호 셋**이 남는다 (`G-118` 색만으로 알리지 않는다).
*/
.site-header__nav .site-header__menu a {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
}

.site-header__nav .site-header__menu a[aria-current="page"] {
	font-weight: var(--weight-bold);
}

.site-header__account .site-header__menu a {
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
}

/*
	① **주 메뉴 글자를 진하게** (회차 20 · 사람 지시). 계정은 연한 대로 둔다 —
	   **그 차이가 위계다.**

	🔴 **현재 쪽 신호가 하나 죽는 것을 메웠다.** 공통 규칙은 「지금 쪽」을
	   흐린 색 → `--color-text` 로 알렸는데, 기본이 진해지면 **그 차이가
	   사라진다.** 그래서 주 메뉴의 현재 쪽만 **브랜드색**으로 올린다.
	   흰 바탕 대비 **5.13**(`3-55` 에서 이미 잰 값 — 다시 안 잰다).
	   신호 셋이 남는다: **브랜드색 · 2px 밑줄 · bold**.

	⚠️ **계정 쪽 현재 쪽은 안 건드린다** — 공통 규칙이 거기서는 그대로 맞다
	   (「내 정보」에 밑줄이 붙는 그 동작).
*/
.site-header__nav .site-header__menu a {
	color: var(--color-text);
}

.site-header__nav .site-header__menu a[aria-current="page"] {
	color: var(--color-primary);
}

/* 계정 링크는 오른쪽 끝에 붙는다 */
.site-header__account {
	flex: 0 0 auto;
}

.site-header__account .site-header__menu {
	gap: var(--space-4);
}

/*
	바닥 — navy 판 위에 3열.

	⚠️ **`1.4fr 1fr 1fr` 은 꾸러미 값이다.** 왼쪽이 브랜드 묶음이라 넓다.
	⚠️ **부모는 `flex` 로 쌓는다.** 여기서 `grid` 로 갈아 끼운다.
*/
.site-footer {
	margin-top: var(--space-24);
	border-top: 0;
	background: var(--color-bg-inverse);
	color: var(--color-text-invert-soft);
}

.site-footer__inner {
	padding-block: var(--space-16) var(--space-12);
}

/*
	모바일은 한 기둥으로 쌓는다 (`3-54` 회차 10 · 모바일 우선).

	⚠️ 전에는 세 기둥이 폭 규칙 없이 서서 320 에서 기둥이 76px 가 됐고,
	   그 안에서 「개인정보처리방침」이 두 줄로 쪼개졌다 (실측 — 회차 4
	   부터 「전부터 있던 것」으로 끌고 온 그 결함이다).

	🔵 **격자를 `<nav>` 에서 감싸개로 옮겼다** (`3-85` · 회차 57). 회차 10 부터
	   3열 격자였는데 격자에 넣을 칸이 <ul> 하나뿐이라 **오른쪽 2/3 가 비어
	   있었다**(실측). 이제 부모 파트가 `columns` 를 받으면 `site-footer__grid`
	   감싸개를 내고 그 안에 브랜드 · 바로가기 · 약관(<nav>) 셋이 선다 —
	   격자는 그 감싸개에 건다. <nav> 는 이제 칸 하나다.
	   ⚠️ 값을 안 넘기는 강의는 감싸개가 안 생기고 이 규칙에 안 걸린다 (`G-2`).
*/
.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
}

@media (min-width: 48rem) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: var(--space-12);
	}
}

.site-footer__menu {
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: 0;
}

.site-footer__menu a,
.site-footer__col-list a {
	color: var(--color-text-invert-muted);
	font-size: var(--text-sm);
}

.site-footer__menu a:hover,
.site-footer__col-list a:hover {
	color: var(--color-text-invert);
}

/* 바로가기 칸 — 정본의 「바로가기」 제목 + 세로 링크 */
.site-footer__col-title {
	margin: 0 0 var(--space-3);
	color: var(--color-text-invert);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.site-footer__col-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
	브랜드 칸 — 흰 로고(오면 그림 · 아직은 이름 글자) + 기관정보.
	정본은 로고 높이 40 · 기관정보를 그 아래 작은 글자로 둔다.
*/
.site-footer__brand-name {
	margin: 0;
	color: var(--color-text-invert);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-heading);
}

.site-footer__brand-logo {
	margin: 0;
}

.site-footer__logo {
	display: block;
	width: auto;
	height: var(--space-10);
}

.site-footer__brand-tagline {
	max-width: 20rem;
	color: var(--color-text-invert-muted);
	font-size: var(--text-xs);
}

/*
	기관정보 — 3열이면 브랜드 칸 **안**(정본)이라 구분선을 여기서 걷고 아래
	저작권 줄에 긋는다. 3열이 아닌 꼬리(값을 안 넘긴 사이트)는 전처럼 <nav> 밖에
	서고 부모 중립 기본이 그린다.
*/
.site-footer--columns .site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-top: var(--space-4);
	padding: 0;
	border-top: 0;
	font-size: var(--text-xs);
	font-style: normal;
	line-height: var(--leading-normal);
}

.site-footer--columns .site-footer__legal-item {
	color: var(--color-text-invert-soft);
}

.site-footer--columns .site-footer__legal-label {
	margin-right: var(--space-1);
}

.site-footer__legal-label,
.site-footer__copyright {
	color: var(--color-text-invert-muted);
	font-size: var(--text-xs);
}

/* 아래 구분선 + 저작권 줄 — 정본의 마지막 띠 */
.site-footer--columns .site-footer__copyright {
	margin-top: var(--space-10);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border-invert);
}

/* ═══════════════════════════════════════════════════════════
   디자인 꾸러미 반영 1 — 홈 다섯 덩이 (`3-54` · 2026-08-31)

   ⚠️ **사진이 없다.** 꾸러미도 자리표(Placeholder)로 지었다 —
      우리도 회색 자리표로 짓고 「사진 자리」라고 적어 둔다.
      실제 사진이 오면 그 칸만 갈아 낀다.

   🔵 **~~이름이 없어 값을 포기했던 자리 셋을 되찾았다~~** (2026-08-31 · 회차 2).
      부모에 `--section-y`·`--space-5`·`--text-md` 가 생겼다 (`G-149~151`).
      회차 ⑤ 의 「쓰는 곳 0곳」은 **안 지은 화면을 못 잰 것**이었다 (`R-21`).
      ⚠️ **섹션 리듬은 부모 기본값이 64 다.** 꾸러미 80 을 쓰려면
         **자식이 값을 덮어야 한다** — 그건 화면이 움직이는 일이라 따로 정한다.
   ═══════════════════════════════════════════════════════════ */

/* 섹션 한 덩이 — 위아래 리듬과 머리줄 */
.home-band {
	padding-block: var(--section-y);
}

.home-band--subtle {
	background: var(--color-bg-subtle);
}

.home-band__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.home-band__eyebrow {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.home-band__title {
	margin: 0;
	font-size: var(--text-3xl);
	letter-spacing: var(--tracking-heading);
}

/*
	⑴ 히어로 — navy 판 위에 브랜드 그라디언트를 55% 로 겹친다.

	⚠️ **그라디언트는 겹치는 층이다.** 글자는 그 위에 서야 하므로
	   `position: relative` 로 올린다 — 안 올리면 글자가 그라디언트 밑에 깔린다.
*/
/*
	히어로 판 — **위 흰색 58% / 아래 네이비 42%** (회차 27 · 새 시안).

	🔵 **걷은 것 둘**: ㉠ `background: var(--color-bg-inverse)`(판 전체 네이비)
	   ㉡ `::before` 의 대각선 그라디언트(`--color-primary` → `--color-text`
	   · opacity .55). 새 판은 **위가 흰색**이라 그 위에 어두운 덮개가 있으면
	   카피가 안 읽힌다. 마크업의 `on-dark` 도 같이 걷었다(`front-page.php`).

	⚠️ **`--color-bg-inverse` 는 이미 시안 navy-800(#0A2337)이다** — 새 값을
	   안 만들었다.

	🔵 **이 배경은 자리표다** (2026-09-02 회차 37 · 사람이 알려 줬다):
	   **최종 배경은 감성적인 일러스트**가 들어온다. 이 그라디언트는 그때까지
	   자리를 지키는 것이고 **`58%` 는 지켜야 할 값이 아니다** — 비율을 맞추려
	   애쓰지 마라. 그림이 들어오는 회차가 통째로 갈아 끼운다 (항목 `3-71`).

	🔴 **그림이 들어오면 카피 대비를 다시 잰다.** 지금 카피는 **흰 바탕 위
	   어두운 글자**다(`--color-text`). 배경이 그림이 되는 순간 `3-55` 에서 정한
	   대비가 통째로 무효가 된다 — 덮개를 씌울지 글자 색을 뒤집을지는
	   **그림을 보고** 정한다. **지금 미리 덮개를 넣지 마라.**
*/
.home-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--color-bg) 0 58%, var(--color-bg-inverse) 58% 100%);
}

.home-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	/*
		⚠️ **위·아래를 갈라 적는다** (회차 36). **아래 여백이 곧 카피와 키비주얼
		   패널 사이 간격**이다 — 스테이지는 이 상자의 **형제**라 이 값 하나가
		   그 사이를 정한다. 전에는 여기 96/48 과 스테이지의 `margin-top: 40` 이
		   **더해져** 136/88 이었다 (사람이 「너무 넓다」고 잡았다).
		⚠️ **위 값은 이 일과 무관하다** — 홈에서는 `.home .home-hero__inner` 가
		   더 좁아서(0,2,0) 떠 있는 머리를 피하는 값으로 덮는다. 그 규칙이
		   **이 단축 속성에 안 지워지는지 재서 확인했다**(아래 회차 절).

		🔵 **회차 36 의 40/64 는 첫 값이었다** — 사람이 화면을 보고
		   **20(좁) / 32(넓)** 으로 정했다 (2026-09-02 회차 38 · 갈래 셋 중
		   「많이 좁게」). **고칠 곳은 여전히 이 한 자리다.**
	*/
	padding-block: var(--space-12) var(--space-5);
	text-align: center;
}

/*
	넓은 화면에서만 96 이다 (`3-54` 모바일 회차 ㉠). 320×568 실측에서
	히어로가 화면의 118% 라 첫 화면에 단추가 아예 없었다.
*/
@media (min-width: 48rem) {

	.home-hero__inner {
		padding-block: var(--space-24) var(--space-8);
	}
}

.home-hero__eyebrow {
	color: var(--color-text-invert-soft);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: .08em;
	text-transform: uppercase;
}

/*
	카피 — 가운데 · 어두운 글자 (회차 27). 흰 위판 위에 선다.

	⚠️ 시안 45px 는 우리 `--text-5xl` 과 **같은 값**이다(실측) — 숫자를 박지
	   않고 토큰을 그대로 쓴다.
	⚠️ 차례가 시안과 같아졌다 — **SUB 가 먼저, KEY(h1) 가 뒤**다.
*/
.home-hero__title {
	max-width: 38rem;
	margin: 0;
	color: var(--color-text);
	font-size: var(--text-5xl);
	letter-spacing: var(--tracking-heading);
	line-height: var(--leading-tight);
}

.home-hero__text {
	max-width: 32rem;
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--leading-loose);
}

/*
	🔵 **여기 있던 `.home-hero__actions` 규칙을 걷었다** (회차 30) — 「교회 소개」
	   단추를 빼면서 **교회 마크업에서 그 클래스가 0곳**이 됐다. 죽은 규칙을
	   남기면 다음 사람이 「어디에 쓰이나」를 다시 찾는다.

	⚠️ **강의는 그대로 쓴다** — `course/assets/css/components.css` 에 **자기 규칙이
	   따로 있고** 강의 홈 마크업이 그것을 쓴다(실측). 부모에는 없다.
*/

/*
	히어로 스테이지 — 시안 자세 그대로 (회차 28 · Swiper `effect-creative`).

	🔴 **치수는 여기 모아 이름으로 둔다.** 시안이 준 값이라 우리 눈금(`--space-*`)
	   에 없다 — 성분 지역 속성으로 적어 **한 자리에서 고치게** 한다
	   (`--switch-*` 와 같은 수법).

	🔴 **비균일 축소는 두 층으로 나눈다.** 시안 좌우 패널은 `scale(.4, .884)` 인데
	   Swiper 의 `scale` 은 **하나뿐**이라 균일이다 ⇒ 바깥(슬라이드)은 `.884`,
	   안쪽 상자에 `scaleX(.4 / .884 = .4525)` 를 얹는다. **안쪽 전환도 바깥과
	   같은 620ms · 같은 곡선**이다 — 안 그러면 바깥은 미끄러지는데 안쪽만 툭 튄다.

	⚠️ **`swiper-initialized` 가 붙었을 때만 홀쭉해진다.** 한 장이거나 JS 가 안
	   돌면 그 클래스가 없다 — 그때 패널은 **온전한 600×430** 으로 선다.
*/
/*
	⚠️ **단추 크기는 히어로에 둔다** — 게이지·정지 단추는 스테이지 **밖**에 있다.
	   스테이지에만 두면 그 이름이 안 닿아 선언이 통째로 무효가 되고, **단추가
	   22×22 로 쪼그라든다**(회차 33 실측 · `G-104` 44 를 어긴다). 오류는 안 난다.
*/
.home-hero {
	--hero-arrow: 44px;
	--hero-dur: 620ms;
	--hero-ease: cubic-bezier(.2, 0, .2, 1);
}

.home-hero__stage {
	--hero-stage-h: 470px;
	--hero-perspective: 1600px;
	--hero-panel-w: 600px;
	--hero-panel-h: 430px;
	--hero-side-scale-x: .4525;

	/*
		🔵 **위 여백을 여기서 걷었다** (회차 36). 카피와 패널 사이는 이제
		   `.home-hero__inner` 의 **아래 여백 하나**가 정한다 — 간격을 두 곳에
		   적으면 한쪽만 고쳤을 때 갈린다 (`LS-016` 과 같은 결).
		   **「스테이지에 위 여백이 왜 없지」를 다시 묻지 않게 여기 적어 둔다.**
	*/
	position: relative;
	height: var(--hero-stage-h);
	perspective: var(--hero-perspective);
}

/*
	🔴 **3D 사슬을 우리 것으로 만든다** (회차 34 · 사람이 「각도가 안 보인다」고 잡았다).

	각도(`rotateY(±22deg)`)는 코드에 있었는데 **렌더링이 평평해져** 가로로 납작해
	보였다. 재 보니 사슬이 슬라이드에서 끊겨 있었다:

	  스테이지 `perspective: 1600px` ✓
	    wrapper `preserve-3d` ✓ · `overflow: visible` ✓
	      **슬라이드 `overflow: hidden`** ← vendor `effect-creative.min.css` 가 준다
	        패널 `rotateY(22deg)` — **여기까지 원근이 안 온다**

	🔴 **`overflow` 가 `visible` 이 아니면 규격이 3D 를 평평하게 만든다**(그룹으로
	   묶는 속성이다). 계산값은 `preserve-3d` 라고 말하지만 **쓰이는 값은 flat** 이라
	   자로도 안 잡힌다 — 화면에서만 보인다.

	🔴 **`.swiper-3d` 에 기대지 않는다.** 지금은 그 클래스가 wrapper·슬라이드에
	   `preserve-3d` 를 주고 있는데, 떨림 처방으로 `effect` 를 끄면 **그 클래스가
	   사라져 각도가 또 조용히 죽는다.** 우리 것으로 다시 적는다.

	⚠️ **`.home-hero__panel` 의 `overflow: hidden` 은 그대로 둔다** — 그것은 패널
	   **안쪽 내용**(그림·라벨)을 자르는 것이고 패널 자신의 회전과 무관하다(실측).
*/
.home-hero__stage,
.home-hero__stage .swiper-wrapper,
.home-hero__stage .swiper-slide {
	transform-style: preserve-3d;
}

.home-hero__stage .swiper-slide {
	overflow: visible;
}

/*
	한 장일 때는 Swiper CSS 가 아예 안 실린다 — 그때도 가운데 서게 우리가 깐다.
	Swiper CSS 가 실리는 날에도 이 규칙이 더 좁아 이긴다.
*/
.home-hero__stage .swiper-wrapper {
	display: flex;
	height: 100%;
}

.home-hero__stage .swiper-slide {
	display: flex;
	/*
		⚠️ **`min-width: 0` 이 있어야 좁은 화면에서 패널이 줄어든다.** 없으면
		   칸의 자동 최소 크기가 **내용(600px)**이라 320 화면에서도 600 으로
		   버틴다 — 실측으로 잡았다(패널 0~600 · 화면 320).
	*/
	flex: 0 0 100%;
	min-width: 0;
	align-items: center;
	justify-content: center;
}

/*
	패널 바탕 — 시안 매핑 (회차 31).

	  좌우(비활성)  `--surface-muted`(꾸러미 #EEF1F4) → 우리 `--color-bg-subtle`
	  활성          `--gradient-brand`(sky-500 → navy-500) → 우리 토큰 둘로:
	                `--color-primary` → `--color-bg-inverse`

	⚠️ **꾸러미의 `sky-500`(#00B1E8)을 그대로 안 쓴다** — 흰 글자와 2.48:1 이라
	   우리가 이미 `--color-primary`(#06769E)로 낮춰 둔 색이다(`tokens.css` 에
	   까닭이 적혀 있다). **없는 색을 새로 만들지 않는다.**
*/
.home-hero__panel {
	position: relative;
	overflow: hidden;
	width: var(--hero-panel-w);
	max-width: 100%;
	height: var(--hero-panel-h);
	border: 1px solid var(--color-border);
	background: var(--color-bg-subtle);
}

/* 활성 장(또는 Swiper 가 안 선 한 장짜리)만 브랜드 바탕이다. */
.home-hero__stage:not(.swiper-initialized) .home-hero__panel,
.home-hero__stage.swiper-initialized [data-hero-pose="center"] .home-hero__panel {
	background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-bg-inverse) 100%);
}

/*
	자리표 글자 — **활성 장에서만** 보인다 (시안 그대로).
	⚠️ 안쪽 상자 밖이라 좌우 칸의 `scaleX` 에 안 눌린다.
*/
.home-hero__panel-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	color: var(--color-text-invert);
	font-size: var(--text-xs);
	text-align: center;
	opacity: 0;
	transition: opacity var(--hero-dur) var(--hero-ease);
}

.home-hero__stage:not(.swiper-initialized) .home-hero__panel-label,
.home-hero__stage.swiper-initialized [data-hero-pose="center"] .home-hero__panel-label {
	opacity: 1;
}

.home-hero__panel-inner {
	height: 100%;
}

/*
	🔴 **자세는 자리(`data-hero-pose`)로 준다** (회차 32 · 시안 `relOf()` 그대로).

	전에는 Swiper 의 `creative` 효과가 **진행도**로 자세를 정했는데, 진행도가
	양 끝에서 안 감겨(1번에서 −2 · 3번에서 +2 · 실측) **좌·우가 한쪽에 몰렸다.**
	이제 JS 가 `(k − 활성 + n) % n` 으로 자리를 적어 주고 **CSS 가 그 자리에
	자세를 준다** — n=3 이면 **어느 장에서도 좌·중·우가 하나씩** 있다.

	⚠️ **패널에 건다.** Swiper 는 칸(`.swiper-slide`)에 제 변환을 박는다 —
	   같은 요소에 겹쳐 쓰면 서로 지운다.
*/
.home-hero__stage.swiper-initialized .home-hero__panel {
	transition: transform var(--hero-dur) var(--hero-ease),
		opacity var(--hero-dur) var(--hero-ease);
}

.home-hero__stage.swiper-initialized [data-hero-pose="left"] .home-hero__panel {
	transform: translateX(-440px) translateZ(-160px) rotateY(22deg) scale(.884);
	opacity: .92;
}

.home-hero__stage.swiper-initialized [data-hero-pose="right"] .home-hero__panel {
	transform: translateX(440px) translateZ(-160px) rotateY(-22deg) scale(.884);
	opacity: .92;
}

/*
	비균일 축소 — 바깥이 `scale(.884)` 이므로 안쪽에 `scaleX(.4 / .884)` 를 얹어
	시안의 `scale(.4, .884)` 를 만든다. **전환 곡선은 바깥과 같다.**
*/
.home-hero__stage.swiper-initialized [data-hero-pose="left"] .home-hero__panel-inner,
.home-hero__stage.swiper-initialized [data-hero-pose="right"] .home-hero__panel-inner {
	transform: scaleX(var(--hero-side-scale-x));
	transition: transform var(--hero-dur) var(--hero-ease);
}

/*
	🔴 **±1 밖의 장은 안 보이게 한다** (회차 29 · 회차 28 이 잰 겹침의 처방).

	`rewind` 라 끝에서 **두 칸 떨어진 장**이 생기는데, Swiper 의 `creative` 는
	자세가 **`prev`·`next` 둘뿐**이고 진행도를 `limitProgress` 로 **자른다** —
	그래서 그 장이 옆 장과 **같은 슬롯에 겹쳐** 섰다(회차 28 실측).

	**시안의 `off` 자세는 `opacity: 0` 이다.** 즉 그 자세에서 화면에 남는 것이
	**없다** ⇒ 위치·회전·축소를 흉내 낼 까닭이 없고 **안 보이게 하는 것이 곧
	그 자세다.** (`limitProgress: 2` 로 가면 Swiper 가 자세를 **선형으로 늘려**
	rotateY 44°·opacity .84 를 낸다 — 시안의 26°·0 과 다르다. 소스를 읽고 골랐다:
	`modules/effect-creative.mjs` 의 `data.rotate[i] * |progress|`.)

	⚠️ **슬라이드가 아니라 패널에 건다.** Swiper 는 슬라이드에 `opacity` 를
	   **인라인으로** 박는다 — 클래스 규칙으로는 못 이긴다. 안쪽 상자를 재우면
	   `!important` 없이 된다.
*/
.home-hero__panel {
	transition: opacity var(--hero-dur) var(--hero-ease);
}

.home-hero__stage.swiper-initialized [data-hero-pose="off"] .home-hero__panel {
	opacity: 0;
	pointer-events: none;
}

.home-hero__image {
	height: 100%;
	object-fit: cover;
}

/*
	화살표 — 44×44 **정사각**(모서리 0) · 좌우 거터 · 흰 글리프.
	색은 시안 값을 **토큰으로** 적는다: 선은 `--color-border-on-brand` 가
	이미 `rgba(255,255,255,.55)` 고, 배경은 navy-800 을 55% 로 섞는다.
*/
.home-hero__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hero-arrow);
	height: var(--hero-arrow);
	margin-top: calc(var(--hero-arrow) / -2);
	border: 1px solid var(--color-border-on-brand);
	background: color-mix(in srgb, var(--color-bg-inverse) 55%, transparent);
	color: var(--color-text-invert);
	cursor: pointer;
}

.home-hero__arrow:hover {
	border-color: var(--color-text-invert);
	background: var(--color-bg-inverse);
}

.home-hero__arrow--prev {
	left: var(--container-pad);
}

.home-hero__arrow--next {
	right: var(--container-pad);
}

/* 게이지 — 120×3 ×장수. 지난 것은 채운 채 둔다 (시안 규칙). */
.home-hero__gauges {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	justify-content: center;
	padding: var(--space-8) 0 var(--space-12);
}

.home-hero__gauge {
	overflow: hidden;
	width: 120px;
	height: 3px;
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--color-text-invert) 28%, transparent);
	cursor: pointer;
}

.home-hero__gauge-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--color-text-invert);
}

/*
	🔴 **자동 넘김을 멈추는 단추** (WCAG 2.2.2).

	🔵 **회차 33 에 글자에서 글리프로 바꿨다** — `i-pause` 를 부모 스프라이트에
	   더했다. **화살표와 같은 결**이다(44×44 정사각 · 흰 글리프 · 같은 테두리·바탕).
	   글자는 `visually-hidden` 으로 남아 낭독기가 읽는다.
*/
.home-hero__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hero-arrow);
	height: var(--hero-arrow);
	margin-left: var(--space-4);
	padding: 0;
	border: 1px solid var(--color-border-on-brand);
	background: color-mix(in srgb, var(--color-bg-inverse) 55%, transparent);
	color: var(--color-text-invert);
	cursor: pointer;
}

.home-hero__pause:hover {
	border-color: var(--color-text-invert);
	background: var(--color-bg-inverse);
}

/*
	글리프 둘을 다 그려 두고 **상태로 고른다** — 서랍 단추와 같은 수법.
	JS 는 `aria-pressed` 만 적는다.
*/
.home-hero__pause-icon {
	display: inline-flex;
}

.home-hero__pause-icon--go,
.home-hero__pause[aria-pressed="true"] .home-hero__pause-icon--stop {
	display: none;
}

.home-hero__pause[aria-pressed="true"] .home-hero__pause-icon--go {
	display: inline-flex;
}

/*
	⑵ 빠른 링크 넷 — 칸 사이에 세로선.

	⚠️ **첫 칸에는 왼쪽 선을 안 준다.** `:not(:first-child)` 로 가른다 —
	   꾸러미도 첫 칸만 뺀다.
*/
.home-quick {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

.home-quick__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-quick__item:not(:first-child) {
	border-left: 1px solid var(--color-border);
}

.home-quick__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-6);
	color: var(--color-text);
	font-size: var(--text-lg);
	font-weight: var(--weight-medium);
}

.home-quick__link:hover {
	color: var(--color-primary);
}

.home-quick__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-circle);  /* 40×40 정사각 → 정원 (회차 35) */
	background: var(--color-primary-light);
	color: var(--color-primary);
}

.home-quick__arrow {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--color-text-muted);
}

/* ⑶ 소식 카드 셋 */
.home-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	margin: var(--space-8) 0 0;
	padding: 0;
	list-style: none;
}

.home-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
}

.home-card:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow);
}

.home-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
}

.home-card__title {
	margin: 0;
	font-size: var(--text-xl);
	letter-spacing: var(--tracking-heading);
}

.home-card__title a {
	color: var(--color-text);
}

.home-card__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.home-card__foot {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-4);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/*
	사진 자리표 — 사진이 오기 전까지 서는 회색 칸.

	🔴 **빈 칸으로 두지 않는다.** 무엇이 들어갈 자리인지 글자로 적어야
	   담당자가 「깨진 것」과 「아직 안 넣은 것」을 가른다.
*/
.home-shot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: var(--color-bg-subtle);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.home-shot--brand {
	background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-text) 100%);
	color: var(--color-text-invert);
}

/* 배지 — 카드 윗글·설교 표시 */
.badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
}

.badge--outline {
	border: 1px solid var(--color-border-strong);
	background: transparent;
	color: var(--color-text-muted);
}

/* 탭 — 밑줄형 */
.home-tabs {
	display: flex;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--color-border);
	list-style: none;
}

.home-tabs__link {
	display: inline-block;
	padding-bottom: var(--space-3);
	border-bottom: 2px solid transparent;
	color: var(--color-text-muted);
	font-size: var(--text-md);
	font-weight: var(--weight-medium);
}

.home-tabs__link:hover {
	color: var(--color-text);
}

.home-tabs__link[aria-current="true"] {
	border-bottom-color: var(--color-primary);
	color: var(--color-text);
	font-weight: var(--weight-semibold);
}

/* ⑷ 예배 시간 넷 */
.home-times {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-times__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	background: var(--color-bg);
}

.home-times__name {
	font-size: var(--text-md);
	font-weight: var(--weight-semibold);
}

/*
	요일 — 시각을 꾸미는 줄이라 시각 **위**에 둔다 (`service-times.php` 의
	차례 그대로: 이름 → 요일 → 시각 → 장소).

	형제 둘 사이의 결을 따랐다 — 색은 `__place` 와 같은 흐린 색, 크기는
	그보다 한 칸 크게(`--text-sm`). **시각(`--text-xl` 주요색)이 그대로
	제일 크게 남아야** 카드가 안 흔들린다.
*/
.home-times__day {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.home-times__clock {
	color: var(--color-primary);
	font-size: var(--text-xl);
	font-weight: var(--weight-semibold);
}

.home-times__place {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* ⑸ 이번 주 말씀 — 2단 */
.home-word {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: var(--space-8);
	align-items: stretch;
}

.home-word__feature {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
}

.home-word__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
}

.home-word__badges {
	display: flex;
	gap: var(--space-2);
}

.home-word__title {
	margin: 0;
	font-size: var(--text-2xl);
	letter-spacing: var(--tracking-heading);
}

.home-word__text {
	margin: 0;
	color: var(--color-text-muted);
}

.home-word__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.home-word__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.home-word__label {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.home-word__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-word__row:not(:first-child) {
	border-top: 1px solid var(--color-border);
}

.home-word__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	color: var(--color-text);
	font-weight: var(--weight-medium);
}

.home-word__date {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/*
	── 좁은 화면 ────────────────────────────────

	🔴 **모바일 설계는 7회차다.** 여기서는 **깨지지 않게만** 한다 —
	   여러 칸을 한 칸으로 접고, 칸 사이 세로선을 가로선으로 바꾼다.
	   꾸러미에는 `@media` 가 한 곳도 없다 (실측 0곳).
*/
@media (max-width: 47.9375rem) {

	.home-quick__list,
	.home-cards,
	.home-times,
	.home-word {
		grid-template-columns: 1fr;
	}

	.home-quick__item:not(:first-child) {
		border-top: 1px solid var(--color-border);
		border-left: 0;
	}

	.home-band__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
	판 거터를 20 으로 되돌린다 (`3-54` · 2026-08-31 · 회차 2).

	부모가 넓은 화면에서 거터를 `--space-6`(24)로 넓힌다 (`base.css` `G-68` 옆).
	🔴 **꾸러미는 어느 폭에서나 20 이다** — `--container-pad` 를 20 으로 덮어도
	   그 미디어쿼리가 이겨서 24 로 그려졌다. **토큰만 덮으면 안 되는 자리다.**
	⚠️ **좁은 화면에서는 부모 값이 그대로다** — 이 규칙은 768 위에서만 돈다.
*/
@media (min-width: 48rem) {

	.container {
		padding-inline: var(--container-pad);
	}
}

/* ═══════════════════════════════════════════
   공지 목록 — 3-54 회차 4 · WH-60
   ═══════════════════════════════════════════ */

.hero__eyebrow {
	margin: 0 0 var(--space-2);
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
	알약 탭과 검색 칸이 한 줄에 마주 선다.

	⚠️ **`wrap` 이다.** 좁아지면 검색 칸이 아래로 내려간다 — `nowrap` 으로
	   두면 320 에서 넘친다 (회차 1 에서 머리가 그렇게 넘쳤다).
*/
.notice-tools {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-6);
}

/*
	알약 탭 (`3-54` · 회차 4 · 모서리는 회차 5 ⑴).

	⚠️ **이름만 알약이고 모양은 각졌다.** 꾸러미도 `--pills` 라 부르면서
	   `radius-none` 을 준다 — 「모든 사각형은 각지고 유일한 곡선은 정원」
	   (guidelines/shape-radius.html). 둥근 모양은 사람이 화면에서 물렸다.

	⚠️ **교회에 둔다** (`R-1`). 강의에는 거를 분류가 없다 — 생기면 그때
	   부모로 올린다. 지금 올리면 아무도 안 쓰는 규칙이 부모에 남는다.

	⚠️ **가로로 밀린다.** 분류가 늘면 320 에서 줄이 바뀌는 대신 밀린다 —
	   탭 줄이 두 줄이 되면 아래 표가 들썩인다.
*/
.pill-tabs {
	display: flex;
	flex: 1 1 auto;
	gap: var(--space-2);
	overflow-x: auto;
}

.pill-tabs__item {
	flex: 0 0 auto;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.pill-tabs__item:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/*
	⚠️ **지금 쪽을 색으로만 알리지 않는다** (`G-118`). 바탕이 통째로 갈리고
	   글자 굵기도 오른다 — 색을 못 보는 눈에도 다른 알약이다.
	   마크업에는 `aria-current="page"` 가 같이 있다.
*/
.pill-tabs__item--now {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-weight: var(--weight-semibold);
}

.pill-tabs__item--now:hover {
	color: var(--color-text-invert);
}

.search-form {
	flex: 0 0 auto;
}

.notice-found {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	표 — 격자 세 칸.

	⚠️ **시안은 넷이다** (분류 80 / 제목 1fr / 등록일 120 / 조회 90).
	   「조회」는 우리에게 없어서 뺐다 (`3-54` §2) — 빈 칸을 그리면
	   **없는 것을 있다고 말하는 화면**이 된다.

	⚠️ **위 테두리가 진하다.** 굵기는 다른 줄과 같은 1px 이고 **색**이
	   짙다 — 시안이 그렇다 (`--neutral-1000` 1px). 회차 4 의 2px 는
	   회차 5 ⑵ 에서 되돌렸다.
*/
.notice-list {
	border-top: 1px solid var(--color-text);
}

.notice-list__head,
.notice-row__link {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr) 7.5rem;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.notice-list__head {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
}

.notice-row {
	margin: 0;
}

.notice-row__link {
	color: var(--color-text);
}

.notice-row__link:hover {
	background: var(--color-bg-subtle);
	color: var(--color-primary);
}

.notice-row__title {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--leading-normal);
}

.notice-row__pin {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--color-primary);
}

.notice-row__date {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: center;
}

.notice-list__head span:last-child {
	text-align: center;
}

.notice-list__empty {
	padding: var(--space-16) 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-muted);
	text-align: center;
}

/*
	페이지 번호를 동그랗게.

	⚠️ **좌우 화살표는 안 둥글다.** 부모의 아이콘 단추 모양을 그대로 쓴다 —
	   숫자와 화살표가 같은 동그라미면 어느 것이 쪽이고 어느 것이 이동인지
	   섞인다.
*/
.pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	border-radius: var(--radius-full);  /* 교회에서는 각짐 — 형제 앞뒤 단추(`--radius-sm`=0)와 맞는다 */
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	⚠️ **화살표를 되돌린다.** 위 규칙이 `page-numbers` 를 잡는데 좌우 화살표도
	   그 클래스를 달고 있다 — 실측에서 화살표까지 동그래졌다.
	   부모가 준 각진 모양으로 되돌린다.
*/
.pagination__item .prev,
.pagination__item .next {
	border-radius: var(--radius-sm);
}

.pagination__item .page-numbers:hover {
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

.pagination__item .current {
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-weight: var(--weight-semibold);
}

/*
	320 에서 표를 접는다 (`3-54` §8 · 꾸러미에 없어서 우리가 정했다).

	⚠️ **머리 줄을 감춘다.** 칸이 세로로 쌓이면 「분류 제목 등록일」이
	   가리키는 자리가 없어진다.
	⚠️ **분류와 날짜를 한 줄에 나란히** 두고 제목을 그 위에 올린다 —
	   목록에서 먼저 읽는 것이 제목이다.
*/
@media (max-width: 47.9375rem) {

	.notice-list__head {
		display: none;
	}

	.notice-row__link {
		grid-template-columns: auto 1fr;
		gap: var(--space-1) var(--space-3);
	}

	.notice-row__title {
		grid-row: 1;
		grid-column: 1 / -1;
	}

	.notice-row__category {
		grid-row: 2;
	}

	.notice-row__date {
		grid-row: 2;
		text-align: left;
	}

	.notice-tools {
		align-items: stretch;
	}

	.search-form {
		flex: 1 1 100%;
	}
}

/* ═══════════════════════════════════════════
   공지 상세 — 3-54 회차 4 · IH-38
   ═══════════════════════════════════════════ */

/*
	⚠️ **읽기 폭은 `.container--narrow` 가 준다** (`--container-narrow` 50rem
	   = 800). 시안과 같은 값이라 새 이름을 안 만들었다.
*/
.notice-single__back a {
	display: inline-flex;
	gap: var(--space-1);
	align-items: center;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	위아래 24 · 안 간격 16 (시안 값 — 회차 5 ⑶). 위 24 가 「< 공지 목록」과
	배지 사이를 벌린다 — 전에는 0 이라 붙어 보였다. 안 간격은 `gap` 이
	주므로 자식들의 `margin` 은 전부 0 이다.
*/
.notice-single__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6) 0;
	border-bottom: 2px solid var(--color-text);
}

.notice-single__badges {
	margin: 0;
}

.notice-single__head h1 {
	margin: 0;
	font-size: var(--text-3xl);
	letter-spacing: var(--tracking-heading);
}

/*
	메타 줄 — 시안은 셋(부서·날짜·조회)이고 우리는 날짜 하나다 (`3-54` §2).

	⚠️ **한 칸만 남았어도 `flex` 를 둔다.** 부서나 조회가 생기면 그때
	   `gap` 이 이미 서 있다 — 하나뿐이라고 규칙을 지우면 다음 사람이
	   다시 짠다.
*/
.notice-single__meta {
	display: flex;
	gap: var(--space-6);
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.notice-single .prose {
	/* 위아래 40 (시안 값 — 회차 5 ⑷) */
	padding: var(--space-10) 0;
	font-size: var(--text-lg);
}

/*
	⚠️ **문단 사이를 여기서만 넓힌다.** `.prose > * + *` 는 부모 규칙이라
	   건드리면 강의 본문까지 같이 벌어진다. 글자가 18 로 큰 이 화면에서만
	   24 로 올린다 (시안 값).
*/
.notice-single .prose > * + * {
	margin-top: var(--space-6);
}

.notice-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.notice-single__said {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	이전글·다음글.

	⚠️ **꼬리표 칸을 고정 폭으로 둔다.** 「이전글」과 「다음글」이 같은
	   자리에서 시작해야 두 줄이 나란히 읽힌다.
*/
.notice-nav {
	padding-bottom: var(--space-8);
}

.notice-nav__link {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: var(--text-sm);
}

.notice-nav__link:hover {
	color: var(--color-primary);
}

.notice-nav__label {
	color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   예배와 모임 — 3-54 회차 6 · IH-15
   ═══════════════════════════════════════════ */

/*
	2단 — 본문 1fr + 신청 420px, 사이 48 (시안 값).
	모바일은 한 단으로 접고 폼이 본문 아래로 간다.
*/
.worship__grid {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 64rem) {
	.worship__grid {
		grid-template-columns: minmax(0, 1fr) 26.25rem;
		gap: var(--space-12);
		align-items: start;
	}
}

.worship__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/*
	이 화면의 예배 시간은 **줄**이다 (시안 1fr·140·120). 홈은 카드 그대로다 —
	파트 마크업은 하나고 여기서만 겉을 바꾼다.

	⚠️ 시안 넷째 칸(온라인 중계 배지)은 안 그린다 — `D-65` 에 온라인 여부
	   필드가 없다. 🔴 데이터를 안 늘렸다. 붙일지는 사람이 정한다.
*/
.worship .service-times__list {
	grid-template-columns: none;
	gap: 0;
	border: 1px solid var(--color-border);
}

.worship .service-times__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 8.75rem 7.5rem;
	gap: var(--space-4);
	align-items: center;
	border: 0;
	border-radius: 0;
	padding: var(--space-5);
}

.worship .service-times__item + .service-times__item {
	border-top: 1px solid var(--color-border);
}

.worship .service-times__when {
	margin: 0;
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
}

.worship .service-times__place {
	margin: 0;
}

@media (max-width: 47.9375rem) {
	.worship .service-times__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-1);
	}
}

.worship-depts__heading {
	margin: 0 0 var(--space-5);
}

.worship-depts__grid {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 48rem) {
	.worship-depts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.worship-depts__card {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
}

.worship-depts__name {
	margin: 0;
	font-size: var(--text-base);
}

.worship-depts__meta {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* 오시는 길 띠 — 아이콘 40 동그라미 · 부드러운 브랜드 바닥 (시안 값) */
.worship-visit {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-5);
	border-radius: var(--radius-sm);
	background: var(--color-bg-subtle);
}

.worship-visit__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-circle);  /* 2.5rem 정사각 → 정원 (회차 35) */
	background: var(--color-bg);
	color: var(--color-primary);
}

.worship-visit__body {
	flex: 1 1 12rem;
	min-width: 0;
}

.worship-visit__title {
	margin: 0;
	font-weight: var(--weight-semibold);
}

.worship-visit__address {
	margin: var(--space-1) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.worship-visit__link {
	flex: 0 0 auto;
}

/* ── 신청 카드 — 모양까지만 (접수 미연결) ────── */

.apply-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
}

.apply-card .field {
	margin: 0;
}

.apply-card__eyebrow {
	margin: 0;
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.apply-card__heading {
	margin: calc(-1 * var(--space-3)) 0 0;
	font-size: var(--text-xl);
}

.apply-card__note {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: center;
}

.apply-card__agree {
	font-size: var(--text-sm);
}

/*
	새가족 안내 갈림길 — 카드 **머리**에 선다 (회차 13 에 지었고 회차 14 에
	제출 단추 뒤에서 여기로 올렸다).

	작게 · 흐리게 두어 제목의 딸린 줄로 읽히게 한다. 카드의 `gap` 이
	`--space-5` 라 제목에서 멀어진다 — 제목이 눈썹줄에 쓴 것과 같은 수법으로
	당겨 **한 덩어리로 읽히게** 한다.

	⚠️ **가운데 정렬을 안 쓴다.** 형제 `.apply-card__note` 는 전폭 단추 아래라
	   가운데가 맞지만, 이 줄은 왼쪽 맞춤인 제목 바로 아래다.

	🔴 **밑줄을 되살리지 않는다.** `base.css` 가 `a { text-decoration: none }`
	   이고 회차 5 가 그 기본값을 정본으로 정했다 — 링크임은 색과 굵기가 낸다
	   (`G-118`: 색만으로 알리지 않는다 · 여기서 굵기가 둘째 신호다).
*/
.apply-card__newcomer {
	margin: calc(-1 * var(--space-3)) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.apply-card__newcomer a {
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
}

.apply-card__newcomer a:hover {
	color: var(--color-primary-hover);
}

/* 값이 없어 안내문으로 선 칸의 라벨 — label 요소가 아니라 글자만 */
.field__label-still {
	display: block;
	font-weight: var(--weight-medium);
}

/*
	라디오·체크박스 — 그리는 것은 브라우저가 하고 색만 우리 것을 쓴다.
	직접 그린 가짜 동그라미는 키보드·낭독기 값을 다시 만들어야 한다.
*/
.choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.choice {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	cursor: pointer;
}

.choice input,
.apply-card input[type="checkbox"] {
	accent-color: var(--color-primary);
	width: 1.125rem;
	height: 1.125rem;
}

.apply-card__choices {
	margin: 0;
	padding: 0;
	border: 0;
}

.apply-card__choices legend {
	margin-bottom: var(--space-2);
	padding: 0;
	font-weight: var(--weight-medium);
}

/*
	스위치 — 42×24 트랙에 18 손잡이 (시안 값). 진짜 입력은 숨긴 체크박스다.

	⚠️ 색만으로 알리지 않는다 (G-118) — 손잡이 위치가 같이 움직이고,
	   포커스 고리는 트랙에 그린다.
*/
.switch {
	/* 트랙 42×24 · 손잡이 18 (시안 값) — 셋이 넷째(여백)를 정한다 */
	--switch-track-w: 2.625rem;
	--switch-track-h: 1.5rem;
	--switch-knob: 1.125rem;
	--switch-pad: calc((var(--switch-track-h) - var(--switch-knob)) / 2);

	display: inline-flex;
	gap: var(--space-3);
	align-items: center;
	cursor: pointer;
	font-size: var(--text-sm);
}

.switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.switch__track {
	position: relative;
	flex: 0 0 auto;
	width: var(--switch-track-w);
	height: var(--switch-track-h);
	/*
		🔵 **여기만 알약이다 — 사람이 정했다** (2026-09-01 회차 35 · 셔터스톡 그림).

		🔴 **시안을 일부러 벗어난 자리다.** 꾸러미는 트랙을 **각진 직사각**으로
		   그린다(`components/components.css` 의 `.gs-switch__track` 이
		   `--radius-none`). 「모든 사각형은 각지고 유일한 곡선은 정원」에
		   **예외 하나**가 생겼다 — **다음 교회가 이 예외를 물려받는다** (`R-20`).
		   크기(42×24)와 손잡이(18 정원)는 **시안 그대로다.**

		⚠️ **전역 알약 토큰을 안 만들었다.** 두면 다른 자리도 슬금슬금 알약이
		   된다. **높이의 절반**으로 여기서 파생시킨다 — 크기를 바꿔도 늘
		   정확한 알약이고, 「여기만 예외」가 코드에 드러난다.
	*/
	border-radius: calc(var(--switch-track-h) / 2);
	background: var(--color-border-strong);
	transition: background var(--transition);
}

.switch__knob {
	position: absolute;
	top: var(--switch-pad);
	left: var(--switch-pad);
	width: var(--switch-knob);
	height: var(--switch-knob);
	border-radius: var(--radius-circle);  /* 18×18 정사각 → 정원 (회차 35) */
	background: var(--color-bg);
	transition: transform var(--transition);
}

.switch input:checked + .switch__track {
	background: var(--color-primary);
}

.switch input:checked + .switch__track .switch__knob {
	transform: translateX(calc(var(--switch-track-w) - var(--switch-knob) - 2 * var(--switch-pad)));
}

.switch input:focus-visible + .switch__track {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/*
	대화상자 — <dialog> 라 열기·닫기·ESC 가 브라우저 것이다.
	최대 480 · 그림자 큰 것 (시안 값).
*/
.dialog {
	width: calc(100% - var(--space-8));
	max-width: 30rem;
	padding: var(--space-6);
	border: 0;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
	background: var(--color-overlay);
}

.dialog__title {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xl);
}

.dialog__body {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.dialog__foot {
	display: flex;
	gap: var(--space-2);
	justify-content: flex-end;
	margin-top: var(--space-4);
}

/*
	알림 — 오른쪽 아래 띄움 (시안 값 24·24). 어두운 바닥이라 on-dark 계열
	색을 직접 쓴다 — 링크가 없어 감싸개는 안 붙인다.
*/
.toast {
	position: fixed;
	right: var(--space-6);
	bottom: var(--space-6);
	z-index: 50;
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	min-width: 18rem;
	max-width: 26rem;
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-bg-inverse);
	color: var(--color-text-invert);
	box-shadow: var(--shadow-lg);
}

.toast__accent {
	flex: 0 0 auto;
	align-self: stretch;
	width: 4px;
	background: var(--color-primary);
}

.toast__body {
	min-width: 0;
}

.toast__title {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.toast__text {
	margin: var(--space-1) 0 0;
	font-size: var(--text-sm);
	opacity: 0.75;
}

.toast__close {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: var(--text-base);
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.toast__close:hover {
	opacity: 1;
}

/* ═══════════════════════════════════════════
   교회소개 · 제자훈련 — 3-54 회차 7
   ═══════════════════════════════════════════ */

/*
	밑줄 탭 — 알약 탭과 다른 종이다 (시안 gs-tabs). 묶음 안의 페이지
	사이를 오간다. 지금 쪽은 색 + 굵기 + 밑줄 셋이 같이 말한다 (G-118).
*/
.line-tabs {
	display: flex;
	gap: var(--space-6);
	margin-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-border);
	overflow-x: auto;
}

.line-tabs__item {
	position: relative;
	flex: 0 0 auto;
	padding: 0 0 var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	white-space: nowrap;
}

.line-tabs__item:hover {
	color: var(--color-text);
}

.line-tabs__item--now {
	color: var(--color-text);
	font-weight: var(--weight-semibold);
}

.line-tabs__item--now::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--color-primary);
	content: "";
}

/* 2단 — 사진과 글이 나란히 (시안 1fr/1fr · 사이 48) */
.about-page__grid {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 48rem) {
	.about-page__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-12);
		align-items: center;
	}

	.about-page__grid--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

.about-page__figure {
	margin: 0;
}

/*
	🔴 **그리드 칸은 기본이 `min-width: auto`** 라 **안의 넓은 것이 칸을 밀어낸다.**
	   표 감싸개(`.table-scroll`)를 넣자 320 에서 **페이지가 180px 넘쳤다**(실측) —
	   감싸개는 제 몫을 했는데 **칸이 480 으로 벌어져** 밀릴 자리가 없었다.
	   0 으로 두면 넘치는 대신 **감싸개 안에서** 밀린다.
	⚠️ 넓은 것이 없을 때는 아무것도 안 바뀐다 — 지금 화면들은 그대로다.
*/
.about-page__body {
	min-width: 0;
}

/*
	── 묶음 글의 세로 리듬 (`3-80` · 회차 52 · 사람이 화면을 보고 잡았다) ────

	사람 말: 「문단별로 너무 다닥다닥 붙어 있어.」

	🔴 **까닭은 값이 좁아서가 아니라 값 둘이 같아서다.** 부모는 문단 사이에 16 을
	   주고(`base.css` `.prose > * + *`) **제목 자체에는 위 여백을 안 준다**
	   (`h2 + *` 만 있고 `* + h2` 는 없다). ⇒ 문단 사이 16 · **절 제목 위도 16** —
	   그래서 절이 안 갈린다. 이 화면은 절이 열하나라 그 차이가 크게 보였다.

	🔴 **부모 `.prose` 를 안 건드린다.** 건드리면 설교 전문·처리방침까지 같이
	   벌어진다. 위 `.notice-single .prose > * + *` 가 **같은 이유로 자기 화면에서만**
	   올려 둔 선례다 — 같은 자리에 같은 방식으로 한다.

	🔴 **`:where(.prose)` 인 까닭 — 부품이 자기 여백을 지켜야 한다.** 처음에는
	   `.about-page .prose`(클래스 둘)로 적었는데 그것이 **부품보다 세서** 인용 위가
	   32 에서 24 로 **내려앉았다** (실측: 위 24 · 아래 32 로 어긋났다). 겹쳐서 두 배로
	   벌어지는 것을 걱정했는데 **반대로 덮어쓴 것**이다.
	   `:where()` 는 안쪽 세기를 0 으로 만든다 ⇒ 이 규칙은 **클래스 하나 값**이 되어
	   부모 `.prose > * + *` 는 이기고(자식 파일이 뒤에 실린다) **부품(`.pull-quote`
	   `.source-list` `.table-scroll`)에는 진다.** 값을 두 곳에 안 적는 길이다 (`LS-016`).
	   ⚠️ **이 프로젝트에서 `:where()` 를 처음 쓴다.** 다른 길은 부품 이름을 여기
	   `:not()` 으로 또 적는 것뿐이었다 — 부품이 늘 때마다 이 줄을 고쳐야 한다.

	⚠️ 이웃한 위아래 여백은 **큰 쪽만 남는다**(collapse). 그래서 부품이 24 와 만나도
	   두 배로 안 벌어진다 — 실측으로 확인했다.

	⚠️ **제목 바로 아래도 24 가 된다** — 자리표(`.placeholder--wide`)가 그 자리다.
	   16 을 새로 적어 붙여 두지 않았다: **문단 값을 그대로 받은 것**이지 고른 값이
	   아니다. 붙이고 싶으면 사람이 정한다 (`3-80` 갈래).
*/
.about-page :where(.prose) > * + * {
	margin-top: var(--space-6);
}

/*
	🔴 **절을 가르는 것은 문단 사이가 아니라 제목 위다.** 문단만 24 로 올리면
	   제목도 24 라 여전히 안 갈린다 — 이 두 줄이 ㉠ 의 핵심이다.
*/
.about-page .prose > * + h2 {
	margin-top: var(--space-12);
}

/* 본문 안 작은 제목 — 지금 이 화면에는 셋이 있다. */
.about-page .prose > * + h3 {
	margin-top: var(--space-8);
}

.about-page__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.about-values {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

@media (min-width: 48rem) {
	.about-values {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.about-values__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.about-values__icon {
	color: var(--color-primary);
}

.about-values__name {
	font-weight: var(--weight-semibold);
}

/* 태그 — 28 높이 · 테두리 (시안 값). 데이터가 생겨서 이제야 지었다 */
.tag {
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* 제자훈련 — 사다리 1fr + 사이드 360 (시안 값) */
.training__grid {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 64rem) {
	.training__grid {
		grid-template-columns: minmax(0, 1fr) 22.5rem;
		gap: var(--space-12);
		align-items: start;
	}

	.training__grid--solo {
		grid-template-columns: minmax(0, 1fr);
	}
}

.training-step {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--space-6);
	align-items: start;
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
}

.training-step:last-child {
	border-bottom: 1px solid var(--color-border);
}

/*
	⚠️ 시안은 번호 색으로 진행 상태(밝음/흐림)를 말한다 — 우리는 상태
	   필드가 없어 전부 같은 색이다. 상태가 생기면 여기가 갈릴 자리다.
*/
.training-step__number {
	color: var(--color-primary);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: 1;
}

.training-step__name {
	margin: 0;
	font-size: var(--text-xl);
}

.training-step__name a {
	color: var(--color-text);
}

.training-step__name a:hover {
	color: var(--color-primary);
}

.training-step__desc {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.training-step__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
}

.training__empty {
	color: var(--color-text-muted);
}

.training__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.training-aside__box {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
}

.training-aside__box--soft {
	border: 0;
	background: var(--color-bg-subtle);
}

.training-aside__heading {
	margin: 0 0 var(--space-4);
	font-size: var(--text-base);
}

.training-aside__row {
	display: flex;
	gap: var(--space-3);
	justify-content: space-between;
	margin: 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--color-border);
	font-size: var(--text-sm);
}

.training-aside__row + .training-aside__row {
	margin-top: var(--space-3);
}

.training-aside__when {
	color: var(--color-primary);
}

.training-aside__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════
   사역 화면 셋 · 자리표 — 3-54 회차 8
   ═══════════════════════════════════════════ */

.ministry {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.ministry__section > h2 {
	margin: 0 0 var(--space-5);
}

.ministry-cards {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 48rem) {
	.ministry-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ministry-cards__card {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.ministry-cards__name {
	margin: 0;
	font-size: var(--text-base);
}

.ministry-cards__meta {
	margin: var(--space-2) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	자리표 — 꾸러미 Placeholder 의 말. 콘텐츠가 아니라는 것이 한눈에
	보여야 한다 — 실물처럼 꾸미지 않는다.
*/
.placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 8rem;
	padding: var(--space-6);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-subtle);
	text-align: center;
}

.placeholder__label {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════
   나의 기업 — 3-54 회차 9
   ═══════════════════════════════════════════ */

/*
	어두운 머리 — 링크가 생기면 감싸개가 밑줄을 건다 (G-118 · .on-dark).
*/
.mypage-hero {
	background: var(--color-bg-inverse);
	color: var(--color-text-invert);
}

.mypage-hero__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	align-items: center;
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

.mypage-hero__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-circle);  /* 4rem 정사각 → 정원 (회차 35) */
}

.mypage-hero__eyebrow {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.mypage-hero__heading {
	margin: var(--space-1) 0 0;
	font-size: var(--text-3xl);
}

.mypage-hero__meta {
	margin: var(--space-2) 0 0;
	font-size: var(--text-sm);
	opacity: 0.75;
}

.mypage-top {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin-bottom: var(--space-12);
}

.mypage-top__grid {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 64rem) {
	.mypage-top__grid {
		grid-template-columns: minmax(0, 1fr) 22.5rem;
		gap: var(--space-10);
		align-items: start;
	}
}

.mypage-top__main h2 {
	margin: 0 0 var(--space-5);
}

/*
	곁칸에 상자가 둘이 됐다 (회차 19) — 안 띄우면 두 카드가 맞붙는다.
*/
.mypage-top__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/*
	학습 진입 카드 — 머리에서 뺀 「내 학습」이 들어온 자리 (회차 19).

	형제 `.mypage-alerts` 와 **같은 상자**다 (테두리 · 안 여백 · 세로 쌓기).
	다른 것은 하나뿐 — 이쪽은 **누를 것이 있는 카드**라 단추가 아래에 온다.
*/
.mypage-learn {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.mypage-learn__heading {
	margin: 0;
	font-size: var(--text-base);
}

.mypage-learn__desc {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.mypage-alerts {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.mypage-alerts__heading {
	margin: 0;
	font-size: var(--text-base);
}

.mypage-alerts__note {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════
   글 안에 쓰는 부품 넷 — 연표 · 인용 · 출처 · 표 감싸개 (`3-78`)

   🔴 **모양만 여기 있다. 글은 페이지 본문이다** (`R-20`). 어느 교회의
      이야기도 이 파일에 안 들어간다 — 다음 교회는 같은 부품에 자기 글을 쓴다.

   ⚠️ **본문에서는 파샬을 못 부른다.** 담당자가 「사용자 정의 HTML」 블록에
      붙여넣는 마크업이라 **클래스 이름이 곧 계약**이다. 그래서 이름을 짧고
      뜻이 분명하게 둔다.

   본뜬 것 — `.training-step__number`(연도) · `.training-aside__box--soft`(옅은
   상자) · `.line-tabs`(좁은 화면에서 옆으로 미는 법) · `base.css` 의 표 기본형.
   ═══════════════════════════════════════════ */

/*
	── 연표 ──────────────────────────────────────

	🔴 **점 개수를 안 박는다.** `grid-auto-flow: column` 이라 몇 개든 한 줄에
	   고르게 선다 — 여섯이든 넷이든 아홉이든 CSS 를 안 고친다.

	🔴 **좁은 화면에서는 세로로 접는다. 옆으로 밀지 않는다** — 연표는 훑어
	   내리는 것이고, 가로로 밀면 뒤쪽 점이 있는지도 모른다 (`G-3` 모바일 우선).
*/
.timeline {
	display: grid;
	gap: var(--space-6);
	margin: var(--space-8) 0;
	padding: 0;
	list-style: none;
}


/*
	🔴 **부모의 목록 여백을 부품 쪽에서 끈다** (`3-80` · 회차 52 · 사람: 「1965년만
	   위로 튀어올라와 있어. 높이 정렬 고정 좀 해줘」).

	`base.css` 의 `.prose li + li` 가 주는 8px 이 **우리 부품 안까지 닿는다.**
	칸이 `<li>` 라서 **둘째부터만** 8 씩 내려갔다 — **1965 가 올라간 것이 아니라
	나머지가 내려간 것**이다 (실측 윗선 508.6 대 516.6 · `LS-023` 과 같은 결).

	🔴 **부모 규칙은 안 고친다.** 그것은 글 안의 **보통 목록**이 쓰는 것이고 이
	   화면에도 그런 목록이 둘 있다(「부임 당시의 형편」 셋 · 「배우는 것」 여섯).
	   그 둘은 8 그대로여야 한다.

	🔵 **앞으로 `<li>` 를 쓰는 부품을 만들면 같은 일이 난다.** 끄는 자리는 부품이고
	   꼴은 **두 겹 클래스**(`.a__x + .a__x`)다 — 클래스 하나인 부모 규칙보다 세서
	   **읽는 차례(파일 순서)에 안 기댄다.** 간격은 부품의 `gap` 이 정한다.
*/
.timeline__point + .timeline__point {
	margin-top: 0;
}

.timeline__point {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--space-4);
	align-items: baseline;
	padding-top: var(--space-3);
	border-top: 2px solid var(--color-border);
}

/* 연도 — `.training-step__number` 를 본떴다 (색·굵기·줄높이가 같다). */
.timeline__year {
	color: var(--color-primary);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	line-height: 1;
}

.timeline__text {
	margin: 0;
	color: var(--color-text);
	font-size: var(--text-sm);
}

@media (min-width: 48rem) {

	.timeline {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}

	.timeline__point {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2);
	}
}

/*
	── 인용 두 꼴 ────────────────────────────────

	기본 — 사람의 말. 말과 **말한 사람**이 따로 보인다.
	변형(`--lead`) — 격이 높은 인용(성경 구절 · 이 페이지의 핵심 문장).
	글씨가 크고 왼쪽에 굵은 선, 출처는 작게 아래.

	🔴 **새 색을 안 만든다** — `--color-primary` 계열과 본문 색뿐이다 (`G-2`).
*/
.pull-quote {
	margin: var(--space-8) 0;
	padding: var(--space-5) var(--space-6);
	background: var(--color-bg-subtle);
}

.pull-quote__text {
	margin: 0;
	color: var(--color-text);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
}

.pull-quote__who {
	display: block;
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-style: normal;
}

.pull-quote--lead {
	padding: var(--space-2) 0 var(--space-2) var(--space-6);
	border-left: 4px solid var(--color-primary);
	background: none;
}

.pull-quote--lead .pull-quote__text {
	color: var(--color-primary);
	font-size: var(--text-2xl);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
}

/*
	── 출처 목록 ─────────────────────────────────

	🔴 **주소가 없으면 링크를 안 그린다** (`1-25`). 없는 주소를 `#` 로 채우면
	   눌리는데 아무 데도 안 가는 링크가 남는다 — 그것이 더 나쁘다.
	   나중에 주소가 생기면 그 자리를 `<a>` 로 감싸기만 하면 된다.

	바깥으로 나가는 링크는 **우리 관용대로** `target="_blank" rel="noopener"` 다
	(`location.php` 「지도 앱에서 열기」와 같은 꼴). 화살표는 여기서 붙인다 —
	본문 HTML 은 스프라이트를 못 부른다.
*/
.source-list {
	margin: var(--space-8) 0 0;
	padding: var(--space-5);
	background: var(--color-bg-subtle);
	list-style: none;
}

/* 부모 `li + li` 를 여기서도 끈다 — 까닭은 위 연표 주석에 있다 (`3-80`). */
.source-list__item + .source-list__item {
	margin-top: 0;
}

.source-list__item {
	padding: var(--space-3) 0;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.source-list__item:first-child {
	border-top: 0;
}

.source-list__item a {
	color: var(--color-primary);
}

.source-list__item a::after {
	content: " ↗";
}

/*
	── 표 감싸개 ─────────────────────────────────

	🔴 **표 자체는 안 건드린다** (`base.css` 기본형 그대로). 좁은 화면에서
	   감싸개만 옆으로 민다 — `.line-tabs` 가 쓰는 그 방법이다.

	⚠️ 미는 상자에는 초점이 갈 수 있어야 한다. 키보드만 쓰는 사람이 스크롤
	   못 하는 상자가 생기지 않게 `tabindex="0"` 을 마크업에 둔다 (본문 HTML).
*/
.table-scroll {
	margin: var(--space-6) 0;
	overflow-x: auto;
}

/*
	🔴 **감싸개만으로는 안 밀린다** (실측). `base.css` 의 `table { width: 100% }`
	   때문에 표가 넘치는 대신 **칸이 짜부라진다** — 320 에서 다섯 칸이면 한 칸이
	   50px 대가 되어 글자가 세로로 쪼개진다. 그래서 **밀리기 시작하는 폭**을
	   여기서 정한다.

	⚠️ 값을 한 곳에만 적는다 (`LS-016`). 표가 더 넓어야 하면 이 줄이다.
*/
.table-scroll table {
	--table-min-width: 30rem;

	min-width: var(--table-min-width);
}

/*
	── 넓은 자리표 ───────────────────────────────

	`.placeholder` 는 좁은 칸에서 쓰던 것이라 **가로로 넓은 사진 자리**에는
	8rem 이 납작하다. 이 변형만 더 높다 — 모양은 여전히 한 곳(위 `.placeholder`)이
	정하고 여기서 높이만 덮는다.
*/
.placeholder--wide {
	min-height: 16rem;
}

/* ═══════════════════════════════════════════
   홈 끝 — 사진 띠 · 3-85 회차 57 (CTA 띠는 회차 59 에 걷었다 → 3-86 · 되살릴 커밋 81580f3)
   ═══════════════════════════════════════════ */

/*
	사진 띠 — 제목 + 「자세히보기」 + 가로로 넘치는 사진 줄 (T-176).

	🔴 **페이지가 아니라 이 상자 안에서만 민다.** `overflow-x: auto` 가 줄에 걸려
	   있고, 줄이 격자·플렉스 칸 안에서 밀리려면 감싸개에 `min-width: 0` 이 있어야
	   한다(`.about-page__body` 가 표에서 잡은 그 함정). 스크롤 스냅으로 손가락에
	   한 장씩 걸린다. JS 0 — 까닭은 파트 머리.
*/
.home-photos__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: var(--touch-target);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.home-photos__more:hover {
	color: var(--color-primary);
}

.home-photos__more-icon {
	display: inline-flex;
}

.home-photos__row {
	display: flex;
	gap: var(--space-4);
	margin: 0;
	padding: 0 0 var(--space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	list-style: none;
	-webkit-overflow-scrolling: touch;
}

.home-photos__item {
	flex: 0 0 auto;
	width: min(20rem, 80%);
	scroll-snap-align: start;
}

.home-photos__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.home-photos__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	object-fit: cover;
}

.home-photos__caption {
	display: block;
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

@media (min-width: 48rem) {

	.home-photos__item {
		width: 20rem;
	}
}

/* ═══════════════════════════════════════════
   긴 글 목차 — 3-84 회차 56
   ═══════════════════════════════════════════ */

/*
	절(h2) 목록이 글 옆에 붙어 다니고, 스크롤을 내리면 지금 읽는 절이 진해진다.
	넓은 화면은 **오른쪽 레일**, 좁은 화면은 **본문 위 접힘 상자**(`<details>`).
	마크업은 `template-parts/toc.php` (T-165) · 「지금 읽는 절」은 `toc.js` 가 단다.

	🔴 **역할만 받고 값은 우리 토큰이다** (`G-1`) — 다른 사이트 값을 옮겨 오지 않았다.
	🔴 **`.prose` 는 안 건드린다** — 회차 52(`3-80`)가 세로 리듬을 잡아 뒀다.
	🔴 **교회 자식이다** (`R-1`) — 강의가 긴 글을 갖는 날 `inc/toc.php` 와 함께 부모로.

	── 감싸는 층을 하나 더 뒀다 ──
	안쪽 2단(`.about-page__grid` · 사진 + 글)은 대표 이미지 유무로 2단/1단이 갈린다.
	거기에 칸을 하나 더 붙이면 규칙이 둘로 갈린다(사진 있을 때 셋 · 없을 때 둘).
	바깥에 `.about-page__layout`(본문 + 레일)을 두면 **어느 쪽이든 둘**이라 한 규칙이다.
	인사말(목사 사진 → 2단)과 교회역사(1단) 둘 다 이 한 규칙으로 선다.

	── 분기점 64rem 인 까닭 ──
	48rem 부터 안쪽이 2단이다. 거기에 레일까지 서면 1024 미만에서 글 칸이 300 대로
	떨어진다(재 봤다: 768 이면 768 − 40 − 224 − 48 = 456 을 둘로 나눠 228). 우리 분기점
	중 그다음이 64rem 이라 거기서 레일을 편다. 그 아래는 접힘 상자다.
*/
@media (min-width: 64rem) {

	.about-page__layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 14rem;
		gap: var(--space-12);
		align-items: start;
	}
}

/*
	레일 — 넓은 화면에서만 있고, 머리(끈적) 아래에 붙어 따라 내려온다.
	🔴 `top` 은 머리 높이 **토큰**을 읽는다 — 숫자를 안 박는다. 머리가 커지면 같이 내려간다.
	절이 많아 화면보다 길면 레일 안에서만 민다(페이지는 안 민다).
*/
.about-page__rail {
	display: none;
}

@media (min-width: 64rem) {

	.about-page__rail {
		display: block;
		position: sticky;
		top: calc(var(--header-height) + var(--space-6));
		max-height: calc(100vh - var(--header-height) - var(--space-12));
		overflow-y: auto;
	}

	.toc--inline {
		display: none;
	}
}

/* 접힘 상자 — 좁은 화면 · 본문 위. 여닫기는 브라우저 것(`<details>` · JS 0) */
.toc--inline {
	margin-bottom: var(--space-8);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-subtle);
}

.toc__summary {
	display: flex;
	align-items: center;
	min-height: var(--touch-target);
	padding: var(--space-2) var(--space-4);
	font-weight: var(--weight-semibold);
	cursor: pointer;
}

.toc--inline .toc__body {
	padding: 0 var(--space-4) var(--space-3);
}

.toc__title {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
}

.toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
	줄 하나 — 손가락 자리 44 (`G-104` · `--touch-target`).
	🔴 활성은 **색만이 아니라 굵기와 왼쪽 선**으로도 갈린다 (`G-118`).
	키보드 초점은 부모의 `:focus-visible`(`--focus-ring`)이 그대로 잡는다 — 여기서
	다시 적지 않는다 (`LS-016` · 값을 두 곳에 안 둔다).
*/
.toc__link {
	display: flex;
	align-items: center;
	min-height: var(--touch-target);
	padding: var(--space-2) var(--space-3);
	border-left: 2px solid transparent;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	text-decoration: none;
	transition: color var(--transition);
}

.toc--rail .toc__link {
	border-left-color: var(--color-border);
}

.toc__link:hover {
	color: var(--color-text);
}

.toc__link--active,
.toc__link[aria-current="true"] {
	border-left-color: var(--color-primary);
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
}

/*
	앵커로 갈 때 절 제목이 끈적 머리에 안 가리게 — `scroll-margin-top`.
	🔴 숫자를 안 박고 머리 높이 토큰 둘을 **머리와 같은 분기점(48rem)** 에서 읽는다.
	   (머리는 `.site-header__inner` 가 48rem 부터 `--header-height`, 그 아래는
	   `--header-height-narrow` 다 — 위 머리 절.)
	⚠️ 목차가 있는 화면(`[data-toc-scope]`)에만 건다 — 다른 글의 앵커 이동은 안 바뀐다.
*/
[data-toc-scope] h2 {
	scroll-margin-top: calc(var(--header-height-narrow) + var(--space-6));
}

@media (min-width: 48rem) {

	[data-toc-scope] h2 {
		scroll-margin-top: calc(var(--header-height) + var(--space-6));
	}
}

/*
	부드러운 스크롤 — 🔴 **`html` 전역에 안 건다.** 사이트 전체의 앵커 이동이 바뀐다.
	목차가 있는 문서에만 `:has()` 로 건다 (이 프로젝트에서 `:has()` 는 처음이다 —
	모든 현행 브라우저가 받는다 · 못 받는 브라우저는 그냥 즉시 이동이라 잃는 것이 없다).
	**움직임 줄이기**를 켠 손님은 부모 `base.css` 의 `prefers-reduced-motion` 규칙이
	`scroll-behavior: auto !important` 로 끈다 — 여기 다시 적지 않는다 (2026-09-04 실측).
*/
html:has([data-toc]) {
	scroll-behavior: smooth;
}