/* =========================================================
   청주 정중교회(jjch) — 교회 미니홈 템플릿 v3 (kakkai.co.kr 결)
   원칙: 흰 바탕 + 푸른빛 회색(--pt) 포인트 한 색 (2026-09-18, 황갈은 반려) · 글자는 전부 Pretendard(제목 600 · 본문 400)
         사진은 꽉 채운 히어로를 빼면 전부 원본 비율 그대로(마스크·크롭 금지, height:auto) / 1px 선으로 나눈 격자 · 알약 태그 · 얇은 선 패널
         등장효과 1종(16px 페이드) · 아이콘은 전부 인라인 SVG · 사진은 CDN 참조
   색은 전부 CSS 변수(팔레트는 palette-boot.js) — hex 하드코딩 금지.
   ========================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root{
  --white:   #FFFFFF;
  --ink:     #2C2C2C;
  --ink-2:   #566274;
  --ink-3:   #8593A5;
  --line:    #E1E7EF;
  --line-2:  #C8D2DE;
  --fog:     #FFFFFF;   /* 바탕은 흰색 (2026-09-18 지시) */
  --card:    #F2F5F9;   /* 아주 옅은 블루그레이 — 작은 채움면 */
  --card-2:  #E6ECF3;   /* 사진 로딩 전 자리 */

  --navy:    #003C70;
  --navy-2:  #052F55;
  --navy-3:  #051F3E;

  /* 포인트색: 황갈 → 푸른빛 회색 (2026-09-18 지시 "갈색 느낌을 약간 푸른빛 도는 회색으로"). 변수 이름(pt/tan)은 그대로 둔다 */
  --pt:      #2F6FD8;   /* 파랑(회색끼 없이, 2026-09-18 3차): 버튼·라벨·연혁 선·포인트 글자 */
  --pt-deep: #2354B0;
  --pt-light:#5A8DE8;   /* 대각선 그라데이션의 밝은 쪽 (2026-09-18 "단색은 단조롭다") */
  --pt-grad: linear-gradient(135deg, var(--pt-light) 0%, var(--pt) 48%, var(--pt-deep) 100%);
  --pt-lighter: #8FB2F0;  /* 메뉴 창 9개 배지를 하나로 잇는 대각선 그라데이션의 양끝 */
  --pt-deeper:  #1B4390;
  --pt-grad-wide: linear-gradient(135deg, var(--pt-lighter) 0%, var(--pt) 50%, var(--pt-deeper) 100%);
  /* 타일이 이어 붙을 때 선이 생기지 않으려면 135° 그라데이션은 타일 안에서 두 번 반복돼야 한다(옆 타일 = 그라데이션 선의 절반만큼 이동).
     한 번만 넣으면 타일 경계에 뚜렷한 대각선이 생긴다 (2026-09-18 반려 원인) */
  --pt-grad-loop: linear-gradient(135deg, var(--pt-lighter) 0%, var(--pt) 12.5%, var(--pt-deeper) 25%, var(--pt) 37.5%, var(--pt-lighter) 50%, var(--pt) 62.5%, var(--pt-deeper) 75%, var(--pt) 87.5%, var(--pt-lighter) 100%);
  --pt-2:    #E6EFFC;
  --pt-rgb:  47,111,216;
  --tan:     #4A7BD0;   /* 패널 */
  --tan-2:   #9DBCEE;   /* 링·선 */
  --tan-3:   #CFE0F8;   /* 옅은 포인트(어두운 바탕 위 글자·아이콘) */
  --blue:    #5377A2;   /* 두 번째 패널(로고 감청을 밝힌 것) */

  /* 홈 바로가기 9개 배지 색 — 원본 정중교회.kr main_icon*.png 의 색을 채도 한 단계 낮춘 값 (2026-09-18 지시: 단색 말고 원본처럼 여러 색) */
  --q-about:    #2B3577;   /* 감청 (원본 #181860) */
  --q-worship:  #2F7FE0;   /* 하늘 (원본 #0870F8) */
  --q-sermon:   #6E3FA3;   /* 보라 (원본 #6820A0) */
  --q-mission:  #D1357E;   /* 분홍 (원본 #E01878) */
  --q-news:     #2450B8;   /* 파랑 (원본 #0038C8) */
  --q-gallery:  #3E9A3A;   /* 초록 (원본 #30A820) */
  --q-location: #8F6B3C;   /* 갈색 (원본 #987038) */
  --q-school:   #E0AE12;   /* 노랑 (원본 #F8D000) */
  --q-tel:      #E8722A;   /* 주황 (원본 #F86000) */
  --q-one:      #74B84A;   /* (안 씀) 메뉴 창 배지는 --pt 파랑으로 통일했다 (2026-09-18 "버튼 색도 톤앤매너에 맞춰"). 9색 변수도 안 씀 */
  --grad-a:     #00A5DF;   /* 흐르는 그라데이션 버튼 (원본 정중교회.kr .jjvr_box a.btn 값 그대로) */
  --grad-b:     #5ED8DB;
  --sns-sms:    #9E9E9E;   /* 공유 버튼 브랜드색 (레퍼런스 스크린샷 순서: 문자·카카오톡·LINE·밴드·페이스북·X) */
  --sns-kakao:  #FEE500;
  --sns-line:   #06C755;
  --sns-band:   #21C531;
  --sns-fb:     #1877F2;
  --sns-x:      #000000;

  --maxw: 1320px;
  --hh: 96px;
  --r-lg: 12px; --r-md: 8px; --r-sm: 6px; --r-pill: 999px;
  --shadow: none;
  --sec: clamp(90px, 9vw, 150px);
  --kr: 'Pretendard', system-ui, sans-serif;
  --serif: 'Pretendard', system-ui, sans-serif;   /* 전체 폰트 프리텐다드 (2026-09-17 사용자 지시) — 제목도 같은 서체 */
  --en: 'Pretendard', system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:18px; scrollbar-gutter:stable; } /* 전체메뉴가 열려 body 스크롤이 잠겨도 폭이 안 흔들리게 */
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:var(--kr); line-height:1.8; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  word-break:keep-all; overflow-wrap:break-word;
}
img{ display:block; max-width:100%; }
p{ margin:0; text-wrap:pretty; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.35; letter-spacing:-.025em; text-wrap:balance; color:var(--ink); }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
svg{ display:block; }
iframe{ border:0; }
.wrap{ width:90%; max-width:var(--maxw); margin:0 auto; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--pt); outline-offset:3px; border-radius:6px; }

/* ---------- 공통 조각 ---------- */
.eyebrow{ display:block; font-family:var(--en); font-weight:600; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pt); }
.eyebrow.on-dark{ color:rgba(255,255,255,.7); }
.k-title{ font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.4; }
.k-title em{ font-style:normal; color:var(--pt); }
.k-head{ margin-bottom:clamp(34px,4vw,56px); }
.k-head.center{ text-align:center; }
.k-head .eyebrow{ margin-bottom:14px; }
.k-head .lede{ margin-top:16px; color:var(--ink-2); font-size:1.02rem; max-width:44em; }
.k-head.center .lede{ margin-left:auto; margin-right:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:56px; padding:0 32px;
  border-radius:var(--r-pill); font-weight:600; font-size:1rem; letter-spacing:-.01em; line-height:1;
  border:1px solid transparent; transition:.2s var(--ease); white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-pt{ background:var(--pt-grad); color:#fff; }
.btn-pt:hover{ filter:brightness(1.08); }
/* 흐르는 그라데이션 버튼 (원본 정중교회.kr VR투어하기: 90° 청록 그라데이션 400% 를 6초에 한 바퀴) */
.btn-flow{ color:#fff; border:0; font-weight:700; text-shadow:2px 2px 4px rgba(0,0,0,.45);
  background:linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-a)); background-size:400% 100%; animation:btn-flow 6s linear infinite; }
.btn-flow:hover{ color:#fff; filter:brightness(1.06); }
@keyframes btn-flow{ 0%{ background-position:400% 0; } 100%{ background-position:0% 0; } }
@media (prefers-reduced-motion: reduce){ .btn-flow{ animation:none; } }
.btn-white{ background:#fff; color:var(--pt-deep); border-color:#fff; }
.btn-white:hover{ background:var(--card); }
.btn-out{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-out:hover{ border-color:var(--ink); }
.btn-wout{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn-wout:hover{ background:#fff; color:var(--pt-deep); border-color:#fff; }
.btn-sm{ height:46px; padding:0 22px; font-size:.94rem; }

/* 알약 태그 (kakkai 의 흰 반투명 알약) */
.pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:var(--r-pill); font-weight:600; font-size:.95rem;
  background:#fff; color:var(--pt-deep); border:1px solid var(--line); }
.on-dark .pill, .panel .pill{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); color:#fff; }

.arrow-link{ display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); transition:.2s var(--ease); }
.arrow-link svg{ width:22px; height:22px; color:var(--pt); transition:.2s var(--ease); }
.arrow-link:hover svg{ transform:translateX(4px); }

.tbd::after{ content:"확인 필요"; margin-left:8px; font-size:.66rem; font-weight:600; color:#fff; background:var(--ink-3); padding:2px 7px; border-radius:4px; vertical-align:middle; }
.ph{ position:relative; overflow:hidden; background:var(--card-2); }
.ph::after{ content:attr(data-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:ui-monospace,Menlo,monospace; font-size:.7rem; letter-spacing:.06em; color:var(--ink-3); text-align:center; padding:14px; }

/* 듀오톤 라인 아이콘 — .m 본체, .a/.af 포인트 */
.ico{ width:100%; height:100%; }
.ico .m{ stroke:var(--ink); }
.ico .a{ stroke:var(--pt); }
.ico .af{ fill:var(--pt); }
.on-dark .ico .m{ stroke:#fff; } .on-dark .ico .a{ stroke:var(--tan-3); } .on-dark .ico .af{ fill:var(--tan-3); }

/* 사진: 원본 비율 그대로 (가로 사진을 세로 틀에 끼워 자르지 않는다 — 2026-09-18 지시) */
.photo{ border-radius:var(--r-md); overflow:hidden; background:var(--card-2); }
.photo img{ width:100%; height:auto; display:block; }
/* 사진 묶음 3장: .tall = 첫 장이 세로(0.87) → 왼쪽 크게, 나머지 두 가로 장을 오른쪽에 위아래로
                 .wide = 세 장 다 가로 → 첫 장 풀폭, 아래 두 장 반반 */
.pics{ display:grid; gap:12px; }
.pics > *{ border-radius:var(--r-md); overflow:hidden; background:var(--card-2); }
.pics img{ width:100%; height:auto; display:block; }
.pics.tall{ grid-template-columns:minmax(0,1fr) minmax(0,.74fr); grid-template-rows:1fr 1fr; }
.pics.tall > :first-child{ grid-row:1 / 3; }
.pics.tall > :nth-child(2){ align-self:start; }
.pics.tall > :nth-child(3){ align-self:end; }
.pics.wide{ grid-template-columns:1fr 1fr; }
.pics.wide > :first-child{ grid-column:1 / -1; }

/* ============ HEADER (흰색, kakkai 결) ============ */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:60; background:#fff; transition:box-shadow .3s var(--ease); }
.site-header.scrolled{ box-shadow:0 1px 0 var(--line), 0 16px 40px -30px rgba(44,44,44,.35); }
/* 헤더 안쪽 폭 = 본문 .wrap 과 동일(90%, 최대 --maxw) — 2026-09-18 지시 "탑메뉴를 아래 콘텐츠 좌우 폭과 맞춰". 메뉴는 로고와 회원 버튼 사이에 고르게 */
.header-inner{ display:flex; align-items:center; gap:30px; height:var(--hh); }
.brand{ flex:none; display:flex; align-items:center; }
.brand img{ height:42px; width:auto; }
.brand .logo-white, .brand-txt{ display:none; }

/* 메뉴 사이 간격을 확실히 둔다 (2026-09-18 "글자 간격이 따닥따닥") — 헤더 폭이 본문과 같아져 공간이 줄었으니 글자 1.08rem·로고 42px·회원 알약 축소 */
.nav{ flex:1; display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.8vw,34px); margin:0 clamp(12px,2vw,36px); }
.nav-top{ position:relative; padding:10px 2px; font-size:1.08rem; font-weight:600; color:var(--ink); transition:.18s var(--ease); white-space:nowrap; letter-spacing:-.02em; }
.nav-top::after{ content:""; position:absolute; left:2px; right:2px; bottom:2px; height:1.5px; background:var(--pt); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease); }
.nav-top:hover::after, .nav-top.on::after{ transform:none; }
.nav-top.on{ color:var(--pt-deep); }

.header-cta{ flex:none; display:flex; align-items:center; gap:14px; margin-left:auto; } /* 메뉴가 숨는 폭에서도 오른쪽 끝 */
.hd-member{ display:flex; align-items:center; height:44px; padding:0 16px; border:1px solid var(--line-2); border-radius:var(--r-pill); font-size:.84rem; }
.hd-auth{ color:var(--ink); font-weight:500; }
.hd-auth + .hd-auth::before{ content:"·"; margin:0 9px; color:var(--ink-3); }
.hd-auth:hover{ color:var(--pt-deep); }
/* 회원 링크 두 벌: body.is-login 이면 관리·로그아웃, 아니면 로그인·회원가입 (site.js AUTH_HTML) */
.auth-out, .auth-in{ display:inline-flex; align-items:center; }
.auth-in, body.is-login .auth-out{ display:none; }
body.is-login .auth-in{ display:inline-flex; }
.hd-admin{ color:var(--pt-deep); font-weight:700; }
/* 전체메뉴 버튼은 헤더 안쪽(80% 폭)의 오른쪽 끝, 회원 알약 다음 — 2026-09-18 지시(스크린샷 빨간 선 안) */
.menu-btn{ display:inline-grid; place-items:center; width:48px; height:48px; padding:0; border:0; background:transparent; color:var(--ink-3); }
.menu-btn svg{ width:26px; height:26px; }
/* 점이 다음 네모 자리로 가면 그 네모는 점이 있던 자리로 — 서로 자리를 바꾼다 (2026-09-18 지시). 점 8초 한 바퀴, 네모는 세 바퀴(24초)에 제자리 */
.menu-btn .dot{ fill:var(--pt); animation:mb-dot2 8s var(--ease) infinite; }
.menu-btn .sq{ opacity:.35; }
.menu-btn .sq-br{ display:none; }
.menu-btn .sq-bl{ animation:mb-sq-a 24s var(--ease) infinite; }
.menu-btn .sq-tl{ animation:mb-sq-b 24s var(--ease) infinite; }
.menu-btn .sq-tr{ animation:mb-sq-c 24s var(--ease) infinite; }
@keyframes mb-sq-a{ 0.00%,6.00%{ transform:translate(0px,0px); } 8.33%,14.33%{ transform:translate(11px,0px); } 16.67%,22.67%{ transform:translate(11px,0px); } 25.00%,31.00%{ transform:translate(11px,0px); } 33.33%,39.33%{ transform:translate(11px,-11px); } 41.67%,47.67%{ transform:translate(11px,-11px); } 50.00%,56.00%{ transform:translate(11px,-11px); } 58.33%,64.33%{ transform:translate(0px,-11px); } 66.67%,72.67%{ transform:translate(0px,-11px); } 75.00%,81.00%{ transform:translate(0px,-11px); } 83.33%,89.33%{ transform:translate(0px,0px); } 91.67%,97.67%{ transform:translate(0px,0px); } 100%{ transform:translate(0px,0px); } }
@keyframes mb-sq-b{ 0.00%,6.00%{ transform:translate(0px,0px); } 8.33%,14.33%{ transform:translate(0px,0px); } 16.67%,22.67%{ transform:translate(0px,11px); } 25.00%,31.00%{ transform:translate(0px,11px); } 33.33%,39.33%{ transform:translate(0px,11px); } 41.67%,47.67%{ transform:translate(11px,11px); } 50.00%,56.00%{ transform:translate(11px,11px); } 58.33%,64.33%{ transform:translate(11px,11px); } 66.67%,72.67%{ transform:translate(11px,0px); } 75.00%,81.00%{ transform:translate(11px,0px); } 83.33%,89.33%{ transform:translate(11px,0px); } 91.67%,97.67%{ transform:translate(0px,0px); } 100%{ transform:translate(0px,0px); } }
@keyframes mb-sq-c{ 0.00%,6.00%{ transform:translate(0px,0px); } 8.33%,14.33%{ transform:translate(0px,0px); } 16.67%,22.67%{ transform:translate(0px,0px); } 25.00%,31.00%{ transform:translate(-11px,0px); } 33.33%,39.33%{ transform:translate(-11px,0px); } 41.67%,47.67%{ transform:translate(-11px,0px); } 50.00%,56.00%{ transform:translate(-11px,11px); } 58.33%,64.33%{ transform:translate(-11px,11px); } 66.67%,72.67%{ transform:translate(-11px,11px); } 75.00%,81.00%{ transform:translate(0px,11px); } 83.33%,89.33%{ transform:translate(0px,11px); } 91.67%,97.67%{ transform:translate(0px,11px); } 100%{ transform:translate(0px,0px); } }
@keyframes mb-dot2{ 0.00%,18.00%{ transform:translate(0px,0px); } 25.00%,43.00%{ transform:translate(-11px,0px); } 50.00%,68.00%{ transform:translate(-11px,-11px); } 75.00%,93.00%{ transform:translate(0px,-11px); } 100%{ transform:translate(0px,0px); } }
@media (prefers-reduced-motion: reduce){ .menu-btn .dot, .menu-btn .sq{ animation:none; } }

/* ============ 전체메뉴 (사이트맵 오버레이, 흰색) ============ */
.full-menu{ position:fixed; inset:0; z-index:200; background:var(--fog); color:var(--ink); overflow-y:auto; scrollbar-gutter:stable; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s var(--ease), visibility .28s; }
.full-menu.open{ opacity:1; visibility:visible; pointer-events:auto; }
.fm-top{ flex:none; display:flex; align-items:center; gap:14px; height:var(--hh); }
.fm-top .brand img{ height:40px; }
/* 회원 버튼은 윗줄 오른쪽, 닫기 X(48px, 헤더 버튼 자리에 fixed) 왼쪽에 — 스크롤 없이 바로 보인다 (2026-09-21 지시) */
.fm-auths{ display:inline-flex; gap:8px; margin-left:auto; margin-right:calc(48px + 14px); }
.fm-auths .auth-out, .fm-auths .auth-in{ gap:8px; }
.fm-auths .hd-auth{ border:1px solid var(--line-2); border-radius:var(--r-pill); padding:9px 18px; font-size:.9rem; background:#fff; white-space:nowrap; }
.fm-auths .hd-auth + .hd-auth::before{ content:none; }
.fm-auths .hd-admin{ background:var(--pt-grad); border-color:transparent; color:#fff; }
/* 닫기(X): site.js 가 열 때 헤더 전체메뉴 버튼의 좌표를 읽어 같은 자리에 fixed 로 놓는다 */
.fm-close{ position:fixed; z-index:2; display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-3); transition:.2s var(--ease); }
.fm-close .x svg{ width:26px; height:26px; }
.fm-close:hover{ color:var(--ink); }
.fm-body{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:20px 0 40px; }
.fm-eyebrow{ font-family:var(--en); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--pt); font-size:.9rem; margin-bottom:16px; }
.fm-list{ display:flex; flex-direction:column; }
.fm-1{ display:flex; align-items:baseline; gap:16px; padding:16px 2px; border-bottom:1px solid var(--line); transition:.16s var(--ease); }
.fm-1 .num{ font-family:var(--en); font-size:1rem; font-weight:600; color:var(--pt); }
.fm-1 .nm{ font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--ink); }
.fm-1 .en{ margin-left:auto; font-family:var(--en); font-size:.9rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.fm-1:hover{ padding-left:10px; }
.fm-3{ display:flex; flex-wrap:wrap; gap:4px 18px; padding:8px 2px 12px; }
.fm-3 a{ font-size:1rem; color:var(--ink-2); }
.fm-foot{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px; margin-top:32px; }
.fm-tel{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:1.05rem; color:var(--ink); }
.fm-tel .ico{ width:24px; height:24px; }

/* ============ 히어로 (kakkai: 사진/영상 꽉 채움 + 흰 명조 제목 가운데) ============ */
.hero{ position:relative; margin-top:var(--hh); height:calc(100vh - var(--hh)); height:calc(100svh - var(--hh)); min-height:640px; max-height:1080px;
  overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media iframe, .hero-media video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; pointer-events:none; border:0; object-fit:cover;
}
.hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,22,30,.38) 0%, rgba(18,22,30,.22) 45%, rgba(18,22,30,.5) 100%); }
.hero-inner{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 0 170px; }
/* 표어 글자 크기는 trinityairways 브랜드 사이트 히어로 기준 (2026-09-21 지시 "글자가 영상을 너무 가린다"):
   그쪽이 1278px 화면에서 35.7px 였고, 2.8vw 면 같은 폭에서 35.4px 로 맞는다.
   rem 은 이 사이트 기준 18px(폰 17px)이라 넓은 화면은 2.2rem=39.6px 에서 멈추고(4K 에서 잰 참고 사이트 약 40px), 폰은 1.6rem=27.2px.
   이전 값 clamp(2.3rem,5.4vw,4.4rem) 은 4K 에서 79px 까지 커져 영상을 덮었다. */
.hero h1{ font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:600; line-height:1.4; color:#fff; letter-spacing:-.01em; }
/* 표어 위(영문 라벨)·아래(소제목·카운터)도 표어에 맞춰 한 단계씩 줄였다 (2026-09-21 지시).
   .eyebrow 는 사이트 전체가 쓰는 라벨이라 히어로에만 걸어야 VR 배너·표어 띠가 안 따라 줄어든다.
   간격도 같이 좁혀 네 줄이 한 덩어리로 읽히게 했다. */
.hero .eyebrow{ font-size:.72rem; letter-spacing:.15em; }
.hero .hero-sub{ margin-top:18px; font-size:clamp(.85rem,1.2vw,1rem); font-weight:500; color:rgba(255,255,255,.92); line-height:1.7; }
.hero-count{ display:flex; justify-content:center; gap:12px; margin-top:20px; font-family:var(--en); font-size:.8rem; letter-spacing:.16em; color:rgba(255,255,255,.65); }
.hero-count b{ font-weight:600; color:var(--tan-3); margin-left:6px; }
.hero-count .sep{ opacity:.5; }

/* 히어로 하단: 큰 '메뉴' 버튼 + 스크롤 유도 (2026-09-18 지시) */
.hero-foot{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; flex-direction:column; align-items:center; gap:22px; padding-bottom:26px; pointer-events:none; }
.hero-foot > *{ pointer-events:auto; }
.hero-menu-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; height:64px; min-width:min(520px, 86vw); padding:0 56px; border:1px solid rgba(255,255,255,.55); border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-weight:700; font-size:1.15rem; letter-spacing:.02em;
  box-shadow:0 16px 40px -20px rgba(0,0,0,.7); transition:.2s var(--ease); }
.hero-menu-btn svg{ width:22px; height:22px; }
.hero-menu-btn:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px); }
.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.85); font-family:var(--en); font-size:.72rem; letter-spacing:.24em; font-weight:600; }
.scroll-cue i{ display:block; width:22px; height:36px; border:2px solid rgba(255,255,255,.8); border-radius:12px; position:relative; }
.scroll-cue i::after{ content:""; position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:cue-drop 1.6s var(--ease) infinite; }
@keyframes cue-drop{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(12px); opacity:0; } 100%{ transform:translateY(0); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue i::after{ animation:none; } }

/* 가운데 메뉴 창 (site.js .menu-modal): 어두운 막 + 흰 패널 + 3열 아이콘 격자 */
.menu-modal{ position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(18,22,30,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:.22s var(--ease); }
.menu-modal.open{ opacity:1; visibility:visible; }
.mm-panel{ position:relative; width:min(620px, 100%); max-height:90vh; overflow:auto; padding:34px 30px 30px; border-radius:var(--r-lg); background:#fff; box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.98); transition:transform .25s var(--ease); }
.menu-modal.open .mm-panel{ transform:none; }
.mm-title{ font-weight:700; font-size:1.15rem; color:var(--ink); }
.mm-close{ position:absolute; top:16px; right:16px; display:grid; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; background:var(--card); color:var(--ink); }
.mm-close svg{ width:20px; height:20px; }
.mm-close:hover{ background:var(--ink); color:#fff; }
.mm-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:22px; }
/* 정사각형에 가깝게(aspect-ratio 1), 아이콘 88px·글자 1.12rem — 2026-09-18 지시 */
.mm-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; aspect-ratio:1 / 1; padding:14px 8px; border-radius:var(--r-md); border:1px solid var(--line); font-weight:600; font-size:1.12rem; color:var(--ink); transition:.18s var(--ease); }
.mm-item:hover{ border-color:var(--pt); background:var(--pt-2); }
.mm-item:hover .badge{ filter:brightness(1.08); transform:translateY(-2px); }
.mm-item .badge{ transition:.18s var(--ease); }
.mm-item.on{ border-color:var(--pt); color:var(--pt-deep); }
/* 배지 72px, 선 굵게(3.2) — 얇은 선이 안 보인다는 지시 */
/* 배지 9개를 한 장의 대각선 그라데이션으로: 각 배지가 3×3 격자 안 자기 자리(열·행)에 해당하는 조각을 보여준다 (2026-09-18 지시) */
.mm-item .badge{ display:block; width:88px; height:88px; padding:20px; border-radius:50%; background-image:var(--pt-grad-loop); background-size:600% 600%; background-position:var(--gx,0%) var(--gy,0%); box-shadow:0 10px 22px -12px rgba(var(--pt-rgb),.9);
  animation:mm-flow 14s linear infinite; }
.mm-item:nth-child(3n+1) .badge{ --gx:0%; } .mm-item:nth-child(3n+2) .badge{ --gx:25%; } .mm-item:nth-child(3n+3) .badge{ --gx:50%; }
.mm-item:nth-child(-n+3) .badge{ --gy:0%; } .mm-item:nth-child(n+4):nth-child(-n+6) .badge{ --gy:25%; } .mm-item:nth-child(n+7) .badge{ --gy:50%; }
/* 9개가 한 장처럼 흐르는 그라데이션: 각 배지의 기준 위치(--gx/--gy)에서 타일 한 장(120%)만큼 같이 이동 → 이어 붙어도 티가 안 난다 (2026-09-18 지시) */
@keyframes mm-flow{ from{ background-position:calc(var(--gx,0%) + 120%) calc(var(--gy,0%) + 120%); } to{ background-position:var(--gx,0%) var(--gy,0%); } }
@media (prefers-reduced-motion: reduce){ .mm-item .badge{ animation:none; } }
.mm-item .ico .m, .mm-item .ico .a{ stroke-width:3.2; }
.mm-item .ico .m{ stroke:#fff; } .mm-item .ico .a{ stroke:rgba(255,255,255,.85); } .mm-item .ico .af{ fill:rgba(255,255,255,.85); }



/* ============ 섹션 공통 ============ */
.sec{ padding:var(--sec) 0; }
.sec.white{ background:#fff; border-top:1px solid var(--line); }
.sec.flush{ padding-top:0; }
.sec.tight{ padding-top:clamp(50px,5vw,80px); }
.stack > * + *{ margin-top:clamp(56px,6vw,96px); }

/* 두 단 (글 + 아치 사진) */
.duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(36px,5vw,80px); align-items:center; }
.duo.rev{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
.duo.rev > :first-child{ order:2; }
.duo .txt h2{ font-size:clamp(1.8rem,3.2vw,2.7rem); line-height:1.4; }
.duo .txt p{ margin-top:20px; color:var(--ink-2); }
.duo .txt p strong{ color:var(--ink); font-weight:600; }
.duo .txt .pills{ margin-top:26px; }
.duo .txt .btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }

/* 패널: 흰 바탕에 얇은 선 (색면 박스는 뺐다 — 2026-09-18) */
.panel{ border-radius:var(--r-lg); padding:clamp(26px,3vw,40px); color:var(--ink); background:#fff; border:1px solid var(--line-2); }
.panel.blue{ background:var(--card); border-color:var(--line); }
.panel h3{ color:var(--ink); font-size:clamp(1.3rem,2vw,1.7rem); }
.panel .desc{ margin-top:8px; color:var(--ink-2); font-size:.98rem; }
.panel .rows{ margin-top:18px; }
.panel .rows li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:13px 0; border-top:1px solid var(--line); }
.panel .rows li:first-child{ border-top:0; padding-top:0; }
.panel .rows .nm{ font-weight:600; font-size:1.02rem; min-width:9em; color:var(--ink); }
.panel .rows .tm{ font-weight:500; color:var(--pt-deep); }
.panel .rows .note{ display:block; width:100%; font-size:.86rem; line-height:1.6; color:var(--ink-3); }
.panel .rows .note b{ color:var(--pt-deep); }

/* 예배: 가로 사진(원본 비율) 왼쪽, 패널 두 개 오른쪽에 위아래 */
.wor-scene{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto auto; gap:clamp(20px,2.4vw,32px); align-items:start; }
.wor-scene .photo{ grid-row:1 / 3; }

/* VR 배너 (영상 + 글) */
.vrbox{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink); color:#fff; isolation:isolate; }
.vrbox video, .vrbox img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.vrbox::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(18,22,30,.72) 0%, rgba(18,22,30,.45) 50%, rgba(18,22,30,.15) 100%); }
.vrbox .vr-in{ position:relative; z-index:2; padding:clamp(40px,5vw,80px); max-width:600px; min-height:min(60vh, 480px); display:flex; flex-direction:column; justify-content:center; }
.vrbox h2{ color:#fff; font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:600; }
.vrbox .vr-sub{ color:rgba(255,255,255,.85); margin-top:16px; max-width:28em; }
.vrbox .btn{ margin-top:30px; align-self:flex-start; min-width:min(360px, 100%); }  /* 옆으로 넓게 (2026-09-18) */

/* 번호 격자 (kakkai 프로그램 격자: 1px 선으로 나눈 셀) — VR 6컷 */
/* 바깥 모서리 둥글게 (2026-09-18): 컨테이너가 테두리+둥근 모서리+overflow hidden, 셀의 오른쪽·아래 선은 -1px 로 겹쳐 바깥 테두리와 합친다 */
.vr-cells{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; margin-top:16px; }
.vr-cells .cell{ display:block; padding:16px; margin:0 -1px -1px 0; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); transition:background .2s var(--ease); }
.vr-cells .cell:hover{ background:var(--card); }
.vr-cells .thumb{ display:block; overflow:hidden; border-radius:var(--r-sm); background:var(--card-2); }
.vr-cells img{ width:100%; height:auto; transition:transform .5s var(--ease); }
.vr-cells .cell:hover img{ transform:scale(1.05); }
.vr-cells .num{ display:block; margin-top:14px; font-family:var(--en); font-size:1.05rem; font-weight:600; color:var(--pt); }
.vr-cells .nm{ display:block; margin-top:2px; font-family:var(--serif); font-size:1.15rem; color:var(--ink); }

/* 안내 띠 */
.band{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,56px);
  border-radius:var(--r-lg); background:var(--card); color:var(--ink); border:1px solid var(--line); }
.band h3{ color:var(--ink); font-size:clamp(1.3rem,2.1vw,1.7rem); }
.band p{ margin-top:6px; color:var(--ink-2); font-size:.98rem; }

/* 표어 띠 (단색 황갈 — 그라데이션 없음) */
/* 표어 띠: 하늘 사진(assets/img/slogan_bg.jpg, 1920px 웹용 축소본) 위에 옅은 갈색 막 — 2026-09-18 지시. 사진 윗부분(짙은 파랑)이 보이게 위쪽 기준 */
.slogan-band{ position:relative; overflow:hidden; color:#fff; text-align:center; padding:clamp(70px,8vw,120px) 0; background:var(--pt-deep) url('../img/slogan_bg.webp') center 22% / cover no-repeat; isolation:isolate; }
.slogan-band::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(18,22,30,.28), rgba(18,22,30,.5)); }
.slogan-band .wrap{ position:relative; z-index:1; }
.slogan-band h2, .slogan-band p{ text-shadow:0 2px 14px rgba(0,0,0,.35); }
.slogan-band h2{ color:#fff; font-size:clamp(2rem,4.4vw,3.6rem); font-weight:600; line-height:1.35; }
.slogan-band p{ margin-top:20px; font-size:clamp(1rem,1.5vw,1.2rem); color:rgba(255,255,255,.88); }
.slogan-band .btns{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:34px; }

/* 인용 */
.quote{ position:relative; padding:clamp(26px,3vw,40px) clamp(28px,4vw,48px); border-radius:var(--r-lg); background:var(--card); border:1px solid var(--line); }
.quote p{ font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.7; color:var(--ink); }
.quote cite{ display:block; margin-top:14px; font-style:normal; font-family:var(--en); font-size:1rem; letter-spacing:.08em; color:var(--pt); }
.quote::before{ content:"\201C"; position:absolute; top:4px; left:22px; font-family:var(--en); font-size:5rem; line-height:1; color:var(--tan-3); }

/* 행 목록 (kakkai 아코디언 느낌: 얇은 선으로 나눈 행) */
.rows{ margin:0; }
.rows li{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }
.rows .yr{ font-family:var(--en); font-size:1.05rem; font-weight:600; letter-spacing:.02em; color:var(--pt); padding-top:3px; }

/* 연혁 */
.tl-intro{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 24px; align-items:baseline; padding:22px 28px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); margin-bottom:10px; }
.tl-intro b{ font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--ink); }
.tl-intro span{ color:var(--ink-2); font-size:.95rem; }
.timeline{ --tl-x:150px; position:relative; margin-top:34px; padding-bottom:8px; }
.timeline::before{ content:""; position:absolute; left:var(--tl-x); top:0; bottom:0; width:1px; background:var(--line-2); }
.tl-fill{ position:absolute; left:var(--tl-x); top:0; width:1px; height:0; background:var(--pt); transition:height .12s linear; }
.tl-pulse{ position:absolute; left:50%; bottom:0; width:10px; height:10px; border-radius:50%; background:var(--pt); transform:translate(-50%,50%); box-shadow:0 0 0 6px rgba(var(--pt-rgb),.18); opacity:0; }
.tl-fill.active .tl-pulse{ opacity:1; }
.tl-row{ display:grid; grid-template-columns:var(--tl-x) minmax(0,1fr); padding:6px 0 34px; opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.tl-row.in{ opacity:1; transform:none; }
.tl-year{ position:sticky; top:calc(var(--hh) + 22px); align-self:start; font-family:var(--en); font-size:clamp(1.9rem,2.8vw,2.6rem); font-weight:600; line-height:1; color:var(--ink); padding-top:2px; }
.tl-items{ padding-left:40px; }
.tl-items li{ position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; padding:13px 0; border-top:1px solid var(--line); }
.tl-items li:first-child{ border-top:0; padding-top:2px; }
.tl-items li::before{ content:""; position:absolute; left:-44px; top:22px; width:9px; height:9px; border-radius:50%; background:#fff; border:1px solid var(--pt); }
.tl-items li:first-child::before{ top:11px; }
.tl-m{ font-family:var(--en); font-size:1rem; font-weight:600; letter-spacing:.03em; color:var(--pt); padding-top:4px; }
.tl-t{ font-size:1.02rem; font-weight:500; line-height:1.65; color:var(--ink); }
.tl-note{ display:block; margin-top:4px; font-size:.92rem; font-weight:400; color:var(--ink-3); }
/* 연혁 더보기: 연도 묶음을 STEP 개씩 끊어 보여준다 (site.js) */
.tl-row.tl-hide{ display:none; }
.tl-more{ display:flex; justify-content:center; padding:6px 0 26px; }
.tl-more .btn{ gap:8px; }
.tl-more .cnt{ color:var(--pt); font-weight:600; }
.elders{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:10px; padding:22px 28px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); }
.elders h4{ font-size:1.05rem; color:var(--ink); }
.elders .pills .pill{ background:var(--card); border-color:var(--line); color:var(--ink); padding:8px 18px; }

/* 담임목사 */
.pastor{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(36px,5vw,80px); align-items:center; }
.pastor .nm{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.5rem); color:var(--ink); }
.pastor .nm small{ margin-left:12px; font-family:var(--kr); font-size:1rem; font-weight:600; color:var(--pt); }
.pastor .rows{ margin-top:22px; }

/* 모아보기 갤러리 (PC 3열 · 사진 크게 · 원본 비율) + 라이트박스 */
.gallery{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.gallery > li{ border-radius:var(--r-sm); overflow:hidden; background:var(--card-2); cursor:zoom-in; }
.gallery img{ width:100%; height:auto; transition:transform .45s var(--ease); }
.gallery > li:hover img{ transform:scale(1.03); }
.lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:rgba(28,24,18,.94);
  opacity:0; visibility:hidden; transition:.25s var(--ease); }
.lightbox.open{ opacity:1; visibility:visible; }
/* 확대 금지 + 좌우 스와이프: 더블탭 확대 차단(manipulation), 사진은 원본 크기까지만(확대 렌더 없음) */
.lightbox{ touch-action:manipulation; overscroll-behavior:contain; }
/* 무대: 사진 두 장이 겹쳐 좌우로 미끄러진다 (site.js slide) */
.lb-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lightbox img{ position:absolute; max-width:92vw; max-height:84vh; border-radius:var(--r-sm); box-shadow:0 30px 80px rgba(0,0,0,.5); cursor:zoom-out; transition:transform .38s var(--ease); will-change:transform; -webkit-user-drag:none; user-select:none; }
.lightbox button{ position:absolute; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; padding:0; transition:.2s; }
.lightbox button:hover{ background:#fff; color:var(--ink); }
.lightbox button svg{ width:22px; height:22px; }
.lb-close{ top:22px; right:22px; }
.lb-prev{ left:22px; top:50%; transform:translateY(-50%); }
.lb-next{ right:22px; top:50%; transform:translateY(-50%); }
.lb-n{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--en); font-size:1rem; letter-spacing:.14em; color:rgba(255,255,255,.7); }

/* 오시는길 */
.addr-big{ text-align:center; }
.addr-big .ko{ font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,2.1rem); color:var(--ink); }
.addr-big .en{ margin-top:10px; font-family:var(--en); font-size:1.05rem; letter-spacing:.04em; color:var(--ink-3); }
.map{ border-radius:var(--r-lg); overflow:hidden; background:var(--card-2); border:1px solid var(--line); }
.map iframe{ width:100%; height:100%; display:block; overflow:hidden; }
.map.wide{ height:500px; }
.info-cells{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; margin-top:18px; }
.info-cell{ padding:28px 26px; margin:0 -1px -1px 0; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.info-cell .lb{ display:flex; align-items:center; gap:10px; font-family:var(--en); font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pt); }
.info-cell .lb .ico{ width:22px; height:22px; }
.info-cell .vl{ margin-top:14px; font-family:var(--serif); font-size:1.02rem; line-height:1.6; color:var(--ink); overflow-wrap:anywhere; }
.info-cell .vl small{ display:block; font-family:var(--kr); font-size:.9rem; color:var(--ink-3); margin-top:4px; }

/* ============ 서브페이지 헤더 (kakkai: 사진 꽉 채움 + 흰 명조 제목) ============ */
/* 서브 상단: 서브비주얼 없이 굵은 제목 한 줄만 (2026-09-18 지시 "굵은글자 한줄로"). 경로(crumb)는 마크업만 두고 숨긴다 */
/* 2026-09-18: 제목 아래 선 없음, 경로줄(홈 › 메뉴 ▾)이 제목 바로 아래 가운데 */
.page-head{ margin-top:var(--hh); background:#fff; color:var(--ink); padding:clamp(40px,5vw,64px) 0 0; }
.page-head .wrap{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.page-head h1{ font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:700; color:var(--ink); line-height:1.3; white-space:nowrap; }
.page-head .ph-sub{ display:none; }
.crumb{ display:none; order:-1; gap:10px; align-items:center; margin-bottom:18px; font-size:.9rem; color:var(--ink-3); }
.crumb .home svg{ width:17px; height:17px; color:var(--pt); }
.crumb .sep{ opacity:.6; }
.crumb .cur{ color:var(--pt-deep); font-weight:600; }

.subtabs{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:var(--hh); z-index:40; }
.subtabs .wrap{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.subtabs .wrap::-webkit-scrollbar{ display:none; }
.subtabs a{ padding:18px 20px; font-weight:600; font-size:.98rem; color:var(--ink-3); border-bottom:2px solid transparent; white-space:nowrap; transition:color .18s var(--ease); }
.subtabs a:hover{ color:var(--ink); }
.subtabs a.on{ color:var(--ink); border-bottom-color:var(--pt); }
/* 1뎁스 사이트: "홈 › 현재메뉴 ▾" 경로줄 + 메뉴 서랍 (site.js) — 제목 바로 아래 가운데, 선·고정 없음 */
.subtabs.crumbbar{ position:static; border-bottom:0; padding-bottom:clamp(28px,3.4vw,44px); }
.subtabs.crumbbar .wrap{ align-items:center; justify-content:center; gap:10px; overflow:visible; }
.subtabs.crumbbar a{ padding:0; border:0; }
.cb-home{ display:inline-flex; align-items:center; gap:6px; padding:10px 0 !important; font-weight:500 !important; font-size:.95rem !important; color:var(--ink-3) !important; }
.cb-home svg{ width:17px; height:17px; color:var(--pt); }
.cb-sep{ color:var(--ink-3); opacity:.7; }
.cb-dd{ position:relative; }
.cb-cur{ display:inline-flex; align-items:center; gap:6px; padding:10px 4px; border:0; background:transparent; font-weight:700; font-size:1rem; color:var(--ink); letter-spacing:-.01em; }
.cb-cur .chev{ width:18px; height:18px; color:var(--pt); transition:transform .2s var(--ease); }
.cb-dd.open .cb-cur .chev{ transform:rotate(180deg); }
.cb-menu{ position:absolute; left:50%; top:calc(100% - 6px); min-width:200px; padding:8px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line-2); box-shadow:0 18px 40px -20px rgba(44,44,44,.45);
  opacity:0; visibility:hidden; transform:translate(-50%,-6px); transition:.18s var(--ease); z-index:50; text-align:left; }
.cb-dd.open .cb-menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.cb-menu a{ display:block; padding:11px 14px !important; border-radius:8px; font-weight:600 !important; font-size:.98rem !important; color:var(--ink-2) !important; }
.cb-menu a:hover{ background:var(--card); color:var(--ink) !important; }
.cb-menu a.on{ color:var(--pt-deep) !important; background:var(--card); }

.sub-next{ background:#fff; border-top:1px solid var(--line); text-align:center; padding:clamp(56px,6vw,90px) 0; }
.sub-next h2{ font-size:clamp(1.5rem,2.6vw,2.2rem); }
.sub-next p{ margin-top:12px; color:var(--ink-2); }
.sub-next .btns{ display:flex; justify-content:center; gap:10px; margin-top:28px; flex-wrap:wrap; }

/* 게시판 */
.board-area{ margin-top:8px; }
.board-frame{ width:100%; border:0; }
.board-frame:not([src]){ display:none; }
.board-tbd{ padding:110px 24px; border-radius:var(--r-lg); border:1px dashed var(--line-2); background:#fff; text-align:center; color:var(--ink-3); font-size:.95rem; }
.board-tbd .bid{ display:block; margin-top:10px; font-family:ui-monospace,Menlo,monospace; font-size:.76rem; letter-spacing:.04em; opacity:.7; }
.board-frame[src] + .board-tbd{ display:none; }
.tabset .tab-panel{ display:none; }
.tabset .tab-panel.on{ display:block; }
.tab-bar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; padding:6px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line); }
.tab-btn{ padding:11px 20px; border:0; border-radius:var(--r-pill); background:transparent; font-weight:600; font-size:1rem; color:var(--ink-2); }
.tab-btn.on{ background:var(--ink); color:#fff; }

/* ============ FOOTER ============ */
.footer{ background:#fff; border-top:1px solid var(--line); color:var(--ink-2); padding:clamp(56px,6vw,84px) 0 32px; font-size:.92rem; }
.footer-top{ display:grid; grid-template-columns:1fr 1.5fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line); }
.flogo img{ height:42px; width:auto; }
.f-org{ margin-top:18px; font-family:var(--serif); color:var(--ink); font-weight:600; font-size:1.05rem; line-height:1.55; }
.f-en{ display:block; font-family:var(--en); font-weight:600; font-size:.9rem; letter-spacing:.12em; color:var(--ink-3); margin-top:4px; }
.fnav{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px 20px; align-content:start; }
.fnav a{ padding:4px 0; font-size:.95rem; font-weight:600; color:var(--ink); }
.fnav a:hover{ color:var(--pt-deep); }
.footer-info{ padding:28px 0 24px; }
.footer-info ul{ display:flex; flex-wrap:wrap; gap:6px 26px; }
.footer-info li.wide{ width:100%; }
.footer-info b{ color:var(--ink); font-weight:600; margin-right:6px; }
.footer-info a:hover{ color:var(--pt-deep); }
.f-addr-en{ margin-top:10px; font-family:var(--en); font-size:.95rem; letter-spacing:.03em; color:var(--ink-3); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; padding-top:22px; border-top:1px solid var(--line); font-size:.82rem; }
.footer .copy{ color:var(--ink-3); }
.f-auths .hd-auth{ font-weight:600; color:var(--ink-2); }
.f-auths .hd-auth + .hd-auth::before{ content:"·"; margin:0 8px; color:var(--ink-3); }
.f-auths .hd-admin{ color:var(--pt-deep); }
.f-credit{ margin-left:6px; color:var(--ink-3); transition:color .18s var(--ease); }
.f-credit:hover{ color:var(--pt-deep); }

/* ============ 우측 퀵메뉴 (kakkai: 세로 알약 + 둥근 맨위로) ============ */
.quick-side{ position:fixed; right:26px; bottom:40px; z-index:120; display:flex; flex-direction:column; align-items:center; gap:14px; }
.quick-side ul{ display:flex; flex-direction:column; background:#fff; border-radius:var(--r-pill); box-shadow:0 20px 44px -24px rgba(44,44,44,.5); padding:10px 0; }
.quick-side li a{ display:flex; flex-direction:column; align-items:center; gap:5px; width:88px; padding:14px 6px; font-size:.78rem; font-weight:600; color:var(--ink-2); text-align:center; line-height:1.3; transition:.2s var(--ease); }
.quick-side li + li a{ border-top:1px solid var(--line); }
.quick-side li a:hover{ color:var(--pt-deep); }
.quick-side .ico{ width:26px; height:26px; }
.quick-side li:first-child a{ color:#fff; background:var(--pt); border-radius:var(--r-pill) var(--r-pill) 0 0; margin-top:-10px; padding-top:22px; }
.quick-side li:first-child .ico .m{ stroke:#fff; } .quick-side li:first-child .ico .a{ stroke:var(--tan-3); }
.qs-top{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; border:0; background:#fff; color:var(--ink); box-shadow:0 20px 44px -24px rgba(44,44,44,.5);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s var(--ease); }
.quick-side.show .qs-top{ opacity:1; visibility:visible; transform:none; }
.qs-top svg{ width:24px; height:24px; }
.qs-top:hover{ background:var(--pt); color:#fff; }
/* 공유 버튼: 맨위로 아래, 항상 보임. 누르면 왼쪽으로 둥근 SNS 아이콘 줄 */
.share-wrap{ position:relative; }
/* 공유 버튼: 히어로 '메뉴' 버튼과 같은 투명 유리 느낌 (2026-09-18 지시, 금색 반려). 흰 바탕 위에서도 보이게 옅은 먹색 막 + 흰 테두리 */
.qs-share{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; border:1px solid rgba(255,255,255,.7); background:rgba(18,22,30,.3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; box-shadow:0 16px 40px -20px rgba(0,0,0,.6); transition:.2s var(--ease); }
.qs-share svg{ width:24px; height:24px; }
.qs-share:hover, .share-wrap.open .qs-share{ background:rgba(18,22,30,.5); transform:translateY(-2px); }
.share-pop{ position:absolute; right:calc(100% + 14px); bottom:0; padding:14px 16px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line-2); box-shadow:0 24px 60px -28px rgba(44,44,44,.5);
  opacity:0; visibility:hidden; transform:translateX(8px); transition:.2s var(--ease); white-space:nowrap; }
.share-wrap.open .share-pop{ opacity:1; visibility:visible; transform:none; }
.sp-title{ font-size:.82rem; font-weight:600; color:var(--ink-3); margin-bottom:10px; }
.sp-row{ display:flex; gap:10px; }
.sp-row a, .sp-row button{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:0; padding:0; color:#fff; transition:transform .18s var(--ease); }
.sp-row a:hover, .sp-row button:hover{ transform:translateY(-3px); }
.sp-row svg{ width:24px; height:24px; }
/* 원본 원형 브랜드 아이콘 이미지: 원 자체가 이미지라 배경 없이 그대로 */
.sp-row a.has-img{ background:transparent; overflow:hidden; }
.sp-row a.has-img img{ width:100%; height:100%; display:block; border-radius:50%; }
.sp-sms{ background:var(--sns-sms); }
.sp-kakao{ background:var(--sns-kakao); color:var(--ink); }
.sp-line{ background:var(--sns-line); }
.sp-band{ background:var(--sns-band); }
.sp-facebook{ background:var(--sns-fb); }
.sp-x{ background:var(--sns-x); }
/* 주소 복사: 다른 아이콘처럼 진한 원(먹색) + 흰 링크 아이콘 — 흰 원은 안 보였다(2026-09-18) */
.sp-row .sp-link{ background:var(--ink-2); color:#fff; }
.sp-row .sp-link.done{ background:var(--tan-3); color:var(--ink); }

/* ============ 등장 효과 (1종) ============ */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal-stagger > *{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
  .reveal-stagger.in > *{ opacity:1; transform:none; }
  .reveal-stagger.in > *:nth-child(2){ transition-delay:.05s; }
  .reveal-stagger.in > *:nth-child(3){ transition-delay:.1s; }
  .reveal-stagger.in > *:nth-child(4){ transition-delay:.15s; }
  .reveal-stagger.in > *:nth-child(5){ transition-delay:.2s; }
  .reveal-stagger.in > *:nth-child(6){ transition-delay:.25s; }
  .reveal-stagger.in > *:nth-child(n+7){ transition-delay:.3s; }
}
@media print{ .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; } }

/* 넓은 화면(1600 이상, 1920 전체화면): 헤더는 좌우 10% 여백으로 넓게 펼치고 메뉴를 고르게 분배 (2026-09-18 지시).
   그 아래 폭에서는 본문 .wrap 과 같은 폭 유지 */
@media (min-width:1600px){
  .header-inner{ width:80%; max-width:none; }
  .nav{ justify-content:space-evenly; gap:0; margin:0 clamp(24px,3vw,64px); }
  .nav-top{ font-size:1.15rem; }
  .brand img{ height:46px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1400px){
  .nav-top{ font-size:1rem; }
  .nav{ gap:clamp(10px,1.8vw,30px); }
}
@media (max-width:1280px){
  .nav-top{ font-size:1rem; }
  .hd-member{ display:none; }
}
@media (max-width:1100px){
  .vr-cells{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:1024px){
  :root{ --hh:72px; }
  .nav{ display:none; }
  .brand img{ height:36px; }
  .duo, .duo.rev{ grid-template-columns:minmax(0,1fr); }  /* .rev 의 2단 지정보다 우선해야 폰에서 1단이 된다 */
  .duo.rev > :first-child{ order:0; }
  .pastor{ grid-template-columns:minmax(0,1fr); }
  .pastor .photo{ max-width:360px; margin:0 auto; }  /* 태블릿: 가운데 */
  .wor-scene{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; }
  .wor-scene .photo{ grid-row:auto; }
  .info-cells{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .footer-top{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:840px){
  html{ font-size:17px; }
  .hero{ min-height:600px; }
  .gallery{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .timeline{ --tl-x:92px; }
  .tl-items{ padding-left:26px; }
  .tl-items li{ grid-template-columns:62px minmax(0,1fr); gap:12px; }
  .tl-items li::before{ left:-31px; }
  .tl-intro{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .rows li{ grid-template-columns:100px minmax(0,1fr); }
  .fnav{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .vrbox::after{ background:linear-gradient(180deg, rgba(18,22,30,.72) 0%, rgba(18,22,30,.5) 60%, rgba(18,22,30,.25) 100%); }
  .vrbox .vr-in{ max-width:none; min-height:0; padding-bottom:160px; align-items:center; text-align:center; }  /* 폰: 글·버튼 가운데 정렬 (2026-09-18) */
  .vrbox .btn{ align-self:center; }
  .vrbox .vr-sub{ margin-left:auto; margin-right:auto; }
  .band{ flex-direction:column; align-items:flex-start; }
  /* 퀵메뉴: 하단 바 */
  .quick-side{ right:0; left:0; bottom:0; flex-direction:row; justify-content:center; gap:0; }
  .quick-side ul{ flex-direction:row; width:100%; border-radius:0; padding:0; box-shadow:0 -10px 30px -20px rgba(44,44,44,.4); border-top:1px solid var(--line); }
  .quick-side li{ flex:1; }
  .quick-side li a{ width:auto; padding:10px 4px; font-size:.72rem; }
  .quick-side li + li a{ border-top:0; border-left:1px solid var(--line); }
  .quick-side li:first-child a{ margin:0; padding-top:10px; border-radius:0; }
  .quick-side .ico{ width:22px; height:22px; }
  .qs-top{ position:fixed; right:16px; bottom:76px; width:48px; height:48px; }
  .qs-top svg{ width:20px; height:20px; }
  /* 퀵메뉴 없는 사이트(jjch): 맨위로 + 공유 두 버튼을 오른쪽 아래 세로로 */
  .quick-side.no-list{ left:auto; right:16px; bottom:20px; flex-direction:column; gap:10px; }
  .quick-side.no-list .qs-top{ position:static; }
  .qs-share{ width:48px; height:48px; }
  .qs-share svg{ width:20px; height:20px; }
  .share-pop{ right:0; bottom:calc(100% + 10px); padding:12px; }
  .sp-row{ gap:8px; }
  .sp-row a, .sp-row button{ width:40px; height:40px; }
  .sp-row svg{ width:21px; height:21px; }
  .mm-panel{ padding:28px 18px 20px; }
  .mm-grid{ gap:8px; }
  .mm-item{ padding:10px 6px; gap:10px; font-size:.98rem; }
  .mm-item .badge{ width:64px; height:64px; padding:15px; }
  .hero-inner{ padding-bottom:150px; }
  .hero-menu-btn{ height:56px; min-width:min(360px, 88vw); padding:0 40px; font-size:1.05rem; }
  body.has-qs{ padding-bottom:64px; }
}
@media (max-width:600px){
  .wrap{ width:calc(100% - 32px); }
  .hero-inner{ padding:16px 0 150px; }
  .hero .eyebrow{ font-size:.7rem; letter-spacing:.14em; }
  .vr-cells{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .vr-cells .cell{ padding:12px; }
  .pics{ gap:8px; }
  .pastor .photo{ max-width:none; margin:0; }  /* 폰: 담임목사 사진 화면 폭 가득 (2026-09-18 지시). margin:auto 가 남으면 그리드 아이템이 원본 폭(309px)으로 줄어든다 */
  /* 폰(600 이하): 사진 3장 묶음은 첫 장 풀폭 + 아래 두 장 반반 (세로 사진도 같은 배열) — 폰에서 사진이 너무 작다는 지시(2026-09-18) */
  .pics.tall{ grid-template-columns:1fr 1fr; grid-template-rows:none; }
  .pics.tall > :first-child{ grid-row:auto; grid-column:1 / -1; }
  .pics.tall > :nth-child(2), .pics.tall > :nth-child(3){ align-self:auto; }
  .info-cells{ grid-template-columns:minmax(0,1fr); }
  .rows li{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .map.wide{ height:360px; }
  .fm-1 .nm{ font-size:1.35rem; }
  .fm-1 .en{ display:none; }
  .lb-prev, .lb-next{ top:auto; bottom:60px; transform:none; }
  .panel .rows .nm{ min-width:0; width:100%; }
}
@media (max-width:600px){
  /* 폰: 로고 줄은 헤더 높이 그대로(X 와 세로 중심 일치), 회원 버튼이 안 들어가면 그 아래 줄로 내려간다(320px 폭) */
  .fm-top{ gap:0 8px; flex-wrap:wrap; height:auto; min-height:var(--hh); padding-bottom:0; }
  .fm-top .brand{ height:var(--hh); }
  .fm-top .brand img{ height:28px; }
  .fm-auths{ gap:4px; margin-right:48px; margin-bottom:6px; }
  .fm-auths .auth-out, .fm-auths .auth-in{ gap:4px; }
  .fm-auths .hd-auth{ padding:7px 10px; font-size:.8rem; }
}
@media (max-width:400px){
  .header-inner{ gap:10px; }
  .brand img{ height:30px; }
}

/* HDCH-only content and accessibility. Shared jjch component rules above are unchanged. */
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--hh) + 20px)}
.skip{position:fixed;top:-100px;left:16px;z-index:400;background:var(--white);padding:12px 20px}.skip:focus{top:12px}
.hd-section-actions{display:flex;justify-content:flex-end;margin-top:28px;gap:12px;flex-wrap:wrap}
.hd-vision .rows .yr{padding-top:0}.hd-vision .rows li{grid-template-columns:60px minmax(0,1fr)}
.hd-sermons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hd-sermon .photo{position:relative}.hd-sermon .photo img{width:100%;height:auto}
.hd-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(18,22,30,.35);border:1px solid rgba(255,255,255,.65);color:var(--white)}
.hd-play svg{width:22px;height:22px}.hd-sermon h3{font-size:1.3rem;margin-top:12px}.hd-sermon p{margin-top:10px;color:var(--ink-2);font-size:.95rem}.hd-sermon .hd-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:.86rem;color:var(--pt);margin-top:18px}.hd-meta time{color:var(--ink-3)}
.hd-news a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;width:100%;padding:20px 0;border-bottom:1px solid var(--line)}.hd-news h3{font-size:1.15rem;font-weight:600}.hd-news time{font-size:.9rem;color:var(--ink-3)}.hd-news a:hover h3{color:var(--pt)}
.hd-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.hd-note{color:var(--ink-2);margin-top:22px;font-size:.95rem}
.hero-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-media video{opacity:0;transition:opacity .4s}.hero-media video.is-playing{opacity:1}
.hd-video-control{position:absolute;left:26px;bottom:30px;z-index:4;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);background:rgba(18,22,30,.3);color:var(--white)}.hd-video-control svg{width:20px;height:20px}
.hd-vr-video{position:absolute;left:0;top:0;width:100%;height:100%}.hd-vr-control{position:absolute;bottom:16px;right:16px;z-index:3;width:44px;height:44px;border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(18,22,30,.3);color:var(--white)}
@media(max-width:840px){.hd-sermons{grid-template-columns:minmax(0,1fr);gap:32px}.hd-news a{grid-template-columns:minmax(0,1fr);gap:8px}.hd-video-control{left:16px;bottom:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-media video{transition:none}}

/* Keep the original 40px share buttons inside narrow phone screens. */
@media(max-width:400px){.share-pop{width:calc(100vw - 48px);max-width:calc(100vw - 48px)}.sp-row{flex-wrap:wrap}}


/* Eight VR spaces stay on one row; phones can swipe through the same row. */
.vr-cells.vr-cells-row{grid-template-columns:repeat(8,minmax(0,1fr));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.vr-cells-row .cell{padding:12px;scroll-snap-align:start}.vr-cells-row .cell:last-child{margin-right:0;border-right:0}
.vr-cells-row .nm{white-space:nowrap}
.vr-cells-row:focus-visible{outline:2px solid var(--pt);outline-offset:4px}
@media(max-width:1100px){.vr-cells.vr-cells-row{grid-template-columns:repeat(8,160px)}}

/* Let the worship photo fill the height of the two adjacent schedule panels. */
.wor-scene > .photo{position:relative;align-self:stretch;min-height:440px}
.wor-scene > .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:25% center}
@media(max-width:1024px){.wor-scene > .photo{min-height:0;aspect-ratio:4/3}}

/* Location content and Kakao embed match the original church location page. */

/* Accommodate all nine primary menus without shrinking their text. */
@media(min-width:1025px){.header-inner{width:90%;gap:20px}.nav{gap:clamp(8px,.8vw,16px);margin:0 8px}}

.hero-media #heroVimeo{min-width:0;min-height:0;opacity:0;transition:opacity .4s}.hero-media #heroVimeo.is-playing{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-media #heroVimeo{transition:none}}