/* 금구제일교회 — 공통 스타일
   브랜드색은 로고 원본(PNG)에서 실측한 값이다: 남색 #213848 · 초록 #58B530 · 파랑 #0097E1 */

:root {
  --navy: #213848;
  --navy-soft: #35516a;
  /* 로고 원색: 초록 #58B530 · 파랑 #0097E1.
     ★그 원색은 흰 글씨를 얹으면 대비가 2.6:1 / 3.2:1 로 WCAG AA(4.5:1)에 못 미친다.
       농촌 교회 홈페이지는 장년·노년층이 주 사용자라 가독성이 곧 접근성이다.
       그래서 '면(배경)에 쓰는 색'은 어둡게 조정한 값을 쓰고, 원색은 로고·장식에만 남긴다. */
  --green-logo: #58b530;
  --blue-logo: #0097e1;
  --green: #3a771f;   /* 흰 글씨 대비 5.5:1 */
  --blue: #0069a6;    /* 흰 글씨 대비 5.9:1 */
  --ink: #1c2833;
  --muted: #5d6b78;
  --line: #e3e8ed;
  --bg: #ffffff;
  --bg-soft: #f5f8fa;
  --radius: 10px;
  --shadow: 0 2px 14px rgba(33, 56, 72, 0.08);
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all; /* 한글 단어가 중간에서 잘리지 않게 */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }

/* ── 헤더 ───────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 74px; }
.logo img { height: 38px; width: auto; }
.logo { margin-right: auto; }

.nav { display: flex; gap: 4px; }
.nav a {
  display: block; padding: 10px 14px; border-radius: 8px;
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px;
  /* ★안전망 — 메뉴 이름이 두 줄로 접히지 않게 한다.
     .nav 는 flex 라 항목 높이가 '가장 높은 항목'에 맞춰 늘어난다. 그래서 이름 하나만
     두 줄이 되어도 메뉴 줄 전체가 46px → 71px 로 부풀어 74px 헤더 안에서 답답해진다.
     (실측: 901~999px 구간에서 '조직과 기관'·'말씀과 찬양'이 접히며 10개 항목 전부가 71px가 됐다)
     이름을 네 글자로 줄여 원인을 없앴고, 이 줄은 나중에 이름을 바꿔도 같은 일이
     조용히 재발하지 않게 하는 두 번째 방어선이다. */
  white-space: nowrap;
}
.nav a:hover { background: var(--bg-soft); }
.nav a[aria-current="page"] { color: var(--blue); background: #eaf6fd; }

/* ★HTML 에 hidden 을 기본으로 달아 두고, 넓은 화면에서는 CSS 로 다시 보이게 한다.
   이유: 자바스크립트가 안 열리는 상황(회선 문제·구형 기기·차단)에서 예전에는
   모바일 메뉴가 펼쳐진 채 본문을 덮어 버렸다. hidden 을 기본으로 두면
   자바스크립트가 없어도 메뉴가 본문을 가리지 않는다.
   (넓은 화면에서는 메뉴가 항상 보여야 하므로 여기서 되살린다) */
.nav[hidden] { display: flex; }

.nav-toggle {
  display: none; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; width: 42px; height: 42px; font-size: 20px; cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 74px 0 auto 0; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px 20px 16px;
    box-shadow: var(--shadow);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 13px 8px; border-radius: 0; border-bottom: 1px solid var(--line); }
}

/* ── 히어로 ─────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #2f5570 60%, #1f6f97 100%);
  color: #fff; padding: 74px 0 66px; text-align: center;
}
/* 사진을 깐 히어로 — 글자가 반드시 읽히도록 어두운 막을 사진 위에 겹친다 */
.hero-photo {
  background-image:
    linear-gradient(rgba(20, 38, 51, 0.72), rgba(20, 38, 51, 0.78)),
    url("../img/photos/sanctuary-wide.jpg");
  background-size: cover;
  background-position: center 58%;
}
/* 사진 없는 그라데이션 히어로에서도 4.5:1을 넘도록 밝힌 값(#a9dcf7는 3.78:1로 미달이었다) */
.hero .verse { color: #dbeffd; font-size: 15px; letter-spacing: .02em; margin: 0 0 10px; }
.hero h1 { margin: 0 0 14px; font-size: clamp(28px, 5vw, 44px); line-height: 1.3; }
/* .verse 와 같은 값으로 맞춘다 — #d5e3ee 는 그라데이션 최명부(#1f6f97)에서 4.25:1 로 미달이었다.
   화면 우하단에서만 깨져 육안으로는 놓치기 쉬운 자리다. */
.hero p.sub { margin: 0 auto; max-width: 40rem; color: #dbeffd; }

/* 빠른 접근 바 — 처음 오는 사람이 가장 먼저 찾는 4가지 */
.quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: -34px auto 0; position: relative; z-index: 2; }
.quicklinks a {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 14px; text-align: center;
  text-decoration: none; color: var(--navy); font-weight: 700;
}
.quicklinks a:hover { border-color: var(--blue); color: var(--blue); }
.quicklinks .ico { display: block; font-size: 22px; margin-bottom: 6px; }
@media (max-width: 700px) { .quicklinks { grid-template-columns: repeat(2, 1fr); } }

/* ── 섹션 ───────────────────────────────────────── */
section { padding: 58px 0; }
section.soft { background: var(--bg-soft); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.section-head h2 { margin: 0; font-size: 24px; color: var(--navy); }
/* 손가락으로 누르는 링크는 세로 24px 이상 확보한다(모바일 터치 실수 방지) */
.section-head a { font-size: 14px; font-weight: 600; text-decoration: none; display: inline-block; padding: 4px 2px; }

.page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 46px 0; }
.page-head h1 { margin: 0 0 6px; font-size: 30px; color: var(--navy); }
.page-head p { margin: 0; color: var(--muted); }

/* ── 카드/그리드 ────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid.c3, .grid.c2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; font-size: 18px; color: var(--navy); }
.card p:last-child { margin-bottom: 0; }

/* 유튜브 임베드 — 16:9 유지 */
.video { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── 지도(오시는 길) ─────────────────────────────── */
.map-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.map { position: relative; aspect-ratio: 16 / 9; background: var(--bg-soft); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-fallback { padding: 22px; margin: 0; color: var(--muted); }
.map-bigger { display: block; padding: 10px 18px 0; font-size: 14px; font-weight: 600; }
.map-actions { padding: 14px 18px 18px; }
.map-label { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* 모바일에서 지도가 너무 납작해지지 않게 세로를 조금 키운다 */
@media (max-width: 620px) {
  .map { aspect-ratio: 4 / 3; }
  .btn-row .btn { flex: 1 1 46%; text-align: center; padding: 12px 10px; }
}

/* ── 표 ─────────────────────────────────────────── */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; }
th { background: var(--bg-soft); color: var(--navy); font-size: 15px; white-space: nowrap; }
td.time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ★안전망 — 표를 .table-scroll 로 감싸는 것을 잊어도 페이지가 옆으로 밀리지 않게.
   원인: th 의 white-space:nowrap 이 '표가 줄어들 수 있는 최소 폭'을 만든다.
         그 최소 폭이 화면보다 크면 페이지 전체가 가로로 밀린다(실측: 375px 화면에서 434px).
   좁은 화면에서는 그 nowrap 을 풀어 머리글이 두 줄로 접히게 한다 — 원인 자체를 없애는 방식이다.
   (감싼 표에도 적용되지만 해가 없다. 오히려 옆으로 밀어 보지 않고 한눈에 읽힌다.) */
@media (max-width: 620px) {
  th { white-space: normal; }
  /* 머리글 칸이 한 글자씩 세로로 찌그러지지 않게 최소 폭을 준다.
     (실측: 이 줄이 없으면 '새가족 등록 신청'이 한 글자씩 7줄로 쪼개진다) */
  th { min-width: 5.5em; }
  /* 띄어쓰기 없이 긴 글자 덩어리(주소·긴 주소값)가 와도 넘치지 않게 하는 마지막 방어.
     머리글에는 걸지 않는다 — 낱말 중간을 끊어 읽기 어려워지기 때문이다. */
  td { overflow-wrap: anywhere; }
}

/* ── 목록(공지) ─────────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list li { border-bottom: 1px solid var(--line); }
.list a, .list .row { display: flex; gap: 16px; padding: 15px 4px; text-decoration: none; color: var(--ink); align-items: baseline; }
.list a:hover { background: var(--bg-soft); }
/* ★min-width:0 이 없으면 flex 항목이 '내용 최소폭'을 고집해서 좁은 화면에서 페이지가
   가로로 밀린다(실측: 375px에서 공지 제목+날짜가 화면을 ~60px 넘겼다). */
.list .t { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.list .d { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { color: var(--muted); padding: 22px 4px; }

/* ── 데이터 상태 표시 ────────────────────────────────
   ★"불러오지 못했는데 화면은 멀쩡해 보이는" 상태를 만들지 않기 위한 장치다.
     낡은 예시를 최신 소식처럼 보여주는 것이 빈 화면보다 나쁘다. */
.data-warning {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #e6c07a;
  border-left: 5px solid #b06f00;   /* 실측 대비 3.88:1 — 비텍스트 3:1 기준 통과 */
  border-radius: var(--radius);
  background: #fff8e8;
  color: #5c4405;            /* 실측 대비 8.69:1 (#5c4405/#fff8e8) — WCAG AA 4.5:1 통과 */
  font-size: 14px;
  line-height: 1.6;
}
/* 시트의 링크 칸이 잘못 적혀 링크를 못 만들었을 때, 그 사실을 항목에 표시한다.
   ★조용히 링크만 사라지면 교회는 무엇을 잘못 넣었는지 알 수 없다. */
.link-problem {
  flex: none;
  align-self: center;
  font-size: 12px;
  color: #7a4a00;            /* 실측 대비 6.86:1 (#7a4a00/#fff4e0) — WCAG AA 통과 */
  background: #fff4e0;
  border: 1px solid #e6c07a;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
@media (max-width: 520px) { .link-problem { white-space: normal; } }

/* 예시 데이터임을 항목마다 표시 — 실제 공지와 눈으로 구분되게 */
.badge-seed {
  flex: none;
  align-self: center;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e7edf2;
  color: #40525f;            /* 실측 대비 6.87:1 (#40525f/#e7edf2) — WCAG AA 4.5:1 통과 */
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
/* 아주 좁은 화면에서는 제목과 날짜를 위아래로 쌓는다(한 줄에 붙들면 넘친다) */
@media (max-width: 520px) {
  .list a, .list .row { flex-direction: column; gap: 4px; align-items: stretch; }
  .list .d { font-size: 13px; }
}

/* ── 버튼 ───────────────────────────────────────── */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--blue); color: #fff; text-decoration: none; font-weight: 700;
}
.btn:hover { background: #00547f; }
/* 배경이 없는 버튼은 테두리가 "버튼임을 알리는 유일한 단서"다 —
   장식용 구분선(--line 1.23:1)을 쓰면 SC 1.4.11(비텍스트 3:1)에 미달한다. */
.btn.ghost { background: transparent; color: var(--navy); border: 1px solid #6b7c8a; }
.btn.green { background: var(--green); }
.btn.green:hover { background: #2d5e17; }

/* ── 갤러리 ─────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery figcaption { padding: 10px 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ── 푸터 ───────────────────────────────────────── */
.site-footer { background: var(--navy); color: #c6d5e0; padding: 40px 0 34px; margin-top: 20px; font-size: 14px; }
/* 푸터 링크도 터치 높이 24px 이상 (전화·이메일·바로가기) */
.site-footer a { color: #9fd6f5; display: inline-block; padding: 3px 0; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }
.site-footer h4 { color: #fff; font-size: 15px; margin: 0 0 10px; }
.site-footer p { margin: 4px 0; }
.site-footer .copy { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); color: #93a8b7; }
@media (max-width: 800px) { .site-footer .cols { grid-template-columns: 1fr; } }

/* 접근성: 키보드 포커스는 항상 보이게 */
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.notice-box {
  background: #fffbe8; border: 1px solid #f0dfa0; border-radius: var(--radius);
  padding: 14px 16px; color: #6b5518; font-size: 14px;
}

/* ── 섹션 하위 메뉴 ──────────────────────────────────
   페이지가 늘어나면서 위쪽 주 메뉴만으로는 같은 묶음의 페이지 사이를 오갈 수 없다.
   ★드롭다운(마우스를 올리면 펼쳐지는 메뉴)은 일부러 쓰지 않았다 —
     주 사용자가 장년·노년층이고 휴대폰 터치에서는 '올리기'가 없어 실패하기 쉬우며,
     자바스크립트가 막히면 하위 항목에 아예 닿을 수 없기 때문이다.
   대신 그 묶음에 속한 페이지 위쪽에 '순수 링크' 줄을 둔다 — 언제나 동작한다. */
.subnav { background: #fff; border-bottom: 1px solid var(--line); }
.subnav ul {
  list-style: none; margin: 0; padding: 10px 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.subnav a {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-soft);
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: 15px;
}
.subnav a:hover { border-color: var(--blue); color: var(--blue); }
.subnav a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── 조직도 ─────────────────────────────────────────
   그림(이미지)으로 그리지 않는다 — 화면 낭독기가 읽지 못하고, 확대하면 글자가 깨지며,
   조직이 바뀔 때마다 그림을 다시 만들어야 한다. 글과 목록으로 같은 구조를 나타낸다. */
.org-flow { display: grid; gap: 14px; }
.org-node {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--navy);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
.org-node h3 { margin: 0 0 6px; font-size: 18px; color: var(--navy); }
.org-node .who { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.org-node p:last-child { margin-bottom: 0; }
.org-node.is-committee { border-left-color: var(--green); }
.org-node.is-group { border-left-color: var(--blue); }

/* 위원회가 맡은 일 목록 */
.duties { margin: 8px 0 0; padding-left: 20px; }
.duties li { margin: 3px 0; }

/* ── 글 목록(묵상·칼럼) ──────────────────────────────
   글이 길 수 있어 목록에서는 제목만 보이고, 누르면 본문이 펼쳐지게 했다.
   ★<details> 를 쓴 이유: 브라우저가 스스로 여닫는 기능이라 자바스크립트가 막혀도 동작하고,
     키보드(탭·엔터)로도 열리며, 화면 낭독기가 '접힘/펼침' 상태를 그대로 읽어 준다. */
.articles { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.article {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.article > summary {
  padding: 16px 18px; cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
}
.article > summary::-webkit-details-marker { display: none; }
.article > summary:hover { background: var(--bg-soft); }
.article > summary .t { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; color: var(--navy); overflow-wrap: anywhere; }
.article > summary .meta { color: var(--muted); font-size: 14px; white-space: nowrap; }
/* 펼침 표시 — 어르신도 '누르면 열린다'를 알 수 있게 글자로 적는다(모양만으로 알리지 않는다) */
.article > summary .more { flex: none; font-size: 14px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.article[open] > summary { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.article[open] > summary .more { color: var(--muted); }
.article .body { padding: 18px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; }
.article .by { padding: 0 18px 18px; margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 520px) {
  .article > summary .meta, .article > summary .more { white-space: normal; }
}

/* ── 찬양곡 ──────────────────────────────────────────
   ★영상을 처음부터 끼워 넣지 않는다(클릭하면 그때 불러온다).
     곡이 20개면 유튜브 창이 20개 열리는 셈이라 느린 회선에서 페이지가 열리지 않는다.
     누르기 전까지는 그림 한 장만 받아 온다. */
.praise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px) { .praise-grid { grid-template-columns: 1fr; } }
.praise-item {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.praise-media { position: relative; aspect-ratio: 16 / 9; background: #10222e; }
.praise-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 클릭 전 표시되는 '겉면' — 그림 + 재생 단추 */
.praise-play {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  border: 0; background: #10222e; cursor: pointer; display: block;
}
.praise-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.praise-play .play-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(16, 34, 46, .82); color: #fff; border: 2px solid #fff;
  border-radius: 999px; padding: 10px 20px; font-size: 15px; font-weight: 700;
  white-space: nowrap;
}
.praise-body { padding: 16px 18px; }
.praise-body h3 { margin: 0 0 4px; font-size: 18px; color: var(--navy); overflow-wrap: anywhere; }
.praise-body .meta { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.praise-body p { margin: 0 0 10px; }
.praise-body p:last-child { margin-bottom: 0; }
/* 유튜브가 아닌 링크(멜론·벅스·블로그 등)는 바깥으로 나가는 단추로 처리한다 */
.praise-link { display: inline-block; font-weight: 700; text-decoration: none; padding: 8px 0; }