/*
Theme Name: Watercourse
Theme URI: https://watercourse.org
Description: 물줄기교회 홈페이지 테마. Twenty Twenty-Five 차일드 테마이며, 디자인 토큰은 theme.json에 있다.
Author: 물줄기교회
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: watercourse
*/

/* 색·타이포·간격 토큰은 theme.json이 담당한다. 여기에는 토큰으로 표현할 수 없는 것만 둔다. */

/* 입력칸과 단추는 테두리 기준으로 잰다.
 * 이 테마는 content-box 를 쓰는데, 폼 요소는 거의 늘 `width:100%` 에 좌우 padding 을
 * 함께 준다. 그대로 두면 그 padding 만큼 부모를 넘어간다 — 가입 신청서의 입력칸과
 * 단추가 좁은 화면에서 실제로 삐져나갔다. */
input,
button,
select,
textarea {
	box-sizing: border-box;
}

/* 한글 줄바꿈 — 설계서 6.3 */
body {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* --- 설계서 6.5 UI 표기 규칙 --- */

/* 성경 본문: 알약 칩. 줄바꿈 금지 */
.wc-chip {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 1px 9px;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-2);
	background: #fff;
	white-space: nowrap;
}

/* 재생시간: 배지 */
.wc-duration {
	display: inline-block;
	background: #edf2f1;
	border-radius: 4px;
	padding: 1px 7px;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 카드 썸네일 위에 얹히는 재생시간 배지 */
.wc-duration--on-thumb {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
}

/* 날짜: 월/일 스택 뱃지 */
.wc-datebadge {
	flex: 0 0 40px;
	text-align: center;
	background: var(--wp--preset--color--water-soft);
	border-radius: 8px;
	padding: 4px 0 5px;
}

.wc-datebadge__month {
	display: block;
	font-size: 0.6rem;
	color: var(--wp--preset--color--water);
	font-weight: 600;
}

.wc-datebadge__day {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

/* 목록 행: 두 줄 — 1줄 제목 전폭, 2줄 칩 + 배지 */
.wc-row {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--wp--preset--color--line);
	align-items: flex-start;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.wc-row__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.wc-row__title {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.5;
}

.wc-row__meta {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

/* 설교자는 반드시 행 단위로 표기한다 — 설계서 6.5 */
.wc-row__speaker {
	font-size: 0.72rem;
	color: var(--wp--preset--color--ink-2);
}

/* ==========================================================================
   페이지 뼈대 — 시안 공통 크롬
   ========================================================================== */

/* **좌우만 정한다.** 단축으로 쓰면 위아래가 0으로 밀려, 이 클래스를 함께 쓰는
   헤더(.wc-nav)와 본문(.wc-main)의 여백이 통째로 사라진다 — 좁은 화면에서 실제로
   그랬다. 여기서 정할 것은 본문 폭과 좌우 여백뿐이다. */
.wc-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(36px, 8vw, 88px);
	padding-right: clamp(36px, 8vw, 88px);
}

.wc-main {
	padding-top: 44px;
	padding-bottom: 20px;
}

.wc-serif {
	font-family: var(--wp--preset--font-family--serif);
}

.wc-header {
	background: var(--wp--preset--color--bg);
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: relative;
	z-index: 2;
}

/* 본문 바로가기. **숨기되 초점은 받을 수 있어야 한다** — `display:none` 이면 탭으로도
   닿지 않아 있으나 마나다. 초점을 받으면 왼쪽 위로 들어온다. */
.wc-skip {
	position: absolute;
	left: 8px;
	top: 8px;
	/* **높이로 숨기지 않는다.** `top:-60px` 로 밀어 두었더니 글자가 커지면서 아래쪽이
	   화면 안으로 삐져나왔다 — 숨김이 글자 크기에 딸려 다니면 안 된다. */
	transform: translateY(-200%);
	z-index: 100;
	padding: 12px 16px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--water);
	border: 2px solid var(--wp--preset--color--water);
	border-radius: 8px;
	text-decoration: none;
	transition: transform .12s ease;
}

.wc-skip:focus { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.wc-skip { transition: none; }
}

.wc-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.wc-logo {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	text-decoration: none;
}

/* 간판 도안은 두 줄이라 전보다 높아야 읽힌다. 32px 이면 한 줄이 11px 남짓이 되고 인장은
   무늬로만 보인다(2026-09-12). 폭은 오히려 줄어(218 → 151px) 메뉴 자리는 넓어진다.
   **46px 가 한도다.** 접힌 메뉴의 서랍이 머리글 위에서 64px(`.wc-nav.wc-fold ul`)에서
   시작하는데, 로고가 더 높아지면 서랍이 로고 밑단을 덮는다. 지금은 딱 맞닿는다. */
.wc-logo-img {
	height: 46px;
	width: auto;
	max-width: 46vw;
	object-fit: contain;
	object-position: left center;
	display: block;
}

/* 틈은 자리에 맞춰 줄어든다. 항목이 하나 늘 때마다(「건의」를 넣은 날 실제로) 이름이
   두 줄로 접혔는데, 접히는 것보다 틈이 좁아지는 편이 낫다. */
.wc-nav ul {
	display: flex;
	gap: clamp(12px, 1.7vw, 26px);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	align-items: center;
}

.wc-nav a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* 손가락 목표. 글자 높이만으로는 26px 이었다 — 대부분의 성도가 폰으로 들어온다.
   **메뉴 링크에만 건다.** `.wc-nav a` 에 걸었더니 로고·검색·내 자리까지 44px 로 밀려
   헤더가 12px 자랐고, 폰 드롭다운이 `top:64px` 라는 **옛 헤더 높이에 맞춘 상수**를
   쓰고 있어 패널이 로고 줄로 올라왔다. 값 하나가 다른 값의 전제였다. */
.wc-nav ul a {
	min-height: 44px;
	/* ⚠️ **이름 안의 공백에서 줄이 바뀌면 그 항목만 두 줄이 된다.** 「지난 설교」·「좋은
	   씨앗」·「온라인 예배」 셋이 그렇고, 셋만 높아지면 아이콘 줄이 어긋난다. */
	white-space: nowrap;
}

/* 방송 중 표시.
   ⚠️ **자리를 차지하지 않는다.** 성도 메뉴는 일곱 항목이라 1180px 아래에서 이미 햄버거로
   넘어간다 — 점이 흐름에 끼면 그 선이 또 올라간다. 아이콘 위에 얹는다. */
.wc-nav-live {
	/* 점·알약을 얹을 기준. **이것 하나만 필요하다.** */
	position: relative;
}

/* ⚠️ **`display` 를 `.wc-nav-live` 에 걸지 않는다.** 이 클래스는 햄버거 단추에도 붙는데,
   `.wc-menu-btn { display: none }`(아래 미디어 쿼리 밖 기본값)과 **특정도가 같다.** 그러면
   뒤에 온 쪽이 이기고, 그 순서는 이 파일에서 두 블록의 위치라는 우연이다 — 새 규칙이
   아래에 놓이는 날 데스크톱 모든 폭에서 햄버거가 나타난다. 메뉴 안쪽에만 건다. */
.wc-nav ul .wc-nav-live {
	display: inline-flex;
	align-items: center;
}

.wc-live-dot {
	position: absolute;
	top: -1px;
	right: -2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d64545;
	/* 밝은 바탕에서도 아이콘 선과 붙어 보이지 않게 한 겹 띄운다. */
	box-shadow: 0 0 0 2px var(--wp--preset--color--bg, #fff);
	animation: wc-live-pulse 1.6s ease-in-out infinite;
}

/* 켜졌다 꺼지는 깜빡임이 아니라 숨쉬듯 옅어졌다 진해진다. 완전히 사라지면
   「지금 켜져 있나」를 눈으로 좇게 된다. */
@keyframes wc-live-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

/* 메뉴 안에서는 아이콘 자리를 「LIVE」가 대신한다. 점 하나는 「방송 중」으로 읽히지 않고
   알림 배지처럼 보였다. **영어인 것은 영어판 때문이다** — 「생방송」이면 판마다 갈린다. */
.wc-live-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 아이콘 자리를 대신하므로 세로 크기를 아이콘(17px)에 맞춘다. */
	min-height: 17px;
	padding: 3px 5px;
	border-radius: 4px;
	background: #d64545;
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	animation: wc-live-pulse 1.6s ease-in-out infinite;
}

/* ⚠️ **움직임을 줄여 달라고 하면 멈춘다.** 다만 꺼지지는 않는다 — 사라지면 정보가
   사라진다. */
@media (prefers-reduced-motion: reduce) {
	.wc-live-dot,
	.wc-live-pill { animation: none; }
}

/* 메뉴 아이콘. 선만 그려 두고 색은 CSS가 정한다. */
.wc-nav-ic {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	stroke: var(--wp--preset--color--water);
	stroke-width: 1.5;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .85;
}

/* 지금 보고 있는 메뉴. 굵게만 하면 눈에 안 든다 —
   섹션 제목과 같은 물결을 글자 밑동에 깔아 준다.
   물결은 링크 전체가 아니라 **글자에만** 건다. 아이콘까지 덮으면 물의 가운데가
   글자보다 왼쪽으로 밀려 한쪽으로 쏠려 보인다. */
.wc-nav a.on {
	color: var(--wp--preset--color--water);
	font-weight: 600;
}

/* 물결은 한 번만 그려 두고, 얼마나 차올랐는지로 상태를 나눈다.
   쉬는 중 0 → 가리키면 8px → 지금 보는 메뉴 11px. */
/* **물결은 한 곳에서 정의한다.** 헤더 메뉴와 내 자리 탭이 같은 물건을 쓴다 —
   두 벌로 두면 한쪽만 고쳐지는 날이 온다. */
:root {
	--wc-wave: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 40' preserveAspectRatio='none'>\
<defs><linearGradient id='w' x1='0' y1='0' x2='1' y2='0'>\
<stop offset='0' stop-color='%230e6b66' stop-opacity='0'/>\
<stop offset='.1' stop-color='%230e6b66' stop-opacity='1'/>\
<stop offset='.9' stop-color='%230e6b66' stop-opacity='1'/>\
<stop offset='1' stop-color='%230e6b66' stop-opacity='0'/>\
</linearGradient></defs>\
<path d='M0,15 C35,1 70,29 105,15 C140,1 175,29 210,15 C245,1 280,29 315,15 C350,1 385,29 420,15 L420,40 L0,40 Z' fill='url(%23w)' opacity='.22'/>\
<path d='M0,25 C35,11 70,39 105,25 C140,11 175,39 210,25 C245,11 280,39 315,25 C350,11 385,39 420,25 L420,40 L0,40 Z' fill='url(%23w)' opacity='.16'/>\
</svg>");
}

.wc-nav .wc-nav-t {
	padding-bottom: 3px;
	background: var(--wc-wave) left bottom / 100% 0 no-repeat;
	transition: background-size .24s ease;
}

.wc-nav a:hover .wc-nav-t { background-size: 100% 8px; }
.wc-nav a.on .wc-nav-t { background-size: 100% 11px; }

.wc-nav a { transition: color .18s ease; }
.wc-nav a:hover { color: var(--wp--preset--color--water); }
.wc-nav-ic { transition: opacity .18s ease; }
.wc-nav a:hover .wc-nav-ic,
.wc-nav a.on .wc-nav-ic { opacity: 1; }

/* 언어 전환 — 글자 하나짜리 단추. 아이콘 단추(.wc-search-btn)와 같은 높이로 선다. */
.wc-lang-switch {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 8px; border-radius: 8px;
	font-size: 0.78rem; font-weight: 700; letter-spacing: .02em;
	color: var(--wp--preset--color--ink-2); text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}
.wc-lang-switch:hover,
.wc-lang-switch:focus-visible { background: var(--wp--preset--color--water-soft); color: var(--wp--preset--color--water); }

/* 건너갈 언어의 국기(`inc/lang-flag.php`) — 18px 원. 흰 부분이 흰 머리글에 녹지 않게 옅은
   테를 두른다. 서랍에서는 메뉴 아이콘(17px) 자리에 그대로 선다. */
.wc-lang-switch { gap: 6px; }
.wc-flag { flex: none; display: block; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(21, 41, 43, .14); }

/* 서랍 속 언어 줄. 넓은 화면에는 머리글 단추가 있으므로 감춘다(`.wc-m-search` 와 같은 모양).
   **460px 이하에서 자리를 바꾼다** — 로고 165 + 단추 넷과 틈 210 + 여백 48 = 437px 이
   필요하고, 폰은 360~430px 이다. 넘치면 단추가 로고 위에 겹친다(2026-09-11, 360px).
   2026-09-12 에 간판 로고로 바뀌며 폰의 로고가 119px 로 좁아져 지금은 377px 이면 들어간다.
   경계는 그대로 두었다 — 여유가 생긴 것이지 잰 값이 바뀐 것은 아니다. */
.wc-m-lang { display: none; }

@media (max-width: 460px) {
	.wc-util .wc-lang-switch { display: none; }
	.wc-nav ul li.wc-m-lang { display: block; }
}

.wc-util {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}

.wc-search-btn {
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	padding: 4px;
}

/* 로그인해 있는지를 헤더에서 알아보는 자리.

   **손님 쪽은 건드리지 않는다** — 선화 아이콘 그대로다. 로그인한 쪽만 아이콘을 채우고,
   넓은 화면에서는 이름을 옆에 붙인다. 대칭으로 풀면 현관에 「로그인」이라는 글자가 서게
   되는데 그건 header.php 가 하지 않기로 한 것이다. */
.wc-account {
	gap: 7px;
}

/* 채운 아이콘. 선화와 나란히 놓고 비교하지 않아도 다르다는 것이 읽혀야 한다 —
   지금 이 문제가 바로 두 화면을 나란히 볼 수 없어서 생긴 것이다. */
.wc-account-on svg {
	fill: var(--wp--preset--color--water);
	stroke: var(--wp--preset--color--water);
	stroke-width: 1.2;
}

/* 이름. **넓은 화면에서만 나온다** — 아래 `@media (min-width: 1100px)` 가 켠다.

   `.wc-util` 은 `flex: 0 0 auto` 라 줄지 않는다. 그래서 여기 붙는 폭은 전부 메뉴에서
   빼앗아 오는 폭이고, 메뉴가 좁아지는 지점은 이미 재서 정해 둔 값이다(아래 1000px 주석).
   좁은 화면에서 이름을 켜 두면 그 계산이 로그인한 사람에게만 어긋나 메뉴 글자가 두 줄로
   접힌다 — 901px 에서 실제로 그렇게 됐다.

   **긴 이름은 말줄임표로 잘린다.** 헤더가 넓어질 수 없으니 어딘가는 잘리는데, 글자
   중간에서 뚝 끊기면 잘린 줄도 모른다. 자르는 것은 화면뿐이고 값은 온전해서,
   `aria-label` 과 `/me/` 는 늘 전체 이름을 말한다. */
.wc-account-name {
	display: none;
	color: var(--wp--preset--color--water);
	font-size: 0.86rem;
	font-weight: 600;
	max-width: 6.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 메뉴가 여섯인 성도까지 이름을 얹고도 남는 폭. 여섯이 부딪히는 지점이 960px 이고
   (아래 주석) 이름이 최대 6.5em + 여백만큼 더 먹으므로 그만큼 위에서 켠다. */
@media (min-width: 1100px) {
	.wc-account-name { display: block; }
}

/* 모바일 메뉴 안의 검색 줄. 넓은 화면에는 아이콘 버튼이 있으므로 감춘다 — 시안 `.m-search` */
.wc-m-search {
	display: none;
}

.wc-menu-btn {
	display: none;
	/* 좁은 화면에서 메뉴 링크는 접혀 있다 — 실제로 눌리는 것은 이 단추다. 38px 였다. */
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	padding: 9px 11px;
	cursor: pointer;
}

.wc-menu-btn svg { display: block; }

/* 그림과 글자를 한 줄에 세운다 — 그림은 글자와 기준선이 다르다. */
.wc-reader-toc { display: inline-flex; align-items: center; gap: 7px; }

.wc-footer {
	/* 위에 물빛 선 하나 — 밝은 톤을 유지하면서 끝맺음이라고 말해 준다(B안, 2026-08-24). */
	border-top: 3px solid var(--wp--preset--color--water);
	background: #f5f8f7;
	font-size: 0.86rem;
	color: var(--wp--preset--color--ink-2);
	margin-top: 80px;
}

/* 세 단 — 교회 · 예배 시간 · 바로가기. 글자만이어서가 아니라 구조가 없어서
   이상했다(2026-08-24): 한 덩어리와 링크 한 줄 사이가 전부 빈 공간이었다.
   교회 단이 남는 폭을 다 가져가고, 오른쪽 두 단은 나란히 붙는다 — 단을
   고르게 흩으면 빈 공간이 단 사이로 옮겨 갈 뿐이다. */
.wc-footer-cols {
	display: flex;
	gap: 72px;
	padding: 48px 0 38px;
	flex-wrap: wrap;
}

.wc-footer-who {
	flex: 1 1 260px;
}

.wc-footer-h {
	/* h2 의 명조를 물려받지 않는다 — 이 라벨은 본문과 같은 산세리프다. */
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--water);
	margin: 6px 0 14px;
}

.wc-footer-time {
	display: flex;
	justify-content: space-between;
	gap: 28px;
	line-height: 2.15;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* 마지막 줄 아래에는 선을 긋지 않는다 — 표는 안에서 끝난다. */
.wc-footer-time:last-child {
	border-bottom: 0;
}

.wc-footer-when {
	color: var(--wp--preset--color--ink-2);
	font-variant-numeric: tabular-nums;
}

.wc-footer-time > span:first-child {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

/* 이름이 로고다. 그림 로고는 머리(내비게이션)가 이미 지고 있다. */
.wc-footer-name {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--water);
	margin: 0 0 4px;
}

.wc-footer-verse {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 20px;
}

.wc-addr {
	line-height: 1.9;
}

.wc-footer a {
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
}

.wc-footer a:hover {
	color: var(--wp--preset--color--water);
}

.wc-footer-links {
	line-height: 2.1;
}

/* 점으로 이은 한 줄 대신 세로로 선다 — 단이 되어야 눈이 짚는다. */
.wc-footer-links a {
	display: block;
}

/* **팔레트 밖의 회색을 쓰지 않는다.** 여기 있던 `#8aa0a3` 는 푸터 바탕(#f5f8f7)에서
   대비가 2.57:1 이라, 12.5px 짜리 저작권·처리방침 줄이 흐린 화면에서는 사라졌다.
   `ink-2` 는 6.07:1 이고 푸터의 나머지가 이미 쓰는 색이다 — 조용한 것은 색이 아니라
   글자 크기가 맡는다. */
.wc-footer-bottom {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 14px 0 18px;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-2);
	display: flex;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

/* **메뉴가 한 줄에 안 들어가면 햄버거로 접는다.** 접을지는 폭의 선이 아니라 `header.php`
   끝의 작은 스크립트가 **실제로 재서** 정한다 — 로고 + 메뉴의 원래 폭 + 오른쪽 단추가 한 줄에
   들어가는가. 들어가지 않으면 `.wc-nav` 에 `wc-fold` 를 붙이고, 아래가 전부 그 이름 아래 있다.

   **예전에는 선을 재서 박았다.** 손님 900px, 성도 1080px(「교제」로 여섯), 「건의」가 붙었던
   반나절은 1180px(일곱). 항목이 늘 때마다 다시 쟀고, 줄 때 안 챙기면 들어가는 폭에서도
   햄버거가 떴다. 그리고 성도 선은 **접기만 하고 서랍 모양이 없었다** — 서랍 규칙이 900px
   아래에만 있어서, 성도가 901~1080px 에서 메뉴를 열면 가로줄이 로고 위에 겹쳤다.

   **영어가 들어오면서 그 선이 넷이 됐다**(2026-09-11). 영어 이름이 84px 길고(「Online
   Worship」) 언어 전환 단추가 56px 을 더 먹는다. 재 보니 한국어 손님이 901~945px 에서 34px,
   영어 손님이 901~1075px, 영어 성도가 1180px 에서도 45px 겹쳤다. 방송 중 알약(+14px)과 계정
   이름 길이까지 곱하면 잴 것이 끝나지 않는다. 그래서 재는 일을 화면에 넘겼다.

   스크립트가 돌지 않으면 접히지 않는다 — 넘쳐도 메뉴가 **보인다.** 어차피 서랍을 여는 것도
   스크립트(`nav.js`)라, 접어 두면 닿을 수 없는 메뉴가 된다. */
.wc-nav.wc-fold .wc-menu-btn { display: block; }

.wc-nav.wc-fold ul {
	display: none;
	position: absolute;
	top: 64px;
	left: 0;
	right: 0;
	background: var(--wp--preset--color--bg);
	border-bottom: 1px solid var(--wp--preset--color--line);
	flex-direction: column;
	gap: 0;
	padding: 8px 20px 16px;
	box-shadow: 0 12px 24px rgba(21, 41, 43, .08);
	z-index: 50;
}

.wc-nav.wc-fold ul.open { display: flex; }

.wc-nav.wc-fold ul li {
	padding: 11px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	width: 100%;
}

.wc-nav.wc-fold ul li:last-child { border-bottom: none; }

/* 위의 `li` 가 패딩·테두리를 이미 정하므로 같은 무게로 덮는다. */
.wc-nav.wc-fold ul li.wc-m-search {
	display: block;
	border-bottom: none;
	padding: 0;
	margin: 6px 0 4px;
}

.wc-nav.wc-fold .wc-m-search a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--ink-2);
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 24px;
	padding: 11px 16px;
	font-size: 0.88rem;
}

@media (max-width: 640px) {
	.wc-wrap { padding-left: 24px; padding-right: 24px; }
	.wc-logo-img { height: 36px; }
}

/* ==========================================================================
   서재 — 시안 library.html
   ========================================================================== */

.wc-newbook {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 34px;
	align-items: center;
	background: var(--wp--preset--color--water-soft);
	border-radius: 16px;
	padding: 30px 36px;
	margin-bottom: 34px;
}

.wc-newbook img {
	width: 150px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 12px 26px rgba(14, 107, 102, .22);
	display: block;
}

.wc-newbook-label {
	font-size: 0.72rem;
	letter-spacing: .12em;
	color: var(--wp--preset--color--water);
	font-weight: 600;
	margin-bottom: 10px;
}

.wc-newbook h2 {
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0 0 6px;
}

.wc-newbook h2 a {
	color: inherit;
	text-decoration: none;
}

.wc-newbook-meta {
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-2);
	margin-bottom: 16px;
}

/* 책 소개 한 문단. 줄이 너무 길면 읽기 힘들어 시안대로 너비를 묶어 둔다. */
.wc-newbook-desc {
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-2);
	line-height: 1.85;
	max-width: 560px;
	margin-bottom: 16px;
}

.wc-btn-primary {
	display: inline-block;
	background: var(--wp--preset--color--water);
	color: #fff;
	font-size: 0.84rem;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 22px;
}

.wc-notice {
	background: var(--wp--preset--color--water-soft);
	border-radius: 12px;
	padding: 16px 22px;
	font-size: 0.86rem;
	color: var(--wp--preset--color--ink-2);
	margin: 0 0 8px;
}

.wc-notice b {
	color: var(--wp--preset--color--water);
	font-weight: 600;
}

.wc-books {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 26px 20px;
	padding: 28px 0 8px;
}

.wc-bk {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	display: block;
}

.wc-bk img,
.wc-bk-nocover {
	width: 100%;
	/* WordPress가 붙이는 height 속성이 브라우저에서 CSS height로 매핑되어
	   aspect-ratio를 눌러 버린다. auto로 덮어야 비율이 산다. */
	height: auto;
	aspect-ratio: 7 / 10;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 8px 18px rgba(14, 107, 102, .16);
	display: block;
}

/* 06권처럼 원본 표지가 없는 책의 자리표시 */
.wc-bk-nocover {
	background: #edeae4;
	color: #3a362e;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* 패딩이 너비·높이에 더해져 자리표시가 표지보다 커졌다. */
	box-sizing: border-box;
	padding: 16px;
	font-size: 0.95rem;
	line-height: 1.5;
	/* aspect-ratio는 overflow가 visible이면 글자 길이에 밀린다. 제목이 긴 책의
	   자리표시가 다른 표지보다 길어져 줄이 어긋났다. */
	overflow: hidden;
}

.wc-bk-title {
	display: block;
	font-size: 0.84rem;
	margin-top: 11px;
	line-height: 1.45;
	font-weight: 500;
}

.wc-bk-sub {
	display: block;
	font-size: 0.72rem;
	color: var(--wp--preset--color--ink-2);
	margin-top: 2px;
}

@media (max-width: 760px) {
	.wc-newbook {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.wc-newbook img { margin: 0 auto; }

	/* 가운데 정렬로 바뀌므로 소개 문단 상자도 가운데로 와야 한다.
	   그러지 않으면 글만 가운데고 상자는 왼쪽에 붙어 어긋나 보인다. */
	.wc-newbook-desc { margin-inline: auto; }
}

/* 서재 하단 밴드 — 시안 library.html `.libband`.
   배경이 화면 끝까지 가야 하므로 wrap 밖에 두고 안쪽만 wrap으로 묶는다. */
.wc-libband {
	background: var(--wp--preset--color--water-soft);
	margin-top: 80px;
}

.wc-libband-inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 44px;
	align-items: center;
	padding-top: 56px;
	padding-bottom: 56px;
}

.wc-libband img {
	width: 100%;
	max-width: 340px;
	border-radius: 14px;
	box-shadow: 0 10px 26px rgb(14 107 102 / 14%);
}

.wc-libband h2 {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.55;
	margin-bottom: 12px;
}

.wc-libband p {
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-2);
	line-height: 1.9;
}

@media (max-width: 760px) {
	.wc-libband-inner { grid-template-columns: 1fr; }

	.wc-libband img { max-width: 240px; }
}

/* ==========================================================================
   책 상세 — 시안 book-detail.html
   ========================================================================== */

.wc-bd {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 56px;
	align-items: start;
}

.wc-bd-cover img,
.wc-bd-cover .wc-bk-nocover {
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 16px 36px rgba(14, 107, 102, .22);
}

.wc-bd-btns {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 20px;
}

.wc-bd-btns a {
	text-align: center;
	padding: 12px 0;
	border-radius: 26px;
}

.wc-bd-facts {
	margin-top: 18px;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-2);
	line-height: 2;
}

.wc-bd h1 {
	font-size: 1.9rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

/* 내려받기 — 본문 소개 아래, 목차 위. 파일이 있을 때만 나온다. */
/* 제목·부제 바로 아래다(2026-08-31). 책을 만나자마자 받을 수 있어야 하고,
   소개 글을 다 읽은 사람만 보는 자리가 아니어야 한다.

   **그런데 이 줄은 눈길을 끌면 안 된다.** 이 화면에서 읽혀야 하는 것은 책이고,
   주된 행동은 왼쪽의 「읽기 시작」이다. 내려받기는 그다음이라, 자리를 위로 올린
   만큼 무게는 오히려 낮춘다 — 테두리 알약 두 개가 제목 밑에 서 있으면 소개 글보다
   먼저 읽힌다. 링크 복사와 같은 무게로 둔다. */
.wc-bd-get {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 14px 0 22px;
	font-size: 0.78rem;
}

.wc-bd-get-label {
	font-size: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--ink-2, #7d8e8c);
}

/* 판이 둘 이상일 때만. 한 권짜리 책에는 언어 이름이 붙지 않는다 — 쓸데없는 말이 는다.
   줄바꿈이 언어 사이에서 일어나야지 EPUB 과 PDF 사이에서 일어나면 어느 언어의 PDF 인지
   알 수 없게 된다. 그래서 한 판을 통째로 묶어 둔다. */
.wc-bd-get.is-multi {
	gap: 8px 14px;
}

.wc-bd-edition {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.wc-bd-lang {
	font-size: inherit;
	color: var(--wp--preset--color--ink-2, #7d8e8c);
}

/* **눌러야 하는 것으로 보여야 한다.** 밑줄을 호버에만 두면 손가락으로 보는 화면에는
   아무 단서가 없고, 글자 높이만큼의 터치 자리는 누르기도 어렵다. 테두리 알약으로
   돌아가지 않으면서 「받는 것」임이 읽히도록, 옅은 바탕과 내려받기 화살표를 준다. */
.wc-bd-file {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 12px;
	border-radius: 8px;
	background: var(--wp--preset--color--water-soft);
	font-size: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--water);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .18s ease;
}

.wc-bd-file::before {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wc-bd-file:hover { background: #d3e7e2; }

/* 손가락으로 누르는 화면에서는 자리를 더 준다. */
@media (max-width: 560px) {
	.wc-bd-file { padding: 9px 14px; }
}

.wc-bd-ver { font-size: 0.72rem; color: var(--wp--preset--color--ink-2, #7d8e8c); }

.wc-bd-sub {
	color: var(--wp--preset--color--water);
	font-size: 0.84rem;
	font-weight: 600;
	margin: 8px 0 22px;
	letter-spacing: .04em;
}

.wc-bd-intro p {
	font-size: 0.94rem;
	color: var(--wp--preset--color--ink-2);
	line-height: 2;
	margin-bottom: 14px;
}

.wc-toc {
	margin-top: 36px;
}

.wc-toc h2 {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.wc-toc ol {
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--ink);
	margin: 0;
	padding: 0;
}

.wc-toc li {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wc-toc li a {
	display: flex;
	gap: 14px;
	padding: 11px 2px;
	font-size: 0.88rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wc-toc-no {
	color: var(--wp--preset--color--water);
	font-weight: 600;
	flex: 0 0 22px;
	font-size: 0.78rem;
}

.wc-toc-more {
	padding: 12px 2px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-2);
}

@media (max-width: 760px) {
	.wc-bd {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.wc-bd-cover {
		max-width: 240px;
		margin: 0 auto;
	}
}

/* 좋은 씨앗의 다른 책들 — 시안 book-detail.html `.others` */
.wc-others {
	margin-top: 70px;
}

.wc-others-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 18px;
}

.wc-others-head h2 {
	font-size: 1.13rem;
	font-weight: 600;
	margin: 0;
}

.wc-others-head a {
	color: var(--wp--preset--color--water);
	font-size: 0.88rem;
	text-decoration: none;
	white-space: nowrap;
}

.wc-others-head a:hover {
	text-decoration: underline;
}

.wc-others-row {
	display: flex;
	gap: 20px;
}

.wc-others-row a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-size: 0.78rem;
	line-height: 1.45;
	width: 120px;
	flex: 0 0 120px;
}

.wc-others-row img,
.wc-others-nocover {
	width: 120px;
	height: auto;
	aspect-ratio: 7 / 10;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 8px 18px rgb(14 107 102 / 16%);
	display: block;
	margin-bottom: 8px;
}

.wc-others-nocover {
	background: #edeae4;
	color: #3a362e;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* 패딩이 너비·높이에 더해져 자리표시가 표지보다 커졌다. */
	box-sizing: border-box;
	padding: 10px;
	font-size: 0.8rem;
	line-height: 1.5;
	overflow: hidden;
}

@media (max-width: 760px) {
	/* 좁은 화면에서는 줄바꿈 대신 옆으로 밀어 본다 — 시안과 같다. */
	.wc-others-row {
		overflow-x: auto;
		padding-bottom: 6px;
	}
}

/* ==========================================================================
   웹 리더 — 시안 reader.html
   ========================================================================== */

body.wc-reader {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--reader-ink);
	/* 책을 읽는 자리만 Pretendard를 쓴다(Harry). 한 화면에 오래 머무는 글이라
	   자간이 고른 쪽이 눈이 덜 피로하다. */
	font-family: var(--wp--preset--font-family--reading);
}

.wc-reader-top {
	position: sticky;
	top: 0;
	background: rgba(251, 249, 244, .95);
	border-bottom: 1px solid var(--wp--preset--color--reader-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	font-family: var(--wp--preset--font-family--sans);
	z-index: 10;
}

.wc-reader-left {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 0.86rem;
	min-width: 0;
}

.wc-reader-toc,
.wc-reader-out {
	border: 1px solid var(--wp--preset--color--reader-line);
	border-radius: 6px;
	padding: 6px 12px;
	background: #fff;
	color: var(--wp--preset--color--reader-ink);
	text-decoration: none;
	white-space: nowrap;
	font-family: inherit;
	font-size: 0.84rem;
	cursor: pointer;
}

.wc-reader-toc:hover,
.wc-reader-out:hover { border-color: var(--wp--preset--color--reader-ink-2); }

.wc-reader-title {
	color: var(--wp--preset--color--reader-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wc-reader-title b {
	color: var(--wp--preset--color--reader-ink);
	font-weight: 500;
}

.wc-reader-right {
	display: flex;
	gap: 10px;
	align-items: center;
	flex: 0 0 auto;
}

.wc-aa {
	border: 1px solid var(--wp--preset--color--reader-line);
	border-radius: 6px;
	background: #fff;
	padding: 6px 10px;
	font-size: 0.8rem;
	cursor: pointer;
	font-family: inherit;
}

.wc-aa-big { font-size: 1rem; }

.wc-reader-page {
	--wc-reader-size: 1.05rem;
	max-width: 660px;
	margin: 36px auto 0;
	padding: 0 24px 120px;
}

.wc-chapter-no {
	text-align: center;
	color: var(--wp--preset--color--reader-ink-2);
	font-size: 0.86rem;
	letter-spacing: .3em;
	font-family: var(--wp--preset--font-family--sans);
}

.wc-reader-page h1 {
	text-align: center;
	font-size: 1.75rem;
	font-weight: 500;
	margin: 14px 0 8px;
}

.wc-bible-ref {
	text-align: center;
	color: var(--wp--preset--color--water);
	font-size: 0.86rem;
	margin-bottom: 44px;
}

.wc-reader-page p {
	font-size: var(--wc-reader-size);
	/* **줄 간격은 글자 크기 + 고정 여백이다.** 배수(2.05)로 두면 글자를 키울 때 사이도 같은
	   비율로 벌어져, 큰 글자에서 줄마다 빈 띠가 생겼다(소유자, 2026-09-13). 기본 크기(1.05rem)
	   에서는 예전과 같은 사이(2.15rem)이고, 글자가 커질수록 배수로는 좁아진다. */
	line-height: calc(1em + 1.1rem);
	margin-bottom: 28px;
	text-align: justify;
}

.wc-reader-page blockquote {
	margin: 0 0 28px;
	padding-left: 18px;
	border-left: 3px solid var(--wp--preset--color--reader-line);
	color: #4a4136;
}

.wc-reader-page blockquote p {
	margin-bottom: 0;
	text-align: left;
}

.wc-reader-page .passage,
.wc-reader-page .ref {
	color: var(--wp--preset--color--water);
	font-size: 0.84rem;
	/* 글자가 고정이라 본문의 `1em + 1.1rem` 을 물려받으면 기본 크기에서도 사이가 벌어진다. */
	line-height: 2.05;
	font-family: var(--wp--preset--font-family--sans);
	margin-bottom: 10px;
}

.wc-reader-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 60px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--reader-line);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.84rem;
}

.wc-reader-nav a {
	color: var(--wp--preset--color--water);
	text-decoration: none;
	max-width: 46%;
}

.wc-reader-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(251, 249, 244, .96);
	border-top: 1px solid var(--wp--preset--color--reader-line);
	font-family: var(--wp--preset--font-family--sans);
}

.wc-progress {
	height: 3px;
	background: var(--wp--preset--color--reader-line);
}

.wc-progress i {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--water);
}

.wc-reader-info {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 24px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--reader-ink-2);
}

@media (max-width: 640px) {
	.wc-reader-top { padding: 10px 14px; }
	.wc-reader-title { display: none; }
	.wc-reader-page { padding: 0 20px 120px; margin-top: 28px; }
}

/* ==========================================================================
   말씀 — 시안 sermons.html
   ========================================================================== */

.wc-controls { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:0 0 8px; }

.wc-tabs { display:flex; border:1px solid var(--wp--preset--color--line); border-radius:26px;
	overflow:hidden; background:#fff; font-size:0.82rem; }
.wc-tabs a { padding:10px 16px; color:var(--wp--preset--color--ink-2); text-decoration:none; }
.wc-tabs a.on { background:var(--wp--preset--color--water); color:#fff; }

.wc-feature { display:grid; grid-template-columns:1.15fr 1fr; gap:34px; align-items:center;
	background:var(--wp--preset--color--water-soft); border-radius:16px; padding:26px 30px; margin:22px 0 34px; }

.wc-fthumb, .wc-thumb { display:block; position:relative; aspect-ratio:16/9; border-radius:12px;
	overflow:hidden; background:#dbe6e4; }
.wc-fthumb img, .wc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.wc-thumb-empty { display:flex; width:100%; height:100%; align-items:center; justify-content:center;
	color:var(--wp--preset--color--water); font-size:1.1rem; }

.wc-fbody h2 { font-size:1.6rem; font-weight:500; line-height:1.4; margin:0 0 12px; }
.wc-fbody h2 a, .wc-sermon h3 a { color:inherit; text-decoration:none; }
.wc-fmeta, .wc-sermon-meta { font-size:0.78rem; color:var(--wp--preset--color--ink-2); margin-top:9px; }

/* 시리즈·성경 본문 칩 — 설계서 6.5 */
.wc-labels { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.wc-series-chip { color:var(--wp--preset--color--water); font-size:0.72rem; letter-spacing:.06em;
	font-weight:600; white-space:nowrap; }

.wc-sermon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:8px 0; }
.wc-sermon { border:1px solid var(--wp--preset--color--line); border-radius:12px; overflow:hidden; background:#fff;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }

/* **누를 수 있다는 것이 보여야 한다.** 책 카드는 처음부터 떠올랐는데 설교 카드는
   아무 반응이 없었다 — 제목은 본문색에 밑줄도 없어서, 화면 점검기가 이 한 페이지에서
   열세 건을 「링크가 안 보임」으로 잡았다. 카드가 곧 링크다. */
.wc-sermon:hover,
.wc-sermon:focus-within {
	transform:translateY(-3px);
	border-color:var(--wp--preset--color--water);
	box-shadow:0 10px 24px rgb(14 107 102 / 12%);
}

.wc-sermon:hover h3 a,
.wc-sermon:focus-within h3 a { color:var(--wp--preset--color--water); }
.wc-sermon h3 a { transition:color .18s ease; }
.wc-sermon .wc-thumb { border-radius:0; }
.wc-sermon-body { padding:16px 18px 18px; }
.wc-sermon h3 { font-size:1.05rem; font-weight:500; line-height:1.45; margin:8px 0 0; }

/* 손가락 목표를 44px 로 키우면서 좁은 화면의 여유가 사라졌다 — 360px 에서 쓸 수 있는
   폭이 312px 이라 쪽번호 일곱이면 넘친다. 넘치면 페이지 전체가 가로로 흐르므로 접는다.
   설교가 84편(7쪽)을 넘는 날 걸릴 자리였다. */
.wc-pager { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:36px 0 0; font-size:0.82rem; }
/* 34×34 였다. 쪽번호는 서로 붙어 있어 작으면 옆 쪽으로 넘어간다. */
.wc-pager .page-numbers { min-width:44px; min-height:44px; height:44px; display:flex; align-items:center;
	justify-content:center; border:1px solid var(--wp--preset--color--line); border-radius:8px;
	color:var(--wp--preset--color--ink-2); text-decoration:none; }
.wc-pager .page-numbers.current { background:var(--wp--preset--color--water);
	border-color:var(--wp--preset--color--water); color:#fff; }

.wc-empty { padding:60px 0; text-align:center; color:var(--wp--preset--color--ink-2); }

/* 설교 상세 */
.wc-sermon-single { max-width:760px; margin:0 auto; }
.wc-sermon-single h1 { font-size:1.9rem; font-weight:500; line-height:1.45; margin:0 0 12px; }
.wc-sermon-byline { font-size:0.82rem; color:var(--wp--preset--color--ink-2); margin:10px 0 26px; }

.wc-video { aspect-ratio:16/9; border-radius:12px; overflow:hidden; margin-bottom:34px; background:#0d2d2b; }
.wc-video iframe { width:100%; height:100%; border:0; display:block; }

.wc-sermon-content p { font-size:1rem; line-height:2.05; margin-bottom:26px; }
.wc-sermon-content blockquote { margin:0 0 26px; padding-left:18px;
	border-left:3px solid var(--wp--preset--color--line); color:var(--wp--preset--color--ink-2); }

.wc-sermon-note { margin-top:40px; padding-top:18px; border-top:1px solid var(--wp--preset--color--line);
	font-size:0.78rem; color:var(--wp--preset--color--ink-2); }

@media (max-width:900px) { .wc-sermon-grid { grid-template-columns:1fr 1fr; } .wc-feature { grid-template-columns:1fr; } }
@media (max-width:640px) { .wc-sermon-grid { grid-template-columns:1fr; } }

/* 설교 요약 — 본문이 있던 자리처럼 흐르는 글로 둔다 */
.wc-sermon-summary {
	color: var(--wp--preset--color--ink-2);
}

.wc-sermon-summary p {
	font-size: 0.94rem;
	line-height: 2;
	margin: 0 0 22px;
}

.wc-sermon-summary p:last-child {
	margin-bottom: 0;
}

/* 상세 — 영상 아래 본문처럼 */
.wc-sermon-single .wc-sermon-summary p {
	font-size: 1rem;
	line-height: 2.05;
	color: var(--wp--preset--color--ink);
	margin-bottom: 26px;
}

/* 목록 카드 — 세 줄까지만 */
.wc-sermon .wc-sermon-summary {
	margin-top: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-sermon .wc-sermon-summary p {
	font-size: 0.8rem;
	line-height: 1.75;
	margin: 0;
}

/* 최신 설교 피처 — 네 줄까지 */
.wc-fbody .wc-sermon-summary {
	margin-top: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-fbody .wc-sermon-summary p {
	font-size: 0.86rem;
	line-height: 1.85;
	margin: 0;
}

/* ==========================================================================
   교회소개 — 시안 about.html
   ========================================================================== */

.wc-fullbleed { position:relative; height:320px; overflow:hidden; }
.wc-fullbleed img { width:100%; height:100%; object-fit:cover; display:block; }
.wc-fullbleed-cap { position:absolute; left:0; right:0; bottom:0; padding:100px 0 36px;
	background:linear-gradient(transparent, rgba(13,32,30,.62)); color:#fff; }
.wc-fullbleed-cap .wc-serif { font-size:1.6rem; font-weight:500; line-height:1.5; }

.wc-alt { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:44px 0; }
.wc-alt-rev .wc-alt-media { order:2; }
.wc-alt-media img { width:100%; max-height:240px; object-fit:cover; border-radius:14px; display:block;
	box-shadow:0 10px 26px rgba(14,107,102,.14); }
.wc-alt h2 { font-size:1.7rem; font-weight:500; line-height:1.5; margin:0 0 16px; }
.wc-alt p { font-size:0.94rem; color:var(--wp--preset--color--ink-2); line-height:1.95; margin:0 0 10px; }
.wc-more { display:inline-block; margin-top:12px; color:var(--wp--preset--color--water);
	text-decoration:none; font-size:0.9rem; }

.wc-softband { background:var(--wp--preset--color--water-soft); }

.wc-acts { padding:80px 0 8px; }
.wc-acts h2 { font-size:1.7rem; font-weight:500; margin:0 0 10px; }
.wc-acts-desc { color:var(--wp--preset--color--ink-2); font-size:0.94rem; line-height:1.9;
	margin-bottom:30px; max-width:680px; }
.wc-actgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wc-act { background:#fff; border:1px solid var(--wp--preset--color--line); border-radius:14px; overflow:hidden; }
.wc-photoslot { aspect-ratio:4/3; background:var(--wp--preset--color--water-soft);
	border-bottom:1px solid var(--wp--preset--color--line); display:flex; flex-direction:column;
	align-items:center; justify-content:center; gap:6px; color:var(--wp--preset--color--ink-2); font-size:0.78rem; }
.wc-photoslot b { color:var(--wp--preset--color--water); font-size:0.84rem; }
.wc-act-body { padding:18px 20px 20px; }
.wc-act-body h3 { font-size:1.05rem; font-weight:500; margin:0 0 8px; }
.wc-act-body p { font-size:0.84rem; color:var(--wp--preset--color--ink-2); line-height:1.8; margin:0; }
.wc-act-when { margin-top:10px; font-size:0.78rem; color:var(--wp--preset--color--water); }
.wc-act-when span { display:block; white-space:nowrap; }

.wc-sect { padding:76px 0 0; }
.wc-sect h2 { font-size:1.35rem; font-weight:500; margin:0 0 20px; }
/* 예전 교회소개가 쓰던 .wc-people / .wc-person / .wc-visit 규칙은 여기 있었다.
   지금은 page-about.php가 같은 이름을 쓰되 다른 모양이라, 옛 규칙이 남아 있으면
   display:flex·grid가 새 규칙을 이겨 카드가 한 줄로 붙어 버린다. */
.wc-visit-h { font-size:1.35rem; margin:0 0 20px; }
.wc-wtable { border-top:1px solid var(--wp--preset--color--ink); }
.wc-wrow { display:flex; padding:14px 2px; border-bottom:1px solid var(--wp--preset--color--line); font-size:0.9rem; }
.wc-wname { flex:0 0 140px; font-weight:500; }
.wc-wval { color:var(--wp--preset--color--ink-2); }
.wc-mapbox { border-radius:14px; background:var(--wp--preset--color--water-soft); min-height:240px;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
	color:var(--wp--preset--color--ink-2); font-size:0.84rem; text-align:center; padding:20px; }
.wc-mapbox b { color:var(--wp--preset--color--water); }

@media (max-width:760px) {
	.wc-fullbleed { height:300px; }
	.wc-fullbleed-cap .wc-serif { font-size:1.15rem; }
	.wc-alt { grid-template-columns:1fr; gap:24px; padding:32px 0; }
	.wc-alt-rev .wc-alt-media { order:0; }
	.wc-actgrid { grid-template-columns:1fr; }
	.wc-acts { padding:52px 0 0; }
	.wc-visit { grid-template-columns:1fr; gap:28px; padding:52px 0 0; }
}

/* ==========================================================================
   소식 — 시안 events.html
   ========================================================================== */

.wc-evgroup-h { font-size:1rem; font-weight:600; margin:26px 0 6px; }

/* ── 제목과, 그 제목이 다스리는 동작 ───────────────────────────────────
 * **필터와 동작을 한 줄에 세우지 않는다.** 둘 다 알약이던 동안 어느 쪽이 「보는
 * 것을 고르는 자리」이고 어느 쪽이 「만드는 자리」인지 구별되지 않았다. 이제
 * 동작은 자기 제목 옆에 선다 — 걸러 보는 알약은 2026-09-01 에 없어졌다.
 */
.wc-sechead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	max-width: 760px;
	margin: 26px 0 6px;
}

.wc-sechead .wc-evgroup-h { margin: 0; }

/* **채워진 알약이 아니다.** 제목 옆에서 눈길을 끌면 읽어야 할 것이 소식이 아니라
   단추가 된다. 선 하나로 서 있다가 손이 닿으면 채워진다. */
.wc-sechead-add {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 13px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 0.79rem;
	line-height: 1.4;
	color: var(--wp--preset--color--water);
	background: transparent;
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s ease, border-color .16s ease;
}

.wc-sechead-add::before {
	content: "+";
	font-size: 0.95em;
	line-height: 1;
	opacity: .75;
}

.wc-sechead-add:hover,
.wc-sechead-add:focus-visible {
	background: var(--wp--preset--color--water-soft);
	border-color: var(--wp--preset--color--water);
}

/* 잘못 고른 파일을 알리는 줄. 파일 칸과 그 아래 설명 사이에 끼므로 위아래로 뗀다. */
.wc-cover-bad { margin: 4px 0 2px; }

/* ── 글 편집기 ─────────────────────────────────────────────────────────
 * Toast UI 는 제 글꼴과 제 테두리를 갖고 온다. **쓰는 동안 보이는 모양이
 * 올라간 뒤의 모양과 같아야** 하므로, 사이트 글꼴과 폼의 다른 칸들에 맞춘다.
 * 걷어낸 TinyMCE 가 iframe 이라 이것이 아예 불가능했던 자리다.
 */
.wc-editor .toastui-editor-defaultUI {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	overflow: hidden;
	font-family: inherit;
}

.wc-editor .toastui-editor-defaultUI:focus-within { border-color: var(--wp--preset--color--water); }

/* 툴바는 폼의 배경에 얹힌 얇은 띠다. 상자처럼 보이면 칸이 둘로 읽힌다. */
.wc-editor .toastui-editor-toolbar {
	background: var(--wp--preset--color--bg);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wc-editor .toastui-editor-defaultUI-toolbar { border: 0; background: transparent; padding: 4px 6px; }
.wc-editor .toastui-editor-toolbar-divider { background: var(--wp--preset--color--line); }

/* 본문 — 사이트 글꼴과 줄간격. 낱장에서 읽힐 모양과 같게 둔다. */
.wc-editor .toastui-editor-contents,
.wc-editor .ProseMirror {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
	word-break: keep-all;
}

/* 문단 사이 여백. **Toast UI 가 위지윅 안에서 `margin: 0` 을 같은 특정도로 걸고
   나중에 실리므로 이긴다** — `.wc-editor` 를 그 선택자 앞에 얹어 한 단계 올린다.
   낱장에서 읽힐 간격과 같게 두려는 것이다. */
.wc-editor .toastui-editor-ww-container .toastui-editor-contents p,
.wc-editor .toastui-editor-contents p,
.wc-editor .ProseMirror p { margin: 0 0 1.1em; }

.wc-editor .toastui-editor-contents strong,
.wc-editor .ProseMirror strong { font-weight: 600; }

.wc-editor .ProseMirror { padding: 16px 18px; }
.wc-editor .ProseMirror > *:last-child { margin-bottom: 0; }

/* 편집기가 안 뜨면 글상자가 그대로 보인다. 그때도 폼 안에서 겉돌지 않아야 한다. */
.wc-album-field textarea[data-wc-editor] { font-family: inherit; }
.wc-evrows { border-top:1px solid var(--wp--preset--color--ink); max-width:760px; }
/* 줄 전체가 링크다. `<div>` 로 그려 두어 상세 화면과 주소가 살아 있는데도
   들어갈 길이 없었다. */
.wc-evrow { display:flex; gap:18px; padding:16px 2px;
	border-bottom:1px solid var(--wp--preset--color--line); align-items:flex-start;
	text-decoration:none; color:inherit;
	transition:background .18s ease; }

.wc-evrow:hover { background:var(--wp--preset--color--water-soft); }
.wc-evrow:hover h3 { color:var(--wp--preset--color--water); }
.wc-evrow h3 { transition:color .18s ease; }

.wc-evrow:focus-visible { outline:2px solid var(--wp--preset--color--water); outline-offset:-2px; }

/* 날짜가 없을 때. 월·일 자리에 가짜 값을 넣지 않는다.
   아래 `.wc-evdate span` 의 1.15rem 이 이기지 않도록 선택자를 그만큼 구체적으로 —
   날짜 숫자 크기로 커진 「미정」은 날짜인 척하는 글자가 된다. */
.wc-evdate span.wc-evdate-tba { display:block; font-size:0.74rem;
	color:var(--wp--preset--color--ink-2); padding:6px 0; margin-top:0; }
.wc-evdate { flex:0 0 54px; text-align:center; background:var(--wp--preset--color--water-soft);
	border-radius:10px; padding:8px 0 10px; }
.wc-evdate b { display:block; font-size:0.68rem; color:var(--wp--preset--color--water); font-weight:600; }
.wc-evdate span { display:block; font-size:1.15rem; margin-top:1px; }
/* 요일. **`.wc-evdate span` 의 1.15rem 을 이겨야 한다** — 그러지 않으면 요일이 날짜
   숫자만 하게 커져서, 그 자리에서 무엇이 날짜인지 알 수 없어진다. 바로 위 「미정」이
   같은 이유로 같은 모양의 선택자를 쓴다. */
.wc-evdate span.wc-evdate-dow { font-size:0.68rem; margin-top:0;
	color:var(--wp--preset--color--ink-2); }
.wc-evdate.past { background:#f1f4f3; }
.wc-evdate.past b { color:var(--wp--preset--color--ink-2); }
.wc-evrow h3 { font-size:1.02rem; font-weight:500; margin:0 0 5px; }
.wc-evrow p { font-size:0.82rem; color:var(--wp--preset--color--ink-2); line-height:1.75; margin:0; }
.wc-evmeta { margin-top:7px; font-size:0.76rem; color:var(--wp--preset--color--water); }

/* ==========================================================================
   온라인 예배 — 시안 worship.html
   ========================================================================== */

/* 이 테마는 content-box 를 쓴다. `width:100%` 에 padding 을 함께 주면 그 padding 만큼
   부모를 넘어간다 — 좁은 화면에서 이 칸이 화면 밖으로 삐져나가고 있었다. */
.wc-player { box-sizing:border-box; border-radius:16px; overflow:hidden; background:#0d2d2b; aspect-ratio:16/9;
	max-height:420px; width:100%; display:flex; flex-direction:column; align-items:center;
	justify-content:center; gap:14px; color:#fff; text-align:center; padding:24px; }
.wc-player-label { font-size:0.8rem; letter-spacing:.14em; color:#8fc1bc; }
.wc-player-next { font-size:1.6rem; font-weight:500; }
.wc-player-hint { font-size:0.84rem; color:#9db9b6; }

/* 다시보기를 틀었을 때의 라이브 자리.
 *
 * **없애지 않고 줄인다.** 큰 칸을 그대로 두면 재생기가 둘이라 어수선하고, 통째로
 * 감추면 다음 예배가 언제인지가 함께 사라진다 — 지난 예배를 보러 온 사람에게
 * 정작 필요한 것이 그 한 줄이다. 그래서 안내판만 남긴다. */
.wc-live-min .wc-player {
	aspect-ratio:auto; max-height:none; min-height:0;
	flex-direction:row; justify-content:flex-start; flex-wrap:wrap;
	gap:6px 12px; padding:12px 18px; text-align:left; border-radius:12px;
}
.wc-live-min .wc-player-next { font-size:1rem; }
.wc-live-min .wc-player-hint { flex-basis:100%; font-size:0.78rem; }
.wc-live-min .wc-bell { margin-top:0; padding:5px 14px; font-size:0.78rem; }

/* 방송 중일 때는 같은 자리에 실제 방송이 들어간다. 안내 문구용 가운데 정렬과
   여백을 걷어내고 iframe이 칸을 그대로 채우게 한다.

   **높이 상한도 함께 푼다.** `max-height:420px` 는 방송이 없는 날 빈 안내판이 폭대로
   커지지 않게 하는 것인데, 재생기에까지 걸리면 aspect-ratio 를 이겨 버린다 — 폭 1200 이면
   칸이 1200x420(2.86:1)이 되고, 유튜브가 그 납작한 칸을 채우느라 16:9 영상의 위아래를
   잘라낸다(강단 위 십자가와 강대상이 사라졌다). 폭 747 아래에서는 상한에 닿지 않으므로
   좁은 화면만 맞고 넓은 화면이 틀린 채로 지나갔다. */
.wc-player-on { display:block; padding:0; position:relative; max-height:none; }
.wc-player-on iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.wc-player-live { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }

/* 시안 `.bell`. 어두운 플레이어 위에서는 흰 테두리, 밝은 바탕에서는 물색 테두리. */
.wc-bell {
	display: inline-block;
	margin-top: 8px;
	border: 1px solid rgb(255 255 255 / 35%);
	border-radius: 22px;
	padding: 9px 20px;
	font-size: 0.84rem;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.wc-bell:hover { border-color: rgb(255 255 255 / 70%); }

.wc-bell-light {
	color: var(--wp--preset--color--water);
	border-color: var(--wp--preset--color--water);
	font-size: 0.81rem;
	padding: 8px 16px;
	margin-top: 12px;
}

.wc-homeband { background:var(--wp--preset--color--water-soft); border-radius:16px;
	padding:30px 36px; margin-top:36px; }
.wc-homeband h2 { font-size:1.35rem; font-weight:500; margin:0 0 10px; }
.wc-homeband p { font-size:0.9rem; color:var(--wp--preset--color--ink-2); line-height:1.85; margin:0; }

.wc-worship-times, .wc-worship-replay { margin-top:52px; }
.wc-live-tag { display:inline-block; margin-left:8px; font-size:0.72rem;
	color:var(--wp--preset--color--water); border:1px solid var(--wp--preset--color--water);
	border-radius:12px; padding:1px 8px; white-space:nowrap; }
.wc-note { margin-top:18px; font-size:0.8rem; color:var(--wp--preset--color--ink-2); line-height:1.9; }
.wc-note a { color:var(--wp--preset--color--water); text-decoration:none; }

.wc-replay-empty { border:1px dashed var(--wp--preset--color--line); border-radius:14px;
	padding:36px 28px; text-align:center; color:var(--wp--preset--color--ink-2); }
.wc-replay-empty p { margin:0; font-size:0.9rem; }
.wc-replay-empty .wc-note { margin-top:10px; }

/* ==========================================================================
   홈 — 시안 home-sample.html
   ========================================================================== */

.wc-hero { position:relative; overflow:hidden;
	background:linear-gradient(180deg,#eef6f4 0%, var(--wp--preset--color--bg) 100%); }

/* 십자가는 오른쪽 배경. 글자는 왼쪽에 두되 화면 끝에 붙이지 않는다. */
.wc-hero-art { position:absolute; right:0; top:0; bottom:0; width:44%;
	display:flex; align-items:center; justify-content:center; z-index:0;
	/* 십자가·빛·빛줄기가 한 크기를 따라가야 서로 어긋나지 않는다.
	   화면이 좁아지면 사라지지 않고 이 값만 작아진다. */
	--wc-cross: min(520px, 40vw); }
.wc-hero-art img { position:relative; z-index:1; width:var(--wc-cross); mix-blend-mode:multiply;
	opacity:.38;
	-webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 50%, #000 34%, transparent 74%);
	mask-image:radial-gradient(ellipse 58% 58% at 50% 50%, #000 34%, transparent 74%); }

/* 십자가 뒤에서 빛이 느리게 밝아졌다 잦아든다. 한 주기 11초. */
.wc-hero-art::before { content:""; position:absolute; z-index:0; width:calc(var(--wc-cross) * 1.05);
	aspect-ratio:1; border-radius:50%;
	background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(226,241,238,.55) 40%, transparent 68%);
	animation:wc-breathe 11s ease-in-out infinite; }
@keyframes wc-breathe {
	0%,100% { opacity:.5; transform:scale(.94); }
	50%     { opacity:.95; transform:scale(1.05); }
}

/* 빛이 십자가 획을 따라 흐른다. 세로가 먼저, 가로가 뒤따른다. */
.wc-trace { position:absolute; z-index:2; width:var(--wc-cross); aspect-ratio:1024/768;
	pointer-events:none; overflow:visible; }
.wc-trace path { fill:none; stroke:#fff; stroke-linecap:round; stroke-width:15; opacity:.85; }
.wc-t-v { stroke-dasharray:64 460; animation:wc-trace-v 7s ease-in-out infinite; }
.wc-t-h { stroke-dasharray:52 300; animation:wc-trace-h 7s ease-in-out infinite .9s; }
@keyframes wc-trace-v { 0% { stroke-dashoffset:524; } 55%,100% { stroke-dashoffset:0; } }
@keyframes wc-trace-h { 0% { stroke-dashoffset:352; } 45%,100% { stroke-dashoffset:0; } }

/* 교회 이름이 물줄기다. 세 줄기가 서로 다른 속도로 흐른다. */
.wc-stream { position:absolute; left:0; right:0; bottom:0; height:150px; z-index:0;
	overflow:hidden; pointer-events:none;
	-webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.wc-stream svg { position:absolute; bottom:0; left:0; width:200%; height:100%; }
.wc-s1 { animation:wc-flow 26s linear infinite; }
.wc-s2 { animation:wc-flow 38s linear infinite; opacity:.75; }
.wc-s3 { animation:wc-flow 52s linear infinite; opacity:.5; }
@keyframes wc-flow { from { transform:translateX(0); } to { transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	.wc-hero-art::before { animation:none; opacity:.7; }
	.wc-trace { display:none; }
	.wc-s1, .wc-s2, .wc-s3 { animation:none; }
}

.wc-hero-in { position:relative; z-index:1; padding-top:62px; padding-bottom:70px; }
.wc-hero-copy { max-width:700px; margin-left:6%; }
.wc-verse { font-family:var(--wp--preset--font-family--serif); font-size:0.94rem;
	line-height:1.8; color:#35565d; margin:0 0 22px; white-space:nowrap; }
.wc-verse cite { font-style:normal; color:var(--wp--preset--color--ink-2); }
/* 영어 구절(WEB)은 899px 이라 700px 칸에 한 줄로 들어가는 폭이 없다 — 접지 않으면 1000px
   화면에서 오른쪽이 잘렸다(2026-09-11). 한 줄로 두는 것은 한국어의 모양이다. */
.wc-verse:lang(en) { white-space:normal; }
/* 본명조는 400·500만 들여왔다. 600을 쓰면 브라우저가 가짜 굵기를 만들어 획이 뭉갠다.
   굵기 대신 크기로 무게를 낸다. */
.wc-hero h1 { font-size:clamp(2.05rem, 3.9vw, 2.9rem); font-weight:500; line-height:1.42;
	margin:0 0 22px; letter-spacing:-.015em; }
.wc-hero-sub { font-size:0.97rem; line-height:1.95; color:var(--wp--preset--color--ink-2); margin:0 0 26px; }

/* 방송 중 — 칠한 버튼이 아니라 켜진 불 하나. */
.wc-on-air { display:inline-flex; align-items:center; gap:8px; font-size:0.86rem;
	color:var(--wp--preset--color--ink); text-decoration:none; }
.wc-on-air:hover { color:var(--wp--preset--color--water); }
.wc-on-air b { font-weight:600; }
.wc-lamp { width:8px; height:8px; border-radius:50%; background:#d9483f; flex:0 0 8px;
	box-shadow:0 0 0 0 rgba(217,72,63,.55); animation:wc-lamp 1.9s ease-out infinite; }
@keyframes wc-lamp {
	0%   { box-shadow:0 0 0 0 rgba(217,72,63,.55); opacity:1; }
	70%  { box-shadow:0 0 0 8px rgba(217,72,63,0); opacity:.6; }
	100% { box-shadow:0 0 0 0 rgba(217,72,63,0); opacity:1; }
}
@media (prefers-reduced-motion: reduce) { .wc-lamp { animation:none; } }

.wc-section { padding-top:76px; padding-bottom:8px; }

/* 소제목은 얕은 물에 밑동을 담근다. 칠한 상자보다 조용하다. */
.wc-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
	margin-bottom:24px; padding-bottom:14px;
	border-bottom:1px solid var(--wp--preset--color--line); }
.wc-head h2,
.wc-me-board-h { font-size:1.4rem; font-weight:500; margin:0; line-height:1.4; padding-bottom:2px;
	background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40' preserveAspectRatio='none'>\
<defs><linearGradient id='w' x1='0' y1='0' x2='1' y2='0'>\
<stop offset='0' stop-color='%230e6b66' stop-opacity='0'/>\
<stop offset='.18' stop-color='%230e6b66' stop-opacity='1'/>\
<stop offset='.72' stop-color='%230e6b66' stop-opacity='1'/>\
<stop offset='1' stop-color='%230e6b66' stop-opacity='0'/>\
</linearGradient></defs>\
<path d='M0,16 C40,2 80,30 120,16 C140,9 150,13 160,16 L160,40 L0,40 Z' fill='url(%23w)' opacity='.13'/>\
<path d='M0,27 C40,13 80,41 120,27 C140,20 150,24 160,27 L160,40 L0,40 Z' fill='url(%23w)' opacity='.09'/>\
</svg>") left bottom / 100% 18px no-repeat; }

/* 구역 안쪽의 작은 제목은 같은 물결을 낮게 깐다. 이 사이트에서 제목 아래에 그어지는
   것은 선이 아니라 물결이다 — 밋밋한 1px 로 두면 그 자리만 다른 사이트가 된다.

   **글자만큼만 깔린다.** `.wc-head h2` 는 flex 안이라 저절로 글자 폭인데, 이 둘은
   블록이라 칸 끝까지 늘어져 획 한가운데가 길게 번진 자국으로 남았다. */
.wc-me-board-h { display:inline-block; font-size:1.12rem; background-size:100% 14px; }
/* 340px로 깔아 두었더니 "예배 시간"처럼 짧은 제목에서는 27%만 보였다. 물결은
   양 끝이 흐려지며 사라지는데 그 끝이 화면 밖이라, 획 한가운데가 수직으로 잘린
   회색 자국으로 남았다. 제목 폭에 맞춰 늘린다. */
.wc-head a { font-size:0.85rem; color:var(--wp--preset--color--water); text-decoration:none;
	white-space:nowrap; padding-bottom:3px; }

/* 폰에서 「전체 일정 →」이 27px 이었다. 손가락은 그보다 굵다. */
@media (max-width: 640px) {
	.wc-head a { display:inline-flex; align-items:center; min-height:40px; padding:0 2px; }
	.wc-rail-btn { width:40px; height:40px; }
}
/* 한 줄짜리 안내문이라 폭을 묶지 않는다. 자리가 있으면 한 줄로 간다. */
.wc-lede { font-size:0.92rem; color:var(--wp--preset--color--ink-2); margin:-6px 0 26px; }
.wc-empty { font-size:0.9rem; color:var(--wp--preset--color--ink-2); }

/* 교회 일정과 예배 일정을 한 줄에 */
.wc-two { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }

.wc-sv { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,auto); align-items:center; gap:16px;
	padding:17px 12px; border-bottom:1px solid var(--wp--preset--color--line);
	text-decoration:none; color:inherit; }
.wc-head + .wc-sv { border-top:1px solid var(--wp--preset--color--line); }
.wc-sv-n { font-size:0.97rem; }
.wc-sv-t { font-size:1.02rem; font-weight:600; text-align:right; white-space:nowrap;
	color:var(--wp--preset--color--ink); font-variant-numeric:tabular-nums; }
.wc-sv-t small { font-weight:500; font-size:0.82rem; color:var(--wp--preset--color--ink-2); margin-right:6px; }
.wc-badge { font-size:0.73rem; border:1px solid var(--wp--preset--color--line); border-radius:999px;
	padding:3px 10px; color:var(--wp--preset--color--ink-2); white-space:nowrap; }
.wc-sv .wc-on-air { font-size:0.8rem; gap:7px; }
.wc-sv .wc-lamp { width:7px; height:7px; flex:0 0 7px; }

/* 지난 설교 — 한 줄, 작게 */
/* Splide(MIT) 기본 화살표는 연한 회색 원이라 이 배경에서 묻힌다. 시안대로 다시 그린다. */

.wc-ps { text-decoration:none; color:inherit; display:block; }
.wc-ps img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:8px; display:block; }
.wc-ps .wc-labels { margin-top:10px; }
.wc-ps .wc-series-chip { background:var(--wp--preset--color--water-soft); border-radius:999px;
	padding:2px 9px; letter-spacing:0; }
.wc-ps .wc-chip { border-radius:999px; padding:2px 9px; font-size:0.7rem; }
.wc-ps h3 { font-size:0.9rem; font-weight:500; margin:7px 0 3px; line-height:1.5; }
.wc-ps-b { font-size:0.78rem; color:var(--wp--preset--color--ink-2); }

@media (max-width:900px) {
	.wc-two { grid-template-columns:1fr; gap:44px; }
}
@media (max-width:820px) {
	/* 인용 한 줄과 손으로 넣은 줄바꿈은 글 상자가 700px를 지킬 때까지만 버틴다. */
	.wc-verse { white-space:normal; }
	.wc-hero-sub br { display:none; }
}

.wc-hbook { display:block; text-decoration:none; color:var(--wp--preset--color--ink); }
/* 서재 그리드(.wc-bk)와 같은 이유로 height:auto가 있어야 한다 — WordPress가 붙이는
   height 속성이 CSS height로 매핑되어 aspect-ratio를 눌러 버린다. 이게 빠져 있어서
   홈 캐러셀의 표지만 원본 비율대로 길쭉하게 나왔다. */
.wc-hbook img, .wc-hbook .wc-bk-nocover { width:100%; height:auto; aspect-ratio:7/10;
	object-fit:cover; border-radius:6px; box-shadow:0 8px 18px rgba(14,107,102,.16); display:block; }
.wc-hbook-no { display:block; font-size:0.7rem; color:var(--wp--preset--color--water);
	margin-top:11px; font-weight:600; }
.wc-hbook-t { display:block; font-size:0.79rem; margin-top:2px; line-height:1.5; font-weight:500; }
.wc-hbook-s { display:block; font-size:0.72rem; margin-top:3px; line-height:1.5;
	color:var(--wp--preset--color--ink-2); }


/* 1000px 아래부터 글줄 끝이 십자가에 닿는다. 크기는 그대로 두고 농도만 낮춘다. */
@media (max-width:1000px) {
	.wc-hero-art img { opacity:.24; }
	.wc-trace path { opacity:.6; }
}

@media (max-width:860px) {
		.wc-section { padding-top:52px; }
	.wc-head { flex-wrap:wrap; }
	.wc-hero-copy { margin-left:0; }
	/* 숨기지 않는다. 글 뒤로 겹치는 폭이라 크기를 줄이고 더 옅게 둔다. */
	.wc-hero-art { width:58%; --wc-cross: min(300px, 46vw); }
	.wc-hero-art img { opacity:.2; }
	.wc-hero-art::before { opacity:.4; }
	.wc-trace path { opacity:.5; }
}

/* ==========================================================================
   검색 결과 · 없는 쪽
   ========================================================================== */

.wc-search-title { font-size:1.6rem; font-weight:500; margin:0 0 20px; }

.wc-searchform { display:flex; gap:8px; max-width:560px; margin-bottom:36px; }
.wc-searchform input { flex:1; min-width:0; border:1px solid var(--wp--preset--color--line);
	border-radius:26px; padding:12px 20px; font-size:0.9rem; font-family:inherit;
	background:#fff; color:var(--wp--preset--color--ink); }
.wc-searchform button { border:0; border-radius:26px; padding:12px 22px; cursor:pointer;
	background:var(--wp--preset--color--water); color:#fff; font-size:0.86rem; font-family:inherit; }

.wc-results { border-top:1px solid var(--wp--preset--color--ink); max-width:760px; }
.wc-result { padding:20px 2px; border-bottom:1px solid var(--wp--preset--color--line); }
.wc-result-kind { font-size:0.72rem; font-weight:600; color:var(--wp--preset--color--water);
	letter-spacing:.06em; }
.wc-result h2 { font-size:1.15rem; font-weight:500; margin:6px 0 0; line-height:1.5; }
.wc-result h2 a { color:inherit; text-decoration:none; }
.wc-result-meta { font-size:0.78rem; color:var(--wp--preset--color--ink-2); margin-top:6px; }
.wc-result-excerpt { font-size:0.86rem; color:var(--wp--preset--color--ink-2);
	line-height:1.85; margin:8px 0 0; }

.wc-notfound { text-align:center; padding-top:80px; padding-bottom:80px; }
.wc-notfound h1 { font-size:1.8rem; font-weight:500; margin:0 0 12px; }
.wc-notfound p { color:var(--wp--preset--color--ink-2); margin:0 0 28px; }
.wc-notfound .wc-searchform { margin:0 auto 28px; }
.wc-notfound-links { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; font-size:0.86rem; }
.wc-notfound-links a { color:var(--wp--preset--color--water); text-decoration:none; }

.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden;
	clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* 좁은 화면에서 예배 시간표가 넘치지 않게 이름/시간을 위아래로 쌓는다.
   이름 칸이 140px 고정이라 값이 길면 밀려난다. */
@media (max-width: 700px) {
	/* 모바일에서는 검색이 아래 줄로 내려가고 폭을 다 쓴다 */
	.wc-sermon-search { flex-basis:100%; max-width:none; margin-left:0; }
}

@media (max-width: 560px) {
	.wc-wrow { flex-direction: column; gap: 2px; }
	.wc-wname { flex: none; }
	.wc-live-tag { margin-left: 0; }
	/* 검색칸과 단추를 위아래로 쌓지 않는다. 390px 에서도 나란히 들어가고,
	   쌓으면 걸러 보는 줄이 세 줄로 늘어난다. */
	.wc-searchform button { padding: 12px 18px; }
	.wc-newbook img { width: 120px; }
}

/* ==========================================================================
   블록 콘텐츠 고정 페이지 (교회소개)
   ========================================================================== */

/* 본문 폭은 여기서 잡는다. alignfull 블록만 화면 끝까지 나간다. */
.wc-page > * {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(36px, 8vw, 88px);
	padding-right: clamp(36px, 8vw, 88px);
}

.wc-page > .alignfull {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.wc-page > * + * { margin-top: 36px; }
.wc-page { padding-bottom: 20px; }
.wc-page-title { font-size:1.9rem; font-weight:500; margin:32px auto 20px; }

/* 히어로 */
.wc-page .wp-block-cover { min-height:320px; align-items:flex-end; position:relative; }

/* 글자 아래에만 그늘을 깐다. 사진 전체를 어둡게 덮으면 밝게 찍은 사진이
   칙칙해진다 — 흰 글자가 읽혀야 하는 곳은 아래 3분의 1뿐이다. */
.wc-page .wp-block-cover::after {
	content:"";
	position:absolute; left:0; right:0; bottom:0; height:58%;
	background:linear-gradient(to top, rgba(12,26,28,.55), rgba(12,26,28,0));
	pointer-events:none;
}

.wc-page .wp-block-cover .wp-block-cover__inner-container { position:relative; z-index:1; }
.wc-page .wp-block-cover .wp-block-cover__inner-container {
	box-sizing:border-box;
	max-width:1200px; margin:0 auto; padding:0 clamp(36px, 8vw, 88px) 12px; width:100%; }
.wc-page .wp-block-cover h2 { font-size:clamp(1.15rem, 2.4vw, 1.6rem); font-weight:500;
	line-height:1.5; color:#fff; margin:0; }

/* 연청록 띠 */
.wc-page > .has-water-soft-background-color { padding-top:44px; padding-bottom:44px; }
.wc-page > .has-water-soft-background-color > * {
	max-width:1200px; margin-left:auto; margin-right:auto;
	padding-left:clamp(36px, 8vw, 88px); padding-right:clamp(36px, 8vw, 88px); }

/* 글+그림 두 칸 */
.wc-page .wp-block-columns { gap:32px; }
.wc-page .wc-alt h2 { font-size:1.6rem; font-weight:500; line-height:1.5; margin:0 0 16px; }
.wc-page .wc-alt p { font-size:0.94rem; color:var(--wp--preset--color--ink-2); line-height:1.95; margin:0 0 10px; }
.wc-page .wp-block-image { margin:0; }
/* 그림이 제 비율대로 커지면 두 줄짜리 글 옆에 372px짜리 그림이 서서, 화면이
   비어 보이는 만큼 스크롤만 길어진다. 글 높이에 맞춰 잘라 쓴다. */
.wc-page .wp-block-image img { width:100%; max-height:250px; object-fit:cover;
	border-radius:14px; display:block; box-shadow:0 10px 26px rgba(14,107,102,.14); }
.wc-page .wc-cards .wp-block-image img { max-height:none; object-fit:contain; }
.wc-more-p a { color:var(--wp--preset--color--water); text-decoration:none; font-size:0.9rem; }

/* 카드 묶음 (사역·섬기는 분들·예배 안내) */
.wc-page .wc-cards { gap:20px; }
.wc-page .wc-cards > .wp-block-column {
	background:#fff; border:1px solid var(--wp--preset--color--line);
	border-radius:14px; padding:22px 24px; }
.wc-page .wc-cards h2 { font-size:1.25rem; font-weight:500; margin:0 0 14px; }
.wc-page .wc-cards h3 { font-size:1.05rem; font-weight:500; margin:0 0 8px; }
.wc-page .wc-cards p { font-size:0.86rem; color:var(--wp--preset--color--ink-2); line-height:1.8; margin:0; }
.wc-page .wc-cards .wp-block-image img { border-radius:12px; max-width:160px; box-shadow:none; }
.wc-act-when-p { margin-top:10px !important; color:var(--wp--preset--color--water) !important; font-size:0.78rem !important; }

.wc-page .wp-block-list { margin:0; padding-left:0; list-style:none; }

/* 위 규칙은 교회소개의 카드 안 목록을 위한 것인데, 클래스가 둘이라 `.wc-page > *` 의
   본문 여백과 가운데 정렬을 모두 이겨 **최상위 목록만 왼쪽으로 밀려 나간다.**
   직접 자식일 때는 되돌리고, 왼쪽 끝을 문단과 맞춘다. */
.wc-page > .wp-block-list {
	max-width: 1200px;
	/* 문단은 `margin-left: 0` 이라 화면 폭대로 서고 여백만 padding 이 만든다.
	   목록만 가운데 정렬되면 왼쪽 끝이 문단보다 한 단 더 들어간다. 같은 방식으로 세운다. */
	margin-left: 0;
	margin-right: 0;
	/* 문단 여백에 한 단만 더. 조문 안의 항목이라는 것이 보일 정도면 된다. */
	padding-left: calc(clamp(36px, 8vw, 88px) + 14px);
	padding-right: clamp(36px, 8vw, 88px);
	list-style-position: inside;
}
.wc-page .wp-block-list li { padding:11px 2px; border-bottom:1px solid var(--wp--preset--color--line);
	font-size:0.88rem; color:var(--wp--preset--color--ink-2); }
.wc-page .wp-block-list li strong { color:var(--wp--preset--color--ink); font-weight:500; }

.wc-page > h2 { font-size:1.7rem; font-weight:500; margin-bottom:10px; }
.wc-page > p { color:var(--wp--preset--color--ink-2); font-size:0.94rem; line-height:1.9; max-width:1200px; }
.wc-page > h2 + p { margin-top:10px; }

@media (max-width: 780px) {
	.wc-page .wp-block-columns { flex-wrap:wrap !important; gap:24px; }
	.wc-page .wp-block-columns > .wp-block-column { flex-basis:100% !important; }
	.wc-page > * + * { margin-top:28px; }
}

/* 일정 상세 */
/* 낱장 셋(설교·일정·소식)은 같은 읽기 폭에 **가운데로** 선다. 설교만 그렇고 나머지
   둘은 왼쪽에 붙어 있어서, 넓은 화면에서 오른쪽이 358px 통째로 비었다. 폭이 좁은
   것이 아니라 쏠려 있던 것이다. */
.wc-event-single { max-width:760px; margin:0 auto; }
.wc-event-single h1 { font-size:1.8rem; font-weight:500; line-height:1.45; margin:0 0 12px; }
.wc-event-when { margin-bottom:28px; }
.wc-event-body p { font-size:0.96rem; line-height:2; color:var(--wp--preset--color--ink-2); }

/* 목차 — 전체 펼치기 */
.wc-toc li a { align-items:baseline; gap:12px; }
.wc-toc-t { flex:1; min-width:0; }
.wc-toc details ol { border-top:0; }
/* 펼치면 나머지 목차가 **단추 위로** 이어 붙고 단추는 아래로 내려간다.
   `<details>` 는 마크업상 summary 가 늘 먼저지만, flex 로 세우면 순서만 바꿀 수 있다 —
   시맨틱과 JS 없는 동작을 그대로 두고 보이는 차례만 고치는 방법이다.
   목록이 단추로 끊기지 않게 하려는 것이다. */
.wc-toc-more { display:flex; flex-direction:column; padding:0; margin-top:2px; }
.wc-toc-more > summary { order:2; padding:12px 2px; font-size:0.8rem; color:var(--wp--preset--color--water);
	cursor:pointer; list-style:none; border-bottom:1px solid var(--wp--preset--color--line); }
.wc-toc-more > ol { order:1; }
.wc-toc-more > summary::-webkit-details-marker { display:none; }
.wc-toc-more > summary::after { content:" ▾"; }
.wc-toc-more[open] > summary::after { content:" ▴"; }

/* 열고 나면 그 단추가 하는 일이 「접기」로 바뀐다. 말도 함께 바뀌어야 한다. */
.wc-toc-more[open] .wc-toc-say-open,
.wc-toc-more:not([open]) .wc-toc-say-shut { display:none; }

/* 유튜브에 썸네일이 없는 영상이 있다. 그 자리는 비워 두지 않는다.
   대체 표시를 썸네일 뒤에 항상 깔아 두고, 이미지가 안 나오면 그게 보이게 한다.
   :has()에 기대지 않으려는 것이기도 하다. */
.wc-thumb::before,
.wc-fthumb::before {
	content: "말씀";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--water);
	font-size: 1.1rem;
}

/* 영어 화면(`<html lang="en-US">`)의 같은 자리. CSS 의 글자는 gettext 가 닿지 않는다.
   「말씀」은 낱말이 아니라 그리스도·복음이다(사이트 소개가 *the Living Word* 인 까닭). */
html:lang(en) .wc-thumb::before,
html:lang(en) .wc-fthumb::before,
html:lang(en) .wc-scard-thumb::before { content: "Word"; }

.wc-thumb img,
.wc-fthumb img { position: relative; z-index: 1; }

/* `.wc-thumb img { display:block }` 이 클래스 하나짜리 규칙을 이기므로
   같은 수준으로 맞춰 준다. 안 그러면 회색 자리표시가 그대로 남는다. */
.wc-thumb img.wc-thumb-missing,
.wc-fthumb img.wc-thumb-missing { display: none; }

/* 말씀 화면 컨트롤: 설교자 탭 → 시리즈 → 검색을 한 줄에 둔다.
   좁은 화면에서는 자연스럽게 접힌다. */
.wc-controls { align-items:center; row-gap:10px; }
.wc-sermon-search { flex:0 1 340px; max-width:340px; margin:0 0 0 auto; }
.wc-sermon-search input { padding:10px 16px; font-size:0.82rem; }
.wc-sermon-search button { padding:10px 18px; font-size:0.82rem; }
.wc-series-filter select { border:1px solid var(--wp--preset--color--line); border-radius:26px;
	padding:10px 16px; background:#fff; font-size:0.82rem; font-family:inherit;
	color:var(--wp--preset--color--ink-2); max-width:220px; }
.wc-result-count { font-size:0.86rem; color:var(--wp--preset--color--ink-2); margin:18px 0 0; }
.wc-result-count a { margin-left:10px; color:var(--wp--preset--color--water); text-decoration:none; }

/* 시리즈 안에서의 위치와 앞뒤 이동 */
.wc-series-pos { display:block; margin-top:4px; color:var(--wp--preset--color--water); font-size:0.78rem; }

.wc-sermon-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:44px;
	padding-top:22px; border-top:1px solid var(--wp--preset--color--line); }
.wc-sermon-nav a { display:block; padding:14px 18px; border:1px solid var(--wp--preset--color--line);
	border-radius:12px; text-decoration:none; color:var(--wp--preset--color--ink); background:#fff; }
.wc-nav-next { text-align:right; }
.wc-nav-label { display:block; font-size:0.72rem; color:var(--wp--preset--color--water); font-weight:600; }
.wc-nav-title { display:block; font-size:0.9rem; font-weight:500; margin-top:5px; line-height:1.5; }
.wc-nav-date { display:block; font-size:0.74rem; color:var(--wp--preset--color--ink-2); margin-top:4px; }

@media (max-width:640px) { .wc-sermon-nav { grid-template-columns:1fr; } .wc-nav-next { text-align:left; } }

/* ==========================================================================
   이어보기 띠 (홈) · 영상 이어보기 안내
   ========================================================================== */

.wc-resume-strip { padding-top:40px; }
.wc-rs-head { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.wc-rs-title { font-family:var(--wp--preset--font-family--serif); font-size:1.15rem; }

/* 목록에서 "보던 것" 표시. 진도가 있는 카드에만 붙는다(progress-marks.js). */
.wc-seen { position:relative; }
.wc-seen-mark { display:flex; align-items:center; gap:9px; padding:9px 2px 0; }
.wc-seen-bar { flex:1; height:3px; border-radius:2px; overflow:hidden;
	background:var(--wp--preset--color--line); }
.wc-seen-bar i { display:block; height:100%; background:var(--wp--preset--color--water); }
.wc-seen-text { font-size:0.72rem; color:var(--wp--preset--color--water); white-space:nowrap; }

/* 서재 카드는 표지 아래 제목이 이어지므로 표시를 카드 안쪽 여백에 맞춘다. */
.wc-bk .wc-seen-mark { padding-top:7px; }
/* 설교 카드는 본문 상자 안에 들어가야 테두리에 닿지 않는다. */
.wc-sermon .wc-seen-mark { padding:0 18px 16px; }


/* 이어보기는 본문이 아니라 안내다. 카드를 작게 두고 가로로 넘겨 본다. */
.wc-rs-card { display:flex; gap:10px; align-items:center; padding:10px 12px;
	border:1px solid var(--wp--preset--color--line); border-radius:12px; background:#fff;
	text-decoration:none; color:var(--wp--preset--color--ink); }
.wc-rs-card img { width:38px; height:54px; object-fit:cover; border-radius:5px; flex:0 0 38px;
	box-shadow:0 4px 10px rgba(14,107,102,.14); }
.wc-rs-card img.wide { width:76px; height:43px; flex:0 0 76px; }
.wc-rs-body { flex:1; min-width:0; }
.wc-rs-kind { font-size:0.66rem; color:var(--wp--preset--color--water); font-weight:600;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-rs-name { font-size:0.84rem; font-weight:500; margin:2px 0 6px; line-height:1.4;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-rs-bar { height:3px; border-radius:2px; background:var(--wp--preset--color--line); overflow:hidden; }
.wc-rs-bar i { display:block; height:100%; background:var(--wp--preset--color--water); }
.wc-rs-meta { font-size:0.68rem; color:var(--wp--preset--color--ink-2); margin-top:5px;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 가리키면 살짝 떠오른다. 그림자만 짙게 하면 도리어 눌려 보여 함께 들어 올린다. */
.wc-bk img,
.wc-bk-nocover,
.wc-hbook img,
.wc-hbook .wc-bk-nocover,
.wc-ps img {
	transition: transform .22s ease, box-shadow .22s ease;
}

.wc-ps img { box-shadow: 0 4px 10px rgba(14, 107, 102, .10); }

.wc-bk:hover img,
.wc-bk:hover .wc-bk-nocover,
.wc-hbook:hover img,
.wc-hbook:hover .wc-bk-nocover,
.wc-ps:hover img {
	transform: translateY(-4px);
	box-shadow: 0 14px 26px rgba(14, 107, 102, .24);
}

.wc-bk-title,
.wc-hbook-t,
.wc-ps h3,
.wc-sermon h3 { transition: color .18s ease; }
.wc-bk:hover .wc-bk-title,
.wc-hbook:hover .wc-hbook-t,
.wc-ps:hover h3,
.wc-sermon:hover h3 { color: var(--wp--preset--color--water); }

/* 테두리 상자 카드는 안쪽 그림이 아니라 상자째 뜬다. overflow:hidden이라 안에서 띄우면 잘린다. */
.wc-rs-card,
.wc-sermon { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.wc-sermon:hover {
	transform: translateY(-3px);
	border-color: #c8dedb;
	box-shadow: 0 12px 24px rgba(14, 107, 102, .14);
}
.wc-rs-card:hover {
	transform: translateY(-2px);
	border-color: #c8dedb;
	box-shadow: 0 8px 18px rgba(14, 107, 102, .13);
}


@media (prefers-reduced-motion: reduce) {
	.wc-rail-track { scroll-behavior:auto; }
	.wc-bk img,
	.wc-bk-nocover,
	.wc-hbook img,
	.wc-ps img,
	.wc-rs-card,
	.wc-sermon,
	.wc-nav a,
	.wc-nav .wc-nav-t { transition: none; }

	.wc-bk:hover img,
	.wc-bk:hover .wc-bk-nocover,
	.wc-hbook:hover img,
	.wc-hbook:hover .wc-bk-nocover,
	.wc-ps:hover img,
	.wc-rs-card:hover,
	.wc-sermon:hover { transform: none; }
}

/* 영상 이어보기 안내 */
.wc-video-resume { display:flex; align-items:center; justify-content:space-between; gap:12px;
	background:var(--wp--preset--color--water-soft); border-radius:12px; padding:12px 18px;
	margin-bottom:14px; font-size:0.86rem; color:var(--wp--preset--color--ink); }
.wc-video-resume[hidden] { display:none; }
.wc-video-resume button { border:0; border-radius:20px; padding:8px 16px; cursor:pointer;
	background:var(--wp--preset--color--water); color:#fff; font-size:0.8rem; font-family:inherit; }

@media (max-width:560px) {
	.wc-video-resume { flex-direction:column; align-items:stretch; text-align:center; }
}

/* 시리즈로 보기 밴드 (말씀) */
.wc-series-band { background:var(--wp--preset--color--water-soft); border-radius:16px;
	padding:22px 24px 24px; margin-bottom:30px; }
.wc-sb-t { font-size:0.8rem; font-weight:600; color:var(--wp--preset--color--water);
	margin-bottom:14px; letter-spacing:.06em; }
.wc-series-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wc-scard { display:flex; gap:14px; align-items:center; border:1px solid var(--wp--preset--color--line);
	border-radius:12px; background:#fff; padding:12px 16px 12px 12px; text-decoration:none;
	color:var(--wp--preset--color--ink); }
.wc-scard-thumb { position:relative; display:block; width:86px; flex:0 0 86px; aspect-ratio:16/9;
	border-radius:8px; overflow:hidden; background:#dbe6e4; }
.wc-scard-thumb img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }
.wc-scard-thumb::before { content:"말씀"; position:absolute; inset:0; display:flex;
	align-items:center; justify-content:center; font-family:var(--wp--preset--font-family--serif);
	color:var(--wp--preset--color--water); font-size:0.8rem; }
.wc-scard-thumb img.wc-thumb-missing { display:none; }
.wc-scard-t { display:block; font-size:0.9rem; font-weight:500; }
.wc-scard-s { display:block; font-size:0.75rem; color:var(--wp--preset--color--ink-2); margin-top:3px; }

@media (max-width:760px) { .wc-series-strip { grid-template-columns:1fr; } }

/* 시리즈 밴드 머리줄 · 전체 목록 */
.wc-sb-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px; }
.wc-sb-t { margin-bottom:0; }
.wc-sb-all { font-size:0.78rem; color:var(--wp--preset--color--water); text-decoration:none; white-space:nowrap; }
.wc-series-all-title { font-size:1.5rem; margin:0 0 20px; }
.wc-series-all { grid-template-columns:repeat(3,1fr); }
@media (max-width:900px) { .wc-series-all { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .wc-series-all { grid-template-columns:1fr; } }

/* ── 가로로 넘겨 보는 줄 ──────────────────────────────────────────────
   스크롤은 브라우저에 맡긴다(rail.js). 캐러셀 라이브러리는 휠을 가로채면서
   정작 트랙패드 가로 스크롤을 먹지 않았다. 여기서는 화살표만 얹는다. */
.wc-rail { position:relative; }
.wc-rail-track { display:flex; gap:var(--wc-rail-gap, 22px); overflow-x:auto;
	overscroll-behavior-x:contain; scroll-snap-type:x proximity;
	/* 카드가 가리키면 떠오른다. overflow는 세로도 자르므로 그만큼 자리를 낸다.
	   그림자가 아래로 26px까지 번지므로 아래쪽을 더 넉넉히 둔다. */
	padding:12px 2px 30px; margin:-12px -2px -30px;
	list-style:none;
	scrollbar-width:none; -ms-overflow-style:none; }
.wc-rail-track::-webkit-scrollbar { display:none; }
.wc-rail-track > * { flex:0 0 var(--wc-rail-w, 240px); width:var(--wc-rail-w, 240px);
	scroll-snap-align:start; }

/* 화살표는 넘길 것이 있을 때만 나온다(rail.js가 .wc-rail-on을 건다). */
.wc-rail-btn { display:none; position:absolute; top:50%; transform:translateY(-50%);
	width:36px; height:36px; border-radius:50%; z-index:3; cursor:pointer;
	border:1px solid var(--wp--preset--color--line); background:rgba(251,252,252,.96);
	box-shadow:0 2px 10px rgba(14,107,102,.14);
	align-items:center; justify-content:center;
	transition:background .18s ease, border-color .18s ease, opacity .18s ease; }
.wc-rail-on .wc-rail-btn { display:flex; }
.wc-rail-prev { left:-16px; }
.wc-rail-next { right:-16px; }
.wc-rail-btn svg { width:15px; height:15px; fill:none; stroke:var(--wp--preset--color--ink-2);
	stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wc-rail-btn:hover:not(:disabled) { background:#fff; border-color:var(--wp--preset--color--water); }
.wc-rail-btn:hover:not(:disabled) svg { stroke:var(--wp--preset--color--water); }
.wc-rail-btn:disabled { opacity:.28; cursor:default; }

/* 줄마다 카드 폭이 다르다. */
.wc-rs-rail    { --wc-rail-w:236px; --wc-rail-gap:12px; }
.wc-books-rail { --wc-rail-w:128px; --wc-rail-gap:30px; }
.wc-past       { --wc-rail-w:268px; --wc-rail-gap:22px; }

@media (max-width:640px) {
	.wc-books-rail { --wc-rail-w:112px; --wc-rail-gap:18px; }
	.wc-past { --wc-rail-w:240px; }
	.wc-rail-prev { left:-8px; }
	.wc-rail-next { right:-8px; }
}

/* 예배 이름 아래 설교 제목. 없는 주가 더 많으므로 있을 때만 자리를 차지한다. */
.wc-sv-topic { display:block; font-size:0.76rem; color:var(--wp--preset--color--ink-2);
	margin-top:2px; line-height:1.5; }

/* 시리즈 고르개. 셀렉트 상자와 같은 자리·같은 모양을 쓰되 글자를 칠 수 있다. */
/* 목록은 칸과 같은 너비로 둔다. 칸보다 넓으면 아래로 삐져나와 어수선하다. */
.wc-combo { position:relative; width:220px; max-width:100%; }
.wc-combo-in { border:1px solid var(--wp--preset--color--line); border-radius:26px;
	padding:10px 16px; background:#fff; font-size:0.82rem; font-family:inherit;
	color:var(--wp--preset--color--ink); width:100%; box-sizing:border-box; }
.wc-combo-in::placeholder { color:var(--wp--preset--color--ink-2); }
.wc-combo-in:focus { outline:none; border-color:var(--wp--preset--color--water); }
.wc-combo-list { position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:100%;
	/* 여백과 테두리가 너비에 더해지면 칸보다 넓어져 어긋나 보인다. */
	box-sizing:border-box;
	max-height:288px; overflow-y:auto; margin:0; padding:5px; list-style:none;
	background:#fff; border:1px solid var(--wp--preset--color--line); border-radius:14px;
	box-shadow:0 12px 28px rgba(14,107,102,.16); }
.wc-combo-list li { padding:7px 11px; border-radius:8px; font-size:0.82rem; line-height:1.5;
	cursor:pointer; color:var(--wp--preset--color--ink);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-combo-list li.at { background:var(--wp--preset--color--water-soft); }
.wc-combo-list li.on { color:var(--wp--preset--color--water); font-weight:600; }
.wc-combo-none { color:var(--wp--preset--color--ink-2); font-size:0.78rem; cursor:default;
	padding:7px 11px; }

/* 목차. 읽던 자리를 잃지 않도록 이 화면 위에 덮어 연다 — 예전에는 책 소개
   페이지로 나가 버려서, 돌아오려면 처음부터 다시 들어와야 했다. */
.wc-rtoc {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(38, 33, 26, .38);
	display: flex;
	justify-content: flex-start;
}

.wc-rtoc[hidden] { display: none; }

.wc-rtoc-panel {
	width: min(420px, 88vw);
	background: var(--wp--preset--color--paper);
	display: flex;
	flex-direction: column;
	box-shadow: 8px 0 32px rgba(38, 33, 26, .22);
}

.wc-rtoc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--wp--preset--color--reader-line);
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--reader-ink);
}

.wc-rtoc-x {
	border: 0;
	background: none;
	font-size: 1rem;
	cursor: pointer;
	color: var(--wp--preset--color--reader-ink-2);
	padding: 4px 8px;
	line-height: 1;
}

.wc-rtoc-list {
	flex: 1;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	counter-reset: none;
}

.wc-rtoc-list a {
	display: flex;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--reader-ink);
	font-size: 0.9rem;
	line-height: 1.5;
}

.wc-rtoc-list a:hover { background: rgba(38, 33, 26, .05); }

.wc-rtoc-list a.on {
	background: #eef4ef;
	color: #2e5941;
	font-weight: 600;
}

.wc-rtoc-no {
	flex: 0 0 2.2em;
	color: var(--wp--preset--color--reader-ink-2);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.wc-rtoc-list a.on .wc-rtoc-no { color: #2e5941; }

/* 목차가 열린 동안 뒤쪽 글이 같이 움직이면 읽던 자리를 잃는다. */
body.wc-locked { overflow: hidden; }


/* 관리자로 로그인하면 위에 관리 바가 붙는다. 붙박이 머리글이 그 밑으로
   들어가 목차·나가기가 가려졌다. */
body.admin-bar .wc-reader-top { top: 32px; }
body.admin-bar .wc-rtoc { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .wc-reader-top { top: 46px; }
	body.admin-bar .wc-rtoc { top: 46px; }
}

/* ── 읽는 화면 설정 ─────────────────────────────────────────────────
   글자 굵기와 밤 화면. 고른 값은 이 브라우저에 남는다(reader.js). */

/* 본문만 굵게 한다. 제목까지 따라 굵어지면 층이 사라져 도리어 읽기 나쁘다. */
body.wc-bold .wc-reader-page p,
body.wc-bold .wc-reader-page li,
body.wc-bold .wc-reader-page blockquote { font-weight: 600; }

.wc-aa-bold svg,
.wc-aa-dark svg { width: 15px; height: 15px; display: block; fill: currentColor; }


/* 눌린 설정은 눌린 티가 나야 한다. */
.wc-aa[aria-pressed="true"] {
	background: var(--wp--preset--color--reader-ink);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--reader-ink);
}

/* 밤 화면. 검정에 가까우면 밝은 글자가 테두리에서 번쩍여 눈이 아프고,
   무채색 회색은 텁텁하다. 푸른 기가 도는 슬레이트에 부드러운 흰색 — 터미널
   배색이 오래 보기 편한 이유이기도 하다(Harry).
   변수만 바꾸고 상속에 맡기면, 색을 직접 적어 둔 자리(인용문 등)가 어두운
   바탕에 어두운 글씨로 남는다. 글이 놓이는 자리는 하나씩 짚어 준다. */
body.wc-reader.wc-dark {
	--wp--preset--color--paper: #282a36;
	--wp--preset--color--reader-ink: #f0efe9;
	--wp--preset--color--reader-ink-2: #9095b0;
	--wp--preset--color--reader-line: #3d4054;
	background: #282a36;
	color: #f0efe9;
}

body.wc-dark .wc-reader-page,
body.wc-dark .wc-reader-page h1,
body.wc-dark .wc-reader-page p,
body.wc-dark .wc-reader-page li,
body.wc-dark .wc-reader-page strong,
body.wc-dark .wc-reader-page em { color: #f0efe9; }

body.wc-dark .wc-reader-page blockquote { color: #c8c9d4; }

body.wc-dark .wc-chapter-no,
body.wc-dark .wc-reader-title,
body.wc-dark .wc-reader-info { color: #9095b0; }

body.wc-dark .wc-reader-title b { color: #f0efe9; }
body.wc-dark .wc-reader-nav a { color: #9ad3b4; }

body.wc-dark .wc-reader-top,
body.wc-dark .wc-reader-bottom { background: rgba(40, 42, 54, .96); }

body.wc-dark .wc-reader-toc,
body.wc-dark .wc-reader-out,
body.wc-dark .wc-aa {
	background: #363950;
	color: var(--wp--preset--color--reader-ink);
	border-color: var(--wp--preset--color--reader-line);
}

body.wc-dark .wc-aa[aria-pressed="true"] {
	background: var(--wp--preset--color--reader-ink);
	color: #282a36;
	border-color: var(--wp--preset--color--reader-ink);
}

body.wc-dark .wc-rtoc-panel { background: #2f3244; }
body.wc-dark .wc-rtoc-list a { color: var(--wp--preset--color--reader-ink); }
body.wc-dark .wc-rtoc-list a:hover { background: rgba(255, 255, 255, .07); }

body.wc-dark .wc-rtoc-list a.on {
	background: #39415a;
	color: #a8e0c2;
}

body.wc-dark .wc-rtoc-list a.on .wc-rtoc-no { color: #a8e0c2; }

/* **탭과 책갈피 목록에도 어두운 벌이 필요하다.** 새로 넣고 이것을 빼먹어, 야간모드에서
   고른 탭이 흰 알약으로 뜨고 목록 글씨가 안 읽혔다(소유자, 2026-09-02). 목차가 이미
   쓰는 색을 그대로 쓴다 — 같은 판 안이라 두 벌일 이유가 없다. */
body.wc-dark .wc-rtab { color: #9095b0; }
body.wc-dark .wc-rtab:hover { color: var(--wp--preset--color--reader-ink); }
body.wc-dark .wc-rtab.on { background: #39415a; color: #a8e0c2; }

body.wc-dark .wc-rbm-item:hover,
body.wc-dark .wc-rbm-item:focus-visible { background: rgba(255, 255, 255, .07); }
body.wc-dark .wc-rbm-item b { color: #a8e0c2; }
body.wc-dark .wc-rbm-item b i { color: #9095b0; }
body.wc-dark .wc-rbm-x { color: #9095b0; }
body.wc-dark .wc-rbm-x:hover,
body.wc-dark .wc-rbm-x:focus-visible { color: #ff8b8b; background: rgba(255, 255, 255, .07); }
body.wc-dark .wc-rbm-item span { color: var(--wp--preset--color--reader-ink); }
body.wc-dark .wc-rbm-none { color: #9095b0; }

/* 못 찾은 밑줄을 알리는 줄도 마찬가지다. */
body.wc-dark .wc-hl-lost { background: #39415a; color: var(--wp--preset--color--reader-ink); }
body.wc-dark .wc-bible-ref { color: #9ad3b4; }
body.wc-dark .wc-progress i { background: #7fc9a4; }

/* 인용은 배경이 어두워지면 왼쪽 선만으로는 잘 안 보인다. */
body.wc-dark .wc-reader-page blockquote { border-left-color: #4a4e66; }

/* 교회 소개. 한 문장으로 열고 세 가지로 푼다 — 이전 홈페이지에서 남길 것만 남겼다.
 *
 * **히어로에 붙는 전체폭 물빛 띠 하나**에 담는다. 시안이 위쪽에 깔아 두었던 옅은
 * 물빛을 카드가 아니라 화면 구조로 옮긴 것이다. 앞선 판들에서 배운 것이 둘 있다 —
 * 두 칸에 몰아넣고 왼쪽에 200px 그림을 세우면 그림 한 장이 문단 여섯 개를 받치지
 * 못해 왼쪽이 비고, 세 가지를 띠 밖에 내놓으면 소개가 세 덩어리로 흩어져 어수선해진다.
 * 소개는 띠 하나에서 시작하고 끝난다.
 *
 * 제목과 성구도 걷었다 — 히어로 바로 아래에 제목·성구·점이 차례로 얹히니 정작
 * 교회가 무엇이라 말하는지가 화면 한참 아래로 밀렸다.
 *
 * 그림 자산은 넘어오지 않았으므로 아이콘은 여기서 그린다 — 마크업이 아니라
 * 배경으로 넣어, 스태프는 편집 화면에서 글만 만지면 된다. */

/* 띠는 히어로 바로 아래 이어 붙인다(`.wc-page > * + *` 의 36px 을 지운다).
   선택자에 `.wp-block-group` 을 하나 더 붙인 것은 코어의
   `.wp-block-group.has-background { padding: 1.25em 2.375em }` 과 같은 무게로
   맞서기 위해서다. 색은 블록 속성이 갖는다 — 여기서 배경을 다시 칠하면 스태프가
   편집 화면에서 색을 바꿔도 화면이 안 바뀐다. */
.wc-page > .wc-intro.wp-block-group {
	margin-top: 0;
	padding: clamp(24px, 2.6vw, 32px) 0 clamp(16px, 1.8vw, 22px);
}

/* 띠 안의 것들은 아래 카드 섹션(`.wc-wrap`)과 똑같은 본문 폭에 선다.
   **`box-sizing` 을 content-box 로 못박는다.** 이 테마의 본문 폭은 전부
   content-box 로 잡혀 있는데(`.wc-wrap`), 코어는 `wp-block-group` 에 border-box 를
   준다. 그대로 두면 같은 `max-width` 와 여백을 줘도 그룹만 23px 안으로 들어가
   왼쪽 끝이 아래 섹션과 어긋난다 — 실제로 어긋났다. */
.wc-page > .wc-intro > * {
	box-sizing: content-box;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(36px, 8vw, 88px);
	padding-right: clamp(36px, 8vw, 88px);
}

/* 그림과 글은 가운데로 나란히 세운다. 맞춤은 **블록 속성**(`verticalAlignment`)으로
   준다 — 코어가 칸마다 `align-self` 를 걸기 때문에 여기서 `align-items` 를 써 봐야
   덮이지 않는다. */
.wc-intro .wc-intro-say {
	column-gap: clamp(28px, 4vw, 56px) !important;
	row-gap: 18px !important;
	/* 세로 여백만 지운다. `margin: 0` 으로 뭉뚱그리면 본문 폭을 가운데로 모으는
	   `margin-inline: auto` 까지 덮여, 이 줄만 왼쪽으로 붙는다. */
	margin-top: 0;
	margin-bottom: 0;
}

/* 코어 columns 는 칸마다 `word-break: break-word` 를 건다. 그대로 두면 한글이
   글자 단위로 끊긴다. 칸 안에서 다시 어절로 돌려놓는다. */
.wc-intro .wp-block-column { word-break: keep-all; }

/* 소개를 여는 한 문장. 위에 있던 제목·성구·점은 걷었다 — 히어로 바로 아래라
   무슨 자리인지는 이미 읽힌다. */
.wc-intro .wc-intro-lede {
	margin: 0;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	font-weight: 500;
	line-height: 1.75;
	color: var(--wp--preset--color--ink);
	word-break: keep-all;
}

/* 수채 그림은 투명 PNG 가 아니라 종이 흰 바탕째로 들어온다. 그대로 얹으면 띠 위에
   흰 네모가 하나 놓인다. multiply 로 겹치면 그 흰 바탕이 띠 색에 먹혀, 그림이 띠에
   바로 그려진 것처럼 보인다 — 그림과 글이 한 덩어리가 된다.
   `.wc-page .wp-block-image img` 의 자르기(max-height·object-fit)와 그림자는
   사진용이라 여기서 되돌린다. 수채화가 250px 에서 잘리고 있었다. */

.wc-intro .wc-intro-art {
	margin: 0;
}

.wc-intro .wc-intro-art img {
	display: block;
	width: 100%;
	max-width: 160px;
	max-height: none;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
	/* 종이 바탕 위에서는 섞기로 네모가 지워지지 않는다 — 배경이 거의 흰색이라
	   곱하기도 어둡기도 크림색 종이와 10~19 만큼 어긋난다. 가장자리를 부드럽게
	   지워 그림만 남긴다. */
	-webkit-mask-image: radial-gradient(ellipse at 50% 52%, #000 58%, transparent 92%);
	mask-image: radial-gradient(ellipse at 50% 52%, #000 58%, transparent 92%);
}

/* 세 가지. 띠 안에서 본문 폭을 그대로 쓴다 — 그림 옆 칸에 갇혀 있을 때는 한 문장이
   두 줄로 접혔지만, 여기서는 한 줄에 한 문장이 들어간다.
   아래 「함께하는 모임」이 이미 카드 세 장이라, 여기까지 세 칸으로 만들면 같은 짜임이
   두 번 이어진다 — 시안대로 줄로 둔다. */
.wc-intro .wc-intro-acts { margin-top: clamp(14px, 1.8vw, 20px); }

/* 그림은 글 흐름 밖에 세운다. flex 로 세우면 문단 안의 `<strong>` 까지 칸이 되어
   강조한 구절 앞뒤로 `gap` 만큼 빈틈이 벌어진다 — 실제로 벌어졌다. */
.wc-intro-acts .wc-intro-item {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 48px;
	border-top: 1px dashed var(--wp--preset--color--line);
	font-size: clamp(0.95rem, 1.3vw, 1.04rem);
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
	word-break: keep-all;
}

/* 글이 두 줄로 접혀도 그림은 가운데 선다. */
.wc-intro-acts .wc-intro-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--water-soft);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
}

/* 첫째와 셋째도 이름으로 짚는다. 스태프가 순서를 바꾸거나 문단을 하나 더해도
   그림이 밀리지 않는다 — 몇 번째냐로 걸었을 때 실제로 밀렸다. */
.wc-intro-acts .wc-intro-love { border-top: 0; padding-top: 0; }
.wc-intro-acts .wc-intro-give { padding-bottom: 0; }

/* 사랑 — 닮아가는 마음 */
.wc-intro-acts .wc-intro-love::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4S4.6 15.5 4.6 10.4A3.9 3.9 0 0 1 12 8.3a3.9 3.9 0 0 1 7.4 2.1c0 5.1-7.4 10-7.4 10z'/%3E%3C/svg%3E");
}

/* 땅 끝까지 — 복음이 가는 길 */
.wc-intro-acts .wc-intro-reach::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M3.6 12h16.8'/%3E%3Cpath d='M12 3.6c2.1 2.4 3.3 5.3 3.3 8.4S14.1 18 12 20.4C9.9 18 8.7 15.1 8.7 12S9.9 6 12 3.6z'/%3E%3C/svg%3E");
}

/* 자라남 — 소망을 가지고 */
.wc-intro-acts .wc-intro-give::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5v-7.7'/%3E%3Cpath d='M12 12.8c0-3.2 2.1-5.3 5.3-5.3 0 3.2-2.1 5.3-5.3 5.3z'/%3E%3Cpath d='M12 15.8c0-2.7-1.8-4.4-4.4-4.4 0 2.7 1.8 4.4 4.4 4.4z'/%3E%3C/svg%3E");
}

.wc-intro-acts .wc-intro-item strong {
	color: var(--wp--preset--color--water);
	font-weight: 600;
}

@media (max-width: 780px) {
	.wc-page > .wc-intro.wp-block-group { padding: 24px 0 16px; }
	/* 좁은 화면에서는 코어가 칸을 위아래로 쌓는다(782px). 그림이 글 아래로
	   내려오는데, 폭을 다 채우면 그림이 소개보다 커진다. */
	.wc-intro .wc-intro-art img { max-width: 130px; }
	.wc-intro-acts .wc-intro-item { padding: 10px 0 10px 42px; }
	.wc-intro-acts .wc-intro-item::before { width: 29px; height: 29px; background-size: 15px 15px; }
}

/* 교회소개는 글이 중심이라 본문 폭을 한 뼘 좁힌다(Harry) — 좌우가 트이고 글이
   가운데로 모인다. 히어로는 전체폭 그대로고, 헤더·푸터는 사이트 공통 폭을 쓰므로
   여기서 건드리지 않는다. 한 값으로 모아 두어야 소개·섬기는 분들·아래 섹션의
   왼쪽 끝이 계속 한 줄로 선다. */
.wc-about .wc-wrap,
.wc-page > .wc-intro > *,
.wc-page > .wc-intro-acts {
	max-width: 1040px;
}

/* 교회소개. 처음 온 사람이 알고 싶은 순서로 — 언제 모이는지, 무슨 일이 있는지,
   어디로 가면 되는지. 한 가지 짜임만 쓴다(카드), 화면마다 다른 모양을 섞지 않는다. */
/* 항목 사이가 붙어 있으면 어디서 끝나고 어디서 시작하는지 눈이 못 짚는다.
   한 칸 간격을 하나로 정해 두고 첫 항목만 조금 좁힌다. */
.wc-about-body { padding-bottom: 84px; }
.wc-about-body > .wc-section,
.wc-about-body > .wc-two { padding-top: 76px; }
.wc-about-body > *:first-child { padding-top: 44px; }

/* 소개 띠는 스스로 전체폭이고 안쪽에서 폭을 다시 잡으므로(`.wc-intro > *`)
   여기서 손대지 않는다. 섬기는 분들 줄은 `page-about.php` 에서 이미 `.wc-wrap` 을
   달고 나오므로 따로 줄 것이 없다.
   **여기 있던 `box-sizing: border-box` 는 어긋남의 원인이었다** — 이 테마는
   content-box 라, 소개와 섬기는 분들만 1200px 안에 여백을 포함해 아래 카드들보다
   좌우로 88px 씩 더 들어가 있었다. */


.wc-abcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wc-abcards-2 { grid-template-columns: repeat(2, 1fr); }

.wc-abcard {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 22px 24px;
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* 사진이 들어가는 카드는 여백을 안쪽 상자가 갖는다. */

.wc-abcard-img,
.wc-abcard-slot {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* 아직 사진이 없으면 무엇을 찍어 와야 하는지 적어 둔다. */
.wc-abcard-slot {
	background: var(--wp--preset--color--water-soft);
	color: var(--wp--preset--color--ink-2);
	font-size: 0.78rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	box-sizing: border-box;
}

.wc-abcard h3 { font-size: 1.05rem; font-weight: 500; margin: 0 0 8px; }
.wc-abcard p {
	font-size: 0.86rem;
	color: var(--wp--preset--color--ink-2);
	line-height: 1.85;
	margin: 0;
	word-break: keep-all;
}

.wc-abcard-when {
	display: block;
	margin-top: 12px;
	font-size: 0.78rem;
	color: var(--wp--preset--color--water);
}

.wc-abcard-go:hover {
	transform: translateY(-3px);
	border-color: #c8dedb;
	box-shadow: 0 12px 24px rgba(14, 107, 102, .13);
}

/* 섬기는 두 분은 소개 띠의 **오른쪽 아래 귀퉁이**에 붙는다(Harry). 명단이라기엔
   짧아 섹션을 따로 두지 않고, 소개의 끝맺음처럼 읽히게 한다.

   띠는 본문이고 이 줄은 템플릿이라 한 블록으로 묶을 수 없다. 같은 색 띠를 하나 더
   깔아 이어 붙인다 — 위 띠는 아래 여백을 거의 남기지 않고, 이 띠가 그 자리를
   받는다. 눈에는 한 상자로 보인다. */
.wc-page > .wc-pastors-band {
	margin-top: 0;
	max-width: none;
	padding: 0 0 clamp(18px, 2.2vw, 26px);
}

.wc-pastors {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 14px 36px;
	margin-top: 0;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wc-pastor { display: flex; align-items: center; gap: 12px; }

.wc-pastor-face {
	width: 34px;
	height: 34px;
	/* 크기를 줄일 때 `flex-basis` 를 같이 안 고쳐 44×34 짜리 타원이 되어 있었다 —
	   `width` 는 34 인데 주축은 `flex` 가 정한다. 둘을 함께 적는다. */
	flex: 0 0 34px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.wc-pastor-mono {
	background: var(--wp--preset--color--water-soft);
	color: var(--wp--preset--color--water);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}

.wc-pastor-name { font-size: 1rem; }

/* 이름이 그분의 설교 목록으로 간다. 밑줄을 늘 긋지 않는다 — 두 이름이 나란히
   있어 줄이 그어져 있으면 명단이 아니라 메뉴로 보인다. */
.wc-pastor-name a { color: inherit; text-decoration: none; }
.wc-pastor-name a:hover,
.wc-pastor-name a:focus-visible { color: var(--wp--preset--color--water); text-decoration: underline; }

.wc-pastor-role {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--water);
}

/* 오시는 길. 주소만 적어 두면 결국 다른 창을 열게 되므로 지도를 나란히 둔다. */
.wc-visit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 0;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	overflow: hidden;
}

.wc-visit-info { padding: 26px 28px; align-self: center; }
/* **주소와 전화는 한 덩어리다.** 본문 줄간격(1.8) 을 그대로 쓰면 두 줄짜리 주소가
   서로 멀어져 문단처럼 읽힌다 — 주소는 문단이 아니라 한 덩이의 정보다. */
.wc-visit-addr { font-size: 1rem; line-height: 1.55; margin: 0 0 8px; }
.wc-visit .wc-lede { margin: 0 0 18px; }

.wc-visit-map {
	width: 100%;
	min-height: 280px;
	height: 100%;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--line);
	display: block;
}


@media (max-width: 900px) {
	.wc-visit { grid-template-columns: 1fr; }
	.wc-visit-map { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); min-height: 240px; }
}

@media (max-width: 900px) {
	.wc-abcards, .wc-abcards-2, .wc-people { grid-template-columns: 1fr; }
	.wc-about-body > .wc-section,
	.wc-about-body > .wc-two { padding-top: 52px; }
	.wc-about-body > *:first-child { padding-top: 36px; }
}

/* ── 성도 확인 (설계서 2권 2.4) ───────────────────────────────────────────
 * 카카오 노랑(#FEE500)은 이 팔레트에서 가장 진한 색(청록 #0e6b66)보다 **채도가
 * 네 배다.** 빈 화면에 그것 하나만 두면 크기를 줄여도 화면을 가져간다. 그래서
 * 단추를 줄이기 전에 **함께 무게를 나눌 것**을 둔다 — 카드, 수채 십자가, 옅은 배경.
 *
 * 단추 규격은 카카오 로그인 디자인 가이드를 따른다(radius 12px, 심볼은 순수 검정,
 * 레이블 높이가 컨테이너의 1/3 이하 → 높이 48px).
 */
/* 화면 한 장에 딱 들어가게 한다. 카드가 가운데 서고 푸터는 아래에 붙는다.
   그냥 여백만 크게 주면 페이지가 화면보다 길어져 푸터가 잘린다. */
body.wc-join-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* 로그인한 사람에게는 위에 관리자 막대가 붙는다. 그 높이를 빼지 않으면
   화면이 막대만큼 길어져 푸터가 잘린다. */
body.wc-join-page.admin-bar {
	min-height: calc(100vh - 32px);
}

@media (max-width: 782px) {
	body.wc-join-page.admin-bar {
		min-height: calc(100vh - 46px);
	}
}

body.wc-join-page .wc-page {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
	background: linear-gradient(180deg, #eef6f4 0%, var(--wp--preset--color--bg) 62%);
}

/* 위 여백은 이미 가운데 정렬이 만든다. 푸터가 또 밀면 화면 밖으로 나간다. */
body.wc-join-page .wc-footer {
	margin-top: 0;
}

.wc-join {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 40px 34px 36px;
	box-shadow: 0 10px 26px rgb(14 107 102 / 10%);
	box-sizing: border-box;
}

/* 수채 십자가. 홈 배너의 그림을 원형으로 잘라 도장처럼 얹는다. */
.wc-join-art {
	width: 168px;
	height: 168px;
	margin: 0 auto 20px;
	border-radius: 50%;
	overflow: hidden;
}

.wc-join-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	display: block;
}

/* 이 사이트의 세리프 제목은 1.35rem 아래로 내려가지 않는다. 그보다 작으면
   화면이 아니라 시스템 안내문처럼 읽힌다. */
.wc-join-title {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

/* 줄을 고르게 나눈다. `keep-all`(body)이 어절 중간을 막아 주긴 하지만, 그것만으로는
   마지막 줄에 "수 있습니다." 만 남는 식으로 끊긴다. 짧은 안내문은 줄 길이를
   맞춰 주어야 읽힌다. */
.wc-join-hint {
	font-size: 0.9rem;
	line-height: 1.9;
	color: var(--wp--preset--color--ink-2);
	margin: 12px 0 0;
	text-wrap: balance;
}

/* 카카오 단추. 색·심볼·모서리 반경 모두 카카오 가이드를 따른다.
   단 폭을 꽉 채우지 않는다 — 채운 순간 카드 안에서 다시 주인공이 된다. */
.wc-kakao-btn {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 260px;
	height: 48px;
	margin: 24px auto 0;
	padding: 0 18px;
	background: #FEE500;
	color: rgb(0 0 0 / 85%);
	font-size: 0.9rem;
	font-weight: 600;
	/* theme.json 이 1.8을 물려주면 높이가 51px 로 밀린다. 높이는 우리가 정한다. */
	line-height: 1;
	text-decoration: none;
	border-radius: 12px;
	transition: filter .18s ease;
}

.wc-kakao-btn:hover {
	filter: brightness(.95);
}

.wc-kakao-btn svg {
	width: 20px;
	height: 20px;
	/* 심볼은 순수 검정. 가이드가 레이블(85%)과 다르게 정해 두었다. */
	fill: #000;
	flex: 0 0 auto;
}

.wc-kakao-btn:focus-visible,
.wc-join-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--water);
	outline-offset: 3px;
}

/* 링크로도 단추 모양이 나오게 한다. */
a.wc-join-submit,
a.wc-join-submit:hover {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #fff;
	box-sizing: border-box;
}

/* 고치는 대상 바로 위에 붙인다. 목록과 단추 사이에 홀로 떠 있으면
   무엇을 고치는 링크인지 읽히지 않는다. */
.wc-member-edit {
	margin: 24px 0 0;
	text-align: right;
	font-size: 0.82rem;
}

.wc-member-edit a {
	color: var(--wp--preset--color--water);
}

/* ── 내 자리 (2권 6.4) ────────────────────────────────────────────────────
 * **좁은 판이 아니라 화면이다.** `.wc-join` 은 카카오 단추와 신청서를 담는 380px
 * 카드이고, 문(로그인·신청·수정)이 계속 쓴다. 성도의 자리는 서재·지난 설교와 같은
 * `.wc-wrap` 폭을 쓴다 — 1316px 화면에서 71%가 빈 배경이던 것을 고치는 자리다.
 */

/* 인사 띠. 카드 대신 이 한 덩어리가 "여기는 내 자리다"를 말한다. */
.wc-me-band {
	background: var(--wp--preset--color--water-soft);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: clamp(24px, 4vw, 38px);
}

/* 탭이 아래 여백을 대신 만들어 준다. **승인 대기 화면에는 탭이 없어** 띠 아래가
   1px 로 붙어 「승인을 기다리는 중입니다」가 테두리에 닿았다 — 새로 오신 분이 처음
   보는 화면이다. */
.wc-me-band-bare { padding-bottom: clamp(24px, 4vw, 38px); }

.wc-me-hi { margin: 0; }

.wc-me-name {
	display: block;
	font-size: 1.7rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.wc-me-state {
	display: block;
	margin-top: 5px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-2);
}

/* 탭 줄. **`.wc-tabs` 를 쓰지 않는다** — 그것은 지난 설교의 설교자를 고르는 채운
   알약이고, 거르개로 읽힌다. 청록으로 채운 알약이 연한 띠 위에 앉으면 화면에서
   유일한 진한 색이 되어 시선을 통째로 가져간다. 여기는 자리를 옮기는 길이다.

   띠 안에 붙여 둔다. 흰 바탕에 따로 두면 가로줄이 한 겹 더 생겨 층이 셋으로 보인다 —
   띠의 아래 테두리가 곧 탭의 레일이다. */
.wc-me-tabs {
	display: flex;
	gap: 4px;
	margin-top: 18px;
	margin-bottom: -1px;
}

.wc-me-tabs a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 14px 12px;
	font-size: 0.92rem;
	color: var(--wp--preset--color--ink-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

/* 헤더 메뉴와 같은 물결이다. 가리키면 차오르고, 지금 보는 탭에서 가장 높다 —
   이 사이트에서 「여기 있다」를 말하는 방식은 밑줄이 아니라 물이다. */
.wc-me-tabs a > span {
	padding-bottom: 3px;
	background: var(--wc-wave) left bottom / 100% 0 no-repeat;
	transition: background-size .24s ease;
}

/* ⚠️ **탭이 넷이 되면 320px 을 넘는다.** 「건의」가 들어온 날 실제로 42px 넘쳤다 —
   라벨은 두 자인데 **자리를 잡아먹는 것은 글자가 아니라 여백과 아이콘 사이 간격**이다.
   밀려 나간 탭은 없는 탭이므로, 좁은 화면에서는 그 둘을 줄인다. 아이콘은 남긴다 —
   글자만 있는 줄은 이 사이트에서 미완성으로 보인다. */
@media (max-width: 380px) {
	.wc-me-tabs { gap: 0; }

	.wc-me-tabs a {
		gap: 4px;
		padding: 11px 7px 12px;
		font-size: 0.86rem;
	}
}

/* 320px 은 이 사이트가 받는 가장 좁은 화면이다. 여기서는 아이콘을 접는다 —
   **글자가 밀려 나가는 것보다는 아이콘이 없는 편이 낫다.** 그 위 폭에서는 남는다. */
@media (max-width: 340px) {
	.wc-me-tabs a {
		gap: 0;
		padding: 11px 6px 12px;
	}

	.wc-me-tab-ic { display: none; }
}

.wc-me-tabs a:hover { color: var(--wp--preset--color--water); }
.wc-me-tabs a:hover > span { background-size: 100% 8px; }
.wc-me-tabs a.on > span { background-size: 100% 11px; }

/* 헤더 메뉴의 `.wc-nav-ic` 와 같은 선화·같은 굵기. 이 사이트에서 메뉴는 그 모양이다. */
.wc-me-tab-ic {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	stroke: currentColor;
	stroke-width: 1.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.85;
}

.wc-me-tabs a.on {
	color: var(--wp--preset--color--water);
	font-weight: 600;
}

.wc-me-tabs a b {
	margin-left: 4px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

/* 아주 좁은 화면에서 탭이 하나 더 늘면 마지막 것이 밀려 나간다. 글자를 줄이는
   것보다 여백을 줄이는 편이 낫다 — 밀려 나간 탭은 없는 탭이다. */
@media (max-width: 400px) {
	.wc-me-tabs a { padding-left: 9px; padding-right: 9px; gap: 5px; }
}

/* **영어 탭은 99px 길다**(411px, 2026-09-11 — 「Continue」·「History」·「My info」·
   「Feedback」). 한국어는 320px 에서만 아이콘을 접지만, 영어는 폰 폭 전부에서 접어야 넷이
   들어간다(560px 에서 아이콘이 서면 470px 이 되어 겨우 들어간다). 위의 말대로 밀려 나간
   탭은 없는 탭이다 — 아이콘보다 탭이 먼저다. */
@media (max-width: 560px) {
	.wc-me-tabs a:lang(en) { gap: 0; padding-left: 7px; padding-right: 7px; }
	.wc-me-tabs a:lang(en) .wc-me-tab-ic { display: none; }
}

@media (max-width: 340px) {
	.wc-me-tabs a:lang(en) { padding-left: 5px; padding-right: 5px; font-size: 0.8rem; }
}

.wc-me-tabs a:focus-visible {
	outline: 2px solid var(--wp--preset--color--water);
	outline-offset: -2px;
}

/* ── 이어서 ──────────────────────────────────────────────────────────────
 * **두 칸이 정직한 최대치다.** 세 칸으로 나누면 1200px 화면에서 카드는 328px 인데
 * 그림과 여백이 122px 을 먼저 먹어 **글 읽는 폭이 204px** 밖에 안 남는다 — 고장이라던
 * 폰 카드(302px)보다 좁다. 940px 부근에서는 제목이 두 줄 밖으로 넘쳤다.
 */
.wc-me-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 820px) {
	.wc-me-cards { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
}

.wc-me-card {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wc-me-card:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--water);
	box-shadow: 0 8px 20px rgb(14 107 102 / 12%);
}

.wc-me-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--water);
	outline-offset: 3px;
}

/* **그림 칸은 하나다.** 책 표지(7:10)와 설교 썸네일(16:9)은 비율이 다른데 칸까지
   다르게 잡으면 옆 카드끼리 글 시작점이 어긋난다. */
.wc-me-media {
	flex: 0 0 76px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wc-me-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 7 / 10;
	object-fit: cover;
	border-radius: 5px;
	display: block;
	box-shadow: 0 4px 10px rgb(14 107 102 / 14%);
}

.wc-me-media-wide img { aspect-ratio: 16 / 9; border-radius: 6px; }

.wc-me-body { flex: 1; min-width: 0; }

.wc-me-kind {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--wp--preset--color--water);
}

.wc-me-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 3px 0 8px;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.45;
}

/* **막대 바탕은 `--line` 이 아니다.** 그것은 경계선 색이라, 줄 구분선과 막대가
   같은 회색으로 30px 사이에 겹쳐 무엇이 뼈대이고 무엇이 값인지 안 읽혔다. */
.wc-me-bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--water-soft);
	overflow: hidden;
}

.wc-me-bar i { display: block; height: 100%; background: var(--wp--preset--color--water); }

.wc-me-meta {
	display: block;
	margin-top: 6px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-2);
	font-variant-numeric: tabular-nums;
}

/* ── 다 한 것 ────────────────────────────────────────────────────────────
 * 설교가 먼저, 책이 뒤. 설교 판이 폭을 채워 "이 화면은 판이다"를 세우면 짧은 책
 * 선반이 두 번째 모음으로 읽힌다. 페이지 꼬리의 여백은 평범하고, 페이지 전체의
 * 여백은 고장이다 — 책만 따로 탭을 주었을 때 실제로 그렇게 보였다.
 */
.wc-me-board + .wc-me-board { margin-top: 44px; }

.wc-me-board-h {
	margin: 0 0 16px;
	padding-bottom: 6px;
	color: var(--wp--preset--color--ink);
}

/* **표지는 늘어나지 않는다.** 두 권만 있어도 두 권 크기로 왼쪽에 선다 — `1fr` 로
   두면 두 권이 화면 반쪽만 한 표지가 되고, `auto-fill` 로 두면 오른쪽에 빈 트랙이
   넉 줄 남아 덜 그려진 격자로 보인다. 실제 책장이 그렇게 생겼다. */
.wc-me-covers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, 140px);
	justify-content: start;
	gap: 22px 16px;
}

@media (max-width: 640px) {
	.wc-me-covers { grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
}

.wc-me-cover { display: block; color: var(--wp--preset--color--ink); text-decoration: none; }
.wc-me-cover-face { position: relative; display: block; }

.wc-me-cover-face img {
	width: 100%;
	height: auto;
	aspect-ratio: 7 / 10;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	box-shadow: 0 6px 14px rgb(14 107 102 / 14%);
	transition: transform .18s ease;
}

.wc-me-cover:hover .wc-me-cover-face img { transform: translateY(-2px); }

/* 표지만으로는 다 읽었는지 알 수 없다. **설교 줄에는 안 찍는다** — 「다 본 설교」
   아래 모든 줄이 다 본 것이라 표시가 아무것도 알려 주지 않고, 거기서는 날짜가 도장이다. */
.wc-me-mark {
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--water);
	color: #fff;
	border: 2px solid #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wc-me-mark svg { width: 10px; height: 10px; }

/* 나가는 문. 46×16px 짜리 글자 링크였다 — 이 파일이 「수정」을 두고 이미 못 박아 둔
   크기다. 상자로 두고, 계정 화면 맨 아래에 놓는다. */
.wc-me-out {
	margin: 48px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--line);
	max-width: 720px;
}

/* 날짜를 오른쪽에 세운다. `.wc-replays` 는 원래 「주일예배」처럼 길이가 같은 이름을
   담던 곳이라 그냥 두어도 됐지만, 설교 제목은 넉 자에서 스무 자까지 간다. */
.wc-me .wc-replay-at { flex: 1 1 0; text-align: right; white-space: nowrap; }
.wc-me .wc-replay-go { flex: 0 0 auto; }

.wc-me-more {
	margin: 14px 0 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-2);
}

.wc-me-cover-name { display: block; margin-top: 9px; font-size: 0.82rem; line-height: 1.45; }

.wc-me-cover-at {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-2);
	font-variant-numeric: tabular-nums;
}

/* ── 내 정보 ─────────────────────────────────────────────────────────────
 * **`float` 을 쓰지 않는다.** `dt` 만 띄우면 밑줄이 `dd` 밑에서만 그어져 왼쪽 끝이
 * 톱니처럼 어긋난다. 그리고 폭을 묶는다 — 1200px 에 걸린 「오회근」 석 자는 셈은
 * 맞아도 눈이 갈 곳을 잃는다.
 */
.wc-me-facts { margin: 0; max-width: 720px; }

.wc-me-fact {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
	padding: 14px 2px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wc-me-fact dt { margin: 0; font-size: 0.85rem; color: var(--wp--preset--color--ink-2); }

/* **적힌 값이 이름표보다 진해야 한다.** 반대로 두었더니 제 이름과 연락처가 화면에서
   제일 흐린 글자였다. */
.wc-me-fact dd {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
}

/* ── 단추 ────────────────────────────────────────────────────────────────
 * **새 모양을 만들지 않는다.** `.wc-btn-primary` 와 `.wc-btn-quiet` 가 이미 있고
 * 이 사이트의 단추는 둥근 알약이다. 내가 만든 12px 모서리 단추는 이 화면에서만
 * 다른 모양이었다.
 *
 * 여기서는 손가락으로 칠 수 있게 키우기만 한다 — 이 파일이 「수정」을 두고
 * 22×16px 은 안 된다고 이미 못 박아 두었다.
 */
.wc-me-start { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }

/* `.wc-empty` 는 글을 가운데로 모은다. 그 안의 단추만 왼쪽에 붙어 있었다. */
.wc-empty .wc-me-start { justify-content: center; }

.wc-me .wc-btn-primary,
.wc-me .wc-btn-quiet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	font-size: 0.88rem;
}

.wc-me .wc-btn-primary:focus-visible,
.wc-me .wc-btn-quiet:focus-visible {
	outline: 2px solid var(--wp--preset--color--water);
	outline-offset: 3px;
}

/* ── 폰 ──────────────────────────────────────────────────────────────────
 * **이 블록은 `.wc-me` 규칙 맨 뒤에 있어야 한다.** 앞에 두었더니 뒤에 오는 규칙에
 * 전부 덮여 한 줄도 먹지 않았다 — 표지 칸도 여백도 그대로였고, 「착지 화면이 한
 * 화면에 끝난다」는 말만 남아 있었다.
 *
 * 76px 표지는 7:10 이라 세로로 109px 이고, 카드 하나가 170px 이 된다.
 */
@media (max-width: 480px) {
	.wc-me-name { font-size: 1.45rem; }
	.wc-me-media { flex: 0 0 56px; }
	.wc-me-card { padding: 12px 14px; }
	main.wc-me { padding-top: 26px; }
	.wc-me-board + .wc-me-board { margin-top: 34px; }
	.wc-me-out { margin-top: 36px; padding-top: 22px; }

	.wc-me-start .wc-btn-primary,
	.wc-me-start .wc-btn-quiet { flex: 1 1 100%; }
}

/* ── 교회소개가 본문 블록이 된 뒤 (2026-08-20) ───────────────────────────
 * 예배 시간·오시는 길만 템플릿에 남고 나머지는 고정 페이지 본문이 되었다.
 * 같은 클래스를 그대로 달았지만 담는 그릇이 블록이라, 블록이 씌우는 것만 되돌린다.
 */

/* 구역 껍질. `.wc-about-body` 밖으로 나왔으니 여백을 여기서 준다. */
.wc-about > .wp-block-group.wc-section { padding-top: 76px; }
.wc-about > .wp-block-group.wc-section .wc-head { margin-bottom: 18px; }

/* 카드 판. 블록 columns 는 `flex` 라 격자를 덮는다. */
.wc-abcards.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.wc-abcards > .wp-block-column {
	padding: 0;
	overflow: hidden;
	flex-basis: auto !important;
}

/* 카드 안쪽 여백. `.wc-abcard-b` 를 없애고 블록을 바로 담았다. */
.wc-abcards > .wc-abcard > :not(.wc-abcard-img):not(.wc-abcard-slot) {
	margin-left: 20px;
	margin-right: 20px;
}

.wc-abcards > .wc-abcard > .wc-serif { margin-top: 18px; }
.wc-abcards > .wc-abcard > :last-child { margin-bottom: 20px; }

/* 이미지 블록은 `figure` 다. 비율과 잘라내기는 안쪽 `img` 가 받는다. */
.wc-abcard-img { margin: 0; }

.wc-abcard-img img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* 목회자 얼굴도 같은 사정이다. */
figure.wc-pastor-face { margin: 0; }

figure.wc-pastor-face img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* **워드프레스 흐름 배치가 둘째 분을 아래로 민다.** `is-layout-flow` 가 형제에게
   `margin-block-start: 1.2rem` 을 먹여서, 가로로 세운 줄에서 두 분의 눈높이가
   19px 어긋나 있었다. 줄 안에서는 그 여백이 필요 없다. */
.wc-pastors.wp-block-group { display: flex; align-items: center; }
.wc-pastors.wp-block-group > * { margin-block-start: 0; margin-top: 0; }

.wc-pastor.wp-block-group { display: flex; align-items: center; gap: 12px; }
.wc-pastor > p { margin: 0; }

/* ── 처음 오시는 분께 · 물음과 답 ──────────────────────────────────────────
 * **불릿으로 늘어놓지 않는다.** 여섯 줄을 점으로 찍었더니 은행 안내문이 되었다
 * (Harry). 그래서 한동안 카드 넷으로 묶어 두었는데, 이번에는 홍보하는 판으로
 * 읽혔다(Harry, 2026-08-21) — 한두 문장이 그림·테두리·격자 삼중 강조를 못 버텨
 * 장식만 남았고, 같은 장치가 이 페이지에서 세 번째 되풀이였다.
 *
 * 남는 길은 **장식을 빼고 물음과 답만 세로로 쌓는 것**이다. 점도 테두리도 그림도
 * 없다. 사람이 사람에게 답하는 모양은 여백과 두 가지 글자 무게로만 만든다.
 *
 * 격자가 아니라 목록이므로 항목이 여섯이든 열이든 상관없다 — 넷에 맞추느라
 * 사실이 잘리던 것이 이 자리의 진짜 문제였다.
 *
 * **이름을 `.wc-ask` 로 짓지 않는다.** 그 이름은 앨범 삭제 확인 대화상자가
 * 이미 쓰고 있고, 그것은 `position:fixed` 에 어두운 막이라 소개 페이지 전체가
 * 검게 덮였다(2026-08-21). 물음이라는 말이 두 군데서 쓰일 만한 흔한 말이라
 * 겪은 일이다.
 */
/* **폭은 다른 구획과 같이 쓴다.** 한 줄 45~49자가 길다고(접근성 리뷰 실측) 이 구획만
   640px 로 좁혔더니, 나머지가 다 `.wc-wrap`(1200px)을 쓰는 페이지에서 여기만 왼쪽으로
   쏠려 보였다(Harry, 2026-08-21).

   넓은 폭을 쓰면서 줄이 길어지지 않게 하는 답은 폭을 줄이는 것이 아니라 **두 단으로
   흘리는 것**이다. 한 단이 약 460px 이라 줄당 30자 안쪽으로 떨어진다.

   **두 단은 격자가 아니다.** 앞서 물린 2×2 카드가 홍보물이 된 것은 단 수 때문이 아니라
   상자 때문이었다. 여기는 상자가 없고, 칸에 맞춰 항목 수를 자르지도 않는다. */
.wc-about .wc-visitq-rows {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 56px;
	row-gap: 26px;
	/* **같은 행은 높이를 맞춘다(Harry, 2026-08-23).** `align-items: start` 로 두면
	   칸마다 제 글 길이만큼만 서서 아래 실선이 좌우로 어긋난다 — 행으로 읽히라고
	   그은 선이 오히려 행을 흩는다. 늘어난 칸의 빈자리는 답 아래 여백이 된다. */
	align-items: stretch;
}

.wc-about .wc-visitq > *,
.wc-about .wc-visitq-rows > *,
.wc-about .wc-visitq-item > * { margin-block-start: 0; }

/* **여백만으로는 정리되지 않는다.** 항목 사이를 벌려 근접성은 풀었지만, 띄어 놓기만
   하고 나열하니 여전히 복잡하고 정리가 안 돼 보였다(Harry, 2026-08-21). 여백은 덩어리를
   나누지만 **어디서 끝나고 어디서 시작하는지를 선언하지는 않는다.**

   그래서 항목마다 실선을 하나 긋는다. 테두리는 상자를 만들어 홍보물이 되지만 가로선
   하나는 목록의 행을 만든다. 열두 개짜리 질답에 맞는 것은 상자가 아니라 행이다.

   **선은 글 아래에 긋는다(Harry, 2026-08-23).** 위에 그으면 선이 물음의 머리에 얹혀
   물음을 누르는 모양이 되고, 첫 물음 위에 난데없는 선 하나가 뜬다. 아래에 그으면 답을
   다 읽은 자리에서 항목이 닫히고 다음 물음이 열린다 — 읽는 차례와 같다. */
.wc-about .wc-visitq-item {
	display: block;
	padding: 0 0 22px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* 물음이 답과 크기가 비슷해 둘이 한 덩어리로 보였다(Harry, 2026-08-21). 물음은 이
   목록에서 **찾는 말**이므로 답보다 앞에 나와야 한다 — 크게, 진하게.

   앞서 「물음을 표제로 세우지 마라」로 물린 적이 있으나 그때는 상자 안의 카드 제목이라
   기관이 붙인 게시판 표제로 읽혔던 것이고, 지금은 행으로 나뉜 목록의 항목 이름이다.
   같은 굵기라도 그릇이 다르면 다른 물건이 된다. */
.wc-about h3.wc-visitq-q {
	position: relative;
	margin: 0 0 8px;
	padding-left: 26px;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	word-break: keep-all;
}

/* ── 물음마다 작은 선 그림 ────────────────────────────────────────────────
 * 글자만 있어 눈이 붙잡을 데가 없다는 지적에서 왔다(Harry, 2026-08-21).
 *
 * **옅은 물빛 동그라미를 씌우지 않는다.** 그 장치는 이 페이지에서 소개 세 가지와
 * 모임 카드가 이미 쓰고 있어, 세 번째로 나오면 그림이 아니라 이 교회가 자기를
 * 말하는 말투가 된다 — 카드를 물렸던 바로 그 까닭이다. 여기서는 배경 없이 선만
 * 두어, 물음 앞에 찍힌 표식으로만 읽히게 한다.
 *
 * 17px 로 두는 것은 물음 글자(1.02rem)보다 작아야 글이 주인으로 남기 때문이다.
 */
.wc-about h3.wc-visitq-q::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 17px;
	height: 17px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
	opacity: 0.9;
	/* **이름 없는 물음도 빈자리를 남기지 않는다.** 그림은 `wc-visitq-<이름>` 열둘에만
	   걸려 있어, 스태프가 편집기에서 물음을 새로 더하면 왼쪽 26px 이 빈 채로 남는다
	   (편집 안전성 리뷰, 2026-08-23). 이름이 없으면 작은 점 하나가 대신 선다. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3C/svg%3E");
}

/* 하트 — 처음 오신 분을 반긴다 */
.wc-about .wc-visitq-new h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.2s-7.3-4.6-7.3-9.6A3.9 3.9 0 0 1 12 8.1a3.9 3.9 0 0 1 7.3 2.5c0 5-7.3 9.6-7.3 9.6z'/%3E%3C/svg%3E");
}

/* 빈 가방 — 준비할 것이 없다 */
.wc-about .wc-visitq-bring h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 8.4h12.8l-1 11.2H6.6z'/%3E%3Cpath d='M9.2 8.4V6.6a2.8 2.8 0 0 1 5.6 0v1.8'/%3E%3C/svg%3E");
}

/* 문 — 들어서는 자리 */
.wc-about .wc-visitq-door h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 3.8h10.4v16.4H6.8z'/%3E%3Cpath d='M14 12h.01'/%3E%3C/svg%3E");
}

/* 어른과 아이 */
.wc-about .wc-visitq-kids h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.6' cy='7.4' r='2.6'/%3E%3Cpath d='M4 20.2c0-2.8 2-4.6 4.6-4.6s4.6 1.8 4.6 4.6'/%3E%3Ccircle cx='17' cy='12.4' r='1.9'/%3E%3Cpath d='M13.8 20.2c0-2 1.4-3.4 3.2-3.4s3.2 1.4 3.2 3.4'/%3E%3C/svg%3E");
}

/* 자동차 */
.wc-about .wc-visitq-park h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 16.2v-3.1l1.8-4.3h12.8l1.8 4.3v3.1z'/%3E%3Cpath d='M6.4 16.2v2.2h2.2v-2.2'/%3E%3Cpath d='M15.4 16.2v2.2h2.2v-2.2'/%3E%3C/svg%3E");
}

/* 지도 핀 — 자리가 없으면 어디에 */
.wc-about .wc-visitq-park-full h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.8s6.3-6.2 6.3-10.4a6.3 6.3 0 1 0-12.6 0c0 4.2 6.3 10.4 6.3 10.4z'/%3E%3Ccircle cx='12' cy='10.4' r='2.2'/%3E%3C/svg%3E");
}

/* 둘러앉은 자리 — 구역 */
.wc-about .wc-visitq-cell h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.8'/%3E%3Ccircle cx='12' cy='6.6' r='1.6'/%3E%3Ccircle cx='16.7' cy='14.7' r='1.6'/%3E%3Ccircle cx='7.3' cy='14.7' r='1.6'/%3E%3C/svg%3E");
}

/* 말풍선 — 인사 */
.wc-about .wc-visitq-greet h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 12.4c0 3.6-3.7 6.6-8.2 6.6-1.1 0-2.2-.2-3.2-.5l-4.8 1.4 1.6-3.5a6.5 6.5 0 0 1-1.8-4.4c0-3.7 3.7-6.6 8.2-6.6s8.2 2.9 8.2 6.6z'/%3E%3C/svg%3E");
}

/* 시계 — 얼마나 걸리나 */
.wc-about .wc-visitq-flow h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 7.4V12l3.2 1.9'/%3E%3C/svg%3E");
}

/* 숟가락과 포크 — 예배 뒤 점심 */
.wc-about .wc-visitq-after h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 3.8v6.4a2.1 2.1 0 0 0 4.2 0V3.8'/%3E%3Cpath d='M9.5 10.2v10'/%3E%3Cpath d='M16.8 3.8c-1.3 1.7-1.9 3.4-1.9 5.4 0 1.7.7 2.6 1.9 2.9v8.1'/%3E%3C/svg%3E");
}

/* 봉투 — 헌금 */
.wc-about .wc-visitq-offer h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 6.4h16.4v11.2H3.8z'/%3E%3Cpath d='M3.8 7l8.2 5.7L20.2 7'/%3E%3C/svg%3E");
}

/* 체크가 든 종이 — 등록 */
.wc-about .wc-visitq-join h3.wc-visitq-q::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b66' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.8h8.6l3.4 3.4v13H6.2z'/%3E%3Cpath d='M9.2 13.4l2 2 4-4'/%3E%3C/svg%3E");
}

/* 답은 본문이다. 물음보다 한 단 옅게 두되 읽는 데 지장이 없어야 한다 — `ink-2` 는
   흰 바탕에서 6.31:1 이라 본문 크기에서 넉넉하다. */
.wc-about .wc-visitq-a {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.85;
	color: var(--wp--preset--color--ink-2);
	word-break: keep-all;
}

/* 좁은 화면에서는 한 단이다. 두 단을 억지로 유지하면 줄당 열 자 남짓이 된다. */
@media (max-width: 860px) {
	.wc-about .wc-visitq-rows { grid-template-columns: 1fr; row-gap: 20px; }
	.wc-about .wc-visitq-item { padding-bottom: 18px; }
	.wc-about h3.wc-visitq-q { font-size: 1rem; padding-left: 24px; }
	.wc-about .wc-visitq-a { font-size: 0.96rem; }
}

/* **컨트롤이지 다섯째 물음이 아니다.** 처음에는 글자만 두었더니 물음 하나로 읽혔고,
   자리도 왼쪽 아래라 눈에 안 띄었다(Harry, 2026-08-21).

   **눈은 왼쪽에서 오른쪽으로 흐른다.** 마지막 줄을 다 읽고 눈이 도착하는 곳은 오른쪽
   끝이므로, 다음으로 누를 것은 거기 있어야 한다. 그리고 **누를 수 있다는 것은 테두리가
   말한다** — 글자만으로는 아무도 그것이 버튼인 줄 모른다. 이 사이트가 이미 쓰는 알약
   모양(`.wc-yearly li`)과 같은 결로 둔다.

   꺾쇠는 아래를 보고 있다가 열리면 위를 본다 — 무엇이 벌어질지 미리 말해 주는 표시다.

   **크기는 이 사이트의 칩(`.wc-yearly li`, 7px 15px)에 맞춘다.** 처음에 11px 22px 로
   만들었더니 화면에서 제일 큰 물건이 되어 투박했다(Harry, 2026-08-21). 버튼임을 알리는
   데 필요한 것은 크기가 아니라 테두리다. */
/* **펼친 것은 버튼 위로 나온다(Harry, 2026-08-23).** `<details>` 는 요약 줄이 반드시
   첫 자식이라 문서 순서로는 버튼이 위다. 그런데 `display:flex` 나 `grid` 로 순서를
   뒤집으면 **닫힌 상태에서 내용이 그대로 보인다** — 실제로 확인했다(닫아도 673px).
   브라우저가 접힘을 그리는 방식이 `display` 에 걸려 있기 때문이다.

   그래서 요약 줄만 흐름에서 빼 아래 오른쪽에 붙인다. 내용은 위에서부터 정상으로
   흐르고 버튼은 늘 바닥에 남는다. 접힘은 브라우저 것 그대로라 안 깨진다. */
.wc-about .wc-visitq-more {
	position: relative;
	margin-top: 34px;
}

/* 닫혔을 때는 버튼 높이만, 열렸을 때는 마지막 행과 버튼 사이 여백까지. */
.wc-about .wc-visitq-more { padding-bottom: 38px; }
.wc-about .wc-visitq-more[open] { padding-bottom: 78px; }

.wc-about .wc-visitq-more > summary {
	display: flex;
	align-items: center;
	gap: 7px;
	position: absolute;
	right: 0;
	bottom: 0;
	width: fit-content;
	margin: 0;
	padding: 6px 14px 6px 16px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: transparent;
	list-style: none;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--water);
	transition: background 0.18s ease, border-color 0.18s ease;
}

.wc-about .wc-visitq-more > summary:hover {
	background: var(--wp--preset--color--water-soft);
	border-color: var(--wp--preset--color--water);
}

.wc-about .wc-visitq-more > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--water);
	outline-offset: 3px;
}

/* 사파리는 `list-style:none` 만으로 삼각형이 안 없어진다. */
.wc-about .wc-visitq-more > summary::-webkit-details-marker { display: none; }

.wc-about .wc-visitq-more > summary::after {
	content: "";
	width: 5px;
	height: 5px;
	margin-top: -2px;
	border-right: 1.3px solid currentColor;
	border-bottom: 1.3px solid currentColor;
	opacity: 0.8;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.wc-about .wc-visitq-more[open] > summary::after {
	margin-top: 2px;
	transform: rotate(-135deg);
}

.wc-about .wc-visitq-more > * { margin-block-start: 0; }

@media (max-width: 900px) {
	.wc-abcards.wp-block-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.wc-abcards.wp-block-columns { grid-template-columns: 1fr; }
	.wc-about > .wp-block-group.wc-section { padding-top: 52px; }
}

/* 신청서. 같은 카드 안에 칸을 세로로 쌓는다. */
.wc-join-form {
	margin-top: 24px;
	text-align: left;
}

.wc-join-field {
	margin-bottom: 16px;
}

.wc-join-field label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}

/* 꼭 적어야 하는 칸. 빨강은 오류에만 쓰므로 여기서는 청록을 쓴다 —
   아직 아무것도 잘못되지 않았다. */
.wc-join-req {
	color: var(--wp--preset--color--water);
	font-weight: 700;
	margin-left: 1px;
}

.wc-join-req-note {
	margin: 0 0 16px;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-2);
}

.wc-join-field input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: #fff;
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
	transition: border-color .18s ease;
}

.wc-join-field input:focus {
	outline: none;
	border-color: var(--wp--preset--color--water);
}

/* 흐린 회색은 읽히지 않는다. 안내 문구는 읽으라고 두는 것이다. */
.wc-join-field input::placeholder {
	color: #5f7f80;
}

.wc-join-field small {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-2);
}

/* 무엇이 모자란지는 그 칸 바로 아래에서 말한다. */
.wc-join-error {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--wp--preset--color--alert);
}

.wc-join-submit {
	width: 100%;
	height: 48px;
	margin-top: 10px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--water);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	font-family: inherit;
	cursor: pointer;
	transition: filter .18s ease;
}

.wc-join-submit:hover {
	filter: brightness(1.08);
}

.wc-join-fine {
	margin: 20px 0 0;
	font-size: 0.78rem;
	line-height: 1.75;
	color: var(--wp--preset--color--ink-2);
}

/* 카드 밖에 서는 줄이라 카드와 같은 폭·같은 축을 준다.
   안 그러면 본문 영역 기준으로 가운데를 잡아 카드와 어긋난다. */
.wc-join-out,
.wc-join-back {
	max-width: 380px;
	margin: 20px auto 0;
	text-align: center;
	font-size: 0.84rem;
}

.wc-join-out a,
.wc-join-back a {
	color: var(--wp--preset--color--ink-2);
}

@media (max-width: 480px) {
	.wc-join { padding: 32px 24px 28px; }
	.wc-join-art { width: 140px; height: 140px; }
	.wc-join-title { font-size: 1.3rem; }
}

/* 푸터의 처리방침 링크. 저작권 줄과 같은 무게로 둔다 — 찾을 수 있으면 되고
   눈에 먼저 들어올 것은 아니다. */
.wc-footer-privacy {
	color: inherit;
}

.wc-footer-privacy:hover {
	color: var(--wp--preset--color--water);
}

/* ── 좁은 화면 정리 ────────────────────────────────────────────────────────
 * 손으로 쥔 화면에서 가로로 넘치거나 서로 밀치던 것들.
 */

/* 알약 묶음은 줄바꿈을 하지 않으므로, 사람이 늘면 가로로 삐져나간다.
   잘라 내는 대신 옆으로 밀어 볼 수 있게 한다 — 목록형 필터의 보통 방식이다. */
.wc-tabs a {
	white-space: nowrap;
	flex: 0 0 auto;
}

/* 글자만큼만 차지한다. 폭을 다 먹으면 오른쪽이 허옇게 비어 단추가 아니라
   빈 상자로 보인다. */
.wc-tabs {
	width: fit-content;
	max-width: 100%;
}

/* 걸러 보기 줄이 본문과 붙지 않게. 폼 기본 여백은 이 자리에서 쓸 것이 아니다. */
.wc-sermon-search {
	margin-bottom: 0;
}

.wc-controls {
	margin-bottom: 22px;
}

@media (max-width: 760px) {
	/* 목사님과 시리즈는 짧아서 한 줄에 앉는다 — 알약은 글자만큼, 시리즈는 남는 폭.
	   검색은 손가락으로 칠 칸이라 제 줄을 다 쓴다. */
	.wc-controls {
		display: grid;
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		gap: 10px;
	}

	.wc-sermon-search {
		grid-column: 1 / -1;
	}

	.wc-tabs {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.wc-tabs::-webkit-scrollbar {
		display: none;
	}

	.wc-series-filter,
	.wc-series-filter select,
	.wc-sermon-search {
		width: 100%;
		max-width: none;
	}
}

/* ── 예배 다시보기 (설계서 2권 4장) ────────────────────────────────────────
 * 줄 모양으로 두 열에 늘어놓는다. 실황 썸네일은 매주 같은 강단이라 구별에 보태는
 * 것이 없으면서 네 줄 높이를 먹는다. 두 열이면 여덟 편이 네 줄에 들어온다.
 */
.wc-replays {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 32px;
	border-top: 1px solid var(--wp--preset--color--ink);
}

.wc-replay {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 2px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.9rem;
	text-decoration: none;
	color: inherit;
	transition: background .18s ease;
}

.wc-replay:hover {
	background: var(--wp--preset--color--water-soft);
}

/* **줄어들 수 있어야 한다.** `0 0 auto` 로 두었더니 긴 제목이 날짜와 화살표를 줄
   밖으로 밀어 320px 화면에서 페이지가 통째로 옆으로 스크롤됐다. 예배 이름은 짧아
   여기서 드러나지 않았는데, 설교 제목이 이 줄에 들어오면서 나타났다. `min-width:0`
   이 있어야 flex 항목이 제 글자 폭 아래로 줄어든다. */
.wc-replay-name {
	flex: 0 1 auto;
	min-width: 0;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.wc-replay-at {
	flex: 1;
	color: var(--wp--preset--color--ink-2);
}

.wc-replay-go {
	color: var(--wp--preset--color--water);
}

/* 한 열로 내려온다. **여기서 세로로 쌓지 않는다** — 쌓으면 `align-items: center` 가
   가로 가운데 정렬로 바뀌어 내용이 한가운데 몰린다. */
@media (max-width: 640px) {
	.wc-replays {
		grid-template-columns: 1fr;
	}
}

/* 고른 예배가 재생되는 자리. 목록 바로 위에 열린다. */
.wc-replay-player {
	margin-bottom: 24px;
}

.wc-replay-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #0d2d2b;
}

.wc-replay-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wc-replay-close {
	margin-top: 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 22px;
	background: #fff;
	padding: 8px 18px;
	font-size: 0.82rem;
	font-family: inherit;
	color: var(--wp--preset--color--ink-2);
	cursor: pointer;
}

.wc-replay-close:hover {
	border-color: var(--wp--preset--color--water);
	color: var(--wp--preset--color--water);
}

/* 편집자에게만 보이는 「다시보기 올리기」 칸(`replay-manage.php`). 성도가 보는 목록과
   섞이지 않게 점선 판에 담는다 — 비어 있을 때의 안내(`.wc-replay-empty`)와 같은 선이다. */
.wc-replay-manage {
	border: 1px dashed var(--wp--preset--color--water);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 24px;
}
.wc-replay-manage-h { margin: 0 0 12px; font-size: 0.86rem; font-weight: 600; }
.wc-replay-manage-h span { margin-left: 6px; font-weight: 400; font-size: 0.78rem; color: var(--wp--preset--color--ink-2); }
.wc-replay-manage-sub { margin: 0 0 6px; font-size: 0.8rem; color: var(--wp--preset--color--ink-2); }
.wc-replay-said {
	margin: 0 0 14px;
	background: var(--wp--preset--color--water-soft);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.85rem;
}
.wc-replay-pending { list-style: none; margin: 0 0 12px; padding: 0; }
/* 좁으면 단추가 아랫줄로 내려간다. 이름과 단추를 한 줄에 우겨 넣으면 320px 에서 넘친다. */
.wc-replay-pending li {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 0.9rem;
}
.wc-replay-pending-what { min-width: 0; }
.wc-replay-pending-what b { font-weight: 500; margin-right: 6px; }
.wc-replay-pending-what a { margin-left: 8px; font-size: 0.8rem; color: var(--wp--preset--color--water); text-decoration: none; }
.wc-replay-pending-do { display: flex; gap: 8px; }
.wc-replay-pending-do form { margin: 0; }
/* `.wc-btn-primary` 는 링크를 위한 모양이라 단추에 붙이면 브라우저 기본 테두리와 글꼴이 남는다. */
.wc-replay-manage button { font-family: inherit; cursor: pointer; }
.wc-replay-manage button.wc-btn-primary { border: 0; }
.wc-replay-add summary { cursor: pointer; font-size: 0.84rem; color: var(--wp--preset--color--water); }
.wc-replay-add form { margin-top: 14px; }
.wc-replay-add .wc-album-field { margin-bottom: 14px; }
.wc-replay-add-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.wc-replay-add-row .wc-album-field { flex: 1 1 200px; min-width: 0; }

/* 편집자에게만 보이는 「설교 올리기」(`sermon-manage.php`). 다시보기 칸과 같은 점선 판이고,
   평소에는 접혀 있어 목록 위를 차지하지 않는다. 칸 모양은 다시보기의 것을 그대로 쓴다. */
.wc-sermon-manage { margin: 0 0 22px; }
.wc-sermon-add {
	border: 1px dashed var(--wp--preset--color--water);
	border-radius: 14px;
	padding: 12px 18px;
}
.wc-sermon-add summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--wp--preset--color--water); }
.wc-sermon-add summary span { margin-left: 6px; font-weight: 400; font-size: 0.78rem; color: var(--wp--preset--color--ink-2); }
.wc-sermon-add form { margin-top: 14px; }
.wc-sermon-add .wc-album-field { margin-bottom: 14px; }
/* 글 칸(`.wc-album-field input[type="text"]`)과 같은 높이로 선다. `font: inherit` 을 쓰면 본문의
   줄 높이(1.9)까지 물려받아 옆 칸보다 커진다. */
.wc-sermon-add select,
.wc-sermon-add input[type="number"] {
	box-sizing: border-box; width: 100%;
	border: 1px solid var(--wp--preset--color--line); border-radius: 10px;
	padding: 11px 13px; font-family: inherit; font-size: 0.95rem; line-height: normal;
	background: #fff; color: var(--wp--preset--color--ink);
}
.wc-sermon-add-note { margin: 0 0 14px; font-size: 0.8rem; color: var(--wp--preset--color--ink-2); }
.wc-sermon-add button { font-family: inherit; cursor: pointer; border: 0; }
.wc-sermon-manage .wc-replay-said a, .wc-sermon-manage .wc-album-bad a { margin-left: 6px; color: var(--wp--preset--color--water); }

/* --- 사진첩. 설계서 2권 7장 --- */

.wc-photos-top { display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.wc-photos-said {
	background:var(--wp--preset--color--water-soft); border-radius:12px;
	padding:10px 16px; font-size:0.85rem; margin:0 0 18px;
	transition:opacity .35s ease;
}
/* 끝난 일을 언제까지고 붙여 두지 않는다. */
.wc-said-gone { opacity:0; }

.wc-album-acts { display:flex; gap:8px; flex-wrap:wrap; }

/* 돌아가는 길은 맨 위 왼쪽 — 이동 경로가 있던 자리를 그대로 쓴다. */
/* 되돌아가는 단추. 설교 화면은 옆에 「시리즈 모아 보기」가 하나 더 선다. */
.wc-back { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }

/*
 * 되돌아가는 단추. **알약이 아니라 네모다**(소유자, 2026-09-10).
 *
 * **바탕을 칠한다.** 흰 바탕에 가는 테두리였을 때 화면 바탕이 거의 흰색이라 단추가 녹아
 * 버렸다 — 「잘 안 보인다」(소유자, 같은 날). 책 화면의 내려받기 단추(`.wc-bd-file`)와
 * 같은 옅은 물색 바탕·물색 굵은 글자다. 한 화면에 선 두 단추가 한 식구로 읽힌다.
 *
 * ⚠️ **테두리는 없애지 않고 투명하게 둔다.** 고대비 모드(forced-colors)는 바탕색을 걷어
 * 내는데 테두리는 시스템 색으로 칠해 준다. 테두리까지 없으면 거기서는 **맨 링크**가 된다.
 *
 * 글자가 접힌다 — 단추는 안 접히는 것이 맞지만 이 단추에는 **시리즈 이름이 통째로
 * 들어간다.** 320px 화면에서 열한 자를 넘으면 접히는 대신 화면이 옆으로 밀린다. 지금
 * 가장 긴 이름은 들어가지만 다음 이름은 우리가 정하는 것이 아니다.
 */
.wc-back-btn {
	display:inline-flex; align-items:center; gap:7px;
	border:1px solid transparent; border-radius:8px; padding:8px 13px;
	font-size:0.84rem; font-weight:600; color:var(--wp--preset--color--water);
	background:var(--wp--preset--color--water-soft); text-decoration:none; white-space:normal;
	transition:background-color .18s ease;
}

.wc-back-btn svg { flex:none; }

.wc-back-btn:hover,
.wc-back-btn:focus-visible { background:#d3e7e2; }

/* 앨범 목록 — 격자와 카드 들림은 설교 것을 그대로 쓴다(.wc-sermon-grid).
   여기서는 앨범에만 있는 것만 적는다. */
.wc-album { display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; }
.wc-album-cover {
	display:block; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
	background:var(--wp--preset--color--water-soft);
	transition:transform .2s, box-shadow .2s;
}
.wc-album-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.wc-album:hover .wc-album-cover { transform:translateY(-4px); box-shadow:0 14px 26px rgb(14 107 102 / 24%); }
.wc-album h2 { margin:0; font-size:1.05rem; font-weight:500; letter-spacing:-0.01em; }
.wc-album:hover h2 { color:var(--wp--preset--color--water); }
.wc-album-meta { font-size:0.8rem; color:var(--wp--preset--color--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* 앨범 하나 */
.wc-photos .wc-head h1 { margin:0; font-size:1.5rem; letter-spacing:-0.02em; }
.wc-head-sub { margin:4px 0 0; font-size:0.82rem; color:var(--wp--preset--color--ink-2); font-variant-numeric:tabular-nums; }

/* 만들기·고치기 — 가입 신청서와 같은 칸을 쓴다(wc-join-field) */

.wc-photos .wc-head a.wc-btn-quiet,
.wc-btn-quiet {
	display:inline-block; border:1px solid var(--wp--preset--color--line); border-radius:22px;
	padding:10px 18px; font-size:0.84rem; color:var(--wp--preset--color--ink-2);
	background:#fff; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.wc-btn-danger {
	border:1px solid var(--wp--preset--color--alert); border-radius:22px; background:#fff;
	padding:10px 18px; font:inherit; font-size:0.84rem; color:var(--wp--preset--color--alert); cursor:pointer;
}

.wc-photos-gate { padding:60px 0; }
.wc-photos-gate h1 { margin:0 0 8px; font-size:1.5rem; }
.wc-photos-gate p { margin:0; color:var(--wp--preset--color--ink-2); }

/* 앨범 만들기·고치기.
 *
 * **넓은 화면에 칸만 늘어놓지 않는다.** 입력할 것이 둘뿐인데 화면 폭만큼 늘어난 칸은
 * 어디를 채워야 할지 알려 주지 않는다. 가입 신청서와 같은 판에 담는다(wc-join). */
.wc-album-form {
	/* 이 테마는 content-box 다. 이것을 빼면 max-width 가 안쪽 폭이 되어
	   판이 좌우 padding 만큼 더 넓어진다. */
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 34px 34px 30px;
	box-shadow: 0 18px 40px rgb(14 107 102 / 8%);
}
.wc-album-form h1 { margin: 0 0 24px; font-size: 1.5rem; letter-spacing: -0.02em; text-align: center; }

.wc-album-bad {
	margin: 0 0 18px;
	background: #fdf2f1;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--alert);
}

.wc-album-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.wc-album-field label { font-size: 0.82rem; font-weight: 600; }
.wc-album-field textarea {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 11px 13px;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.7;
	background: #fff;
	color: var(--wp--preset--color--ink);
	resize: vertical;
}
.wc-album-field textarea:focus { outline: none; border-color: var(--wp--preset--color--water); }

.wc-album-field input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 11px 13px;
	font-size: 0.95rem;
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.wc-album-field input[type="date"] {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 0.95rem;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}
.wc-album-field input:focus { outline: none; border-color: var(--wp--preset--color--water); }

/* ── 소식 폼에만 있는 둘 ────────────────────────────────────────────────
 * 일정 폼과 같은 틀을 쓰므로 여기 있는 것은 **일정에 없던 것**뿐이다 —
 * 칸 아래 한 줄 설명과, 이미 붙어 있는 사진.
 */

/* **이름표가 아니라 설명이다.** `.wc-album-field label` 이 600 이라, 같은 무게로
   두면 무엇을 적는 칸인지가 두 번 말해진다. */
.wc-field-hint {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink-2);
}

.wc-album-field input[type="file"] {
	font-size: 0.86rem;
	color: var(--wp--preset--color--ink-2);
}

/* 이미 붙어 있는 사진. **작게 보인다** — 여기서 확인할 것은 「어느 사진인가」지
   사진 자체가 아니다. */
.wc-notice-cover-now {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--bg);
}

.wc-notice-cover-now img {
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	flex: none;
}

.wc-notice-cover-drop {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.84rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink-2);
	cursor: pointer;
}

.wc-notice-cover-drop input { margin-top: 3px; }

/* 되돌릴 수 없는 일이니 그렇게 적어 둔다. 체크한 뒤에 알게 되면 늦다. */
.wc-notice-cover-drop em {
	display: block;
	font-style: normal;
	font-size: 0.76rem;
	color: var(--wp--preset--color--alert);
}

.wc-album-when { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.wc-album-to { display: inline-flex; align-items: center; gap: 12px; }
.wc-album-to[hidden] { display: none; }
.wc-album-dash { color: var(--wp--preset--color--ink-2); }

.wc-album-buttons {
	display: flex; align-items: center; justify-content: center; gap: 18px;
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 28px; padding-top: 22px;
}
.wc-album-cancel { font-size: 0.84rem; color: var(--wp--preset--color--ink-2); text-decoration: none; }
.wc-album-cancel:hover { color: var(--wp--preset--color--ink); }

/* 지우기는 판 밖에 둔다. 저장하려다 누를 자리가 아니다. */
.wc-album-drop { box-sizing: border-box; width: 100%; max-width: 520px; margin: 26px auto 0; text-align: right; }

@media (max-width: 640px) {
	.wc-album-form { padding: 26px 20px 24px; border-radius: 14px; }
	.wc-album-when { gap: 10px; }
	.wc-album-field input[type="date"] { flex: 1 1 auto; min-width: 0; }
}

/* 사진 격자 — 사진이 곧 내용이라 사이를 좁게 둔다. 카드로 감싸면 한 화면에
   들어가는 장수가 절반이 된다. */
.wc-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.wc-photo { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--wp--preset--color--water-soft); }
.wc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-photo:focus-visible { outline: 2px solid var(--wp--preset--color--water); outline-offset: 2px; }


@media (max-width: 640px) { .wc-photo-grid { grid-template-columns: repeat(3, 1fr); } }

/* 크게 보기.
 *
 * 어두운 바탕은 사진의 색을 있는 그대로 보이게 한다 — 밝은 바탕에서는 눈이 바탕에
 * 맞춰져 사진이 어둡게 보인다. 사이트의 다른 어두운 면과 같은 색을 쓴다. */
body.wc-viewing { overflow: hidden; }

.wc-viewer {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: #0d2d2b;
	display: grid;
	/* `1fr` 만 쓰면 최소값이 내용 크기라 큰 사진이 칸을 밀어내 화면 밖으로 넘친다. */
	grid-template-rows: auto minmax(0, 1fr) auto;
}
.wc-viewer[hidden] { display: none; }

.wc-viewer-top {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 12px 16px; color: #dcebe8; font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}
.wc-viewer-tools { display: flex; align-items: center; gap: 8px; }
.wc-viewer-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 16px;
	border: 0; border-radius: 22px; background: rgb(255 255 255 / 12%);
	color: #dcebe8; font: inherit; font-size: 0.84rem; text-decoration: none; cursor: pointer;
}
.wc-viewer-btn:hover { background: rgb(255 255 255 / 22%); }
.wc-viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wc-viewer-close { font-size: 1.05rem; padding: 0; }
.wc-viewer-cover { display: inline-flex; margin: 0; }
.wc-viewer-drop { display: inline-flex; margin: 0; }
.wc-viewer-drop[hidden] { display: none; }
.wc-viewer-danger { color: #f0b7b2; }
.wc-viewer-danger:hover { background: rgb(179 38 30 / 35%); }

/* 사진을 칸 안에 맞춘다.
 *
 * `max-height:100%` 는 칸의 높이가 확실할 때에만 듣는데, 격자 칸 안에서는 그 값이
 * 늘 잡히지 않는다 — 큰 사진이 그대로 그려져 화면 밖으로 나갔다. 칸을 꽉 채우게
 * 두고 `contain` 으로 비율을 지키면 어떤 사진이든 안에 들어온다. */
.wc-viewer-stage { padding: 0 60px; min-height: 0; overflow: hidden; }
.wc-viewer-img { width: 100%; height: 100%; object-fit: contain; display: block; }

.wc-viewer-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgb(255 255 255 / 14%); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.wc-viewer-arrow:hover { background: rgb(255 255 255 / 26%); }
.wc-viewer-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wc-viewer-prev { left: 10px; }
.wc-viewer-next { right: 10px; }
.wc-viewer-arrow[hidden] { display: none; }

.wc-viewer-by { margin: 0; padding: 14px 16px 20px; color: #92aeaa; font-size: 0.8rem; text-align: center; }

@media (max-width: 640px) {
	.wc-viewer-stage { padding: 0 8px; }
	.wc-viewer-prev { left: 4px; }
	.wc-viewer-next { right: 4px; }
}

/* 사진 올리기 — 눌렀을 때만 뜨는 창.
 *
 * 앨범 화면에 늘 놓아 두면 사진첩이 아니라 업로드 화면처럼 보이고, 정작 사진이
 * 그만큼 아래로 밀린다. */
.wc-up-open { margin: 0 0 20px; }

.wc-up {
	position: fixed; inset: 0; z-index: 95;
	background: rgb(10 30 30 / 55%);
	display: grid; place-items: center; padding: 20px;
}
.wc-up[hidden] { display: none; }

.wc-up-box {
	box-sizing: border-box;
	width: 100%; max-width: 560px; max-height: 88vh;
	display: flex; flex-direction: column;
	background: #fff; border-radius: 16px; padding: 22px 24px 20px;
	box-shadow: 0 24px 60px rgb(10 30 30 / 30%);
}
.wc-up-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.wc-up-head h2 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.wc-up-x {
	width: 36px; height: 36px; border: 0; border-radius: 8px; background: none;
	color: var(--wp--preset--color--ink-2); font-size: 1rem; cursor: pointer; line-height: 1;
}
.wc-up-x:hover { background: var(--wp--preset--color--bg); }

/* 사진 놓는 자리 — **영역 전체가 눌린다.** 단추를 따로 두면 어디를 눌러야 하는지와
   어디에 떨어뜨려야 하는지를 사람이 갈라 생각해야 한다. */
.wc-drop {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	border: 2px dashed var(--wp--preset--color--line);
	border-radius: 14px; background: var(--wp--preset--color--bg);
	padding: 40px 20px; text-align: center;
	transition: border-color .18s, background .18s;
}
.wc-drop:hover { border-color: var(--wp--preset--color--water); background: var(--wp--preset--color--water-soft); }
.wc-drop-over { border-style: solid; border-color: var(--wp--preset--color--water); background: var(--wp--preset--color--water-soft); }

.wc-drop-mark {
	display: grid; place-items: center;
	width: 60px; height: 60px; margin-bottom: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--water-soft);
	color: var(--wp--preset--color--water);
	transition: background .18s, transform .18s;
}
.wc-drop:hover .wc-drop-mark,
.wc-drop-over .wc-drop-mark { transform: translateY(-2px); }
.wc-drop-over .wc-drop-mark { background: #fff; }

.wc-drop-say { font-size: 0.95rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.wc-drop-hint { font-size: 0.82rem; color: var(--wp--preset--color--ink-2); }

/* **감추되 없애지 않는다.** `display:none` 이면 키보드로 닿지 못해, 마우스 없이는
   사진을 고를 길이 사라진다. */
.wc-drop input[type="file"] {
	position: absolute; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* **키보드로 왔을 때만 테두리를 그린다.** 창을 열면서 이 자리에 초점을 두는데,
   마우스로 연 사람에게까지 초점 테를 보이면 이미 뭔가 누른 것처럼 읽힌다. */
.wc-drop:has( input:focus-visible ) {
	border-style: solid;
	border-color: var(--wp--preset--color--water);
	outline: 2px solid var(--wp--preset--color--water);
	outline-offset: 3px;
}

.wc-queue {
	list-style: none; margin: 14px 0 0; padding: 0; overflow-y: auto;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
}
.wc-queue[hidden] { display: none; }
.wc-queue li { position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--wp--preset--color--water-soft); }
.wc-queue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-queue-off {
	position: absolute; right: 5px; top: 5px;
	width: 26px; height: 26px; border: 0; border-radius: 50%;
	background: rgb(10 30 30 / 62%); color: #fff; font-size: 0.75rem; line-height: 1; cursor: pointer;
}
.wc-queue-off:hover { background: rgb(179 38 30 / 85%); }
.wc-queue-off:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* 올리는 동안. 아무 표시가 없으면 사람은 다시 누르고, 그러면 두 번 올라간다. */
.wc-up-bar { height: 4px; border-radius: 2px; background: var(--wp--preset--color--line); overflow: hidden; margin-top: 16px; }
.wc-up-bar[hidden] { display: none; }
.wc-up-bar i { display: block; height: 100%; width: 0; background: var(--wp--preset--color--water); transition: width .25s ease; }

.wc-up-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 18px; padding-top: 16px;
}
.wc-up-btns { display: flex; gap: 8px; }
.wc-queue-count { font-size: 0.85rem; color: var(--wp--preset--color--ink-2); font-variant-numeric: tabular-nums; }
.wc-up-box button[disabled] { opacity: 0.45; cursor: default; }

/* 사진첩 안의 단추는 알약을 쓰지 않는다.
 *
 * 사이트의 알약은 「읽기 시작」처럼 한 화면에 하나 놓이는 단추의 모양이다. 사진첩은
 * 단추가 여럿 나란히 서는 화면이라, 알약이 줄지어 서면 약봉지처럼 보인다. */
/* `.wc-head a` 가 뒤에 와서 더 세다. 같은 자리에서 이겨야 한다. */
.wc-photos .wc-head a.wc-btn-quiet,
.wc-up-box .wc-btn-primary,
.wc-up-box .wc-btn-quiet,
.wc-photos .wc-btn-primary,
.wc-photos .wc-btn-quiet,
.wc-photos .wc-btn-danger,
.wc-photos .wc-album-form .wc-btn-primary,
.wc-ask-box .wc-btn-quiet,
.wc-ask-box .wc-btn-danger,
.wc-album-drop .wc-btn-danger {
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 0.85rem;
}

/* 누를 수 있는 것은 누를 수 있어 보여야 한다.
 *
 * 단추에 손을 얹었을 때 아무 일도 없으면, 사람은 그것이 단추인지 글자인지 모른다.
 * 커서도 마찬가지다 — 화살표만 나오면 눌리는 자리가 아니라고 읽는다. */
.wc-btn-primary,
.wc-btn-quiet,
.wc-btn-danger,
.wc-album-cancel,
.wc-up-x,
.wc-queue-off,
.wc-photo,
.wc-album,
.wc-viewer-btn,
.wc-viewer-arrow,
.wc-drop {
	cursor: pointer;
}

.wc-btn-primary:hover {
	background: #0b5854;
	border-color: #0b5854;
}
.wc-btn-quiet:hover {
	border-color: var(--wp--preset--color--water);
	color: var(--wp--preset--color--water);
}
.wc-btn-danger:hover {
	background: var(--wp--preset--color--alert);
	color: #fff;
}

/* 초점도 이 테마의 색으로 말한다. 브라우저 기본 파란 테는 팔레트 밖의 물건이다 —
 * wc-me 안에만 있던 처리를 전역으로 올린다(사진첩·확인 창까지 함께 고쳐진다). */
.wc-btn-primary:focus-visible,
.wc-back-btn:focus-visible,
.wc-btn-quiet:focus-visible {
	outline: 2px solid var(--wp--preset--color--water);
	outline-offset: 3px;
}
.wc-btn-danger:focus-visible {
	outline: 2px solid var(--wp--preset--color--alert);
	outline-offset: 3px;
}
.wc-album-cancel:hover { color: var(--wp--preset--color--ink); }

/* 눌러도 아무 일이 없는 단추는 손 모양이 아니어야 한다. */
.wc-btn-primary[disabled],
.wc-btn-quiet[disabled],
.wc-btn-danger[disabled],
.wc-up-x[disabled] {
	cursor: default;
}
.wc-btn-primary[disabled]:hover {
	background: var(--wp--preset--color--water);
	border-color: var(--wp--preset--color--water);
}
.wc-btn-quiet[disabled]:hover {
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-2);
}

/* 사진과 앨범도 손을 얹으면 반응한다. */
.wc-photo { transition: opacity .15s ease; }
.wc-photo:hover { opacity: 0.86; }

/* 되돌릴 수 없는 것을 묻는 창.

   브라우저의 `confirm()` 을 대신한다 — 그것은 화면과 따로 놀고, 떠 있는 동안
   페이지의 다른 모든 것이 멈춘다. */
.wc-ask {
	position: fixed; inset: 0; z-index: 60;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgb(10 32 30 / 55%);
}
.wc-ask[hidden] { display: none; }

.wc-ask-box {
	box-sizing: border-box;
	/* 짧은 두 줄짜리 물음에 420px 은 오른쪽이 빈 공기다. 글과 틀의 비례를 맞춘다. */
	width: 100%; max-width: 380px;
	background: #fff; border-radius: 14px; padding: 26px 26px 20px;
	box-shadow: 0 20px 50px rgb(10 32 30 / 30%);
}
.wc-ask-box h2 { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: -0.01em; }
.wc-ask-say { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--wp--preset--color--ink-2); }
.wc-ask-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

/* 물음 한 문장짜리 창. 제목과 부연이 같은 말을 두 번 하게 두지 않는다. */
.wc-ask-one { margin: 4px 0 0; font-size: 0.95rem; line-height: 1.6;
	color: var(--wp--preset--color--ink); }

/* 확인 창 안에서는 「삭제」가 주인공이다 — 테마의 주 동작 관용구(가득 찬 알약)를
 * 입는다. 바탕의 위험 단추가 hover 에서 뒤집히는 바로 그 모습이 여기서는 평상복이다. */
.wc-ask-box .wc-btn-danger {
	background: var(--wp--preset--color--alert);
	border-color: var(--wp--preset--color--alert);
	color: #fff;
}
.wc-ask-box .wc-btn-danger:hover {
	background: #9b211a;
	border-color: #9b211a;
}

/* 지우는 동안은 되돌아올 길이 없다. 요청은 이미 떠났다. */
.wc-ask-going .wc-ask-box { opacity: 0.75; }
.wc-ask-going button { cursor: default; }


/* **손가락으로 쓰는 화면에서 칸 글자는 16px 이다.**
   iOS 사파리는 16px 보다 작은 입력칸에 초점이 가면 페이지를 확대하고, 초점이
   빠져도 되돌리지 않는다 — 검색 한 번에 홈페이지 오른쪽이 잘린 채 남는다.
   물벗 위젯이 같은 일을 겪고 이미 고쳤다(chat-widget.php). 테마의 칸들도 같다. */
@media (pointer: coarse) {
	.wc-searchform input,
	.wc-searchform button,
	.wc-sermon-search input,
	.wc-sermon-search button,
	.wc-series-filter select,
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="date"],
	select,
	textarea {
		font-size: 16px;
	}
}


/* ── 소개 맨 위 한 줄 — 언제·어디로·어디에 물어보나 ─────────────────────
 * 시간표와 주소가 설교·책보다 아래에 있어서 「몇 시인지 보러 왔는데 한참
 * 내려가야 한다」가 나왔다(페르소나 리뷰, 2026-08-20). 순서는 그대로 두고
 * 요약만 위에 얹는다.
 */
/* 소개 「오시는 길」의 전화 줄. 주소 바로 아래에 둔다 — 못 찾겠으면 거기서 건다. */
.wc-visit-tel { margin: 0 0 22px; font-size: 0.95rem; line-height: 1.55; }
.wc-visit-tel a { color: var(--wp--preset--color--water); font-weight: 500; text-decoration: none; }
.wc-visit-tel a:hover { text-decoration: underline; }

/* 푸터의 전화. 주소와 같은 무게로 둔다. */
.wc-footer-tel { display: inline-block; margin-top: 4px; }


/* ── 해마다 있는 자리 ────────────────────────────────────────────────────
 * 주간 모임 카드 세 장 아래. 목록이지만 점을 찍지 않는다 — 다섯이 나란히
 * 놓이면 읽는 것이 아니라 훑는 것이고, 훑는 것에는 점이 방해가 된다.
 */
.wc-about .wc-yearly-h {
	margin: 34px 0 14px;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-2);
}

.wc-about ul.wc-yearly {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-about ul.wc-yearly li {
	margin: 0;
	padding: 7px 15px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

/* 소식 화면에서 일정을 직접 고치는 자리.
 *
 * 폼 칸은 앨범 폼(wc-album-form)을 그대로 쓴다 — 새 모양을 만들지 않는다.
 * 여기 있는 것은 목록에 붙는 두 단추와 삭제 칸뿐이다. 편집자에게만 렌더되므로
 * 권한 없는 화면은 이 규칙들에 닿지 않는다. */


/* 줄 전체가 <a> 라서 「수정」을 그 안에 넣을 수 없다. 관리 모드에서만 줄을 판에
 * 감싸고, 줄 사이 선은 판이 진다 — 안 그러면 선이 수정 단추 앞에서 끊긴다. */
.wc-evrow-line { display: flex; align-items: flex-start; gap: 12px;
	border-bottom: 1px solid var(--wp--preset--color--line); }
.wc-evrow-line .wc-evrow { flex: 1 1 auto; border-bottom: 0; }

/* 줄 자체의 위 여백만큼 내려 **제목과 눈높이를 맞춘다.** 예전에는 `center` 라
   긴 줄에서는 단추가 한가운데 떠 있고 짧은 줄에서는 제목 옆에 있어, 줄마다
   자리가 달라 보였다. */
.wc-evrow-line .wc-rowedit { margin-top: 16px; }

/* 삭제는 저장·취소와 같은 줄의 오른쪽 끝, 조용한 글자 하나다. 빨간 알약은
 * 확인 창(wc-ask) 안의 「삭제」가 맡는다 — 위험은 물은 다음에 보여 준다.
 * 단추 줄은 가운데 정렬이라(wc-album-buttons) 절대 위치로 비켜 선다. */
.wc-event-form .wc-album-buttons { position: relative; }
.wc-evdrop { position: absolute; right: 0; background: none; border: 0; padding: 6px 0;
	font: inherit; font-size: 0.82rem; color: var(--wp--preset--color--alert);
	cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
	text-decoration-color: rgb(179 38 30 / 35%); }
.wc-evdrop:hover { text-decoration-color: currentcolor; }
.wc-evdrop:focus-visible { outline: 2px solid var(--wp--preset--color--alert);
	outline-offset: 3px; border-radius: 4px; }

/* 월 소제목 — 목록이 길어져도 달을 짚으며 내려갈 수 있게 (달력 대신 목록, 2026-08-24). */
.wc-evmonth { max-width: 760px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em;
	color: var(--wp--preset--color--water); margin: 26px 0 6px; }
.wc-evmonth small,
.wc-evgroup-h small { font-size: 0.72rem; font-weight: 400; letter-spacing: 0;
	color: var(--wp--preset--color--ink-2); margin-left: 7px; }

/* 주소 복사. 제목 옆에 선다 — 본문 맨 아래에 두면 거기까지 내려간 사람만 본다.
   서버가 hidden 으로 내고 copy-link.js 가 켠다(클립보드를 쓸 수 있을 때만).

   **조용해야 하는 자리다.** 제목이 주인공이고 이건 곁다리라, 테두리도 배경도 두지
   않는다 — 사이트의 다른 곁다리 링크와 같은 무게로 둔다. */
.wc-title-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.wc-title-row > h1 { flex: 1 1 auto; min-width: 0; }

.wc-copy {
	position: relative;
	flex: none;
	margin-top: 0.65em;
}

.wc-copy-go {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 2px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-2, #7d8e8c);
	cursor: pointer;
	transition: color .18s ease;
}

.wc-copy-go svg {
	width: 14px;
	height: 14px;
	flex: none;
	opacity: .75;
	transition: opacity .18s ease;
}

.wc-copy-go:hover { color: var(--wp--preset--color--water); }
.wc-copy-go:hover svg { opacity: 1; }

.wc-copy.is-said .wc-copy-go { color: var(--wp--preset--color--water); }

.wc-copy-said {
	position: absolute;
	top: calc(100% + 2px);
	right: 0;
	margin: 0;
	font-size: 0.74rem;
	color: var(--wp--preset--color--ink-2, #7d8e8c);
	white-space: nowrap;
}

.wc-copy-said:empty { display: none; }

/* 좁은 화면에서는 아이콘만. 제목이 두 줄로 접히는 폭이라 글자까지 두면 밀린다. */
@media (max-width: 560px) {
	.wc-copy-t {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wc-copy-go { padding: 4px; }
	.wc-copy-go svg { width: 16px; height: 16px; }
}

/* 소식글 목록. 일정과 같은 「왼쪽 블록 + 오른쪽 글」이라 한 화면에서 결이 이어진다 —
   다만 왼쪽이 날짜 칸이 아니라 썸네일이고, **사진이 없으면 그 칸 자체가 없다**.
   사진 유무로 갈래를 나누지 않으려는 것이다. */
/* **일정 줄과 같은 폭·같은 윗선이다.** 하나는 760, 하나는 본문 전체 폭이라 두
   덩어리가 한 화면에서 서로 어긋나 보였다. */
.wc-notices { max-width: 760px; margin: 0 0 34px; border-top: 1px solid var(--wp--preset--color--ink); }

/* 홈에서는 두 칸으로 눕는다 — 바로 아래 「교회 일정」이 쓰는 격자(`.wc-two`)와 같은
   모양·같은 분기점이다. 한 칸에 넷을 세우면 홈이 소식으로만 길어진다. */
.wc-notices-two {
	max-width: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 56px;
}

/* **이 규칙은 위 기본 규칙 바로 뒤여야 한다.** 접는 규칙을 아래 일정 격자 옆
   (1739줄)에 두었더니, 기본 규칙이 그보다 훨씬 뒤에 실려 같은 특정도로 이겼다 —
   좁은 화면에서도 두 칸 그대로였다. 순서가 곧 뜻인 자리다. */
@media (max-width: 900px) {
	.wc-notices-two { grid-template-columns: 1fr; }
}

.wc-nrow {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wc-nthumb {
	flex: none;
	width: 84px;
	height: 63px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--water-soft);
}

.wc-nthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wc-nbody { flex: 1 1 auto; min-width: 0; }

.wc-nbody h3 {
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}

.wc-nbody h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wc-nbody h3 a:hover { color: var(--wp--preset--color--water); }

.wc-nbody p {
	margin: 0;
	font-size: 0.88rem;
	color: var(--wp--preset--color--ink-2);
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wc-nwhen { flex: none; font-size: 0.8rem; color: var(--wp--preset--color--ink-2); padding-top: 3px; }

/* ── 줄 하나를 고치는 단추. 소식과 일정이 **같은 것을 쓴다** ─────────────
 * 같은 동작에 서로 다른 물건을 두 개 두었더니, 한쪽만 손이 닿을 때 반응하고
 * 크기도 서 있는 높이도 달랐다. 한 화면에 나란히 놓이는 둘이라 그 차이가
 * 그대로 보인다.
 */
.wc-rowedit {
	flex: none;
	align-self: flex-start;
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	padding: 3px 11px;
	background: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .16s ease, color .16s ease;
}

.wc-rowedit:hover,
.wc-rowedit:focus-visible {
	border-color: var(--wp--preset--color--water);
	color: var(--wp--preset--color--water);
}

.wc-nmore { font-size: 0.82rem; color: var(--wp--preset--color--ink-2); margin: 12px 0 0; }


.wc-btn-quiet {
	background: none;
	border: 1px solid var(--wp--preset--color--water);
	color: var(--wp--preset--color--water);
}

@media (max-width: 560px) {
	.wc-nthumb { width: 64px; height: 48px; }
	/* 좁은 화면에서는 날짜를 제목 아래로 내리지 않고 아예 숨긴다 — 목록에서 날짜보다
	   제목이 먼저 읽혀야 하고, 낱장에 들어가면 날짜가 다시 나온다. */
	.wc-nwhen { display: none; }
	/* 첫 문장도 한 줄로. 썸네일 옆 폭이 좁아 두 줄을 두면 사진 있는 줄만 훌쩍 높아지고
	   목록의 리듬이 깨진다. */
	.wc-nbody p { -webkit-line-clamp: 1; }
}

/* 소식글 상세. 일정 상세와 같은 뼈대이고, 대표 이미지 한 장이 본문 위에 온다. */
.wc-notice-single { max-width: 760px; margin: 0 auto; }

/* 세로로 긴 포스터가 화면을 통째로 차지하지 않도록 높이를 묶는다.
   가로 사진은 예전처럼 폭이 먼저 걸리므로 아무 것도 달라지지 않고, 좁은 화면도
   폭이 먼저 걸린다 — 이 상한은 **데스크톱에서 세로 포스터일 때만** 일한다.
   그렇게 묶지 않으면 정작 읽어야 할 일시와 장소가 한 화면 아래로 밀린다. */
.wc-notice-cover {
	margin: 20px auto 26px;
	width: fit-content;
	max-width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--water-soft);
}

.wc-notice-cover img {
	display: block;
	max-width: 100%;
	max-height: 72vh;
	width: auto;
	height: auto;
}

.wc-notice-body { font-size: 1rem; line-height: 1.9; }

/* `text-wrap: pretty` 는 **마지막 줄에 한 어절만 남는 것**을 막는다. 한글은 `body` 의
   `word-break: keep-all` 덕에 어절 안에서는 안 깨지지만, 그 대신 마지막 어절 하나가
   다음 줄로 밀려 내려가기 쉽다 — 초대글에서는 「큰 기쁨이겠습니다.」 한 줄이 그렇게
   떨어져 나왔다. 모르는 브라우저는 그냥 지금처럼 흘려보내므로 잃는 것이 없다. */
.wc-notice-body p { margin: 0 0 1.1em; text-wrap: pretty; }

/* **본문이 300이라 `strong` 을 그냥 두면 굵어지지 않는다.** 브라우저 기본값이
   `bolder` 인데 그것은 절대값이 아니라 한 단계 위라, 300 에서는 400 이 된다 —
   화면에서는 굵기 차이가 보이지 않는다. 「일시」·「장소」 같은 이름표가 본문과
   구별되지 않아 글이 통째로 한 덩어리로 읽힌다. 600 은 위 `.wc-notice b` 와 같은 값이다. */
.wc-notice-body strong,
.wc-notice-body b { font-weight: 600; }

.wc-notice-back {
	margin: 34px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.86rem;
}

/* 글자 링크였다. 지금은 위쪽 것과 같은 네모 단추가 들어온다 — 색은 `.wc-back-btn` 이 진다. */

/* ── 탈퇴 ────────────────────────────────────────────────────────────
 * **눈에 띄려고 애쓰지 않는다.** 「내 정보」 맨 아래 조용한 판이고, 위험한 붉은색은
 * 마지막 단추 하나에만 있다. 처음 오는 사람이 실수로 여기까지 오지 않는다.
 */
/* **위 칸과 같은 폭이어야 한다.** 안 맞추면 이 절만 화면 끝까지 뻗어, 같은 화면인데
   기둥이 둘로 보인다 (`.wc-me-facts` 가 720px 이다). */
.wc-me-leave { max-width: 720px; margin: 44px 0 0; padding: 22px 0 0;
	border-top: 1px solid var(--wp--preset--color--line); }
.wc-me-leave h2 { font-size: 1rem; font-weight: 600; margin: 0 0 6px; }
.wc-me-leave-lead { margin: 0 0 10px; font-size: 0.9rem; color: var(--wp--preset--color--ink-2); }
.wc-me-leave-list { margin: 0 0 18px; padding-left: 18px; font-size: 0.88rem; line-height: 1.75; }
.wc-me-leave-list li { margin: 0 0 4px; }
.wc-me-leave-ok { display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
	font-size: 0.9rem; cursor: pointer; }
.wc-me-leave-form { display: flex; flex-direction: column; align-items: flex-start; }

/* 건의 화면. **카드 하나에 담는다** — 성도 확인 화면부터 이 사이트의 폼은 그 모양이고,
   넓은 화면에 글상자만 덩그러니 놓이면 받는 쪽이 성의 없어 보인다. 마구 적어 보내라는
   화면이 되면 마구 적힌 것이 온다. */
.wc-say { padding: 40px 0 72px; }

.wc-say-card {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 40px 38px 34px;
	box-shadow: 0 10px 26px rgb(14 107 102 / 10%);
}

/* 기다리는 분에게 보이는 판. 쓸 자리가 없으므로 그림자까지 들 이유가 없다. */
.wc-say-card-quiet { box-shadow: none; text-align: center; }

/* 세리프 제목은 1.35rem 아래로 내려가지 않는다(가입 카드와 같은 규칙). */
.wc-say-title { font-size: 1.5rem; font-weight: 500; line-height: 1.55; margin: 0; }

.wc-say-hint { font-size: 0.9rem; line-height: 1.9; color: var(--wp--preset--color--ink-2);
	margin: 10px 0 0; text-wrap: balance; }

.wc-say-form { display: block; margin: 22px 0 0; }

/* 쓰는 자리가 넉넉해야 길게 쓴다. 아홉 줄은 A4 반 장쯤이다. */
.wc-say-body {
	width: 100%;
	box-sizing: border-box;
	min-height: 220px;
	padding: 16px 18px;
	font: inherit;
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	resize: vertical;
}

.wc-say-body::placeholder { color: var(--wp--preset--color--ink-2); opacity: 0.75; }

.wc-say-body:focus-visible {
	outline: 2px solid var(--wp--preset--color--water);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--water);
	background: #fff;
}

/* 보내는 줄. **글자 수와 단추를 한 줄에 둔다** — 따로 놓으면 오른쪽 끝의 숫자와 왼쪽의
   단추가 서로 남처럼 보인다. 하나의 조작 띠로 읽혀야 한다. */
.wc-say-row { display: flex; align-items: center; justify-content: space-between;
	gap: 16px; margin: 16px 0 0; }

.wc-say-count { margin: 0; font-size: 0.8rem; color: var(--wp--preset--color--ink-2);
	font-variant-numeric: tabular-nums; }

/* 거의 다 찼을 때만 알린다 — 처음부터 붉으면 경고가 배경이 된다. */
.wc-say-count.is-near { color: var(--wp--preset--color--alert); }

.wc-say-send { min-height: 48px; }

.wc-say-fine { margin: 20px 0 0; font-size: 0.84rem; line-height: 1.8;
	color: var(--wp--preset--color--ink-2); }

/* 보낸 뒤의 한마디. 좋은 소식은 물빛, 그 밖은 옅은 모래빛 — 둘 다 붉지 않다. */
.wc-say-note { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; font-size: 0.9rem; }
.wc-say-note.is-good { background: var(--wp--preset--color--water-soft); }
.wc-say-note.is-warn { background: #f6efe2; }

@media (max-width: 640px) {
	/* 좁은 화면에서는 카드가 곧 화면이다. 테두리를 남기되 여백을 줄이고,
	   단추는 폭을 채운다 — 엄지가 닿는 자리가 화면 아래쪽이다. */
	.wc-say { padding: 20px 0 48px; }
	.wc-say-card { padding: 26px 20px 24px; border-radius: 14px; }
	.wc-say-title { font-size: 1.3rem; }
	.wc-say-body { min-height: 200px; padding: 14px 15px; }
	/* 엄지가 닿는 자리가 화면 아래쪽이다. 단추가 폭을 채우고 숫자가 그 위로 올라간다. */
	.wc-say-row { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
	.wc-say-count { text-align: right; }
	.wc-say-send { width: 100%; }
}

/* 탈퇴하고 돌아온 사람에게 하는 인사. 오류가 아니므로 붉지 않다. */
.wc-left-note { margin: 18px auto 0; padding: 14px 16px;
	background: var(--wp--preset--color--water-soft); border-radius: 10px; }
.wc-left-note p { margin: 0; font-size: 0.92rem; line-height: 1.7; }

/* 얼마나 읽혔는지. **부제·지은이와 같은 결이되 한 단계 가볍다**(소유자, 2026-09-02 —
   「살짝 작은 글씨로」). 색으로 낮추려 했는데 `.wc-bd-facts` 가 이미 `ink-2` 이고 그보다
   옅은 토큰이 없어, 색을 또 적으면 **아무것도 바뀌지 않으면서 바꾼 것처럼 보인다.**
   그래서 크기로 낮춘다 — 0.78rem 의 한 단계 아래다. */
.wc-bd-reads { font-size: 0.72rem; }

/* ── 책갈피와 밑줄 ─────────────────────────────────────────────────────
 * **설명을 화면에 적지 않는다**(소유자, 2026-09-02). 고르면 단추가 뜨고 누르면
 * 그어진다. 그 이상 말하지 않으므로, 모양이 그 대신 말해야 한다.
 */

/* **글자 뒤에 칠한다.** 처음엔 글자 아래 선으로 만들었는데, 그건 관례가 아니라 내
   취향이었다(소유자 지적, 2026-09-02). Apple Books 도 Kindle 도 형광이 기본이고
   밑줄은 그중 한 선택지다.

   색은 **연하게** 잡는다 — 설교집 본문 위에 진한 형광을 얹으면 글이 안 읽힌다.
   그래서 색을 안 쓴 것이 아니라, 색을 이 밝기로 쓴다. */
:root {
	--wc-hl-y: #fdf0b8;
	--wc-hl-p: #fbd9e4;
	--wc-hl-b: #d6e8f7;
	--wc-hl-g: #d8eeda;
}

mark.wc-hl { color: inherit; border-radius: 2px; cursor: pointer; background: var(--wc-hl-y); }
mark.wc-hl[data-c="p"] { background: var(--wc-hl-p); }
mark.wc-hl[data-c="b"] { background: var(--wc-hl-b); }
mark.wc-hl[data-c="g"] { background: var(--wc-hl-g); }

/* 밑줄은 칠하지 않는다. Apple Books 의 여섯째 선택지와 같은 자리다. */
mark.wc-hl[data-c="u"] {
	background: none; border-radius: 0;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--water);
}

/* **어두운 화면에서는 같은 색을 못 쓴다.** 연한 형광 위의 밝은 글자는 안 읽힌다.
   같은 색을 어둡게 깔고 글자는 그대로 둔다. */
.wc-reader.wc-dark {
	--wc-hl-y: #57501f;
	--wc-hl-p: #55303c;
	--wc-hl-b: #26404f;
	--wc-hl-g: #2b4630;
}

/* 고르면 뜨는 알약. 색은 점으로 보이고 밑줄은 밑줄로 보인다 — 글로 설명하지 않는다.
 *
 * **`display` 를 적으면 `hidden` 이 진다.** `hidden` 의 기본 규칙(`display:none`)은
 * 브라우저가 가장 낮은 자리에서 주는 것이라, 클래스에 `display:flex` 를 적는 순간
 * 숨기라는 말이 무시된다 — 실제로 `pill.hidden` 이 참인데 화면에는 떠 있었다
 * (2026-09-02, 화면을 찍어 보고 알았다). 그래서 한 줄을 따로 둔다. */
.wc-mark-pill[hidden] { display: none; }

.wc-mark-pill {
	position: absolute; z-index: 60; display: flex; align-items: center; gap: 6px;
	padding: 7px 9px; border-radius: 12px;
	background: var(--wp--preset--color--ink); box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}
.wc-mark-pill .wc-pen {
	width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(255,255,255,0.28); background: var(--wc-hl-y);
}
.wc-mark-pill .wc-pen-p { background: var(--wc-hl-p); }
.wc-mark-pill .wc-pen-b { background: var(--wc-hl-b); }
.wc-mark-pill .wc-pen-g { background: var(--wc-hl-g); }

/* 밑줄은 색이 아니라 모양이다. 빈 알에 밑줄 하나. */
.wc-mark-pill .wc-pen-u {
	background: none; border-color: rgba(255,255,255,0.45);
	box-shadow: inset 0 -4px 0 -1px rgba(255,255,255,0.85);
}

.wc-mark-pill .wc-pen:hover,
.wc-mark-pill .wc-pen:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wc-mark-pill .wc-pen-x {
	border: 0; background: none; color: rgba(255,255,255,0.75); cursor: pointer;
	font: inherit; font-size: 0.9rem; line-height: 1; padding: 4px 6px; border-radius: 7px;
	margin-left: 2px; border-left: 1px solid rgba(255,255,255,0.18);
}
.wc-mark-pill .wc-pen-x:hover,
.wc-mark-pill .wc-pen-x:focus-visible { color: #fff; background: rgba(255,255,255,0.16); }

/* 책갈피 단추. 꽂혀 있으면 채워진다 — 굵게·어둡게와 같은 결이다. */
.wc-aa-bm svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linejoin: round; }
.wc-aa-bm.on svg { fill: currentColor; }

/* 목차 / 책갈피 탭. 책갈피를 보러 갈 새 화면을 만들지 않는다 — 다른 리더도 목차와
   같은 판에 둔다. */
.wc-rtabs { display: flex; gap: 4px; padding: 0 16px 10px; }
.wc-rtab {
	border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.85rem;
	color: var(--wp--preset--color--ink-2); padding: 6px 10px; border-radius: 8px;
}
.wc-rtab.on { background: var(--wp--preset--color--water-soft); color: var(--wp--preset--color--water); font-weight: 600; }

/* 책갈피 목록. **이름 대신 장 이름·꽂은 날·본문 조각**을 보여 준다 — 다른 리더가
   그렇게 한다. 빼는 단추는 줄 오른쪽 끝에 조용히 둔다: 지우는 일이 읽다가 손이
   스치는 자리에 있으면 안 된다. */
.wc-rbm { padding: 0 8px 16px; }
.wc-rbm-line { display: flex; align-items: center; }
.wc-rbm-item {
	display: block; flex: 1 1 auto; min-width: 0;
	padding: 11px 12px; border-radius: 10px; text-decoration: none; color: inherit;
}
.wc-rbm-item:hover, .wc-rbm-item:focus-visible { background: var(--wp--preset--color--water-soft); }
.wc-rbm-item b {
	display: flex; align-items: baseline; gap: 8px;
	font-size: 0.82rem; color: var(--wp--preset--color--water); font-weight: 600;
}
.wc-rbm-item b i {
	margin-left: auto; flex: none; font-style: normal; font-weight: 400;
	font-size: 0.76rem; color: var(--wp--preset--color--ink-2);
}
.wc-rbm-x {
	flex: none; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.82rem;
	color: var(--wp--preset--color--ink-2); padding: 8px 10px; border-radius: 8px; line-height: 1;
}
.wc-rbm-x:hover, .wc-rbm-x:focus-visible {
	color: var(--wp--preset--color--alert); background: var(--wp--preset--color--water-soft);
}
.wc-rbm-item span {
	display: block; margin-top: 3px; font-size: 0.88rem; line-height: 1.6;
	color: var(--wp--preset--color--ink-2);
	overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wc-rbm-none { margin: 12px; font-size: 0.88rem; color: var(--wp--preset--color--ink-2); }

/* 본문이 바뀌어 못 그린 밑줄. **조용히 버리지 않는다** — 버리면 그은 사람은 자기가
   안 그었다고 생각한다. */
/* `.wc-reader-page p` 가 더 세서 크기·여백을 가져가, 이 안내가 본문 글자 크기를 따라 커졌다. */
.wc-reader-page .wc-hl-lost {
	margin: 0 0 18px; padding: 10px 12px; border-radius: 8px; line-height: 1.6; text-align: left;
	background: var(--wp--preset--color--water-soft);
	font-size: 0.84rem; color: var(--wp--preset--color--ink-2);
}

/* 영어 화면의 자막 알림(`sermon-video.js`·`replays.js`). 재생기에 바짝 붙인다 — 떨어져
   있으면 무엇에 대한 말인지 흐려진다. 설교 영상은 아래 여백(34px)을 알림이 대신 진다. */
.wc-caption-note { margin-top: 10px; }
.wc-video + .wc-caption-note { margin: -24px 0 34px; }