@charset "utf-8";

/* ==========================================================================
   양정교회 홈페이지 — 단일 스타일시트 (확정시안)

   2026-07-14 Louis 채택. 참조: 수영로교회·부전교회. 풀블리드 영상 히어로,
   클린 헤더, 큰 세리프 타이포, 넉넉한 여백. 브랜드 네이비(#121e65) + 골드 포인트.

   - 인라인 스타일 금지. 모든 스타일은 이 파일에만 둔다. (CLAUDE.md 3절)
   - 외부 CDN 금지. 폰트도 assets/fonts/ 에 로컬 포함한다.
   - 고령층 배려: 기본 17px, 넉넉한 행간, 높은 명도 대비, 터치 영역 44px 이상.
   - 모바일 우선. 기본이 모바일이고 min-width 로 데스크톱을 덧씌운다.

   기존시안(_drafts/index2.php 전용)은 style2.css 에 보관되어 있다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 폰트 (전부 로컬. CDN 금지)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "NanumSquare";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/nanumsquarer.woff2") format("woff2");
}

@font-face {
  font-family: "NanumSquare";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/nanumsquareb.woff2") format("woff2");
}

@font-face {
  font-family: "NanumSquare";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/nanumsquareeb.woff2") format("woff2");
}

/* 나눔명조 400 은 뺐다 (2026-07-16).
 * var(--serif) 를 쓰는 규칙 24개가 **전부 font-weight 를 명시**하고 있고(800 이 23개, 700 이 1개)
 * 400 을 쓰는 규칙이 한 곳도 없었다. 즉 선언만 있고 아무도 안 부르는 502KB 였다.
 * 파일(assets/fonts/nanummyeongjo400.woff2)도 함께 지웠다.
 * ※ 앞으로 serif 를 쓸 때 font-weight 를 빼먹으면 400 을 찾다가 없어서 브라우저가
 *   700/800 을 합성(가짜 볼드)한다. serif 규칙에는 weight 를 반드시 적을 것. */

@font-face {
  font-family: "Nanum Myeongjo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/nanummyeongjo700.woff2") format("woff2");
}

@font-face {
  font-family: "Nanum Myeongjo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/nanummyeongjo800.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. 토큰
   -------------------------------------------------------------------------- */
:root {
  --ink: #10152e;          /* 본문 진한 잉크 */
  --navy: #121e65;         /* 브랜드 */
  --navy-deep: #0b1140;
  --gold: #d4b06a;         /* 다크 배경 위 포인트 */
  --gold-deep: #8a6d1f;    /* 라이트 배경 위 포인트 (대비 확보용) */
  --paper: #faf9f6;        /* 웜 오프화이트 */
  --text: #22283e;
  --text-soft: #5b617a;
  --line: #e6e4de;
  --white: #ffffff;
  --focus: #c8500a;

  --serif: "Nanum Myeongjo", "Noto Serif KR", serif;
  --sans: "NanumSquare", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", sans-serif;

  --wrap: 1200px;
  --gap: clamp(1rem, 4vw, 2rem);
  --r-lg: 20px;
  --r-md: 14px;
  --tap: 44px;

  --shadow-1: 0 2px 10px rgba(16, 21, 46, 0.06);
  --shadow-2: 0 14px 40px rgba(16, 21, 46, 0.14);
}

/* --------------------------------------------------------------------------
   3. 기초
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  word-break: keep-all;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

a {
  color: var(--navy);
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.3;
  color: var(--ink);
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gap);
  padding-right: var(--gap);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.8em 1.4em;
  background: var(--navy);
  color: #fff;
}

.skip-link:focus {
  left: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 등장 애니메이션. JS 없거나 reduced-motion 이면 항상 보임 */
.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .js .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   4. 헤더 — 히어로 위 투명, 스크롤 시 흰 배경
   -------------------------------------------------------------------------- */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.hd__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.7rem var(--gap);
}

.hd__logo img {
  display: block;
  height: 40px;
  width: auto;
  /* 로고 PNG 자체에 다크모드용 테두리가 있어 반전 처리하지 않는다.
     영상·흰 배경 양쪽에서 원본 그대로 쓴다. */
}

.hd.is-solid {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-1);
}

/* 데스크톱 GNB */
.hd__nav {
  display: none;
}

/* 모바일 메뉴 버튼 */
.hd__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s ease;
}

.hd.is-solid .hd__toggle,
.hd.is-open .hd__toggle {
  color: var(--ink);
}

.hd__bar,
.hd__bar::before,
.hd__bar::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.hd__bar {
  position: relative;
}

.hd__bar::before,
.hd__bar::after {
  content: "";
  position: absolute;
  left: 0;
}

.hd__bar::before { top: -7px; }
.hd__bar::after  { top: 7px; }

.hd.is-open .hd__bar { transform: rotate(45deg); }
.hd.is-open .hd__bar::before { transform: rotate(90deg); top: 0; }
.hd.is-open .hd__bar::after { opacity: 0; }

/* 모바일 오버레이 메뉴 */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: 5.5rem var(--gap) 2rem;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
}

.mnav.is-open {
  display: block;
}

.mnav__group {
  border-bottom: 1px solid var(--line);
}

.mnav__label {
  display: block;
  padding: 1rem 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

.mnav__sub {
  padding-bottom: 0.8rem;
}

.mnav__sub a {
  display: block;
  padding: 0.55rem 0 0.55rem 1rem;
  min-height: 40px;
  color: var(--text-soft);
  font-size: 1rem;
}

/* 준비 중 메뉴 항목 (config.php 의 'disabled' — href="#" + aria-disabled).
   흐리게 표시하고 눌리지 않게 한다. 페이지가 생기면 disabled 만 지우면 된다. */
.hd__sub a.is-pending,
.mnav__sub a.is-pending {
  opacity: 0.5;
  pointer-events: none;
}

.mnav__sub a:hover,
.mnav__sub a:focus {
  color: var(--navy);
}

/* 메뉴 열렸을 때 본문 스크롤 잠금 */
body.nav-lock {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. 히어로
   -------------------------------------------------------------------------- */
.hero2 {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy-deep);
}

.hero2__video,
.hero2__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero2__fallback {
  background: linear-gradient(160deg, #0b1140 0%, #121e65 60%, #1a2a8a 100%);
}

.hero2__shade {
  position: absolute;
  inset: 0;
  /* 영상에 밝은 장면이 있어 텍스트 대비 확보를 위해 오버레이를 충분히 어둡게 */
  background:
    linear-gradient(to bottom,
      rgba(11, 17, 64, 0.66) 0%,
      rgba(11, 17, 64, 0.48) 45%,
      rgba(11, 17, 64, 0.82) 100%);
}

.hero2__body {
  position: relative;
  z-index: 1;
  padding: 6rem var(--gap) 7rem;
  text-align: center;
  color: #fff;
}

.hero2__eyebrow {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: 0.35em 1.1em;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.hero2__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 3.6rem);
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero2__sub {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.88);
}

.hero2__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.7rem 1.7rem;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover,
.btn:focus {
  transform: translateY(-2px);
}

.btn--gold {
  background: var(--gold);
  color: #241c05;
}

.btn--gold:hover,
.btn--gold:focus {
  background: #e2c489;
}

/* 어두운 배경(히어로 영상 위) 전용. 흰 테두리+흰 글자라 밝은 배경에서는 안 보인다. */
.btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}

/* 밝은 배경용 외곽선 버튼. 하위 페이지의 흰/연회색 섹션에서 쓴다. */
.btn--outline {
  border: 1.5px solid var(--navy);
  color: var(--navy);
  background: transparent;
}

.btn--outline:hover,
.btn--outline:focus {
  background: var(--navy);
  color: #fff;
}

.btn--ghost:hover,
.btn--ghost:focus {
  background: rgba(255, 255, 255, 0.14);
}

/* 스크롤 안내 */
.hero2__scroll {
  position: absolute;
  bottom: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-align: center;
}

.hero2__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  margin: 0.5rem auto 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .hero2__scroll::after {
    animation: drop 1.8s ease-in-out infinite;
  }

  @keyframes drop {
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }
}

/* --------------------------------------------------------------------------
   6. 플로팅 퀵바 (히어로에 살짝 겹침)
   -------------------------------------------------------------------------- */
.quick2-zone {
  position: relative;
  z-index: 2;
  margin-top: -3.2rem;
}

.quick2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.quick2__item a,
.quick2__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 104px;
  padding: 1rem 0.5rem;
  text-align: center;
  color: var(--ink);
  border: 1px solid var(--line);
  margin: -1px 0 0 -1px; /* 경계선 겹침 정리 */
}

.quick2__item a:hover,
.quick2__item a:focus {
  background: var(--paper);
  color: var(--navy);
}

.quick2__icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--navy);
}

.quick2__label {
  font-size: 0.95rem;
  font-weight: 700;
}

.quick2__tel {
  grid-column: 1 / -1;
  background: var(--navy);
  color: #fff;
  border: 0;
}

.quick2__tel a {
  color: #fff;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.quick2__tel-note {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   7. 섹션 공통
   -------------------------------------------------------------------------- */
.sec {
  padding: clamp(3.2rem, 8vw, 6rem) 0;
}

.sec--paper {
  background: var(--paper);
}

.sec__head {
  max-width: 640px;
  margin: 0 auto clamp(1.8rem, 4vw, 3rem);
  text-align: center;
}

.sec__eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
}

.sec__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
}

.sec__desc {
  margin-top: 0.9rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   8. 소개 카드
   -------------------------------------------------------------------------- */
.cards2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.card2 {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card2:hover,
.card2:focus {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
}

.card2__img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card2:hover .card2__img {
  transform: scale(1.05);
}

.card2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 12, 34, 0.82) 0%, rgba(9, 12, 34, 0.05) 55%);
}

.card2__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.1rem 1.3rem;
  color: #fff;
}

.card2__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
}

.card2__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.8);
}

.card2__arrow {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  transition: background 0.25s ease;
}

.card2:hover .card2__arrow {
  background: var(--gold);
  border-color: var(--gold);
  color: #241c05;
}

.card2--pending {
  cursor: default;
}

/* --------------------------------------------------------------------------
   9. 예배 방송 3피처
   -------------------------------------------------------------------------- */
.feat2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.feat2__item {
  /* 그리드 항목의 기본 min-width:auto 는 카드 안의 가장 긴 낱말(영문 부제 WITNESS &
     EVENT, 또는 설명문의 긴 합성어)만큼을 최소폭으로 고집한다 — .news2__col 과 같은
     원인으로, 폰트를 150% 키운 태블릿 폭(768·810px)에서 3번째 카드가 그 낱말 폭만큼
     그리드 트랙을 넓혀 페이지가 48px 옆으로 삐져나갔다(2026-07-23 실측, Chromium·
     WebKit 동일 재현). 0 으로 풀어야 칸이 먼저 줄고 안의 글자는 keep-all/overflow-wrap
     이 마지막 수단으로 꺾는다. */
  min-width: 0;
  padding: 1.8rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feat2__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
}

.feat2__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  background: var(--navy);
  color: var(--gold);
}

.feat2__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feat2__title {
  font-size: 1.2rem;
  font-weight: 800;
}

.feat2__en {
  margin-left: 0.45em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

.feat2__desc {
  margin-top: 0.6rem;
  font-size: 0.96rem;
  color: var(--text-soft);
}

.feat2__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 0.4rem;
  font-weight: 700;
  color: var(--navy);
}

.feat2__more::after {
  content: "→";
  margin-left: 0.4em;
  transition: transform 0.2s ease;
}

.feat2__more:hover::after,
.feat2__more:focus::after {
  transform: translateX(4px);
}

.feat2__more.is-pending {
  color: var(--text-soft);
  cursor: default;
}

.feat2__more.is-pending::after {
  content: "";
}

/* 카드 전체 클릭 (2026-07-17 Louis 요청): '바로가기' 링크의 클릭 영역을 카드 전체로 편다.
   링크는 기존 하나 그대로(마크업 무변경·JS 불요) — ::after 는 화살표가 쓰고 있어
   ::before 를 투명 오버레이로 쓴다. 카드 위 어디를 호버해도 링크 호버로 잡혀
   화살표 애니메이션도 함께 산다. 준비 중(is-pending) 카드는 펴지 않는다. */
.feat2__item {
  position: relative;
}

.feat2__more:not(.is-pending)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* --------------------------------------------------------------------------
   10. 표어 밴드
   -------------------------------------------------------------------------- */
.motto {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) 0;
  background-image: url("/assets/img/gallery/gallery02.jpg");
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #fff;
}

.motto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 17, 64, 0.78);
}

.motto__inner {
  position: relative;
  z-index: 1;
}

.motto__label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  color: var(--gold);
}

.motto__text {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.2vw, 2.7rem);
  line-height: 1.5;
  color: #fff;
}

/* --------------------------------------------------------------------------
   11. 갤러리
   -------------------------------------------------------------------------- */
.gal2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

.gal2__item {
  overflow: hidden;
  border-radius: var(--r-md);
  line-height: 0;
}

/* 사진 전체가 갤러리 목록으로 가는 링크 (2026-07-22 Louis). */
.gal2__link {
  display: block;
  height: 100%;
}

.gal2__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gal2__item:hover img {
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   12. YouTube 다크 섹션
   -------------------------------------------------------------------------- */
.yt2 {
  background: var(--navy-deep);
  color: #fff;
}

.yt2 .sec__title,
.yt2 .sec__eyebrow {
  color: #fff;
}

.yt2 .sec__eyebrow {
  color: var(--gold);
}

.yt2__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.yt2__desc {
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.9rem;
}

.yt2__text {
  text-align: center;
}

.video-wrap2 {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-2);
}

.video-wrap2 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 유튜브 파사드 — 누르기 전까지 유튜브를 안 부른다. 누르면 JS 가 이 자리를 iframe 으로 바꾼다.
   (index.php 의 주석 참고. iframe 을 그냥 두면 열자마자 유튜브 스크립트 3MB 를 받는다) */
.ytf {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
}

.ytf__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ytf:hover .ytf__poster,
.ytf:focus-visible .ytf__poster {
  transform: scale(1.03);
}

/* 어둡게 깔아 재생 버튼과 제목이 사진 위에서도 읽히게 한다. */
.ytf::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.ytf__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(3.6rem, 9vw, 4.6rem);
  z-index: 1;   /* ::after 그늘 위로 */
}

.ytf__play svg {
  display: block;
  width: 100%;
  height: auto;
}

.ytf__play-bg {
  fill: #212121;
  opacity: 0.82;
  transition: fill 0.2s ease, opacity 0.2s ease;
}

.ytf__play-tri {
  fill: #fff;
}

.ytf:hover .ytf__play-bg,
.ytf:focus-visible .ytf__play-bg {
  fill: #f00;      /* 유튜브 재생버튼 관용 */
  opacity: 1;
}

.ytf__label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 1.4rem 1.2rem 1rem;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.ytf:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   13. 소식 3단
   -------------------------------------------------------------------------- */
.news2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.news2__col {
  /* 그리드 항목의 기본 min-width:auto 는 '가장 긴 낱말'만큼을 최소폭으로 고집한다.
     body 의 keep-all 때문에 긴 곡명·제목 한 낱말이 통짜가 되면 3열(768px)에서 칸이
     못 줄어들어 페이지가 옆으로 7px 삐져나갔다(실측). 0 으로 풀어야 칸이 먼저 줄고
     안의 글자는 overflow-wrap 이 마지막 수단으로 꺾는다. */
  min-width: 0;
  padding: 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.news2__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

.news2__title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
}

.news2__title .more {
  margin-left: 0.7rem;   /* 제목에 바싹 붙지 않게 띄운다 (2026-07-16 Louis) */
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-deep);
  white-space: nowrap;
}

.news2__empty {
  margin-top: 0.8rem;
  padding: 1.6rem 1rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 0.93rem;
  color: var(--text-soft);
}

/* 소식 3단 목록 (최근 설교 / 최근 찬양) */
.news2__list {
  margin-top: 0.6rem;
}

.news2__list li + li {
  border-top: 1px solid var(--line);
}

.news2__list a {
  display: block;
  padding: 0.7rem 0.2rem;
  min-height: var(--tap);
}

.news2__item-title {
  display: block;
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news2__list a:hover .news2__item-title,
.news2__list a:focus .news2__item-title {
  color: var(--navy);
}

.news2__item-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

/* 소식 3단 가운데 칸: 최신 주보 2건 (2026-07-16 Louis: 1개 -> 2개) */
.news2__paper {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
}

.news2__paper + .news2__paper {
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.news2__paper-thumb {
  flex: none;
  width: clamp(96px, 30%, 128px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #eef1f7;
}

.news2__paper-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.news2__paper-meta strong {
  display: block;
  font-size: 1.02rem;
  color: var(--text);
  word-break: keep-all;
}

.news2__paper-meta span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.news2__paper-meta .news2__paper-go {
  font-weight: 700;
  color: var(--gold-deep);
}

.news2__paper:hover .news2__paper-meta strong,
.news2__paper:focus .news2__paper-meta strong {
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   14. 협력기관
   -------------------------------------------------------------------------- */
/* 협력기관 3곳(총회·평양노회·기독공보) 한 줄. 2026-07-16 Louis: 중복 3개 제거로 6→3. */
.partners2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
}

.partners2 img {
  max-height: 44px;
  max-width: 100%;   /* 좁은 화면에서 로고가 칸을 넘지 않게 */
  width: auto;
  margin: 0 auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.partners2 a:hover img,
.partners2 a:focus img {
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   15. 푸터
   -------------------------------------------------------------------------- */
.ft {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.93rem;
}

.ft__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
}

.ft__logo img {
  height: 40px;
  width: auto;
  /* 로고 PNG 의 다크모드 테두리를 그대로 쓴다. 반전하지 않는다. */
}

.ft__addr {
  margin-top: 1rem;
  font-style: normal;
  line-height: 1.9;
}

.ft a {
  color: #fff;
}

.ft a:hover,
.ft a:focus {
  color: var(--gold);
}

.ft__title {
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.ft__nav li {
  margin-bottom: 0.35rem;
}

.ft__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.82);
}

.ft__bottom {
  padding: 1.2rem 0 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   16. 태블릿 (768px~)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .quick2 {
    grid-template-columns: repeat(4, 1fr) 1.4fr;
  }

  .quick2__tel {
    grid-column: auto;
  }

  .cards2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .feat2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .gal2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .news2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   17. 데스크톱 (1024px~)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hd__inner {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .hd__logo img {
    height: 46px;
  }

  .hd__toggle {
    display: none;
  }

  .mnav {
    display: none !important;
  }

  .hd__nav {
    display: block;
  }

  .hd__menu {
    display: flex;
    gap: 0.2rem;
  }

  .hd__item {
    position: relative;
  }

  .hd__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0.4rem 1.15rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    transition: color 0.3s ease;
  }

  .hd.is-solid .hd__link {
    color: var(--ink);
  }

  .hd__link:hover,
  .hd__link:focus,
  .hd__item.is-current .hd__link {
    color: var(--gold);
  }

  .hd.is-solid .hd__link:hover,
  .hd.is-solid .hd__link:focus,
  .hd.is-solid .hd__item.is-current .hd__link {
    color: var(--navy);
  }

  .hd__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    min-width: 200px;
    padding: 0.5rem 0;
    background: var(--white);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
  }

  .hd__item:hover .hd__sub,
  .hd__item:focus-within .hd__sub {
    display: block;
  }

  /* 항목마다 글자 수가 달라도 왼쪽이 같은 자리에서 시작하게 한다.
     (가운데 정렬이면 '설교말씀 영상'과 '찬양대 영상'의 시작점이 어긋난다) */
  .hd__sub a {
    display: block;
    padding: 0.6rem 1.3rem;
    text-align: left;
    color: var(--text);
    white-space: nowrap;
  }

  .hd__sub a:hover,
  .hd__sub a:focus {
    background: var(--paper);
    color: var(--navy);
  }

  /* 카드: 첫 카드 크게 + 미디어 세로, 아래 3장 */
  .cards2 {
    grid-template-columns: repeat(6, 1fr);
  }

  .card2--intro   { grid-column: span 4; }
  .card2--media   { grid-column: span 2; grid-row: span 2; }
  .card2--board   { grid-column: span 2; }
  .card2--rearing { grid-column: span 2; }
  .card2--mission { grid-column: span 2; }

  .card2__img {
    height: 250px;
  }

  .card2--intro .card2__img {
    height: 320px;
  }

  .card2--media .card2__img {
    height: 100%;
    min-height: 100%;
  }

  .card2--media {
    display: flex;
  }

  .yt2__grid {
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
  }

  .yt2__text {
    text-align: left;
  }

  .yt2__text .sec__head {
    margin: 0 0 1.2rem;
    text-align: left;
    max-width: none;
  }

  .gal2 {
    grid-template-columns: repeat(4, 1fr);
  }

  .gal2__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gal2__item:first-child img {
    aspect-ratio: auto;
  }

  .ft__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
  }
}

/* --------------------------------------------------------------------------
   19. 하위 페이지 공통 (히어로 없는 페이지)
   -------------------------------------------------------------------------- */
/* 하위 페이지 헤더: 처음부터 흰 배경으로 고정(sticky), 로고·메뉴는 진한 색. */
.hd--locked {
  position: sticky;
}

.page-sub .hd__logo img {
  /* 흰 배경이므로 반전 없이 원본(다크모드 테두리 포함) 그대로 */
  filter: none;
}

/* 페이지 제목 밴드 */
.page-head {
  background:
    linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 60%, var(--brand-light, #2b3a8f) 120%);
  color: #fff;
  padding: clamp(2.2rem, 6vw, 3.6rem) 0;
  text-align: center;
}

.page-head__eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.page-head__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  color: #fff;
}

.page-head__desc {
  margin-top: 0.7rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
}

/* 섹션 상단 전환 세그먼트 (page-head 네이비 띠 위). 형제 페이지를 목록/본문 위에서 바로 오간다.
   영상 3종(media_switch.php)과 교회소개 4종(intro_switch.php)이 공용 — 렌더는 section_switch.php.
   흰 배경의 카테고리 탭과 겹쳐 보이지 않게 네이비 위에 얹는다. */
.page-switch {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin-top: clamp(1rem, 3vw, 1.5rem);
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.page-switch__item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 clamp(0.9rem, 3.5vw, 1.4rem);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.page-switch__item:hover,
.page-switch__item:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* 현재 페이지: 금색으로 채워 확실히 구분. 링크가 아니라 span 이라 눌리지 않는다. */
.page-switch__item.is-on {
  background: var(--gold);
  color: var(--navy-deep);
}

/* --------------------------------------------------------------------------
   20. 설교 목록 (media_sermon)
   -------------------------------------------------------------------------- */
/* 카테고리 탭. 모바일에서는 7개가 여러 줄로 접히므로 작게 두고, 768px 이상에서 키운다. */
.sermon-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-bottom: 1.6rem;
}

.sermon-tabs a {
  display: inline-flex;
  align-items: center;
  /* --tap(44px) 미달이었다(2026-07-21 감사) — 지금은 cat_tabs.php 만 이 클래스를 쓴다
     (nav.cat-tabs.sermon-tabs), 그래서 이 한 줄만으로 안전하게 맞춘다. */
  min-height: var(--tap);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  /* 모바일은 768px 이상보다 1px 작게. calc 로 둔 건 '1px 줄였다'는 의도를 남기기 위함이다. */
  font-size: calc(0.85rem - 1px);
  font-weight: 700;
  color: var(--text-soft);
  background: var(--white);
}

/* 탭의 건수. 모바일에서는 숨긴다 — 탭이 7개까지 되는데 숫자가 자리만 차지한다.
   숨겨도 바로 아래 '전체 1011건 · 1/51 페이지' 줄에 같은 정보가 있다. */
.tab__n {
  display: none;
}

.sermon-tabs a:hover,
.sermon-tabs a:focus {
  border-color: var(--navy);
  color: var(--navy);
}

.sermon-tabs a.is-on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.sermon-count {
  margin: 0 0 1.4rem;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.sermon-count strong {
  color: var(--navy);
}

/* 목록 */
.sermon-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.sermon-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.4rem;
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sermon-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* 카드 전체를 눌러도 재생된다(유튜브가 있는 카드만). 안의 링크·버튼은 제 동작을 유지한다. */
.sermon-card.is-playable {
  cursor: pointer;
}

/* 설교자 사진(기존 XE 목록 승계).
   모바일에서는 좁은 화면을 텍스트에 다 쓰고 사진은 숨긴다. 768px 이상에서 본문 오른쪽에 붙는다.
   영상 임베드(.sv-embed)는 이 행 밖에 있어 재생 시 카드 전체 폭을 그대로 쓴다. */
.sermon-card__photo,
.sermon-card__photo--none,
.choir-card__photo,
.choir-card__photo--none {
  display: none;
}

.sermon-card__body {
  min-width: 0; /* 긴 제목이 사진을 밀어내지 않도록 */
}

.sermon-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.badge-cat {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.75em;
  border-radius: 100px;
  background: var(--brand-tint, #eef0f8);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 800;
}

.sermon-card__date {
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

/* 행사명은 길이와 무관하게 항상 날짜 아래 제 줄에 온다.
   (wrap 플렉스에서 basis 100% 면 앞 줄에 못 끼고 다음 줄로 밀린다)
   값이 없으면 요소 자체가 출력되지 않아 줄도 생기지 않는다. */
.sermon-card__event {
  flex-basis: 100%;
  color: var(--gold-deep);
  font-size: 0.85rem;
  font-weight: 700;
}

.sermon-card__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.sermon-card__meta {
  color: var(--text-soft);
  font-size: 0.96rem;
  margin: 0 0 1rem;
}

.sermon-card__meta .dot {
  margin: 0 0.5em;
  color: var(--line);
}

/* 설교자 소속(외부 강사·타 교회). 이름 뒤 괄호 — 예) 김두호 목사 (산상교회). 2026-07-16 Louis 지정 */
.sermon-card__org {
  color: var(--text-soft);
}

/* 주차(2026년 N월 N째주). 날짜 옆에 옅게. */
.sermon-card__week {
  color: var(--text-soft);
  font-size: 0.85rem;
}

/* 액션 버튼 */
.sermon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.s-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap);
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--navy);
  background: var(--white);
  cursor: pointer;
}

.s-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-btn:hover,
.s-btn:focus {
  border-color: var(--navy);
  background: var(--paper);
}

.s-btn--play {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.s-btn--play svg { fill: #fff; stroke: none; }

.s-btn--play:hover,
.s-btn--play:focus {
  background: var(--navy-deep);
  color: #fff;
}

/* 다운로드 링크(외부 http) */
.s-btn--dl { color: var(--text-soft); }

/* 영상 파일은 1GB 내외라 모바일에서는 숨긴다. 영상은 유튜브(영상 보기)로 보고,
   음성 다운로드만 남긴다. 768px 이상에서 다시 노출. */
.s-btn--video { display: none; }

/* 클릭 시 로드되는 유튜브 임베드 자리 */
.sv-embed:not(:empty) {
  position: relative;
  margin-top: 1rem;
  padding-top: 56.25%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
}

.sv-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 페이지네이션 */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2.2rem;
}

.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 700;
  color: var(--text);
  background: var(--white);
}

.pager a:hover,
.pager a:focus {
  border-color: var(--navy);
  color: var(--navy);
}

.pager .is-cur {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.pager .is-off {
  color: var(--line);
  background: var(--paper);
}

/* 페이지 생략 표지("…")는 비활성 컨트롤이 아니라 정보 요소다 — 컨트롤에 허용되는
   낮은 대비를 그대로 쓰면 실측 1.21:1 로 고령 사용자에게 빈 칸처럼 보인다.
   text-soft 로 올린다(대비 6.11:1, 2026-07-21 감사). */
.pager .is-ellipsis {
  color: var(--text-soft);
}

@media (min-width: 768px) {
  .sermon-card {
    padding: 1.5rem 1.8rem;
  }
  .sermon-card__title {
    font-size: 1.5rem;
  }
  .sermon-tabs {
    gap: 0.5rem;
  }
  .sermon-tabs a {
    /* min-height 는 기본값(--tap, 44px)을 그대로 쓴다 — 2026-07-21 감사 전엔 40px 로
       줄여 데스크톱도 --tap 미달이었다. */
    padding: 0.4rem 1.1rem;
    font-size: 0.95rem;
  }
  /* 넓은 화면에서는 건수를 다시 보여준다. */
  .tab__n {
    display: inline;
  }
  .s-btn--video {
    display: inline-flex;
  }

  /* 설교자 사진: 본문 오른쪽. 보이는 틀을 4:5 세로형으로 고정한다.
     원본은 크기가 제각각(19종)이고 대부분 정사각형인데, 목록에 정사각형이 줄줄이 서면
     답답해 보인다. object-fit: cover 라 찌그러지지 않고 넘치는 쪽이 잘린다
     (정사각형 -> 4:5 면 좌우가 잘린다). 원본 파일은 건드리지 않는다 — 보이는 것만 자른다.
     세로는 원본 전체가 다 들어오므로 object-position 은 기본값(가운데)이면 된다.
     사진 없는 설교자는 같은 틀의 빈 칸을 둬서 카드 모양이 흐트러지지 않게 한다. */
  .sermon-card__row {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
  }
  .sermon-card__body {
    flex: 1 1 auto;
  }
  .sermon-card__photo,
  .sermon-card__photo--none {
    display: block;
    flex: 0 0 auto;
    width: 130px;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
  }
  .sermon-card__photo {
    object-fit: cover;
  }
  .sermon-card__photo--none {
    background: var(--paper);
    border: 1px solid var(--line);
  }

  /* 찬양대 사진: 설교자 사진과 같은 자리·같은 방식이되 **1:1 을 유지**한다.
     단체사진이라 세로(4:5)로 자르면 양옆 사람이 잘려나간다. 원본도 220x220 / 400x400 정사각형이다.
     단체사진은 인물이 작게 찍히므로 폭을 설교자 사진(130/150)보다 넓게 잡는다. */
  .choir-card__photo,
  .choir-card__photo--none {
    display: block;
    flex: 0 0 auto;
    width: 160px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-md);
  }
  .choir-card__photo {
    object-fit: cover;
  }
  .choir-card__photo--none {
    background: var(--paper);
    border: 1px solid var(--line);
  }
}

@media (min-width: 1024px) {
  .sermon-card__photo,
  .sermon-card__photo--none {
    width: 150px;
  }
  .choir-card__photo,
  .choir-card__photo--none {
    width: 185px;
  }
}

/* --------------------------------------------------------------------------
   21. 인사 말씀 (intro_greeting)
   -------------------------------------------------------------------------- */
/* 표어 + 이미지. 모바일은 세로로 쌓고, 768px 이상에서 나란히 놓는다. */
.greet {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}

.greet__motto {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.45;
  color: var(--navy);
  margin: 0 0 1.2rem;
}

.greet__lead {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.9;
  margin: 0;
}

.greet__sign {
  margin: 1.4rem 0 0;
  font-weight: 800;
  color: var(--ink);
}

.greet__sign::before {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: 0.9rem;
  background: var(--gold);
}

.greet__img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r-lg);
}

/* 네 가지 공동체 */
.comm {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.comm__item {
  position: relative;
  padding: 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* 왼쪽 금색 띠로 네 항목을 한 묶음으로 보이게 한다. */
.comm__item::before {
  content: '';
  position: absolute;
  top: 1.6rem;
  bottom: 1.6rem;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
}

.comm__no {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
}

.comm__name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0 0 0.7rem;
}

.comm__name strong {
  color: var(--navy);
  font-weight: 800;
}

.comm__body {
  margin: 0;
  color: var(--text);
  line-height: 1.85;
}

/* 초대 문구. 원문은 네 문단이 각각 "양정교회로 오십시오" 로 끝나는데,
   네 번 반복하면 읽기 피곤해서 한 번만 크게 둔다. */
.comm__invite {
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--navy);
}

.greet__next {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .greet {
    grid-template-columns: 1fr auto;
  }
  .greet__img {
    max-width: 320px;
  }
  .comm {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
  .comm__item {
    padding: 1.9rem 1.8rem;
  }
}

@media (min-width: 1024px) {
  .greet__img {
    max-width: 380px;
  }
}

/* --------------------------------------------------------------------------
   22. 교회 연혁 (intro_history)
   -------------------------------------------------------------------------- */
.hist__intro {
  max-width: 780px;
  margin: 0 auto;
  color: var(--text-soft);
  line-height: 1.95;
  /* 양쪽 정렬. body 의 keep-all 과 함께 쓰므로 좁은 화면에서 어절 사이가
     벌어질 수 있다 — 360px 실측으로 과도한 벌어짐 없음을 확인하고 넣었다. */
  text-align: justify;
}

.hist__stat {
  margin: 1.6rem 0 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.hist__stat strong {
  color: var(--navy);
}

/* 연도 묶음. 원본은 211행짜리 <table> 이었지만 표로 만들지 않았다 —
   실제 구조가 '표'가 아니라 '시간순 목록'이고, 표는 모바일에서 읽기 어렵다. */
/* 연대 바로가기(#d1950 등)로 점프할 때 sticky 헤더에 연도 제목이 가리지 않게 (2026-07-27) */
.hist__year {
  scroll-margin-top: 5.2rem;
}

.hist__year + .hist__year {
  margin-top: clamp(2rem, 5vw, 3.2rem);
}

/* 연대 바로가기 pill 줄 — 머리글의 기록 통계 아래 (2026-07-27 Louis).
   pill 모양은 .sermon-tabs 상속, 여기선 자리만 잡는다. */
.hist__decades {
  margin: 1.3rem 0 0;
}

.hist__ytitle {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  color: var(--navy);
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--navy);
  margin: 0 0 1.2rem;
}

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

/* 세로선 + 점으로 시간의 흐름을 보이게 한다. */
.hist__item {
  position: relative;
  padding: 0 0 1.3rem 1.3rem;
  border-left: 2px solid var(--line);
}

.hist__item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.hist__item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0.45rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--paper);
}

.hist__date {
  margin: 0 0 0.2rem;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.hist__text {
  margin: 0;
  line-height: 1.8;
  color: var(--text);
}

.hist__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
}

/* 사진·외부링크 버튼. 본문과 구분되게 작은 알약으로. */
.hist__photo,
.hist__ext {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

.hist__photo:hover,
.hist__photo:focus,
.hist__ext:hover,
.hist__ext:focus {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.hist__photo svg,
.hist__ext svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hist__ext {
  color: var(--text-soft);
}

/* 라이트박스 */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 10, 24, 0.92);
}

.lb[hidden] {
  display: none;
}

.lb__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.lb__img {
  display: block;
  max-width: 100%;
  /* 캡션 자리를 뺀 높이. 세로로 긴 사진도 화면 안에 들어온다. */
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  background: #000;
  /* 넘길 때 새 사진이 옆에서 슬라이드+페이드로 들어온다(2026-07-24 Louis).
     transform·opacity 만 움직여 GPU 합성 — 레이아웃/페인트 없음. 실제 값 토글은
     main.js lbShow 가 하고, 여는 순간(방향 없음)엔 트랜지션을 꺼 그냥 나타난다. */
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  /* 어르신·멀미 민감 사용자: 슬라이드 없이 즉시 교체 (JS 도 함께 건너뛴다). */
  .lb__img {
    transition: none;
  }
}

.lb__cap {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  text-align: center;
}

.lb__close {
  position: absolute;
  top: clamp(0.6rem, 2vw, 1.4rem);
  right: clamp(0.6rem, 2vw, 1.4rem);
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.lb__close:hover,
.lb__close:focus {
  background: rgba(255, 255, 255, 0.24);
}

/* 이전/다음 사진 넘김 화살표 (JS 가 주입 — main.js 라이트박스 블록).
   사진 위에 얹히므로 어두운 반투명 원 + 흰 글리프로 밝은 사진에서도 보이게 한다. */
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(var(--tap), 9vw, 3.2rem);
  height: clamp(var(--tap), 9vw, 3.2rem);
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 28, 0.5);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb__nav--prev {
  left: clamp(0.4rem, 2vw, 1.4rem);
}

.lb__nav--next {
  right: clamp(0.4rem, 2vw, 1.4rem);
}

.lb__nav:hover,
.lb__nav:focus {
  background: rgba(10, 12, 28, 0.78);
}

.lb__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.lb__nav[hidden] {
  display: none;
}

@media (min-width: 768px) {
  /* 날짜를 왼쪽에 고정폭으로 두면 눈이 세로로 훑기 쉽다. */
  .hist__item {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0 1rem;
    padding-left: 1.6rem;
  }
  .hist__date {
    margin: 0;
    text-align: right;
    padding-top: 0.05rem;
  }
}

/* --------------------------------------------------------------------------
   23. 영상 목록 하단 '더 알아보기' (includes/media_next.php)
   -------------------------------------------------------------------------- */
.mnext {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 카드 전체가 링크다. 안에 다른 링크가 없으므로 a 로 감싸도 중첩 문제가 없다
   (설교 카드는 안에 버튼·링크가 있어서 a 로 감쌀 수 없었던 것과 다르다). */
.mnext__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.mnext__link:hover,
.mnext__link:focus {
  border-color: var(--navy);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.mnext__label {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--navy);
}

.mnext__desc {
  grid-column: 1;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.mnext__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.3rem;
  color: var(--gold-deep);
  transition: transform 0.25s ease;
}

.mnext__link:hover .mnext__arrow,
.mnext__link:focus .mnext__arrow {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .mnext {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   24. 예배 안내 (intro_service)
   -------------------------------------------------------------------------- */
/* 성구. 장식용 큰 따옴표는 aria 에 안 잡히게 ::before 로 넣는다. */
.svc__verse {
  margin: 0 0 clamp(1.8rem, 5vw, 2.8rem);
  padding: 0;
  text-align: center;
}

.svc__verse blockquote {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.85rem);
  line-height: 1.75;
  color: var(--navy);
}

.svc__verse blockquote::before {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 auto 1.4rem;
  background: var(--gold);
}

.svc__verse figcaption {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-deep);
}

.svc__lead {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.9;
}

/* 시간표. 좁은 화면은 카드로 쌓고, 768px 이상에서 표처럼 한 줄로 편다. */
.svc {
  display: grid;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc__item {
  display: grid;
  grid-template-columns: auto 1fr;
  /* 아이콘이 이름 첫 줄에 맞아야 한다. center 면 3줄 한가운데에 떠서 어디에도 안 붙어 보인다. */
  align-items: start;
  gap: 0.3rem 1rem;
  padding: 1.3rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

/* 아이콘 없는 교육교회는 첫 열을 지운다. */
.svc--edu .svc__item {
  grid-template-columns: 1fr;
}

.svc__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  grid-row: span 2;   /* 이름 + 시간·장소 한 줄(2026-07-17 모바일 3줄 압축) */
  border-radius: 50%;
  background: var(--navy);
}

.svc__svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--navy);
}

/* 영문 부제와 대상(연령)은 이름 아래 작은 줄로 붙인다. */
.svc__en,
.svc__target {
  display: block;
  margin-top: 0.25rem;
  font-weight: 700;
}

.svc__en {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

.svc__target {
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* 시간·장소 묶음. 모바일에서는 한 줄로 흐른다: "주일 09:00 대예배실 (3층)"
   (2026-07-17 Louis: 카드가 너무 길어 3줄로 압축 — 이름/영문/시간·장소).
   좁아서 안 들어가면 flex-wrap 이 자연스럽게 줄을 나눈다. */
.svc__meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.6em;
  margin: 0;
}

.svc--edu .svc__meta {
  grid-column: 1;
}

.svc__time,
.svc__place {
  margin: 0;
}

/* 모바일은 살짝 작게 — '수요일 19:30 대예배실 (3층)' 이 360px 한 줄에 들어가는 크기다.
   768px+ 에서 원래 크기로 되돌린다. */
.svc__time {
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;   /* '주일 09:00' 은 항상 한 덩이 */
}

.svc__time strong {
  font-weight: 800;
  color: var(--ink);
}

.svc__day {
  color: var(--text-soft);
  margin-right: 0.15em;
}

.svc__place {
  font-size: 0.9rem;
  color: var(--text-soft);
}

.svc__floor::before {
  content: '(';
}

.svc__floor::after {
  content: ')';
}

@media (min-width: 768px) {
  /* 아이콘 | 이름 | 시간 | 장소 로 편다.
     열 너비를 rem 으로 못박으면 이름 열이 남는 폭을 다 먹어서 이름과 시간 사이가 휑하게 뜬다.
     비율로 나눠 셋이 같이 늘고 줄게 한다. */
  .svc__item {
    grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 1.2rem;
    padding: 1.15rem 1.6rem;
  }
  .svc--edu .svc__item {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .svc__icon {
    grid-row: auto;
  }
  /* 래퍼를 녹여 시간·장소가 다시 svc__item 그리드의 두 열이 되게 한다(기존 표 배치 유지). */
  .svc__meta {
    display: contents;
  }
  /* 시간을 훑어 내려가는 페이지다. 가운데 정렬하면 눈이 좌우로 흔들려 읽기 나쁘다. 왼쪽에 고정한다. */
  .svc__time,
  .svc__place {
    grid-column: auto;
    text-align: left;
  }
  .svc__day {
    display: block;
    min-width: 0;
    margin-right: 0;
    margin-bottom: 0.15rem;
    font-size: 0.85rem;
  }
  .svc__time {
    font-size: 1.05rem;
    white-space: normal;
  }
  .svc__place {
    font-size: 0.95rem;
  }
}

@media (min-width: 1024px) {
  .svc__item {
    padding: 1.3rem 2rem;
  }
  .svc__name {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   25. 찾아오시는 길 (intro_map)
   -------------------------------------------------------------------------- */
/* 모바일 우선. 여기까지는 전부 1열이고, 768px 부터 2열로 편다. */

.map__svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 주소 · 연락처 · 길찾기 --- */
.map__top {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.map__addr-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
}

.map__addr-label + .map__addr,
.map__addr-label + .map__tel {
  margin: 0.5rem 0 1.6rem;
}

.map__addr {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  line-height: 1.5;
  word-break: keep-all;   /* 한글이 낱글자로 쪼개지지 않게 */
  /* 줄을 고르게 나눠 '양지로 / 11번길' 처럼 도로명 한가운데가 끊기는 것을 막는다.
     지원 안 하는 브라우저는 그냥 평소대로 흐른다(깨지지 않는다). */
  text-wrap: balance;
}

/* 우편번호는 주소의 부가 정보다.
 * ★ font-family 를 반드시 명시한다. 부모 .map__addr 이 serif(나눔명조)라 안 적으면 상속되는데,
 *   명조에는 400 이 없다(502KB 라 뺐다). 그러면 브라우저가 가장 가까운 명조 700(577KB)을 받는다
 *   — 글자 7개('[47222]') 때문에 577KB 다. 실제로 그 사고가 났었다.
 *   sans(나눔스퀘어 400)는 body 가 이미 받아 둔 폰트라 추가 다운로드가 0 이고,
 *   부가 정보를 연하게 보이려던 원래 의도에도 맞는다. */
.map__zip {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.82em;
  color: var(--text-soft);
}

.map__addr-sub {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-soft);
}

/* 눌러서 바로 거는 링크다. 손가락 기준 44px(--tap)를 확보한다.
   글자 높이만으로는 34px 밖에 안 나와 어르신이 놓치기 쉽다. */
.map__tel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  color: var(--navy);
  border-bottom: 2px solid transparent;
}

.map__tel a:hover,
.map__tel a:focus {
  border-bottom-color: var(--navy);
}

.map__route-label {
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
}

.map__routes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* 길찾기 버튼. .btn 을 쓰지 않는 이유: 외부 링크 아이콘이 붙고 크기가 작아
   본문 안에서 .btn--gold 만큼 강하면 안 된다. 터치 영역(--tap)은 지킨다. */
.map__route {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.map__route:hover,
.map__route:focus {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.map__ext {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* --- 사진 --- */
.map__photo {
  margin: 0;
}

.map__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.map__photo figcaption {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-soft);
  text-align: center;
}

.map__photo--wide {
  max-width: 900px;
  margin: 0 auto;
}

/* --- 지도 임베드 --- */
/* 카카오 위젯이 자기 높이를 인라인으로 잡으므로 우리는 폭과 테두리만 준다. */
.map__embed {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  background: var(--white);
}

.map__embed .root_daum_roughmap {
  width: 100% !important;   /* 위젯이 인라인 width 를 박는다. 반응형을 위해 덮는다. */
}

/* 위젯이 못 떴을 때 빈 칸이 덜렁 남지 않게 최소 높이를 준다. */
.map__embed:empty,
.map__embed .root_daum_roughmap:empty {
  min-height: 220px;
}

.map__embed-note {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--text-soft);
  text-align: center;
}

.map__embed-note a {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

/* --- 대중교통 --- */
.map__ways {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
}

.map__way {
  padding: clamp(1.4rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}

.map__way-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.25rem;
}

/* 원형 뱃지. 구 사이트가 이미지로 갖고 있던 주황(지하철)/파랑(버스) 원을 CSS 로 옮겼다. */
.map__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  color: #fff;
}

.map__badge--metro {
  background: #e2622a;
}

.map__badge--bus {
  background: #1b62c8;
}

.map__metro {
  font-size: 1.05rem;
  line-height: 1.6;
  word-break: keep-all;
}

.map__metro strong {
  font-weight: 800;
  color: var(--navy);
}

.map__metro-exit {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.map__way-sub {
  margin-top: 0.4rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.map__way-hint {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
  color: var(--text-soft);
  font-size: 0.92rem;
  word-break: keep-all;
}

.map__bus-group + .map__bus-group {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line);
}

.map__bus-side {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}

.map__bus-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-soft);
}

.map__stops {
  margin-top: 0.8rem;
}

/* 정류소 1건. 좁은 화면에서는 이름 위 / 노선 아래로 쌓인다. */
.map__stop {
  display: grid;
  gap: 0.15rem 0.9rem;
  padding: 0.6rem 0;
}

.map__stop + .map__stop {
  border-top: 1px solid var(--line);
}

.map__stop-name {
  font-weight: 700;
}

.map__stop-no {
  margin-left: 0.35rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-soft);
}

.map__stop-lines {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
  word-break: keep-all;
}

/* --- 자가용 · 주차 --- */
.map__park {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
}

.map__facts {
  border-top: 1px solid var(--line);
}

.map__fact {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.map__fact-key {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}

.map__fact-val {
  font-size: 1.02rem;
  word-break: keep-all;
}

.map__fact-val strong {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--navy);
}

.map__park-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.65;
  word-break: keep-all;
}

.map__park-tip .map__svg {
  margin-top: 0.15rem;
  color: var(--navy);
}

.map__park-tip strong {
  font-weight: 800;
  color: var(--navy);
}

/* --- 태블릿 (768px~) --- */
@media (min-width: 768px) {
  .map__top {
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
  }

  .map__ways {
    /* 지하철은 내용이 짧고 버스는 길다. 1:1 로 두면 지하철 칸이 텅 빈다. */
    grid-template-columns: 1fr 1.4fr;
    align-items: start;
  }

  .map__park {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .map__stop {
    grid-template-columns: 11rem 1fr;
    align-items: baseline;
  }

  .map__fact {
    grid-template-columns: 8rem 1fr;
    align-items: baseline;
    gap: 1rem;
  }
}

/* --- 데스크톱 (1024px~) --- */
@media (min-width: 1024px) {
  .map__top {
    gap: 3.4rem;
  }

  .map__way {
    padding: 2.2rem;
  }
}

/* --------------------------------------------------------------------------
   26. 제자 양육 (rearing_program, rearing_academic)
   -------------------------------------------------------------------------- */
/* 모바일 우선. 두 페이지가 같은 뼈대를 쓴다. */

/* --- 머리 인사말 (두 페이지 공통) --- */
.rear__lead {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.rear__motto {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.4;
  word-break: keep-all;
}

.rear__en {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
}

.rear__body {
  margin-top: 1.4rem;
  color: var(--text-soft);
  line-height: 1.9;
  text-align: left;
  word-break: keep-all;
}

.rear__about {
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.9;
  color: var(--text-soft);
  word-break: keep-all;
}

/* 원문 문단을 그대로 남겨둔 자리. 위 목록이 이것을 편 것이라 한 단계 낮춰 보인다. */
.rear__about--quote {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px dashed var(--line);
  font-size: 0.94rem;
}

/* --- 조직 (01~04) --- */
.rear__org {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
}

.rear__org-item {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2rem);
  padding-top: 2.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}

.rear__no {
  position: absolute;
  top: clamp(1rem, 3vw, 1.3rem);
  left: clamp(1.5rem, 4vw, 2rem);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--line);
}

.rear__org-name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--navy);
}

.rear__org-list {
  margin-top: 0.9rem;
}

.rear__org-list li {
  position: relative;
  padding-left: 0.9rem;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.75;
  word-break: keep-all;
}

.rear__org-list li + li {
  margin-top: 0.35rem;
}

.rear__org-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-deep);
}

/* --- 섬김 (예배준비 / 예배중 / 예배이후 / 주중활동) --- */
.rear__serve {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2rem);
}

.rear__phase {
  padding: clamp(1.4rem, 4vw, 2rem);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
}

.rear__phase-name {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  background: var(--navy);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.rear__step {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  line-height: 1.75;
  word-break: keep-all;
}

.rear__step + .rear__step {
  border-top: 1px solid var(--line);
}

.rear__step-name {
  font-weight: 800;
  color: var(--navy);
  font-size: 0.98rem;
}

.rear__step-desc {
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* --- 강좌 정보 (rearing_academic) --- */
.rear__facts {
  max-width: 820px;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  border-top: 1px solid var(--line);
}

.rear__fact {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}

.rear__fact-key {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
}

.rear__fact-val {
  font-size: 1.02rem;
  word-break: keep-all;
}

.rear__note {
  max-width: 820px;
  margin: 1rem auto 0;
  font-size: 0.9rem;
  color: var(--text-soft);
  word-break: keep-all;
}

/* 눌러서 바로 거는 링크다. 44px(--tap) 확보. (intro_map 의 .map__tel 과 같은 이유) */
.rear__tel {
  max-width: 820px;
  margin: 1.2rem auto 0;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.rear__tel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-left: 0.4rem;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--navy);
  border-bottom: 2px solid transparent;
}

.rear__tel a:hover,
.rear__tel a:focus {
  border-bottom-color: var(--navy);
}

/* --- 영성훈련 --- */
.rear__spirit {
  display: grid;
  gap: clamp(0.8rem, 2vw, 1.2rem);
}

.rear__spirit-item {
  padding: 1.2rem 1.4rem;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
}

.rear__spirit-name {
  font-weight: 800;
  color: var(--navy);
  word-break: keep-all;
}

.rear__spirit-desc {
  margin-top: 0.3rem;
  font-size: 0.94rem;
  color: var(--text-soft);
  word-break: keep-all;
}

/* --- 다음 단계 --- */
.rear__next {
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.8rem);
}

.rear__next-item {
  padding: clamp(1.5rem, 4vw, 2.2rem);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
}

.rear__next-title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy);
  word-break: keep-all;
}

.rear__next-body {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text-soft);
  word-break: keep-all;
}

.rear__next-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tap);
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--navy);
}

.rear__next-link:hover,
.rear__next-link:focus {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .rear__org {
    grid-template-columns: 1fr 1fr;
  }

  .rear__step {
    grid-template-columns: 12rem 1fr;
    gap: 0.9rem;
    align-items: baseline;
  }

  /* 이름 없는 줄: 설명이 12rem 이름 칸에 끼지 않고 전체 폭을 쓴다 */
  .rear__step--noname {
    grid-template-columns: 1fr;
  }

  .rear__fact {
    grid-template-columns: 8rem 1fr;
    align-items: baseline;
    gap: 1rem;
  }

  .rear__spirit {
    grid-template-columns: 1fr 1fr;
  }

  /* align-items 를 건드리지 않는다. 기본값(stretch)이라야 카드 높이가 맞는다.
     start 로 두면 글 길이가 다른 카드들이 들쭉날쭉해 보인다. */
  .rear__next {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .rear__org {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 섬김은 4단계인데 '예배준비' 만 항목이 10개고 나머지는 2~5개다.
     2열이면 마지막 '주중활동' 이 혼자 남아 옆칸이 텅 빈다.
     예배준비를 한 줄 전체로 깔고 나머지 셋을 3열로 세우면 딱 맞는다.
     768px 에서는 3열이 좁아 1열로 쌓는다(위 블록에 규칙을 두지 않은 이유). */
  /* 단계가 3개(처음 오신 주일 + 그 주간에 + 그 다음 걸음)라 2열이 맞다.
     첫 단계(주일 흐름)는 가로로 크게, 나머지 둘이 나란히. */
  .rear__serve {
    grid-template-columns: repeat(2, 1fr);
  }

  .rear__phase:first-child {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   27. 선교 활동 (mission_mission, mission_lecture)
   -------------------------------------------------------------------------- */
.mis__svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 선교 4분야 --- */
.mis__fields {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
}

.mis__field {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}

.mis__no {
  position: absolute;
  top: clamp(1.2rem, 3vw, 1.6rem);
  right: clamp(1.4rem, 4vw, 1.8rem);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--line);
}

.mis__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--navy);
}

.mis__name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--navy);
  word-break: keep-all;
}

.mis__en {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
}

.mis__items {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
}

.mis__items li {
  position: relative;
  padding-left: 0.9rem;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.9;
  word-break: keep-all;
}

.mis__items li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-deep);
}

/* 링크가 있는 항목만 눌린다. 터치 영역을 위해 세로 여백을 준다. */
.mis__items a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--tap);
  color: var(--navy);
  font-weight: 700;
}

.mis__items a:hover,
.mis__items a:focus {
  text-decoration: underline;
}

.mis__arrow {
  font-size: 0.85em;
  opacity: 0.7;
}

/* --- 문화교실: 개설 분야 --- */
.mis__areas {
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  max-width: 900px;
  margin: 0 auto;
}

.mis__area {
  padding: clamp(1.4rem, 4vw, 1.8rem);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
}

.mis__area-name {
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
}

.mis__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mis__chip {
  padding: 0.45rem 1rem;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

/* --- 문화교실: 이번 학기 강좌 (데이터가 있을 때만 나온다) --- */
.mis__courses {
  display: grid;
  gap: clamp(1rem, 3vw, 1.6rem);
}

.mis__course {
  padding: clamp(1.4rem, 4vw, 1.8rem);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
}

.mis__course-name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy);
  word-break: keep-all;
}

.mis__course-desc {
  margin-top: 0.5rem;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--text-soft);
  word-break: keep-all;
}

.mis__course-facts {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
}

.mis__course-facts li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 0.6rem;
  padding: 0.25rem 0;
  font-size: 0.94rem;
  word-break: keep-all;
}

.mis__course-key {
  font-weight: 800;
  color: var(--gold-deep);
  font-size: 0.85rem;
}

/* --- 문화교실: 신청 --- */
.mis__apply {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.mis__apply-lead {
  font-size: 1.05rem;
  color: var(--text-soft);
  word-break: keep-all;
}

.mis__apply .rear__tel,
.mis__apply .rear__note {
  text-align: center;
}

.mis__apply .greet__next {
  margin-top: 1.4rem;
}

/* align-items 를 건드리지 않는다. 기본값(stretch)이라야 카드 높이가 맞는다.
   선교 4분야는 세부 항목이 2~4개로 제각각이라 start 로 두면 눈에 띄게 들쭉날쭉하다. */
@media (min-width: 768px) {
  .mis__fields {
    grid-template-columns: 1fr 1fr;
  }

  .mis__areas {
    grid-template-columns: 1fr 1fr;
  }

  .mis__courses {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .mis__fields {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   28. 주보 (news)
   -------------------------------------------------------------------------- */
/* 목록: 주보 1면 카드 그리드 (부전교회 방식).
   모바일·탭 2열 -> PC(1024px+) 3열. 2026-07-16 Louis: 썸네일을 더 크게 —
   원래 2->3->4열이었는데 4열은 칸이 작아 글자가 뭉개져 보였다.
   주보 이미지는 각지게 둔다(라운드 없음) — 실물 인쇄물 느낌. 같은 결정. */

.nw__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 2.5vw, 1.6rem);
}

.nw__card {
  display: block;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nw__card:hover,
.nw__card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* 1면 미리보기. 주보가 세로로 길어(약 1:1.7) 위쪽만 보여준다 — 제호와 예배 순서가
   보이는 부분이다. 카드 높이를 맞추기 위한 창이지 이미지를 자르는 게 아니다(상세에서 전체). */
.nw__thumb {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #eef1f7;
}

.nw__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* 카드 제목 띠: 주보 1면이 온통 희어서 흰 띠는 묻힌다(2026-07-16 Louis).
   상세 제목 띠(.nw__head)와 같은 네이비 그라데이션으로 짝을 맞췄다. */
.nw__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background:
    linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 60%, var(--brand-light, #2b3a8f) 120%);
}

.nw__card-date {
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
  word-break: keep-all;
}

.nw__card-pages {
  flex: none;
  font-size: 0.8rem;
  color: var(--gold);   /* 팔레트 정의상 '다크 배경 위 포인트' 색 */
}

.nw__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-soft);
  background: var(--paper);
  border-radius: var(--r-md);
}

/* --- 상세: 쪽을 읽기 폭으로 세로로 --- */
/* 제목 띠: 주보 면이 온통 흰색이라 제목까지 희면 묻힌다(2026-07-16 Louis).
   페이지 머리(.page-head)와 같은 네이비 그라데이션으로 격을 맞췄다. */
.nw__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(0.8rem, 2.2vw, 1.1rem) clamp(1rem, 3vw, 1.6rem);
  background:
    linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 60%, var(--brand-light, #2b3a8f) 120%);
  color: #fff;
}

.nw__date {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  color: #fff;
}

.nw__pages {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);   /* 면 사이 간격 2배 (2026-07-17 Louis) */
  max-width: 860px;   /* 읽기 폭. 원본(1200px)은 라이트박스에서 */
  margin: 0 auto;
}

.nw__page {
  display: block;
  border: 1px solid #c2c0ba;   /* var(--line)#e6e4de 보다 2단계 진하게 (2026-07-17 Louis) */
  overflow: hidden;
  box-shadow: var(--shadow-1);
  background: #fff;
}

.nw__page img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 상세: '넘겨 보기'(플립북) — main.js 가 성공했을 때만 나타나는 opt-in 전환.
       기본은 위 세로 쌓기다(가독성 실측 근거, CLAUDE.md 13절 40번).
       .nw__viewbar/.nw__fbar/.nw__book 은 전부 JS 가 만든다 — JS 가 없으면
       이 스타일들은 닿을 대상 자체가 없어 세로 쌓기가 그대로 남는다. --- */
.nw__viewbar {
  display: flex;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto clamp(0.9rem, 2vw, 1.3rem);
}

.nw__pages.is-off { display: none; }   /* display:grid 라 hidden 속성이 안 먹는다 */

.nw__fbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  max-width: 920px;
  margin: 0 auto clamp(0.9rem, 2vw, 1.3rem);
}

.nw__fbar .btn { min-height: var(--tap); }

/* --------------------------------------------------------------------------
   29. 양정교회 갤러리 (gallery/) — 2026-07-21 초안
   목록 카드는 주보 구획(nw__)을 그대로 쓰고, 여기는 갤러리 고유분만 둔다.
   -------------------------------------------------------------------------- */
/* 목록 카드 썸네일: 16:10 (2026-07-21 Louis — 정사각→4:3→16:10 순으로 조정) */
.gl__thumb {
  aspect-ratio: 16 / 10;
}

/* 주보 카드(nw__thumb)의 object-position: top 은 주보 1면 제호용이다 — 사진 앨범 커버는
   가운데 기준이 맞다 (2026-07-21 Louis: top 으로 잘리는 느낌 지적. 파일 크롭 자체는
   photo_lib 이 원래 가운데라 CSS 만 고치면 기존 썸네일 전부 소급된다). */
.gl__thumb img {
  object-position: center;
}

/* 카드 띠: 2줄 고정 — 1줄째 '카테고리 | 날짜'(+장수), 2줄째 제목.
   제목은 글자수 제한이 아니라 **공간 기준 말줄임**(한 줄 고정) — 그래서 어떤 제목이
   와도 전 카드 높이가 일치한다 (2026-07-21 Louis). */
.gl__cmeta {
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
}

/* 그리드 칸이 nowrap 내용의 최소폭에 밀리지 않게 (주보 카드에는 영향 없음 — 줄바꿈 텍스트) */
.nw__grid > li {
  min-width: 0;
}

/* 카테고리 탭 (cat-*) — 설교·찬양·특별행사·갤러리 목록 공용 (2026-07-21 Louis).
   렌더는 includes/cat_tabs.php. <details> 네이티브: 모바일은 '분류: 전체 ▾' 접힘,
   데스크톱(768px+)은 summary 감추고 pill 탭 항상 펼침(건수는 숨김). JS 0줄. */
.cat-box {
  max-width: 520px;
  margin: 0 auto 1.4rem;
}

.cat-summary {
  list-style: none;            /* 기본 삼각 마커 제거 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-weight: 700;
  color: var(--navy);
  background: var(--white);
}

.cat-summary::-webkit-details-marker { display: none; }

.cat-summary::after {
  content: "▾";
  color: var(--text-soft);
  transition: transform 0.2s ease;
}

.cat-box[open] .cat-summary::after {
  transform: rotate(180deg);
}

.cat-cur {
  font-weight: 400;
  color: var(--text-soft);
}

/* 펼친 목록은 세로 리스트 — 한 줄에 하나, 건수는 오른쪽 (모바일) */
.cat-tabs {
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.5rem 0 0;
}

.cat-tabs a {
  justify-content: space-between;
  width: 100%;
  border-radius: var(--r-md);
}

/* 드롭다운 안에서는 건수를 보여준다(세로라 자리 여유 있다) */
.cat-tabs .tab__n {
  display: inline;
}

@media (min-width: 768px) {
  /* 520px 은 모바일 드롭다운 폭이다 — 데스크톱에서는 풀어야 pill 이 .wrap(1200) 전체에
     퍼진다(안 풀면 가운데 520px 안에 여러 줄로 몰린다. 2026-07-21 Louis). */
  .cat-box {
    max-width: none;
  }
  /* 접힘 유지 변형(연도)은 PC 에서도 드롭다운 폭을 유지한다 — 아래 @supports 확장에서도
     제외돼 모든 폭에서 아코디언으로 남는다 (2026-07-27 Louis: 연도는 접은 한 줄). */
  .cat-box--fold {
    max-width: 520px;
  }
  /* 데스크톱 레이아웃(가로 pill) — details 가 열려 있을 때 항상 적용된다.
     열림을 강제하는 것은 아래 @supports 블록의 몫이다. */
  .cat-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
  }
  .cat-tabs a {
    width: auto;
    justify-content: center;
  }
  /* 데스크톱 pill 에서는 건수를 숨긴다 — pill 이 길어져 가운데로 몰려 보인다
     (2026-07-21 Louis). 드롭다운(모바일)에서는 세로라 자리 여유가 있어 그대로 둔다. */
  .cat-tabs .tab__n {
    display: none;
  }
  /* 데스크톱에서 요약을 감추고 탭을 닫힘 상태에서도 항상 노출한다. 단 이 트릭은
     Chromium 131+/Firefox 138+/Safari 18.4+(2024~25)의 ::details-content 가상요소가
     있어야 동작한다 — 닫힌 <details> 의 내용은 UA 가 강제로 숨기고 display:flex
     !important 로도 못 이긴다(그래서 이 가상요소가 신설됐다). @supports selector()
     로 지원 여부를 확인해 지원할 때만 이 블록을 적용한다.
     미지원 구형 브라우저는 이 블록 전체가 건너뛰어져 summary 가 그대로 보이고
     (클릭해서 열 수 있다) details 는 네이티브 닫힘 상태로 시작한다 — 모바일과 같은
     아코디언으로 우아하게 물러난다. (2026-07-21 감사 발견: 이전엔 summary 도 숨고
     내용도 안 열려 카테고리 UI 가 구형 데스크톱 브라우저에서 통째로 사라졌다 —
     열 방법 자체가 없었다. 이 gate 로 "닫히고 여는 방법도 없는" 상태를 없앤다.) */
  @supports selector(::details-content) {
    .cat-box:not(.cat-box--fold)::details-content {
      content-visibility: visible;
      height: auto;
    }
    .cat-box:not(.cat-box--fold) .cat-summary { display: none; }
    .cat-box:not(.cat-box--fold) .cat-tabs { display: flex !important; }
  }
}

/* 연도별 보기(접힘 변형)의 자리 — 목록 아래라 위 여백을 준다 (2026-07-27 Louis) */
.cat-box--fold {
  margin: 1.8rem auto 0;
}

/* 갤러리 목록: 모바일 1열(커버가 폭을 다 쓴다 — 2026-07-21 Louis 문의, 1열 추천안)
   → 768px 2열 → 1024px 3열. 주보(기본 2열→PC 3열)와 단계가 다르다. */
.gl__cards {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .gl__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gl__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ⚠ nowrap 줄은 min-width:auto 를 타고 카드·그리드 칸까지 부풀린다(563px 실측 —
   메인 소식 3단과 같은 병, 13절 참고). min-width:0 사슬로 칸이 먼저 줄게 한다. */
.gl__crow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
}

.gl__cinfo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gl__crow .nw__card-pages {
  flex: none;   /* 장수는 항상 온전히 — 잘리는 쪽은 왼쪽 정보 줄이다 */
}

.gl__csep {
  margin: 0 0.15rem;
  color: rgba(255, 255, 255, 0.45);
}

.gl__ctitle {
  display: block;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;   /* keep-all 상속이면 말줄임 대신 삐져나온다 — 한 줄 자르기엔 normal */
}

.gl__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin: 0 0 1.1rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.gl__cat {
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.gl__yt {
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
}

/* 설명문 카드 (2026-07-21 Louis): 웜 오프화이트 배경 + 왼쪽 네이비 강조선.
   교회 소식·인용 느낌으로 사진과 시각적으로 구분한다. 섹션 전체 폭을 쓴다(width 100%). */
.gl__desc {
  margin: 0 0 1.6rem;
  padding: 1rem 1.3rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--text-soft);
  line-height: 1.85;
  word-break: keep-all;
}

/* 모바일: 설명문이 사진 아래(order 뒤)라 사진과 붙는다 — 사이 여백을 준다.
   PC 는 설명이 사진 앞이라 이 여백이 필요 없다(위 margin-bottom 으로 충분). */
.gl__view .gl__desc {
  margin-top: 1.4rem;
}

@media (min-width: 768px) {
  .gl__view .gl__desc {
    margin-top: 0;
  }
}

/* 상세 설명문 위치 (2026-07-21 Louis): 모바일은 DOM 순서 그대로 사진→설명(=화면·읽기 순서
   일치, 접근성). PC(768px+)만 flex order 로 설명을 사진 앞으로 올린다. 서버 부하 0(순수 CSS). */
@media (min-width: 768px) {
  .gl__view {
    display: flex;
    flex-direction: column;
  }
  .gl__view .nw__head { order: 1; }
  .gl__view .gl__meta { order: 2; }
  .gl__view .gl__desc { order: 3; }
  .gl__view .gl__grid { order: 4; }
  .gl__view .nw__adj  { order: 5; }
}

/* 앨범 사진 그리드: 2열 → 768px 3열 → 1024px 4열 (메인 갤러리와 같은 단계) */
.gl__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gl__photo {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
}

.gl__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gl__photo:hover img,
.gl__photo:focus-visible img {
  transform: scale(1.04);
}

@media (min-width: 768px) {
  .gl__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
  }
}

@media (min-width: 1024px) {
  .gl__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 3장 이하 앨범: 1줄 1장 큰 판 — 정사각 크롭 없이 원본 비율, 읽기 폭(주보와 동일 860px).
   클래스 2개 지정이라 위 미디어쿼리(1클래스)보다 우선한다 (2026-07-21 Louis). */
.gl__grid.gl__grid--few {
  grid-template-columns: 1fr;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.gl__grid--few .gl__photo {
  aspect-ratio: auto;
}

.gl__grid--few .gl__photo img {
  height: auto;
}

/* --- 상세: 초광폭(1600px+)에서만 두 면 나란히 (2026-07-18 Louis).
       .nw__wrap 은 주보 상세의 wrap 에만 붙는 훅이라 다른 페이지의 1200px 틀은
       그대로다 — 전역 브레이크포인트를 늘리지 않는다.
       읽는 순서는 1|2, 3|4, 5|6 (좌→우, 위→아래). 홀수 면이면 마지막 칸이 빈다.
       플립북(.nw__book)과는 무관 — 이 규칙은 세로 쌓기(.nw__pages)에만 작용한다. --- */
@media (min-width: 1600px) {
  .nw__wrap {
    max-width: 1560px;   /* 두 면 × ~730px + 간격. 1600 뷰포트에 여백 포함 딱 맞는 값 */
  }

  .nw__wrap .nw__pages {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
}

.nw__fcount {
  min-width: 4.6em;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.nw__book {
  max-width: 920px;   /* 펼침(두 면)의 상한. 면당 최대 460px — 확대는 라이트박스가 담당 */
  margin: 0 auto;
}

.nw__fpage {
  background: #fff;
  border: 1px solid #c2c0ba;   /* 세로 쌓기(.nw__page)와 같은 진한 테두리 */
  overflow: hidden;
}

.nw__fpage a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;   /* 세로 쌓기와 동일: 면을 누르면 라이트박스 확대 */
  -webkit-user-drag: none;   /* a 는 기본 드래그 가능 — 끌어 넘기기와 충돌한다 */
}

.nw__fpage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 판형이 1.68~1.73 으로 미세하게 달라 자르지 않고 맞춘다 */
  user-select: none;
  -webkit-user-drag: none;
}

.nw__adj {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: center;
  max-width: 860px;
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
}

.nw__adj > :first-child { justify-self: start; }
.nw__adj > :last-child  { justify-self: end; }

@media (min-width: 1024px) {
  .nw__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   18. 접근성 / 인쇄
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .hd,
  .mnav,
  .hero2,
  .ft {
    display: none;
  }
  /* 종이 위에서 아무 기능이 없는 조작 요소들 — 탭 전환·카테고리 필터·페이지네이션·
     이전/목록/다음 버튼·넘겨 보기 컨트롤(2026-07-23 점검 발견. 클릭이 안 되는데
     그대로 인쇄되던 것). 본문(글·사진)은 그대로 남는다. */
  .page-switch,
  .cat-box,
  .pager,
  .nw__adj,
  .nw__back,
  .nw__flip-toggle,
  .nw__fbar {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   404 페이지 (2026-07-23 점검 신설)
   -------------------------------------------------------------------------- */
.err404 {
  text-align: center;
}

.err404__home {
  margin-bottom: 1.6rem;
}