/*
	components.css — 공통 컴포넌트

	base.css 는 요소 기본값(h1 · a · input …)과 유틸리티를 담는다.
	이 파일은 **이름 붙은 덩어리**를 담는다. 성격이 달라 파일을 나눴다.

	여기 있는 것은 두 사이트가 함께 쓰는 것뿐이다.
	강의·교회 전용 컴포넌트는 각 자식 테마의 components.css 에 둔다.

	값은 전부 var(--*) 로 쓴다 → design-system.md G-1 · check.sh V-6
	이름은 BEM → G-125~128
	모바일 우선 → G-3

	토큰 정의 → assets/css/tokens.css
	요소 기본값 → assets/css/base.css


	── 큐 순서 (5단) ──────────────────────────────────

	inc/assets.php 가 이 순서로 넣는다. 뒤가 앞을 이긴다.

	  1. 부모 tokens.css      토큰 이름과 기본값
	  2. 부모 base.css        요소 기본값
	  3. 부모 components.css  이 파일
	  4. 자식 tokens.css      토큰 값 덮어쓰기
	  5. 자식 components.css  자식 전용 컴포넌트 · 부모 컴포넌트 덮어쓰기

	자식이 마지막이라 값도 구조도 자식이 이긴다.


	── 값을 직접 쓴 곳 (의도된 예외) ───────────────────

	  4px  안내 상자 왼쪽 강조선. 두께 토큰이 없다
	  1px  테두리. base.css 와 같은 예외
	  700  굵은 글씨. 굵기 토큰이 없다
	  400  체크박스 라벨. base.css 의 label 굵기를 되돌린다
	  44px 페이지 이동 버튼. **G-104 가 정한 최소 터치 영역이다.**
	       간격 토큰으로 바꾸면 토큰 값이 바뀔 때 44 아래로 내려간다
	  2ch  차시 번호 칸. 두 자리(20차시)까지 들여쓰기를 고정한다.
	       글자 폭 기준이라 간격 토큰으로 표현할 수 없다
	  transparent  생략 기호(…). 자리는 차지하되 버튼으로 보이지 않게
*/

/* ═══════════════════════════════════════════
   사이트 머리 — 1-13 · WC-4
   ═══════════════════════════════════════════ */

.site-header {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-6);
	padding-block: var(--space-3);
}

/*
	좁은 화면에서 로고가 한 줄을 차지한다 (2-36).

	메뉴와 같은 줄에 두면 로고가 눌려 두 줄로 접힌다. 사이트 이름은
	길이를 우리가 정하지 못한다 — 담당자가 긴 이름을 넣을 수 있다.
*/
.site-header__brand {
	flex: 1 1 100%;
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
}

.site-header__brand-link {
	color: var(--color-text);
	text-decoration: none;
}

.site-header__brand-link:hover {
	color: var(--color-primary);
}

/*
	로고 (`3-54` 모바일 회차). 코어 custom-logo 마크업을 받는다.
	높이 값은 자식 토큰이 정한다 (G-2 · 교회 34px) — 없으면 부모 기본.
*/
.custom-logo-link {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

.custom-logo {
	display: block;
	width: auto;
	height: var(--logo-height);
}

/*
	좁은 화면 서랍 (`3-54` 모바일 회차 · 2026-09-01).

	<details> 라 여닫이가 브라우저 것이다 — JS 0. Esc·바깥 클릭로는 안
	닫힌다(기본이 아니다). 링크를 누르면 페이지가 바뀌며 닫힌다.
	**CSS 가 죽으면** 이 감춤 규칙도 같이 죽어 두 <nav> 가 그대로 보인다 —
	길이 안 끊긴다.
*/
.site-header {
	position: relative;
}

.site-header__drawer {
	display: none;
}

/*
	🔴 **서랍이 열리는 폭 — 1023 까지다** (2026-09-01 회차 22 · 사람 결정 `3-66` ㉤).

	전에는 `47.9375rem`(767)이었다. 교회 주 메뉴가 **일곱**이라 **1008 아래에서는
	한 줄로 못 선다**(회차 21 쓸기 실측: 768~1007 이 전부 두 줄이고 **넘침은 0** —
	그래서 세 폭만 재던 자가 통과로 읽었다 · `LS-022`).

	🔴 **이 값이 강의도 같이 바꾼다.** 강의 메뉴는 셋이라 **780 부터 한 줄로 잘
	   선다** — 멀쩡한 것을 접을 이유가 없어, **강의 자식이 768~1023 만 되돌린다**
	   (`themes/course/assets/css/components.css` 의 「서랍을 되돌리는 구간」 절).
	   ⇒ **두 파일이 서로를 가리킨다. 한쪽을 고치면 다른 쪽도 본다.**

	⚠️ **미디어 조건은 커스텀 속성을 못 받는다.** 그래서 이 수치가 두 곳에
	   적히는 것을 `LS-016` 방식(한 곳에 두고 가리키기)으로 못 피한다 —
	   **주석으로 서로를 묶는 것이 지금 할 수 있는 전부다.**
*/
@media (max-width: 63.9375rem) {

	/*
	 *  스크롤 CTA 도 접는다 — 320 실측에서 CTA(115px)가 줄에 남아
	 *  브랜드가 81px 로 짜부라져 이름이 두 줄로 쪼개졌다. 스크롤 보조
	 *  단추라 좁은 화면에서는 서랍·본문 단추가 그 몫을 한다.
	 */
	.site-header__nav,
	.site-header__account,
	.site-header .site-header__cta {
		display: none;
	}

	.site-header__inner {
		flex-wrap: nowrap;
	}

	/* 넓은 화면의 「로고 한 줄 통째」를 접는다 — 서랍과 한 줄에 선다 */
	.site-header__brand {
		flex: 1 1 auto;
		min-width: 0;
	}

	.site-header__drawer {
		display: block;
		flex: 0 0 auto;
	}

	.site-header__drawer-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--touch-target);
		min-height: var(--touch-target);
		color: var(--color-text);
		cursor: pointer;
		list-style: none;
	}

	.site-header__drawer-button::-webkit-details-marker {
		display: none;
	}

	.site-header__drawer-open,
	.site-header__drawer-close {
		display: inline-flex;
	}

	.site-header__drawer-close,
	.site-header__drawer[open] .site-header__drawer-open {
		display: none;
	}

	.site-header__drawer[open] .site-header__drawer-close {
		display: inline-flex;
	}

	.site-header__drawer-panel {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 20;
		padding: var(--space-2) var(--container-pad) var(--space-4);
		border-bottom: 1px solid var(--color-border);
		background: var(--color-bg);
	}

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

	.site-header__drawer-list--account {
		margin-top: var(--space-2);
		padding-top: var(--space-2);
		border-top: 1px solid var(--color-border);
	}

	.site-header__drawer-list a {
		display: flex;
		align-items: center;
		min-height: var(--touch-target);
		color: var(--color-text);
	}

	/*
		서랍 안 하위 (`3-72`).

		🔴 **여기서는 접지 않는다.** 세로라 자리가 있고, 접으면 하위 하나를
		   보는 데 **두 번 눌러야** 한다. 들여쓰기로 층만 보인다.
	*/
	.site-header__drawer-sub {
		margin: 0;
		padding: 0;
		padding-inline-start: var(--space-4);
		list-style: none;
	}

	.site-header__drawer-sub a {
		display: flex;
		align-items: center;
		min-height: var(--touch-target);
		color: var(--color-text-muted);
	}

	.site-header__drawer-sub a[aria-current="page"] {
		color: var(--color-primary);
		font-weight: var(--weight-bold);
	}
}

/*
	~~메뉴는 좁은 화면에서 아래로 감싸 내려간다~~ → **좁은 화면은 서랍이다**
	(`3-54` 모바일 회차 · 2026-09-01 사람이 뒤집음). 감싸 내려간 헤더가
	320 에서 교회 229px · 강의 161px 였다(실측) — 화면의 40%다.
	아래 「좁은 화면 서랍」 블록이 그 자리다. 넓은 화면은 그대로 편다.
*/
.site-header__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-4);
	list-style: none;
}

/*
	터치 영역 최소 44px (G-104).

	글자만 놓으면 21px 이라 손가락으로 정확히 누를 수 없다. 세로 여백으로
	키우고 `inline-flex` 로 글자를 가운데 둔다.

	**모바일에서 헤더가 높아지는 것을 감수한 값이다.** 헤더는 고정이
	아니라 스크롤과 함께 올라간다 — 첫 화면만 조금 좁아진다.
*/
.site-header__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-text);
	text-decoration: none;
}

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

/*
	지금 보고 있는 페이지 (aria-current).

	**색만 바꾸지 않는다.** 색을 구분하지 못하면 표시가 없는 것과 같다
	(G-100 대비 규칙과 같은 이유). 굵기를 함께 바꾼다.
*/
.site-header__menu a[aria-current="page"] {
	color: var(--color-primary);
	font-weight: var(--weight-bold);
}

/*
	── 주 메뉴 하위 (`3-72` · 회차 43 에서 단추를 걷었다) ──

	🔴 **화살표 단추를 걷었다** (2026-09-02 · 사람이 화면을 보고 물렀다):
	   「메뉴 옆 아래쪽 화살표가 있으면 안 된다. 그냥 올리면 드롭다운 되는
	   정도만.」 ⚠️ **낡은 판**: 이름 오른쪽 44×44 `<summary>` 단추 +
	   `<details>` 여닫이 + `nav.js`(바깥클릭·ESC·호버). **셋 다 없어졌다.**

	🔴 **여는 것은 `:hover` 와 `:focus-within` 둘이다.** `:hover` 만 걸면
	   **탭 키를 쓰는 사람에게 길이 아예 없어진다** — 화살표가 없어 화면에
	   단서도 안 남는다. 초점이 묶음 밖으로 나가면 저절로 닫힌다.

	⚠️ **닫힌 동안 `display: none` 이다.** 안 보이는 링크에 탭이 멈추지 않게.

	⚠️ 이 규칙은 **넓은 화면에서만 산다** — 좁은 화면에서는 위 서랍 구간이
	   `.site-header__nav` 를 통째로 감춘다. 서랍 안 하위는 접지 않는다.
*/
.site-header__menu > li {
	position: relative;
}

.site-header__sub-list {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 20;

	/*
		판 너비 — 하위 이름이 두 줄로 접히지 않을 만큼만 연다.
		🔴 **값을 여기 한 번만 적는다** (`LS-016`). 늘려야 하면 이 줄이다.
	*/
	--submenu-min-width: 11rem;

	min-width: var(--submenu-min-width);
	margin: 0;
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	list-style: none;
}

.site-header__menu > li:hover > .site-header__sub-list,
.site-header__menu > li:focus-within > .site-header__sub-list {
	display: block;
}

.site-header__sub-list a {
	display: flex;
	align-items: center;
	min-height: var(--touch-target);
	padding-inline: var(--space-2);
	color: var(--color-text);
	white-space: nowrap;
	text-decoration: none;
}

.site-header__sub-list a:hover {
	color: var(--color-primary);
}

.site-header__sub-list a[aria-current="page"] {
	color: var(--color-primary);
	font-weight: var(--weight-bold);
}

/* ── 머리 오른쪽 CTA (2-38) ────────────────────────

   **값을 넘긴 사이트에만 나온다** (`site-header.php` 의 `cta` 인자).
   지금은 강의만 넘기지만 규칙은 부모에 둔다 — 마크업이 부모 파트라
   자식에만 두면 다른 사이트가 값을 넘기는 날 **맨몸으로 선다** (`V14`).
   색은 토큰이라 사이트마다 제 브랜드로 갈린다 (`G-2`).

   🔴 PHP 가 `hidden` 으로 그리고 스크립트가 걷는다 (`1-111`). 스크립트가
      없으면 끝까지 안 보인다 — 죽은 단추가 안 남는다.
   ⚠️ **44px 이다** (`G-104`). 디자인 파일은 위아래 9px 패딩이었다.
   ────────────────────────────────────────── */

/*
	주 메뉴 자리 (`3-54` · 2026-08-31 · 회차 3).

	🔴 **부모가 꾸민다.** 마크업이 부모 것이라 모양도 여기 있어야 한다 (`V-14`).
	⚠️ **기본값은 지금 두 사이트가 서 있던 대로다** — `flex` 를 안 준다.
	   남는 자리를 먹여 가운데로 세우는 것은 **자식이 정한다**.
*/
.site-header__nav {
	min-width: 0;
}

/*
	머리 오른쪽 아이콘 단추 (`3-54` · 2026-08-31).

	🔴 **부모가 꾸민다.** 마크업을 부모가 그리므로 모양도 여기 있어야 한다 —
	   자식에만 두면 그 자리를 채우는 다른 사이트에서 맨몸으로 선다 (`V-14`).

	⚠️ **터치 영역 44×44** (`G-104`). 아이콘은 20 이지만 누르는 자리는 넓어야 한다.
	⚠️ **지금 이 자리를 채우는 사이트는 교회뿐이다.** 강의는 필터를 안 걸어
	   마크업이 아예 안 나온다 — 이 규칙이 강의 화면을 안 건드린다.
*/
.site-header__action {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--touch-target);
	height: var(--touch-target);
	border-radius: var(--radius-circle);  /* 44×44 정사각 → 정원 (회차 35) */
	color: var(--color-text-muted);
}

.site-header__action:hover {
	background: var(--color-bg-subtle);
	color: var(--color-text);
}

.site-header__cta {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-target);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: var(--color-text-invert);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	white-space: nowrap;
	text-decoration: none;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
	background: var(--color-primary-hover);
	color: var(--color-text-invert);
}

.site-header__cta[hidden] {
	display: none;
}

/*
	스크립트가 `hidden` 을 걷은 뒤의 두 상태.

	🔴 **`opacity` 만으로 숨기지 않는다.** 디자인 파일은 `opacity:0` +
	   `pointer-events:none` 인데, 그러면 **키보드 초점이 안 보이는 단추에
	   들어간다.** `visibility: hidden` 을 같이 걸어 낭독기와 초점에서 뺀다.
*/
.site-header__cta--off {
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.site-header__cta--on {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

/* 움직임을 줄이라고 한 사람에게는 그냥 나타난다 (G-97) */
@media (prefers-reduced-motion: reduce) {

	.site-header__cta--off,
	.site-header__cta--on {
		transition: none;
		transform: none;
	}
}

/* ═══════════════════════════════════════════
   사이트 꼬리 — 1-13
   ═══════════════════════════════════════════ */

.site-footer {
	margin-top: var(--space-16);
	border-top: 1px solid var(--color-border);
	background: var(--color-bg-subtle);
}

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

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

/*
	칸이 줄어들지 않게 한다 (`3-54` 회차 10).

	⚠️ 부모 기본 `overflow-wrap: anywhere` 는 **최소 폭 계산까지 바꾼다** —
	   flex 칸의 최소 폭이 글자 하나가 되어, 320 에서 「개인정보처리방침」이
	   73px 칸 안에서 두 줄로 쪼개졌다 (실측). 줄어듦을 끄면 낱말이 통째로
	   다음 줄로 간다 — flex-wrap 이 이미 있다.
*/
.site-footer__menu li {
	flex: 0 0 auto;
}

.site-footer__menu a {
	color: var(--color-text);
	font-size: var(--text-sm);
}

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

/* ── 꼬리 브랜드 블록 (2-42) ───────────────────────

   **값을 넘긴 사이트에만 나온다** (`site-footer.php` 의 `brand`·`tagline`).
   지금은 강의만 넘긴다 — 교회는 이 마크업 자체가 안 나온다 (`1-25`).

   여기는 **중립 기본**이다: 크기·굵기·여백. 어두운 바닥 위의 색이나
   두 칸 배치처럼 사이트마다 갈리는 것은 자식이 얹는다 (`G-2`).
   ────────────────────────────────────────── */

.site-footer__brand {
	margin-bottom: var(--space-4);
}

.site-footer__brand-name {
	margin: 0 0 var(--space-1);
	color: var(--color-text);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-heading);
}

.site-footer__brand-tagline {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	격자 칸이 될 수 있는 자리다. `min-width: 0` 이 없으면 안의 긴 낱말이
	칸을 밀어 **가로 스크롤**을 만든다 — 격자 칸의 기본 최소 폭은 auto 다.
*/
.site-footer__nav {
	min-width: 0;
}

/*
	사업자 정보는 <address> 라 브라우저 기본이 기울임이다. 되돌린다.

	줄바꿈으로 쌓지 않고 흘려 둔다 — 항목이 일곱까지 늘 수 있어
	한 줄씩 쌓으면 푸터가 화면 한 판이 된다.

	⚠️ **강의 자식에만 있었다** (`3-43`, 2026-08-12). `site-footer.php` 는
	   **부모 파트**이고 모든 페이지 하단에 선다 — 교회 푸터의 사업자 정보가
	   스타일 없이 서 있었는데 **아무도 눈으로 못 잡았다.** `V-14` 가 잡았다.
*/
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-style: normal;
}

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

/*
	3열 그릇의 중립 기본 (`3-85` · 회차 57) — `columns` 를 넘긴 사이트에만 나온다.

	🔴 **여기는 색도 격자도 없다.** 어두운 판 · 1.4fr 1fr 1fr · 구분선은 전부
	   자식(교회) 몫이다. 부모는 「맨몸으로 서지 않을 만큼」만 준다 (`V-14`) —
	   칸이 세로로 쌓이고 목록 점이 없고 로고가 블록으로 서는 정도.
	⚠️ 값을 안 넘긴 사이트(강의)는 이 클래스가 마크업에 없어 한 픽셀도 안 바뀐다.
*/
.site-footer__grid {
	display: grid;
	gap: var(--space-8);
	margin-bottom: var(--space-6);
}

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

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

.site-footer__col-title {
	margin: 0 0 var(--space-3);
	color: var(--color-text);
	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;
}

.site-footer__legal-item {
	display: inline;
}

/* ═══════════════════════════════════════════
   고정 페이지 · 글 요약 — 1-14
   ═══════════════════════════════════════════ */

.page-content__header {
	margin-bottom: var(--space-6);
}

.post-summary {
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.post-summary:last-of-type {
	border-bottom: 0;
}

.post-summary__title {
	font-size: var(--text-xl);
}

.post-summary__title a {
	color: var(--color-text);
	text-decoration: none;
}

.post-summary__title a:hover {
	color: var(--color-primary);
}

.post-summary__meta {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.post-summary__excerpt {
	margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════
   폼 칸 간격 — 1-24 · G-105

   칸 자체의 모양은 base.css 에 있다. 여기는 배치만.
   ═══════════════════════════════════════════ */

.field {
	margin-bottom: var(--space-4);
}

.field__required {
	color: var(--color-danger);
}

/* ═══════════════════════════════════════════
   안내 배너 — 1-58 · T-25~29

   색만으로 알리지 않는다 (G-118).
   문구는 파트가 항상 함께 출력한다.
   ═══════════════════════════════════════════ */

.notice-banner {
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-left: 4px solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-bg-subtle);
}

.notice-banner--info {
	border-left-color: var(--color-primary);
}

.notice-banner--success {
	border-left-color: var(--color-success);
}

.notice-banner--warning {
	border-left-color: var(--color-warning);
}

.notice-banner--error {
	border-left-color: var(--color-danger);
	color: var(--color-danger);
}

/* ═══════════════════════════════════════════
   인증 폼 — 1-19 · 1-22 · WC-60 · 1-111

   1-111 (2026-08-27) 에서 카드 한 장으로 다시 그렸다.
   ⚠️ 값은 전부 토큰 이름으로 읽는다 (G-2) — 인디고를 박으면
      교회가 인디고가 된다. 교회는 자기 tokens.css 에서 자기 색을 준다.
   ═══════════════════════════════════════════ */

/* 바탕에 색을 넣지 않는다. 가운데 정렬만 한다 (사람 확인) */
.auth {
	display: flex;
	justify-content: center;
}

/*
	카드 폭 — ~~310px~~ → **380px** (2026-08-27 사람: 「타이트하다」 · `1-112`).

	⚠️ **로그인·가입이 이 규칙 하나를 같이 쓴다.** 둘 다 넓어지는 것이 맞다 —
	두 화면은 같은 폭이어야 한다.
	⚠️ `width: 100%` 가 먼저다. 좁은 화면에서는 카드가 화면을 따라 줄어든다.
*/
.auth-card {
	width: 100%;
	max-width: 380px;
}

/* 로고 자리. 낱말은 PHP 가 사이트 이름에서 읽는다 */
.auth-card__brand {
	margin-bottom: var(--space-2);
	color: var(--color-text);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	text-align: center;
}

.auth-card__title {
	margin-bottom: var(--space-6);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
	text-align: center;
}

.auth-form {
	max-width: none;
}

/* 각진 상자. 거의 안 둥글게 — 참고안 그대로 (사람 확인) */
.auth-form .field input,
.auth-form .field textarea {
	border-radius: var(--radius-xs);
}

/*
	칸 안 오른쪽에 버튼을 넣는 자리.

	버튼을 칸 **밖**에 두면 「인증하기」와 나란히 둘이 서서 무거워진다.
	그래서 칸을 감싸고 버튼을 안쪽에 겹친다.
*/
.field__control {
	position: relative;
	display: flex;
	align-items: stretch;
}

.field__control input {
	width: 100%;
}

.field__toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;

	/* 터치 영역 44px — G-104 */
	display: flex;
	width: var(--touch-target);
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	cursor: pointer;
}

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

/*
	눈 아이콘.

	그림 파일을 안 쓴다 — 요청이 하나 늘고 색을 못 따라온다.
	`currentColor` 를 쓰는 마스크라 위 `color` 가 그대로 먹는다.
*/
.field__toggle-icon {
	display: block;
	width: 20px;
	height: 20px;
	background: currentColor;
	mask: var(--icon-eye) center / contain no-repeat;
	-webkit-mask: var(--icon-eye) center / contain no-repeat;
}

.field__toggle[aria-pressed="true"] .field__toggle-icon {
	mask-image: var(--icon-eye-off);
	-webkit-mask-image: var(--icon-eye-off);
}

/* 칸 안에 버튼이 있으면 글자가 그 밑으로 들어가지 않게 자리를 비운다 */
.field__control input {
	padding-right: var(--touch-target);
}

/*
	「준비 중」 — 자리만 있고 아직 안 붙은 것 (1-111 · 1-112).

	⚠️ 입력칸의 흐린 글자를 걷었다 (2026-08-27 · `1-112`). 칸이 이제 살아 있고
	   누르면 안내가 나온다 — **흐리게 두면 「못 쓰는 칸」으로 읽힌다.**
	   회색으로 남는 것은 곁의 버튼뿐이다.
*/
.field__inline-button {
	color: var(--color-text-muted);
}

.field__inline-button {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	bottom: var(--space-1);
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-xs);
	background: var(--color-bg-subtle);
	font-size: var(--text-sm);
}

/*
	카카오 — **규격 색이라 토큰도 하나뿐이다** (G-134 · G-135 · 1-112).
	앞서 쓰던 회색 비활성 버튼은 사람이 되돌렸다 — 그 규칙은 지웠다.
*/
.button--kakao {
	background: var(--color-kakao);
	border-color: var(--color-kakao);
	color: var(--color-kakao-fg);
}

.button--kakao:hover,
.button--kakao:focus-visible {
	background: var(--color-kakao);
	border-color: var(--color-kakao);
	color: var(--color-kakao-fg);
}

.button__icon {
	flex: none;
}

.button--block {
	display: flex;
	width: 100%;
}

/* 「또는」 가로선 */
.auth-alt {
	margin-top: var(--space-6);
}

.auth-alt__divider {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.auth-alt__divider::before,
.auth-alt__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.auth-alt__soon {
	margin-top: var(--space-4);
}

/* 「준비 중」 안내 — 누르기 전에는 hidden 이라 안 보인다 (1-112) */
.auth-alt__note {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-align: center;
}

/* 폼 전체 오류. 어느 칸이 문제인지 말하지 않는다 (1-22) */
.auth-form__error {
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-left: 4px solid var(--color-danger);
	border-radius: var(--radius);
	background: var(--color-bg-subtle);
	color: var(--color-danger);
}

/* 로그인 유지 — 링크 줄과 같은 줄에 선다 (1-111) */
.auth-form__remember {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: var(--weight-regular);
}

.auth-form__actions {
	margin-top: var(--space-6);
}

/*
	한 줄에 셋 (1-111).

	왼쪽에 로그인 유지, 오른쪽에 링크 둘. 좁으면 줄바꿈한다 —
	`flex-wrap` 이 없으면 작은 화면에서 글자가 잘린다.
*/
.auth-form__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.auth-form__links-right {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-left: auto;
}

/* ═══════════════════════════════════════════
   동의 — 1-25 · T-20~24

   수집 항목·목적·보유 기간을 눈에 띄게 둔다.
   테두리로 묶어 "읽고 체크하는 덩어리"임을 보인다.
   ═══════════════════════════════════════════ */

.consent {
	margin-block: var(--space-6);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.consent__legend {
	padding-inline: var(--space-2);
	font-weight: var(--weight-bold);
}

.consent__terms {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
}

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

.consent__terms dd {
	margin: 0;
}

/* 체크박스 라벨은 base.css 의 블록·굵은 글씨를 되돌린다 */
.consent__field label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-weight: var(--weight-regular);
}

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

/* ── 동의 세 줄 (1-112) ─────────────────────
   전체 동의 · 이용약관 · 개인정보처리방침.
   지금까지의 한 덩어리(dl + 체크 하나)는 위 규칙 그대로 남아 있다 —
   문의·새가족 폼이 그것을 계속 쓴다.
   ───────────────────────────────────────── */

.consent--split {
	padding-block: var(--space-2);
}

/*
	⚠️ **한글은 기본으로 아무 데서나 끊긴다** (1-112 · 2026-08-27 실측).

	「[필수] 개인정보처리방침 동의」가 「[필/수]」·「동/의」로 **낱말 가운데서
	쪼개졌다.** 「내용 보기」가 오른쪽을 먹어 가운데 자리가 좁아서다 —
	배지가 두 줄로 그려진 것을 자로 확인했다(배지 줄 수 2).

	고친 것은 셋이고 **뼈대는 첫째**다:
	  ㉠ `word-break: keep-all`  한글을 **낱말 단위로만** 끊는다 (뼈대)
	  ㉡ 배지에 `white-space: nowrap`  「[필수]」 자체가 안 쪼개진다
	  ㉢ 여백 한 단 · 배지 글자 한 단  보통은 한 줄에 들어간다

	⚠️ **㉢ 만으로는 못 고친다** — 글꼴이 조금만 달라도 다시 깨진다.
	   ㉠·㉡ 이 「쪼개짐」 자체를 없애고 ㉢ 은 흔한 경우를 한 줄로 만들 뿐이다.
	⚠️ ~~카드 폭은 안 건드렸다 (310px · 사람 승인).~~
	   **2026-08-27 에 승인이 바뀌었다** — 사람이 화면을 보고 「타이트하다」고 해
	   **380px 로 넓혔다.** 넓힌 뒤 이 줄들이 여전히 한 줄인지 다시 쟀다.
*/
.consent--split .consent__field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);

	/*
		⚠️ **`.field` 의 아래 여백 16px 을 여기서 누른다** (2026-08-27 · `1-112`).

		세 줄이 다 `.field` 라 16px 씩 벌어져 **한 덩어리로 안 읽혔다.**
		🔴 **누르는 자리(44px)는 안 건드린다** — 라벨의 `min-height` 가 그대로다 (`G-104`).
		줄어드는 것은 **줄과 줄 사이**지 손가락이 닿는 자리가 아니다.
	*/
	margin-bottom: 0;
}

/* 체크박스가 작아져도 누르는 자리는 안 작아진다 (조건 ⑦ · G-104) */
.consent--split .consent__field label {
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	min-height: var(--touch-target);
	font-size: var(--text-sm);
	word-break: keep-all;
}

.consent__field--all {
	border-bottom: 1px solid var(--color-border);
}

.consent__field--all label {
	font-weight: var(--weight-bold);
}

.consent__tag {
	flex: none;
	white-space: nowrap;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.consent__view {
	flex: none;
	margin-left: auto;
	white-space: nowrap;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	⚠️ **`.consent__detail` 셋과 `.consent__note--summary` 를 지웠다**
	(2026-08-27 · `1-112`). 접기 상자 → 한 줄 평문 → **화면에서 뺌** 순으로
	두 번 지웠고, 그때마다 **쓰는 곳이 0 인 것을 재고** 지웠다.
	`.consent__note` 자체는 남는다 — `else` 갈래(문의·새가족)가 쓴다.
*/

/* ═══════════════════════════════════════════
   내 정보 (`/my/`) — 1-23 · WC-50~53
   ═══════════════════════════════════════════ */

.dashboard__courses,
.dashboard__profile {
	margin-bottom: var(--space-12);
}

.dashboard__info {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-2) var(--space-4);
	margin-block: var(--space-4);
}

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

.dashboard__info dd {
	margin: 0;
}

.dashboard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* ═══════════════════════════════════════════
   커리큘럼 — 1-62 · WC-24 · T-30~33
   ═══════════════════════════════════════════ */

/*
	폭을 정하지 않는다.

	같은 파트가 두 맥락에 놓인다.

	  강의 판매 페이지 — 데스크톱에서 신청 박스와 나란히 (WC-22). 좁은 칸
	  교회 과정 소개  — 전폭

	여기서 max-width 를 잡으면 한쪽이 반드시 어긋난다.
	**폭은 바깥 컨테이너가 정한다.**
*/
/*
	번호는 **과정 전체에서 이어진다.** 섹션마다 1 로 돌아가지 않는다.

	섹션당 리셋하면 20차시 4섹션이 `1~5 · 1~6 · 1~5 · 1~4` 가 되어
	**화면 어디에도 20 이 없다.** 신청 박스는 "20차시"라고 말한다 (2-13 실측).

	그래서 counter-reset 을 .curriculum__items(섹션당 하나)가 아니라
	여기에 둔다. → 2-13
*/
.curriculum {
	margin-bottom: var(--space-8);
	counter-reset: curriculum;
}

.curriculum__heading {
	margin-bottom: var(--space-4);
}

.curriculum__section + .curriculum__section {
	margin-top: var(--space-6);
}

.curriculum__section-name {
	margin-bottom: var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/*
	번호는 코어 목록 스타일을 쓰지 않는다.

	차시 20개까지 간다 (샘플 6번). 기본 번호는 자릿수가 늘면 들여쓰기가
	흔들려 제목 왼쪽 선이 어긋난다. 직접 붙이고 폭을 고정한다.

	⚠️ 여기에 counter-reset 을 두지 않는다. 두면 섹션마다 1 로 돌아가
	   **두 자리가 나오지 않고**, 위 근거 자체가 성립하지 않게 된다.
	   리셋은 .curriculum 에 있다 (2-13).
*/
.curriculum__items {
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	list-style: none;
}

.curriculum__item {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	counter-increment: curriculum;
}

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

.curriculum__item::before {
	flex: 0 0 auto;
	min-width: 2ch;
	color: var(--color-text-muted);
	content: counter(curriculum);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

/*
	제목이 남은 폭을 다 쓴다.

	상태 표시가 오른쪽 끝에 붙어야 눈이 한 줄을 훑는다.
*/
.curriculum__link,
.curriculum__title {
	flex: 1 1 auto;
}

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

.curriculum__type {
	flex: 0 0 auto;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);  /* 가로가 긴 배지 → 알약 (강의) · 교회에서는 각짐 */
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.curriculum__state {
	flex: 0 0 auto;
	font-size: var(--text-xs);
}

/*
	색만으로 알리지 않는다 (G-118).
	"완료"는 글자로 나가고 색은 거들기만 한다.
*/
.curriculum__state--done {
	color: var(--color-success);
}

/*
	잠금 표시만 한 단계 크게 둔다.

	"완료"는 글자라 --text-xs 에서도 읽힌다. 자물쇠는 그림이라
	같은 크기면 뭉개진다. 옆에 글자가 없어 크기가 유일한 단서다.
*/
.curriculum__state--locked {
	font-size: var(--text-sm);
}

.curriculum__item--done .curriculum__link,
.curriculum__item--done .curriculum__title {
	color: var(--color-text-muted);
}

.curriculum__item--locked .curriculum__title {
	color: var(--color-text-muted);
}

.curriculum__note {
	margin-top: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════
   페이지 이동 — 1-59 · T-130~134
   ═══════════════════════════════════════════ */

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

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
	터치 영역 최소 44×44px (G-104).

	번호 페이지 이동은 손가락으로 누르는 것 중 가장 작다.
	글자 크기가 아니라 **누를 수 있는 넓이**를 먼저 정한다.
*/
.pagination__item .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
}

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

.pagination__item .page-numbers.current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-text-invert);
}

/*
	생략 기호는 누를 수 없다. 테두리를 주면 버튼으로 보인다.
*/
.pagination__item .page-numbers.dots {
	border-color: transparent;
	color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   강의 목록 — 2-8 · WC-40
   ═══════════════════════════════════════════ */

/*
	모바일 1열. 데스크톱 2열은 아래 미디어 쿼리에서 (G-3 모바일 우선).
*/
.course-list {
	display: grid;
	gap: var(--space-6);
}

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

/* ═══════════════════════════════════════════
   강의 카드 — 2-7 · WC-41 · WC-44
   ═══════════════════════════════════════════ */

/*
	position 은 아래 __link::after 가 덮을 기준이다.
	flex 는 가격을 맨 아래로 밀기 위한 것이다 — 카드마다 줄 수가 달라도
	가격 높이가 맞는다 (WC-44 · 할인가 없는 강의가 있다).
*/
.course-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);
}

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

/*
	포커스 표시를 카드에 준다 (G-102).

	링크는 제목 글자에만 있어서, 기본 외곽선은 글자 둘레에만 생긴다.
	**무엇이 눌리는지와 어긋난다** — 실제로 눌리는 것은 카드 전체다.
*/
.course-card:focus-within {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* ── 썸네일 ───────────────────────────────── */

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

.course-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
	이미지가 없을 때도 자리를 지킨다.

	영역을 없애면 2열에서 카드 높이가 어긋난다 (WC-44).
	글자는 넣지 않는다 — 제목이 바로 아래에 있다.
*/
.course-card__thumb--empty {
	background: var(--color-bg-subtle);
}

/* ── 본문 ─────────────────────────────────── */

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

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

.course-card__link {
	color: var(--color-text);
	text-decoration: none;
}

/*
	카드 전체를 누를 수 있게 덮는다 (G-108).

	링크 이름은 제목 하나로 두고 (스크린리더), 누르는 영역만 넓힌다.
	카드 전체를 <a> 로 감싸면 안의 모든 글자가 링크 이름이 된다.
*/
.course-card__link::after {
	position: absolute;
	content: "";
	inset: 0;
}

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

/* ── 하단 슬롯 ────────────────────────────── */

/*
	margin-top: auto 가 슬롯을 카드 맨 아래로 민다.
	줄 수가 다른 카드끼리도 아랫줄이 맞는다.

	**정렬 기준이 가격이 아니라 슬롯이다** (1-76). 전에는 .course-card__price
	에 걸려 있어서 가격이 없는 사이트에서는 기준 자체가 사라졌다 —
	교회 과정은 판매하지 않는다.

	비어 있어도 된다. 카드 높이는 grid 가 맞춘다.
*/
.course-card__foot {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	margin-top: auto;
}

.course-card__price-was {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	text-decoration: line-through;
}

.course-card__price-now {
	font-size: var(--text-lg);
}

/* ═══════════════════════════════════════════
   태블릿 이상 — G-86 (768px)
   ═══════════════════════════════════════════ */

@media (min-width: 768px) {

	.site-header__inner {
		gap: var(--space-6);
	}

	/* 카드 2열 (WC-44). 두 사이트가 같다 — 1-76 에서 부모로 옮겼다 */
	.course-list {
		grid-template-columns: 1fr 1fr;
	}

	/*
		한 줄로 편다 (WC-4 · G-86).

		로고가 100% 를 놓고 자기 폭만 쓴다. 계정 링크는 `auto` 여백으로
		오른쪽 끝에 붙는다 (IC-65 "헤더 우측").

		`justify-content: space-between` 을 쓰지 않는다. 주 메뉴가 비는
		사이트(교회 초기)에서는 로고와 계정이 양 끝으로 벌어지는데,
		`auto` 여백은 항목이 몇 개든 같은 자리를 지킨다.
	*/
	.site-header__brand {
		flex: 0 0 auto;
	}

	.site-header__account {
		margin-inline-start: auto;
	}

	.consent {
		padding: var(--space-6);
	}
}

/* ═══════════════════════════════════════════
   스팸 방지 숨은 칸 — 1-28
   ═══════════════════════════════════════════ */

/*
	.visually-hidden 과 다르다.

	그쪽은 화면에서만 감추고 스크린리더는 읽는다. 여기는 반대로
	**아무에게도 보이면 안 된다** — 읽히면 사람이 채우고 막힌다.

	CSS 가 실패하면 이 칸이 보인다. 그래서 파트에 "이 칸은 비워 두세요"
	라벨을 붙여 뒀다. 숨기는 데 실패해도 사람은 통과해야 한다.
*/
.form-guard {
	display: none;
}

/* ═══════════════════════════════════════════
   과정 히어로 — 2-10 · WC-10 · IH-110 (3-43)
   ═══════════════════════════════════════════ */

/*
	⚠️ **강의에만 있던 것을 부모로 올렸다** (`3-43`, 2026-08-12).

	두 자식이 **같은 파트 이름·같은 클래스**를 쓴다 (`hero-course.php` ·
	`enroll-box.php`). 강의만 먼저 칠해서 자식에 있었을 뿐이지 **원래
	자식 것이 아니었다** — 양쪽이 쓰면 부모다 (`R-1`).

	`check.sh V-7` 은 **CSS 를 안 본다.** 교회에 복사했으면 그 중복을
	영원히 아무도 못 잡았다 → verification.md 「자식-자식 CSS」

	자식에 남는 것 — 강의: 가격(`__price*`) · 교회: `__anchor` ·
	`enroll-box__heading` · `enroll-box__actions`
*/

.hero-course {
	margin-bottom: var(--space-8);
}

/*
	이미지가 없으면 이 덩어리 자체가 나오지 않는다.
	카드와 다르다 — 화면 상단 전체를 빈 색으로 채우지 않는다 (2-10).
*/
.hero-course__media {
	margin-bottom: var(--space-6);
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.hero-course__image {
	display: block;
	width: 100%;
	height: auto;
}

.hero-course__title {
	margin-bottom: var(--space-2);
}

.hero-course__subtitle {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

/*
	히어로의 CTA. 강의 판매 페이지에서는 이 덩어리가 나오지 않는다 —
	인자를 안 넘기면 파트가 그리지 않는다 (T-54 · T-55).
*/
.hero-course__actions {
	margin: var(--space-6) 0 0;
}

/* ═══════════════════════════════════════════
   등록·수강 신청 박스 — 2-11 · WC-20~23 · IH-111 (3-43)
   ═══════════════════════════════════════════ */

/*
	⚠️ **두 사이트가 같은 상자를 쓰되 안에 든 것이 다르다.**

	  강의   가격 · 「수강 신청」 단추 · `D-57` AND `D-91`
	  교회   값 없음 · **단추 없음** · 문의 안내 (`3-22` 넷째 축)

	상자·사실·안내·문의 줄은 같다. 갈리는 것만 자식에 둔다.
*/
.enroll-box {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-subtle);
}

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

.enroll-box__button {
	display: block;
	width: 100%;
	text-align: center;
}

.enroll-box__note {
	margin: var(--space-3) 0 0;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.enroll-box__contact {
	margin: var(--space-2) 0 0;
	font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════
   대상 · 혜택 — 2-12 · WC-12 · WC-13 · IH-112 · IH-113 (3-43)
   ═══════════════════════════════════════════ */

/*
	⚠️ **부모 파트인데 스타일이 강의 자식에만 있었다** (`3-43`, 2026-08-12).
	   `course-target.php` · `course-benefits.php` 는 `base/template-parts/`
	   에 있고 교회 과정 소개도 그대로 부른다 — **교회 화면에서 두 덩어리가
	   붙어 있었다.**

	`hero-course`·`enroll-box` 보다 한 단계 더 명백한 어긋남이다. 저 둘은
	「자식 파트끼리 같은 이름」이었지만 이건 **파트 자체가 부모**다.

	⚠️ **값을 한 글자도 안 바꿨다.** 옮기기만 했다 — 강의 계산값이 달라지면
	   1순위 사이트가 회귀한다.
*/

.course-target,
.course-benefits {
	margin-bottom: var(--space-8);
}

/* 부모 .curriculum__heading 과 같은 간격을 준다. */
.course-target__heading,
.course-benefits__heading {
	margin-bottom: var(--space-4);
}

.course-target__body {
	margin: 0;
	white-space: pre-line;
}

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

	   묶는 일은 이미 바깥이 한다: 소제목 「배우는 내용」과 항목 사이 여백.
	   여기서는 소제목에 **왼쪽을 맞춘다.**

	   순서가 뜻을 가지는 목록만 마커를 되살린다 (교회 `newcomer-steps__list`
	   의 `decimal`) → design-system.md G-120~122

	⚠️ **두 사이트가 함께 움직였다.** 이 규칙은 `3-43` 에서 강의 자식으로부터
	   올라온 것이라 고치면 강의 판매 페이지도 바뀐다 — 의도한 것이다.
	   전후 실측에서 갈린 값은 이 `padding-left` 하나뿐이다 (`3-47`).
*/
.course-benefits__list {
	margin: 0;
	padding-left: 0;
}

.course-benefits__item + .course-benefits__item {
	margin-top: var(--space-2);
}

/*
	━━ 입력칸 · 선택 · 아이콘 단추 (`3-54` · 회차 4 · 2026-08-31) ━━━━━━━━

	🔴 **부모에 둔다.** 검색·입력칸·선택은 강의도 쓴다 (`R-1`). 지금 부르는
	   화면은 교회 공지 목록뿐이지만, 이 셋은 사이트 말이 아니다 —
	   어느 사이트에서도 같은 네모에 같은 글자를 넣는다.

	🔴 **값을 직접 쓰지 않는다** (`G-2`). 전부 이름이다. 그래서 교회에서는
	   모서리가 각지고(`--radius-sm: 0`) 강의에서는 둥근다 — CSS 를 안 고친다.

	⚠️ **높이가 시안(40)보다 크다.** `--touch-target`(44)을 쓴다 —
	   `G-104` 가 누르는 자리를 44 로 정했고 그것이 시안보다 우선한다.
*/
.search-form {
	display: flex;
	gap: var(--space-2);
}

/*
	⚠️ **단추 글자를 안 쪼갠다.** 좁아지면 단추가 먼저 눌리는데 `body` 의
	   `overflow-wrap: anywhere` 가 **낱말 한가운데를 자른다** — 320 에서
	   「검색」이 「검 / 색」이 됐다 (실측). 줄어들 자리는 입력칸이다.

	⚠️ **`min-width: 0` 이 있어야 입력칸이 준다.** flex 항목의 기본
	   최소 너비는 내용 크기라 이것 없이는 아무것도 안 줄고 넘친다.
*/
.search-form .button {
	flex: 0 0 auto;
	white-space: nowrap;
}

.search-form .input {
	min-width: 0;
}

.input {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
}

.input__icon {
	position: absolute;
	left: var(--space-3);
	display: inline-flex;
	color: var(--color-text-muted);

	/* 아이콘을 눌러도 칸이 잡히게 둔다. */
	pointer-events: none;
}

.input__field,
.select__field {
	width: 100%;
	min-height: var(--touch-target);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--text-md);
}

.input--icon .input__field {
	padding-left: var(--space-8);
}

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

.input__field:focus-visible,
.select__field:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 1px;
}

.select {
	display: flex;
	flex: 0 0 auto;
}

/*
	⚠️ **화살표를 안 지운다.** `appearance: none` 으로 지우고 직접 그리면
	   그 그림을 값으로 박게 되고(`G-2` 위반) 브라우저마다 다르게 선다.
	   기본 화살표는 어느 사이트에서도 「고를 수 있다」를 바로 말한다.
*/
.select__field {
	width: auto;
	padding-right: var(--space-2);
}

/*
	아이콘 단추 — 글자 없이 아이콘만 있는 네모.

	⚠️ **이름을 읽을 것이 안에 있어야 한다.** 아이콘은 `aria-hidden` 이라
	   부르는 쪽이 `.visually-hidden` 글자를 같이 넣는다.

	⚠️ **페이지 넘김의 좌우 화살표가 이 모양을 그대로 쓴다.** 코어가 만든
	   `<a class="prev">` 에는 클래스를 못 붙여서 여기서 같이 잡는다 —
	   두 벌로 적으면 한쪽만 고쳐진다.
*/
.icon-button,
.pagination__item .prev,
.pagination__item .next {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: var(--touch-target);
	min-height: var(--touch-target);
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-text-muted);
	cursor: pointer;
}

.icon-button:hover,
.pagination__item .prev:hover,
.pagination__item .next:hover {
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.icon-button:focus-visible,
.pagination__item .prev:focus-visible,
.pagination__item .next:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 1px;
}