/* ============================================================
   구파발교회 메인 리뉴얼 — 통합 스타일 (layout.main_temp.css)
   ※ 기존 layout.main.css 뒤에 로드되어 덮어씀. 새 마크업은 <div id="gpb-main"> 래퍼
============================================================ */

:root {
  --color-primary: #1B2D50;
  --color-gold: #C9A84C;
  --color-bg: #FFFFFF;
  --color-bg-gray: #F7F7F7;
  --color-text: #333333;
  --color-text-sub: #888888;
  --color-border: #E5E5E5;
  --font-main: 'Pretendard', 'Noto Sans KR', sans-serif;
  --radius-card: 12px;
  --radius-btn: 6px;
  --transition: 0.3s ease;
}

/* ===== 래퍼 스코프 / 컨테이너 1340 보정 ===== */
#gpb-main { width:100%; margin:0 auto; overflow:hidden; font-family:var(--font-main); color:var(--color-text); font-size:16px; }
#gpb-main * { -webkit-box-sizing:border-box; box-sizing:border-box; }
#gpb-main img { max-width:100%; }
#gpb-main .container { width:auto; max-width:1340px; margin:0 auto; padding-left:15px; padding-right:15px; }
#gpb-main h2, #gpb-main h3, #gpb-main p, #gpb-main ul, #gpb-main li { margin:0; padding:0 0 0px 0; list-style:none; }

/* ===== 히어로: 기존 dimode 슬라이더 위젯 restyle =====
   ※ 이 사이트 히어로는 imgType=background (텍스트가 이미지에 포함).
     → 텍스트를 가리지 않도록 풀 딤 대신 '하단 그라데이션'만 사용(dot 가독성용).
     [선택] 사진만 있는 이미지라 전체를 살짝 어둡게 하고 싶으면
     아래 .slide:before 의 background 를 rgba(0,0,0,0.25) 로 바꾸세요. */
.dimode-slider { position:relative; }
.dimode-slider .slide { position:relative; }
/* 하단 그라데이션 (dot/화살표 가독성) */
.dimode-slider .slide:after { content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); pointer-events:none; z-index:1; }
/* [선택] 전체 딤 (기본 꺼짐) */
.dimode-slider .slide:before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0); pointer-events:none; z-index:1; }

/* 좌우 화살표 — 아이콘만 (원형 배경/테두리 없음) */
.dimode-slider .move-btn { position:absolute; top:50%; z-index:5; -webkit-box-sizing:border-box; box-sizing:border-box; width:54px !important; height:54px !important; margin-top:-27px; padding:0 !important; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; color:#fff; font-size:34px; line-height:1; background:transparent; border:0; border-radius:0; cursor:pointer; text-shadow:0 1px 6px rgba(0,0,0,0.45); -webkit-transition:var(--transition); transition:var(--transition); -webkit-appearance:none; appearance:none; }
.dimode-slider .move-btn:hover { color:var(--color-gold); background:transparent; }
.dimode-slider .prev-btn { left:30px; right:auto; }
.dimode-slider .next-btn { right:30px; left:auto; }
/* 모바일에서는 좌우 화살표 축소 */
@media (max-width:767px){
  .dimode-slider .move-btn { width:40px !important; height:40px !important; margin-top:-20px; font-size:26px; }
  .dimode-slider .prev-btn { left:12px; }
  .dimode-slider .next-btn { right:12px; }
}

/* 하단 '아래로' 스크롤 화살표(바운스) */
.dimode-slider .gpb-hero-scroll { position:absolute; left:50%; bottom:64px; z-index:6; -webkit-transform:translateX(-50%); transform:translateX(-50%); -webkit-box-sizing:border-box; box-sizing:border-box; width:46px; height:46px; padding:0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; color:#fff; font-size:24px; line-height:1; background:transparent; border:0; cursor:pointer; -webkit-appearance:none; appearance:none; opacity:0.9; -webkit-animation:gpbHeroDown 1.8s infinite; animation:gpbHeroDown 1.8s infinite; }
.dimode-slider .gpb-hero-scroll:hover { color:var(--color-gold); opacity:1; }
@media (max-width:767px){ .dimode-slider .gpb-hero-scroll { bottom:46px; width:38px; height:38px; font-size:20px; } }
@-webkit-keyframes gpbHeroDown { 0%,100%{ -webkit-transform:translateX(-50%) translateY(0);} 50%{ -webkit-transform:translateX(-50%) translateY(9px);} }
@keyframes gpbHeroDown { 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(9px);} }

/* ===== [추가] 히어로 텍스트 오버레이 / 배경 영상 =====
   슬라이드 확장필드(heroVerse/heroTitle/heroBtnText/heroBtnLink/heroVideo)에
   값이 있을 때만 cshtml이 아래 요소를 출력합니다. 값이 없으면 기존 이미지 그대로. */

/* 모든 슬라이드 높이 통일 — 50vw (요청)
   ※ height !important : 위젯 JS가 인라인 height 를 줘도 통일 높이 유지
   ※ 영상 cover 높이(56.25vw)는 그대로 → 50vw 슬라이드를 항상 덮음 */
.dimode-slider .slide { position:relative; overflow:hidden; height:49vw !important; max-height:1080px; }
.dimode-slider .slider-wrapper { height:49vw !important; max-height:1080px; }

/* 첨부 이미지를 배경처럼 꽉 채움(cover). ※ IE11은 object-fit 미지원(가운데 정렬로 폴백)
   ※ !important : 위젯 기본 CSS(.each-img img)가 뒤에 로드돼 덮어쓰는 것을 방지
     (이미지가 안 꽉 차고 아래 여백이 생기던 문제 해결) */
.dimode-slider .slide .each-img { margin:0 !important; padding:0 !important; height:100% !important; }
.dimode-slider .slide .each-img img { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; -o-object-fit:cover; object-fit:cover; object-position:center; display:block; }

/* 배경 유튜브 영상 (heroVideo 있을 때) — 무음·반복·cover.
   슬라이드 높이 44vw < 영상 56.25vw 이므로 세로 항상 덮음 / 가로는 100vw로 덮음 */
.dimode-slider .gpb-herovid { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0; pointer-events:none; background:#000; }
.dimode-slider .gpb-herovid iframe { position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width:100vw; height:56.25vw; min-width:100%; min-height:100%; border:0; }

/* 오버레이 없을 때 슬라이드 전체 클릭 링크 */
.dimode-slider .gpb-hero-fulllink { position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; display:block; }

/* 텍스트가 있을 때 좌측 가독성용 좌→우 딤 (값 있을 때만 .has-cap 부여) */
.dimode-slider .slide.has-cap:before { background:-webkit-linear-gradient(left, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%); background:linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%); z-index:1; }

/* 오버레이 박스 — .container(1340) 기준. 기본 좌측 정렬, heroTextAlign 으로 변경 */
.dimode-slider .gpb-herocap { position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; pointer-events:none; }
.dimode-slider .gpb-herocap__inner { width:100%; max-width:1340px; margin:0 auto; padding:0 30px; color:#fff; text-align:left; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; align-items:flex-start; }
.dimode-slider .gpb-herocap__verse { display:block; font-size:20px; font-weight:500; letter-spacing:0.16em; color:var(--color-gold); margin:0 0 12px; }
.dimode-slider .gpb-herocap__title { font-size:22px; line-height:1.38; font-weight:700; margin:0 0 18px; max-width:760px; text-shadow:0 2px 14px rgba(0,0,0,0.35); word-break:keep-all; }
/* 설명글(긴 텍스트) — 큰제목 아래, 흰색, 줄바꿈 유지, 모바일 숨김 */
.dimode-slider .gpb-herocap__desc { display:none; max-width:680px; margin:0 0 22px; color:#fff; font-size:13px; line-height:1.7; font-weight:400; white-space:pre-line; word-break:keep-all; text-shadow:0 1px 10px rgba(0,0,0,0.35); opacity:0.92; }
.dimode-slider .gpb-herocap__btn { pointer-events:auto; display:inline-block; padding:10px 22px; font-size:13px; font-weight:600; color:#fff; border:1.5px solid rgba(255,255,255,0.85); border-radius:var(--radius-btn); text-decoration:none; -webkit-transition:var(--transition); transition:var(--transition); }
.dimode-slider .gpb-herocap__btn:hover { background:#fff; color:var(--color-primary); }

/* heroTextAlign = left / center / right
   flex column 의 align-items 로 모든 자식(verse/title/btn)을 동일 축에 정렬 +
   title 의 여러 줄 텍스트 정렬을 위해 text-align 도 함께 지정 */
.dimode-slider .gpb-herocap--center .gpb-herocap__inner { text-align:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; }
.dimode-slider .gpb-herocap--right .gpb-herocap__inner { text-align:right; -webkit-box-align:end; -webkit-align-items:flex-end; -ms-flex-align:end; align-items:flex-end; }
/* center/right 일 때는 좌측 딤 대신 전체 약한 딤 */
.dimode-slider .slide.has-cap.gpb-cap-center:before,
.dimode-slider .slide.has-cap.gpb-cap-right:before { background:rgba(0,0,0,0.32); }

/* 텍스트 크기 반응형 (모바일 → 데스크톱 단계적 확대) */
@media (min-width:480px){
  .dimode-slider .gpb-herocap__title { font-size:28px; }
}
@media (min-width:768px){
  .dimode-slider .gpb-herocap__inner { padding:0 40px; }
  .dimode-slider .gpb-herocap__verse { font-size:24px; margin-bottom:16px; }
  .dimode-slider .gpb-herocap__title { font-size:40px; margin-bottom:24px; }
  .dimode-slider .gpb-herocap__desc { display:block; font-size:16px; }  /* 태블릿+ 에서만 노출 */
  .dimode-slider .gpb-herocap__btn { padding:13px 30px; font-size:15px; }
}
@media (min-width:992px){
  .dimode-slider .gpb-herocap__verse { font-size:26px; }
  .dimode-slider .gpb-herocap__title { font-size:50px; }
  .dimode-slider .gpb-herocap__desc { font-size:17px; }
}
@media (min-width:1200px){
  .dimode-slider .gpb-herocap__title { font-size:56px; }
}

.dimode-slider .slider-dots { display:-webkit-box !important; display:-ms-flexbox !important; display:flex !important; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; position:absolute; left:0; right:0; bottom:26px; z-index:5; }
.dimode-slider .slider-dots .each-dot { width:10px; height:10px; margin:0 5px; border-radius:50%; background:rgba(255,255,255,0.6); cursor:pointer; -webkit-transition:var(--transition); transition:var(--transition); }
.dimode-slider .slider-dots .each-dot.active { background:var(--color-gold); width:26px; border-radius:5px; }

/* 위젯 내부 옛 퀵메뉴 숨김 (새 Welcome 퀵메뉴가 대체) */
#gpb-main .quick-menu-background { display:none !important; }

/* ============================================================
   gpb-quicklinks (Welcome/퀵메뉴)
============================================================ */
/* 섹션 래퍼 */
.gpb-quicklinks {
  background: var(--color-bg);
  padding: 50px 0;                 /* 모바일 기본값 (Mobile First) */
}

/* 2단 레이아웃 래퍼 — Flexbox (모바일은 세로 스택) */
.gpb-quicklinks__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* 좌측 인사말 영역 */
.gpb-quicklinks__intro {
  margin-bottom: 36px;             /* 모바일: 메뉴와의 간격 */
}
.gpb-quicklinks__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-gold);
  margin-bottom: 16px;
}
.gpb-quicklinks__heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
  margin: 0 0 18px;
  word-break: keep-all;
}
.gpb-quicklinks__desc {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0 0 24px;
  max-width: 460px;
  word-break: keep-all;
}
/* 인사말 서명 */
.gpb-quicklinks__sign {
  font-size: 14px;
  color: var(--color-text);
}
.gpb-quicklinks__sign strong {
  color: var(--color-primary);
  font-weight: 700;
  margin-left: 4px;
}

/* 우측 퀵메뉴 영역 */
.gpb-quicklinks__menu {
  width: 100%;
}

/* 깍두기 타일 리스트 — 정사각형 5개 가로 (Flexbox) */
.gpb-quicklinks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  /* 격자 외곽선: 상/좌 (나머지는 각 타일 우/하 테두리로 완성) */
  border-top: 2px solid var(--color-border);
  border-left: 2px solid var(--color-border);
}
/* 각 타일 — 5등분(20%) */
.gpb-quicklinks__item {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 20%;
      -ms-flex: 1 0 20%;
          flex: 1 0 20%;
  width: 20%;                       /* [IE11 flex-basis % 버그 보완] */
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}
/* 정사각형 비율 유지 (padding-top:100%) */
.gpb-quicklinks__item:before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* 타일 링크 — 절대 채움 + 아이콘(위) / 라벨(아래) 중앙 정렬 */
.gpb-quicklinks__link {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-quicklinks__link:hover,
.gpb-quicklinks__link:focus,
.gpb-quicklinks__item.is-active .gpb-quicklinks__link {
  text-decoration: none;
  background: var(--color-bg-gray);
}

/* 아이콘 */
.gpb-quicklinks__icon {
  display: block;
  font-size: 26px;
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: 12px;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
/* 퀵메뉴 SVG 아이콘 크기 (라인 아이콘) */
.gpb-quicklinks__icon svg {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
/* 라벨 */
.gpb-quicklinks__text {
  display: block;
  font-size: 13px;                /* 모바일 기본 (작은 칸에 맞춤) */
  font-size: clamp(10px, 2.7vw, 16px);  /* 칸 너비에 따라 유동 조정 */
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  word-break: keep-all;
  white-space: nowrap;            /* '오시는 길' 등 두 줄 방지 */
  -webkit-transition: var(--transition);
          transition: var(--transition);
}

/* hover: 아이콘/라벨 골드 + 아이콘 살짝 떠오름 */
.gpb-quicklinks__link:hover .gpb-quicklinks__icon,
.gpb-quicklinks__link:focus .gpb-quicklinks__icon,
.gpb-quicklinks__item.is-active .gpb-quicklinks__icon {
  color: var(--color-gold);
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.gpb-quicklinks__link:hover .gpb-quicklinks__text,
.gpb-quicklinks__link:focus .gpb-quicklinks__text,
.gpb-quicklinks__item.is-active .gpb-quicklinks__text {
  color: var(--color-gold);
}

/* ----- 안전장치: AOS/전환 미동작 시 강제 노출 (data-aos 제거 방식 폴백) ----- */
.gpb-quicklinks .gpb-quicklinks--shown[data-aos] { opacity: 1; }

/* ============================================================
   반응형 (Mobile First — min-width)
============================================================ */
@media (min-width: 992px) {
  .gpb-quicklinks { padding: 90px 0; }

  /* 데스크톱: 좌우 2단 (좌 인사말 / 우 메뉴) */
  .gpb-quicklinks__layout {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  /* 좌측 42% */
  .gpb-quicklinks__intro {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 42%;
        -ms-flex: 0 0 42%;
            flex: 0 0 42%;
    width: 42%;                    /* [IE11 flex-basis % 버그 보완] */
    padding-right: 56px;
    margin-bottom: 0;
  }
  /* 우측 58% */
  .gpb-quicklinks__menu {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: 58%;                    /* [IE11 보완] */
  }
  .gpb-quicklinks__heading { font-size: 32px; }
  .gpb-quicklinks__icon { font-size: 30px; }   /* 데스크탑: 아이콘 살짝 크게 */
  .gpb-quicklinks__icon svg { width: 44px; height: 44px; }
}

/* ============================================================
   gpb-messages (설교영상)
============================================================ */
/* 섹션 래퍼 */
.gpb-messages {
  background: var(--color-bg-gray);   /* 구분 배경 */
  padding: 50px 0;                    /* 모바일 기본값 */
}

/* ----- 공통 섹션 헤더 (타이틀 좌 + 더보기 우) ----- */
.gpb-section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: 32px;
}
.gpb-section-header__titlebox { }
.gpb-section-header__eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-gold);
  margin-bottom: 8px;
}
.gpb-section-header__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.2;
}
.gpb-section-header__more {
  flex-shrink: 0;
  -ms-flex-negative: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-sub);
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-section-header__more:hover,
.gpb-section-header__more:focus { color: var(--color-gold); text-decoration: none; }
.gpb-section-header__more .fa { margin-left: 4px; font-size: 12px; }

/* ----- 카드 컬럼 간격 ----- */
.gpb-messages__col { margin-bottom: 26px; }
/* 카드 밖 우측 하단 '더보기' */
.gpb-card__more-out {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 10px 2px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-sub);
  text-decoration: none;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-card__more-out .fa { margin-left: 5px; font-size: 13px; }
.gpb-card__more-out:hover,
.gpb-card__more-out:focus { color: var(--color-gold); text-decoration: none; }

/* ----- 설교 카드 ----- */
.gpb-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
  -webkit-transition: -webkit-box-shadow var(--transition), -webkit-transform var(--transition);
          transition: box-shadow var(--transition), transform var(--transition);
}
.gpb-card--sermon:hover {
  -webkit-box-shadow: 0 12px 30px rgba(27,45,80,0.12);
          box-shadow: 0 12px 30px rgba(27,45,80,0.12);
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
}

/* 썸네일 — padding-top 56.25%로 16:9 비율 유지 */
.gpb-card__thumb {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;                /* 16:9 = 9/16 */
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
}

/* 배지 (좌상단 절대위치) */
.gpb-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  padding: 7px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--color-primary);
  border-radius: 4px;
}

/* 재생 버튼 (중앙, 기본 살짝 보이고 hover 시 강조) */
.gpb-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--color-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 22px;
  padding-left: 4px;                  /* 삼각형 시각 보정 */
  cursor: pointer;
  opacity: 0.85;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-card__thumb:hover .gpb-card__play {
  opacity: 1;
  background: var(--color-gold);
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
/* 썸네일 어둡게 오버레이 (hover) */
.gpb-card__thumb:after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(27,45,80,0);
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-card__thumb:hover:after { background: rgba(27,45,80,0.18); }

/* 카드 본문 */
.gpb-card__body { padding: 20px 20px 22px; }
.gpb-card__date {
  font-size: 13px;
  color: var(--color-text-sub);
  margin: 0 0 8px;
}
.gpb-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  margin: 0 0 10px;
  /* 2줄 말줄임 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* [IE11 대응] -webkit-line-clamp 미지원 → max-height + line-height로 2줄 제한
     line-height 1.4 * font-size 18px * 2줄 = 50.4px */
  max-height: 50.4px;
  word-break: keep-all;
}
.gpb-card__speaker {
  font-size: 14px;
  color: var(--color-text);
  margin: 0 0 16px;
}
.gpb-card__speaker .fa { color: var(--color-text-sub); margin-right: 6px; }
.gpb-card__link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gold);
  text-decoration: none;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-card__link:hover,
.gpb-card__link:focus {
  color: var(--color-primary);
  text-decoration: none;
}

/* ============================================================
   YouTube 모달
============================================================ */
.gpb-modal {
  display: none;                      /* 기본 숨김 */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  background: rgba(0,0,0,0.8);
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gpb-modal.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.gpb-modal__dialog {
  position: relative;
  width: 90%;
  max-width: 900px;
}
/* 16:9 반응형 비율 박스 */
.gpb-modal__ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.gpb-modal__ratio iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.gpb-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px; height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 26px;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-modal__close:hover { color: var(--color-gold); }

/* ============================================================
   반응형 (Mobile First — min-width)
============================================================ */
@media (min-width: 768px) {
  .gpb-messages { padding: 80px 0; }
  .gpb-section-header__title { font-size: 38px; }
}
@media (min-width: 992px) {
  .gpb-section-header__title { font-size: 42px; }
}

/* ============================================================
   gpb-nextgen (다음세대)
============================================================ */
/* 섹션 래퍼 */
.gpb-nextgen {
  background: var(--color-bg);
  padding: 50px 0;                 /* 모바일 기본값 */
}

/* 2단 레이아웃 — Flexbox (모바일 세로 스택) */
.gpb-nextgen__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

/* ----- 좌측: 타이틀 블록 (다크 네이비) ----- */
.gpb-nextgen__title-col {
  width: 100%;
  margin-bottom: 24px;
}
.gpb-nextgen__titlebox {
  background: var(--color-primary);
  color: #fff;
  padding: 32px 24px;
  border-radius: var(--radius-card);
}
.gpb-nextgen__en {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.gpb-nextgen__en span { color: var(--color-gold); display: block; }
.gpb-nextgen__kr {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  margin: 0;
  word-break: keep-all;
}

/* ----- 우측: 부서 카드 ----- */
.gpb-nextgen__cards { width: 100%; }

/* 카드 리스트 — 2열 격자 (Flexbox, 모바일에서도 2열 유지) */
.gpb-nextgen__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  border-top: 2px solid var(--color-border);
  border-left: 2px solid var(--color-border);
}
.gpb-nextgen__card {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 50%;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
  width: 50%;                      /* [IE11 flex-basis 보완] */
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}
/* 카드 하단 골드 라인 (기본 0 → 활성/hover 시 차오름) */
.gpb-nextgen__card:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 3px;
  background: var(--color-gold);
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left center;
      -ms-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: -webkit-transform 0.45s ease;
          transition: transform 0.45s ease;
  z-index: 2;
}
.gpb-nextgen__card.is-active:after,
.gpb-nextgen__card:hover:after {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

/* 카드 링크 (카드 전체 클릭 영역) */
.gpb-nextgen__card-link {
  position: relative;
  display: block;
  height: 100%;
  padding: 24px 20px;
  text-decoration: none;
  background: var(--color-bg);
  -webkit-transition: background var(--transition);
          transition: background var(--transition);
}
.gpb-nextgen__card.is-active .gpb-nextgen__card-link,
.gpb-nextgen__card-link:hover,
.gpb-nextgen__card-link:focus {
  background: var(--color-bg-gray);   /* 활성/hover 시 라이트 그레이 */
  text-decoration: none;
}

/* 우상단 부서 배지 */
.gpb-nextgen__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-block;
  padding: 4px 11px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--color-primary);
  border-radius: 4px;
  -webkit-transition: background var(--transition);
          transition: background var(--transition);
}
.gpb-nextgen__card.is-active .gpb-nextgen__badge,
.gpb-nextgen__card:hover .gpb-nextgen__badge {
  background: var(--color-gold);
}

/* 아이콘 (inline SVG) */
.gpb-nextgen__icon {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--color-gold);           /* SVG currentColor */
  margin-bottom: 16px;
}
.gpb-nextgen__icon svg { width: 100%; height: 100%; display: block; }

/* 부서명 / 나이 */
.gpb-nextgen__dept {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 5px;
  padding-right: 56px;             /* 우상단 배지와 겹침 방지 */
}
.gpb-nextgen__age {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gold);
  margin-bottom: 10px;
}
/* 설명 (2줄) */
.gpb-nextgen__cdesc {
  display: none;          /* 모바일 숨김 (데스크톱에서 표시) */
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-sub);
  margin: 0 0 14px;
  word-break: keep-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 42.9px;                 /* [IE11 대체] 13px*1.65*2줄 */
}
/* 자세히보기 */
.gpb-nextgen__more {
  display: none;            /* 모바일 숨김 (데스크톱에서 표시) */
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-nextgen__card-link:hover .gpb-nextgen__more,
.gpb-nextgen__card-link:focus .gpb-nextgen__more {
  color: var(--color-gold);
}

/* 안전장치: AOS/전환 미동작 시 강제 노출 폴백 */
.gpb-nextgen [data-aos].gpb-aos-shown { opacity: 1; }

/* ============================================================
   반응형 (Mobile First — min-width)
============================================================ */
/* 영문/한글 타이틀 반응형 (모바일에서 GENERATION 넓침 방지) */
@media (min-width: 480px) {
  .gpb-nextgen__en { font-size: 40px; }
}
@media (min-width: 768px) {
  .gpb-nextgen__en { font-size: 52px; }   /* 데스크톱 대형 타이틀 */
}

@media (min-width: 992px) {

  .gpb-nextgen { padding: 90px 0; }
  .gpb-nextgen__cdesc { display: -webkit-box; }   /* 데스크톱에서 2줄 설명 표시 */
  .gpb-nextgen__more { display: inline-block; }   /* 데스크톱에서 자세히보기 표시 */

  /* 데스크톱: 풀너비 — 타이틀(상단 배너) + 부서 카드(하단) 세로 스택 유지 */
  .gpb-nextgen__layout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  /* 타이틀: 풀너비 가로 배너 (NEXT GENERATION 좌측 + 한글 우측) */
  .gpb-nextgen__title-col {
    width: 100%;
    margin-bottom: 30px;
    padding-right: 0;
    position: static;
  }
  .gpb-nextgen__titlebox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 40px 50px;
  }
  .gpb-nextgen__en { margin: 0; }
  .gpb-nextgen__en span { display: inline; margin-left: 14px; }
  .gpb-nextgen__kr {
    font-size: 16px;
    text-align: right;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    padding-left: 30px;
  }

  /* 부서 카드: 풀너비 */
  .gpb-nextgen__cards {
    width: 100%;
  }
  /* 데스크톱: 부서 카드 5열 (5×2 = 10개) */
  .gpb-nextgen__card {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 20%;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
    width: 20%;
  }
  .gpb-nextgen__card-link { padding: 24px 16px; }
}

/* ============================================================
   gpb-gallery (갤러리)
============================================================ */
.gpb-gallery {
  background: var(--color-bg);
  padding: 50px 0;                 /* 모바일 기본값 */
}

/* 섹션 헤더 (중앙 정렬) */
.gpb-gallery__head {
  text-align: center;
  margin-bottom: 36px;
}
.gpb-gallery__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-gold);
  margin-bottom: 12px;
}
.gpb-gallery__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

/* 슬라이더 래퍼 (화살표 기준 위치) */
.gpb-gallery__slider {
  position: relative;
}
/* 화살표가 컨테이너 밖으로 나가지 않도록 좌우 여백 확보 */
.gpb-gallery .swiper { padding: 0; }

/* 갤러리 아이템 — 1:1 정사각형 */
.gpb-gallery__item {
  position: relative;
  display: block;                  /* a 태그 inline → block (비율 박스 유지) */
  width: 100%;
  height: 0;
  padding-top: 100%;               /* 1:1 비율 */
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  outline: none;                                  /* 클릭 시 검은 포커스 박스 제거 */
  -webkit-tap-highlight-color: transparent;       /* 모바일 탭 시 검은 하이라이트 제거 */
  background: var(--color-bg-gray);
}
.gpb-gallery__item img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;             /* IE11 미지원 → 이미지 늘어남(허용) */
  -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
}
.gpb-gallery__item:hover img {
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
}

/* hover dim 오버레이 + 돋보기 아이콘 */
.gpb-gallery__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(27, 45, 80, 0.5);
  opacity: 0;                       /* 기본 숨김 */
  -webkit-transition: opacity var(--transition);
          transition: opacity var(--transition);
}
.gpb-gallery__item:hover .gpb-gallery__overlay {
  opacity: 0.7;                     /* hover 시 노출 (0 → 0.7) */
}
.gpb-gallery__zoom {
  width: 44px;
  height: 44px;
  color: #fff;
  opacity: 0;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: opacity var(--transition), -webkit-transform var(--transition);
          transition: opacity var(--transition), transform var(--transition);
}
.gpb-gallery__item:hover .gpb-gallery__zoom {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.gpb-gallery__zoom svg { width: 100%; height: 100%; display: block; }

/* ----- 커스텀 좌우 화살표 (섹션 내부) ----- */
.gpb-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 14px rgba(27,45,80,0.12);
          box-shadow: 0 4px 14px rgba(27,45,80,0.12);
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-gallery__arrow:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.gpb-gallery__arrow--prev { left: -8px; }
.gpb-gallery__arrow--next { right: -8px; }
.gpb-gallery__arrow.swiper-button-disabled { opacity: 0.4; cursor: default; }

/* 안전장치: AOS/전환 미동작 시 강제 노출 폴백 */
.gpb-gallery [data-aos].gpb-aos-shown { opacity: 1; }

/* ============================================================
   라이트박스
============================================================ */
.gpb-lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10000;
  background: rgba(0,0,0,0.92);
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.gpb-lightbox.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.gpb-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  -webkit-box-shadow: 0 10px 40px rgba(0,0,0,0.5);
          box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.gpb-lightbox__close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px; height: 44px;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-lightbox__close:hover { color: var(--color-gold); }
.gpb-lightbox__nav {
  position: absolute;
  top: 50%;
  margin-top: -28px;
  width: 56px; height: 56px;
  font-size: 26px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-lightbox__nav:hover { background: var(--color-gold); border-color: var(--color-gold); }
.gpb-lightbox__nav--prev { left: 20px; }
.gpb-lightbox__nav--next { right: 20px; }

/* ============================================================
   반응형 (Mobile First — min-width)
============================================================ */
@media (min-width: 768px) {
  .gpb-gallery { padding: 80px 0; }
  .gpb-gallery__title { font-size: 32px; }
  .gpb-gallery__arrow--prev { left: -18px; }
  .gpb-gallery__arrow--next { right: -18px; }
}

/* 사진 제목 (게시판 연동 캡션)
   ※ #gpb-main 접두사 — #gpb-main p 리셋(margin:0)보다 우선순위를 높여 간격 적용 */
#gpb-main .gpb-gallery__caption {
  margin: 22px 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 하단 페이지네이션 */
.gpb-gallery .swiper-pagination.gpb-gallery__pagination {
  position: static;
  margin-top: 30px;
}
.gpb-gallery .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #cfd4dd;
  opacity: 1;
  margin: 0 5px !important;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-gallery .swiper-pagination-bullet-active {
  background: var(--color-gold);
  width: 26px;
  border-radius: 5px;
}
/* 라이트박스 사진 제목 */
.gpb-lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 0 70px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* ============================================================
   gpb-edumission (교육과 선교)
============================================================ */
/* 섹션 래퍼 — 다크 네이비 배경 + 은은한 배경이미지 레이어 */
.gpb-edumission {
  position: relative;
  background: var(--color-primary);
  padding: 50px 0;                 /* 모바일 기본값 */
  overflow: hidden;
}
/* 배경이미지 레이어 (은은하게, 네이비 오버레이로 가독성 확보) */
.gpb-edumission__bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.28;
}
/* 네이비 그라데이션 오버레이 (상하 진하게 → 글자 또렴) */
.gpb-edumission__bg:after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(top, rgba(27,45,80,0.65) 0%, rgba(27,45,80,0.45) 50%, rgba(27,45,80,0.7) 100%);
  background: linear-gradient(to bottom, rgba(27,45,80,0.65) 0%, rgba(27,45,80,0.45) 50%, rgba(27,45,80,0.7) 100%);
}
/* 콘텐츠는 배경 위로 */
.gpb-edumission .container { position: relative; z-index: 1; }

/* 섹션 헤더 (중앙 정렬) */
.gpb-edumission__head {
  text-align: center;
  margin-bottom: 40px;
}
.gpb-edumission__eyebrow {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  margin-bottom: 0;
}
.gpb-edumission__title {
  display: none;          /* 한글 '교육과 선교' 숨김 → 영문 라벨이 타이틀 역할 */
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

/* 2블록 그리드 — Flexbox (모바일 세로 1열) */
.gpb-edumission__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 개별 블록 */
.gpb-edumission__block {
  text-align: center;
  width: 100%;
  max-width: 620px;
  margin-bottom: 44px;
}
.gpb-edumission__block:last-child { margin-bottom: 0; }

/* 블록 제목 */
.gpb-edumission__block-title {
  position: relative;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 22px;            /* 아래 바 삭제 → 간격으로 분리감 (제목↔설명 여백) */
}
/* 블록 설명 */
.gpb-edumission__desc {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.82);
  padding: 20px 0;
  margin: 0 auto 28px;
  max-width: 600px;
  word-break: keep-all;
}

/* ----- 카드 그리드 (다음세대 컨셉) ----- */
.gpb-edumission__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 -7px;
}
.gpb-edumission__card {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 140px;
      -ms-flex: 1 1 140px;
          flex: 1 1 140px;
  max-width: 200px;
  padding: 7px;
}
/* 카드 링크 — 반투명 박스 + 골드 테두리, hover 시 골드 채움 */
.gpb-edumission__card-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  padding: 26px 14px 20px;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-edumission__card.is-active .gpb-edumission__card-link,
.gpb-edumission__card-link:hover,
.gpb-edumission__card-link:focus {
  text-decoration: none;
  background: #14223c;                  /* 배경보다 조금 어두운 네이비 */
  border-color: var(--color-gold);
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 14px 26px rgba(0,0,0,0.3);
          box-shadow: 0 14px 26px rgba(0,0,0,0.3);
}
/* 아이콘 (흥색) */
.gpb-edumission__card-ico {
  display: block;
  color: #fff;
  margin-bottom: 14px;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-edumission__card-ico svg { width: 40px; height: 40px; display: block; }
.gpb-edumission__card.is-active .gpb-edumission__card-ico,
.gpb-edumission__card-link:hover .gpb-edumission__card-ico,
.gpb-edumission__card-link:focus .gpb-edumission__card-ico { color: var(--color-gold); }
/* 제목 */
.gpb-edumission__card-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  word-break: keep-all;
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-edumission__card.is-active .gpb-edumission__card-title,
.gpb-edumission__card-link:hover .gpb-edumission__card-title,
.gpb-edumission__card-link:focus .gpb-edumission__card-title { color: var(--color-gold); }
/* 화살표 */
.gpb-edumission__card-arrow {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  color: rgba(201, 168, 76, 0.8);
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-edumission__card.is-active .gpb-edumission__card-arrow,
.gpb-edumission__card-link:hover .gpb-edumission__card-arrow,
.gpb-edumission__card-link:focus .gpb-edumission__card-arrow {
  color: var(--color-gold);
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
}

/* 안전장치: AOS/전환 미동작 시 강제 노출 폴백 */
.gpb-edumission [data-aos].gpb-aos-shown { opacity: 1; }

/* ============================================================
   반응형 (Mobile First — min-width)
============================================================ */
@media (min-width: 992px) {
  .gpb-edumission { padding: 80px 0; }
  .gpb-edumission__head { margin-bottom: 56px; }
  .gpb-edumission__eyebrow { font-size: 30px; }   /* 데스크톱: 영문 라벨 타이틀 크기 */

  /* 데스크톱: 2블록 좌우 배치 (가운데 정렬, 큰 간격) */
  .gpb-edumission__grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .gpb-edumission__block {
    width: auto;
    max-width: none;
    margin: 0 30px;
  }
  .gpb-edumission__block-title { font-size: 34px; }
  /* 데스크톱: 카드 행을 한 줄로 유지 */
  .gpb-edumission__cards {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
  }
  .gpb-edumission__card {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 160px;
    max-width: none;
  }
}

/* ============================================================
   gpb-info (교회정보·예배안내)
============================================================ */
/* 섹션 래퍼 — 다크 네이비 */
.gpb-info {
  background: var(--color-primary);
  color: rgba(255,255,255,0.8);
  padding: 50px 0;                 /* 모바일 기본값 */
}

/* 2단 레이아웃 — 모바일: 지도 → 예배 순서 (column-reverse) */
.gpb-info__layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;        /* column (정상 순서) */
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* ----- 좌측: 예배 안내 ----- */
.gpb-info__worship-col { width: 100%; }
/* 예배 안내 헤더: 타이틀(좌) + 바로가기 버튼(우) 한 줄 */
.gpb-info__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-bottom: 24px;

 
}
.gpb-info__title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

/* 예배 그룹 */
.gpb-info__group { margin-bottom: 28px; }
.gpb-info__group-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-align: center;
  margin: 0 0 16px;
}

/* 예배 시간표 (테이블) */
.gpb-info__table-wrap {
  width: 100%;
  overflow-x: auto;                  /* 모바일 가로 스크롤 보호 */
  -webkit-overflow-scrolling: touch;
   margin-bottom: 30px;             /* 모바일:  아래 간격 */
}
.gpb-info__table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.04);
}
.gpb-info__table th,
.gpb-info__table td {
  text-align: left;
  padding: 14px 18px;
  font-size: 15px;
  white-space: nowrap;
}
.gpb-info__table thead th {
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.gpb-info__table tbody td {
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* 첫 컬럼(예배명) 골드 강조 */
.gpb-info__table tbody td:first-child {
  color: var(--color-gold);
  font-weight: 600;
}
.gpb-info__table tbody td small {
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}
.gpb-info__table tbody tr:hover td {
  background: rgba(201, 168, 76, 0.10);
}

/* 예배안내 바로가기 버튼 (헤더 우측) */
.gpb-info__more-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-btn);
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-info__more-btn .fa { margin-left: 8px; font-size: 13px; }
.gpb-info__more-btn:hover,
.gpb-info__more-btn:focus {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
  text-decoration: none;
}

/* 연락처 */
.gpb-info__contact {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.gpb-info__contact p {
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}
.gpb-info__contact p:last-child { margin-bottom: 0; }
.gpb-info__contact .fa {
  width: 18px;
  margin-right: 10px;
  color: var(--color-gold);
}

/* ----- 우측: 지도 ----- */
.gpb-info__map-col {
  width: 100%;
 
}
.gpb-info__map {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;                 /* 약도 배경 (흰색) */
  border: 1px solid var(--color-border);
}
/* 약도 이미지 (비율 유지, 영역에 맞춤) */
.gpb-info__map-img {
  display: block;
  width: 100%;
  height: auto;
}
/* '오시는 길' 버튼 (약도 우하단) */
.gpb-info__map-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  display: inline-block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-btn);
  text-decoration: none;
  -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.25);
          box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  -webkit-transition: var(--transition);
          transition: var(--transition);
}
.gpb-info__map-btn:hover,
.gpb-info__map-btn:focus {
  background: var(--color-gold);
  color: #fff;
  text-decoration: none;
}
.gpb-info__map-btn .fa { margin-left: 5px; font-size: 12px; }

/* 지하철 안내 */
.gpb-info__subway {
  margin: 16px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}
.gpb-info__subway .fa {
  margin-right: 8px;
  color: var(--color-gold);
}

/* 안전장치: AOS/전환 미동작 시 강제 노출 폴백 */
.gpb-info [data-aos].gpb-aos-shown { opacity: 1; }

/* ============================================================
   반응형 (Mobile First — min-width)
============================================================ */
@media (min-width: 992px) {
  .gpb-info { padding: 80px 0; }

  /* 데스크톱: 좌(예배 60%) + 우(지도 40%) 가로 배치 */
  .gpb-info__layout {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .gpb-info__worship-col {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    width: 50%;                    /* [IE11 flex-basis 보완] */
    padding-right: 40px;
  }
  .gpb-info__map-col {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    width: 50%;
    margin-bottom: 0;
  }
}

/* ============================================
   GNB 스크롤 숨김/표시 인터랙션
   ============================================ */

/* 기존 #top에 transition 추가 (덮어쓰기) */
#top {
    -webkit-transition: -webkit-transform 0.35s ease, opacity 0.35s ease, background-color 0.35s ease;
    -ms-transition: -ms-transform 0.35s ease, opacity 0.35s ease, background-color 0.35s ease;
    transition: transform 0.35s ease, opacity 0.35s ease, background-color 0.35s ease;
    will-change: transform;
}

/* 스크롤 내릴 때 — 위로 숨김 */
#top.gnb-hidden {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none; /* 숨겨진 상태에서 클릭 방지 */
}

/* 스크롤 올릴 때 또는 상단 호버 시 — 나타남 */
#top.gnb-visible {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* 스크롤이 최상단일 때 — 완전 투명 배경 */
#top.gnb-top {
    background-color: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* 스크롤이 내려간 상태 — 흰색 배경 강화 */
#top.gnb-scrolled {
    background-color: rgba(255, 255, 255, 0.97) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* 마우스 상단 감지 트리거 영역 */
#gpb-gnb-trigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px; /* 이 높이 안에 마우스 들어오면 GNB 나타남 */
    z-index: 99;  /* #top(z-index:100) 보다 낮게 */
    pointer-events: auto;
}