@charset "UTF-8";
/* ==========================================================================
   pages.css — 하위 페이지 5 전용 (gt4-B2 · DESIGN_v4 §4-2 계승 컴포넌트 · §5-1 · §5-2)
   welcome · about · gather · village · news
   컴포넌트: PageIntro · VisitSteps · MapLinks · ContactButtons · ValueItem · QuoteBlock ·
             ScheduleTable · MinistryCard · PhotoGrid · PostCard(main.js 가 생성) · 다음으로(LinkCard 글형)
   hex 리터럴 없음(색은 tokens.css 변수만 · check_v4 C16). 모션 해제는 base.css 의 reduced-motion 블록이 담당.
   ========================================================================== */

/* ---------- 하위 페이지 머리 (PageIntro · DESIGN §5-1: 사진 → 글 순) ---------- */
.page-intro { padding-block: var(--sp-6) var(--section-pad); }
.page-intro .photo { margin-bottom: var(--sp-6); }
.page-intro .photo img { object-position: 50% 45%; }
.page-intro h1 { margin-bottom: var(--sp-3); }
.page-intro .lead { max-width: 56ch; }
.page-intro .lead + .lead { margin-top: var(--sp-2); }
@media (min-width: 768px) {
  .page-intro .photo.ratio-3-2 { aspect-ratio: 21 / 9; }
}
@media (min-width: 1200px) {
  .page-intro .photo.ratio-3-2 { aspect-ratio: 5 / 2; }
}
/* 머리 사진이 390 에서 4:5, 768+ 에서 3:2 (village · 02-screens §5) */
.page-intro .photo.ratio-4-5-to-3-2 { aspect-ratio: 4 / 5; }
@media (min-width: 768px) {
  .page-intro .photo.ratio-4-5-to-3-2 { aspect-ratio: 3 / 2; }
}
/* 사진 없는 머리 (news) */
.page-intro.no-photo { padding-top: var(--sp-7); }

/* ---------- 글 + 사진 2단 (about · gather 교차) ---------- */
.split { display: grid; gap: var(--sp-5); align-items: center; }
.split .photo { width: 100%; }
.split .photo.narrow { max-width: 420px; }
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .split.photo-left .photo { order: -1; }
}
.prose { max-width: 60ch; }
.prose p + p { margin-top: var(--sp-3); }
.section-cta { margin-top: var(--sp-6); }

/* ---------- welcome: 접점 단계 (VisitSteps · DESIGN §4-1 · §5-2) ---------- */
.visit-steps { display: grid; gap: var(--sp-7); }
.visit-step {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.visit-step:first-child { border-top: 0; padding-top: 0; }
.step-label {
  display: inline-flex; align-items: center;
  min-height: 28px;
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.visit-step h2 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); }
.visit-step .answer { font-size: var(--fs-lead); }
.visit-step .answer-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); color: var(--brand); font-weight: 600; }
.visit-step .answer-link svg { width: 18px; height: 18px; }
.visit-step .answer-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.visit-step .photo.narrow { max-width: 360px; }
@media (min-width: 768px) {
  .visit-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--sp-7); }
  .visit-step > .step-text { grid-column: 1; }
  .visit-step > .step-media { grid-column: 2; }
  .visit-step.full > * { grid-column: 1 / -1; }
}

/* 주소 (본문 유일 1회) */
.address {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  font-weight: var(--fw-quote); /* gt4-F8: 인용 서체 Thin(100) */
  margin-block: var(--sp-4);
}

/* 오시는 길 사진 2~3 — 외관 사진 부재 시 2장도 균등 분할 (gemini R1 minor 2) */
.visit-photos {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--sp-5);
}
.visit-photos figcaption { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-muted); }

/* 지도 앱 4 (MapLinks) */
.map-links { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.map-links .btn { justify-content: space-between; }
@media (min-width: 768px) {
  .map-links { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .map-links { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .map-links .btn { justify-content: center; }
}

/* 전화 블록 (ContactButtons) */
.contact-block {
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  background-color: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  border-top-right-radius: var(--radius-motif);
}
.contact-block h3 { margin-bottom: var(--sp-3); }
.contact-block .btn-group { margin-top: var(--sp-4); }

/* ---------- 다음으로 (LinkCard 글형 ×1~2) ---------- */
.next-links { display: grid; gap: var(--sp-4); }
.next-links .card { padding: var(--sp-5); flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--touch); font-weight: 700; font-size: var(--fs-h3); }
.next-links .card svg { width: 24px; height: 24px; flex: none; color: var(--brand); }
@media (min-width: 768px) {
  .next-links { grid-template-columns: repeat(2, 1fr); }
  .next-links.single { grid-template-columns: minmax(0, 560px); }
}

/* ---------- about: 키워드 3 · 가치 3 · 인용 ---------- */
.keywords { text-align: center; padding-block: var(--sp-7); }
.keywords .key-line {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.keywords .key-line { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.18em; text-underline-offset: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* gemini P5 minor 3: 줄바꿈 시 밑줄 분절 */
.keywords .lead { margin-inline: auto; max-width: 40ch; }

.value-grid { display: grid; gap: var(--sp-5); }
.value-item .photo { margin-bottom: var(--sp-4); }
.value-item h3 { margin-bottom: var(--sp-2); }
.value-item p { color: var(--text-muted); }
@media (min-width: 768px) {
  .value-grid { grid-template-columns: repeat(3, 1fr); }
}

.quote-grid { display: grid; gap: var(--sp-5); }
.quote {
  margin: 0;
  padding: var(--sp-6);
  background-color: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  border-top-right-radius: var(--radius-motif);
}
.quote p { font-family: var(--font-quote); font-size: var(--fs-h3); font-weight: var(--fw-quote); line-height: 1.55; } /* gt4-F8: Noto Sans KR Thin(100) — 받은 굵기만 지정해 가짜 굵게 합성 방지 */
.quote .quote-by, .quote .quote-note { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--text-muted); font-family: var(--font-sans); font-weight: 400; }
@media (min-width: 768px) {
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- gather: 시간표 (ScheduleTable) ---------- */
.schedule { display: grid; gap: var(--sp-3); }
.schedule-row {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.schedule-row dt { font-weight: 700; }
.schedule-row dd { margin: 0; color: var(--text); font-weight: 600; }
.schedule-row dd .note { display: block; margin-top: var(--sp-1); font-weight: 400; font-size: var(--fs-small); color: var(--text-muted); }
@media (min-width: 768px) {
  .schedule { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .schedule { grid-template-columns: repeat(3, 1fr); }
}
.definition { max-width: 60ch; margin-bottom: var(--sp-5); font-family: var(--font-serif); font-weight: var(--fw-quote); font-size: var(--fs-lead); }
.groups-actions { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 768px) {
  .groups-actions { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- village: 사역 카드 (MinistryCard · 768+ 좌우 교차) ---------- */
.ministry { padding-block: var(--section-pad); border-top: 1px solid var(--line); }
.ministry:first-of-type { border-top: 0; }
.ministry-inner { display: grid; gap: var(--sp-6); }
.ministry-photos { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-3); align-items: end; }
.ministry-photos .photo:nth-child(2) { border-top-right-radius: var(--radius-card); border-bottom-left-radius: var(--radius-motif); }
.ministry-sub { font-family: var(--font-serif); font-weight: var(--fw-quote); font-size: var(--fs-lead); color: var(--text-muted); margin-bottom: var(--sp-4); }
.ministry h2 { margin-bottom: var(--sp-2); }
.ministry .facts p + p { margin-top: var(--sp-3); }
.ministry .hours { margin-top: var(--sp-4); font-weight: 600; }
.join {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background-color: var(--bg-surface);
  border-left: 4px solid var(--accent);
  border-radius: var(--sp-2);
}
.join p { font-weight: 600; }
.join .btn-group { margin-top: var(--sp-4); }
@media (min-width: 768px) {
  .ministry-inner { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-7); }
  .ministry:nth-of-type(even) .ministry-photos { order: -1; }
}

/* ---------- news: 영상 · 소식 카드 · 갤러리 (PhotoGrid) ---------- */
.video-wrap { max-width: 720px; }
.video-actions { margin-top: var(--sp-4); }
.post-grid { display: grid; gap: var(--sp-4); }
.post-grid .card-body .eyebrow { margin-bottom: 0; align-self: flex-start; }
.post-details { margin-top: var(--sp-2); }
.post-details summary { list-style: none; display: inline-flex; width: auto; cursor: pointer; }
.post-details summary::-webkit-details-marker { display: none; }
.post-details[open] summary { margin-bottom: var(--sp-3); }
.post-details p { margin-top: var(--sp-2); }
@media (min-width: 768px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.photo-grid .photo:nth-child(4n+2) { border-top-right-radius: var(--radius-card); border-bottom-left-radius: var(--radius-motif); }
@media (min-width: 768px) {
  .photo-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
}
@media (min-width: 1200px) {
  .photo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- community: 탭 3 · 영상 게시판 · 사진 게시판 (gt4-F3) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.tabs .tab { display: inline-flex; align-items: center; min-height: var(--touch); padding: 8px var(--sp-5); border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--bg-surface); font-weight: 700; color: var(--text); }
.tabs .tab:hover { border-color: var(--brand); color: var(--brand); }
.tabs .tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: var(--text-on-brand); }
html.js-tabs .tab-panel[hidden] { display: none; }
.video-grid { display: grid; gap: var(--sp-5); }
.video-card { display: flex; flex-direction: column; gap: var(--sp-3); color: inherit; }
.video-card .photo { display: block; }
.video-card img { transition: transform var(--dur-reveal) var(--ease-out); }
.video-card:hover img { transform: scale(1.04); }
.video-card:hover strong { color: var(--brand); }
.video-meta { display: flex; flex-direction: column; gap: var(--sp-1); }
.video-meta time { font-size: var(--fs-small); color: var(--text-muted); }
.video-meta strong { font-size: var(--fs-body); line-height: 1.4; }
@media (min-width: 768px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .video-grid { grid-template-columns: repeat(4, 1fr); } }
.board-grid { gap: var(--sp-3); }
.board-item { display: block; }
.board-item img { transition: transform var(--dur-reveal) var(--ease-out); }
.board-item:hover img { transform: scale(1.04); }
@media (min-width: 768px) { .board-grid { grid-template-columns: repeat(4, 1fr); } }

/* F4: 인용 출처 줄은 기존 .quote-by 사용 */

/* ==========================================================================
   gt4-D1b 하위 5페이지 — D1a 컴포넌트(components.css) 안으로 옮긴 기존 요소의 자리 맞춤만
   (이전 규칙이 .visit-step · .ministry 범위에 걸려 있어 컴포넌트 안에서 풀린 것 · 값은 토큰)
   ========================================================================== */
/* welcome: 접점 답·링크(이전 .visit-step 범위 밖) */
.answer-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); margin-top: var(--sp-2); color: var(--brand); font-weight: 600; }
.answer-link svg { width: 18px; height: 18px; flex: none; }
.answer-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.zigzag-card .answer { font-size: var(--fs-lead); font-weight: 400; }
.zigzag-card .map-links { margin-top: var(--sp-4); }
.visit-step-row .two-col-head h2 { margin-top: var(--sp-2); }
#ask .eyebrow, #ask .ask-title { color: var(--c-paper); }
#ask h2 { margin-top: var(--sp-2); }
#ask .ask-title { margin-top: var(--sp-6); font-size: var(--fs-h3); }
/* groups · ministry: 인용 아래 소제목 한 줄 */
.groups-invite, .ministry-intro { margin-top: var(--sp-5); }
/* ministry: 지그재그 카드 안 사역 정보(이전 .ministry 범위) */
.zigzag-card .ministry-sub { margin: var(--sp-2) 0 0; }
.zigzag-card .facts p { margin: 0; }
.zigzag-card .facts p + p { margin-top: var(--sp-2); }
.zigzag-card .hours { margin-top: var(--sp-4); font-weight: 600; }
.zigzag-card .join { background-color: var(--bg-soft); }
/* ministry: 다른 사역 사진 타일(시기 + 이름 + 설명 한 문장) — 설명이 길어 390 1열 · 세로 여유 */
.more-tiles { grid-template-columns: 1fr; }
.more-tiles .tile { aspect-ratio: auto; min-height: 420px; }
@media (min-width: 768px) { .more-tiles { grid-template-columns: repeat(3, 1fr); } .more-tiles .tile { min-height: 480px; } }
/* groups · ministry: 작은 카드 안 라벨·설명 */
.mini-card .labels { margin-bottom: var(--sp-1); }
.mini-card .mini-meta { margin: 0; line-height: 1.55; }
/* community: 히어로 아래 탭 띠 · 설교 배너 아래 목록 */
.tabs-bar { padding-block: var(--sp-4); border-bottom: 1px solid var(--line); background-color: var(--bg-canvas); }
.tabs-bar .tabs { margin-top: 0; }
.sermon-lists { margin-top: var(--sp-7); }
#sermon .sermon-banner { margin-top: var(--sp-5); }
/* community: 매거진 큰 카드에서 '자세히 보기'를 펼치면 카드가 길어져 글자가 옅은 위쪽 사진 위로 올라간다(390 실측 대비 1.8) → 펼친 동안만 오버레이를 전체 짙게 */
#posts .mag-main:has(details[open])::after { background: linear-gradient(to top, rgba(22, 21, 19, 0.94) 0%, rgba(22, 21, 19, 0.86) 55%, rgba(22, 21, 19, 0.74) 100%); }
#posts .mag-main .ovl-body { background: linear-gradient(to top, rgba(22, 21, 19, 0.74) 0%, rgba(22, 21, 19, 0.64) calc(100% - var(--sp-7)), rgba(22, 21, 19, 0) 100%); }   /* gt4-F18: 큰 카드 글자 뒤 국소 스크림 보강(F10 공용 .64/.52 → .74/.64) — 접힘 상태 날짜·제목·첫 문단 여유 확보 */

/* gt4-F8 오시는 길 지도 칸 (welcome #visit · .zigzag-media.map-embed) — 모바일 4:3(지그재그 기본) · 768+ 16:9 · 모서리는 지그재그 토큰 그대로 */
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) { .zigzag-media.map-embed { aspect-ratio: 16 / 9; } }
@media (min-width: 900px) { .zigzag-media.map-embed { height: auto; min-height: 0; } }
.zigzag-media.map-embed[hidden] { display: none; }
.zigzag:has(> .map-embed) .zigzag-card { margin-top: var(--sp-4); }   /* 지도 칸은 카드를 겹치지 않는다 — 지도 오른쪽 아래 구글 표기·조작 버튼이 가려지지 않게 */
@media (min-width: 900px) { .zigzag:has(> .map-embed) .zigzag-card { margin: 0 0 0 var(--sp-5); } }
.zigzag:has(> .map-embed[hidden]) { grid-template-columns: 1fr; min-height: 0; }   /* 지도 숨김(오프라인) 시 카드만 한 칸 */
.zigzag:has(> .map-embed[hidden]) .zigzag-card { margin: 0 var(--gutter); }
.map-embed iframe { position: relative; z-index: 1; }   /* gt4-F11(worker-2) 지도 폴백용 — master 지시로 F10 에서 추가 · .map-embed 는 .zigzag-media 라 이미 position: relative */
.map-embed .map-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sp-5); text-align: center; color: var(--text-muted); }

/* gt4-F22 (오너 2026-10-24): worship 같은 제목 인셋 배너만 — 홈과 같은 방향(아래쪽) */
section[aria-labelledby="photos-title"] .inset-banner > img { object-position: 50% 75%; }