/*
Theme Name: FGGC Theme
Theme URI: https://fggc.kr
Description: 순복음금정교회 공식 홈페이지 커스텀 테마
Author: 찬이작업실
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: fggc-theme
*/

/* ====================================================
   CSS 변수
   ==================================================== */
:root {
  /* ── 다크 헤더/히어로 전용 ── */
  --fggc-navy:       #1B3A5C;
  --fggc-navy-mid:   #234b73;
  --fggc-blue:       #2E75B6;
  --fggc-blue-light: #5BA3E6;
  --fggc-dark:       #0d1b2a;
  --fggc-dark-mid:   #0f1f33;
  --fggc-dark-card:  #142d47;
  --max-width:       1200px;
  --radius-lg:       12px;
  --radius-md:       8px;
  --radius-sm:       6px;
  --header-h:        90px;
  --topbar-h:        32px;
  --color-border:    rgba(255,255,255,0.08);
  --color-text-muted:#6b8aaa;

  /* ════════════════════════════════════════════════
     ★ 사이트 테마색상 ★
     이 섹션에서 전체 사이트 색상을 한 곳에서 변경할 수 있습니다.
     담당자가 "사이트 테마색상 수정" 요청 시 아래 변수를 수정하세요.
     ════════════════════════════════════════════════ */
  --site-bg:         #f5f6f8;   /* 전체 페이지 배경 (연회색) */
  --content-bg:      #ffffff;   /* 카드·섹션 배경 (흰색) */
  --content-bg-alt:  #eef1f6;   /* 구분 섹션 배경 (연보라빛 회색) */
  --text-primary:    #1a2a4a;   /* 주요 본문 텍스트 */
  --text-secondary:  #4a5568;   /* 보조 텍스트 */
  --text-muted-light:#7a8fa8;   /* 흐린 텍스트 (라이트 배경용) */
  --accent:          #2E75B6;   /* 강조색 (파란색) */
  --accent-dark:     #1a3a6b;   /* 진한 강조색 */
  --accent-light:    #5BA3E6;   /* 밝은 강조색 */
  --border-color:    #dde4ef;   /* 테두리 색상 */
  --shadow-sm:       0 2px 8px rgba(46,117,182,.1);
  --shadow-md:       0 8px 32px rgba(46,117,182,.14);
  /* ════════════════════════════════════════════════ */
}

/* ====================================================
   리셋
   ==================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; overflow-x: hidden; }
body  { font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
        background: var(--site-bg); color: var(--text-primary); font-size: 17px; line-height: 1.8;
        -webkit-font-smoothing: antialiased; letter-spacing: -.01em; overflow-x: hidden; }
a     { color: inherit; text-decoration: none; }
img   { max-width: 100%; height: auto; display: block; }
ul    { list-style: none; }
button { cursor: pointer; }

/* ====================================================
   언어 선택기 (Google Translate 연동)
   ==================================================== */
.fggc-lang-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 8px;
  flex-shrink: 0;
}
.fggc-lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  color: rgba(255,255,255,.9);
  padding: 6px 13px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}
.fggc-lang-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.fggc-lang-globe { font-size: 15px; line-height: 1; }
.fggc-lang-label { font-size: 12.5px; letter-spacing: -.01em; }
.fggc-lang-caret  { font-size: 9px; opacity: .65; }

.fggc-lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  min-width: 170px;
  z-index: 10000;
  overflow: hidden;
  animation: langFadeIn .15s ease;
}
.fggc-lang-menu.is-open { display: block; }
@keyframes langFadeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.fggc-lang-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 16px;
  background: none; border: none; border-bottom: 1px solid #f0f4f8;
  text-align: left; font-size: 14px; color: #2d3748;
  cursor: pointer; transition: background .12s;
  font-family: inherit; font-weight: 400;
}
.fggc-lang-opt:last-child { border-bottom: none; }
.fggc-lang-opt:hover  { background: #f0f5ff; color: #1B3A5C; }
.fggc-lang-opt.active { background: #e8f0fb; color: #2E75B6; font-weight: 700; }

/* 모바일: 텍스트 숨기고 아이콘만 */
@media (max-width: 768px) {
  .fggc-lang-wrap { margin-left: 6px; }
  .fggc-lang-btn  { padding: 7px 9px; gap: 0; }
  .fggc-lang-label, .fggc-lang-caret { display: none; }
  .fggc-lang-menu { right: -4px; min-width: 155px; }
  .fggc-lang-opt  { font-size: 13px; padding: 9px 14px; }
}

/* ── Google Translate 기본 UI 완전 숨기기 ── */
.goog-te-banner-frame,
.goog-te-menu-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-yAWNEb-L7lbkb,
#goog-gt-tt,
.goog-tooltip { display: none !important; }
/* Google가 body에 추가하는 top 오프셋 제거 */
body { top: 0 !important; }
/* 번역된 텍스트 폰트 유지 */
font[style*="top"] { vertical-align: inherit !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ====================================================
   TOPBAR
   ==================================================== */
/* 구 topbar — 더 이상 사용 안 함 (예배시간은 worship-timebar로 이동) */
.site-topbar { display: none; }

/* ── 예배시간 안내바 (헤더 아래) ── */
.worship-timebar {
  background: linear-gradient(90deg, #0f2340 0%, #1B3A5C 40%, #2056a0 100%);
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.worship-timebar-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: stretch; justify-content: center;
  gap: 0;
}
.wt-item {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  padding: 11px 24px; gap: 7px;
  cursor: default; transition: background .2s; white-space: nowrap;
}
.wt-item:hover { background: rgba(255,255,255,.07); }
.wt-label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: #7eb8f5; white-space: nowrap;
}
.wt-times {
  font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.9);
  letter-spacing: .02em; white-space: nowrap;
}
.wt-sep {
  width: 1px; background: rgba(255,255,255,.15);
  height: 18px; flex-shrink: 0;
}
@media (max-width: 1100px) {
  .wt-item { padding: 11px 16px; gap: 5px; }
  .wt-label { font-size: 10px; }
  .wt-times { font-size: 11.5px; }
}
@media (max-width: 768px) {
  .worship-timebar-inner { justify-content: flex-start; overflow-x: auto; padding: 0 14px; }
  .worship-timebar-inner::-webkit-scrollbar { display: none; }
  .wt-item { padding: 9px 12px; gap: 4px; }
  .wt-label { font-size: 10px; }
  .wt-times { font-size: 11px; }
}

/* 상단바 아이콘 배지 링크 공통 */
.topbar-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  transition: filter .2s, transform .15s;
  white-space: nowrap;
}
.topbar-icon-link:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  color: #fff !important;
}
/* 유튜브 — 빨간 계열 */
.topbar-link--youtube  { background: #ff0000; }
/* 예배안내 — 파란 계열 */
.topbar-link--worship  { background: #2E75B6; }
/* 오시는길 — 청록 계열 */
.topbar-link--map      { background: #0891b2; }
/* 네이버 밴드 — 공식 초록 */
.topbar-link--band     { background: #03c75a; }
/* 교역자 인트라넷 — 네이비 */
.topbar-link--clergy   { background: #1B3A5C; }
/* 관리자 / 로그아웃 / 로그인 — 회색 계열 */
.topbar-link--admin,
.topbar-link--logout,
.topbar-link--login    { background: rgba(255,255,255,.18); color: #e0eaf8 !important; }

/* ====================================================
   HEADER
   ==================================================== */
.site-header {
  background: linear-gradient(135deg, var(--fggc-dark) 0%, var(--fggc-navy) 60%, var(--fggc-navy-mid) 100%);
  height: var(--header-h);
  position: sticky; top: 0; z-index: 500;
  transition: background .3s, box-shadow .3s;
}
/* 모바일에서는 메뉴 바 높이만큼 헤더 높이 자동 확장 */
@media (max-width: 768px) {
  .site-header { height: auto; }
}
.site-header.scrolled {
  background: rgba(10,20,35,.97);
  box-shadow: 0 2px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
.header-inner {
  max-width: var(--max-width); margin: 0 auto; height: 100%; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* 로고 */
.site-logo { display: flex; align-items: center; gap: 0; text-decoration: none; }
.logo-text  { display: flex; flex-direction: column; }
.logo-kr    { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -.4px; line-height: 1.2; }
.logo-en    { font-size: 16px; color: rgba(255,255,255,.55); letter-spacing: .02em; }

/* PC 네비 */
.desktop-nav { flex: 1; display: flex; justify-content: flex-end; }
.desktop-nav .nav-list {
  display: flex; gap: 4px; list-style: none;
}
.desktop-nav .nav-list li { position: relative; }
.desktop-nav .nav-list > li > a {
  display: block; padding: 10px 16px;
  color: rgba(255,255,255,.82); font-size: 17px; font-weight: 500;
  border-radius: var(--radius-md); white-space: nowrap;
  transition: background .2s, color .2s;
}
.desktop-nav .nav-list > li > a:hover,
.desktop-nav .nav-list > li.current-menu-item > a,
.desktop-nav .nav-list > li.current-menu-ancestor > a {
  background: rgba(255,255,255,.14); color: #fff;
}

/* 드롭다운 */
.desktop-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;        /* gap 없이 바로 붙임 */
  left: 0;
  z-index: 600;
  min-width: 160px;
  /* 위쪽 padding이 투명 브리지 역할 → hover 끊김 방지 */
  padding-top: 8px;
  background: transparent;
}
/* 실제 박스 스타일은 ::before 로 구현 */
.desktop-nav .sub-menu::before {
  content: '';
  position: absolute;
  top: 8px; left: 0; right: 0; bottom: 0;
  background: rgba(13,27,42,.97);
  backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: -1;
}
.desktop-nav .nav-list li:hover > .sub-menu { display: block; }
.desktop-nav .sub-menu a {
  display: block; padding: 10px 20px;
  font-size: 15px; color: rgba(255,255,255,.75);
  transition: background .15s, color .15s; white-space: nowrap;
  position: relative; z-index: 1;
}
.desktop-nav .sub-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.desktop-nav .sub-menu li:first-child a { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.desktop-nav .sub-menu li:last-child  a { border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* 햄버거 버튼 */
.mobile-menu-btn {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 6px;
}
.mobile-menu-btn span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px; transition: all .3s;
}


/* ====================================================
   WORSHIP — 최신 설교 썸네일 그리드
   ==================================================== */
.section-worship { background: var(--content-bg); padding: 0; }
.worship-inner {
  max-width: var(--max-width) !important; width: 100% !important;
  margin: 0 auto !important; box-sizing: border-box !important;
  padding: 28px 32px 20px !important;
}

/* 헤더 */
.worship-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
/* 제목 + 부제 가로 배치 */
.worship-title-group {
  display: flex; align-items: baseline; gap: 14px;
}
.worship-big-title {
  font-size: 3rem; font-weight: 900; color: #111;
  letter-spacing: -.03em; line-height: 1; margin: 0;
  font-family: 'Arial Black', 'Impact', sans-serif;
}
.worship-sub-title {
  font-size: .85rem; color: #666; margin: 0; font-weight: 500;
}
.worship-more { font-size: .85rem; white-space: nowrap; }

/* 그리드 — grid-template-areas 명시적 배치
   레이아웃 (7개 항목):
   [ a  b  c  d ]   ← 1번(대형, 2행) | 2·3·4번
   [ a  e  f  g ]   ← 1번 계속       | 5·6·7번
*/
.section-worship .worship-grid {
  display: grid !important;
  grid-template-columns: 2.5fr 1fr 1fr 1fr !important;
  grid-template-rows: 165px 165px !important;
  grid-template-areas: "a b c d" "a e f g" !important;
  gap: 6px !important;
  width: 100% !important;
}

/* 각 순번 → grid-area 배정 */
.section-worship .worship-grid .worship-item:nth-child(1) { grid-area: a; }
.section-worship .worship-grid .worship-item:nth-child(2) { grid-area: b; }
.section-worship .worship-grid .worship-item:nth-child(3) { grid-area: c; }
.section-worship .worship-grid .worship-item:nth-child(4) { grid-area: d; }
.section-worship .worship-grid .worship-item:nth-child(5) { grid-area: e; }
.section-worship .worship-grid .worship-item:nth-child(6) { grid-area: f; }
.section-worship .worship-grid .worship-item:nth-child(7) { grid-area: g; }

/* 각 아이템 공통 */
.worship-item {
  position: relative; overflow: hidden;
  border-radius: 8px; cursor: pointer;
  background: #1a1a1a;
}

.worship-item img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .35s;
  position: absolute; inset: 0;
  transform: scale(1.05);
}
.worship-item:hover img { transform: scale(1.10); }
/* 대형 아이템: 선명도 보정 */
.section-worship .worship-grid .worship-item:nth-child(1) img {
  filter: contrast(1.08) saturate(1.1);
}

/* 하단 그라디언트 + 텍스트 오버레이 */
.worship-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 36px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,0) 100%);
  z-index: 1;
}
.worship-item-title {
  font-size: .75rem; font-weight: 700; color: #fff;
  margin: 0 0 2px; line-height: 1.3;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.section-worship .worship-grid .worship-item:nth-child(1) .worship-item-title { font-size: .95rem; }
.worship-item-meta {
  font-size: .65rem; color: rgba(255,255,255,.72); margin: 0;
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.worship-item-date { opacity: .65; }

/* 재생 버튼 — CSS 삼각형으로 완벽 중앙 정렬 */
.worship-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  background: rgba(0,0,0,.5); border: 3px solid rgba(255,255,255,.8);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s;
  pointer-events: none; z-index: 2;
  font-size: 0; color: transparent; /* ▶ 텍스트 숨김 */
}
/* CSS 삼각형 — 시각적으로 정확한 중앙 */
.worship-play-btn::after {
  content: '';
  display: block;
  width: 0; height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 30px solid rgba(255,255,255,.95);
  margin-left: 6px; /* 삼각형 무게 중심 보정 */
}
.worship-item:hover .worship-play-btn { opacity: 1; }
.worship-empty { text-align: center; padding: 40px; color: #999; font-size: .9rem; }

/* 태블릿 반응형 */
@media (max-width: 900px) {
  .worship-big-title { font-size: 2.2rem; }
  .section-worship .worship-grid {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    grid-template-rows: 140px 140px 140px !important;
    grid-template-areas: "a b c" "a d e" "a f g" !important;
    gap: 4px !important;
  }
}

/* 모바일: 최신 1개만 표시 */
@media (max-width: 600px) {
  .worship-big-title { font-size: 1.8rem; }
  /* 부제목 숨김 — 좁은 화면에서 줄바꿈 방지 */
  .worship-sub-title { display: none; }
  .worship-title-group { gap: 0; }
  .section-worship .worship-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: 240px !important;
    grid-template-areas: "a" !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .section-worship .worship-grid .worship-item:nth-child(n+2) { display: none !important; }
  .worship-inner { padding: 20px 16px 24px !important; }
}

/* ====================================================
   HERO — YouTube 채널 위젯 스타일 최신 설교
   ==================================================== */
.hero-compact {
  background: var(--content-bg);
  border-bottom: 1px solid var(--border-color);
}
.hero-compact .section-inner { padding: 20px 32px; }

/* 헤더 바 */
.hero-yt-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  font-size: .95rem; font-weight: 700;
}
.hero-yt-bar-icon { font-size: 1rem; flex-shrink: 0; }
.hero-yt-bar-label { flex: 1; }
.hero-yt-bar-more {
  font-size: .78rem; color: rgba(255,255,255,.85);
  white-space: nowrap; transition: color .2s;
}
.hero-yt-bar-more:hover { color: #fff; }

/* 그리드 */
.hero-yt-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* 왼쪽: 메인 썸네일 */
.hero-yt-main {
  cursor: pointer;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border-color);
}
.hero-yt-main-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  overflow: hidden;
}
.hero-yt-main-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s;
}
.hero-yt-main:hover .hero-yt-main-thumb img { transform: scale(1.04); }
.hero-yt-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.2);
  transition: background .2s;
}
.hero-yt-main:hover .hero-yt-play-overlay { background: rgba(0,0,0,.4); }
.hero-yt-play-overlay span {
  font-size: 3rem; color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.hero-yt-main-info {
  padding: 12px 16px;
  background: var(--content-bg);
  flex: 1;
}
.hero-yt-main-title {
  font-size: 1rem; font-weight: 700; color: var(--text-primary);
  margin: 0 0 4px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.hero-yt-main-meta {
  font-size: .8rem; color: var(--text-muted-light); margin: 0;
}

/* 오른쪽: 번호 목록 */
.hero-yt-list {
  display: flex; flex-direction: column;
  background: var(--content-bg);
  overflow-y: auto;
}
.hero-yt-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer; transition: background .15s;
  min-height: 0;
}
.hero-yt-item:hover { background: #eef3fb; }
.hero-yt-item:last-of-type { border-bottom: none; }
.hero-yt-num {
  font-size: .82rem; font-weight: 800;
  color: var(--accent); min-width: 22px; flex-shrink: 0;
}
.hero-yt-item-thumb {
  width: 72px; height: 46px; flex-shrink: 0;
  border-radius: 4px; overflow: hidden;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}
.hero-yt-item-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-yt-item-info { flex: 1; min-width: 0; }
.hero-yt-item-title {
  font-size: .85rem; font-weight: 500; color: var(--text-primary);
  margin: 0 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-yt-item-date { font-size: .75rem; color: var(--text-muted-light); margin: 0; }
.hero-yt-arrow {
  font-size: 1.3rem; color: var(--text-muted-light);
  flex-shrink: 0; line-height: 1;
}
.hero-yt-more {
  display: block; text-align: center;
  padding: 11px; font-size: .85rem;
  color: var(--accent); font-weight: 600;
  border-top: 1px solid var(--border-color);
  transition: background .15s;
  margin-top: auto;
}
.hero-yt-more:hover { background: #eef3fb; }
.hero-no-sermon { text-align: center; padding: 32px; color: var(--text-muted-light); }

/* 반응형 */
@media (max-width: 700px) {
  .hero-yt-grid { grid-template-columns: 1fr; }
  .hero-yt-main { border-right: none; border-bottom: 1px solid var(--border-color); }
  .hero-yt-list { max-height: 300px; }
}
@media (max-width: 480px) {
  .hero-compact .section-inner { padding: 14px 12px; }
}

/* btn-yt-play (설교 페이지 등에서 사용) */
.btn-yt-play {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 30px;
  font-size: .92rem; font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .2s;
  text-decoration: none;
}
.btn-yt-play:hover { background: var(--accent-dark); transform: translateY(-1px); }

/* ====================================================
   YouTube 모달 플레이어
   ==================================================== */
.yt-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9500;
  align-items: center; justify-content: center;
}
.yt-modal.is-open { display: flex; }
.yt-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.85);
}
.yt-modal-box {
  position: relative; z-index: 1;
  width: min(900px, 95vw);
  background: #000; border-radius: 12px;
  overflow: visible;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
}
.yt-modal-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none;
  color: #fff; font-size: 2rem;
  cursor: pointer; line-height: 1;
  transition: color .2s, transform .2s;
}
.yt-modal-close:hover { color: #ef4444; transform: scale(1.1); }
.yt-modal-player {
  aspect-ratio: 16/9; width: 100%;
  border-radius: 12px; overflow: hidden;
}
.yt-modal-player iframe {
  width: 100%; height: 100%; border: none; display: block;
}

/* 추천설교 카드 플레이 버튼 */
.rec-card { cursor: pointer; }
.rec-thumb { position: relative; }
.rec-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28);
  font-size: 1.8rem; color: #fff;
  opacity: 0; transition: opacity .2s;
}
.rec-card:hover .rec-play-btn { opacity: 1; }

/* 클릭 가능 요소 커서 */
.yt-trigger { cursor: pointer; }

.empty-notice { font-size: .85rem; color: var(--text-muted-light); padding: 8px 0; }

/* 오늘의 말씀 — 레이아웃 (hero-yt-grid 1.1fr/1fr 와 동일 비율로 세로선 정렬) */
.daily-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: stretch;
  padding-top: 14px !important;
  padding-bottom: 28px !important;
}
/* 3열: 오늘의말씀 | 말씀카드 | 주보 (레거시) */
.daily-inner-3 {
  display: grid;
  grid-template-columns: 2.2fr 0.5fr 0.5fr;
  gap: 16px;
  align-items: stretch;
  padding-top: 10px !important;
  padding-bottom: 16px !important;
}
/* 오늘의말씀 (상단 띠) + 3열 (교회영상|말씀카드|주보) */
.daily-inner-4 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 16px !important;
  padding-bottom: 18px !important;
}

/* 상단: 오늘의말씀 전체 너비 */
.daily-verse-row { width: 100%; }

/* 하단: 3열 그리드 */
.daily-3col-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
/* 3열 카드 공통: 타이틀행 + 컨텐츠 */
.card-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.card-more {
  font-size: .72rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  opacity: .85;
  transition: opacity .15s;
}
.card-more:hover { opacity: 1; text-decoration: underline; }

/* 3열 카드 패딩 */
.daily-inner-4 .church-video-card,
.daily-inner-4 .wordcard-home-card,
.daily-inner-4 .jubo-card {
  padding: 10px 12px;
  gap: 6px;
  overflow: hidden;
}

/* section-daily: 3열 카드는 흰색 배경 유지 */
.section-daily .church-video-card,
.section-daily .wordcard-home-card,
.section-daily .jubo-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.18) !important;
}
/* 3열 카드 내부 라벨·타이틀은 사이트 기본 컬러 */
.section-daily .church-video-card .verse-label,
.section-daily .wordcard-home-card .verse-label,
.section-daily .jubo-card .verse-label {
  color: var(--accent) !important;
}
.section-daily .church-video-title,
.section-daily .wordcard-home-title,
.section-daily .jubo-thumb-title {
  color: var(--text-primary) !important;
}
.section-daily .card-more { color: var(--accent) !important; }
.section-daily .church-video-placeholder {
  background: #f0f4f8 !important;
}

/* 교회영상 높이 기준 — 3열 카드 모두 stretch */
.daily-3col-row { align-items: stretch; }
.daily-inner-4 .church-video-card { display: flex; flex-direction: column; }
.daily-inner-4 .wordcard-home-card,
.daily-inner-4 .jubo-card { display: flex; flex-direction: column; }
/* 오늘의말씀 — 가로형 (specificity 높임: 두 클래스 동시 지정) */
/* 말씀카드 이미지 — 교회영상(16:9) 높이 기준 */
.daily-inner-4 .wordcard-home-link {
  display: flex;
  flex-direction: column;
}
.daily-inner-4 .wordcard-home-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  flex: none;
  max-height: none;
  overflow: hidden;
  border-radius: 8px;
}
.daily-inner-4 .wordcard-home-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.daily-inner-4 .wordcard-home-placeholder {
  aspect-ratio: 16/9;
  flex: none;
  max-height: none;
}
/* 주보 이미지 — 교회영상(16:9) 높이 기준 */
.daily-inner-4 .jubo-single-home {
  display: flex;
  flex-direction: column;
}
.daily-inner-4 .jubo-single-home-img {
  width: 100%;
  aspect-ratio: 16/9;
  flex: none;
  max-height: none;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 0;
}
.daily-inner-4 .jubo-single-home-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* 말씀카드·주보 하단 제목 — 1줄 컴팩트 */
.daily-inner-4 .wordcard-home-title {
  -webkit-line-clamp: 1;
  font-size: 11px;
  margin-top: 5px;
  text-align: left;
}
.daily-inner-4 .jubo-thumb-title {
  font-size: 11px;
  margin-top: 5px;
}
/* 교회영상 카드 */
.church-video-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-lg, 14px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.church-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
}
.church-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.church-video-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f0f4f8;
  border-radius: 8px;
  font-size: 24px;
  color: #bbb;
  min-height: 60px;
}

/* 홈 말씀카드 */
.wordcard-home-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: var(--radius-lg, 14px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
}
.wordcard-home-link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.wordcard-home-img-wrap {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 8px;
  background: #f5f5f5;
  margin-bottom: 6px;
}
.wordcard-home-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: opacity .2s;
}
.wordcard-home-link:hover .wordcard-home-img-wrap img { opacity: .88; }
.wordcard-home-link:hover img { opacity: .88; }
.wordcard-home-title {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wordcard-home-placeholder {
  width: 100%;
  aspect-ratio: 9/16;
  background: linear-gradient(135deg,#1B3A5C,#2E75B6);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(255,255,255,.6);
}

/* 홈 주보 단일 표시 */
.jubo-single-home {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-sizing: border-box;
}
.jubo-single-home-img {
  width: 100%;
  border-radius: 8px;
  background: #f5f5f5;
  margin-bottom: 8px;
}
.jubo-single-home-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: opacity .2s;
}
.jubo-single-home:hover img { opacity: .88; }

/* 말씀카드 아카이브 페이지 */
.wordcard-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.wordcard-archive-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.wordcard-archive-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.wordcard-archive-item img {
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  display: block;
}
.wordcard-archive-placeholder {
  width: 100%;
  aspect-ratio: 9/16;
  background: linear-gradient(135deg,#1B3A5C,#2E75B6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255,255,255,.5);
}
.wordcard-archive-info {
  padding: 12px 14px;
}
.wordcard-archive-title {
  font-size: 13px;
  font-weight: 600;
  color: #1B3A5C;
  margin-bottom: 4px;
  line-height: 1.4;
}
.wordcard-archive-date { font-size: 11px; color: #aaa; }

/* 말씀카드 단일 페이지 */
.wordcard-single-wrap { max-width: var(--max-width); margin: 0 auto; padding: 48px 32px 80px; }
.wordcard-single-img { max-width: 720px; width: 100%; border-radius: 12px; display: block; margin: 0 auto 24px; cursor: zoom-in; }
.wordcard-single-content { font-size: 15px; line-height: 1.9; color: #333; }

@media (max-width: 768px) {
  .daily-inner-3 { grid-template-columns: 1fr; }
  .daily-3col-row { grid-template-columns: 1fr; }

  /* ── 오늘의 말씀: flex 완전 해제 → block 전환 ── */
  .daily-verse-row { width: 100%; overflow: hidden; }
  .verse-card.verse-card--wide {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
  }
  .verse-card.verse-card--wide .verse-title-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(212,175,55,.3) !important;
    padding: 0 0 8px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .verse-card.verse-card--wide .verse-label { white-space: normal !important; font-size: 14px !important; }
  .verse-card.verse-card--wide .verse-date  { white-space: normal !important; font-size: 13px !important; }
  .verse-card.verse-card--wide .verse-body {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .verse-card.verse-card--wide .verse-text {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    margin-bottom: 6px !important;
  }
  .verse-card.verse-card--wide .verse-ref {
    display: block !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .wordcard-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* 주보 1열 세로 리스트 */
.jubo-list-v {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 10px;
}
.jubo-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none; color: var(--text-primary);
  font-size: .88rem; font-weight: 500;
  transition: background .15s;
  border-radius: 4px;
}
.jubo-list-item:hover { background: #e8f0fb; color: var(--accent); }
.jubo-list-icon { font-size: 1rem; flex-shrink: 0; }
.jubo-list-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jubo-list-arrow { font-size: 1.1rem; color: var(--text-muted-light); flex-shrink: 0; }

/* 주보 카드 컴팩트 */
.jubo-card   { padding: 14px 16px; gap: 8px; display: flex; flex-direction: column; }
/* 메인 주보 썸네일 4개 1줄 */
.jubo-thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; }
.jubo-thumb-item { text-decoration: none; color: inherit; }
.jubo-thumb-img { aspect-ratio: 3/4; overflow: hidden; border-radius: 6px; background: var(--content-bg-alt); border: 1px solid var(--border-color); transition: border-color .2s; }
.jubo-thumb-item:hover .jubo-thumb-img { border-color: var(--accent); }
.jubo-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.jubo-thumb-item:hover .jubo-thumb-img img { transform: scale(1.04); }
.jubo-thumb-fallback { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; color: #c0cfe0; }
.jubo-thumb-title { font-size: .62rem; color: var(--text-muted-light); margin-top: 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 반응형 — 히어로 */
@media (max-width: 860px) {
  .hero-compact-grid { grid-template-columns: 1fr; }
  .hero-main-thumb   { max-width: 500px; }
}
@media (max-width: 600px) {
  .hero-compact .section-inner { padding: 16px; }
  .daily-inner { grid-template-columns: 1fr; }
  .verse-card { padding: 16px 18px; }
  .verse-card::before { font-size: 10rem; }
}

/* ====================================================
   SECTION 공통
   ==================================================== */
.section-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-title  { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.section-more   { font-size: .85rem; color: var(--accent); transition: color .2s; }
.section-more:hover { color: var(--accent-dark); }

/* ====================================================
   오늘의 말씀 + 주보
   ==================================================== */
.section-daily {
  background: var(--content-bg-alt);
  padding: 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.section-daily .content-grid-2 {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px;
}

/* ── 오늘의 말씀 섹션: 프리미엄 다크 네이비 배경 ── */
.section-daily {
  background: linear-gradient(135deg, #0b1a2e 0%, #13253f 40%, #0e2040 70%, #091525 100%);
  position: relative;
  overflow: hidden;
}
.section-daily::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(212,175,55,.08) 0%, transparent 65%),
    radial-gradient(ellipse 50% 70% at 85% 50%, rgba(46,117,182,.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.section-daily .section-inner { position: relative; z-index: 1; }
.section-daily .daily-inner-4 { position: relative; z-index: 1; padding-top: 30px !important; }

/* ── 오늘의 말씀 카드 — 프리미엄 글래스모피즘 ── */

.verse-card {
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px 22px 16px;
  border: 1px solid rgba(212,175,55,.25);
  box-shadow: 0 4px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
  color: #fff;
  animation: verseCardIn .85s cubic-bezier(.22,1,.36,1) both;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

/* ── 오늘의 말씀 가로형: [레이블+날짜] | [성경구절+출처] ── */
.verse-card.verse-card--wide {
  flex-direction: row !important;
  align-items: center;
  padding: 18px 32px;
  gap: 0;
  height: auto;
  justify-content: flex-start;
  background: linear-gradient(110deg, rgba(255,255,255,.09) 0%, rgba(212,175,55,.06) 50%, rgba(255,255,255,.05) 100%);
  border: 1px solid rgba(212,175,55,.35);
  border-top: 2px solid rgba(212,175,55,.6);
}
.verse-card.verse-card--wide .verse-title-row {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  flex-shrink: 0;
  width: auto;
  min-width: 130px;
  padding-right: 28px;
  border-right: 1px solid rgba(212,175,55,.35);
  flex-wrap: nowrap;
  justify-content: center;
}
.verse-card.verse-card--wide .verse-label {
  font-size: 15px;
  white-space: nowrap;
  color: #d4af37;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.verse-card.verse-card--wide .verse-date {
  font-size: 12px;
  white-space: nowrap;
  color: rgba(212,175,55,.7);
  font-weight: 500;
}
.verse-card.verse-card--wide .verse-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-left: 28px;
  overflow: hidden;
  min-width: 0;
}
.verse-card.verse-card--wide .verse-text {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 0;
  text-align: center;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255,255,255,.95);
  font-style: italic;
}
.verse-card.verse-card--wide .verse-ref {
  font-size: .92rem;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
  color: #d4af37;
  font-weight: 700;
  background: rgba(212,175,55,.12);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,.3);
}
.verse-card.verse-card--wide::before {
  font-size: 9rem;
  top: -10px;
  left: 165px;
  opacity: .15;
  color: #d4af37;
}

/* 배경 장식 큰따옴표 */
.verse-card::before {
  content: '\201C';
  position: absolute;
  top: -18px; left: 10px;
  font-size: 16rem; line-height: 1;
  color: rgba(212,175,55,.12);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none; user-select: none;
}

/* 우하단 금빛 광채 */
.verse-card::after {
  content: '';
  position: absolute;
  bottom: -30px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(212,175,55,.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* 카드 등장 */
@keyframes verseCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 텍스트 순차 페이드업 */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.verse-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  position: relative; z-index: 1;
  animation: fadeSlideUp .6s .1s ease both;
}
.verse-label {
  font-size: 25px;
  color: #d4af37;
  letter-spacing: .03em;
  font-weight: 700;
  position: relative; z-index: 1;
  line-height: 1.2;
}
.verse-text {
  font-size: 1.25rem;
  line-height: 1.7;
  color: rgba(255,255,255,.95);
  font-style: italic;
  font-weight: 600;
  margin-bottom: 10px;
  word-break: keep-all;
  text-align: center;
  position: relative; z-index: 1;
  animation: fadeSlideUp .6s .35s ease both;
}
.verse-date {
  font-size: 14px;
  color: rgba(212,175,55,.75);
  font-weight: 500;
  position: relative; z-index: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
.verse-ref {
  font-size: clamp(.8rem, 1.1vw, .95rem);
  color: #d4af37;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  position: relative; z-index: 1;
  animation: fadeSlideUp .6s .5s ease both;
  letter-spacing: .02em;
}

.jubo-card {
  background: var(--content-bg); border-radius: var(--radius-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm);
  height: 100%; box-sizing: border-box;
}
.jubo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jubo-btn {
  display: block; padding: 14px 10px; text-align: center;
  background: #f0f5ff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); font-size: .85rem; color: var(--text-primary);
  transition: all .2s;
}
.jubo-btn:hover { background: #dce8fb; border-color: var(--accent); color: var(--accent-dark); }
.jubo-more { font-size: .82rem; color: var(--accent); align-self: flex-start; }

/* ====================================================
   플로팅 바로가기 (우측 고정)
   ==================================================== */
.floating-shortcuts {
  position: fixed;
  right: 24px;
  bottom: 102px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 998;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.floating-shortcuts.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.fsc-item {
  width: 62px;
  height: 62px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  box-shadow: 0 3px 14px rgba(0,0,0,.15);
  border: 2px solid rgba(46,117,182,.2);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  text-decoration: none;
  line-height: 1;
}
.fsc-item:hover {
  transform: scale(1.1) translateX(-5px);
  box-shadow: 0 6px 24px rgba(46,117,182,.32);
  border-color: var(--accent);
}
/* 툴팁 */
.fsc-item::after {
  content: attr(title);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(27,58,92,.92);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.fsc-item:hover::after { opacity: 1; }
@media (max-width: 768px) {
  .floating-shortcuts { display: none; }
}
@media (min-width: 769px) {
  .floating-shortcuts { bottom: 102px; }
}

/* ====================================================
   모바일 상단 주요 메뉴 바 (헤더 로고 아래)
   ==================================================== */
.mobile-topnav {
  display: none; /* PC 숨김 */
}
@media (max-width: 768px) {
  .mobile-topnav {
    display: block;
    background: rgba(0,0,0,.25);
    border-top: 1px solid rgba(255,255,255,.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobile-topnav::-webkit-scrollbar { display: none; }
  .mobile-topnav-list {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0 6px;
    gap: 0;
  }
  .mobile-topnav-list > .menu-item > a {
    display: block;
    padding: 11px 14px;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: -.01em;
    border-bottom: 2.5px solid transparent;
    transition: color .15s, border-color .15s;
  }
  .mobile-topnav-list > .menu-item > a:active,
  .mobile-topnav-list > .menu-item > a:hover,
  .mobile-topnav-list > .menu-item.current-menu-item > a,
  .mobile-topnav-list > .menu-item.current-menu-ancestor > a {
    color: #fff;
    border-bottom-color: var(--fggc-blue-light);
  }
  .mobile-topnav-list .sub-menu { display: none !important; }
}

/* ====================================================
   모바일 하단 빠른 메뉴 바
   ==================================================== */
.mobile-quick-bar {
  display: none; /* PC에서는 숨김 */
  position: fixed;
  bottom: 56px; /* 모바일 nav 높이 위 */
  left: 0; right: 0;
  z-index: 799;
  background: rgba(15,25,45,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 8px;
  gap: 4px;
}
.mobile-quick-bar::-webkit-scrollbar { display: none; }
.mqb-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,.75);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.mqb-item:hover, .mqb-item:active {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.mqb-icon { font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.mqb-label { font-size: 10px; font-weight: 600; white-space: nowrap; }

@media (max-width: 768px) {
  .mobile-quick-bar { display: flex; }
  body { padding-bottom: 120px; } /* nav(56) + quick-bar(52) + 여유 */
  #btn-scroll-top { bottom: 130px; } /* quick-bar + nav 위 */
}

/* ====================================================
   빠른 접근 버튼 (레거시 — 미사용)
   ==================================================== */
.section-touch { display: none; }
.touch-grid { display: none; }
.touch-item { display: none; }
.touch-icon { display: none; }

/* ====================================================
   찬이작업실
   ==================================================== */
.section-music { background: linear-gradient(135deg, #1B3A5C 0%, #0d1b2a 100%); padding: 0; }
.music-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.music-card { background: var(--content-bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
.music-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.music-card a { display: block; text-decoration: none; }
.music-thumb { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--content-bg-alt); }
.music-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.music-card:hover .music-thumb img { transform: scale(1.06); }
.music-play-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.3); font-size: 2rem; color: #fff;
  opacity: 0; transition: opacity .2s;
}
.music-card:hover .music-play-overlay { opacity: 1; }
.music-info  { padding: 12px; }
.music-title { font-size: .88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-date  { font-size: .75rem; color: var(--text-muted-light); }

/* ====================================================
   추천 설교 (5열 그리드 — 소식/갤러리 섹션과 동일 폭)
   ==================================================== */
/* ====================================================
   새가족 등록 · 생방송 · 언어선택 3-배너
   ==================================================== */
.section-three-banners { background: var(--content-bg-alt); padding: 0; }
.tb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 6px 0;
}
.tb-card {
  position: relative;
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
  overflow: hidden;
  cursor: pointer;
  min-height: 0;
}
.tb-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }

/* 새가족 등록 — 파란 그라디언트 */
.tb-card--newfamily {
  background: linear-gradient(135deg, #1B3A5C 0%, #2E75B6 100%);
  color: #fff;
}
/* 생방송 — 방송중 : 빨강, 대기중 : 회색 */
.tb-card--live {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  color: #fff;
}
.tb-card--live-on {
  background:
    linear-gradient(135deg, rgba(150,30,20,.82) 0%, rgba(200,50,30,.78) 100%),
    url('assets/img/live-bg.png') center / cover no-repeat;
  animation: livePulse 2.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,.35); }
  50%       { box-shadow: 0 0 0 10px rgba(231,76,60,0); }
}
/* 언어 선택 — 청록 그라디언트 */
.tb-card--lang {
  background: linear-gradient(135deg, #134e5e 0%, #1a7a5e 100%);
  color: #fff;
  cursor: default;
}
.tb-card--lang:hover { transform: none; box-shadow: none; }

/* LIVE 배지 */
.tb-live-badge {
  position: absolute; top: 14px; right: 16px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 14px;
  padding: 3px 11px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #fff;
}
.tb-live-dot {
  width: 8px; height: 8px;
  background: #fff; border-radius: 50%;
  animation: dotBlink 1s ease-in-out infinite;
  display: inline-block;
}
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* 아이콘 */
.tb-card-icon {
  font-size: 2rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.tb-icon-off { opacity: .45; }

/* ── 단일 컬럼 내부 레이아웃 ── */
.tb-col-left {
  display: flex; flex-direction: column; gap: 6px;
  flex: none; width: 100%; min-width: 0;
  padding-right: 0;
  border-right: none;
}
.tb-col-left--live { flex: none; width: 100%; }
.tb-col-right {
  flex: none; width: 100%;
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: flex-start;
  gap: 10px; min-width: 0;
  padding-left: 0;
}
.tb-col-right--lang { align-items: flex-start; }
.tb-church-art { display: none; }

/* 생방송 헤더 (아이콘 + 제목 가로배치) */
.tb-live-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.tb-live-sub {
  font-size: .88rem; color: rgba(255,255,255,.9); margin: 0; line-height: 1.4;
  font-weight: 600;
}

/* 제목 / 설명 */
.tb-title {
  font-size: 1.1rem; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.3; margin: 0;
}
.tb-desc {
  font-size: .85rem; color: rgba(255,255,255,.88); line-height: 1.75; margin: 0;
}

/* 정보 목록 */
.tb-info-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.tb-info-list li {
  font-size: .84rem; color: rgba(255,255,255,.92);
  display: flex; align-items: flex-start; gap: 6px; line-height: 1.55;
}
.tb-info-icon { flex-shrink: 0; font-size: .85rem; margin-top: 1px; }

/* CTA 버튼 */
.tb-cta {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff; border-radius: 8px;
  padding: 8px 18px; font-size: .84rem; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s; margin-top: 2px;
}
.tb-cta:hover { background: rgba(255,255,255,.36); }
.tb-cta--dim  { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

/* 유튜브 채널 바로가기 링크 */
.tb-yt-link-main {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: .88rem; font-weight: 700;
  text-decoration: none;
  margin-top: 6px;
  transition: background .15s;
  white-space: nowrap;
}
.tb-yt-link-main:hover { background: rgba(255,255,255,.35); }

/* 언어 버튼 */
.tb-lang-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.tb-lang-opt {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
  color: #fff; border-radius: 10px; padding: 4px 10px;
  font-size: .73rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s;
}
.tb-lang-opt:hover { background: rgba(255,255,255,.3); }

/* 반응형 */
@media (max-width: 900px) {
  .tb-grid { grid-template-columns: 1fr 1fr; }
  .tb-card--lang { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tb-grid { grid-template-columns: 1fr; }
  .tb-card--lang { grid-column: auto; }
  .tb-card { padding: 16px 18px; gap: 8px; }
  .tb-desc { font-size: .83rem; }
  .tb-info-list li { font-size: .82rem; }
}

.section-rec { background: var(--content-bg); padding: 0; }
.rec-scroll {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.rec-card {
  min-width: 0;
  background: var(--content-bg); border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.rec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.rec-card a { display: block; text-decoration: none; }
.rec-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--content-bg-alt); }
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rec-info  { padding: 10px 12px; }
.rec-title { font-size: .85rem; font-weight: 500; color: var(--text-primary); line-height: 1.4; margin-bottom: 4px; }
.rec-meta  { font-size: .75rem; color: var(--text-muted-light); }
/* 태블릿: 3열 */
@media (max-width: 900px) {
  .rec-scroll { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
/* 모바일: 가로 스크롤 2열 */
@media (max-width: 600px) {
  .rec-scroll {
    display: flex; gap: 12px;
    overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--border-color);
    cursor: grab;
  }
  .rec-scroll:active { cursor: grabbing; }
  .rec-scroll::-webkit-scrollbar { height: 4px; }
  .rec-scroll::-webkit-scrollbar-track { background: var(--border-color); border-radius: 2px; }
  .rec-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
  .rec-card { min-width: 160px; max-width: 160px; flex-shrink: 0; }
}

/* ====================================================
   소식 + 갤러리
   ==================================================== */
.section-news { background: var(--content-bg-alt); padding: 0; }
.section-news .content-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
/* 그리드 셀 min-width 제약 — nowrap 텍스트로 인한 셀 팽창 방지 */
.section-news .content-grid-2 > * { min-width: 0; }
.section-daily .content-grid-2 > * { min-width: 0; }
.daily-3col-row > * { min-width: 0; }

.news-list { display: flex; flex-direction: column; }
.news-item  { border-bottom: 1px solid var(--border-color); }
.news-link  { display: flex; justify-content: space-between; align-items: center; padding: 13px 6px; gap: 12px; transition: background .15s; border-radius: 6px; }
.news-link:hover { background: #e8f0fb; }
.news-title { font-size: .9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; font-weight: 500; flex: 1; min-width: 0; }
.news-link:hover .news-title { color: var(--accent); }
.news-date  { font-size: .78rem; color: var(--text-muted-light); flex-shrink: 0; }

.gallery-grid-home { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.gallery-home-item { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; display: block; }
.gallery-home-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery-home-item:hover img { transform: scale(1.06); }

/* ====================================================
   FOOTER
   ==================================================== */
.site-footer { background: #060f1a; }
.footer-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 36px 32px 20px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px;
}
.footer-logo  { font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.footer-desc  { font-size: .9rem; color: var(--color-text-muted); margin-bottom: 8px; }
.footer-col address { font-size: .9rem; color: var(--color-text-muted); line-height: 1.7; font-style: normal; }
.footer-col address a { color: var(--fggc-blue-light); }
.footer-heading { font-size: .9rem; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.footer-list { display: flex; flex-direction: column; gap: 4px; }
.footer-list li, .footer-list a { font-size: .9rem; color: var(--color-text-muted); }
.footer-list a:hover { color: #fff; }
.footer-list.footer-sns a { color: var(--color-text-muted); }
.footer-list .footer-sub-link a { font-size: .9rem; color: rgba(255,255,255,.38); padding-left: 6px; }
.footer-list .footer-sub-link a:hover { color: rgba(255,255,255,.7); }
.footer-clergy-link a {
  color: var(--fggc-blue-light) !important;
  font-weight: 600;
  border: 1px solid rgba(91,163,230,.3);
  padding: 3px 10px;
  border-radius: 14px;
  font-size: .85rem;
  transition: background .2s;
  display: inline-block;
}
.footer-clergy-link a:hover { background: rgba(91,163,230,.15); color: #fff !important; }

/* ====================================================
   온라인 헌금 계좌 섹션
   ==================================================== */
.offering-section {
  background: linear-gradient(135deg, #0a1628 0%, #1B3A5C 60%, #0d2240 100%);
  padding: 32px 20px;
}
.offering-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* 왼쪽 타이틀 */
.offering-title-area {
  flex: 0 0 220px;
  color: #fff;
}
.offering-main-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 6px;
  letter-spacing: -.02em;
}
.offering-main-title span { color: #5ba3e0; }
.offering-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  margin: 0 0 16px;
  letter-spacing: .05em;
}
.offering-church-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 14px;
}
.offering-cross {
  font-size: 1.4rem;
  opacity: .8;
}
.offering-church-kr {
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.offering-church-en {
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  margin: 0;
}

/* 계좌 카드 그리드 */
.offering-accounts {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.offering-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: background .15s;
}
.offering-card:hover { background: rgba(255,255,255,.12); }
.offering-card-icon { font-size: 1.4rem; margin-bottom: 4px; }
.offering-type {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin: 0;
}
.offering-bank {
  font-size: .8rem;
  font-weight: 700;
  color: #7ec8f5;
  margin: 4px 0 0;
}
.offering-num {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .03em;
  margin: 2px 0;
}
.offering-holder {
  font-size: .7rem;
  color: rgba(255,255,255,.55);
  margin: 0 0 8px;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.2);
}
.offering-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
  margin-top: auto;
}
.offering-copy-btn:hover { background: rgba(255,255,255,.28); }
.offering-copy-btn:active { transform: scale(.96); }
.offering-copy-btn.copied {
  background: #27ae60;
  border-color: #27ae60;
}

/* 반응형 */
@media (max-width: 1000px) {
  .offering-inner { flex-direction: column; }
  .offering-title-area { flex: none; width: 100%; text-align: center; }
  .offering-church-row { justify-content: center; }
  .offering-accounts { grid-template-columns: repeat(2, 1fr); width: 100%; }
}
@media (max-width: 520px) {
  .offering-accounts { grid-template-columns: 1fr 1fr; }
  .offering-num { font-size: .88rem; }
}

.footer-banner {
  max-width: var(--max-width); margin: 0 auto;
  padding: 24px 32px 0;
}
.footer-banner img { border-radius: 10px; }

.footer-bottom {
  max-width: var(--max-width); margin: 0 auto;
  padding: 16px 32px 32px;
  border-top: 0.5px solid rgba(255,255,255,.06);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1rem; color: var(--color-text-muted);
}
.footer-privacy a { color: var(--color-text-muted); }
.footer-privacy a:hover { color: #fff; }

/* ====================================================
   모바일 하단 내비
   ==================================================== */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(10,18,30,.97); backdrop-filter: blur(12px);
  border-top: 0.5px solid rgba(255,255,255,.08);
  padding: 6px 0 env(safe-area-inset-bottom, 6px);
  justify-content: space-around;
}
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 12px; background: none; border: none;
  color: rgba(255,255,255,.5); font-size: .85rem; text-decoration: none;
  transition: color .2s;
}
.mobile-nav-item svg { flex-shrink: 0; }
.mobile-nav-item.active, .mobile-nav-item:hover { color: var(--fggc-blue-light); }

/* ====================================================
   모바일 슬라이드 메뉴
   ==================================================== */
.mobile-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 900;
}
.mobile-overlay.open { display: block; }
.mobile-menu-panel {
  position: fixed; top: 0; right: -100%; bottom: 0; width: min(80vw, 320px);
  background: var(--fggc-dark-mid); z-index: 1000; overflow-y: auto;
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.mobile-menu-panel.open { right: 0; }
.mobile-menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--fggc-navy), var(--fggc-navy-mid));
}
.mobile-close-btn { background: none; border: none; color: #fff; font-size: 20px; }
.mobile-nav-list  { padding: 8px 0; }
.mobile-nav-list .menu-item > a {
  display: block; padding: 14px 20px;
  font-size: 1.1rem; color: rgba(255,255,255,.8); font-weight: 500;
  border-bottom: 0.5px solid rgba(255,255,255,.06);
  transition: background .15s, color .15s;
}
.mobile-nav-list .menu-item > a:hover { background: rgba(255,255,255,.06); color: #fff; }
.mobile-nav-list .sub-menu .menu-item > a {
  padding: 10px 20px 10px 36px;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.mobile-nav-list .menu-item-has-children > .sub-menu { display: none; }
.mobile-nav-list .menu-item-has-children.open > .sub-menu { display: block; }

/* ====================================================
   내부 페이지 공통
   ==================================================== */
#page-wrap { min-height: 60vh; }
.inner-page { padding: 0; background: var(--site-bg); }
.page-wrap  { max-width: var(--max-width); margin: 0 auto; padding: 48px 32px 80px; }
.page-header { margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--accent); }
.page-title  { font-size: clamp(1.3rem,3vw,2rem); font-weight: 700; color: var(--text-primary); }
.entry-content { line-height: 1.9; font-size: 1rem; color: var(--text-secondary); }
.entry-content p { margin-bottom: 1.2em; }
.entry-content img { max-width: 100%; border-radius: var(--radius-md); }

.entry-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
.entry-meta   { display: flex; gap: 12px; font-size: .78rem; color: var(--text-muted-light); margin-bottom: 8px; }
.entry-cat    { background: var(--accent); color: #fff; padding: 2px 10px; border-radius: 20px; font-size: .72rem; }
.entry-title  { font-size: clamp(1.1rem,2.5vw,1.7rem); font-weight: 700; color: var(--text-primary); }
.entry-thumbnail { margin-bottom: 24px; border-radius: var(--radius-lg); overflow: hidden; }
.entry-thumbnail img { width: 100%; height: auto; }
.entry-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.btn-back {
  display: inline-block; padding: 10px 24px;
  background: var(--accent-dark); color: #fff;
  border-radius: var(--radius-md); font-size: .9rem;
  transition: background .2s;
}
.btn-back:hover { background: var(--accent); }

/* ====================================================
   반응형
   ==================================================== */
@media (max-width: 1024px) {
  .touch-grid { grid-template-columns: repeat(4, 1fr); }
  .music-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --header-h: 58px; }

  .header-inner { padding: 14px 16px; height: auto; }
  .logo-text  { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: nowrap; }
  .logo-kr    { font-size: 18px; white-space: nowrap; }
  .logo-en    { display: inline; font-size: 12px; white-space: nowrap; }
  .desktop-nav  { display: none; }
  .mobile-menu-btn { display: flex; }


  /* 히어로 단일 컬럼 */
  .hero-content { grid-template-columns: 1fr; padding: 0 16px; }
  .hero-text    { padding: 48px 0 32px; }
  .hero-side    { display: none; }
  .hero-title   { font-size: clamp(1.3rem,5vw,2rem); }

  /* 섹션 */
  .section-inner  { padding: 28px 16px; }
  .section-three-banners .section-inner { padding-top: 0; padding-bottom: 0; }
  .section-daily  { padding: 0; }
  .section-daily .content-grid-2 { grid-template-columns: 1fr; }
  .section-touch  { padding: 0; }
  .touch-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .touch-item { padding: 14px 6px; font-size: .75rem; }
  .touch-icon { font-size: 1.3rem; }
  .section-music  { padding: 0; }
  .music-grid { grid-template-columns: repeat(2, 1fr); }
  .section-rec    { padding: 0; }
  .section-news   { padding: 0; }
  .section-news .content-grid-2 { grid-template-columns: 1fr; gap: 24px; }

  /* 푸터 */
  .footer-inner   { grid-template-columns: 1fr 1fr; padding: 40px 16px 24px; gap: 24px; }
  .footer-info    { grid-column: 1 / -1; }
  .footer-bottom  { flex-direction: column; gap: 6px; padding: 16px 16px 24px; text-align: center; }

  /* 모바일 내비 */
  .mobile-nav   { display: flex; }
  body { padding-bottom: 70px; }
}

/* ====================================================
   교회 일정 캘린더 (front page)
   ==================================================== */
.section-calendar {
  background: #fff;
  padding: 0;
  border-top: 1px solid #e8ecf1;
}
.cal-month-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #f0f4f8;
  color: var(--navy);
  font-size: 13px;
  text-decoration: none;
  font-weight: 700;
}
.cal-nav-btn:hover { background: #dde4ed; }

.fp-cal-wrap {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: visible;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
/* calendar grid shared classes (used by fggc_cal_grid helper) */
.fp-cal-wrap .it-cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fp-cal-wrap .it-cal-table th {
  padding: 10px 4px; text-align: center; font-size: 13px; font-weight: 700;
  background: #fafafa; border-bottom: 2px solid #eee;
}
.fp-cal-wrap .it-cal-cell {
  overflow: visible; position: relative; vertical-align: top;
  padding: 6px 5px; min-height: 88px; border: 1px solid #f0f0f0;
}
.fp-cal-wrap .it-cal-cell.cal-empty { background: #fafafa; }
.fp-cal-wrap .it-cal-cell.cal-today { background: #eff6ff; }
.fp-cal-wrap .it-cal-cell.cal-sun .cal-dn { color: #e74c3c; }
.fp-cal-wrap .it-cal-cell.cal-sat .cal-dn { color: #2E75B6; }
.fp-cal-wrap .cal-dn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 13px; font-weight: 600; color: #333;
  text-decoration: none; margin-bottom: 3px;
}
.fp-cal-wrap .it-cal-cell.cal-today .cal-dn { background: var(--blue); color: #fff; }
.fp-cal-wrap .cal-ev {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  margin-bottom: 2px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; line-height: 1.5; display: block;
}
/* multi-day span bars */
.fp-cal-wrap .cal-span {
  font-size: 11px; padding: 2px 6px; margin-bottom: 2px;
  line-height: 1.5; white-space: nowrap; overflow: hidden;
  display: flex; align-items: center; gap: 2px; position: relative;
}
.fp-cal-wrap .cal-span[data-t="s"]  { border-radius: 4px 0 0 4px; margin-right: -5px; z-index: 2; }
.fp-cal-wrap .cal-span[data-t="m"]  { border-radius: 0; margin: 0 -5px 2px; padding: 2px 0; color: transparent !important; z-index: 1; }
.fp-cal-wrap .cal-span[data-t="e"]  { border-radius: 0 4px 4px 0; margin-left: -5px; padding: 2px 0; color: transparent !important; z-index: 1; }
.fp-cal-wrap .cal-span[data-t="ws"] { border-radius: 4px 0 0 4px; margin-right: -5px; z-index: 2; }
.fp-cal-wrap .cal-span[data-t="we"] { border-radius: 0 4px 4px 0; margin-left: -5px; padding: 2px 0; color: transparent !important; z-index: 1; }
.fp-cal-wrap .cal-span[data-t="se"] { border-radius: 4px; z-index: 2; }
/* ── 일정 있는 날짜: 클릭 가능 커서 ── */
.fp-cal-wrap .cal-ev-click          { cursor: pointer; }
.fp-cal-wrap .cal-ev-click:hover    { filter: brightness(.93); }
/* 일정 있는 셀의 날짜 숫자도 pointer */
.fp-cal-wrap .it-cal-cell:has(.cal-ev-click) .cal-dn { cursor: pointer; }
.fp-cal-wrap .it-cal-cell:has(.cal-ev-click):hover    { background: #f0f6ff; }
/* 일정 팝업 모달 */
#cal-detail-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45); align-items: center; justify-content: center;
}
#cal-detail-modal.is-open { display: flex; }
#cal-detail-box {
  background: #fff; border-radius: 16px; padding: 24px 28px;
  min-width: 280px; max-width: 420px; width: 92%; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  position: relative; animation: calModalIn .2s ease;
}
@keyframes calModalIn { from { opacity:0; transform:scale(.94) translateY(12px); } to { opacity:1; transform:none; } }
#cal-detail-close {
  position: absolute; top: 14px; right: 16px;
  font-size: 20px; color: #aaa; cursor: pointer; line-height: 1;
  border: none; background: none; padding: 0;
}
#cal-detail-close:hover { color: #333; }
#cal-detail-date {
  font-size: 15px; font-weight: 700; color: var(--accent,#2E75B6);
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #eee;
}
.cal-detail-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #f5f5f5;
  font-size: 13px; color: #333;
}
.cal-detail-item:last-child { border-bottom: none; }
.cal-detail-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; margin-top: 3px;
}
.cal-detail-info { display: flex; flex-direction: column; gap: 2px; }
.cal-detail-title { font-weight: 600; }
.cal-detail-meta  { font-size: 11px; color: #888; }
/* legend */
.fp-cal-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid #f0f0f0;
  font-size: 12px; color: #555;
}
.fp-legend-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 4px; vertical-align: middle;
}

/* ====================================================
   교회일정 전용 페이지 (page-community-schedule.php)
   ==================================================== */
.cs-page-wrap { padding-top: 40px; padding-bottom: 60px; max-width: 900px; }
.cs-event-list { margin-top: 32px; }
.cs-list-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--border-color); }
.cs-event-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.cs-event-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.cs-event-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.cs-event-date { color: var(--text-muted-light); font-size: 13px; white-space: nowrap; }
.cs-event-title { font-weight: 600; color: var(--text-primary); }
.cs-event-loc { color: var(--text-secondary); font-size: 13px; }
.cs-event-cat { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; }

@media (max-width: 768px) {
  .section-calendar { padding: 0; }
  .fp-cal-wrap .it-cal-cell { padding: 3px 2px; min-height: 60px; }
  .fp-cal-wrap .cal-dn { font-size: 11px; width: 20px; height: 20px; }
  .fp-cal-wrap .cal-ev, .fp-cal-wrap .cal-span { font-size: 9px; padding: 1px 3px; }
}

/* ====================================================
   개발일지
   ==================================================== */
.section-devlog {
  background: #060f1a;
  padding: 56px 0 72px;
  border-top: 0.5px solid rgba(255,255,255,.06);
}

/* 관리자 추가 버튼 */
.devlog-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 20px; font-size: .78rem; font-weight: 600;
  background: rgba(46,117,182,.18); border: 0.5px solid rgba(46,117,182,.5);
  color: var(--fggc-blue-light); transition: all .2s;
}
.devlog-add-btn:hover { background: rgba(46,117,182,.32); color: #fff; }

/* 필터 탭 */
.devlog-filter {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.devlog-tab {
  padding: 6px 16px; border-radius: 20px; font-size: .78rem; font-weight: 500;
  background: rgba(255,255,255,.05); border: 0.5px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.55); cursor: pointer; transition: all .2s;
}
.devlog-tab:hover { background: rgba(255,255,255,.1); color: #fff; }
.devlog-tab.active { background: var(--fggc-blue); border-color: var(--fggc-blue); color: #fff; }

/* 타임라인 */
.devlog-timeline { display: flex; flex-direction: column; gap: 0; }

.devlog-year-group { margin-bottom: 8px; }
.devlog-year-label {
  font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.3);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 0 8px 32px; position: relative;
}
.devlog-year-label::before {
  content: ''; position: absolute; left: 10px; top: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.2);
  transform: translateY(-50%);
}

.devlog-item {
  display: flex; gap: 0; position: relative;
  padding-left: 32px; padding-bottom: 24px;
}
.devlog-item::before {
  content: ''; position: absolute; left: 15px; top: 8px; bottom: -8px; width: 1px;
  background: rgba(255,255,255,.07);
}
.devlog-item:last-child::before { display: none; }
.devlog-dot {
  position: absolute; left: 9px; top: 6px;
  width: 13px; height: 13px; border-radius: 50%;
  flex-shrink: 0; z-index: 1;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.devlog-content {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.03); border: 0.5px solid rgba(255,255,255,.06);
  border-radius: var(--radius-md); padding: 14px 16px;
  transition: background .2s, border-color .2s;
}
.devlog-item:hover .devlog-content {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.1);
}
.devlog-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.devlog-date { font-size: .72rem; color: var(--color-text-muted); flex-shrink: 0; }
.devlog-cat  {
  font-size: .68rem; font-weight: 600; padding: 2px 9px;
  border-radius: 10px; border: 0.5px solid; flex-shrink: 0;
}
.devlog-actions { margin-left: auto; display: flex; gap: 8px; }
.devlog-edit, .devlog-delete {
  font-size: .68rem; padding: 2px 8px; border-radius: 4px; transition: all .15s;
}
.devlog-edit   { color: var(--fggc-blue-light); background: rgba(46,117,182,.12); }
.devlog-edit:hover { background: rgba(46,117,182,.25); color: #fff; }
.devlog-delete { color: #e74c3c; background: rgba(231,76,60,.1); }
.devlog-delete:hover { background: rgba(231,76,60,.25); color: #fff; }
.devlog-title  { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.4; }
.devlog-body   { margin-top: 8px; font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.7; }
.devlog-body p { margin-bottom: .4em; }

/* 숨김 (필터용) */
.devlog-item.hidden { display: none; }

@media (max-width: 768px) {
  .section-devlog { padding: 40px 0 56px; }
  .devlog-year-label { font-size: .68rem; }
  .devlog-title { font-size: .82rem; }
  .devlog-actions { display: none; } /* 모바일에서 편집 버튼 숨김 */
}

/* ====================================================
   푸터 개발일지 버튼
   ==================================================== */
.footer-sep { margin: 0 8px; color: #555; }
.devlog-toggle-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: .78rem;
  cursor: pointer;
  padding: 2px 4px;
  transition: color .2s;
  font-family: inherit;
}
.devlog-toggle-btn:hover { color: #2E75B6; }
.devlog-count-badge {
  display: inline-block;
  background: #2E75B6;
  color: #fff;
  font-size: .7rem;
  border-radius: 10px;
  padding: 0 6px;
  line-height: 1.6;
  vertical-align: middle;
}

/* ====================================================
   개발일지 슬라이드 패널
   ==================================================== */
.devlog-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: #0d1b2a;
  border-top: 2px solid #2E75B6;
  border-radius: 16px 16px 0 0;
  z-index: 9000;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.devlog-panel.is-open {
  transform: translateY(0);
}
.devlog-panel-inner {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}
.devlog-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.devlog-panel-title {
  font-size: 1rem;
  color: #e8edf2;
  font-weight: 700;
  flex: 1;
  margin: 0;
}
.devlog-add-link {
  font-size: .78rem;
  color: #2E75B6;
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid #2E75B6;
  border-radius: 12px;
}
.devlog-panel-close {
  background: none;
  border: none;
  color: #6b8aaa;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color .2s;
}
.devlog-panel-close:hover { color: #e74c3c; }

.devlog-panel-filter {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.devlog-panel-filter::-webkit-scrollbar { display: none; }

.devlog-panel-body {
  overflow-y: auto;
  padding: 8px 20px 24px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #2E75B6 #0d1b2a;
}

.devlog-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 8999;
}
.devlog-panel-backdrop.is-open { display: block; }

/* ====================================================
   공통 — 섹션/애니메이션
   ==================================================== */
.section-inner { max-width: var(--max-width); margin: 0 auto; padding: 40px 32px; }
.section-title-center { text-align: center; font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 40px; }
.section-title-center::after { content:''; display:block; width:48px; height:3px; background:#2E75B6; margin:12px auto 0; border-radius:2px; }

/* reveal 애니메이션 */
.reveal, .reveal-up, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.reveal         { transform: translateY(20px); }
.reveal-up      { transform: translateY(40px); }
.reveal-left    { transform: translateX(-40px); }
.reveal-right   { transform: translateX(40px); }
.reveal.is-visible, .reveal-up.is-visible,
.reveal-left.is-visible, .reveal-right.is-visible {
  opacity: 1;
  transform: none;
  transition-delay: var(--delay, 0s);
}

/* ====================================================
   히어로 공통 패턴
   ==================================================== */
.greeting-hero, .history-hero, .staff-hero, .worship-hero, .location-hero,
.nextgen-hero, .nextgen-detail-hero, .hwamyeong-hero {
  position: relative;
  height: auto !important;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/img/church-bg.jpg') center/cover no-repeat;
  overflow: hidden;
}
.greeting-hero-overlay, .history-hero-overlay, .staff-hero-overlay,
.worship-hero-overlay, .location-hero-overlay,
.nextgen-hero-overlay, .hwamyeong-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20,40,80,.78) 0%, rgba(46,117,182,.6) 100%);
}
.greeting-hero-content, .history-hero-content, .staff-hero-content,
.worship-hero-content, .location-hero-content,
.nextgen-hero-content, .hwamyeong-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.greeting-hero-sub, .history-hero-sub, .staff-hero-sub,
.worship-hero-sub, .location-hero-sub,
.nextgen-hero-sub, .hwamyeong-hero-sub {
  display: block;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #a8c8f0;
  margin-bottom: 6px;
}
.greeting-hero-title, .history-hero-title, .staff-hero-title,
.worship-hero-title, .location-hero-title,
.nextgen-hero-title, .hwamyeong-hero-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.greeting-hero-desc, .history-hero-desc, .staff-hero-desc,
.worship-hero-desc, .location-hero-desc,
.nextgen-hero-desc, .hwamyeong-hero-desc {
  display: none; /* 높이 절약: 설명 텍스트 숨김 */
}

/* ====================================================
   인사말 (greeting)
   ==================================================== */
.greeting-page .greeting-main { }
.greeting-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 800px) { .greeting-grid { grid-template-columns: 1fr; } }

.greeting-photo-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(46,117,182,.22);
}
.greeting-photo-frame img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.greeting-photo-badge {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px;
  background: linear-gradient(0deg, rgba(10,20,50,.85), transparent);
  color: #fff;
  text-align: center;
}
.greeting-photo-name { display:block; font-size:1.15rem; font-weight:700; }
.greeting-photo-role { display:block; font-size:.85rem; color:#a8c8f0; margin-top:2px; }

.greeting-cross { font-size: 2rem; color: #2E75B6; margin-bottom: 12px; }
.greeting-title { font-size: 1.6rem; font-weight: 700; color: #1a2a4a; margin: 0 0 12px; }
.greeting-divider { width: 48px; height: 3px; background: #2E75B6; border-radius: 2px; margin-bottom: 24px; }
.greeting-body p { color: #444; line-height: 1.85; margin-bottom: 14px; font-size: 1rem; }
.greeting-body strong { color: #2E75B6; }
.greeting-signature { margin-top: 32px; padding-top: 20px; border-top: 1px solid #e0e8f4; }
.greeting-sig-text { color: #666; font-size: .9rem; }
.greeting-sig-name { font-size: 1.3rem; font-weight: 700; color: #1a2a4a; margin: 4px 0; }
.greeting-sig-icon { font-size: 1.4rem; color: #2E75B6; }

.greeting-values { background: linear-gradient(135deg, #f0f5ff, #e8f0fb); padding: 60px 0; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 700px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(46,117,182,.1);
  transition: transform .3s, box-shadow .3s;
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(46,117,182,.18); }
.value-icon { font-size: 2.5rem; margin-bottom: 16px; }
.value-card h3 { font-size: 1.2rem; font-weight: 700; color: #1a2a4a; margin-bottom: 10px; }
.value-card p { color: #666; font-size: .92rem; line-height: 1.7; }

/* ====================================================
   교회 연혁 (history)
   ==================================================== */
.history-main { }
.history-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 60px;
  padding: 32px;
  background: linear-gradient(135deg, #1a3a6b, #2E75B6);
  border-radius: 16px;
}
.h-stat { text-align: center; color: #fff; }
.h-stat-num { display: block; font-size: 3rem; font-weight: 800; line-height: 1; }
.h-stat-label { display: block; font-size: .9rem; color: #a8c8f0; margin-top: 4px; }

/* ── 연혁 타임라인 (단일 좌측 세로선) ── */
.history-timeline {
  position: relative;
  padding: 8px 0 32px 36px;
  border-left: 3px solid #c9ddf4;
  margin-top: 24px;
}

.history-year-marker {
  position: relative;
  margin: 20px 0 8px -50px;
  display: flex;
  align-items: center;
}
.history-year-marker:first-child { margin-top: 0; }
.history-year-circle {
  background: linear-gradient(135deg, #1a3a6b, #2E75B6);
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
  padding: 5px 18px;
  border-radius: 20px;
  box-shadow: 0 3px 12px rgba(46,117,182,.35);
  letter-spacing: .06em;
  white-space: nowrap;
}
.history-year-circle--current {
  background: linear-gradient(135deg, #e65c00, #f9a825);
  box-shadow: 0 3px 12px rgba(230,92,0,.4);
}

.history-item {
  position: relative;
  margin-bottom: 10px;
}
.history-item-dot {
  position: absolute;
  top: 14px;
  left: -42px;
  width: 12px; height: 12px;
  background: #2E75B6;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #2E75B6;
}
.history-item-dot--current {
  background: #e65c00;
  box-shadow: 0 0 0 2px #e65c00;
}
.history-item-content {
  background: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 2px 12px rgba(46,117,182,.10);
  transition: box-shadow .25s, transform .25s;
  border-left: 3px solid transparent;
}
.history-item-content:hover { box-shadow: 0 6px 24px rgba(46,117,182,.18); transform: translateX(3px); }
.history-item-content--current {
  border-left-color: #e65c00;
  background: #fffaf5;
}
.history-item-month {
  font-size: .75rem; font-weight: 700; color: #2E75B6;
  letter-spacing: .08em; margin-bottom: 2px;
}
.history-item-title { font-size: .95rem; font-weight: 700; color: #1a2a4a; margin: 0 0 3px; }
.history-item-desc  { font-size: .83rem; color: #666; line-height: 1.6; margin: 0; }

@media (max-width: 600px) {
  .history-timeline { padding-left: 24px; }
  .history-year-marker { margin-left: -37px; }
  .history-item-dot { left: -30px; }
}

/* ====================================================
   교역자소개 (staff) — 리뉴얼
   ==================================================== */
/* 담임·원로 목사 — 가로형 큰 카드 */
.staff-senior-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
.staff-senior-card {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(46,117,182,.12);
  transition: box-shadow .3s;
}
.staff-senior-card:hover { box-shadow: 0 12px 48px rgba(46,117,182,.2); }
.staff-senior-photo {
  flex-shrink: 0;
  width: 220px;
}
.staff-senior-photo img {
  width: 100%; aspect-ratio: 3/4;
  object-fit: cover; display: block;
}
.staff-senior-body {
  flex: 1;
  padding: 28px 28px 28px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.staff-senior-role {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.staff-senior-name {
  font-size: 1.5rem; font-weight: 800; color: #1a2a4a; margin: 0 0 12px;
}
.staff-senior-divider {
  width: 40px; height: 3px;
  background: var(--accent); border-radius: 2px;
  margin-bottom: 14px;
}
.staff-senior-verse {
  font-size: .92rem; color: var(--accent); font-style: italic;
  line-height: 1.65; margin: 0 0 14px;
  padding-left: 14px;
  border-left: 3px solid var(--border-color);
}
.staff-senior-intro {
  font-size: .9rem; color: #555; line-height: 1.8; margin: 0;
}

@media (max-width: 700px) {
  .staff-senior-card { flex-direction: column; }
  .staff-senior-photo { width: 100%; }
  .staff-senior-photo img { aspect-ratio: 4/3; }
  .staff-senior-body { padding: 20px; }
}

/* 부교역자 — 그리드 카드 */
.staff-sub-section { margin-top: 12px; }
.staff-sub-title {
  font-size: 1.1rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: 20px; padding-bottom: 10px;
  border-bottom: 2px solid var(--border-color);
}
.staff-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.staff-sub-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 3px 16px rgba(46,117,182,.09);
  padding: 0; transition: box-shadow .25s;
}
.staff-sub-card:hover { box-shadow: 0 8px 28px rgba(46,117,182,.17); }
.staff-sub-photo { flex-shrink: 0; width: 90px; }
.staff-sub-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.staff-sub-body { padding: 14px 14px 14px 0; flex: 1; }
.staff-sub-role {
  font-size: .7rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .08em;
  display: block; margin-bottom: 4px;
}
.staff-sub-name { font-size: 1rem; font-weight: 700; color: #1a2a4a; margin: 0 0 6px; }
.staff-sub-verse { font-size: .78rem; color: #888; font-style: italic; margin: 0 0 6px; line-height: 1.5; }
.staff-sub-intro { font-size: .8rem; color: #666; line-height: 1.65; margin: 0; }

/* 기존 staff-card 클래스 (혹시 다른 곳 참조) */
.staff-card { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 8px 32px rgba(46,117,182,.1); }

.staff-card-photo-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.staff-card-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.staff-card:hover .staff-card-photo-wrap img { transform: scale(1.05); }

.staff-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,20,50,.88), rgba(46,117,182,.4) 60%, transparent);
  display: flex;
  align-items: flex-end;
  padding: 20px 16px;
  opacity: 0;
  transition: opacity .4s;
}
.staff-card:hover .staff-card-overlay { opacity: 1; }
.staff-card-verse {
  color: #e8f0ff;
  font-size: .82rem;
  line-height: 1.6;
  font-style: italic;
}

.staff-card-body { padding: 20px; }
.staff-card-role {
  font-size: .78rem;
  font-weight: 600;
  color: #2E75B6;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 4px;
}
.staff-card-name { font-size: 1.15rem; font-weight: 700; color: #1a2a4a; margin: 0 0 10px; }
.staff-card-divider { width: 32px; height: 2px; background: #2E75B6; border-radius: 2px; margin-bottom: 10px; }
.staff-card-intro { font-size: .88rem; color: #555; line-height: 1.7; margin: 0; }

/* ====================================================
   예배안내 (worship) — 테이블형 컴팩트 레이아웃
   ==================================================== */
.worship-block { padding: 0; }
.worship-block .section-inner { padding-top: 24px; padding-bottom: 8px; }
.worship-block--alt { background: var(--content-bg-alt); }
.worship-block--contact { background: var(--accent-dark); }
.worship-block-title {
  font-size: 1.05rem; font-weight: 800; color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color);
}
.worship-block--alt .worship-block-title { color: var(--text-primary); }

.worship-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 20px;
}
.worship-row {
  display: grid;
  grid-template-columns: 36px 1fr 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background .15s;
}
.worship-row:last-child { border-bottom: none; }
.worship-row:hover { background: #f3f7fd; }
.worship-row--gold   { border-left: 4px solid #f0b429; }
.worship-row--blue   { border-left: 4px solid #2E75B6; }
.worship-row--green  { border-left: 4px solid #27ae60; }
.worship-row--purple { border-left: 4px solid #8e44ad; }
.worship-row-icon  { font-size: 1.2rem; }
.worship-row-name  { font-size: .95rem; font-weight: 700; color: #1a2a4a; }
.worship-row-time  { font-size: .92rem; font-weight: 600; color: var(--accent); }
.worship-row-place { font-size: .85rem; color: #888; }
.worship-row-age   { font-size: .78rem; color: #aaa; font-style: italic; }

@media (max-width: 600px) {
  .worship-row { grid-template-columns: 28px 1fr; row-gap: 2px; padding: 10px 12px; }
  .worship-row-time, .worship-row-place, .worship-row-age { grid-column: 2; font-size: .8rem; }
}

/* 연락처 바 */
.worship-contact-bar {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #1a3a6b, #2E75B6);
  color: #fff; border-radius: 10px;
  padding: 16px 24px; font-size: .92rem;
  margin-bottom: 24px;
}
.worship-contact-icon { font-size: 1.6rem; flex-shrink: 0; }
.worship-contact-bar a { color: #7dd3fc; }

/* 기존 클래스 호환 — 인트라넷 전용 (front-page는 .section-worship .worship-grid 사용) */
.worship-block .worship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:20px; }
.worship-card { border-radius:12px; padding:22px 16px; text-align:center; background:#fff; box-shadow:0 3px 16px rgba(46,117,182,.1); border-top:4px solid transparent; }
.worship-card--gold{border-top-color:#f0b429;} .worship-card--blue{border-top-color:#2E75B6;}
.worship-card--green{border-top-color:#27ae60;} .worship-card--purple{border-top-color:#8e44ad;}
.ministry-section { background: linear-gradient(135deg, #f0f5ff, #e8f0fb); padding: 32px 0; }
.ministry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.ministry-card { background: #fff; border-radius: 12px; padding: 22px 18px; text-align: center; box-shadow: 0 3px 16px rgba(46,117,182,.1); }

/* ====================================================
   오시는길 (location)
   ==================================================== */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: stretch; /* 양쪽 높이 동일 */
}
@media (max-width: 860px) { .location-grid { grid-template-columns: 1fr; } }

.location-map-wrap {
  display: flex;
  flex-direction: column;
}
.location-map-frame {
  border-radius: 16px;
  overflow: hidden;
  flex: 1;          /* 가용 높이 모두 차지 */
  min-height: 420px;
  box-shadow: 0 8px 32px rgba(46,117,182,.18);
}
.location-info-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.btn-map-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  padding: 12px;
  background: #f9e; /* override below */
  background: linear-gradient(135deg, #1a3a6b, #2E75B6);
  color: #fff !important;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: .92rem;
  transition: opacity .2s;
}
.btn-map-link:hover { opacity: .88; }

.location-section-title { font-size: 1rem; font-weight: 700; color: #2E75B6; margin: 28px 0 12px; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.location-address { font-size: 1.2rem; font-weight: 600; color: #1a2a4a; margin: 0 0 4px; text-align: center; }
.location-address-eng { font-size: .88rem; color: #888; margin: 0 0 12px; text-align: center; }
.btn-copy-addr {
  padding: 7px 18px;
  background: #f0f5ff;
  border: 1px solid #c0d4f0;
  border-radius: 6px;
  font-size: .85rem;
  cursor: pointer;
  color: #2E75B6;
  transition: background .2s;
}
.btn-copy-addr:hover { background: #dce8fb; }

.transport-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #eef2f8;
  width: 100%;
  justify-content: center;
}
.transport-icon {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.transport-icon--subway { background: #1a5276; color: #fff; }
.transport-icon--bus    { background: #27ae60; color: #fff; }
.transport-icon--car    { background: #e67e22; color: #fff; }
.transport-detail { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.transport-detail strong { font-size: .95rem; color: #1a2a4a; }
.transport-detail span  { font-size: .85rem; color: #666; }

.contact-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #eef2f8; align-items: center; justify-content: center; }
.contact-label { font-size: .82rem; color: #888; min-width: 70px; text-align: right; }
.contact-value { font-size: .95rem; color: #1a2a4a; font-weight: 500; text-decoration: none; }
a.contact-value:hover { color: #2E75B6; text-decoration: underline; }

/* ====================================================
   공지사항 / 게시판
   ==================================================== */
.inner-page { padding: 0; background: var(--site-bg); }
.board-page-wrap { max-width: 900px; margin: 0 auto; padding: 40px 20px 60px; }
.board-page-header { text-align: center; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 2px solid var(--border-color); }
.board-page-title { font-size: 2rem; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.board-page-desc { color: var(--text-muted-light); font-size: .97rem; margin: 0; }

.notice-list { list-style: none; padding: 0; margin: 0; }
.notice-item { border-bottom: 1px solid #eef2f8; }
.notice-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.notice-link:hover { background: #f5f8ff; }
.notice-num { min-width: 36px; text-align: center; font-size: .85rem; color: #aaa; }
.notice-title { flex: 1; font-size: .97rem; color: #1a2a4a; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-link:hover .notice-title { color: #2E75B6; }
.notice-date { font-size: .82rem; color: #aaa; white-space: nowrap; }
/* 이미지 있는 공지 — 썸네일 */
.notice-item--has-img .notice-link { padding: 12px 8px; align-items: flex-start; }
.notice-thumb { flex-shrink: 0; width: 80px; height: 60px; border-radius: 6px; overflow: hidden; background: #eee; order: -1; }
.notice-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) { .notice-thumb { width: 64px; height: 48px; } }

.board-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.board-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid #d0dcea;
  border-radius: 6px;
  font-size: .88rem;
  color: #555;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.board-pagination .page-numbers:hover,
.board-pagination .page-numbers.current { background: #2E75B6; border-color: #2E75B6; color: #fff; }
.board-empty { text-align: center; padding: 60px 20px; color: #aaa; font-size: 1rem; }

/* ====================================================
   주보 목록 (jubo grid)
   ==================================================== */
.jubo-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
  margin-bottom: 36px;
}
.jubo-card-item { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(46,117,182,.1); transition: transform .3s, box-shadow .3s; background: #fff; }
.jubo-card-item:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(46,117,182,.18); }
.jubo-card-link { display: block; text-decoration: none; color: inherit; }
.jubo-card-thumb { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #eef2f8; }
.jubo-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.jubo-card-item:hover .jubo-card-thumb img { transform: scale(1.05); }
.jubo-no-img { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; color: #c0cfe0; }
.jubo-card-info { padding: 14px 16px; }
.jubo-card-title { font-size: .95rem; font-weight: 600; color: #1a2a4a; margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jubo-card-date { font-size: .8rem; color: #aaa; }
.jubo-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; background: #e0edff; color: #2E75B6; font-size: .72rem; font-weight: 700; border-radius: 4px; }

/* ====================================================
   주보 상세 (jubo single)
   ==================================================== */
.jubo-single-wrap { max-width: 860px; margin: 0 auto; padding: 36px 20px 60px; }
.jubo-single-header { margin-bottom: 28px; }
.jubo-single-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.btn-back { color: #2E75B6; text-decoration: none; font-size: .9rem; display: inline-flex; align-items: center; gap: 4px; }
.btn-back:hover { text-decoration: underline; }
.jubo-pdf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #2E75B6; color: #fff; border-radius: 6px; text-decoration: none; font-size: .88rem; font-weight: 600; transition: opacity .2s; }
.jubo-pdf-btn:hover { opacity: .88; }
.jubo-pdf-btn.large { padding: 12px 24px; font-size: 1rem; }
.jubo-single-title { font-size: 1.6rem; font-weight: 800; color: #1a2a4a; margin: 0 0 6px; }
.jubo-single-date { font-size: .88rem; color: #aaa; display: block; }
.jubo-youtube-wrap { position: relative; aspect-ratio: 16/9; margin-bottom: 28px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.15); }
.jubo-youtube-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.jubo-single-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.jubo-img-item img { width: 100%; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.1); transition: transform .3s; }
.jubo-img-item img:hover { transform: scale(1.02); }
.jubo-single-content { line-height: 1.9; color: #333; }
.jubo-empty-notice { text-align: center; padding: 60px 20px; color: #aaa; }

/* ====================================================
   설교 단독 페이지 (single-sermon)
   ==================================================== */
.sermon-single-wrap {
  max-width: 860px; margin: 0 auto; padding: 32px 20px 64px;
}
.sermon-single-header {
  margin-bottom: 20px;
}
.sermon-single-meta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 12px 0 8px; font-size: .88rem; color: var(--text-muted-light);
}
.sermon-single-bible  { color: var(--accent); font-style: italic; }
.sermon-single-title  { font-size: clamp(1.4rem,3vw,2rem); font-weight: 800; color: var(--text-primary); margin: 0; line-height: 1.3; }

.sermon-single-player { margin-bottom: 28px; }
.sermon-yt-wrap {
  position: relative; aspect-ratio: 16/9;
  border-radius: 12px; overflow: hidden;
  background: #000;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.sermon-yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.sermon-yt-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: .85rem; color: var(--accent); font-weight: 500;
}
.sermon-yt-link:hover { text-decoration: underline; }
.sermon-single-content { margin-bottom: 40px; }
.sermon-single-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border-color); }

/* 관련 설교 */
.sermon-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border-color); }
.sermon-related-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.sermon-related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
}
.sermon-related-card {
  cursor: pointer; border-radius: 10px; overflow: hidden;
  background: var(--content-bg); border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s;
}
.sermon-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sermon-related-thumb {
  position: relative; aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  overflow: hidden;
}
.sermon-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sermon-related-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.22); opacity: 0; transition: opacity .2s;
}
.sermon-related-card:hover .sermon-related-play { opacity: 1; }
.sermon-related-info { padding: 10px 12px; }
.sermon-related-name {
  font-size: .85rem; font-weight: 600; color: var(--text-primary);
  margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sermon-related-date { font-size: .75rem; color: var(--text-muted-light); }

/* 설교 아카이브 카드 — cursor:pointer */
.sermon-archive-card.yt-trigger { cursor: pointer; }
.sermon-archive-card .sermon-archive-link { display: block; text-decoration: none; color: inherit; }

/* ====================================================
   갤러리 홈 — 4×2 소형 그리드 (8개)
   ==================================================== */
.gallery-grid-home {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.gallery-home-item {
  display: block;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 5px;
}
.gallery-home-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.gallery-home-item:hover img { transform: scale(1.08); }
@media (max-width: 600px) {
  .gallery-grid-home { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}

/* ====================================================
   설교 아카이브
   ==================================================== */
.sermon-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 36px;
}
.sermon-archive-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(46,117,182,.1);
  transition: transform .3s, box-shadow .3s;
}
.sermon-archive-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(46,117,182,.18); }
.sermon-archive-link { display: block; text-decoration: none; color: inherit; }
.sermon-archive-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #1a2a4a; }
.sermon-archive-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sermon-archive-card:hover .sermon-archive-thumb img { transform: scale(1.05); }
.sermon-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.25);
  transition: background .3s;
}
.sermon-archive-card:hover .sermon-play-btn { background: rgba(46,117,182,.5); }
.sermon-archive-info { padding: 14px 16px; }
.sermon-archive-title { font-size: .97rem; font-weight: 700; color: #1a2a4a; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sermon-archive-bible { font-size: .8rem; color: #2E75B6; margin-bottom: 6px; }
.sermon-archive-meta { display: flex; justify-content: space-between; font-size: .78rem; color: #aaa; }

/* ====================================================
   다음세대 (nextgen)
   ==================================================== */
.nextgen-hero {
  position: relative;
  /* height: 공통 hero 규칙에서 auto로 통일 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('assets/img/church-bg.jpg') center/cover no-repeat;
  overflow: hidden;
}
.nextgen-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,30,60,.82), rgba(46,117,182,.65));
}
.nextgen-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.nextgen-hero-sub { display:block; font-size:.85rem; letter-spacing:.18em; color:#a8c8f0; margin-bottom:10px; text-transform:uppercase; }
.nextgen-hero-title { font-size: clamp(2rem,5vw,3rem); font-weight:800; margin:0 0 10px; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.nextgen-hero-desc { font-size:.95rem; color:#cde; }

.nextgen-subnav { background: #f0f5ff; border-bottom: 1px solid #d0dcea; position: sticky; top: 64px; z-index: 90; }
.nextgen-subnav-inner { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.nextgen-subnav-item {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: .88rem;
  color: #444;
  text-decoration: none;
  border: 1px solid #c8d8ec;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.nextgen-subnav-item:hover, .nextgen-subnav-item.active {
  background: #2E75B6;
  color: #fff;
  border-color: #2E75B6;
}

.nextgen-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 768px) { .nextgen-detail-grid { grid-template-columns: 1fr; } }

.nextgen-gallery { display: grid; gap: 8px; }
.nextgen-gallery-main img { border-radius: 12px; width: 100%; object-fit: cover; box-shadow: 0 8px 32px rgba(46,117,182,.15); }
.nextgen-gallery-item img { border-radius: 8px; width: 100%; object-fit: cover; }

.nextgen-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px solid;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.nextgen-info-title { font-size: 2rem; font-weight: 800; color: #1a2a4a; margin: 0 0 12px; }
.nextgen-divider { width: 48px; height: 3px; border-radius: 2px; margin-bottom: 16px; }
.nextgen-desc { color: #444; line-height: 1.85; margin-bottom: 24px; }

.nextgen-schedule-box { background: #f5f8ff; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; }
.nextgen-schedule-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e0e8f4; }
.nextgen-schedule-item:last-child { border-bottom: none; }
.nextgen-schedule-label { font-size: .82rem; color: #888; min-width: 60px; font-weight: 600; letter-spacing: .05em; }
.nextgen-schedule-val { font-size: .95rem; color: #1a2a4a; font-weight: 500; }

.nextgen-staff-list { display: flex; flex-direction: column; gap: 8px; }
.nextgen-staff-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f5f8ff; border-radius: 8px; }
.nextgen-staff-role { font-size: .8rem; color: #2E75B6; font-weight: 700; min-width: 56px; }
.nextgen-staff-name { font-size: .95rem; color: #1a2a4a; font-weight: 600; }

.nextgen-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px 0 40px;
}
@media (max-width: 900px) {
  .nextgen-overview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .nextgen-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.nextgen-overview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 14px;
  padding: 24px 16px 18px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(46,117,182,.1);
  text-decoration: none;
  color: inherit;
  transition: transform .3s, box-shadow .3s;
}
.nextgen-overview-card:hover { transform: translateY(-6px); box-shadow: 0 12px 36px rgba(46,117,182,.18); }
.nextgen-overview-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 14px; flex-shrink: 0; }
.nextgen-overview-name { font-size: 1.05rem; font-weight: 700; color: #1a2a4a; margin: 0 0 4px; }
.nextgen-overview-age { font-size: .78rem; color: #888; margin-bottom: 8px; }
.nextgen-overview-time { font-size: .83rem; color: #2E75B6; font-weight: 600; }
.nextgen-overview-place { font-size: .78rem; color: #666; margin-top: 4px; margin-bottom: 10px; }
.nextgen-overview-arrow {
  display: inline-block;
  margin-top: auto;
  padding-top: 8px;
  font-size: 1rem; font-weight: 700;
}

/* 예배안내 - 다음세대 예배 */
.worship-nextgen { background: linear-gradient(135deg, #f0f5ff, #e8f0fb); padding: 60px 0; }
.nextgen-worship-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.nextgen-worship-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(46,117,182,.1);
  transition: transform .3s;
}
.nextgen-worship-card:hover { transform: translateY(-4px); }
.nextgen-worship-icon { font-size: 2rem; margin-bottom: 10px; }
.nextgen-worship-name { font-size: .95rem; font-weight: 700; color: #1a2a4a; margin: 0 0 6px; }
.nextgen-worship-age { font-size: .75rem; color: #2E75B6; font-weight: 600; background: #e0edff; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-bottom: 8px; }
.nextgen-worship-time { font-size: .85rem; color: #555; margin-bottom: 4px; }
.nextgen-worship-place { font-size: .78rem; color: #888; }

/* ====================================================
   갤러리 아카이브 (/gallery/)
   ==================================================== */
.gallery-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}
.gallery-archive-item {
  display: block;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transition: transform .3s, box-shadow .3s;
}
.gallery-archive-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.gallery-archive-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f0f0f0;
}
.gallery-archive-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
  display: block;
}
.gallery-archive-item:hover .gallery-archive-thumb img { transform: scale(1.07); }
.gallery-archive-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
  display: flex; align-items: flex-end; padding: 14px;
  opacity: 0; transition: opacity .3s;
}
.gallery-archive-item:hover .gallery-archive-overlay { opacity: 1; }
.gallery-archive-title {
  color: #fff; font-size: .92rem; font-weight: 600;
  line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
@media (max-width: 600px) {
  .gallery-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ====================================================
   화명성전 페이지
   ==================================================== */
.hwamyeong-hero {
  position: relative;
  /* height: 공통 hero 규칙에서 auto로 통일 */
  background: linear-gradient(135deg, #1a3a6b 0%, #2E75B6 60%, #1a5fa8 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hwamyeong-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('assets/img/hwamyeong-bg.jpg') center/cover no-repeat;
  opacity: .22;
}
.hwamyeong-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,30,70,.55) 0%, rgba(10,30,70,.3) 100%);
}
.hwamyeong-hero-content {
  position: relative; z-index: 2;
  text-align: center; color: #fff;
}
.hwamyeong-hero-sub {
  display: block; font-size: .8rem; letter-spacing: .2em;
  color: #a8d0f8; margin-bottom: 8px; text-transform: uppercase;
}
.hwamyeong-hero-title {
  font-size: clamp(2rem,5vw,3rem); font-weight: 800; margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* padding 단축형 대신 top/bottom만 지정 → section-inner 좌우 패딩 보존 */
.hwamyeong-intro { padding-top: 56px; padding-bottom: 48px; }
.hwamyeong-intro-grid {
  display: grid;
  grid-template-columns: 3fr 2fr; /* 텍스트:정보 = 60:40 비율 */
  gap: 40px;
  align-items: start;
}
/* 태블릿 */
@media (max-width: 900px) {
  .hwamyeong-intro-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* 모바일 */
@media (max-width: 640px) {
  .hwamyeong-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .hwamyeong-intro { padding-top: 36px; padding-bottom: 32px; }
}
.hwamyeong-badge {
  display: inline-block; padding: 5px 16px; border-radius: 20px;
  background: #e8f0fb; color: #2E75B6; font-size: .82rem;
  font-weight: 700; margin-bottom: 14px;
}
.hwamyeong-intro-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 800; color: #1a2a4a; margin: 0 0 12px;
}
.hwamyeong-intro-divider {
  width: 48px; height: 4px; background: #2E75B6; border-radius: 2px; margin-bottom: 18px;
}
.hwamyeong-intro-text p { color: #555; line-height: 1.85; margin-bottom: 12px; font-size: .95rem; }
.hwamyeong-info-box {
  background: #f5f8ff; border-radius: 12px; padding: 24px 20px;
  border-left: 4px solid #2E75B6;
}
.hwamyeong-info-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #e0e8f4;
}
.hwamyeong-info-row:last-child { border-bottom: none; }
.hwamyeong-info-label {
  font-size: .82rem; color: #2E75B6; font-weight: 700;
  min-width: 56px; flex-shrink: 0;
}
.hwamyeong-info-val {
  font-size: .9rem; color: #1a2a4a; font-weight: 500;
  text-decoration: none; word-break: keep-all;
}
a.hwamyeong-info-val:hover { color: #2E75B6; }

.hwamyeong-map-section { padding: 40px 0 60px; }
.hwamyeong-map-wrap { max-width: 800px; margin: 0 auto; }
.hwamyeong-map-wrap .location-map-frame { height: 380px; }
@media (max-width: 640px) {
  .hwamyeong-map-wrap .location-map-frame { height: 260px; }
}

/* ====================================================
   다음세대 소개 비전 섹션
   ==================================================== */
.nextgen-vision-section { padding: 60px 0 40px; }
.nextgen-vision-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.nextgen-vision-title {
  font-size: clamp(1.4rem,3vw,2rem); font-weight: 800;
  color: #1a2a4a; margin-bottom: 16px;
}
.nextgen-vision-desc {
  font-size: .98rem; color: #555; line-height: 1.85; margin-bottom: 36px;
}
.nextgen-vision-stats {
  display: flex; justify-content: center; gap: 36px;
  flex-wrap: wrap;
}
.nv-stat {
  display: flex; flex-direction: column; align-items: center;
  background: #f0f5ff; border-radius: 12px; padding: 18px 28px;
  min-width: 100px;
}
.nv-num { font-size: 2rem; font-weight: 800; color: #2E75B6; line-height: 1; }
.nv-label { font-size: .82rem; color: #666; margin-top: 4px; font-weight: 600; }

/* ====================================================
   TOP 바로가기 버튼 (우측 하단 고정)
   ==================================================== */
#btn-scroll-top {
  position: fixed;
  right: 24px;
  bottom: 28px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 4px 16px rgba(46,117,182,.45);
  z-index: 700;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s, background .2s;
  pointer-events: none;
}
#btn-scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#btn-scroll-top:hover {
  background: var(--accent-dark);
  box-shadow: 0 6px 24px rgba(46,117,182,.6);
  transform: translateY(-2px);
}
#btn-scroll-top svg { display: block; }
#btn-scroll-top span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
@media (max-width: 480px) {
  #btn-scroll-top { right: 14px; width: 62px; height: 62px; }
}

/* ====================================================
   유틸리티
   ==================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ====================================================
   순복음작업실 — 공용 워크샵 페이지 스타일
   ==================================================== */
.workshop-page { background: #f4f6fa; }

/* 히어로 배너 */
.workshop-hero {
  padding: 56px 20px 48px;
  text-align: center;
  color: #fff;
  position: relative;
}
.testimony-hero  { background: linear-gradient(135deg, #1B3A5C 0%, #2E75B6 100%); }
.listen-hero     { background: linear-gradient(135deg, #0d1b2a 0%, #1B3A5C 60%, #2E75B6 100%); }
.wallpaper-hero  { background: linear-gradient(135deg, #1a4a1a 0%, #27ae60 100%); }
.gallery-hero    { background: linear-gradient(135deg, #2d0a5a 0%, #8e44ad 60%, #27ae60 100%); }

.wh-inner { max-width: 720px; margin: 0 auto; }
.wh-badge {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
}
.wh-title { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 10px; line-height: 1.2; }
.wh-sub   { font-size: 1rem; opacity: .85; margin: 0; }

/* 콘텐츠 영역 */
.workshop-content { padding-top: 36px; padding-bottom: 60px; }

/* 말씀 배너 */
.workshop-verse-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #1B3A5C11, #2E75B611);
  border: 1px solid rgba(46,117,182,.2);
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 32px;
}
.wvb-left { font-size: 2rem; flex-shrink: 0; }
.wvb-text { font-size: 1.05rem; font-weight: 700; color: #1B3A5C; margin: 0 0 4px; font-style: italic; }
.wvb-ref  { font-size: .82rem; color: #888; margin: 0; }

/* 2컬럼 레이아웃 */
.workshop-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) {
  .workshop-two-col { grid-template-columns: 1fr; }
}

/* 카드 */
.workshop-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  border: 1px solid #e5e7eb;
}
.wc-title { font-size: 1.1rem; font-weight: 700; color: #1B3A5C; margin: 0 0 8px; }
.wc-desc  { font-size: .88rem; color: #666; line-height: 1.7; margin: 0 0 20px; }

/* 폼 요소 */
.workshop-form { margin-top: 8px; }
.wf-group  { margin-bottom: 16px; }
.wf-label  { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.wf-req    { color: #e74c3c; }
.wf-hint   { font-size: 11px; color: #aaa; font-weight: 400; margin-left: 4px; }
.wf-input  { width: 100%; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 14px; color: #222; transition: border-color .2s; }
.wf-input:focus  { outline: none; border-color: #2E75B6; box-shadow: 0 0 0 3px rgba(46,117,182,.12); }
.wf-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 14px; color: #222; resize: vertical; transition: border-color .2s; line-height: 1.7; }
.wf-textarea:focus { outline: none; border-color: #2E75B6; box-shadow: 0 0 0 3px rgba(46,117,182,.12); }
.wf-submit {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #1B3A5C, #2E75B6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  text-decoration: none;
  text-align: center;
}
.wf-submit:hover   { opacity: .92; transform: translateY(-1px); }
.wf-submit:active  { transform: none; }
.wf-check-btn {
  padding: 10px 18px;
  background: #2E75B6;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.wf-check-btn:hover { background: #1a5fa8; }

/* 메시지 */
.wf-msg          { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-top: 12px; }
.wf-msg-success  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.wf-msg-error    { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* 스타일 선택 박스 */
.wf-style-box {
  background: #f5f8ff;
  border: 1px solid #d0dcf0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.wf-style-title {
  font-size: 13px;
  font-weight: 700;
  color: #1B3A5C;
  margin-bottom: 14px;
}
.wf-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) { .wf-style-grid { grid-template-columns: 1fr; } }
.wf-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 4px;
}
.wf-radio-wrap { gap: 6px 10px; }
.wf-radio-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}
.wf-radio-label input[type="radio"] { accent-color: #2E75B6; }
.wsr-style-tags {
  font-size: 12px;
  color: #2E75B6;
  margin-bottom: 6px;
  font-weight: 600;
}

/* 상태 조회 결과 */
.wf-status-result { margin-top: 14px; }
.wsr-loading { text-align: center; color: #aaa; padding: 20px; font-size: 13px; }
.wsr-empty   { text-align: center; color: #888; padding: 24px 16px; font-size: 13px; }
.wsr-item    { background: #f8faff; border: 1px solid #dce8f5; border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.wsr-header  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.wsr-name    { font-weight: 700; font-size: 14px; color: #1B3A5C; }
.wsr-date    { font-size: 11px; color: #aaa; }
.wsr-badge   { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.wsr-content { font-size: 13px; color: #555; margin-bottom: 8px; line-height: 1.6; }
.wsr-reply   { font-size: 13px; color: #2E75B6; font-style: italic; margin-bottom: 8px; }
.wsr-yt-btn  { display: inline-block; padding: 7px 16px; background: #2E75B6; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }
.wsr-yt-btn:hover { background: #1a5fa8; }
.wsr-wp-preview { margin-top: 8px; }

/* 상태 안내 */
.wf-status-guide { margin-top: 20px; background: #fafbfc; border-radius: 8px; padding: 14px; }
.wsg-item    { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.wsg-dot     { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wsg-label   { font-weight: 700; min-width: 60px; color: #333; }
.wsg-desc    { color: #777; }

/* 간증음악 듣기 링크 */
.wf-listen-link {
  font-size: 14px;
  font-weight: 600;
  color: #2E75B6;
  text-decoration: none;
}
.wf-listen-link:hover { text-decoration: underline; }

/* 성경구절 예시 박스 */
.wf-sample-verse {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #166534;
}
.wf-sample-verse strong { display: block; margin-bottom: 6px; }
.wf-sample-verse ul { margin: 0; padding-left: 16px; line-height: 2; }

/* ── 간증음악 듣기 그리드 ── */
.listen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}
.listen-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  border: 1px solid #e5e7eb;
  transition: transform .3s, box-shadow .3s;
}
.listen-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.listen-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #1a2a4a;
  cursor: pointer;
}
.listen-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.listen-card:hover .listen-thumb img { transform: scale(1.05); }
.listen-thumb-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; background: linear-gradient(135deg,#1B3A5C,#2E75B6); }
.listen-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.2);
  transition: background .3s;
}
.listen-card:hover .listen-play-overlay { background: rgba(46,117,182,.45); }
.listen-info     { padding: 16px 18px; }
.listen-name     { font-size: .95rem; font-weight: 700; color: #1B3A5C; margin: 0 0 6px; }
.listen-excerpt  { font-size: .82rem; color: #666; line-height: 1.6; margin: 0 0 8px; }
.listen-reply    { font-size: .82rem; color: #2E75B6; font-style: italic; margin: 0 0 10px; }
.listen-actions  { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.listen-yt-btn {
  display: inline-block; padding: 7px 14px;
  background: #2E75B6; color: #fff;
  border-radius: 6px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.listen-yt-btn:hover { background: #1a5fa8; }
.listen-date { font-size: 11px; color: #aaa; }

/* 비어있음 + CTA 바 */
.listen-empty {
  text-align: center; padding: 60px 20px;
}
.le-icon { font-size: 3.5rem; margin-bottom: 12px; }
.le-text  { font-size: 1.1rem; font-weight: 600; color: #444; margin: 0 0 6px; }
.le-sub   { font-size: .88rem; color: #888; margin: 0 0 20px; }
.le-cta   { display: inline-block; padding: 12px 28px; background: #2E75B6; color: #fff; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; }
.le-cta:hover { background: #1a5fa8; }

.listen-cta-bar {
  text-align: center;
  background: linear-gradient(135deg, #1B3A5C, #2E75B6);
  border-radius: 14px;
  padding: 28px 20px;
  margin-top: 36px;
  color: #fff;
}
.listen-cta-bar p { font-size: 1.05rem; font-weight: 600; margin: 0 0 16px; }

/* ── 배경화면 갤러리 ── */
.wp-download-guide {
  text-align: center;
  font-size: 13px;
  color: #888;
  background: #f8f9fb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 24px;
}

.wallpaper-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.wp-gal-item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.07); border: 1px solid #e5e7eb; transition: transform .3s, box-shadow .3s; }
.wp-gal-item:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.wp-gal-link { display: block; text-decoration: none; }
.wp-gal-thumb { position: relative; aspect-ratio: 9/16; overflow: hidden; background: linear-gradient(135deg,#8e44ad,#27ae60); }
.wp-gal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.wp-gal-item:hover .wp-gal-thumb img { transform: scale(1.05); }
.wp-gal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.0); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: background .3s; }
.wp-gal-item:hover .wp-gal-overlay { background: rgba(0,0,0,.45); }
.wp-dl-icon { font-size: 2rem; color: #fff; opacity: 0; transition: opacity .3s; }
.wp-dl-text { font-size: 13px; font-weight: 700; color: #fff; opacity: 0; transition: opacity .3s; }
.wp-gal-item:hover .wp-dl-icon,
.wp-gal-item:hover .wp-dl-text { opacity: 1; }
.wp-gal-info { padding: 12px 14px; }
.wp-gal-name  { font-size: .88rem; font-weight: 700; color: #1B3A5C; margin: 0 0 4px; }
.wp-gal-verse { font-size: .78rem; color: #666; line-height: 1.5; margin: 0 0 6px; }
.wp-gal-reply { font-size: .78rem; color: #27ae60; font-style: italic; margin: 0 0 8px; }
.wp-dl-btn {
  display: inline-block; padding: 6px 14px;
  background: #27ae60; color: #fff;
  border-radius: 6px; font-size: 12px; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.wp-dl-btn:hover { background: #1a8a4a; }

/* ── 홈 프로모 배너 ── */
.section-workshop-promo {
  background: linear-gradient(135deg, #1B3A5C 0%, #0d1b2a 100%);
  padding: 0;
  overflow: hidden;
}
.swp-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.swp-card {
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .2s;
  text-decoration: none;
  color: inherit;
}
.swp-card:last-child { border-right: none; }
.swp-card:hover { background: rgba(255,255,255,.05); }
.swp-icon  { font-size: 2.2rem; }
.swp-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.swp-title { font-size: 1.55rem; font-weight: 900; color: #FFD97D; line-height: 1.25; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.swp-desc  { font-size: .82rem; color: rgba(255,255,255,.65); line-height: 1.6; margin: 0; }
.swp-verse { font-size: .78rem; color: rgba(255,255,255,.4); font-style: italic; margin: 0; }
.swp-cta   { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); color: #fff; width: fit-content; transition: background .15s, border-color .15s; }
.swp-cta:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); }
.swp-card.testimony-card .swp-cta { background: rgba(46,117,182,.3); border-color: rgba(46,117,182,.5); }
.swp-card.wallpaper-card .swp-cta { background: rgba(39,174,96,.3); border-color: rgba(39,174,96,.5); }

@media (max-width: 640px) {
  .swp-inner { grid-template-columns: 1fr; }
  .swp-card  { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding: 28px 20px; }
  .swp-card:last-child { border-bottom: none; }
  .swp-title { font-size: 1.25rem; }
  .wallpaper-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ====================================================
   순복음작업실 서비스 CTA 상단 카드 2개
   ==================================================== */
.workshop-svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.workshop-svc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
  border: 2px solid transparent;
}
.workshop-svc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.wsvc-testimony  { background: linear-gradient(135deg,#eef4ff,#ddeaff); border-color: #c4d8f8; }
.wsvc-wallpaper  { background: linear-gradient(135deg,#edfaf3,#d4f2e4); border-color: #b4e6ce; }
.wsvc-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.wsvc-body { flex: 1; min-width: 0; }
.wsvc-title {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: #1a2a4a;
  margin-bottom: 4px;
}
.wsvc-desc {
  display: block;
  font-size: .76rem;
  color: #5a7a9a;
  line-height: 1.4;
}
.wsvc-arrow {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2E75B6;
  flex-shrink: 0;
  transition: transform .2s;
}
.workshop-svc-card:hover .wsvc-arrow { transform: translateX(4px); }

@media (max-width: 600px) {
  .workshop-svc-row { grid-template-columns: 1fr; gap: 10px; }
  .workshop-svc-card { padding: 14px 16px; }
  .wsvc-icon { font-size: 1.6rem; }
  .wsvc-title { font-size: .88rem; }
}

/* ====================================================
   간증음악 바로 듣기 — 다크배경 (하단 프로모배너와 통합)
   ==================================================== */
.section-music {
  padding: 6px 0 4px;
}
.section-music .section-title { color: #fff; }
.section-music .section-more  { color: rgba(255,255,255,.65); }
.section-music .section-more:hover { color: #fff; }

/* 4열 레이아웃 */
.section-music-4col {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.8fr 0.8fr;
  gap: 0;
  align-items: stretch;
}
.section-music-col {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.1);
  min-width: 0; /* 컨텐츠가 컬럼 너비를 밀어내지 않도록 */
  width: 100%;
}
/* 각 열 안 음악카드: 1열 스택 */
.music-grid-1col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.music-grid-1col .music-card { width: 100%; }
.music-grid-1col .music-card .music-thumb { aspect-ratio: 16/9; }
.music-grid-1col .music-card .music-title { font-size: .78rem; }
.music-grid-1col .music-card .music-date  { font-size: .70rem; }

/* 홈 음악 섹션 하단 버튼 */
.home-music-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
}
.home-music-btn:hover { opacity: .8; }
.home-music-btn--story {
  background: rgba(142,68,173,.18);
  border: 1px solid rgba(142,68,173,.5);
  color: #c39bd3;
}
.home-music-btn--yt {
  background: rgba(231,76,60,.18);
  border: 1px solid rgba(231,76,60,.5);
  color: #f1948a;
}

/* 3열/4열: swp-card 스타일 조정 */
.section-music-4col .swp-card {
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 28px 24px;
}
.section-music-4col .swp-card:last-child { border-right: none; }

@media (max-width: 900px) {
  .section-music-4col { grid-template-columns: 1fr 1fr; }
  .section-music-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
}
@media (max-width: 600px) {
  .section-music-4col { grid-template-columns: 1fr; }
}

/* 빈 상태 — 컴팩트하게 */
.music-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.45);
  font-size: .85rem;
  min-height: 120px;
  text-align: center;
  grid-column: 1 / -1;
}
.music-empty-icon { font-size: 1.8rem; }
.music-empty-wrap p  { margin: 0; color: rgba(255,255,255,.4); }
.music-empty-link {
  color: #7eb3e8;
  font-weight: 600;
  font-size: .82rem;
  text-decoration: none;
}
.music-empty-link:hover { color: #aed4ff; text-decoration: underline; }

/* 프로모 배너와 경계 제거 — 위쪽 구분선·패딩 없앰 */
.section-workshop-promo { margin-top: 0; border-top: none; }

/* ====================================================
   swp 프로모 제목 강조 (보색: 골드/앰버)
   ==================================================== */
.music-shortcut-split {
  display: grid;
  grid-template-columns: 1fr 300px;  /* 바로가기 카드 넓힘 */
  gap: 28px;
  align-items: stretch;              /* 양쪽 같은 높이로 */
}
/* 간증음악 그리드: 4열, 추천설교 카드와 유사한 비율 */
.music-grid-sm {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}
.music-grid-sm .music-card { height: 100%; }
.music-grid-sm .music-card .music-thumb { aspect-ratio: 16/9; }
.music-grid-sm .music-card .music-title { font-size: .76rem; }
.music-grid-sm .music-card .music-date  { font-size: .68rem; }

/* 빈 상태: 추천설교 높이와 맞추기 위해 flex 높이 채움 */
.music-shortcut-left {
  display: flex;
  flex-direction: column;
}
.music-shortcut-left .music-grid-sm {
  flex: 1;
}
.music-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #aaa;
  font-size: .85rem;
  min-height: 160px;
  text-align: center;
  grid-column: 1 / -1;
}
.music-empty-icon { font-size: 2rem; }
.music-empty-wrap p { margin: 0; color: #999; }
.music-empty-link {
  color: #2E75B6;
  font-weight: 600;
  font-size: .82rem;
  text-decoration: none;
}
.music-empty-link:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .music-shortcut-split { grid-template-columns: 1fr 260px; }
  .music-grid-sm { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
  .music-shortcut-split { grid-template-columns: 1fr; gap: 16px; }
  .music-grid-sm { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ====================================================
   PWA 안내 카드
   ==================================================== */
.pwa-guide-card {
  background: linear-gradient(160deg, #1B3A5C 0%, #2E75B6 100%);
  border-radius: 14px;
  padding: 20px 18px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 6px 20px rgba(27,58,92,.22);
  height: 100%;
  box-sizing: border-box;
}
.pwa-guide-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pwa-guide-emoji {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.pwa-guide-headline {
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 2px;
}
.pwa-guide-sub {
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  margin: 0;
}
.pwa-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pwa-guide-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
}
.pwa-guide-os-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
}
.pwa-guide-item strong {
  display: inline;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  margin-right: 4px;
  white-space: nowrap;
}
.pwa-guide-item span {
  font-size: .73rem;
  color: rgba(255,255,255,.75);
  line-height: 1.4;
}
.pwa-guide-item b { color: #fff; }
.pwa-guide-item p { margin: 0; font-size: .73rem; color: rgba(255,255,255,.75); }
.pwa-guide-add-btn {
  display: block;
  width: 100%;
  background: #fff;
  color: #1B3A5C;
  border: none;
  border-radius: 9px;
  padding: 11px 0;
  font-size: .83rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
  letter-spacing: -.01em;
  margin-top: auto;
}
.pwa-guide-add-btn:hover { background: #e8f0fb; transform: translateY(-2px); }
.pwa-guide-add-btn:active { transform: translateY(0); }

/* ====================================================
   PWA 홈 화면 추가 배너 (모바일 전용 상단)
   ==================================================== */
.pwa-banner {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #142d50, #1B3A5C);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 200;
}
.pwa-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 24px;
}
.pwa-banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.pwa-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pwa-banner-title {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  display: block;
}
.pwa-banner-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
  display: none;
}
.pwa-banner-desc b { color: #fff; }
.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pwa-add-btn {
  background: #fff;
  color: #1B3A5C;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
  font-family: inherit;
}
.pwa-add-btn:hover { background: #e8f0fb; transform: translateY(-1px); }
.pwa-add-btn:active { transform: translateY(0); }
.pwa-close-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s, background .15s;
  font-family: inherit;
}
.pwa-close-btn:hover { color: #fff; background: rgba(255,255,255,.12); }

@media (max-width: 600px) {
  .pwa-banner-inner { padding: 10px 16px; gap: 12px; }
  .pwa-banner-icon  { font-size: 1.5rem; }
  .pwa-banner-title { font-size: .85rem; }
  .pwa-banner-desc  { font-size: .76rem; }
  .pwa-add-btn      { padding: 7px 14px; font-size: .8rem; }
}

/* ── FGGC방송국 + 행사및광고 ── */
.section-broadcast { padding: 15px 0 10px; background: #fff; }
.broadcast-events-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }

/* 방송국 */
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bc-card { cursor: pointer; border-radius: 10px; overflow: hidden; background: #0d1b2a; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform .2s, box-shadow .2s; }
.bc-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.bc-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.bc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-thumb-ph { width: 100%; aspect-ratio: 16/9; background: #1a1a2e; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.bc-play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); color: #fff; font-size: 28px; opacity: 0; transition: opacity .2s; }
.bc-card:hover .bc-play-btn { opacity: 1; }
.bc-info { padding: 9px 12px 10px; }
.bc-title { font-size: 12px; font-weight: 600; color: #eee; margin-bottom: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-date { font-size: 11px; color: #888; }

/* 행사및광고 배너 */
.ea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ea-item { border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; display: block; transition: transform .2s, box-shadow .2s; position: relative; }
.ea-item.has-content:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.ea-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ea-text-banner { width: 100%; height: 100%; background: linear-gradient(135deg, #1B3A5C, #2E75B6); display: flex; align-items: center; justify-content: center; padding: 12px; }
.ea-text-title { color: #fff; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.5; word-break: keep-all; }
.ea-empty { background: #fff; border: 2px dashed #e5e7eb; display: flex; align-items: center; justify-content: center; }
.ea-empty-label { font-size: 12px; color: #ccc; }

@media (max-width: 640px) {
  .broadcast-events-wrap { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 540px) {
  .bc-grid { grid-template-columns: 1fr 1fr; }
  .ea-grid { grid-template-columns: 1fr 1fr; }
}

/* ====================================================
   교회자료실 (archive-fggc_resource)
   ==================================================== */

/* 히어로 배너 */
.resource-hero {
  background: linear-gradient(135deg, #1B3A5C 0%, #2E75B6 100%);
  padding: 48px 0 40px;
}
.resource-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  color: #fff;
}
.resource-hero-title {
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 8px;
  letter-spacing: -.02em;
}
.resource-hero-sub {
  font-size: .95rem;
  color: rgba(255,255,255,.8);
  margin: 0;
}

/* 본문 래퍼 */
.resource-wrap {
  padding-top: 32px;
  padding-bottom: 60px;
}

/* 카테고리 탭 */
.resource-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0;
}
.resource-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: .88rem;
  font-weight: 600;
  color: #666;
  text-decoration: none;
  border-radius: 6px 6px 0 0;
  transition: color .2s, background .2s;
  margin-bottom: -2px;
  border: 2px solid transparent;
}
.resource-tab:hover { color: var(--accent); }
.resource-tab.active {
  color: var(--accent);
  background: #fff;
  border-color: #e5e7eb #e5e7eb #fff;
}
.resource-tab-count {
  font-size: .75rem;
  background: #e5e7eb;
  color: #888;
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 700;
}
.resource-tab.active .resource-tab-count {
  background: var(--accent);
  color: #fff;
}

/* 카드 그리드 */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* 개별 카드 */
.resource-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .25s, transform .2s;
  display: flex;
  flex-direction: column;
}
.resource-card:hover {
  box-shadow: 0 8px 28px rgba(46,117,182,.15);
  transform: translateY(-3px);
}

/* 썸네일 영역 */
.resource-card-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f5f7fa;
  flex-shrink: 0;
}
.resource-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.resource-card:hover .resource-card-thumb img { transform: scale(1.04); }
.resource-card-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
}

/* 카테고리 뱃지 */
.resource-cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* 카드 바디 */
.resource-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.resource-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resource-card-desc {
  font-size: .8rem;
  color: #888;
  margin: 0;
  line-height: 1.5;
}

/* 메타 정보 (파일 형식·크기·다운로드 수) */
.resource-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}
.resource-ext {
  font-size: .7rem;
  font-weight: 800;
  background: #f0f4f8;
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: .06em;
}
.resource-size,
.resource-dl-count {
  font-size: .75rem;
  color: #999;
}

/* 다운로드 버튼 */
.resource-dl-btn {
  display: block;
  margin-top: 10px;
  padding: 9px 0;
  text-align: center;
  background: var(--accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background .2s, transform .15s;
  letter-spacing: .02em;
}
.resource-dl-btn:hover {
  background: var(--accent-dark, #1a5fa0);
  color: #fff;
  transform: scale(1.02);
}

/* 페이징 */
.resource-pagination {
  margin-top: 40px;
  text-align: center;
}
.resource-pagination .page-numbers {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 2px;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: .9rem;
  transition: all .2s;
}
.resource-pagination .page-numbers.current,
.resource-pagination .page-numbers:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 빈 상태 */
.resource-empty {
  text-align: center;
  padding: 80px 0;
  color: #bbb;
}
.resource-empty-icon { font-size: 4rem; margin-bottom: 12px; }

/* 반응형 */
@media (max-width: 768px) {
  .resource-hero { padding: 32px 0 28px; }
  .resource-hero-title { font-size: 1.5rem; }
  .resource-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .resource-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .resource-card-body { padding: 10px 12px 12px; }
  .resource-dl-btn { font-size: .8rem; padding: 8px 0; }
}

/* ── 자료실 카드: 클릭 가능 오버레이 ── */
.resource-card-clickable { cursor: pointer; }
.resource-card-title.resource-card-clickable:hover { color: var(--accent); text-decoration: underline; }
.resource-card-desc.resource-card-clickable:hover  { color: var(--accent); }

.resource-card-thumb { position: relative; }
.resource-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27,58,92,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
  border-radius: 0;
}
.resource-card-thumb.resource-card-clickable:hover .resource-card-overlay { opacity: 1; }
.resource-card-overlay span {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: 6px 14px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 20px;
  letter-spacing: .04em;
}

/* ── 자료 상세 모달 ── */
.res-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.res-modal-overlay.open { display: flex; }

.res-modal-wrap {
  background: #fff;
  border-radius: 16px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: resModalIn .25s cubic-bezier(.22,1,.36,1);
}
@keyframes resModalIn {
  from { opacity: 0; transform: scale(.95) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.res-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #555;
  transition: background .15s;
  z-index: 1;
}
.res-modal-close:hover { background: #e0e0e0; color: #c00; }

.res-modal-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 300px;
}

.res-modal-left {
  background: #f5f7fa;
  border-radius: 16px 0 0 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.res-modal-left img { width: 100%; height: 100%; object-fit: contain; display: block; }
.res-modal-icon { font-size: 5rem; }

.res-modal-right {
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.res-modal-cat {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.res-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #111;
  line-height: 1.35;
  margin: 0;
}
.res-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.res-modal-desc {
  font-size: .92rem;
  color: #555;
  line-height: 1.75;
  white-space: pre-wrap;
  flex: 1;
  min-height: 40px;
}
.res-modal-dl-btn {
  display: block;
  margin-top: auto;
  padding: 12px 0;
  text-align: center;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s;
  letter-spacing: .02em;
}
.res-modal-dl-btn:hover { background: var(--accent-dark, #1a5fa0); color: #fff; }

/* 모달 반응형 */
@media (max-width: 600px) {
  .res-modal-inner { grid-template-columns: 1fr; }
  .res-modal-left { border-radius: 16px 16px 0 0; min-height: 200px; }
  .res-modal-right { padding: 20px 18px; }
  .res-modal-title { font-size: 1.05rem; }
}

/* ====================================================
   중요알림 섹션
   ==================================================== */
.section-alert {
  background: var(--content-bg);
  padding: 1px 0;
  position: relative;
  overflow: hidden;
}
.alert-inner { position: relative; z-index: 1; }

/* 그리드 */
.alert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.alert-grid--single {
  grid-template-columns: 1fr;
  max-width: 640px;
}

/* alert-inner: section-inner의 40px 패딩 덮어쓰기 */
.alert-inner { padding-top: 10px !important; padding-bottom: 36px !important; }

/* 카드 */
.alert-card {
  display: flex;
  gap: 0;
  background: linear-gradient(135deg, #0b1a2e 0%, #13253f 40%, #0e2040 70%, #091525 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid #e53e3e;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.alert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.alert-card-thumb {
  flex: 0 0 auto;
  width: 90px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.alert-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.alert-card:hover .alert-card-thumb img {
  transform: scale(1.05);
}
.alert-card-body {
  flex: 1;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.alert-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-card-new {
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
  background: rgba(251,191,36,0.15);
  border: 1px solid rgba(251,191,36,0.35);
  padding: 2px 9px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  animation: new-glow 2s ease-in-out infinite;
}
@keyframes new-glow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 8px rgba(251,191,36,0.5); }
}
.alert-card-date {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}
.alert-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
}
.alert-card-excerpt {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.alert-card-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #fc8181;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: auto;
  transition: gap 0.2s;
}
.alert-card:hover .alert-card-more { gap: 8px; }

/* 반응형 */
@media (max-width: 768px) {
  .alert-grid { grid-template-columns: 1fr; gap: 8px; }
  .alert-grid--single { max-width: 100%; }
  .section-alert { padding: 1px 0; }
}
@media (max-width: 480px) {
  .alert-card-thumb { width: 72px; }
  .alert-card-body { padding: 7px 12px; gap: 2px; }
  .alert-card-title { font-size: 0.88rem; }
  .alert-card-excerpt { display: none; }
}