/* ==============================================================
   통바이블 — 정갈한 에디토리얼 (Pretendard)
   · 중성 그레이 페이퍼 + 딥 잉크 + Pretendard 제목·본문 (살색 배제)
   · 무채색(포인트 색 없음), 1px 헤어라인 괘선, 섹션 번호
   · tongbible.com 레이아웃(슬라이더/퀵/후원/게시판/영상/오시는길) 유지
   · 시니어 보정: 본문 18px+, 고대비, 48px 터치영역, tel: 링크
   ============================================================== */

:root {
  /* 인덕대풍 라운드 블록: 쿨그레이 배경 + 흰 블록 + 포인트 블루 */
  --paper: #F3F5F8;
  --paper-2: #E9EDF3;
  --card: #FFFFFF;
  --ink: #1A1E26;
  --ink-2: #4A5160;
  --ink-3: #8A93A4;
  --line: #E2E6ED;
  --line-2: #EDF0F5;
  /* 포인트: 프렌들리 블루 (--green 변수명은 유지, 값만 블루) */
  --green: #3D63D2;
  --green-2: #2C4DB0;
  --green-tint: #E8EEFC;
  --white: #FFFFFF;

  /* 라운드 블록 반경 */
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow-block: 0 4px 24px rgba(30, 41, 70, 0.06);
  --shadow-hover: 0 14px 34px rgba(30, 41, 70, 0.12);

  /* 폰트: 전부 Pretendard (명조 세리프 제거) */
  --serif: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;

  --fs-base: 1.15rem;
  --wrap: 1680px;
  --pad-x: clamp(1.25rem, 4vw, 2.75rem);
}

html { font-size: 100%; scroll-behavior: smooth; }
html.font-lv2 { font-size: 110%; }
html.font-lv3 { font-size: 122%; }
[id] { scroll-margin-top: 6.5rem; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; }
p, dd, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.nb { white-space: nowrap; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
ul, li { list-style: none; }
button { font-family: inherit; cursor: pointer; background: transparent; border: 0; color: inherit; }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.wrap { width: min(90%, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 0.7rem 1.2rem; z-index: 9999;
}
.skip:focus { left: 0.5rem; top: 0.5rem; border-radius: 4px; }

/* 재사용 라인 화살표 */
.ar { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ==============================================================
   상단 유틸리티 바
   ============================================================== */
.topbar { background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; min-height: 2.7rem; gap: 1rem; }
.topbar-quote { color: var(--ink-3); letter-spacing: 0.02em; }
.topbar-quote b { color: var(--green); font-weight: 700; }
.util { display: flex; align-items: center; gap: 0.2rem; }
.util > a { padding: 0.4rem 0.7rem; color: var(--ink-2); font-weight: 500; transition: color 0.15s; }
.util > a:hover { color: var(--green); }
.util .sep { width: 1px; height: 0.9rem; background: var(--line); margin: 0 0.15rem; }
.fontctl { display: flex; gap: 0.3rem; margin-left: 0.5rem; }
.fontctl button {
  min-width: 2.5rem; min-height: 2.1rem; padding: 0 0.5rem;
  border: 1px solid var(--line); background: var(--white);
  font-size: 0.8rem; font-weight: 700; color: var(--ink-2);
  transition: border-color 0.15s, color 0.15s;
}
.fontctl button:hover { border-color: var(--green); color: var(--green); }

/* ==============================================================
   헤더
   ============================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.28s ease, border-color 0.28s ease, backdrop-filter 0.28s ease;
}
/* 스크롤 시 · 모바일 메뉴 열림 시에만 글래스 배경 */
.site-header.scrolled, .site-header.menu-open, .site-header.mega-open {
  background: rgba(243, 245, 248, 0.78);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line);
}
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.7rem; }
.brand { display: flex; align-items: baseline; gap: 0.55rem; }
.brand-mark { font-family: var(--serif); font-size: 1.75rem; font-weight: 800; color: var(--green); line-height: 1; }
.brand-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.brand-sub { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--ink-3); margin-left: 0.4rem; letter-spacing: 0.02em; }

.gnb ul { display: flex; align-items: center; gap: 0.35rem; }
.gnb a {
  position: relative; display: inline-flex; align-items: center; min-height: 3rem;
  padding: 0.4rem 1.25rem; font-size: 1.3rem; font-weight: 600; color: var(--ink);
  transition: color 0.18s;
}
.gnb a::after {
  content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0.55rem; height: 1.5px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
}
.gnb a:hover, .gnb a:focus-visible { color: var(--green); }
.gnb a:hover::after, .gnb a:focus-visible::after { transform: scaleX(1); }

/* 서브메뉴 — 데스크톱에서는 통합 전체메뉴(.megamenu)로 대체하므로 숨김.
   (모바일에서는 아래 반응형 블록이 아코디언으로 다시 펼쳐 보인다) */
.gnb li { position: relative; }
.gnb .submenu { display: none; }

/* 전체메뉴 버튼 (데스크톱) */
.allmenu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.9rem; min-height: 2.9rem; padding: 0.4rem 0.8rem;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--white); color: var(--ink);
  cursor: pointer; transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.allmenu-btn:hover, .mega-open .allmenu-btn { border-color: var(--green); color: var(--green); }
.allmenu-ic { display: inline-flex; flex-direction: column; gap: 3px; }
.allmenu-ic i { width: 17px; height: 2px; background: currentColor; border-radius: 2px; }

/* 통합 전체메뉴 (메가메뉴) — 헤더 아래로 펼쳐짐 */
.megamenu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 110;
  background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px rgba(26, 22, 19, 0.13);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.mega-open .megamenu { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu-in { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem 1.8rem; padding: 1.8rem 0 2.1rem; }
@media (max-width: 74rem) { .megamenu-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mega-col h4 {
  font-size: 1.4rem; font-weight: 800; color: var(--ink);
  margin: 0 0 0.7rem; padding-bottom: 0.55rem; border-bottom: 2px solid var(--green);
}
.mega-col h4 a { color: inherit; }
.mega-col h4 a:hover { color: var(--green); }
.mega-col a { display: block; padding: 0.55rem 0; font-size: 1.22rem; font-weight: 500; color: var(--ink-2); transition: color 0.15s; }
.mega-col > a:hover, .mega-col > a:focus-visible { color: var(--green); }

.header-tools { display: flex; align-items: center; gap: 0.7rem; }
.callbtn {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.9rem;
  padding: 0.4rem 1.25rem; border: 1.5px solid var(--green); border-radius: 100px;
  color: var(--green); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em;
  transition: background 0.18s, color 0.18s;
}
.callbtn:hover { background: var(--green); color: #fff; }
.callbtn .ar { stroke-width: 1.7; }

.menu-toggle { display: none; align-items: center; justify-content: center; min-width: 2.9rem; min-height: 2.9rem; padding: 0.4rem; border: 1px solid var(--ink); border-radius: 100px; }
.menu-toggle-icon { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-toggle-icon i { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.menu-open .menu-toggle-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle-icon i:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==============================================================
   히어로 — 마스트헤드 + 와이드 슬라이더
   ============================================================== */
.hero { padding-top: clamp(0.6rem, 1.5vw, 1.1rem); }
.hero-media { margin-top: 0; }
/* 화면에서만 숨기는 제목(접근성·SEO용) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 슬라이더 */
.slider { position: relative; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-block); }
.banner-slider { position: relative; overflow: hidden; }
.banner-track { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.banner-slide { flex: 0 0 100%; display: block; }
.banner-slide img { width: 100%; aspect-ratio: 43 / 24; object-fit: cover; }
a.banner-slide:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }

/* 유튜브 영상 배너 슬라이드 */
.banner-video { position: relative; }
.bv-facade {
  display: block; width: 100%; aspect-ratio: 43 / 24; padding: 0; border: 0;
  background-color: #000; background-size: cover; background-position: center;
  cursor: pointer; position: relative;
}
.bv-facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
}
.bv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(211, 47, 47, 0.92); box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}
.bv-play svg { width: 2.6rem; height: 2.6rem; fill: #fff; margin-left: 0.2rem; }
.bv-facade:hover .bv-play,
.bv-facade:focus-visible .bv-play { transform: translate(-50%, -50%) scale(1.08); background: #d32f2f; }
.bv-facade:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.bv-frame { display: block; width: 100%; aspect-ratio: 43 / 24; border: 0; }

/* 화살표 — 박스·배경 없이 화살표만 (흰색 + 그림자) */
.banner-arrow {
  position: absolute; top: 50%; z-index: 3;
  width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
  background: transparent; border: 0; color: #fff; opacity: 0.92;
  transition: opacity 0.18s;
}
.banner-arrow svg { width: 2.1rem; height: 2.1rem; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55)); transition: transform 0.18s; }
.banner-arrow:hover { opacity: 1; }
.banner-arrow.prev { left: 0.4rem; transform: translateY(-50%); }
.banner-arrow.next { right: 0.4rem; transform: translateY(-50%); }
.banner-arrow.prev:hover svg { transform: translateX(-3px); }
.banner-arrow.next:hover svg { transform: translateX(3px); }

/* 슬라이드 위 도트(슬라이드 수) */
.banner-dots { position: absolute; left: 0; right: 0; bottom: 1.15rem; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.banner-dots button { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: background 0.2s, transform 0.2s; }
.banner-dots button.on { background: #fff; transform: scale(1.3); }

/* 멈춤/재생 — 아이콘 버튼(세로 막대 2개 ↔ 삼각형) */
.banner-pause { position: absolute; right: 0.9rem; bottom: 0.8rem; z-index: 3; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; transition: background 0.18s; }
.banner-pause:hover { background: rgba(0, 0, 0, 0.6); }
.banner-pause svg { width: 1.15rem; height: 1.15rem; fill: #fff; }
.banner-pause .ic-play { display: none; }
.banner-pause.is-paused .ic-pause { display: none; }
.banner-pause.is-paused .ic-play { display: block; }

/* 타임라인 — 다음 슬라이드까지 진행바 */
.banner-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.28); z-index: 3; }
.banner-progress-fill { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
@media (prefers-reduced-motion: reduce) { .banner-progress { display: none; } }

/* ==============================================================
   퀵 링크 스트립
   ============================================================== */
.quicklinks { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.quick-item {
  display: flex; align-items: center; gap: 0.85rem; min-height: 5.2rem; padding: 1rem 1.4rem;
  border-left: 1px solid var(--line); transition: background 0.18s;
}
.quick-item:first-child { border-left: 0; }
.quick-item:hover { background: var(--card); }
.quick-item .ar-ic { width: 1.6rem; height: 1.6rem; stroke: var(--green); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.quick-item .qt { font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.quick-item .qs { display: block; font-size: 0.82rem; color: var(--ink-3); font-weight: 500; }
.quick-item:hover .qt { color: var(--green); }

/* ==============================================================
   섹션 공통 — 좌: 번호+제목 / 우: 본문
   ============================================================== */
/* ==============================================================
   섹션 공통 (nknh 느낌 — 넉넉한 여백 · 큰 제목 · 톤 교차)
   ============================================================== */
.section { padding-block: clamp(4rem, 9vw, 8.5rem); }
.section--tone { background: var(--card); }

.sec-head { max-width: 640px; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.eyebrow { display: flex; align-items: center; gap: 0.55rem; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-3); text-transform: uppercase; }
.cross { font-style: normal; font-weight: 400; color: var(--green); font-size: 1rem; line-height: 1; }
.sec-h { margin-top: 1.1rem; font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.03em; color: var(--ink); }

/* 바로가기 — 배경 없이 라운드 카드 배너만 */
.quick-hero {
  position: relative;
  width: min(90%, var(--wrap)); margin-inline: auto;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
  padding: 0; background: transparent;
}
.quick-hero-bg { display: none; }
.quick-hero-in { position: relative; }
.quick-hero .quick-hero-in { width: 100%; margin: 0; }
.quick-hero-eyebrow { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.24em; color: var(--ink-3); margin: 0; }
.quick-hero-title { margin: 1rem 0 clamp(1.8rem, 3.2vw, 2.6rem); font-size: clamp(2rem, 3.8vw, 3.2rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }

.nav-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }
.nav-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  align-content: end; row-gap: 0.5rem; column-gap: 1rem;
  aspect-ratio: 1 / 0.9;
  padding: clamp(2rem, 2.6vw, 2.6rem) clamp(1.8rem, 2.3vw, 2.3rem);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-block);
  transition: transform 0.22s, box-shadow 0.22s;
}
.nav-tile > * { position: relative; z-index: 1; }
.nav-tile .nt-t { grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(1.55rem, 2vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.nav-tile .nt-s { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.4; color: rgba(255, 255, 255, 0.8); }
.nav-tile .nt-ic { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; justify-self: end; }
.nav-tile .nt-ic svg { width: clamp(3.2rem, 3.8vw, 4.4rem); height: clamp(3.2rem, 3.8vw, 4.4rem); fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.92; transition: transform 0.22s; }
.nav-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.nav-tile:hover .nt-ic svg { transform: scale(1.08); opacity: 1; }

/* ① 통바이블 — 네이비 그라데이션 + 도트 파티클 */
.nav-tiles .nav-tile:nth-child(1) { background: linear-gradient(135deg, #1E2A63 0%, #33489E 100%); }
.nav-tiles .nav-tile:nth-child(1)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.6px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(to right, transparent 38%, #000 105%);
  mask-image: linear-gradient(to right, transparent 38%, #000 105%);
}
/* ② 천막비전교회 — 그린 그라데이션 + 동심원(전파) 패턴 */
.nav-tiles .nav-tile:nth-child(2) { background: linear-gradient(135deg, #175A45 0%, #2E9366 100%); }
.nav-tiles .nav-tile:nth-child(2)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 116% 48%, rgba(255,255,255,0) 0 20px, rgba(255,255,255,0.16) 20px 22px);
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000 100%);
  mask-image: linear-gradient(to right, transparent 30%, #000 100%);
}
/* ③ 포토미션 — 실사 카메라 사진 배경 */
.nav-tiles .nav-tile:nth-child(3) {
  background: linear-gradient(105deg, rgba(16, 16, 20, 0.9) 8%, rgba(20, 20, 26, 0.45) 62%, rgba(20, 20, 26, 0.25) 100%), url("../img/bg/tile-photomission.jpg") center 30% / cover no-repeat;
}
/* ④ 쇼핑몰 — 라이트 단색 카드 (다크 텍스트·아이콘) */
.nav-tiles .nav-tile:nth-child(4) { background: #EAECF1; }
.nav-tiles .nav-tile:nth-child(4) .nt-t { color: var(--ink); }
.nav-tiles .nav-tile:nth-child(4) .nt-s { color: var(--ink-3); }
.nav-tiles .nav-tile:nth-child(4) .nt-ic svg { stroke: var(--ink); opacity: 0.82; }

/* 비교용 2번째 줄 — 인덕대 영상배너 스타일 (사진 + 재생버튼 + 하단 캡션바) */
.vbanners { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: clamp(1.1rem, 2vw, 1.6rem); }
.vbanner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; aspect-ratio: 16 / 15.4; border-radius: var(--r-md); box-shadow: var(--shadow-block); transition: transform 0.22s, box-shadow 0.22s; }
.vbanner::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--v-img); background-size: cover; background-position: center; filter: brightness(1.05) saturate(1.02); transition: transform 0.5s ease; }
.vbanner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 18, 0) 45%, rgba(10, 12, 18, 0.12) 68%, rgba(10, 12, 18, 0.45) 100%); }
.vbanner.vb-bible { --v-img: url("../img/bg/warm-bible.jpg"); }
.vbanner.vb-church { --v-img: url("../img/bg/vb-church.jpg"); }
.vbanner.vb-photo { --v-img: url("../img/bg/tile-photomission.jpg?v=20260804p"); }
.vbanner.vb-shop { --v-img: url("../img/bg/vb-shop.jpg"); }
.vb-cap { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1.1rem 0.95rem; background: rgba(16, 18, 26, 0.32); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.vb-cap strong { font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.vb-cap small { font-size: clamp(0.92rem, 1.1vw, 1.05rem); color: rgba(255, 255, 255, 0.78); }
.vbanner:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.vbanner:hover::before { transform: scale(1.05); }

/* 교재 특별판 프로모 */
.promo { display: flex; align-items: center; justify-content: space-between; gap: 2rem clamp(2rem, 5vw, 4rem); flex-wrap: wrap; margin-top: clamp(1.6rem, 3vw, 2.6rem); padding: clamp(1.9rem, 3.5vw, 3.2rem); background: var(--ink); color: #fff; border-radius: var(--r-lg); transition: transform 0.22s; }
.promo:hover { transform: translateY(-3px); }
.promo-body { flex: 1 1 30rem; }
.promo-eyebrow { font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.promo-title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; margin-top: 0.6rem; }
.promo-title strong { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.promo-desc { margin-top: 0.9rem; color: rgba(255, 255, 255, 0.8); max-width: 54ch; font-size: 1.02rem; }
.promo-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; }
.promo-price { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; white-space: nowrap; }
.promo-price em { font-style: normal; font-size: 0.45em; font-weight: 600; margin-left: 0.25rem; }
.promo-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.5rem; background: #fff; color: var(--ink); border-radius: 100px; font-weight: 700; white-space: nowrap; transition: background 0.2s; }
.promo-cta .ar { width: 1.1rem; height: 1.1rem; }
.promo:hover .promo-cta { background: var(--paper); }

/* 광고 배너 (로테이션) — img/sponsor 이미지 */
.ad-banner { position: relative; isolation: isolate; margin-top: clamp(1.6rem, 3vw, 2.6rem); border: 0; border-radius: 0; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-block); cursor: grab; user-select: none; -webkit-user-select: none; }
.ad-banner.dragging { cursor: grabbing; }
.ad-track { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.ad-slide { flex: 0 0 50%; box-sizing: border-box; display: block; -webkit-user-drag: none; }
.ad-slide:nth-child(odd) { padding-right: 0.3rem; }
.ad-slide:nth-child(even) { padding-left: 0.3rem; }
/* 크롭: 위 15% · 아래 10% (세로 75%=1008 노출). object-position 60%로 위 15%/아래 10% 배분 */
.ad-slide img { width: 100%; aspect-ratio: 22 / 7; object-fit: cover; object-position: center 60%; display: block; -webkit-user-drag: none; user-select: none; pointer-events: none; filter: saturate(1.03) brightness(1.03); transition: filter 0.25s; }
.ad-banner:hover .ad-slide img { filter: none; }
a.ad-slide:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.ad-dots { display: none; }
.ad-dots--legacy { position: absolute; left: 0; right: 0; bottom: 0.95rem; z-index: 5; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.ad-dots button { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: background 0.2s, transform 0.2s; }
.ad-dots button.on { background: #fff; transform: scale(1.3); }
.ad-progress { display: none; }
.ad-progress-fill { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }
@media (prefers-reduced-motion: reduce) { .ad-progress-fill { display: none; } }

/* 성경 읽기 · 도구 — 정갈한 아이콘 카드 (단일 블루 톤 통일) */
.read-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.read-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.1rem; min-height: 11.5rem; padding: 2rem 1rem; background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-block); font-weight: 700; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); transition: transform 0.2s, box-shadow 0.2s, color 0.2s; }
.read-item svg { width: 4.4rem; height: 4.4rem; padding: 1.1rem; border-radius: 50%; background: var(--green-tint); fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: background 0.2s, stroke 0.2s; }
.read-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); color: var(--green); }
.read-item:hover svg { background: var(--green); stroke: #fff; }

/* 신청 바로가기 카드 (news-row 안, board.js 삽입 기준점) */
.apply-card { background: var(--paper); border: 0; border-radius: var(--r-md); padding: 1.9rem 1.8rem; display: flex; flex-direction: column; }
.apply-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 0.8rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.apply-item:last-child { border-bottom: 0; }
.apply-item span { grid-column: 1; grid-row: 1; font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em; }
.apply-item small { grid-column: 1; grid-row: 2; font-size: 1.05rem; color: var(--ink-3); margin-top: 0.15rem; }
.apply-item .ar { grid-column: 2; grid-row: 1 / span 2; width: 1.7rem; height: 1.7rem; color: var(--ink-3); transition: transform 0.2s, color 0.2s; }
.apply-item:hover span { text-decoration: underline; text-underline-offset: 3px; }
.apply-item:hover .ar { color: var(--ink); transform: translateX(3px); }
.section-grid { display: grid; grid-template-columns: minmax(210px, 300px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.section-head .sec-num { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--green); line-height: 1; }
.section-head .sec-kicker { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 1rem; }
.section-head .sec-title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.35; color: var(--ink); margin-top: 0.7rem; }
.section-head .sec-note { font-size: 1rem; color: var(--ink-2); margin-top: 1.1rem; max-width: 30ch; }
.section-body > .lead { font-size: clamp(1.15rem, 1.6vw, 1.3rem); color: var(--ink-2); line-height: 1.85; }
.section-body > .lead strong { color: var(--ink); font-weight: 700; }

/* 소개 — 특징 리스트 */
.feature-list { margin-top: 2rem; }
.feature-list > div { display: grid; grid-template-columns: auto 1fr; gap: 0 1.3rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.feature-list .fi-num { grid-row: span 2; font-family: var(--serif); font-size: 1.1rem; color: var(--green); font-weight: 700; padding-top: 0.15rem; }
.feature-list dt { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.feature-list dd { color: var(--ink-2); margin-top: 0.35rem; }

/* ==============================================================
   교회와 사역 — 에디토리얼 리스트
   ============================================================== */
.ministry-list { border-top: 1px solid var(--ink); }
.ministry-item {
  display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.7rem 0.4rem; border-bottom: 1px solid var(--line);
  transition: padding 0.25s, background 0.2s;
}
.ministry-item .mi-num { font-family: var(--serif); font-size: 1.15rem; color: var(--green); font-weight: 700; }
.ministry-item h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; color: var(--ink); }
.ministry-item p { font-size: 1.02rem; color: var(--ink-2); margin-top: 0.35rem; }
.ministry-item .mi-go { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.22s; }
.ministry-item:hover { background: var(--card); padding-left: 1.1rem; }
.ministry-item:hover .mi-go { background: var(--green); border-color: var(--green); color: #fff; transform: rotate(-45deg); }
.ministry-item:hover h3 { color: var(--green); }

/* ==============================================================
   후원 · 제휴
   ============================================================== */
.sponsor-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9rem; margin-top: 0.5rem; }
.sponsor-item { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--white); border: 0; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-block); transition: transform 0.2s, box-shadow 0.2s; }
.sponsor-item img { width: 100%; height: 100%; object-fit: contain; padding: 0.7rem; }
a.sponsor-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* ==============================================================
   소식 · 커뮤니티 — 게시판 + 도구 + 칼럼
   ============================================================== */
.news-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.board-card { background: var(--paper); border: 0; border-radius: var(--r-md); padding: 1.9rem 1.8rem; display: flex; flex-direction: column; }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--ink); margin-bottom: 0.3rem; }
.board-head h3 { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.board-more { font-size: 1.05rem; font-weight: 600; color: var(--ink-3); transition: color 0.18s; }
.board-more:hover { color: var(--green); }
.board-list { display: flex; flex-direction: column; flex: 1; }
.board-list li { border-bottom: 1px solid var(--line-2); }
.board-list li:last-child { border-bottom: 0; }
.board-list a { display: flex; align-items: center; gap: 0.8rem; min-height: 3.8rem; padding: 0.45rem 0; }
.board-list .b-title { flex: 1; font-size: 1.22rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-list .b-date { flex-shrink: 0; font-size: 1.02rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.board-list a:hover .b-title { color: var(--green); }

/* 성경 읽기 · 도구 */
.tool-card { background: var(--paper); border: 0; border-radius: var(--r-md); padding: 1.9rem 1.8rem; display: flex; flex-direction: column; }
.tool-list-col { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 0.3rem; }
.tool-pill { display: flex; align-items: center; gap: 0.7rem; min-height: 3.6rem; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--line-2); font-size: 1.18rem; font-weight: 500; color: var(--ink-2); transition: color 0.18s, padding 0.18s; }
.tool-pill:last-child { border-bottom: 0; }
.tool-pill .tp-ic { flex-shrink: 0; width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tool-pill:hover { color: var(--green); padding-left: 0.6rem; }

/* 칼럼 · 미디어 링크 4개 — 정갈한 뉴트럴 블록 (사진 없이, 호버 시 잉크 채움) */
.column-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.1rem; }
.column-link { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 9.5rem; padding: 1.6rem 1.7rem; background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-block); transition: background 0.22s, transform 0.22s, box-shadow 0.22s; overflow: hidden; }
.column-link .cl-kicker { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; color: var(--green); text-transform: uppercase; }
.column-link strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 800; color: var(--ink); margin-top: 0.4rem; letter-spacing: -0.02em; transition: color 0.22s; }
.column-link .ar { position: absolute; top: 1.4rem; right: 1.4rem; color: var(--ink-3); transition: color 0.22s, transform 0.22s; }
.column-link:hover { background: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.column-link:hover .cl-kicker { color: rgba(255, 255, 255, 0.72); }
.column-link:hover strong { color: #fff; }
.column-link:hover .ar { color: #fff; transform: translate(2px, -2px); }

/* ==============================================================
   말씀 영상
   ============================================================== */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.video-card { background: var(--card); border: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-block); transition: transform 0.22s, box-shadow 0.22s; }
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; width: 100%; display: block; background: var(--ink); overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.video-card:hover .video-thumb img { transform: scale(1.04); }
.video-thumb .play-badge { position: absolute; inset: 0; display: grid; place-items: center; }
.video-thumb .play-badge span { width: 3.8rem; height: 3.8rem; border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--green); display: grid; place-items: center; font-size: 1.25rem; padding-left: 0.2rem; transition: transform 0.2s, background 0.2s, color 0.2s; }
.video-thumb:hover .play-badge span { transform: scale(1.08); background: var(--green); color: #fff; }
.video-card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video-card-title { padding: 1rem 1.2rem 1.2rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.video-thumb.is-empty { background: repeating-linear-gradient(45deg, #E2E2E6 0 14px, #ECECEF 14px 28px); cursor: default; }
.video-thumb.is-empty .empty-note { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: 0.92rem; padding: 1rem; text-align: center; }

/* 쇼츠 */
#shorts { padding-bottom: clamp(2.4rem, 4.5vw, 3.8rem); }
.shorts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.shorts-nav { display: flex; gap: 0.5rem; }
.shorts-nav button { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; transition: background 0.18s, border-color 0.18s, color 0.18s; }
.shorts-nav button svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shorts-nav button:hover { background: var(--green); border-color: var(--green); color: #fff; }
.shorts-strip { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 0.6rem; cursor: grab; user-select: none; -webkit-user-select: none; }
.shorts-strip.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.shorts-strip::-webkit-scrollbar { height: 7px; }
.shorts-strip::-webkit-scrollbar-track { background: var(--paper-2); border-radius: 100px; }
.shorts-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
.shorts-strip::-webkit-scrollbar-thumb:hover { background: var(--green); }
.shorts-card { flex: 0 0 auto; width: clamp(13rem, 17vw, 20rem); scroll-snap-align: start; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-block); }
@media (min-width: 64.01rem) { .shorts-card { width: max(12rem, calc((100% - (var(--shorts-count, 7) - 1) * 1rem) / var(--shorts-count, 7))); } }
.shorts-thumb { position: relative; width: 100%; aspect-ratio: 9 / 16; display: block; overflow: hidden; }
.shorts-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shorts-thumb .play-badge { position: absolute; inset: 0; display: grid; place-items: center; }
.shorts-thumb .play-badge span { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--green); display: grid; place-items: center; font-size: 1.1rem; padding-left: 0.2rem; transition: transform 0.2s, background 0.2s, color 0.2s; }
.shorts-thumb:hover .play-badge span { transform: scale(1.1); background: var(--green); color: #fff; }
.shorts-card iframe { width: 100%; aspect-ratio: 9 / 16; border: 0; display: block; }

/* ==============================================================
   참여 · 후원
   ============================================================== */
.join-list { border-top: 1px solid var(--ink); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.join-item { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 1.2rem; padding: 1.6rem 0.4rem; border-bottom: 1px solid var(--line); transition: padding 0.25s, background 0.2s; }
.join-item .ji-num { font-family: var(--serif); font-size: 1.15rem; color: var(--green); font-weight: 700; }
.join-item h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; color: var(--ink); }
.join-item p { font-size: 1rem; color: var(--ink-2); margin-top: 0.3rem; }
.join-item .ji-go { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--green); white-space: nowrap; }
.join-item:hover { background: var(--card); padding-left: 1.1rem; }
.join-item:hover .ji-go .ar { transform: translateX(3px); transition: transform 0.2s; }

.call-block { background: var(--green); color: #fff; border-radius: 6px; padding: clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.call-block .call-label { font-size: 1.1rem; color: rgba(255,255,255,0.82); }
.call-block .call-number { display: inline-block; font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; margin: 0.7rem 0 0.4rem; color: #fff; }
.call-block .call-number:hover { color: #E9E9EC; }
.call-block .call-sub { font-size: 1rem; color: rgba(255,255,255,0.8); margin-top: 0.6rem; }
.call-block .call-sub a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); }

/* ==============================================================
   오시는 길
   ============================================================== */
.location-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; align-items: stretch; }
.location-map { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; min-height: 24rem; }
.location-map iframe { width: 100%; height: 100%; min-height: 24rem; border: 0; display: block; }
.location-info { padding-top: 0.3rem; }
.location-info dl { border-top: 1px solid var(--line); }
.location-info .li-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.location-info dt { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-3); padding-top: 0.15rem; }
.location-info dd { font-size: 1.08rem; color: var(--ink); }
.location-info .tel-link { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--green); }
.location-info .tel-link.sub { font-size: 1.05rem; }
.location-info dd a:not(.tel-link) { border-bottom: 1px solid var(--line); }
.map-links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }
.map-links a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 3rem; padding: 0.4rem 1.2rem; border: 1px solid var(--line); border-radius: 3px; font-size: 1rem; font-weight: 600; transition: border-color 0.18s, color 0.18s; }
.map-links a:hover { border-color: var(--green); color: var(--green); }

/* ==============================================================
   푸터
   ============================================================== */
/* 모리스식 다크 푸터 */
.site-footer { background: #171B24; color: rgba(255, 255, 255, 0.72); border-top: 0; padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.footer-brand .brand-name { font-size: 1.7rem; color: #fff; }
.footer-brand .brand-mark { font-size: 2rem; color: #fff; }
.footer-brand .f-desc { color: rgba(255, 255, 255, 0.6); margin-top: 1.1rem; max-width: 34ch; font-size: 1rem; }
.footer-brand .f-contact { margin-top: 1.4rem; font-size: 1rem; color: rgba(255, 255, 255, 0.6); line-height: 2; }
.footer-brand .f-contact a { color: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.footer-brand .f-tel { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: #fff; border: 0; }
.footer-brand .f-account { margin-top: 1.2rem; font-size: 1rem; color: rgba(255, 255, 255, 0.6); line-height: 1.9; }
.footer-brand .f-account strong { display: inline-block; margin-bottom: 0.15rem; color: rgba(255, 255, 255, 0.88); font-weight: 700; }
.footer-col h4 { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); margin-bottom: 1rem; font-family: var(--sans); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.1rem; }
.footer-col a { display: inline-flex; min-height: 2.4rem; align-items: center; color: rgba(255, 255, 255, 0.72); font-size: 1rem; transition: color 0.15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.9rem; color: rgba(255, 255, 255, 0.45); }
.footer-bottom a { color: rgba(255, 255, 255, 0.45); }
.footer-bottom a:hover { color: #fff; }

/* ==============================================================
   플로팅 퀵독 + 맨 위로
   ============================================================== */
.quickdock { position: fixed; right: 0.9rem; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 0; background: var(--white); border: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-hover); }
.quickdock a { display: grid; place-items: center; gap: 0.15rem; width: 4.1rem; padding: 0.7rem 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line-2); transition: background 0.18s, color 0.18s; }
.quickdock a:last-child { border-bottom: 0; }
.quickdock a svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.quickdock a:hover { background: var(--green); color: #fff; }

.to-top { position: fixed; right: 0.9rem; bottom: 1rem; z-index: 90; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.7rem; padding: 0.45rem 1.15rem; background: var(--ink); color: #fff; border-radius: 100px; font-size: 0.9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.to-top.show { opacity: 1; pointer-events: auto; }

/* ===== 스크롤 리빌 ===== */
.fade-anim { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-anim.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-anim { opacity: 1; transform: none; transition: none; } .banner-track { transition: none; } }

/* ==============================================================
   반응형
   ============================================================== */
@media (max-width: 74rem) {
  .read-grid { grid-template-columns: repeat(2, 1fr); }
  .sponsor-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 60rem) {
  .news-row { grid-template-columns: 1fr 1fr; }
  .news-row > .apply-card { grid-column: 1 / -1; }
  .column-links { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .vbanners { grid-template-columns: 1fr 1fr; }
  .quickdock { display: none; }
}

@media (max-width: 48rem) {
  .topbar-quote { display: none; }
  .topbar-in { justify-content: flex-end; }
  .callbtn { display: none; }
  .allmenu-btn { display: none; }
  .megamenu { display: none; }
  .menu-toggle { display: inline-flex; }
  .gnb { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(26,26,26,0.1); display: none; }
  .menu-open .gnb { display: block; }
  .gnb ul { flex-direction: column; align-items: stretch; padding: 0.5rem 5%; }
  .gnb a { min-height: 3.6rem; font-size: 1.2rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line-2); }
  .gnb a::after { display: none; }
  .gnb li:last-child a { border-bottom: 0; }
  /* 모바일: 서브메뉴는 항상 펼쳐서 들여쓰기 표시 */
  .gnb .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: block; min-width: 0; padding: 0 0 0.3rem; margin: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .gnb .submenu a { min-height: 3rem; font-size: 1.05rem; padding: 0.35rem 0 0.35rem 1rem; color: var(--ink-3); border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav-tiles { grid-template-columns: 1fr 1fr; }
  .read-grid { grid-template-columns: 1fr 1fr; }
  /* 모바일: 광고배너 1개씩 */
  .ad-slide { flex: 0 0 100%; }
  .ad-slide:nth-child(odd), .ad-slide:nth-child(even) { padding: 0; }
  .promo { flex-direction: column; align-items: flex-start; }
  .promo-aside { flex-direction: row; align-items: center; align-self: stretch; justify-content: space-between; }
  .sponsor-grid { grid-template-columns: repeat(2, 1fr); }
  .news-row { grid-template-columns: 1fr; }
  .column-links { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .shorts-card { width: min(66vw, 16rem); }
}

/* 쇼츠 헤더 안의 섹션 제목은 아래 여백 제거 */
.shorts-head .sec-head { margin-bottom: 0; }

/* ==============================================================
   서브페이지 공통 (통바이블 소개 / 캠퍼스 지역센터 등)
   ============================================================== */
.subhero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-2) 100%);
  color: #fff;
}
.subhero::after { /* 은은한 通 워터마크 */
  content: "通"; position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-weight: 800; font-size: clamp(9rem, 22vw, 20rem);
  color: rgba(255, 255, 255, 0.08); line-height: 1; pointer-events: none; user-select: none;
}
.subhero-in { position: relative; z-index: 1; padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.2rem, 5vw, 3.6rem); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.98rem; color: rgba(255, 255, 255, 0.82); margin-bottom: 0.9rem; }
.crumb a { color: rgba(255, 255, 255, 0.82); }
.crumb a:hover { color: #fff; text-decoration: underline; }
.crumb .sep { opacity: 0.6; }
.subhero h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; }
.subhero .subhero-lead { margin-top: 0.9rem; font-size: clamp(1.14rem, 2.1vw, 1.38rem); color: rgba(255, 255, 255, 0.92); max-width: 46ch; }

.page { padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
/* 서브비주얼↔콘텐츠 간격을 모든 페이지에서 .page 상단 패딩으로 통일
   (첫 요소가 margin-top 을 더해 페이지마다 간격이 달라지는 것을 방지) */
.page-content > *:first-child { margin-top: 0; }
/* 본문 전체를 헤더·히어로와 동일한 .wrap 라인에 맞춘다.
   폭은 .wrap 클래스가 담당하므로 .page-content 에서 width 를 재정의하지 않는다
   (재정의하면 .wrap 이 깨져 전체폭이 되어버림). 문단도 라인 끝까지 채운다. */

/* 본문 타이포 */
.prose > * + * { margin-top: 1.1rem; }
.prose p { font-size: 1.26rem; color: var(--ink-2); line-height: 1.9; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose .em { color: var(--green); font-weight: 700; }

/* 본문 이미지 (배너·교재 사진) */
.page-figure { margin: clamp(1.6rem, 3.5vw, 2.6rem) 0 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-block); background: var(--card); }
.page-figure img { width: 100%; height: auto; display: block; }
.page-figure.compact { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.page-figure.compact img { height: 28vw; max-height: 300px; min-height: 150px; object-fit: cover; }
.page-figure figcaption { padding: 0.7rem 1rem; font-size: 0.98rem; color: var(--ink-3); text-align: center; }
.book-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.book-gallery figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-block); }
.book-gallery img { width: 100%; height: auto; display: block; }
.book-gallery figcaption { padding: 0.7rem 0.9rem; font-size: 0.95rem; color: var(--ink-2); font-weight: 600; text-align: center; }

/* 교회 비전 배너 (석양·십자가 + 문구 오버레이) */
.church-banner { position: relative; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-block); }
.church-banner img { width: 100%; height: clamp(200px, 34vw, 400px); object-fit: cover; display: block; }
.church-banner-cap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.45rem; padding: 1rem 1.2rem; background: linear-gradient(180deg, rgba(16,18,26,0.22), rgba(16,18,26,0.42)); }
.church-banner-cap strong { color: #fff; font-size: clamp(1.35rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 14px rgba(0,0,0,0.55); }
.church-banner-cap span { color: rgba(255,255,255,0.96); font-size: clamp(1.02rem, 2.1vw, 1.45rem); font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,0.55); }

/* 이미지 밸류 카드 그리드 (아이콘 대신 사진 + 하단 캡션) */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.5vw, 1.2rem); }
.value-card { position: relative; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-block); aspect-ratio: 4 / 3; display: flex; align-items: flex-end; transition: transform 0.22s, box-shadow 0.22s; }
.value-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 0.5s ease; }
.value-card figcaption { width: 100%; padding: 1.8rem 1.15rem 1.05rem; color: #fff; font-weight: 800; font-size: clamp(1.08rem, 1.5vw, 1.3rem); letter-spacing: -0.02em; line-height: 1.35; background: linear-gradient(180deg, rgba(16,18,26,0) 0%, rgba(16,18,26,0.5) 62%, rgba(16,18,26,0.82) 100%); text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.value-card figcaption small { display: block; font-weight: 500; font-size: 0.9rem; color: rgba(255,255,255,0.85); margin-top: 0.2rem; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.value-card:hover img { transform: scale(1.05); }
@media (max-width: 60rem) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .value-grid { grid-template-columns: 1fr; } }

/* 지도 임베드 */
.map-embed { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-block); }
.map-embed iframe { display: block; width: 100%; height: clamp(320px, 46vw, 460px); border: 0; }

/* 섹션 제목 (서브페이지용) */
.blk { margin-top: clamp(2.6rem, 5vw, 3.8rem); }
.blk-head { margin-bottom: 1.4rem; }
.blk-eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--green); letter-spacing: 0.02em; }
.blk-eyebrow .cross { color: var(--green); font-style: normal; }
.blk-title { font-size: clamp(1.6rem, 3.4vw, 2.25rem); font-weight: 800; margin-top: 0.5rem; }

/* 강조 인용/리드 박스 */
.pullquote {
  background: var(--green-tint); border-left: 5px solid var(--green);
  border-radius: var(--r-md); padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.4rem, 3.5vw, 2.2rem);
  font-size: clamp(1.24rem, 2.6vw, 1.52rem); font-weight: 700; color: var(--ink); line-height: 1.7;
}
.qlist { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.qlist li { position: relative; padding-left: 1.9rem; font-size: 1.24rem; color: var(--ink-2); font-weight: 600; }
.qlist li::before { content: "?"; position: absolute; left: 0; top: 0; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--green); color: #fff; font-size: 0.85rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* 카드 그리드 */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; }
.info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-block); }
.info-card h3 { font-size: 1.36rem; font-weight: 800; margin-bottom: 0.5rem; }
.info-card p { color: var(--ink-2); font-size: 1.14rem; }
.info-card .ic { width: 2.9rem; height: 2.9rem; border-radius: 12px; background: var(--green-tint); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; font-weight: 800; font-size: 1.2rem; }
/* 통계 숫자(포토미션 성과 등): 박스 없이 크게 + 카운트업 */
.info-card .ic.stat-num { width: auto; height: auto; background: none; border-radius: 0; margin-bottom: 0.5rem; font-size: clamp(3rem, 7vw, 4rem); line-height: 1.02; font-weight: 900; letter-spacing: -0.02em; color: var(--green); font-variant-numeric: tabular-nums; }
/* 통계 카드: 가운데 정렬 + 세로 여유 있게 */
.info-card.stat-card { text-align: center; padding: clamp(2.1rem, 4vw, 3rem) 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.info-card.stat-card h3 { font-size: 1.42rem; }

/* 좌우 2열 배치 (이미지 + 내용) — 모바일에선 세로로 쌓임 */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.6vw, 1.8rem); align-items: stretch; margin-top: 1.2rem; }
.split > * { margin-top: 0; }
.split .split-media { margin: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-block); background: var(--card); aspect-ratio: 3 / 2; min-height: 0; }
.split .split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split .split-body { display: flex; flex-direction: column; justify-content: center; }
/* 내용이 정보 카드일 때(후원 안내 등): 가운데 정렬로 정돈 */
.split .info-card.split-body { align-items: center; text-align: center; gap: 0.2rem; padding: clamp(1.6rem, 3vw, 2.2rem); }
.split .info-card.split-body .ic { margin-bottom: 0.7rem; }
.split .info-card.split-body > p { max-width: 30ch; }
/* 후원 계좌 강조 박스 */
.acct { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: fit-content; max-width: 100%; background: var(--green-tint); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.85rem 1.4rem; margin: 0.5rem 0 0.9rem; }
.acct .bank { background: var(--green); color: #fff; font-weight: 800; font-size: 0.86rem; padding: 0.12rem 0.75rem; border-radius: 100px; letter-spacing: 0.02em; }
.acct .no { white-space: nowrap; font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 900; color: var(--ink); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }

/* 약력 리스트 카드 (번호 배지 없이 깔끔하게 · 세로 가운데) */
.bio-list { list-style: none; margin: 0; padding: clamp(1.5rem, 3vw, 2rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-block); display: grid; gap: 0.6rem; align-content: center; }
.bio-list li { position: relative; padding-left: 1.25rem; color: var(--ink-2); font-size: 1.12rem; line-height: 1.55; }
.bio-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.62em; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--green); }

/* ===== 신청 폼 (참여방) — 공통 레이아웃 + 폼별 --accent 로 구분 ===== */
.form-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; font-size: 0.92rem; color: #fff; background: var(--accent, var(--green)); padding: 0.32rem 0.85rem; border-radius: 100px; letter-spacing: 0.01em; }
.form-guide { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent, var(--green)); border-radius: var(--r-md); box-shadow: var(--shadow-block); padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.3rem, 3vw, 1.9rem); margin-top: 1rem; }
.form-guide p { color: var(--ink-2); font-size: 1.12rem; line-height: 1.75; }
.form-guide .g-list { margin: 0.7rem 0 0; display: grid; gap: 0.45rem; list-style: none; padding: 0; }
.form-guide .g-list li { position: relative; padding-left: 1.35rem; color: var(--ink-2); font-size: 1.06rem; line-height: 1.6; }
.form-guide .g-list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.62em; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--accent, var(--green)); }

.appform { margin-top: 1.5rem; display: grid; gap: 1.4rem; }
.fset { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-block); padding: clamp(1.3rem, 3vw, 1.9rem); border: 0; }
.fset { border: 1px solid var(--line); }
.fset-h { font-size: 1.24rem; font-weight: 800; color: var(--ink); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.55rem; }
.fset-h::before { content: ""; width: 0.55rem; height: 1.2rem; border-radius: 3px; background: var(--accent, var(--green)); }
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.3rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.flabel { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.flabel .req { color: var(--accent, var(--green)); margin-left: 0.12rem; }
.field input, .field select, .field textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 1.06rem; font-family: inherit; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.field textarea { min-height: 5.5rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent, var(--green)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--green)) 18%, transparent); }
.field .hint { font-size: 0.92rem; color: var(--ink-3); }
/* 라디오/체크 → 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-opt { position: relative; display: inline-flex; }
.chip-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip-opt span { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 100px; font-size: 1rem; font-weight: 600; color: var(--ink-2); background: #fff; cursor: pointer; transition: 0.15s; }
.chip-opt input:checked + span { background: var(--accent, var(--green)); border-color: var(--accent, var(--green)); color: #fff; }
.chip-opt input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--green)) 25%, transparent); }
/* 개인정보 동의 */
.consent { background: var(--paper-2, #f7f7f8); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.15rem; }
.consent summary { font-weight: 700; cursor: pointer; color: var(--ink); }
.consent .c-body { margin-top: 0.7rem; font-size: 0.97rem; color: var(--ink-2); line-height: 1.7; max-height: 15rem; overflow: auto; padding-right: 0.4rem; }
.consent .c-body h5 { font-weight: 800; color: var(--ink); margin: 0.7rem 0 0.15rem; font-size: 0.98rem; }
.consent-agree { margin-top: 0.9rem; }
.form-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 0.2rem; }
.btn-submit { background: var(--accent, var(--green)); color: #fff; border: 0; border-radius: 12px; padding: 0.95rem 2rem; font-size: 1.12rem; font-weight: 800; cursor: pointer; transition: filter 0.15s; }
.btn-submit:hover { filter: brightness(0.94); }
.form-note { font-weight: 700; color: var(--accent, var(--green)); }
.form-note.err { color: #d63333; }
/* 우편번호 찾기(주소) */
.addr-row { display: flex; gap: 0.5rem; }
.addr-row .addr-zip { max-width: 9rem; }
.btn-zip { flex: 0 0 auto; padding: 0.75rem 1.1rem; border: 1px solid var(--accent, var(--green)); background: #fff; color: var(--accent, var(--green)); border-radius: 12px; font-weight: 700; font-size: 1rem; font-family: inherit; cursor: pointer; white-space: nowrap; transition: 0.15s; }
.btn-zip:hover { background: color-mix(in srgb, var(--accent, var(--green)) 8%, #fff); }
.field input[readonly] { background: #f4f5f7; color: var(--ink-2); cursor: default; }
@media (max-width: 40rem) { .fgrid { grid-template-columns: 1fr; } }

@media (max-width: 44rem) {
  .split { grid-template-columns: 1fr; }
  .split .split-media { aspect-ratio: 16 / 10; order: -1; }
}

/* 프로젝트 스텝 (번호형) */
.steps { display: grid; gap: 1rem; counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-block); }
.step::before { counter-increment: step; content: counter(step); width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.step h3 { font-size: 1.32rem; font-weight: 800; margin-bottom: 0.3rem; }
.step p { color: var(--ink-2); font-size: 1.14rem; }
.step ul { margin-top: 0.5rem; display: grid; gap: 0.35rem; }
.step ul li { position: relative; padding-left: 1rem; color: var(--ink-2); font-size: 1.12rem; }
.step ul li::before { content: "·"; position: absolute; left: 0.15rem; color: var(--green); font-weight: 800; }

/* CTA 버튼 */
.btnrow { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3.1rem; padding: 0.5rem 1.5rem; border-radius: 100px; font-weight: 700; font-size: 1.05rem; transition: background 0.18s, color 0.18s, border-color 0.18s; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-2); }
.btn-ghost { border: 1.5px solid var(--green); color: var(--green); }
.btn-ghost:hover { background: var(--green); color: #fff; }

/* 지역센터 디렉터리 (아코디언) */
.region-note { color: var(--ink-2); font-size: 1.16rem; margin-bottom: 1.4rem; }
.region-list { display: grid; gap: 0.8rem; }
.region { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-block); overflow: hidden; }
.region > summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 0.8rem;
  font-size: 1.3rem; font-weight: 800; color: var(--ink);
}
.region > summary::-webkit-details-marker { display: none; }
.region > summary .chev { margin-left: auto; transition: transform 0.25s; color: var(--green); }
.region[open] > summary .chev { transform: rotate(180deg); }
.region > summary .cnt { font-size: 0.9rem; font-weight: 700; color: var(--green); background: var(--green-tint); border-radius: 100px; padding: 0.15rem 0.7rem; }
.region-body { padding: 0 0.6rem 0.6rem; }

/* 반응형 테이블 */
.rtable { width: 100%; border-collapse: collapse; font-size: 1.12rem; table-layout: fixed; }
.rtable th, .rtable td { text-align: left; padding: 0.8rem 0.9rem; border-top: 1px solid var(--line); vertical-align: top; word-break: keep-all; overflow-wrap: anywhere; }
.rtable th:nth-child(1), .rtable td:nth-child(1) { width: 18%; }
.rtable th:nth-child(2), .rtable td:nth-child(2) { width: 24%; }
.rtable th:nth-child(3), .rtable td:nth-child(3) { width: 14%; }
.rtable th:nth-child(4), .rtable td:nth-child(4) { width: 44%; }
.rtable thead th { border-top: 0; color: var(--ink-3); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; }
.rtable tbody tr:hover { background: var(--paper-2); }
.rtable .church { font-weight: 700; color: var(--ink); }
.rtable .pastor { color: var(--ink-2); }
.rtable a { color: var(--green); font-weight: 600; }

@media (max-width: 40rem) {
  /* 모바일: 표를 카드형으로 재구성 */
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable td:nth-child(1), .rtable td:nth-child(2), .rtable td:nth-child(3), .rtable td:nth-child(4) { width: 100%; }
  .rtable thead { display: none; }
  .rtable tr { border-top: 1px solid var(--line); padding: 0.7rem 0.3rem; }
  .rtable tr:first-child { border-top: 0; }
  .rtable td { border: 0; padding: 0.2rem 0.6rem; }
  .rtable td::before { content: attr(data-th) " · "; color: var(--ink-3); font-weight: 700; }
  .rtable .church::before { color: var(--green); }
}