/* ============================================================
   site.css — 공개 페이지 공통 스타일 (index + 세부페이지 공용)
   common.css(토큰/버튼/폼) 위에서 동작. 헤더·푸터는 common.js가 주입.
   ============================================================ */
:root{ --serif:'Pretendard','Pretendard Variable',-apple-system,system-ui,sans-serif; --maxw:1120px; --sec-pad:90px; --sec-title:28px; }
body{background:var(--surface);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{scroll-margin-top:76px;}

/* ---------- 헤더 ---------- */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line);}
.site-head .bar{display:flex;align-items:center;gap:18px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink);}
.brand .mk{width:34px;height:34px;border-radius:9px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center;}
.nav a{padding:8px 12px;border-radius:8px;font-size:14.5px;font-weight:500;color:#3c4856;transition:.12s;}
.nav a:hover{background:var(--surface-2);color:var(--primary);}
.nav a.active{color:var(--primary);font-weight:700;}
.nav .yt{margin-left:6px;background:var(--primary);color:#fff;font-weight:600;}
.nav .yt:hover{background:var(--primary-700);color:#fff;}
.nav-drop{position:relative;display:flex;align-items:center;}
.nav-drop>a{display:inline-flex;align-items:center;gap:3px;}
.nav-drop .caret{font-style:normal;font-size:10px;opacity:.55;}
.dropmenu{position:absolute;top:100%;left:0;min-width:172px;background:#1a2236;border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(0,0,0,.22);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:60;}
.nav-drop:hover .dropmenu{opacity:1;visibility:visible;transform:translateY(0);}
.dropmenu a{display:block;padding:11px 20px;color:#ffffff;font-size:14px;font-weight:600;}
.dropmenu a:hover{background:var(--primary);color:#fff;}
.navtoggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:8px;
  width:42px;height:38px;font-size:18px;cursor:pointer;}

/* ---------- 히어로(메인) ---------- */
.hero{position:relative;color:#eef2f5;overflow:hidden;
  background:linear-gradient(160deg,#33505f 0%,#283d49 60%,#1f303a 100%);}
.hero .bgslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;}
.hero .veil{position:absolute;inset:0;background:linear-gradient(160deg,rgba(31,48,58,.78),rgba(31,48,58,.62));}
.hero .inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:96px 24px 92px;}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;letter-spacing:.06em;color:#d8c39a;font-weight:600;margin-bottom:22px;}
.hero .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block;}
.hero .verse{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4.4vw,46px);line-height:1.5;letter-spacing:-.01em;max-width:18em;text-wrap:balance;}
.hero .ref{font-family:var(--serif);font-size:16px;color:#c9d4db;margin-top:22px;font-style:italic;}
.hero .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;}
.hero .chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);padding:9px 15px;border-radius:999px;color:#eef2f5;}
.hero .chip b{color:#e7d3ab;font-weight:600;}

/* ---------- 페이지 배너(세부) ---------- */
.pbanner{background:linear-gradient(160deg,#33505f,#243843);color:#eef2f5;}
.pbanner .wrap{padding:56px 24px 52px;}
.pbanner .en{font-size:12.5px;letter-spacing:.14em;color:#d8c39a;font-weight:700;text-transform:uppercase;margin-bottom:10px;}
.pbanner h1{font-family:var(--serif);font-size:34px;font-weight:800;letter-spacing:-.02em;}
.pbanner p{color:#c4d0d8;margin-top:10px;font-size:15px;max-width:46em;}

/* ---------- 섹션 공통 ---------- */
.sec{padding:var(--sec-pad) 0;}
.sec.alt{background:var(--bg);}
.sec.slim{padding:52px 0;}
.sec-head{margin-bottom:30px;}
.sec-head .en{font-size:12.5px;letter-spacing:.14em;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:8px;}
.sec-head .kr{font-family:var(--serif);font-size:27px;font-weight:800;letter-spacing:-.02em;}
.sec-head .more{margin-left:auto;font-size:14px;color:var(--muted);}
.row-head{display:flex;align-items:flex-end;}

/* 빠른메뉴 */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-46px;position:relative;z-index:10;}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 22px;transition:.16s;display:block;}
.qcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(16,24,40,.10);}
.qcard .ic{font-size:22px;}
.qcard .t{font-weight:700;font-size:16px;margin-top:14px;color:var(--ink);}
.qcard .d{font-size:13px;color:var(--muted);margin-top:4px;}

/* 슬라이드 배너 */
.banner{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:21/8;background:var(--surface-2);box-shadow:var(--shadow);}
.banner .bslide{position:absolute;inset:0;opacity:0;transition:opacity .8s;background-size:cover;background-position:center;}
.banner .bslide.on{opacity:1;}
.banner .cap{position:absolute;left:0;bottom:0;padding:26px 30px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);width:100%;}
.banner .cap h4{font-family:var(--serif);font-size:24px;}
.banner .dots{position:absolute;right:16px;bottom:16px;display:flex;gap:7px;}
.banner .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;}
.banner .dots i.on{background:#fff;}

/* 인사말 */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;}
.intro .lead{font-family:var(--serif);font-size:22px;line-height:1.7;color:#2b3a45;}
.intro p{color:#4b5563;line-height:1.85;margin:14px 0 0;white-space:pre-line;}

/* 설교 그리드 */
.sermons{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.sermon{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.16s;display:block;}
.sermon:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.sermon .thumb-wrap{aspect-ratio:16/9;background:var(--surface-2) center/cover;position:relative;}
.sermon .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:38px;text-shadow:0 2px 12px rgba(0,0,0,.5);opacity:.92;}
.sermon .body{padding:18px;}
.sermon .body .cat{font-size:12px;font-weight:700;color:var(--accent);}
.sermon .body h4{font-size:16.5px;margin:7px 0 8px;line-height:1.4;color:var(--ink);}
.sermon .body .meta{font-size:13px;color:var(--muted);}

/* 필터 */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.chip-btn{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:14px;font-weight:600;color:#52606d;cursor:pointer;}
.chip-btn.on{background:var(--primary);border-color:var(--primary);color:#fff;}

/* 소식 */
.news{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;}
.panel h3{font-family:var(--serif);font-size:20px;margin-bottom:14px;display:flex;align-items:center;}
.panel h3 .more{margin-left:auto;font-size:13px;color:var(--muted);font-family:Pretendard,sans-serif;}
.list{border-top:1px solid var(--line);}
.list .it{display:flex;gap:12px;align-items:baseline;padding:14px 2px;border-bottom:1px solid var(--line);cursor:pointer;}
.list .it:hover .ttl{color:var(--primary);}
.list .it .ttl{font-weight:500;color:#2b3a45;}
.list .it .dt{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap;}
.ev{display:flex;gap:14px;padding:14px 2px;border-bottom:1px solid var(--line);}
.ev .d{flex:none;width:48px;text-align:center;}
.ev .d .m{font-size:12px;color:var(--accent);font-weight:700;}
.ev .d .day{font-family:var(--serif);font-size:22px;font-weight:800;line-height:1;}
.ev .info .t{font-weight:600;color:#2b3a45;}
.ev .info .s{font-size:13px;color:var(--muted);margin-top:2px;}
.bulletin-card{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:14px;transition:.14s;}
.bulletin-card:hover{box-shadow:var(--shadow);}
.bulletin-card .ic{width:46px;height:46px;border-radius:10px;background:var(--accent-soft);color:#8a6526;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;}

/* 갤러리 */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.galcard{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;transition:.16s;}
.galcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.galcard .img{aspect-ratio:4/3;background:var(--surface-2) center/cover;}
.galcard .cap{padding:12px 14px;}
.galcard .cap .t{font-weight:600;font-size:14.5px;color:var(--ink);}
.galcard .cap .n{font-size:12px;color:var(--muted);margin-top:2px;}

/* 오시는 길 */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch;}
.loc .map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:320px;}
.loc .map iframe{width:100%;height:100%;border:0;display:block;}
.loc .info{padding:6px 0;}
.loc .info .li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
.loc .info .li .k{flex:none;width:84px;color:var(--accent);font-weight:700;font-size:14px;}
.loc .info .li .v{color:#33414e;white-space:pre-line;}

/* 본문 페이지(소개/헌금) */
.prose{max-width:760px;}
.prose h2{font-family:var(--serif);font-size:22px;margin:0 0 12px;}
.prose .block{padding:26px 0;border-top:1px solid var(--line);}
.prose .block:first-child{border-top:none;}
.prose .txt{color:#42505c;line-height:1.9;white-space:pre-line;}
.account-card{background:var(--accent-soft);border:1px solid #ecdcbf;border-radius:var(--radius);padding:22px 24px;color:#5e4a22;line-height:1.9;white-space:pre-line;}

/* 폼(새가족) */
.form-card{max-width:620px;}
.form-card .card{padding:28px;}
.form-note{font-size:13px;color:var(--muted);background:var(--surface-2);border-radius:10px;padding:12px 14px;margin-bottom:20px;line-height:1.7;}
.thanks{max-width:560px;text-align:center;padding:60px 20px;}
.thanks .ic{font-size:42px;color:var(--accent);}
.thanks h2{font-family:var(--serif);font-size:26px;margin:14px 0 8px;}
.thanks p{color:var(--muted);}

/* 푸터 */
.foot{background:var(--primary-700);color:#aab9c2;padding:48px 0 40px;}
.foot .top{display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;}
.foot .brand2{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:18px;margin-bottom:12px;}
.foot .brand2 .mk{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;}
.foot .fcol .h{color:#dde6ec;font-weight:600;font-size:14px;margin-bottom:10px;}
.foot .fcol div{font-size:13.5px;line-height:1.9;white-space:pre-line;}
.foot .bottom{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);font-size:12.5px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.foot a{color:#cdd8df;}
.foot .right{margin-left:auto;}

.placeholder{color:var(--muted);font-size:14px;padding:24px 0;}

/* 팝업 / 라이트박스 */
.pop-ov{position:fixed;inset:0;background:rgba(16,24,40,.5);display:flex;align-items:flex-start;justify-content:center;padding:48px 16px;z-index:60;overflow:auto;}
.pop{background:#fff;border-radius:var(--radius);max-width:640px;width:100%;box-shadow:var(--shadow);}
.pop .h{display:flex;align-items:flex-start;padding:22px 24px;border-bottom:1px solid var(--line);}
.pop .h h3{font-family:var(--serif);font-size:20px;}
.pop .h .x{margin-left:auto;border:none;background:none;font-size:22px;cursor:pointer;color:var(--muted);}
.pop .b{padding:24px;color:#42505c;line-height:1.9;white-space:pre-line;}
.pop .b .meta{color:var(--muted);font-size:13px;margin-bottom:14px;}
.lb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:20px;}
.lb-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;}
.lb-full{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:70;cursor:zoom-out;}
.lb-full img{max-width:92vw;max-height:92vh;border-radius:8px;}

@media(max-width:900px){
  .quick{grid-template-columns:repeat(2,1fr);}
  .sermons{grid-template-columns:1fr 1fr;}
  .news,.intro,.loc{grid-template-columns:1fr;gap:28px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .lb-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:680px){
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:8px 16px 16px;gap:2px;}
  .nav.open{display:flex;}
  .nav a{padding:11px 8px;}
  .nav .yt{margin:6px 0 0;}
  .nav-drop{flex-direction:column;align-items:stretch;}
  .nav-drop .caret{display:none;}
  .dropmenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:8px;padding:4px 0;margin:2px 0 6px;}
  .navbar .nav .nav-drop>a.armed{background:var(--primary);color:#fff !important;border-radius:8px;}
  .navbar .nav .dropmenu a{color:#fff !important;padding:10px 22px;opacity:.95;}
  .navbar .nav .dropmenu a:hover{background:rgba(255,255,255,.15);color:#fff !important;}
  .navtoggle{display:block;}
  .sermons{grid-template-columns:1fr;}
  .hero .inner{padding:64px 24px 60px;}
  .pbanner .wrap{padding:40px 24px 38px;}
}

/* ============================================================
   온세대 스타일 리디자인 (헤더 바 + 슬라이더 + 소개카드 + 3단보드 + 미디어 + 푸터)
   ============================================================ */
:root{ --navy:#15213f; --navy2:#1d2c54; --gold:#e0b13c; --orange:#ff7a2f; }

/* 헤더: 상단 유틸바 + 메뉴바 */
.site-head{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);}
.topbar .tb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:74px;gap:12px;}
.tb-phone{font-size:14px;color:#5a6675;letter-spacing:-.01em;}
.tb-phone b{color:var(--navy);font-weight:700;font-size:18px;}
.tb-logo{display:flex;align-items:center;gap:12px;justify-self:center;color:var(--navy);}
.tb-logo-img{width:48px;height:48px;object-fit:contain;flex:none;}
.tb-logo-txt{display:flex;flex-direction:column;align-items:center;line-height:1.08;}
.tb-logo .mk{width:40px;height:40px;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;}
.tb-logo .nm{font-size:25px;font-weight:800;letter-spacing:.04em;}
.tb-logo .sub{display:block;font-size:11px;color:#8a93a0;font-weight:600;letter-spacing:.04em;text-align:center;margin-bottom:1px;}
.tb-logo-noimg .tb-logo-txt{align-items:flex-start;}
.tb-logo-noimg .sub{text-align:left;}
.tb-logo-wide{gap:0;}
.tb-logo-wideimg{height:56px;width:auto;max-width:min(420px,60vw);object-fit:contain;display:block;}
.tb-btns{justify-self:end;display:flex;align-items:center;gap:8px;}
.tb-btn{font-size:13px;font-weight:600;padding:8px 13px;border-radius:8px;border:1px solid var(--line);color:#46505e;display:inline-flex;align-items:center;gap:6px;}
.tb-btn:hover{background:var(--surface-2);}
.tb-btn.yt{background:#fff;border-color:#f0c9c4;color:#c4302b;}
.tb-btn.yt:hover{background:#fff6f5;}
.tb-btn.admin::before{content:"●";color:#e02;font-size:9px;}

.navbar{background:#fff;border-top:1px solid #f0f1f4;}
.navbar .nav{display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;}
.navbar .nav a{position:relative;padding:16px 38px;font-size:16px;font-weight:600;color:#2a3340;letter-spacing:-.01em;}
.navbar .nav a + a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:13px;background:#e2e5ea;}
.navbar .nav a:hover{color:var(--navy);}
.navbar .nav a.active{color:var(--gold);}
.navbar .nav .yt{display:none;}
/* 드롭다운: 어두운 배경 → 흰 글씨(상위 규칙보다 우선) */
.navbar .nav .nav-drop>a{color:#2a3340;}
.navbar .nav .dropmenu a{color:#ffffff;padding:11px 20px;font-size:14px;font-weight:600;}
.navbar .nav .dropmenu a:hover{color:#ffffff;background:var(--primary);}
.navbar .nav .dropmenu a + a::before{display:none;}
.navtoggle{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:8px;width:42px;height:38px;font-size:18px;cursor:pointer;}

/* 홈 히어로 슬라이더 */
.home-hero{position:relative;height:82vh;min-height:640px;max-height:860px;overflow:hidden;background:var(--navy);}
.home-hero .hslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease;}
.home-hero .hslide.on{opacity:1;}
/* .hbg 기본 크기 = 시작 scale(--s0). 페이드 인 시에도 크기가 안 튀게 유지 */
.home-hero .hslide .hbg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(var(--s0,1));z-index:0;will-change:transform;backface-visibility:hidden;image-rendering:auto;}
@media (prefers-reduced-motion: no-preference){
  /* .on이 되면 시작(--s0)→끝(--s1) scale로 부드럽게. 전환주기(5s)보다 약간 길게(6s) */
  .home-hero .hslide.on .hbg.kb-run{animation:kb-scale 6s ease-in-out forwards;}
}
@keyframes kb-scale{from{transform:scale(var(--s0,1));}to{transform:scale(var(--s1,1.1));}}
.home-hero .hslide video.hvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.home-hero .hslide .hyt{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.home-hero .hslide .hyt iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none;}
.home-hero .hslide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,28,.18),rgba(8,14,28,.42));}
.home-hero .hcap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;}
.home-hero .hcap.pos-top{justify-content:flex-start;padding-top:12vh;}
.home-hero .hcap.pos-bottom{justify-content:flex-end;padding-bottom:14vh;}
.home-hero .hcap .t{font-size:clamp(20px,3.2vw,40px);font-weight:400;color:#ffffff;letter-spacing:-.01em;line-height:1.12;text-shadow:0 3px 16px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.4);}
.home-hero .hcap .s{font-size:clamp(13px,1.5vw,16px);color:#fff;margin-top:16px;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.home-hero .hcap .d{font-size:15px;color:#eef2f8;margin-top:10px;opacity:.92;text-shadow:0 2px 8px rgba(0,0,0,.6);}
.home-hero .harrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:48px;border-radius:50%;border:0;background:rgba(0,0,0,.32);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.home-hero .harrow:hover{background:rgba(0,0,0,.55);}
.home-hero .harrow.prev{left:22px;} .home-hero .harrow.next{right:22px;}
@media(max-width:560px){ .home-hero .harrow{width:40px;height:40px;font-size:20px;} .home-hero .harrow.prev{left:10px;} .home-hero .harrow.next{right:10px;} }
.home-hero .hdots{position:absolute;left:0;right:0;bottom:64px;z-index:3;display:flex;gap:9px;justify-content:center;}
.home-hero .hdots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;border:1px solid rgba(255,255,255,.6);}
.home-hero .hdots i.on{background:var(--gold);border-color:var(--gold);}
.home-hero .scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;}

/* 소개/안내 (네이비) */
.intro-sec{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:70px 0 48px;}
/* 소개 바로 다음 섹션(설교)은 위 여백을 줄여 간격을 좁게 */
.intro-sec + .sec{padding-top:44px;}
.intro-sec .ttl{text-align:center;font-size:var(--sec-title);font-weight:800;letter-spacing:-.02em;}
.intro-sec .desc{text-align:center;color:#aeb9cc;margin-top:12px;font-size:15px;}
.intro-sec .desc::after{content:"";display:block;width:40px;height:3px;background:var(--gold);margin:18px auto 0;border-radius:2px;}
.icards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;}
.icard{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;box-shadow:0 6px 20px rgba(16,24,40,.08);transition:.18s;}
.icard:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(16,24,40,.14);}
.icard .ic{font-size:34px;line-height:1;}
.icard .lb{font-size:16px;font-weight:700;color:var(--navy);letter-spacing:-.01em;}
.icard .sub{font-size:12.5px;color:#8a94a3;letter-spacing:.01em;}

/* 3단 게시판 */
.board3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.board3.board2{grid-template-columns:7fr 3fr;}
.board-col{padding:30px 28px;border-left:1px solid var(--line);}
.board-col:first-child{border-left:none;}
.board-col .bh{display:flex;align-items:baseline;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:8px;}
.board-col .bh .bt{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.board-col .bh .more{margin-left:auto;font-size:13px;color:#9aa3b0;}
.brow{display:flex;gap:10px;align-items:baseline;padding:13px 0;border-bottom:1px solid #f0f1f4;}
.brow:last-child{border-bottom:none;}
.brow .bx{flex:none;color:var(--gold);font-weight:800;font-size:12px;}
.brow .bt2{color:#33414e;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brow .bd{margin-left:auto;font-size:12.5px;color:#9aa3b0;white-space:nowrap;}
.brow:hover .bt2{color:var(--navy);}

/* 미디어 (어두운 배경 + 보케) */
.media-sec{position:relative;padding:80px 0 88px;color:#fff;overflow:hidden;
  background:radial-gradient(circle at 18% 30%, rgba(90,120,255,.22), transparent 40%),
             radial-gradient(circle at 78% 24%, rgba(150,90,255,.20), transparent 42%),
             radial-gradient(circle at 60% 80%, rgba(60,150,255,.16), transparent 45%),
             linear-gradient(140deg,#101a36,#1a1340);}
.media-sec .mt{text-align:center;font-size:var(--sec-title);font-weight:800;letter-spacing:-.02em;}
.media-sec .more{display:block;width:120px;margin:18px auto 40px;text-align:center;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:8px 0;font-size:13px;letter-spacing:.06em;color:#fff;}
.media-sec .more:hover{background:rgba(255,255,255,.12);}
.mcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.mcard{border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.mcard .img{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:rgba(255,255,255,.08);}
.mcard .cap{padding:12px 14px;font-size:14px;font-weight:600;}
.mcard .cap .n{font-size:12px;color:#b9c2d6;font-weight:400;margin-top:2px;}

/* 찾아오시는 길 */
.find{padding:74px 0;text-align:center;}
.find .ttl{font-size:var(--sec-title);font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.find .addr{color:#5a6675;margin-top:12px;font-size:15px;}
.find .mapbtn{display:inline-block;margin-top:18px;background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:10px 22px;border-radius:999px;}
.find .mapwrap{margin-top:30px;border-radius:14px;overflow:hidden;border:1px solid var(--line);}
.find .mapwrap iframe{width:100%;height:440px;border:0;display:block;}

/* 푸터 (온세대식) */
.foot-legal{background:#f4f5f7;border-top:1px solid var(--line);}
.foot-legal .wrap{display:flex;justify-content:center;gap:16px;align-items:center;padding:13px 24px;font-size:13px;color:#6b7480;}
.foot-legal a:hover{color:var(--navy);}
.foot{background:#222a38;color:#9aa6b6;padding:40px 0 18px;}
.foot-in{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;}
.foot-logo{display:flex;align-items:center;gap:12px;color:#fff;}
.foot-logo .mk{width:46px;height:46px;border-radius:11px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;}
.foot-logo b{font-size:20px;font-weight:800;}
.foot-logo .sub{font-size:11px;color:#8b95a4;font-weight:600;}
.foot-info{font-size:13.5px;line-height:1.95;}
.foot-info b{color:#dfe5ee;}
.foot-social{display:flex;gap:10px;align-items:center;}
.foot-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.foot-social a:hover{background:var(--gold);color:#1a1a1a;}
.foot-copy{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.10);text-align:center;font-size:12px;color:#7e899a;}

/* 페이지 배너 네이비 통일 */
.pbanner{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#eef2f5;}
.pbanner .en{color:var(--gold);}

@media(max-width:900px){
  .icards{grid-template-columns:repeat(2,1fr);}
  .board3, .board3.board2{grid-template-columns:1fr;}
  .board-col{border-left:none;border-top:1px solid var(--line);}
  .board-col:first-child{border-top:none;}
  .mcards{grid-template-columns:repeat(2,1fr);}
  .foot-in{grid-template-columns:1fr;gap:20px;text-align:center;}
  .foot-logo,.foot-social{justify-content:center;}
}
@media(max-width:680px){
  .topbar .tb{grid-template-columns:1fr auto 1fr;height:60px;}
  .tb-phone{display:none;}
  .tb-logo{justify-self:center;grid-column:2;}
  .tb-btns{grid-column:3;}
  .tb-logo .nm{font-size:21px;}
  .tb-logo-wideimg{height:42px;max-width:62vw;}
  .tb-btns .tb-btn{display:none;}
  .tb-btns .tb-btn.app{display:inline-flex;}  /* 앱 설치 버튼은 모바일에서도 노출 */
  .navtoggle{display:block;}
  .navbar .nav{display:none;flex-direction:column;}
  .navbar .nav.open{display:flex;}
  .navbar .nav a + a::before{display:none;}
  .navbar .nav a{padding:12px;border-top:1px solid #f0f1f4;width:100%;text-align:center;}
  .navbar .nav .dropmenu a{color:#3c4856;border-top:0;}
  .home-hero{height:64vh;min-height:420px;}
}

/* 지도: 네이버 버튼 오버레이 */
.map-embed{position:relative;width:100%;height:100%;min-height:320px;}
.map-embed iframe{width:100%;height:100%;border:0;display:block;}
.map-naver{position:absolute;right:12px;top:12px;background:#03c75a;color:#fff;font-weight:700;font-size:13px;padding:8px 13px;border-radius:8px;box-shadow:0 3px 12px rgba(0,0,0,.25);z-index:2;}
.map-naver:hover{background:#02b14f;}

/* 주일설교 대표(최신) 썸네일 카드 */
.bfeat{display:block;margin:6px 0 4px;}
.bfeat .th{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--surface-2) center/cover;}
.bfeat .th .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.bfeat .ti{font-size:15.5px;font-weight:700;color:var(--navy);margin-top:9px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bfeat .dt{font-size:12.5px;color:#9aa3b0;margin-top:3px;}

/* 관리자 홈 버튼 */
.admin-home{display:inline-flex;align-items:center;gap:6px;}

/* 지도 이미지(네이버 캡처) 모드 */
.map-img{display:block;position:relative;width:100%;overflow:hidden;background:#f4f6f8;}
.map-img img{width:100%;height:auto;display:block;}
.map-img .map-naver{position:absolute;right:12px;top:12px;}
.map-img:hover img{filter:brightness(0.97);}

/* 섬기는 이 — 가로형 프로필 */
.staff-list{display:flex;flex-direction:column;gap:64px;}
.staff-item{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start;}
.sp-left{display:flex;justify-content:center;}
.sp-photo{width:300px;height:300px;border-radius:50%;object-fit:cover;background:#eef1f6;box-shadow:0 14px 32px rgba(21,33,63,.17);display:block;}
.sp-photo.noimg{display:flex;align-items:center;justify-content:center;font-size:104px;color:#b8c0d0;font-weight:800;font-family:var(--serif);}
.sp-en{font-family:var(--serif);font-size:42px;font-weight:300;letter-spacing:.05em;color:#cfd5de;line-height:1;margin-bottom:20px;}
.sp-head{font-size:24px;color:var(--navy);margin-bottom:24px;}
.sp-head .pos{color:#8a93a3;font-weight:600;margin-right:4px;}
.sp-head b{font-weight:800;}
.sp-body{border-left:3px solid var(--primary);padding-left:24px;color:#4b5567;font-size:15px;line-height:2;}
@media(max-width:760px){
  .staff-item{grid-template-columns:1fr;gap:22px;text-align:center;}
  .sp-photo{width:220px;height:220px;}
  .sp-photo.noimg{font-size:76px;}
  .sp-en{font-size:30px;}
  .sp-body{text-align:left;}
}

/* 예배 안내 페이지 */
.wor-photo img{width:100%;border-radius:14px;display:block;margin-bottom:36px;box-shadow:0 12px 28px rgba(21,33,63,.13);}
.wor-intro{border-left:4px solid var(--primary);padding:6px 0 6px 22px;margin:0 0 50px;color:#3c4856;line-height:1.95;font-size:16px;}
.wor-intro .lead{font-weight:700;color:var(--navy);font-size:18px;display:block;margin-bottom:8px;}
.wor-h2{text-align:center;font-family:var(--serif);font-size:26px;font-weight:800;color:var(--navy);margin:8px 0 24px;}
.wor-table{width:100%;border-collapse:collapse;border-top:2px solid var(--navy);}
.wor-table th{background:#f4f6f9;padding:15px;font-weight:700;color:var(--navy);border-bottom:1px solid #e6ebf2;font-size:15px;}
.wor-table td{padding:15px;text-align:center;border-bottom:1px solid #eef1f6;color:#4b5567;font-size:15px;}
.wor-table td.name{font-weight:700;color:var(--navy);background:#fafbfc;width:38%;}

/* 법적 고지 페이지(개인정보·약관·이메일거부) */
.legal{max-width:880px;line-height:1.8;color:#3c4856;font-size:15px;}
.legal h2{font-family:var(--serif);font-size:21px;font-weight:800;color:var(--navy);margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid #eef1f6;}
.legal h3{font-size:16px;font-weight:700;color:var(--navy);margin:22px 0 8px;}
.legal p{margin:8px 0;}
.legal ul{margin:8px 0 10px 18px;list-style:disc;}
.legal li{margin:4px 0;}
.legal .lead{color:#5b6475;margin-bottom:18px;}
.legal .box{background:#f6f8fb;border:1px solid #e6ebf2;border-radius:10px;padding:16px 18px;margin:14px 0;}
.legal .eff{margin-top:30px;color:#8a93a3;font-size:14px;}

.block{scroll-margin-top:96px;}

/* 일정 달력 */
.cal{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;}
.cal-head{display:flex;align-items:center;justify-content:center;gap:26px;padding:16px;border-bottom:1px solid var(--line);}
.cal-title{font-family:var(--serif);font-size:20px;font-weight:800;color:var(--navy);min-width:140px;text-align:center;}
.cal-nav{border:1px solid var(--line);background:#fff;border-radius:8px;width:36px;height:36px;font-size:18px;cursor:pointer;color:var(--navy);line-height:1;}
.cal-nav:hover{background:#f4f6f9;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.cal-dow{background:#f8fafc;border-bottom:1px solid var(--line);}
.cal-wd{padding:10px;text-align:center;font-size:13px;font-weight:700;color:#5b6475;}
.cal-wd.sun{color:#d64545;} .cal-wd.sat{color:#2a6dd6;}
.cal-cell{min-height:96px;border-right:1px solid #f0f2f5;border-bottom:1px solid #f0f2f5;padding:6px;}
.cal-cell:nth-child(7n){border-right:0;}
.cal-cell.empty{background:#fbfcfd;}
.cal-d{font-size:13px;color:#3c4856;font-weight:600;margin-bottom:4px;}
.cal-cell.sun .cal-d{color:#d64545;} .cal-cell.sat .cal-d{color:#2a6dd6;}
.cal-cell.today{background:#fff8e9;} .cal-cell.today .cal-d{color:#c79a2e;font-weight:800;}
.cal-ev{font-size:11px;line-height:1.3;background:var(--primary);color:#fff;border-radius:4px;padding:2px 6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;}
.cal-more{font-size:10px;color:#8a93a3;padding-left:2px;}
@media(max-width:600px){ .cal-cell{min-height:60px;padding:3px;} .cal-ev{font-size:9px;padding:1px 3px;} .cal-d{font-size:11px;} .cal-head{gap:14px;} .icards{grid-template-columns:1fr;gap:12px;} }

/* index 일정 섹션 */
.cal-sec .sec-title{text-align:center;font-family:var(--serif);font-size:var(--sec-title);font-weight:800;color:var(--navy);margin-bottom:6px;letter-spacing:-.02em;}
.cal-sec .sec-sub{text-align:center;color:#8a93a3;font-size:14px;margin-bottom:26px;}

/* 메인 주일설교 인라인 영상 */
.bfeat .th-video{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;}
.bfeat .th-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.bfeat[data-yt]{cursor:pointer;}

/* 주보 인라인 미리보기 */
.bul{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden;background:#fff;}
.bul-head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;}
.bul-head .ic{width:46px;height:46px;border-radius:10px;background:var(--accent-soft);color:#8a6526;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;}
.bul-head .chev{margin-left:auto;color:#9aa3b0;font-size:14px;transition:.15s;}
.bul.open .bul-head .chev{transform:rotate(180deg);}
.bul-prev{border-top:1px solid var(--line);padding:16px;background:#f6f8fb;}
.bul-img{width:100%;display:block;border-radius:8px;box-shadow:0 4px 14px rgba(21,33,63,.1);}
.bul-pdf{width:100%;height:78vh;border:0;border-radius:8px;background:#fff;}
.bul-actions{margin-top:12px;text-align:right;}
.bul-actions a{font-size:13px;color:var(--primary);font-weight:600;}

/* 말씀카드 세로형 */
.wcards{display:flex;flex-direction:column;gap:20px;margin-top:6px;}
.wcard{cursor:pointer;width:100%;max-width:248px;}
.wcard .wc-img{position:relative;width:100%;aspect-ratio:9/16;background:var(--surface-2) center/cover;border-radius:10px;box-shadow:0 6px 18px rgba(21,33,63,.12);transition:.15s;}
.wcard:hover .wc-img{transform:translateY(-2px);box-shadow:0 12px 26px rgba(21,33,63,.18);}
.wcard .wc-img .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.wcard .wc-ti{font-size:15px;font-weight:700;color:var(--navy);margin-top:10px;line-height:1.4;}
.wcard .wc-dt{font-size:12.5px;color:#9aa3b0;margin-top:3px;}

/* 영상/이미지 팝업 (화면 1/2 크기) */
.vpop{position:fixed;inset:0;background:rgba(10,15,30,.82);display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px;}
.vpop-box{position:relative;width:min(92vw, calc((100vh - 90px) * 16 / 9));max-width:1100px;}
.vpop-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5);}
.vpop-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* 숏츠(세로) 재생 */
.vpop-box.vpop-vert{width:auto;max-width:none;}
.vpop-box.vpop-vert .vpop-frame{aspect-ratio:9/16;height:84vh;width:auto;}
.vpop-img{display:flex;justify-content:center;}
.vpop-img img{max-width:50vw;max-height:84vh;border-radius:10px;box-shadow:0 24px 64px rgba(0,0,0,.5);display:block;}
.vpop-x{position:absolute;top:-46px;right:0;width:38px;height:38px;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:24px;border-radius:8px;cursor:pointer;line-height:1;}
.vpop-x:hover{background:rgba(255,255,255,.32);}
@media(max-width:760px){
  .vpop{padding:10px;}
  .vpop-box{width:calc(100vw - 20px);max-width:none;}
  .vpop-img img{max-width:calc(100vw - 20px);}
  .vpop-box.vpop-vert{width:auto;}
  .vpop-box.vpop-vert .vpop-frame{height:auto;width:88vw;}
}

/* 담임목사 섹션 (행복누리식 패럴럭스) */
.pastor-sec{position:relative;padding:90px 0;background:linear-gradient(160deg,#1a2c4d,#11203b);background-size:cover;background-position:center;}
.pastor-sec.parallax{background-attachment:fixed;}
.pastor-sec.has-bg::before{content:"";position:absolute;inset:0;background:rgba(12,20,38,.64);}
.pastor-sec .wrap{position:relative;z-index:1;}
.pastor-card{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:center;}
.pastor-info .eyebrow{color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.18em;}
.pastor-info h2{color:#fff;font-size:clamp(24px,3.4vw,34px);margin:12px 0 16px;line-height:1.3;}
.pastor-info p{color:#cdd8e8;font-size:16px;line-height:1.9;max-width:560px;white-space:pre-line;}
.pastor-btns{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;}
.pastor-btns a{padding:12px 26px;border-radius:10px;font-weight:700;font-size:14px;transition:.15s;}
.pastor-btns a:first-child{background:var(--gold);color:var(--navy);}
.pastor-btns a:first-child:hover{background:#cda23a;}
.pastor-btns a:last-child{border:1px solid rgba(255,255,255,.4);color:#fff;}
.pastor-btns a:last-child:hover{background:rgba(255,255,255,.1);}
.pastor-photo{width:300px;height:380px;border-radius:16px;background:#33415c center/cover;box-shadow:0 20px 50px rgba(0,0,0,.4);}
@media(max-width:760px){
  .pastor-card{grid-template-columns:1fr;gap:26px;}
  .pastor-photo{width:220px;height:280px;margin:0 auto;}
  .pastor-sec.parallax{background-attachment:scroll;}
}

/* 스크롤 등장 효과 */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }


/* ===== 우측 고정 퀵메뉴 ===== */
.sidequick{position:fixed;right:0;top:26%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.sidequick .sq-btn{width:46px;height:46px;border:none;border-radius:10px 0 0 10px;cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.16);}
.sidequick .sq-info{background:#d62828;color:#fff;font-style:normal;font-weight:900;font-size:26px;}
.sidequick .sq-up,.sidequick .sq-down{background:#fff;color:var(--navy);font-weight:700;}
.sidequick .sq-up:hover,.sidequick .sq-down:hover{background:#f3f5f9;}
.sidequick .sq-panel{position:absolute;right:54px;top:0;width:120px;background:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.2);overflow:hidden;opacity:0;pointer-events:none;transform:translateX(8px);transition:.18s;}
.sidequick.open .sq-panel{opacity:1;pointer-events:auto;transform:none;}
.sq-title{color:#d62828;font-weight:800;font-size:13px;letter-spacing:.04em;text-align:center;padding:12px 0 8px;border-bottom:2px solid #d62828;margin:0 14px 0;}
.sq-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;color:var(--navy);border-bottom:1px solid #eef0f4;text-decoration:none;transition:.12s;}
.sq-item:last-child{border-bottom:none;}
.sq-item .sq-ic{font-size:22px;line-height:1;}
.sq-item .sq-l{font-size:12.5px;font-weight:600;}
.sq-item:hover,.sq-item.on{background:var(--navy);color:#fff;}
@media(max-width:760px){ .sidequick .sq-btn{width:40px;height:40px;font-size:17px;} .sidequick .sq-info{font-size:22px;} .sidequick .sq-panel{width:106px;right:46px;} }

/* ===== 갤러리 방명록(댓글) — 앨범 상세 모달 안 ===== */
.gc-wrap{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.gc-title{font-size:16px;font-weight:800;color:var(--navy);margin-bottom:14px;}
.gc-list{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.gc-item{background:#f7f8fa;border-radius:10px;padding:12px 14px;}
.gc-head{display:flex;align-items:baseline;gap:10px;margin-bottom:5px;}
.gc-head .gc-name{font-weight:700;color:var(--navy);font-size:14px;}
.gc-head .gc-date{font-size:12px;color:var(--muted);margin-left:auto;}
.gc-text{font-size:14px;color:#42505c;line-height:1.7;white-space:normal;}
.gc-form{display:flex;flex-direction:column;gap:9px;position:relative;}
.gc-in{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px;box-sizing:border-box;}
.gc-in:focus{outline:none;border-color:var(--navy);}
.gc-ta{min-height:70px;resize:vertical;line-height:1.6;}
.gc-btn{align-self:flex-end;border:none;background:var(--navy);color:#fff;font-weight:700;font-size:14px;padding:10px 20px;border-radius:9px;cursor:pointer;transition:.15s;}
.gc-btn:hover{opacity:.9;}
.gc-btn:disabled{opacity:.5;cursor:default;}

/* ===== 갤러리 앨범 상세 — 피드형(세로 큰 나열) ===== */
.alb-top{max-width:900px;margin:0 auto 28px;text-align:center;}
.alb-back{display:inline-block;color:var(--muted);font-size:14px;margin-bottom:16px;text-decoration:none;transition:.15s;}
.alb-back:hover{color:var(--navy);}
.alb-title{font-size:26px;font-weight:800;color:var(--navy);line-height:1.3;}
.alb-desc{margin-top:12px;color:#5a6675;font-size:15px;line-height:1.8;}
.alb-feed{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.alb-shot{margin:0;border-radius:10px;overflow:hidden;background:#f2f4f7;box-shadow:0 2px 10px rgba(16,24,40,.06);}
.alb-shot img{display:block;width:100%;height:200px;object-fit:cover;cursor:zoom-in;transition:.2s;}
.alb-shot:hover img{transform:scale(1.04);}
.alb-shot figcaption{padding:8px 12px;font-size:13px;color:#5a6675;background:#fff;}
@media(max-width:760px){
  .alb-title{font-size:21px;}
  .alb-feed{grid-template-columns:repeat(2,1fr);gap:8px;}
  .alb-shot img{height:140px;}
  .alb-shot{border-radius:8px;}
}
/* 방명록을 격자 아래에서 중앙 정렬로 */
.alb-feed + .gc-wrap{max-width:900px;margin:34px auto 0;}

/* ===== 주보 다중 이미지(피드형) ===== */
.bul-feed{display:flex;flex-direction:column;gap:12px;}
.bul-feed .bul-img{display:block;width:100%;height:auto;border-radius:8px;}

/* ===== 맥체인 성경읽기 (목양 전용) ===== */
.mc-player{max-width:820px;margin:0 auto 34px;}
.mc-date{font-size:19px;font-weight:800;color:var(--navy);text-align:center;margin-bottom:14px;}
.mc-frame{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;box-shadow:0 8px 26px rgba(16,24,40,.16);background:#000;}
.mc-datebar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.mc-unmute{background:var(--primary,#15213f);color:#fff;border:none;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:.15s;white-space:nowrap;animation:mcPulse 1.6s ease-in-out infinite;}
.mc-unmute:hover{filter:brightness(1.1);transform:translateY(-1px);animation:none;}
@keyframes mcPulse{0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.18);}50%{box-shadow:0 3px 16px rgba(224,177,60,.6);}}
@media(max-width:600px){ .mc-unmute{padding:8px 14px;font-size:13px;} }
.mc-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* YT.Player가 #mcPlayer div를 같은 id의 iframe으로 교체 → 위 규칙이 적용됨. div 상태에서도 대비 */
.mc-frame #mcPlayer{position:absolute;inset:0;width:100%;height:100%;}
.mc-note{text-align:center;color:var(--muted);font-size:13px;margin-top:12px;}

/* 영상 컨트롤 박스: 소리 / 자막 / 재생속도 */
.mc-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:#f4f6f5;border:1px solid #e4e8e6;border-radius:12px;}
.mc-ctrl-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #cfd8d3;border-radius:999px;background:#fff;color:#3c4856;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;}
.mc-ctrl-btn .ic{font-size:15px;line-height:1;}
.mc-ctrl-btn:hover{border-color:var(--primary,#2f5740);}
.mc-ctrl-btn.on{background:var(--primary,#2f5740);border-color:var(--primary,#2f5740);color:#fff;}
.mc-ctrl-btn.off{opacity:.55;}
.mc-ctrl-speed{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding-left:10px;}
.mc-speed-lb{font-size:13px;color:var(--muted);margin-right:2px;}
.mc-spd{min-width:44px;padding:6px 8px;border:1px solid #cfd8d3;border-radius:8px;background:#fff;color:#3c4856;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;}
.mc-spd:hover{border-color:var(--primary,#2f5740);}
.mc-spd.on{background:var(--gold,#e0b13c);border-color:var(--gold,#e0b13c);color:#3a2e08;}
@media(max-width:600px){
  .mc-ctrl{gap:6px;padding:8px;}
  .mc-ctrl-speed{margin-left:0;padding-left:0;width:100%;justify-content:flex-start;flex-wrap:wrap;}
  .mc-ctrl-btn{padding:7px 12px;font-size:13px;}
  .mc-spd{min-width:40px;padding:6px;font-size:12px;}
}

/* 맥체인 진도 체크 */
.mc-track{max-width:560px;margin:24px auto 0;text-align:center;}
.mc-track-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.mc-name{flex:1;min-width:160px;max-width:260px;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;}
.mc-name:focus{outline:none;border-color:var(--primary,#15213f);}
.mc-read-btn{padding:11px 20px;border:none;border-radius:10px;background:var(--primary,#15213f);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap;}
.mc-read-btn:hover{filter:brightness(1.1);}
.mc-read-btn.done{background:var(--gold,#e0b13c);color:#3a2e08;}
.mc-track-hint{margin-top:10px;font-size:13px;color:var(--muted);min-height:18px;}

/* 내 현황 통계 */
.mc-stats{max-width:560px;margin:20px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.mc-stat{background:#f7f8fa;border-radius:12px;padding:16px 8px;text-align:center;}
.mc-stat-num{font-size:26px;font-weight:800;color:var(--primary,#15213f);line-height:1;}
.mc-stat-lb{font-size:12px;color:var(--muted);margin-top:6px;}

/* 달력 읽음 표시 */
.mc-cell.read{background:#e8f3ec;color:var(--primary,#15213f);font-weight:700;}
.mc-cell.read.selected{background:var(--navy);color:#fff;}
.mc-cell{position:relative;}
.mc-check{position:absolute;right:4px;top:3px;font-size:10px;color:#2f9e5f;font-weight:900;}
.mc-cell.selected .mc-check{color:#8fe6b0;}

/* 월별 달성 현황 */
.mc-months{max-width:560px;margin:24px auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 4px 16px rgba(16,24,40,.06);}
.mc-months-title{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:14px;text-align:center;}
.mc-months-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;}
.mc-mo{display:flex;align-items:center;gap:8px;font-size:13px;}
.mc-mo-name{width:32px;color:#5a6675;font-weight:600;flex:none;}
.mc-mo-bar{flex:1;height:8px;background:#eef1f5;border-radius:99px;overflow:hidden;}
.mc-mo-fill{height:100%;background:var(--primary,#15213f);border-radius:99px;transition:width .3s;}
.mc-mo-cnt{width:44px;text-align:right;color:#8a94a3;font-size:12px;flex:none;}
@media(max-width:600px){ .mc-months-grid{grid-template-columns:1fr;} }
.mc-cal{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 4px 16px rgba(16,24,40,.06);}
.mc-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mc-month{font-size:17px;font-weight:800;color:var(--navy);}
.mc-nav{border:1px solid var(--line);background:#fff;width:34px;height:34px;border-radius:8px;font-size:18px;color:var(--navy);cursor:pointer;transition:.15s;line-height:1;}
.mc-nav:hover{background:#f2f4f7;}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.mc-dow{text-align:center;font-size:12px;font-weight:700;color:#8a94a3;padding:2px 0 6px;}
.mc-dow.sun{color:#d9534f;} .mc-dow.sat{color:#4a72c0;}
.mc-cell{border:none;background:#f7f8fa;border-radius:8px;font-size:14px;color:#3c4856;cursor:pointer;transition:.13s;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:0;}
.mc-cell:hover{background:#e8edf5;}
.mc-cell.empty{background:transparent;cursor:default;}
.mc-cell.sun{color:#d9534f;} .mc-cell.sat{color:#4a72c0;}
.mc-cell.today{outline:2px solid var(--gold);outline-offset:-2px;font-weight:700;}
.mc-cell.selected{background:var(--navy);color:#fff;font-weight:700;}
.mc-cell.selected:hover{background:var(--navy);}
@media(max-width:600px){
  .mc-cell{font-size:13px;border-radius:6px;}
  .mc-grid{gap:4px;}
  .mc-cal{padding:12px;}
  .mc-dow{font-size:11px;}
}

/* ============================================================
   모바일 좌측 슬라이드 드로어 (온세대 스타일 · 전 교회 공통)
   - 헤더 바깥 별도 요소(z 950/1000) → 사이드퀵(900) 위에 확실히 표시
   - 데스크톱은 기존 가로 hover 드롭다운 그대로, ≤680px에서만 노출
   ============================================================ */
.mobile-drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:300px;height:100%;
  background:#fff;box-shadow:0 0 40px rgba(0,0,0,.22);z-index:1000;
  transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;}
.mobile-drawer.open{transform:translateX(0);}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.44);z-index:950;
  opacity:0;visibility:hidden;transition:.25s;}
.nav-backdrop.show{opacity:1;visibility:visible;}
.md-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;background:var(--primary);color:#fff;flex:0 0 auto;}
.md-title{font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em;}
.md-close{background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;}
.md-nav{display:flex;flex-direction:column;flex:1 1 auto;padding:2px 0 16px;}
.md-nav>a,
.md-nav .nav-drop>a{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 20px;font-size:15.5px;font-weight:600;color:#2b3440;text-align:left;
  border-bottom:1px solid #eef0f2;border-radius:0;}
.md-nav>a:hover,.md-nav .nav-drop>a:hover{background:var(--surface-2);color:var(--primary);}
.md-nav>a::before{display:none;}
.md-nav .nav-drop{display:flex;flex-direction:column;align-items:stretch;position:static;}
.md-nav .nav-drop>a::after{content:"▾";font-size:13px;color:#9aa6ae;margin-left:auto;transition:transform .2s;}
.md-nav .nav-drop.open>a::after{transform:rotate(180deg);}
.md-nav .nav-drop>a .caret{display:none;}
.md-nav .dropmenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
  min-width:0;background:#f6f8f9;border-radius:0;padding:0;margin:0;
  max-height:0;overflow:hidden;transition:max-height .28s ease;}
.md-nav .nav-drop.open .dropmenu{max-height:560px;}
.md-nav .dropmenu a{display:block;padding:13px 20px 13px 34px;font-size:14.5px;font-weight:500;
  color:#43515c;border-bottom:1px solid #e9edef;}
.md-nav .dropmenu a:hover{background:#eef2f4;color:var(--primary);}
.md-nav>a.md-admin{margin-top:auto;color:var(--primary);font-weight:700;border-top:1px solid #eef0f2;}
.md-nav .yt{display:none;}
body.nav-lock{overflow:hidden;}
/* 드로어·백드롭은 전 화면 폭에서 사용(햄버거 PC 적용). 열기 전엔 화면 밖(off-canvas)·투명이라 데스크톱 레이아웃에 영향 없음 */

/* ===== 모바일: 상단 가로 메뉴 스트립(스크롤) — 드로어와 함께 노출 (핵심 메뉴 상시 보임) ===== */
@media(max-width:680px){
  .navbar{display:block;}
  .navbar .nav#nav{
    display:flex !important; position:static;
    flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:#fff; border-bottom:1px solid var(--line); padding:0 6px; scrollbar-width:none;
  }
  .navbar .nav#nav::-webkit-scrollbar{ display:none; }
  .navbar .nav#nav > a,
  .navbar .nav#nav .nav-drop > a{
    white-space:nowrap; padding:12px 14px; border-top:0; width:auto; font-size:14px; text-align:center;
  }
  .navbar .nav#nav > a + a::before,
  .navbar .nav#nav a + a::before{ display:none; }
  .navbar .nav#nav .nav-drop{ flex-direction:row; position:relative; }
  .navbar .nav#nav .dropmenu{ display:none !important; }  /* 하위메뉴는 햄버거 드로어에서 (스트립엔 대분류만) */
  .navbar .nav#nav .caret{ display:none; }
}

/* ===== 대분류 하위 탭 바 (교회소식 등 sub 있는 대분류 페이지, 배너 아래 자동) ===== */
.subnav{background:#fff;border-bottom:1px solid var(--line);}
.subnav .wrap{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;padding:0 20px;}
.subnav a{padding:15px 22px;font-size:15px;font-weight:600;color:#5b6773;border-bottom:3px solid transparent;transition:.15s;}
.subnav a:hover{color:var(--primary);}
.subnav a.on{color:var(--primary);border-bottom-color:var(--primary);}
@media(max-width:680px){
  .subnav{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .subnav .wrap{justify-content:flex-start;flex-wrap:nowrap;padding:0 10px;}
  .subnav a{white-space:nowrap;padding:13px 16px;font-size:14px;}
}

/* ===== 맥체인 오늘의 성경 본문 (달력 아래, 개역한글) ===== */
.mc-bible{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.mc-bible-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:#fafbfc;}
.mc-bible-head h3{margin:0;font-size:17px;font-weight:800;color:var(--ink,#1f2b38);flex:1;min-width:0;}
.mc-bible-toggle{flex:none;border:1px solid var(--line);background:#fff;color:#5b6773;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap;touch-action:manipulation;}
.mc-bible-toggle:hover{border-color:var(--primary);color:var(--primary);}
/* 글자 크기 조절: 헤더 중앙 */
.mc-fs{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px;flex:none;}
.mc-fs-btn{border:0;background:transparent;color:#5b6773;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;transition:.15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-width:44px;}
.mc-fs-btn:hover{background:var(--accent-soft,#eef4f1);color:var(--primary);}
.mc-fs-btn:active{background:var(--accent-soft,#eef4f1);transform:scale(.94);}
.mc-fs-btn.is-off{opacity:.3;}
.mc-fs-val{min-width:46px;text-align:center;font-size:12.5px;font-weight:700;color:#8a94a3;}
.mc-bible-body{padding:20px 22px;max-height:620px;overflow-y:auto;}
.mc-bible-loading{color:#8a94a3;font-size:14px;text-align:center;padding:24px 0;}
.mc-psg{margin-bottom:26px;}
.mc-psg:last-child{margin-bottom:0;}
.mc-psg-ti{font-size:calc(15px * var(--mc-fs, 1));font-weight:800;color:var(--primary);padding-bottom:8px;margin-bottom:12px;border-bottom:2px solid var(--line);}
.mc-v{margin:0 0 8px;font-size:calc(15.5px * var(--mc-fs, 1));line-height:1.85;color:#2c3a45;word-break:keep-all;}
.mc-vn{display:inline-block;min-width:22px;margin-right:4px;font-size:calc(12px * var(--mc-fs, 1));font-weight:700;color:#9aa6b2;vertical-align:top;line-height:1.9;}
.mc-bible-src{padding:12px 20px;border-top:1px solid var(--line);background:#fafbfc;font-size:12px;color:#8a94a3;text-align:right;}
@media(max-width:680px){
  .mc-bible-body{padding:16px 14px;max-height:520px;}
  .mc-v{font-size:calc(15px * var(--mc-fs, 1));}
  .mc-bible-head{flex-wrap:wrap;justify-content:center;padding:14px;}
  .mc-bible-head h3{flex:1 1 100%;text-align:center;font-size:16px;margin-bottom:2px;}
  .mc-fs{flex:none;}
  .mc-bible-toggle{flex:none;}
}

/* ===== 홈 화면에 앱 추가(PWA) 버튼 + 안내 ===== */
.tb-btn.app{background:#fff;border-color:#cfe0d8;color:var(--primary);cursor:pointer;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:38px;}
.tb-btn.app:hover{background:var(--accent-soft,#eef4f1);}
.tb-btn.app:active{background:var(--accent-soft,#eef4f1);transform:scale(.96);}
.pwa-guide{position:fixed;inset:0;z-index:9999;background:rgba(15,25,35,.55);display:flex;align-items:center;justify-content:center;padding:20px;}
.pwa-box{position:relative;background:#fff;border-radius:16px;max-width:420px;width:100%;padding:26px 24px;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.pwa-box h3{margin:0 0 12px;font-size:19px;color:var(--ink,#1f2b38);}
.pwa-box p{margin:0 0 10px;font-size:15px;color:#5b6773;line-height:1.7;}
.pwa-box ol{margin:0;padding-left:20px;color:#5b6773;font-size:15px;line-height:1.9;}
.pwa-box b{color:var(--primary);}
.pwa-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:#8a94a3;}
.pwa-x{position:absolute;top:12px;right:12px;border:0;background:transparent;font-size:16px;color:#8a94a3;cursor:pointer;padding:6px;line-height:1;}
.pwa-x:hover{color:var(--ink,#1f2b38);}
@media(max-width:680px){
  .tb-btn.app{padding:8px 10px;}
}

/* ===== 인앱 브라우저(카카오톡·네이버 등) 외부 브라우저 유도 ===== */
/* 전환 직전 안내 오버레이 */
.ext-notice{position:fixed;inset:0;z-index:10000;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;padding:24px;}
.ext-notice-box{text-align:center;max-width:340px;}
.ext-spin{width:34px;height:34px;margin:0 auto 18px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:extspin .8s linear infinite;}
@keyframes extspin{to{transform:rotate(360deg)}}
.ext-notice-t{font-size:17px;font-weight:800;color:var(--ink,#1f2b38);margin-bottom:8px;}
.ext-notice-s{font-size:14px;color:#8a94a3;line-height:1.7;}
/* 상단 안내 배너 */
.ext-banner{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:var(--ink,#1f2b38);color:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.18);}
.ext-banner-in{display:flex;align-items:center;gap:10px;padding:12px 14px;max-width:900px;margin:0 auto;}
.ext-banner-tx{flex:1;min-width:0;font-size:13px;line-height:1.55;}
.ext-banner-tx b{display:block;font-size:13.5px;margin-bottom:2px;}
.ext-banner-tx span{color:#c3ccd6;font-size:12.5px;}
.ext-banner-tx span b{display:inline;color:#fff;margin:0;}
.ext-banner-go{flex:none;background:var(--primary);color:#fff;border:0;border-radius:8px;padding:10px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;touch-action:manipulation;}
.ext-banner-x{flex:none;background:transparent;border:0;color:#8a94a3;font-size:15px;cursor:pointer;padding:6px;line-height:1;touch-action:manipulation;}
/* 안내 모달 안의 "크롬에서 열기" 버튼 */
.pwa-go{background:var(--primary);color:#fff;border:0;border-radius:10px;padding:12px 22px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation;}

/* ===== 맥체인 성경 본문 듣기(TTS) ===== */
.mc-tts{padding:14px 20px;border-top:1px solid var(--line);background:#fafbfc;}
.mc-tts-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mc-tts-row.sub{margin-top:10px;gap:14px;}
.mc-tts-btn{border:1px solid var(--line);background:#fff;color:#46505e;font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:999px;cursor:pointer;font-family:inherit;transition:.15s;touch-action:manipulation;min-height:40px;}
.mc-tts-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
.mc-tts-btn:active:not(:disabled){transform:scale(.96);}
.mc-tts-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.mc-tts-btn.primary:hover{opacity:.9;color:#fff;}
.mc-tts-btn:disabled{opacity:.4;cursor:default;}
.mc-tts-pos{font-size:12.5px;color:#8a94a3;font-weight:600;margin-left:auto;}
.mc-tts-lb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#6b7b86;font-weight:600;}
.mc-tts-sel{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;font-family:inherit;color:#46505e;background:#fff;max-width:160px;}
.mc-tts-note{margin-top:8px;font-size:12px;color:#8a94a3;}
/* 읽고 있는 절(연한 배경) + 읽고 있는 단어(강조) */
.mc-v.tts-now,.mc-psg-ti.tts-now{background:var(--accent-soft,#eef4f1);border-radius:6px;box-shadow:0 0 0 4px var(--accent-soft,#eef4f1);}
.mc-v .tw{border-radius:4px;transition:background .08s linear;}
.mc-v .tw.tw-now,.mc-psg-ti .tw.tw-now{background:var(--primary);color:#fff;padding:1px 2px;font-weight:700;}

@media(max-width:680px){
  .mc-tts{padding:12px 14px;}
  .mc-tts-row.sub{gap:10px;}
  .mc-tts-sel{max-width:120px;}
  .mc-tts-pos{width:100%;margin-left:0;text-align:right;}
}

/* ===== 리딩지저스 (우신교회) — 맥체인 컴포넌트 재사용 + 전용 UI만 추가 ===== */
/* 배너: 간판 물결 모티프 */
.rj-banner{position:relative;overflow:hidden;}
.rj-banner::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:26px;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.9) 0 60%, transparent 61%) repeat-x;
  background-size:90px 26px;opacity:.35;}

/* 이번 주 강의 영상 — 없을 때 안내 */
.rj-video .mc-frame{position:relative;}
.rj-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:#eef6fa;color:#7b93a1;}
.rj-empty-ic{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;
  justify-content:center;font-size:18px;color:var(--primary);box-shadow:0 4px 14px rgba(0,0,0,.08);}
.rj-empty-tx{font-size:13.5px;color:#8a9aa6;text-align:center;padding:18px 0;}

/* 주간 스트립 (일~토) */
.rj-week{margin-top:22px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;}
.rj-week-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);background:#fafcfd;}
.rj-week-title{font-size:14px;font-weight:800;color:#2a3a44;}
.rj-week-strip{display:grid;grid-template-columns:repeat(7,1fr);}
.rj-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 4px 13px;border:0;
  border-right:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;
  transition:.15s;touch-action:manipulation;min-height:78px;}
.rj-day:last-child{border-right:0;}
.rj-day:hover{background:var(--accent-soft);}
.rj-day.on{background:var(--primary);}
.rj-day.on .rj-day-wd,.rj-day.on .rj-day-n,.rj-day.on .rj-day-tx{color:#fff;}
.rj-day-wd{font-size:11px;color:#93a3ad;font-weight:700;}
.rj-day.sun .rj-day-wd{color:#d9534f;}
.rj-day.sat .rj-day-wd{color:var(--primary);}
.rj-day-n{font-size:15px;font-weight:800;color:#2a3a44;}
.rj-day-tx{font-size:10.5px;color:#7b8b96;line-height:1.3;text-align:center;word-break:keep-all;}
.rj-day.done{position:relative;}
.rj-day.done::after{content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);}

/* 오늘의 읽기 카드 */
.rj-today{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 20px;}
.rj-today-date{font-size:13px;font-weight:800;color:var(--primary);margin-bottom:12px;}
.rj-read{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);}
.rj-read:last-child{border-bottom:0;}
.rj-read-lb{flex:none;font-size:11.5px;font-weight:800;color:#8a9aa6;background:#f2f7fa;
  padding:4px 9px;border-radius:20px;}
.rj-read.core .rj-read-lb{background:var(--accent-soft);color:var(--primary-700);}
.rj-read-tx{font-size:17px;font-weight:700;color:#22303a;}
.rj-lect{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:14px;color:#46545e;}
.rj-badge{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;
  background:var(--accent);color:#4a3a00;}
.rj-catchup{background:#faf6ec;border-radius:10px;padding:16px 18px;text-align:center;}
.rj-catchup b{display:block;font-size:16px;color:#8a6d1f;margin-bottom:5px;}
.rj-catchup span{font-size:13px;color:#93826a;}
.rj-special{background:var(--accent-soft);border-radius:10px;padding:16px 18px;text-align:center;
  font-size:15px;font-weight:700;color:var(--primary-700);}

/* 달력 셀의 강의 표시 점 */
.cal-dot{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:5px;height:5px;
  border-radius:50%;background:var(--accent);}

@media(max-width:680px){
  .rj-today{padding:15px 14px;}
  .rj-read-tx{font-size:15.5px;}
  .rj-day{min-height:70px;padding:9px 2px 11px;}
  .rj-day-tx{font-size:9.5px;}
  .rj-week-title{font-size:13px;}
}


/* ===== 섬기는 이 — 담임 외 바둑판 카드 (PC 4열 / 태블릿 3열 / 모바일 2열) ===== */
.staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;padding-top:56px;border-top:1px solid var(--line);}
.sm-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 16px 24px;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.sm-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(21,33,63,.10);border-color:#d5dce8;}
.sm-ph{width:124px;height:124px;margin:0 auto 18px;border-radius:50%;overflow:hidden;background:#eef1f6;}
.sm-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.sm-ph.noimg{display:flex;align-items:center;justify-content:center;font-size:44px;color:#b8c0d0;font-weight:800;font-family:var(--serif);}
.sm-pos{font-size:13px;font-weight:600;color:#8a93a3;margin-bottom:5px;letter-spacing:.01em;}
.sm-name{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.sm-dept{font-size:13px;color:#6b7684;line-height:1.6;}
@media(max-width:1024px){
  .staff-grid{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;padding-top:44px;}
  .sm-ph{width:108px;height:108px;}
}
@media(max-width:640px){
  .staff-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:36px;padding-top:32px;}
  .sm-card{padding:22px 10px 18px;border-radius:12px;}
  .sm-ph{width:88px;height:88px;margin-bottom:14px;}
  .sm-ph.noimg{font-size:32px;}
  .sm-name{font-size:16px;}
  .sm-pos,.sm-dept{font-size:12px;}
}

/* ===== 소개 페이지 사진 (본문 아래 세로 나열) ===== */
.pg-photos{display:grid;gap:20px;margin-top:28px;}
.pg-photo{margin:0;}
.pg-photo img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 8px 24px rgba(21,33,63,.10);}
.pg-photo figcaption{margin-top:9px;font-size:13px;color:#8a93a3;text-align:center;line-height:1.7;}
@media(max-width:640px){
  .pg-photos{gap:14px;margin-top:20px;}
  .pg-photo img{border-radius:8px;}
}

/* ===== 연혁 타임라인 (연도 + MM.DD 목록) ===== */
.hist{margin-top:6px;}
.hist-year{display:grid;grid-template-columns:150px 1fr;padding-bottom:36px;}
.hist-year:last-child{padding-bottom:0;}
.hist-year.noyear{grid-template-columns:1fr;}
.hy-num{font-family:var(--serif);font-size:34px;font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:-.02em;padding-top:4px;word-break:keep-all;}
.hist-year.decade .hy-num{font-size:26px;padding-top:8px;}
.hy-list{list-style:none;margin:0;padding:0 0 0 34px;border-left:2px solid var(--line);}
.hist-year.noyear .hy-list{padding-left:0;border-left:0;}
.hy-list li{position:relative;display:flex;gap:16px;padding:7px 0;font-size:15px;line-height:1.85;color:#42505c;}
.hy-list li::before{content:'';position:absolute;left:-40px;top:16px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid var(--primary);}
.hist-year.noyear .hy-list li::before{display:none;}
.hy-list li .hd{flex:none;width:54px;color:var(--primary);font-weight:700;font-variant-numeric:tabular-nums;}
.hy-list li .ht{flex:1;}
@media(max-width:640px){
  .hist-year{grid-template-columns:1fr;padding-bottom:26px;}
  .hy-num{font-size:25px;margin-bottom:12px;padding-top:0;}
  .hist-year.decade .hy-num{font-size:21px;padding-top:0;}
  .hy-list{padding-left:24px;}
  .hy-list li{gap:10px;padding:6px 0;font-size:14px;line-height:1.75;}
  .hy-list li::before{left:-30px;top:14px;}
  .hy-list li .hd{width:46px;font-size:13px;}
}

/* ============================================================
   디자인 토큰 (v1.5 추가) — 정의만. 기존 화면에 영향 없음.
   컨셉 CSS(layout-*.css)에서 이 토큰을 참조해 규격을 통일한다.
   근거: radius가 컨셉마다 흩어지면 세부에서 어수선해 보인다.
   ============================================================ */
:root{
  /* Radius — 3종 + 소형 */
  --r-sm:8px;      /* 배지·태그 */
  --r-btn:12px;    /* 버튼·입력 */
  --r-card:20px;   /* 카드·패널 */
  --r-img:24px;    /* 이미지·큰 블록 */

  /* Spacing — 8pt 배수 */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px;

  /* Elevation — 3단계만 */
  --e1:0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05);
  --e2:0 12px 28px rgba(16,24,40,.10);
  --e3:0 24px 56px rgba(16,24,40,.16);

  /* Motion — 등장은 ease-out, 거리는 짧게 시간은 길게 */
  --mo-fade:600ms;
  --mo-slide:800ms;
  --mo-hover:250ms;
  --mo-ease:cubic-bezier(.16,.84,.28,1);
}