@charset "UTF-8";
/* ==========================================================================
   굿네이버스 메인 개편 — main.css (메인 페이지 전용: 헤더 + 몸통 + 푸터)
   운영 소스와 무관한 완전 신규 페이지 스타일. 로드 순서: base → common → main.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [헤더] 공지 띠배너 / 리뉴얼 헤더 / 운영 헤더(#header) 스킨 (Figma 996:8325 · 996:8357 실측)
   띠배너 h61 / 헤더 h124 (유틸바 36 + gap 8 + 메인바 80) / 컨테이너 1440
   -------------------------------------------------------------------------- */
.gnr .gn-notibar {
    position: relative;
    z-index: var(--gn-z-sticky);
    height: var(--gn-banner-h);
    background: var(--gn-olive-500);
    color: var(--gn-white);
}
.gnr .gn-notibar[hidden] { display: none; }
/* 닫기 모션 (8/13) — 위로 접히며 사라짐. 높이까지 같이 줄여 아래 콘텐츠가 자연스럽게 올라온다.
   재생은 마크업 아래 인라인 <script> 가 .is-closing 을 붙여 시작 */
.gnr .gn-notibar {
    overflow: hidden;
    transition: height .38s cubic-bezier(.4, 0, .2, 1),
                opacity .28s linear,
                transform .38s cubic-bezier(.4, 0, .2, 1);
}
.gnr .gn-notibar.is-closing {
    height: 0;
    opacity: 0;
    transform: translateY(-100%);
}
.gnr .gn-notibar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--gn-container);
    margin: 0 auto;
    padding: 0 var(--gn-gutter);
}
.gnr .gn-notibar__link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
/* 8/11 최종 — 배경 pill 이 아니라 흰 아웃라인 pill */
.gnr .gn-notibar__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--gn-r-pill);
    background: transparent;
    font-size: var(--gn-fz-small);
    font-weight: 700;
    line-height: 1;
}
.gnr .gn-notibar__text {
    min-width: 0;
    font-size: var(--gn-fz-body2);
    font-weight: 600;
    line-height: var(--gn-lh-cap);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gnr .gn-notibar__util { flex: none; display: flex; align-items: center; gap: 18px; }
.gnr .gn-notibar__today {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--gn-fz-small);
    line-height: 1;
}
.gnr .gn-notibar__close { flex: none; width: 32px; height: 32px; }
.gnr .gn-notibar__close img { width: 100%; }

/* --- 헤더 --- */
.gnr .gn-header {
    position: relative;
    z-index: var(--gn-z-header);
    padding-top: 12px;                /* 띠배너(61) → 유틸바 사이 여백. 헤더 하단 = 61+12+124 = 197 (8/11 실측) */
    background: var(--gn-white);
    transition: box-shadow var(--gn-dur) var(--gn-ease);
}
/* 0729 피드백 : 메인은 서브와 경계선 없이 이어지게 — 기본 무테, 스크롤 시에만 그림자 */
.gnr .gn-header--flat { border-bottom: 0; }
.gnr .gn-header.is-fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: var(--gn-shadow-sm);
}
.gnr .gn-header__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: var(--gn-container);
    margin: 0 auto;
    padding: 0 var(--gn-gutter);
}

/* 상단 유틸바 (로그인 / 회원가입 / 기부금 영수증) */
.gnr .gn-util {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    height: 36px;
    font-size: 15px;                  /* 8/11 실측 (회원가입 56w = 4자) */
    line-height: 23px;
}
.gnr .gn-util__link { color: rgba(69, 72, 56, .8); }
.gnr .gn-util__link:hover { color: var(--gn-olive-500); }
.gnr .gn-util__sep { width: 1px; height: 14px; background: rgba(0, 0, 0, .1); }
.gnr .gn-util__receipt { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--gn-olive-500); }
/* 내보낸 SVG 가 y 반전 상태(지그재그가 아래로 옴) — 시안대로 위로 되돌림. 치수는 원본 13.5x15 비율 */
.gnr .gn-util__receipt img { width: 14px; height: 15px; transform: scaleY(-1); }

/* 메인바 (로고 / GNB / 우측 액션) */
.gnr .gn-gnbbar { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.gnr .gn-logos { display: flex; align-items: center; }
.gnr .gn-logos__brand { width: 188px; }

.gnr .gn-gnb { display: flex; align-items: center; gap: 64px; height: 100%; }
/* GNB — 운영(as-is) 메가메뉴 이식 (8/13).
   운영 CSS 셀렉터가 전부 `.header …` 스코프라 리뉴얼 헤더에 `header` 클래스를 병기했다.
   그 대가로 따라오는 운영 `.header` 자체 스타일(상단 패딩·올리브 inset 밑선)만 여기서 무력화하고,
   `.menu_wrap` 의 절대좌표(top 112)는 리뉴얼 헤더 높이에 맞춰 보정한다. */
.gnr .gn-header.header {
    /* 운영 .header 의 padding-top:15px 는 위 .gn-header 의 12px(0,2,0 > 0,1,0)가 이긴다.
       종전 padding-top:0 무력화는 시안 갭(띠배너→유틸 12, 996:8357)까지 지워
       헤더 하단이 197 이 아닌 185 가 되고 menu_wrap(top 136)과 12px 틈이 생겼다 (2026-08-25) */
    box-shadow: none;
    line-height: inherit;
}
.gnr .gn-header .gnb { margin-top: 0; }
/* GNB 링크 세로 정렬 — 운영 CSS 상하 패딩이 10px/27px 로 달라 텍스트가 위로 치우쳐 보임 → 세로 중앙 정렬 (합 37px 유지, 8/14 요청) */
.gnr .gn-header .gnb > ul > li > a { padding: 18.5px 32px; }
/* 운영은 헤더 높이 112 기준 — 리뉴얼 헤더는 유틸(36)+갭(8)+메인바(80)+테두리 = 하단 136 */
.gnr .gn-header .menu_wrap { top: 136px; }
/* 흰 배경판(.gnbBg)도 같은 값으로 — 운영은 menu_wrap·gnbBg 둘 다 112px 인데
   여기만 빠뜨리면 호버 시 배경판과 메뉴 내용이 24px 어긋난다 (2026-08-25) */
.gnr .gn-header .gnbBg { top: 136px; }
/* 1depth 링크 바닥(177)과 메가메뉴 상단(197) 사이 20px 틈에서 mouseleave 가 나 패널이 닫혔다.
   원인 둘 — ① 틈에 hover 영역이 없음 ② 메뉴 배경판 .gnbBg 가 그 틈을 덮어 포인터를 가로챔.
   li 에는 position 을 주지 않는다 (운영 .menu_wrap 이 absolute + width:100% 라 기준이 li 로
   바뀌면 패널 폭이 li 폭으로 줄어든다). 브리지는 1depth 링크의 ::before 로 깐다 (8/18 검수) */
.gnr .gn-header .gnbBg { pointer-events: none; }
.gnr .gn-header .gnb > ul > li > a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
}
/* 나의후원 네비 배너 — 운영 slick 대신 Swiper 구동 (8/26, 운영과 동일하게 화살표+도트+자동롤링).
   구 "첫 장만 노출" 폴백(.slide + .slide display:none, 8/18)은 Swiper 전환으로 제거 */
.gnr .gn-header .menu_wrap .slidearea { overflow: visible; }   /* 배너 밖 화살표/도트가 잘리지 않게 */
/* 화살표 — 운영 slick-prev/next 위치(배너 밖 -38) 재현, swiper 기본 화살표 축소 */
.gnr .gn-header .slidearea .swiper-button-prev,
.gnr .gn-header .slidearea .swiper-button-next {
    width: 24px;
    height: 24px;
    --swiper-navigation-size: 16px;
    color: #999;
}
.gnr .gn-header .slidearea .swiper-button-prev:hover,
.gnr .gn-header .slidearea .swiper-button-next:hover { color: var(--gn-gray-800); }
.gnr .gn-header .slidearea .swiper-button-prev { left: -38px; }
.gnr .gn-header .slidearea .swiper-button-next { right: -38px; }
/* 도트 — 운영 slick-dots(bottom -20, active 는 폭 23 pill) 재현 */
.gnr .gn-header .slidearea .swiper-pagination { bottom: -20px; }
.gnr .gn-header .slidearea .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 3px;
    background: #c1c1c1;
    opacity: 1;
    transition: width .3s, background-color .3s;
}
.gnr .gn-header .slidearea .swiper-pagination-bullet-active {
    width: 23px;
    border-radius: 23px;
    background: var(--gn-olive-500);
}
.gnr .gn-header .menu_wrap .navi_slides .slide,
.gnr .gn-header .menu_wrap .navi_slides .slide img { visibility: visible; }   /* 운영은 slick 초기화가 풀어준다 */
/* 슬라이드 명시 폭 필수 — flex(swiper-wrapper) 아이템이 되면 img max-width:100% 와
   폭 auto 가 맞물려 0 으로 붕괴한다 */
.gnr .gn-header .menu_wrap .navi_slides .slide { width: 185px; flex: 0 0 auto; }
.gnr .gn-header .menu_wrap .navi_slides .slide img { width: 185px; height: 220px; }
/* 메가메뉴 내부 폭은 운영 기본값(1264) 유지 — 2026-08-25.
   1440(리뉴얼 콘텐츠 폭)으로 넓혔더니 내부가 float 레이아웃(.menu=left / .side_menu=right)이라
   늘어난 176px 이 그대로 메뉴 컬럼↔배너 사이 빈 공간이 돼 운영보다 크게 벌어졌다.
   운영과 동일한 간격을 쓰려면 콘텐츠 폭(1264-200=1064)을 그대로 둬야 한다. */

.gnr .gn-gnb__link {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 18px;                  /* 8/11 실측 (후원하기 70w = 4자) */
    line-height: 27px;
    font-weight: 600;
    color: var(--gn-text-strong);
    white-space: nowrap;
}
.gnr .gn-gnb__link:hover,
.gnr .gn-gnb__link.is-active { color: var(--gn-olive-500); }

.gnr .gn-headact { display: flex; align-items: center; gap: 16px; }
.gnr .gn-headact__search { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; }
/* 내보낸 SVG 가 y 반전 상태 — 되돌림. 치수는 원본 native 27x27 (강제 36x44 스트레치가 깨짐 원인) */
.gnr .gn-headact__search img { width: 27px; height: 27px; transform: scaleY(-1); }
.gnr .gn-headact .gn-btn { height: 56px; padding: 12px 28px; gap: 8px; }

@media (min-width: 1025px) {
    .gnr .gn-notibar__inner,
    .gnr .gn-header__inner { padding: 0; }
}


/* ==========================================================================
   운영 헤더(#header) 리뉴얼 스킨 — 구 main.css 에서 이동 (2026-08-26 재편)
   ========================================================================== */
/* ==========================================================================
   운영 헤더(#header) 리뉴얼 스킨 — 시안 996:8357 실측
   운영 header.jsp 마크업은 그대로 두고 스타일만 덮는다 (PLAN 방침).
   ★ 실반영 시 : 이 블록을 그대로 가져가되, 서브 페이지 영향이 없도록
     메인 body 클래스 스코프(예: .main-renewal #header)로 감싸서 적용할 것.
   운영 정본 규칙 위치 : assets/web/css/common.css L290~ (.header ~)
   ========================================================================== */

/* 하단 초록 경계선 제거 (0729 피드백 : 서브와 경계 없이)
   ※ `#header .mw1300 { width: 1440px }` 는 2026-08-25 제거.
     정적 프로토타입에선 헤더 상단바도 .mw1300 이라 함께 넓혀야 했지만,
     JSP 이식본은 상단바가 .gn-header__inner 로 바뀌어 .mw1300 이 메가메뉴에만 남았다.
     ID 셀렉터(1,1,0)라 운영 `.header .menu_wrap .mw1300`(0,3,0) 을 무조건 이겨
     메가메뉴가 1440 으로 벌어지는 원인이 됐다. */
#header .header {
    box-shadow: none;
    /* padding-top 은 common.css .gn-header(12px — 시안 996:8357 띠배너→유틸 갭)가 담당.
       구 운영마크업 스킨 시절의 8px 는 이중 적용이라 제거 (2026-08-25) */
}
#header .header .top { margin-bottom: 8px; }

/* 유틸바 — 14px 박스형 영수증 버튼 → 16px 텍스트 + 아이콘 (시안) */
#header .header .top ul { height: auto; }
#header .header .top ul li { font-size: 16px; line-height: 22px; }
#header .header .top ul li a { color: rgba(69, 72, 56, .8); font-weight: 400; }
#header .header .top ul li:nth-child(2)::before { background: rgba(0, 0, 0, .1); height: 14px; }
#header .header .top ul li.receipt_btn { border: 0; margin: 0 0 0 15px; }
#header .header .top ul li.receipt_btn a {
    position: relative;
    padding: 0 0 0 24px;
    color: var(--gn-olive-500);
    font-weight: 600;
}
#header .header .top ul li.receipt_btn a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 22px;
    transform: translateY(-50%);
    background: url(https://cdn.gni.kr/assets/images/main/section02_ico01.svg) no-repeat center / 18px 22px;
}

/* GNB — 19px/38 → 20px SemiBold #454838 / 좌우 32 (아이템 간 64) */
#header .header .gnb > ul > li > a {
    padding: 18.5px 32px; /* 8/14 요청 : 상하 10px/27px 로 텍스트가 위로 치우쳐 보이던 것 → 세로 중앙 정렬 (합 37px 유지) */
    font-size: 20px;
    color: var(--gn-text-strong);
}

/* 검색 — 시안 돋보기 아이콘으로 교체 (원본 SVG 가 y 반전 상태라 되돌림) */
#header .header .side a.search {
    background: url(https://cdn.gni.kr/assets/images/main/section02_ico02.svg) no-repeat center / 24px 30px;
    transform: scaleY(-1);
}

/* 바로 후원하기(q_support) 오버라이드는 index.html 의 헤더 이식본 바로 위
   인라인 <style> 로 이동 (8/13) — 운영 header.jsp 이식 시 마크업과 함께 옮기기 위함 */

/* 메가메뉴 내부 폭은 운영 기본값(1264) 유지 — 2026-08-25 되돌림.
   1440 으로 넓히면 내부가 float 레이아웃(.menu=left / .side_menu=right)이라
   늘어난 176px 이 그대로 "2depth 컬럼 ↔ 우측 배너" 사이 빈 공간이 된다.
   운영과 같은 간격을 쓰려면 콘텐츠 폭(1264-200=1064)을 그대로 둬야 한다.
   (배너는 .side_menu>li 에 폭 지정이 없어 이미지 원본 185px 로 결정된다) */

/* --------------------------------------------------------------------------
   [몸통] 메인 섹션
   -------------------------------------------------------------------------- */
/* ==========================================================================
   굿네이버스 메인 개편 — main.css
   메인 페이지 섹션 스타일. base.css → common.css 선행 로드 전제.
   모든 규칙은 `.gnr` 스코프 안에서만 동작 (서브 페이지 영향 0).

   수치 출처 : Figma "현업 PC최종 컨펌시안" > A-2 (996:8322) 실측.
   PC 1920 기준 실측 / 콘텐츠 1440(좌우 240) / 히어로 1720(좌우 100).
   섹션 번호는 notes/main_renewer/images/ 의 sectionNN 접두사와 1:1 대응.
   ========================================================================== */

/* 공통 1440 컨테이너 규칙 (8/11) — 절대좌표 섹션도 뷰포트 고정 px 대신
   중앙 1440 기준(--gn-edge = 컨테이너 좌측 모서리, 1920 에서 240px)으로 앵커.
   1440~1920 어떤 창 폭에서도 콘텐츠가 중앙 정렬 유지. */
.gnr {
    --gn-edge: calc(50% - 720px);
    min-width: 1440px;
}

/* --------------------------------------------------------------------------
   section 03 — 히어로 캐러셀 + 퀵후원 바   (996:8388 / 1720x800)
   블록 전체가 대각 라운드 40 : 히어로 좌상, 퀵후원 바 우하
   -------------------------------------------------------------------------- */
.gnr .gnr-hero {
    max-width: var(--gn-container-wide);
    margin: 32px auto 0;              /* 헤더 하단 197 → 히어로 상단 229 */
    border-radius: var(--gn-r-3xl) 0 var(--gn-r-3xl) 0;
    overflow: hidden;
}

/* --- 비주얼 --- */
.gnr .gnr-hero__visual {
    position: relative;
    height: 660px;
    background: var(--gn-pastel-blue);
    overflow: hidden;
}
.gnr .gnr-hero__swiper { height: 100%; }
.gnr .gnr-hero__track { display: flex; height: 100%; }
/* swiper 컨테이너(z-index:1)보다 컨트롤이 위 */
.gnr .gnr-hero__util { z-index: 2; }
.gnr .gnr-hero__slide {
    position: relative;
    flex: none;
    width: 100%;
    height: 660px;
    overflow: hidden;
}
.gnr .gnr-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}
/* 히어로 내부 콘텐츠는 1440 그리드에 앵커 (8/12) — 1720 배경은 그대로 두고
   1440~1920 어느 창에서도 카피/컨트롤/퀵바 내용이 콘텐츠 폭 안에 정렬.
   히어로가 중앙 정렬이라 hero 내부의 50% = 페이지 중앙 → var(--gn-edge) 그대로 사용 가능
   (1920 실측 140px 과 동일값) */
.gnr .gnr-hero__copy {
    position: absolute;
    left: var(--gn-edge);
    top: 88px;
    width: 642px;
}
.gnr .gnr-hero__chip-in { display: inline-block; }
.gnr .gnr-hero__chip {
    display: inline-flex;
    align-items: center;
    overflow: hidden;                 /* 칩 안 텍스트 마스크 리빌 (8/11) */
    height: 52px;
    padding: 0 20px;
    border-radius: 100px;
    background: rgba(0, 0, 0, .08);
    font-size: var(--gn-fz-body2);
    font-weight: 700;
    line-height: 1;
    color: var(--gn-gray-900);
}
.gnr .gnr-hero__title {
    margin-top: 32px;
    font-family: var(--gn-font-brand);
    font-weight: 700;
    font-size: 52px;                 /* 히어로만 52 유지 (섹션 타이틀 토큰은 48) */
    line-height: 67px;               /* 52 × 1.28 (히어로만 1.28, 섹션 타이틀은 1.48) */
    max-height: 134px;               /* 최대 2줄 — CMS 텍스트 길이 방어 (8/12) */
    overflow: hidden;
    color: var(--gn-gray-900);
}
.gnr .gnr-hero__desc {
    margin-top: 24px;
    white-space: pre-line;           /* CMS 입력의 엔터를 그대로 줄바꿈으로 (8/13) */
    font-size: 22px;
    font-weight: 500;
    line-height: 33px;
    max-height: 99px;                /* 최대 3줄 — CMS 텍스트 길이 방어 (8/12) */
    overflow: hidden;
    color: var(--gn-text-hero);
}
.gnr .gnr-hero__cta {
    margin-top: 40px;
    height: 64px;
    padding: 0 32px;
    border-radius: 100px;
    font-size: var(--gn-fz-body);
    font-weight: 700;
}

/* 다크 배너 변형 (8/11 최종 1300:8997) — CMS 텍스트컬러 '흰색' 선택 시.
   슬라이드 안 요소는 --dark 모디파이어, 슬라이드 밖 컨트롤은 루트 .is-dark(JS 동기화)로 반전 */
/* 8/12 — 다크 배경 컷(section03_img02) 수급으로 데모 오버레이 제거.
   기존 규칙은 히스토리 보존용 주석 (컷 미수급 상태로 되돌릴 때 참고)
.gnr .gnr-hero__slide--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(28, 27, 27, .78);
}
*/
.gnr .gnr-hero__slide--dark .gnr-hero__copy  { z-index: 1; }
.gnr .gnr-hero__slide--dark .gnr-hero__chip  { background: rgba(255, 255, 255, .14); color: var(--gn-white); }
.gnr .gnr-hero__slide--dark .gnr-hero__title { color: var(--gn-white); }
.gnr .gnr-hero__slide--dark .gnr-hero__desc  { color: rgba(255, 255, 255, .85); }
.gnr .gnr-hero__slide--dark .gnr-hero__cta   { background: var(--gn-white); color: var(--gn-gray-900); }
.gnr .gnr-hero__slide--dark .gnr-hero__cta:hover { background: rgba(255, 255, 255, .86); }

.gnr .gnr-hero.is-dark .gn-carousel__bar        { background: rgba(255, 255, 255, .32); }
.gnr .gnr-hero.is-dark .gn-carousel__bar > span { background: var(--gn-white); }
.gnr .gnr-hero.is-dark .gn-carousel__count      { color: rgba(255, 255, 255, .55); }
.gnr .gnr-hero.is-dark .gn-carousel__count b    { color: var(--gn-white); }
.gnr .gnr-hero.is-dark .gn-carousel__count i    { background: rgba(255, 255, 255, .4); }
.gnr .gnr-hero.is-dark .gnr-hero__nav .gn-btn-circle { background: rgba(255, 255, 255, .24); }
.gnr .gnr-hero.is-dark .gnr-hero__nav .gn-btn-circle > img { filter: invert(1); }
/* 다크모드 호버 시 배경이 밝아져 흰 화살표가 묻힘 — 화살표만 #111111 로 전환 (8/13 요청) */
.gnr .gnr-hero.is-dark .gnr-hero__nav .gn-btn-circle:hover > img { filter: brightness(0) invert(6.7%); }

/* 캐러셀 컨트롤 (8/13 시안 실측) — 진행바(200) + 카운터 + 이전/다음을
   .gnr-hero__util 하나로 묶어 배치. 바 240..440 / 카운터 +16 / 네비 +25, 원 48 gap 12 */
.gnr .gnr-hero__util {
    position: absolute;
    left: var(--gn-edge);
    top: 554px;
    display: flex;
    align-items: center;
}
.gnr .gnr-hero__bar    { width: 200px; }
.gnr .gnr-hero__count  { margin-left: 16px; }
.gnr .gnr-hero__nav    { margin-left: 25px; gap: 12px; }

/* 네비 원형 버튼 호버 — 흰색 반투명이 안에서 원형으로 차오름 (8/13 요청 : FFFFFF 80%).
   ★ 메인 빅배너는 반전 대상에서 제외 (8/14 요청) — 아래에서 공통 반전 규칙을 되돌린다 */
/* 공통 차오름(::before)을 그대로 쓰되 색만 흰색 — 빅배너는 반전 제외 (8/14 요청) */
.gnr .gnr-hero__nav .gn-btn-circle::before { background: rgba(255, 255, 255, .8); }
/* 공통 hover 반전(배경 브라운 + 화살표 invert) 은 여기서 되돌린다 — 빅배너는 기존 연출 유지 */
.gnr .gnr-hero__nav .gn-btn-circle:hover { background-color: rgba(255, 255, 255, .4); }
.gnr .gnr-hero__nav .gn-btn-circle:hover > img { filter: none; }
.gnr .gnr-hero__nav .gn-btn-circle > img {
    position: relative;
    z-index: 1;
}

/* --- 퀵후원 바 --- */
.gnr .gnr-hero__quick {
    display: flex;
    align-items: center;
    height: 140px;
    padding: 0 var(--gn-edge);        /* 내용을 1440 그리드 안으로 — 좁은 창에서 카피 줄깨짐 방지 */
    background: var(--gn-bg-warm);
}
.gnr .gnr-hero__quick-copy { margin-right: auto; }
.gnr .gnr-hero__quick-title {
    font-size: 28px;                 /* 8/13 시안 실측 26→32→28 */
    font-weight: 700;
    line-height: 44px;
    color: var(--gn-gray-900);
}
.gnr .gnr-hero__quick-desc {
    font-size: var(--gn-fz-body2);
    font-weight: 400;
    line-height: 30px;               /* 18 × 1.68 */
    color: #494949;
}
.gnr .gnr-hero__amount { margin-right: 124px; }
.gnr .gnr-hero__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 243px;
    height: 66px;
    padding: 0 29px 0 36px;
    border-radius: 100px;
    /* 8/14 요청 : 그라데이션 → 단색 #7C9B2B, Pretendard, 24px 명시 */
    background: #7C9B2B;
    font-family: 'Pretendard', var(--gn-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: var(--gn-white);
    transition: filter var(--gn-dur-fast) var(--gn-ease);
}
.gnr .gnr-hero__submit:hover { filter: brightness(1.06); }
.gnr .gnr-hero__submit img { width: 32px; transition: transform .3s var(--gn-ease); }
/* 호버 — 화살표 살짝 전진 + 버튼 전체를 빛이 훑고 지나감 (8/11 요청) */
.gnr .gnr-hero__submit { position: relative; overflow: hidden; }
.gnr .gnr-hero__submit:hover img { transform: translateX(5px); }
.gnr .gnr-hero__submit::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -140px;                     /* 버튼(243) 좌측 밖에서 출발 → 우측 밖으로 관통 */
    /* 8/14 요청 — 더 퍼진 빛. 폭을 44 → 120 으로 넓히고 그라데이션 정지점을 완만하게,
       blur 를 얹어 경계가 부드럽게 번지도록 */
    width: 120px;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .18) 25%,
        rgba(255, 255, 255, .55) 50%,
        rgba(255, 255, 255, .18) 75%,
        rgba(255, 255, 255, 0) 100%);
    filter: blur(6px);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}
.gnr .gnr-hero__submit:hover::after { animation: gn-btn-shine .7s ease-out .05s; }
@keyframes gn-btn-shine {
    0%   { left: -140px; opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { left: 290px; opacity: 0; }   /* 넓어진 빛(120)이 완전히 빠져나갈 만큼 */
}

/* --------------------------------------------------------------------------
   section 15 — 로그인 콘텐츠 (로그인 회원 맞춤 영역)
   시안 : 결연 1523:9000 (1920x1002) / 사업 1523:7256 (x921) / 일시 1523:7212 (x1000)
         / 후원중단 1523:7156 (x1000). 히어로 바로 다음 삽입 (로그인 A-2 1523:7971).
   케이스 공통 골격 = [타이틀+유형배지 head(divider)] → [좌 사진 | 우 인용·설명·CTA·배너].
   결연만 원형 사진 스와이퍼 + 좌우 화살표 (8/18 피드백 — 아동결연 원형 버튼과 동일 형태).
   -------------------------------------------------------------------------- */
.gnr .gnr-my { margin-top: var(--gn-sec-mt); }   /* 8/19 검수 — 섹션 사이 300, 아래 섹션 margin-top 소유 */

/* head — 타이틀 좌 / 배지(또는 통계 pill) 우, baseline 하단 정렬. 아래 divider 실측 #DDD 2px */
.gnr .gnr-my__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 2px solid #DDD;
}
.gnr .gnr-my__title {
    min-height: 154px;               /* 2줄 고정 높이 (77×2) — 1줄 케이스도 divider 이하 위치 동일 (탭 전환 시 안 튐) */
    align-content: end;              /* 텍스트 하단 정렬 (block align-content — flex 는 em 조각이 쪼개져 불가. 미지원 브라우저는 상단 정렬로 저하) */
    font-family: var(--gn-font-brand);
    font-weight: 700;
    font-size: 52px;                 /* 실측 52 (섹션 타이틀 토큰 48 아님 — 히어로급) */
    line-height: 77px;               /* 52 × 1.48 */
    color: #222222;                  /* 실측 #222 (타 섹션 #1C1B1B 와 상이) */
}
.gnr .gnr-my__title em { color: var(--gn-olive-500); }   /* 실측 #89A230 */

/* 후원 유형 배지 — active 만 검정 볼드, 나머지 #746B64 */
.gnr .gnr-my__badges { display: flex; align-items: center; }
.gnr .gnr-my__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 24px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: #746B64;                  /* 실측 (토큰 외 값) */
    white-space: nowrap;
}
/* 레거시 img{width:100%} 가 width 속성을 덮으므로 아이콘 폭은 CSS 로 명시 (프로젝트 관례) */
.gnr .gnr-my__badge img { width: 32px; }
/* 8/20 검수 — 결연·사업 아이콘이 일시보다 커 보였다. 추출 SVG 캔버스가 제각각(28.5 / 26 / 32)이라
   같은 32px 을 주면 그림(ink)이 각각 28.6 / 30.3 / 26.6 로 벌어진다.
   여백이 있는 일시(26.6)를 기준으로 두 개만 캔버스 비율만큼 축소해 시각 크기를 통일.
   nth-child 는 앞에 붙은 검수용 고스트 탭 때문에 기준이 흔들려 파일명으로 지정 */
.gnr .gnr-my__badge img[src*="ico01"] { width: 30px; }   /* 결연 : 32 × 26.6/28.6 */
.gnr .gnr-my__badge img[src*="ico02"] { width: 28px; }   /* 사업 : 32 × 26.6/30.3 */
.gnr .gnr-my__badge.is-active { font-weight: 700; color: #000000; }
.gnr .gnr-my__badge + .gnr-my__badge {
    position: relative;
    margin-left: 16px;               /* 구분선 좌우 8 + 선 1.5 실측 */
}
.gnr .gnr-my__badge + .gnr-my__badge::before {
    content: '';
    position: absolute;
    left: -9px;                      /* margin 16 중앙 */
    top: 50%;
    width: 1.5px;
    height: 12px;
    transform: translateY(-50%);
    background: #999999;
}

/* 후원 이력 통계 pill (후원중단 케이스) — 실측 h76 / bg #F2F7F2 / 라벨 14 #777 / 값 18 #111 */
.gnr .gnr-my__stats { display: flex; gap: 12px; }
.gnr .gnr-my__stat {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 76px;
    padding: 0 24px;
    border-radius: var(--gn-r-pill);
    background: #F2F7F2;
}
.gnr .gnr-my__stat img { width: 32px; }
.gnr .gnr-my__stat-txt { display: flex; flex-direction: column; }
.gnr .gnr-my__stat-txt em { font-size: 14px; line-height: 17px; font-weight: 500; color: #777777; }
.gnr .gnr-my__stat-txt b  { margin-top: 3px; font-size: 18px; line-height: 23px; font-weight: 600; color: #111111; white-space: nowrap; }

/* body — 좌 사진 컬럼 / 우 콘텐츠 830 (우측 플러시) */
.gnr .gnr-my__body {
    display: flex;
    align-items: flex-start;
    margin-top: 80px;                /* divider → 콘텐츠 실측 80~82 */
}
.gnr .gnr-my__content { width: 830px; margin-left: auto; }

/* 사각 사진 (사업·일시·후원중단) — 실측 476x462, 라운드 fit 17±1 → r-lg 16 */
.gnr .gnr-my__media { flex: none; }
.gnr .gnr-my__media--photo { width: 476px; }
/* 후원중단 사진만 하단 다크 그라데이션 — 시안 1523:7210 플랫 컷 재현 (사업·일시엔 없음) */
.gnr .gnr-my--stop .gnr-my__media--photo { position: relative; }
.gnr .gnr-my--stop .gnr-my__media--photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--gn-r-lg);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, #000 100%);
    pointer-events: none;
}
.gnr .gnr-my__media--photo > img {
    width: 476px;
    height: 462px;                   /* 시안 실측 — 우측 컬럼(인용47+24+설명60+24+CTA63+44+배너200=462)과 1자 정렬 */
    object-fit: cover;
    border-radius: var(--gn-r-lg);
}

/* 결연 원형 사진 + 아동 스와이퍼 — 화살표(48)까지 실측 폭 568 (좌 여백 48 / 사진 392 / 우 48) */
.gnr .gnr-my__media--child { position: relative; width: 568px; }
.gnr .gnr-my__media--child .gnr-my__swiper { width: 392px; margin-left: 88px; }
.gnr .gnr-my__slide { text-align: center; }
.gnr .gnr-my__photo {
    display: block;
    width: 392px;
    height: 392px;
    border-radius: 50%;
    overflow: hidden;
}
.gnr .gnr-my__photo img { width: 100%; height: 100%; object-fit: cover; }
.gnr .gnr-my__childname {
    display: flex;
    flex-wrap: wrap;                 /* 긴 이름이면 자립까지 그룹이 통째로 다음 줄로 */
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    margin-top: 40px;                /* 사진 392 → 캡션 (시안 실측) */
    word-break: keep-all;            /* 한글 단어 중간 꺾임 방지 */
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    color: #000000;
    /* nowrap 금지 — 긴 이름이 슬라이드 폭(392)을 넘치면 옆 슬라이드에서 비쳐 보인다 */
}
.gnr .gnr-my__dday { white-space: nowrap; }   /* 자립까지 + D-day 한 그룹 유지 */
.gnr .gnr-my__childname img { width: 16px; }
.gnr .gnr-my__childname b { font-weight: 700; }

/* 결연아동 2명 이상일 때 좌우 화살표 (8/18 피드백) — 아동결연 원형 버튼과 동일 형태:
   흰 배경 + inset 링 1px → hover 2px 브라운, 차오름은 gn-btn-circle 공통 ::before */
.gnr .gnr-my__prev,
.gnr .gnr-my__next {
    position: absolute;
    z-index: 20;
    top: 172px;                      /* 실측 y576 (사진 세로 중앙권) */
    width: 48px;
    height: 48px;
    background: var(--gn-white);
    box-shadow: var(--gn-shadow-sm), inset 0 0 0 1px var(--gn-gray-400);
}
.gnr .gnr-my__prev { left: 0; }      /* 시안 1523:9053 — 컨테이너 좌단 (media 568 = 화살표 48 + 여백 40 + 사진 392 + 여백 40 + 화살표 48) */
.gnr .gnr-my__next { right: 0; }
.gnr .gnr-my__prev:hover,
.gnr .gnr-my__next:hover { box-shadow: var(--gn-shadow-sm), inset 0 0 0 2px var(--gn-brown-600); }
/* 아동이 1명이면 main.js 가 media 에 is-single 을 붙여 화살표 숨김 */
.gnr .gnr-my__media.is-single .gnr-my__prev,
.gnr .gnr-my__media.is-single .gnr-my__next { display: none; }
/* 화살표 아이콘 — 어두운/흰색 두 장 크로스페이드 (gnr-child 와 동일 수법) */
.gnr .gnr-my__prev-ico,
.gnr .gnr-my__next-ico {
    position: relative;
    z-index: 1;
    display: block;
    width: 32px;
    height: 38px;
}
.gnr .gnr-my__prev-ico::before,
.gnr .gnr-my__next-ico::before,
.gnr .gnr-my__prev-ico::after,
.gnr .gnr-my__next-ico::after {
    content: '';
    position: absolute;
    inset: 0;
    background: no-repeat center / contain;
    transition: opacity var(--gn-dur) var(--gn-ease);
}
.gnr .gnr-my__prev-ico::before { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_l_k.svg); opacity: 1; }
.gnr .gnr-my__next-ico::before { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r_k.svg); opacity: 1; }
.gnr .gnr-my__prev-ico::after  { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_l.svg);   opacity: 0; }
.gnr .gnr-my__next-ico::after  { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r.svg);   opacity: 0; }
.gnr .gnr-my__prev:hover .gnr-my__prev-ico::before,
.gnr .gnr-my__next:hover .gnr-my__next-ico::before { opacity: 0; }
.gnr .gnr-my__prev:hover .gnr-my__prev-ico::after,
.gnr .gnr-my__next:hover .gnr-my__next-ico::after { opacity: 1; }
.gnr .gnr-my__prev:hover .gnr-my__prev-ico { animation: gn-arrow-nudge-l .45s var(--gn-ease); }
.gnr .gnr-my__next:hover .gnr-my__next-ico { animation: gn-arrow-nudge .45s var(--gn-ease); }
/* 끝단 비활성 — 공통 is-disabled 는 img 만 흐려서 span 아이콘용 보강 */
.gnr .gnr-my__prev.is-disabled .gnr-my__prev-ico,
.gnr .gnr-my__next.is-disabled .gnr-my__next-ico { opacity: .4; }

/* 우측 콘텐츠 */
.gnr .gnr-my__quote {
    display: block;
    font-size: 32px;
    font-weight: 700;
    line-height: 47px;               /* 32 × 1.48 */
    color: #222222;
}
.gnr .gnr-my__desc {
    margin-top: 24px;
    white-space: pre-line;           /* 관리자 입력의 엔터를 그대로 줄바꿈으로 (히어로 desc 와 동일 처리) */
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #58585A;                  /* 실측 */
}

/* CTA 2버튼 — 실측 radius 8 / h63 / gap 12. 행 폭 = 결연 537, 나머지 586 (시안 그대로) */
.gnr .gnr-my__cta {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    width: 586px;
}
.gnr .gnr-my--child .gnr-my__cta { width: 537px; }
.gnr .gnr-my__cta .gn-btn {
    flex: 1;
    height: 63px;                    /* padding 18 + lh 27 실측 */
    padding: 0 16px;
    border-radius: 8px;
    font-size: 18px;
}
/* 라인 버튼은 공통(--line, 올리브)과 달리 브라운 — 섹션 한정 오버라이드 */
.gnr .gnr-my__cta .gn-btn--line {
    border-color: var(--gn-brown-600);
    color: var(--gn-brown-600);
    background: var(--gn-white);
}
.gnr .gnr-my__cta .gn-btn--line:hover { background: var(--gn-brown-50); }

/* 결연 더하기 배너 — 실측 830x200 r20, bg #626E62 + 우측 사진(490x194) + 가로 그라데이션 오버레이 */
.gnr .gnr-my__banner {
    position: relative;
    display: block;
    width: 830px;
    height: 200px;
    margin-top: 44px;                /* CTA 618 → 배너 662 */
    border-radius: 20px;
    overflow: hidden;
    background: #626E62;
}
.gnr .gnr-my__banner-photo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 490px;                    /* 실측 — 좌측은 단색 노출 */
    height: 194px;
    object-fit: cover;
}
.gnr .gnr-my__banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .29), rgba(102, 102, 102, .29) 728px);   /* 시안 오버레이는 1016px 컨테이너 기준 71.654% — 830 박스에선 728px 지점 */
}
.gnr .gnr-my__banner-body {
    position: absolute;
    z-index: 1;                      /* 오버레이 위 */
    left: 52px;
    top: 31px;
    display: block;
    color: var(--gn-white);
}
.gnr .gnr-my__banner-title { display: block; font-size: 24px; font-weight: 600; line-height: 36px; }
.gnr .gnr-my__banner-desc  { display: block; margin-top: 6px; font-size: 16px; font-weight: 400; line-height: 24px; }
.gnr .gnr-my__banner-more {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;                /* 실측 y129 */
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}
/* 더보기 화살표 = 공통 gn-arrowlink 원형 버튼 재사용 (구 section15_ico08.svg 단일 이미지 대체 —
   이미지 한 장이면 원까지 같이 튕겨서 공통 모션과 어긋난다). 어두운 배너 위라 색만 반전 스킴:
   기본 = 투명 원 + 흰 테두리 + 흰 화살표 / hover = 흰 원 차오름 + 어두운 화살표 + 우측 튕김 */
.gnr .gnr-my__banner-arrow { flex: none; }
.gnr .gnr-my__banner-arrow .gn-arrowlink__ico {
    width: 40px;                     /* 시안 1523:9042 실측 40 (공통 48 아님) */
    height: 40px;
    background-color: transparent;
    border-color: var(--gn-white);
}
.gnr .gnr-my__banner-arrow .gn-arrowlink__ico::after,
.gnr .gnr-my__banner-arrow::after { background-size: 24px 28px; }   /* 원 40 기준 (공통 48:32x38 비율) */
.gnr .gnr-my__banner-arrow::after {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r_d.svg);
}
/* hover 트리거는 배너 전체 — 공통 규칙(.gn-arrowlink:hover)은 span 이라 발동하지 않는다 */
.gnr .gnr-my__banner:hover .gnr-my__banner-arrow .gn-arrowlink__ico { border-color: var(--gn-white); }
.gnr .gnr-my__banner:hover .gnr-my__banner-arrow .gn-arrowlink__ico::before { transform: scale(1); }
.gnr .gnr-my__banner:hover .gnr-my__banner-arrow .gn-arrowlink__ico::after { opacity: 0; }
.gnr .gnr-my__banner:hover .gnr-my__banner-arrow::after {
    opacity: 1;
    animation: gn-arrow-nudge .45s var(--gn-ease);
}

/* --------------------------------------------------------------------------
   section 04 — 신뢰 영역   (996:8549 / 1920x1002)
   타이틀 → (32) 화살표 링크 2개 → (100) NGO 4카드
   0729 미팅 미결 : 카드 비주얼 로고형(A-2) / 사진형(A-1) — 기본 로고형,
   `.gnr-trust--photo` 를 섹션에 붙이면 사진형으로 전환된다.
   -------------------------------------------------------------------------- */
.gnr .gnr-trust { margin-top: var(--gn-sec-mt); }
.gnr .gnr-trust__title { text-align: center; }
.gnr .gnr-trust .gn-arrowlinks { margin-top: 56px; }   /* 8/18 검수 — 타이틀과 붙어 보임, 32→56 */
.gnr .gnr-trust__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gn-col-gap);
    margin-top: 100px;
}
.gnr .gnr-trust__card {
    height: 310px;
    padding: 30px 16px 0;
    border-radius: var(--gn-r-xl) var(--gn-r-xl) 0 0;   /* 8/13 — 상단 양쪽만 라운드 (하단은 흰 그라데이션이라 라운드가 보이지 않는 구조) */
    background: linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%);   /* 8/13 시안 — 아래로 갈수록 흰색 */
    text-align: center;
    overflow: hidden;
}
/* 로고 슬롯 — 인증 로고 높이가 126~139 로 제각각이라 최대 높이로 슬롯을 고정하고
   그 안에서 가운데 정렬. 카드 4장의 타이틀 baseline 이 어긋나지 않게 함. */
.gnr .gnr-trust__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 139px;
}
/* 로고 원본 치수 그대로 (업스케일 금지) — 가이드스타 206x130 / UN 151x126 / Most Admired 140x139 */
.gnr .gnr-trust__card:nth-child(1) .gnr-trust__logo img { width: 190px; }
.gnr .gnr-trust__card:nth-child(2) .gnr-trust__logo img,
.gnr .gnr-trust__card:nth-child(4) .gnr-trust__logo img { width: 131px; }
.gnr .gnr-trust__card:nth-child(3) .gnr-trust__logo img { width: 120px; }
.gnr .gnr-trust__name {
    display: block;
    margin-top: 15px;
    font-weight: 700;
    font-size: 24px;
    line-height: 56px;
    color: #222222;
}
.gnr .gnr-trust__desc {
    font-size: var(--gn-fz-body);
    font-weight: 500;
    line-height: 30px;
    color: var(--gn-gray-700);
}

/* 사진형(A-1) 전환 — 카드 전체가 사진, 텍스트는 하단에 흰색으로 올라감 */
.gnr .gnr-trust--photo .gnr-trust__card { position: relative; padding: 0; }
.gnr .gnr-trust--photo .gnr-trust__logo { display: none; }
.gnr .gnr-trust--photo .gnr-trust__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gnr .gnr-trust--photo .gnr-trust__card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(to top, rgba(28, 27, 27, .72), rgba(28, 27, 27, 0));
}
.gnr .gnr-trust--photo .gnr-trust__body {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 28px;
    z-index: 1;
    text-align: left;
}
.gnr .gnr-trust--photo .gnr-trust__name { margin-top: 0; line-height: 41px; color: var(--gn-white); }
.gnr .gnr-trust--photo .gnr-trust__desc { margin-top: 8px; font-size: var(--gn-fz-cap); line-height: 24px; color: rgba(255, 255, 255, .9); }
/* 로고형에서는 사진 슬롯을 쓰지 않는다 */
.gnr .gnr-trust__photo { display: none; }
.gnr .gnr-trust--photo .gnr-trust__photo { display: block; }

/* --------------------------------------------------------------------------
   section 05 — 1:1 아동결연   (최종 컨펌 시안 1266:4783 / 1920x755)
   bg #ECF1F5 + 우측 세계지도 워터마크.
   좌측 끝에서 시작하는 흰 pill 카드(1200x340, 우측 반원 = radius 170) 안에
   [원형 사진 280 | 인용 28 · 설명 20 · 버튼 2개 가로].
   -------------------------------------------------------------------------- */
.gnr .gnr-child {
    position: relative;
    height: 755px;
    margin-top: var(--gn-sec-mt);
    background: var(--gn-child-bg);
    overflow: hidden;
}
/* 지도 워터마크 — 섹션 배경판 통짜 컷(1920x755, 배경색 #F1F4F9 포함).
   우측 정렬이라 1920 보다 넓은 화면에선 좌측이 섹션 배경색으로 이어진다 (8/19 컷 교체) */
.gnr .gnr-child::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1920px;
    height: 755px;
    background: url(https://cdn.gni.kr/assets/images/main/section05_img03.webp) no-repeat right top / 1920px 755px;
    pointer-events: none;
}
.gnr .gnr-child__head { position: relative; z-index: 1; padding: 140px 0 0 var(--gn-edge); }   /* 8/18 검수 — 섹션 간격 확대 100→140 */
.gnr .gnr-child__title {
    font-family: var(--gn-font-brand);
    font-weight: 700;
    font-size: var(--gn-fz-display);
    line-height: var(--gn-lh-display);
    color: var(--gn-text-title);
}
.gnr .gnr-child__title em { color: var(--gn-title-green-2); }
.gnr .gnr-child__head .gn-tab { margin-top: 47px; }

/* 흰 pill 카드 — 좌측 화면 끝에 붙고 우측 끝이 반원.
   8/12 : 폭을 그리드 연동(1440 그리드 + 960)으로 — 창이 줄면 왼쪽 여백만 줄고
   내부 요소는 자기 폭 기준 calc(100% - X) 로 우측(그리드) 정렬 유지 */
.gnr .gnr-child__card {
    position: relative;
    z-index: 1;
    width: calc(var(--gn-edge) + 960px);   /* 1920 에서 240+960 = 1200 */
    height: 340px;
    margin-top: 43px;
    border-radius: 0 170px 170px 0;
    background: var(--gn-white);
}
/* 슬라이드 전환 (8/11 최종) — viewport 가 pill 모양 그대로 마스크, slide(사진+텍스트 통짜)가 좌우 이동 */
.gnr .gnr-child__viewport {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    user-select: none;                /* 드래그 스와이프 중 텍스트 선택 방지 */
}
.gnr .gnr-child__viewport img { -webkit-user-drag: none; }
/* 8/13 — 탭 뷰 3벌 구조로 바꾸면서 Swiper 기본 슬라이드 동작으로 복귀.
   (이전 virtualTranslate 방식의 `.is-current 만 visible` 규칙은 제거 — 그 규칙이 남아 있으면
    is-current 를 붙이지 않는 새 코드에서 전체 뷰가 통째로 숨는다) */
/* 저작 슬라이드는 CTA 마크업 원본 전용이고 화면에는 combo 가 나온다(main.js).
   JS 가 display:none 을 걸기 전까지 더미 아동이 스켈레톤 사이로 비치므로 CSS 로 선셋한다
   (2026-09-10. Swiper init 전에는 슬라이드 폭·transform 도 안 잡혀 레이아웃이 어긋난다) */
.gnr .gnr-child__swiper { position: absolute; inset: 0; visibility: hidden; }
.gnr .gnr-child__swiper .swiper-wrapper { height: 100%; }
.gnr .gnr-child__slide { position: relative; height: 100%; }

.gnr .gnr-child__photo {
    position: absolute;
    left: calc(100% - 880px);         /* 1920 실측 320 (카드 1200 기준) — 그리드 +80 */
    top: 30px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
}
.gnr .gnr-child__photo img { width: 100%; height: 100%; object-fit: cover; }   /* 8/25 — 확대 크롭(1.55) 제거 : 실제 CRM 아동사진은 얼굴 위주 컷이라 확대 시 얼굴이 잘림 → 영역 끝점 기준 cover (퍼블 수정.pptx) */
.gnr .gnr-child__text { position: absolute; left: calc(100% - 567px); top: 55px; }   /* 1920 실측 633 — 그리드 +393 */
.gnr .gnr-child__quote {
    font-weight: 700;
    font-size: 24px;                 /* 8/13 — 28 → 24 (시안 수정) */
    line-height: var(--gn-lh-sub2);
    color: var(--gn-gray-900);
}
.gnr .gnr-child__desc {
    margin-top: 20px;                /* 8/13 — 26 → 20 */
    padding-left: 14px;
    font-size: var(--gn-fz-body);
    font-weight: 400;
    line-height: 30px;               /* 20 × 1.48 */
    color: var(--gn-brown-600);
}
.gnr .gnr-child__cta { display: flex; gap: 20px; margin-top: 36px; }
.gnr .gnr-child__cta .gn-btn {
    height: 54px;
    padding: 0 24px;
    border-radius: var(--gn-r-pill);
    background: var(--gn-olive-500);
    font-size: var(--gn-fz-body2);
    font-weight: 600;
}
.gnr .gnr-child__cta .gn-btn--line {
    font-size: 16px;                 /* 8/13 — 채움 버튼보다 한 단계 작게 (시안) */
    background: var(--gn-white);
    border-color: var(--gn-olive-500);
    color: var(--gn-olive-500);
}
.gnr .gnr-child__cta .gn-btn--line:hover { background: var(--gn-olive-50); }
/* 좌우 버튼 — 흰 원형 48, 카드 세로 중앙 (좌 240 / 우 1090) */
.gnr .gnr-child__prev,
.gnr .gnr-child__next {
    position: absolute;
    z-index: 20;                      /* Swiper 슬라이드가 transform 으로 스택 컨텍스트를 만들어 클릭을 가로챈다 — 넉넉히 위로 */
    top: 146px;
    width: 48px;
    height: 48px;
    background: var(--gn-white);
    /* 8/13 outline → 8/14 shadow 링으로 (border 는 안쪽 차오름 원과 사이에 틈이 보인다) */
    box-shadow: var(--gn-shadow-sm), inset 0 0 0 1px var(--gn-gray-400);   /* 링 1px → hover 2px */
}
.gnr .gnr-child__prev { left: calc(100% - 960px); }   /* 그리드 좌측 모서리 (1920 실측 240) */
.gnr .gnr-child__next { left: calc(100% - 110px); }   /* pill 우측 여백 62 (1920 실측 1090) */
/* 배경 반전은 공통 차오름(::before)이 담당 — 배경색을 직접 바꾸면 차오름이 안 보인다 */
.gnr .gnr-child__prev > img,
.gnr .gnr-child__next > img { width: 26px; height: 31px; }
/* 8/14 — "다음 아동" 화살표를 gn-arrowlink__ico::after 화살표 스타일로 통일 (선 굵기 2px) */
/* 아동 네비 화살표 (8/14) — 히어로 스와이퍼와 같은 chevron SVG.
   버튼 배경이 흰색이라 어두운 색(#1C1B1B, 히어로 원본과 동일) 버전을 쓴다 */
.gnr .gnr-child__prev-ico,
.gnr .gnr-child__next-ico {
    display: block;
    width: 32px;
    height: 38px;
    background: no-repeat center / contain;
}
.gnr .gnr-child__prev-ico { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_l_k.svg); }
.gnr .gnr-child__next-ico { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r_k.svg); }
/* hover = 반전 (8/14) — 색이 다른 두 장을 겹쳐 두고 opacity 로 크로스페이드.
   (background-image 는 transition 이 안 걸려 툭 끊긴다) */
.gnr .gnr-child__prev-ico,
.gnr .gnr-child__next-ico { position: relative; z-index: 1; background-image: none; }
.gnr .gnr-child__prev-ico::before,
.gnr .gnr-child__next-ico::before,
.gnr .gnr-child__prev-ico::after,
.gnr .gnr-child__next-ico::after {
    content: '';
    position: absolute;
    inset: 0;
    background: no-repeat center / contain;
    transition: opacity var(--gn-dur) var(--gn-ease);
}
/* ::before = 기본(어두움) / ::after = 반전(흰색) */
.gnr .gnr-child__prev-ico::before { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_l_k.svg); opacity: 1; }
.gnr .gnr-child__next-ico::before { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r_k.svg); opacity: 1; }
.gnr .gnr-child__prev-ico::after  { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_l.svg);   opacity: 0; }
.gnr .gnr-child__next-ico::after  { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r.svg);   opacity: 0; }
.gnr .gnr-child__prev:hover .gnr-child__prev-ico::before,
.gnr .gnr-child__next:hover .gnr-child__next-ico::before { opacity: 0; }
.gnr .gnr-child__prev:hover .gnr-child__prev-ico::after,
.gnr .gnr-child__next:hover .gnr-child__next-ico::after { opacity: 1; }
.gnr .gnr-child__prev:hover .gnr-child__prev-ico { animation: gn-arrow-nudge-l .45s var(--gn-ease); }
.gnr .gnr-child__next:hover .gnr-child__next-ico { animation: gn-arrow-nudge .45s var(--gn-ease); }
.gnr .gnr-child__prev:hover,
.gnr .gnr-child__next:hover { box-shadow: var(--gn-shadow-sm), inset 0 0 0 2px var(--gn-brown-600); }

/* 탭 뷰 전환 (8/13) — all / africa / asia 세 벌을 모두 init 해두고 display 로 갈아끼운다.
   africa·asia 는 "사진 스와이퍼 + 텍스트 스와이퍼" 결합이라, 두 스와이퍼가 각각
   기존 .gnr-child__photo(원형 마스크) / .gnr-child__text 위치를 그대로 쓴다. */
/* --------------------------------------------------------------------------
   [아동결연] 스켈레톤 (2026-09-10)
   API 응답 전·탭 전환 중 빈 카드가 보이는 문제(9/9 피드백, 9/10 협의)로 도입.
   좌표·치수는 실제 슬라이드(.gnr-child__photo / __text / __cta)와 동일하게 잡아
   데이터가 들어올 때 요소가 움직이지 않는다.
   -------------------------------------------------------------------------- */
.gnr .gnr-child__skel {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--gn-white);   /* 뒤쪽(저작 슬라이드·combo)이 비치지 않게 불투명 */
    transition: opacity var(--gn-dur) var(--gn-ease);
}
.gnr .gnr-child__skel[hidden] { display: none; }
.gnr .gnr-child__skel.is-out { opacity: 0; pointer-events: none; }
.gnr .gnr-child__skel-photo {
    position: absolute;
    left: calc(100% - 880px);
    top: 30px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
}
.gnr .gnr-child__skel-text { position: absolute; left: calc(100% - 567px); top: 55px; }
.gnr .gnr-child__skel-line { display: block; border-radius: var(--gn-r-xs); }
.gnr .gnr-child__skel-line--quote { width: 380px; height: 24px; }
.gnr .gnr-child__skel-line--desc  { width: 340px; height: 20px; margin: 24px 0 0 14px; }
.gnr .gnr-child__skel-line--desc2 { width: 250px; height: 20px; margin: 10px 0 0 14px; }
.gnr .gnr-child__skel-cta { display: flex; gap: 20px; margin-top: 36px; }
.gnr .gnr-child__skel-line--btn  { width: 203px; height: 54px; border-radius: var(--gn-r-pill); }
.gnr .gnr-child__skel-line--btn2 { width: 215px; height: 54px; border-radius: var(--gn-r-pill); }
/* 회색 블록 공통 — 블록 안쪽으로만 빛이 지나가는 로딩 표현.
   ::after 그라디언트를 블록 모양(원형·라운드)에 overflow:hidden 으로 잘라 쓴다 */
.gnr .gnr-child__skel-photo,
.gnr .gnr-child__skel-line {
    overflow: hidden;
    background: var(--gn-gray-100);   /* #D9D9D9 — gray-100(#EC~) 은 흰 카드 위에서 빛 띠가 안 읽힌다 */
}
/* 사진은 위에서 absolute 로 좌표를 잡으므로 여기서 position 을 건드리지 않는다
   (relative 로 덮으면 좌표가 풀리고, span 이라 inline 으로 접혀 사라진다) */
.gnr .gnr-child__skel-line { position: relative; }
.gnr .gnr-child__skel-photo::after,
.gnr .gnr-child__skel-line::after {
    content: '';
    position: absolute;
    /* 빛 띠는 고정 폭 슬래브 + skewX 로 기울인다.
       linear-gradient 의 각도는 요소 비율에 따라 실제 기울기가 달라져(원형 280 vs 바 340x20)
       띠가 가로로 눕거나 경계가 보이므로 각도 대신 skew 로 잡는다 (2026-09-10) */
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 45%;
    background: linear-gradient(90deg,
                rgba(255, 255, 255, 0),
                rgba(255, 255, 255, .95) 50%,
                rgba(255, 255, 255, 0));
    transform: skewX(-24deg) translateX(-250%);
    animation: gn-skel-shine 1.6s linear infinite;
}
@keyframes gn-skel-shine {
    to { transform: skewX(-24deg) translateX(400%); }
}
/* 사진 원형은 폭이 크니 살짝 늦게 지나가 카드 전체가 한 번에 훑히는 느낌을 준다 */
.gnr .gnr-child__skel-line--desc::after  { animation-delay: .08s; }
.gnr .gnr-child__skel-line--desc2::after { animation-delay: .12s; }
.gnr .gnr-child__skel-line--btn::after,
.gnr .gnr-child__skel-line--btn2::after  { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
    .gnr .gnr-child__skel-photo::after,
    .gnr .gnr-child__skel-line::after { animation: none; opacity: 0; }
}

/* 탭 전환 시 사진이 툭 나타나지 않도록 — 조회·이미지 도착까지 흐린 상태, 완료 시 main.js 가
   `.is-ready` 부여 (2026-09-10. 종전엔 index.jsp 인라인 style 로 저작 스와이퍼에 걸려 있었다) */
.gnr .gnr-child__combo {
    position: static;
    opacity: .15;
    transition: opacity .3s var(--gn-ease);
}
.gnr .gnr-child__combo.is-ready { opacity: 1; }
.gnr .gnr-child__photoSw .swiper-slide,
.gnr .gnr-child__textSw .swiper-slide { height: auto; }
/* 슬라이드마다 자기 영역만 보이게 — scale 확대분(280→434)이 옆 슬라이드를 침범해
   전환 중 두 장이 겹쳐 보이던 문제 차단 (8/13) */
.gnr .gnr-child__photoSw .swiper-slide { overflow: hidden; }
.gnr .gnr-child__photoSw .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;               /* 8/25 — 확대 크롭(1.55) 제거, all 뷰와 동일 사유 (퍼블 수정.pptx) */
}
/* asia(flip) — 3D 회전은 컨테이너의 원형 클리핑과 상성이 나쁘다(회전 중 잘려 보임).
   컨테이너는 클리핑을 풀고 perspective 만 주고, 원형 마스크를 슬라이드 각각으로 옮겨
   "원형 카드가 뒤집히는" 형태가 되게 한다 (8/13) */
.gnr [data-child-view="asia"] .gnr-child__photoSw {
    overflow: visible;
    border-radius: 0;
    perspective: 1000px;
}
.gnr [data-child-view="asia"] .gnr-child__photoSw .swiper-slide {
    border-radius: 50%;
    overflow: hidden;
    backface-visibility: hidden;
}
.gnr .gnr-child__textSw { width: 500px; }

/* 텍스트 등장 모션 (8/14) — 훅은 `.is-arrived` (main.js 가 전환이 끝난 뒤에만 붙인다).
   Swiper 기본 `.swiper-slide-active` 는 전환 "시작" 시점에 옮겨붙어 이전 텍스트와 겹치므로 쓰지 않는다.
   기본은 우측 36px 에서 투명 대기 → 도착한 슬라이드만 인용 → 설명 → 버튼 순(110ms)으로 올라온다. */
.gnr .gnr-child__textSw .swiper-slide .gnr-child__quote,
.gnr .gnr-child__textSw .swiper-slide .gnr-child__desc,
.gnr .gnr-child__textSw .swiper-slide .gnr-child__cta {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity .4s linear, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.gnr .gnr-child__textSw .is-arrived .gnr-child__quote,
.gnr .gnr-child__textSw .is-arrived .gnr-child__desc,
.gnr .gnr-child__textSw .is-arrived .gnr-child__cta {
    opacity: 1;
    transform: translateX(0);
}
.gnr .gnr-child__textSw .is-arrived .gnr-child__desc { transition-delay: .11s; }
.gnr .gnr-child__textSw .is-arrived .gnr-child__cta  { transition-delay: .22s; }

/* --------------------------------------------------------------------------
   section 06 — 스토리   (최종 컨펌 시안 1266:4783 / 1920x1003)
   대형 2장(492x387 썸네일 r12) + 우측 리스트 3건(썸네일 192x152 + 텍스트).
   태그는 배경 없는 올리브 텍스트, 제목은 24 Bold.
   -------------------------------------------------------------------------- */
/* 다음 섹션(후기)이 top 여백 없는 풀블리드라 이 섹션이 하단 간격을 소유 */
.gnr .gnr-story { margin-top: var(--gn-sec-mt); }
.gnr .gnr-story .gn-sechead__more { margin-top: 22px; }   /* 실측 보정 (공통 gap-xs 오버라이드) */
.gnr .gnr-story__cards {
    display: grid;
    grid-template-columns: 492px 492px 1fr;
    gap: 16px;
    margin-top: 48px !important;      /* .gn-sechead + * (100) 오버라이드 */
}
.gnr .gnr-story__feature { display: contents; }
.gnr .gnr-story__feature > li:first-child { grid-column: 1; }
.gnr .gnr-story__feature > li:last-child  { grid-column: 2; }
.gnr .gnr-story__list { grid-column: 3; margin-left: 3px; }

.gnr .gnr-story__card { display: block; }
.gnr .gnr-story__card:hover .gnr-story__thumb img,
.gnr .gnr-story__item:hover .gnr-story__item-thumb img { transform: scale(1.04); }

.gnr .gnr-story__thumb {
    display: block;
    height: 387px;
    border-radius: 12px;
    overflow: hidden;
}
.gnr .gnr-story__thumb img,
.gnr .gnr-story__item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gn-dur-slow) var(--gn-ease-out);
}
.gnr .gnr-story__tag {
    display: block;
    font-size: var(--gn-fz-body2);
    font-weight: 700;
    line-height: 1;
    color: var(--gn-olive-500);
}
.gnr .gnr-story__card .gnr-story__tag { margin-top: 28px; }
.gnr .gnr-story__name {
    display: block;
    margin-top: 12px;
    font-size: 22px;                 /* 8/12 시안 대조 24→22, lh 1.48 */
    font-weight: 700;
    line-height: 33px;
    color: var(--gn-gray-800);
}

/* 우측 리스트 — 썸네일 192 + gap 25 + 텍스트, 행 간격 28 */
.gnr .gnr-story__list > li + li { margin-top: 28px; }
.gnr .gnr-story__item { display: flex; align-items: center; gap: 25px; }
.gnr .gnr-story__item-thumb {
    flex: none;
    width: 192px;
    height: 152px;
    border-radius: 12px;
    overflow: hidden;
}
.gnr .gnr-story__item-body { flex: 1 1 auto; min-width: 0; }
.gnr .gnr-story__item-name {
    margin-top: 14px;
    font-size: 22px;                 /* 8/12 시안 대조 — 대형 카드와 동일 22/33 */
    font-weight: 700;
    line-height: 33px;
    color: var(--gn-gray-800);
    /* 8/24 요청 — 영역을 넘으면 자동 줄바꿈 (구 nowrap 은 긴 제목이 흘러나감).
       2줄 말줄임 + 한글 어절 단위 줄바꿈 (MO 와 동일 처리) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: keep-all;
}

/* --------------------------------------------------------------------------
   section 07 — 함께할 수 있는 다양한 활동   (996:8829 / 1920x1010)
   좌측 대형 배너(고정) + 우측 카드 캐러셀(우측 화면 밖으로 흘러나감)
   -------------------------------------------------------------------------- */
.gnr .gnr-act { margin-top: var(--gn-sec-mt); }
/* inner 에 overflow:hidden 금지 — ctrl(top 625 + 48 = 673)/배너(top 0 + height 680) 경계에 딱 맞닿아 있어
   여백 없이 잘릴 수 있음. 트랙/배너 클리핑은 각각 .gnr-act__carousel / .gnr-act__feature 의 overflow 가 담당 */
.gnr .gnr-act__inner { position: relative; height: 680px; }

/* 배너 자체도 드래그 대상 — user-select/드래그 차단 포함 */
.gnr .gnr-act__feature {
    position: absolute;
    left: var(--gn-edge);
    top: 0;
    width: 540px;
    height: 680px;   /* 8/14 — 요청 스펙 540x680 (직전 라운드의 4:5 비율 조정은 관리자 확인 결과 오적용이라 원복) */
    border-radius: var(--gn-r-xl);   /* 8/14 — 네 모서리 20px 균등 라운드 */
    overflow: hidden;
    user-select: none;
    -webkit-user-drag: none;
}
/* 이미지가 드래그를 가로채지 않게 */
.gnr .gnr-act__feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}
.gnr .gnr-act__feature .gn-badge { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); }
/* 배너 전환용 슬라이드 레이어 — 카드 트랙과 같은 방향으로 밀리며 교체 */
.gnr .gnr-act__feature-slide { position: absolute; inset: 0; display: block; will-change: transform; }

.gnr .gnr-act__title {
    position: absolute;
    left: calc(var(--gn-edge) + 618px);
    top: 0;
    width: 466px;
    font-family: var(--gn-font-brand);
    font-weight: 700;
    font-size: var(--gn-fz-head);
    line-height: var(--gn-lh-head);
    color: var(--gn-gray-900);
}
.gnr .gnr-act__title em { color: var(--gn-title-green); }

/* overflow hidden — prev 전환 때 트랙 앞에 붙는 카드가 좌측(대형 배너 쪽)으로
   삐져나오지 않게 카드 스와이퍼 자체에서 자름 (우측은 컨테이너가 화면 끝까지라 동일) */
.gnr .gnr-act__carousel { position: absolute; left: calc(var(--gn-edge) + 620px); top: 192px; right: 0; overflow: hidden; }
.gnr .gnr-act__track { display: flex; gap: var(--gn-col-gap); }
.gnr .gnr-act__card {
    flex: none;
    position: relative;
    width: 320px;
    height: 400px;
    border-radius: var(--gn-r-xl);   /* 8/14 — 네 모서리 20px 균등 라운드 */
    background: var(--gn-white);
    overflow: hidden;
    transition: box-shadow var(--gn-dur) var(--gn-ease);
}
/* 호버 시 카드 그림자 (8/11 주석) */
.gnr .gnr-act__card:hover { box-shadow: var(--gn-shadow-md); }
.gnr .gnr-act__card img { width: 100%; height: 100%; object-fit: cover; }
/* a 가 inline 이라 히트영역이 320x21 로 붕괴됐다 → 카드 전체를 덮는다 (8/18 검수) */
.gnr .gnr-act__card > a { position: absolute; inset: 0; display: block; }
.gnr .gnr-act__card .gn-badge { pointer-events: none; }
.gnr .gnr-act__card .gn-badge { position: absolute; left: 50%; top: 19px; transform: translateX(-50%); }

/* 최종 컨펌 시안의 배너·카드 컷은 배지가 소재 안에 인쇄된 상태라 마크업 배지와 겹친다.
   배지 마크업은 실데이터(배지 없는 원본) 연동용으로 남겨두고 임시컷 동안만 숨김. */
.gnr .gnr-act .gn-badge { display: none; }

.gnr .gnr-act__ctrl {
    position: absolute;
    left: calc(var(--gn-edge) + 620px);
    right: var(--gn-edge);           /* 8/13 시안 — 네비가 그리드 우측 끝 정렬 */
    top: 625px;                      /* 8/14 시안 실측 — 카드 하단(트랙 top 332 + 400 = 732)에서 진행바까지 55px */
    display: flex;
    align-items: center;
    gap: 30px;
    width: 728px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gnr .gnr-act__ctrl .gn-carousel__bar { flex: 1 1 auto; width: auto; }   /* 8/13 시안 — 트랙이 네비 직전까지 */
.gnr .gnr-act__ctrl .gn-carousel__nav { gap: 10px; }                       /* 8/13 시안 — 24 는 과대 */

/* --------------------------------------------------------------------------
   section 08 — 후원 후기   (996:8878 / 1920x763)
   배경 사진 위에 후기 카드 2열이 서로 반대 방향으로 흐른다
   -------------------------------------------------------------------------- */
.gnr .gnr-review { position: relative; height: 763px; margin-top: var(--gn-sec-mt); overflow: hidden; }
.gnr .gnr-review__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gnr .gnr-review__title {
    position: absolute;
    left: calc(var(--gn-edge) + 11px);
    top: 100px;
    width: 625px;
    font-family: var(--gn-font-brand);
    font-weight: 700;
    font-size: var(--gn-fz-display);
    line-height: var(--gn-lh-display);
    color: var(--gn-white);
}
.gnr .gnr-review__ctrl { position: absolute; left: calc(var(--gn-edge) + 415px); top: 259px; display: flex; align-items: center; gap: 12px; }
/* 이 섹션 chevron 은 원본이 16x10 가로형 — 공통 32x38 규칙을 원본 비율로 되돌림 */
.gnr .gnr-review__ctrl .gn-btn-circle > img { width: 32px; height: 38px; }   /* 8/14 — 통일 chevron SVG 캔버스 그대로 */
/* 세로 네비는 방향대로 위·아래로 바운스 (8/14 요청) — 공통 좌우 튕김을 덮어쓴다 */
.gnr .gnr-review__ctrl [data-gn-vscroll-up]:hover > img   { animation-name: gn-arrow-nudge-u; }
.gnr .gnr-review__ctrl [data-gn-vscroll-down]:hover > img { animation-name: gn-arrow-nudge-d; }
/* 일시정지는 방향성이 없어 튕김 제외 — 색 반전만 (8/14 요청) */
.gnr .gnr-review__ctrl [data-gn-vscroll-toggle]:hover > img { animation: none; }
.gnr .gnr-review__ctrl [data-gn-vscroll-toggle] > img { width: 20px; height: 24px; }   /* 8/13 시안 — 14 는 과소 */
/* 재생/일시정지 토글 (8/13) — play 아이콘 에셋 부재로 임시 CSS 삼각형.
   디자이너에게 play svg 수급 후 img 스왑 방식으로 교체할 것 */
.gnr .gnr-review__ctrl [data-gn-vscroll-toggle] { position: relative; }
.gnr .gnr-review__ctrl [data-gn-vscroll-toggle][aria-pressed="true"] > img { visibility: hidden; }
.gnr .gnr-review__ctrl [data-gn-vscroll-toggle][aria-pressed="true"]::after {
    content: '';
    position: absolute;
    z-index: 1;                      /* 차오르는 원(::before) 위 */
    left: 55%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent var(--gn-white);
    transition: border-color var(--gn-dur-fast) var(--gn-ease);
}
/* hover 반전 — pause 는 <img> 라 공통 filter:invert 로 뒤집히지만, play 는 CSS 삼각형이라
   invert 대상이 아니다. 같은 반전 결과(흰 → 검정)를 border-color 로 직접 준다 */
.gnr .gnr-review__ctrl [data-gn-vscroll-toggle][aria-pressed="true"]:hover::after {
    border-left-color: var(--gn-gray-900);
}

.gnr .gnr-review__col { position: absolute; width: 360px; }
.gnr .gnr-review__col--1 { left: calc(var(--gn-edge) + 696px); top: 69px; }
.gnr .gnr-review__col--2 { left: calc(var(--gn-edge) + 1080px); top: -77px; }
.gnr .gnr-review__flow { display: flex; flex-direction: column; gap: var(--gn-col-gap); }

.gnr .gnr-review__card {
    width: 360px;
    height: 280px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px 29px 29px;
    border: 1px solid var(--gn-line-card);
    border-radius: var(--gn-r-xl) 0 var(--gn-r-xl) 0;
    background: var(--gn-white);
    box-shadow: var(--gn-shadow-md);
}
/* 내보낸 SVG 가 y 반전 전 상태 — 시안(❝ 위로 볼록)대로 되돌림 */
.gnr .gnr-review__quote { display: block; width: 48px; height: 58px; transform: scaleY(-1); }
.gnr .gnr-review__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 4px;
    padding-bottom: 17px;
    font-size: var(--gn-fz-body2);
    font-weight: 600;
    line-height: 29.25px;
    color: var(--gn-brown-600);
}
.gnr .gnr-review__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid var(--gn-line-card);
    font-size: var(--gn-fz-small);
    font-weight: 600;
    line-height: var(--gn-lh-small);
    color: var(--gn-brown-400);
}

/* --------------------------------------------------------------------------
   section 09 — 새소식   (최종 컨펌 시안 1266:4783 / 1920x724)
   썸네일 그리드 → 텍스트 리스트형. 타이틀 중앙 + (탭 | 더보기) 툴바 → 리스트.
   행 높이 92, 행마다 하단 1px 구분선. [태그 pill 아웃라인 | 제목 20 Bold | 날짜]
   -------------------------------------------------------------------------- */
.gnr .gnr-news { margin-top: var(--gn-sec-mt); }
.gnr .gnr-news__title { text-align: center; }
.gnr .gnr-news__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 48px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--gn-line-soft);
}

.gnr .gnr-news__item { position: relative; border-bottom: 1px solid var(--gn-line-soft); }
.gnr .gnr-news__item > a {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 92px;
}
/* 호버 — 타이틀 글자 밑에서만 언더라인이 좌→우로 차오름 (8/11 : 행 전체 아니라 글자 폭) */
.gnr .gnr-news__item-t {
    background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
    padding-bottom: 2px;
    transition: background-size var(--gn-dur) var(--gn-ease);
}
.gnr .gnr-news__item > a:hover .gnr-news__item-t { background-size: 100% 1px; }
.gnr .gnr-news__tag {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 44px;
    border: 1px solid var(--gn-olive-500);
    border-radius: var(--gn-r-pill);
    font-size: var(--gn-fz-cap);
    font-weight: 700;
    line-height: 1;
    color: var(--gn-olive-500);
}
.gnr .gnr-news__item-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--gn-fz-body);
    font-weight: 700;
    line-height: 30px;
    color: var(--gn-gray-800);
}
.gnr .gnr-news__item-date {
    flex: none;
    font-size: var(--gn-fz-cap);
    font-weight: 400;
    line-height: var(--gn-lh-cap);
    color: var(--gn-gray-500);
}

/* 공지/뉴스 탭 — 썸네일 카드 2장 + 우측 리스트 3건 (8/11 최종 1300:7826 실측)
   그리드 464 + 24 + 464 + 25 + 463 = 1440 */
.gnr .gnr-news__notice {
    display: grid;
    grid-template-columns: 464px 464px 1fr;
    gap: 24px;
    margin-top: 48px;
}
/* 카드/리스트 공용 태그 pill — 리스트형(.gnr-news__item)의 90x44 고정과 별개, 내용 폭 가변.
   8/12 시안 대조 : px24 py8 / fz18 Bold #829930 / 보더 1.3px #7C9B2B (카드·리스트 공통) */
/* 공지/뉴스 탭 태그(#보도자료 #언론보도 #GN News) = 보더(라운드 박스) 없이 텍스트만
   — 8/25 퍼블 수정.pptx. 지역소식/보도자료 탭(.gnr-news__list)은 pill 유지 */
.gnr .gnr-news__notice .gnr-news__tag {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
}

.gnr .gnr-news__card { display: block; }
.gnr .gnr-news__card-thumb {
    display: block;
    height: 316px;
    border-radius: 12px;
    overflow: hidden;
}
.gnr .gnr-news__card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gn-dur-slow) var(--gn-ease-out);
}
/* 호버 시 카드 안 이미지 확장 (8/11 주석) */
.gnr .gnr-news__card:hover .gnr-news__card-thumb img { transform: scale(1.04); }
.gnr .gnr-news__card .gnr-news__tag--card { margin-top: 28px; }
.gnr .gnr-news__card-title {
    display: block;
    margin-top: 12px;
    font-size: var(--gn-fz-sub3);
    font-weight: 700;
    line-height: 36px;
    color: var(--gn-gray-800);
}
.gnr .gnr-news__date {
    display: block;
    margin-top: 12px;
    font-size: var(--gn-fz-cap);
    font-weight: 400;
    line-height: var(--gn-lh-cap);
    color: var(--gn-gray-500);
}

.gnr .gnr-news__side > li + li { margin-top: 20px; }
.gnr .gnr-news__side > li:not(:last-child) > a {
    padding-bottom: 20px;
    border-bottom: 2px solid #D9D9D9;   /* 8/12 시안 대조 — 1px 연회색 → 2px */
}
.gnr .gnr-news__side > li > a { display: block; }
.gnr .gnr-news__side > li > a:hover .gnr-news__side-title { text-decoration: underline; }
.gnr .gnr-news__side-title {
    margin-top: 16px;
    /* 8/24 요청 — 긴 제목은 어절 단위 자동 줄바꿈 + 2줄 말줄임 (스토리 리스트와 동일 처리) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: keep-all;
    font-size: 22px;                 /* 8/12 시안 대조 18→22 SemiBold, lh 1.48 */
    font-weight: 600;
    line-height: 33px;
    color: var(--gn-gray-800);
}
.gnr .gnr-news__side .gnr-news__date { margin-top: 8px; font-size: 14px; line-height: 21px; color: #767966; }

/* --------------------------------------------------------------------------
   section 10 — 나에게 맞는 방식으로 나눔   (최종 컨펌 시안 1266:4783 / 1920x743)
   좌측 대형 1장(709x424) + 우측 소형 4장(343x200) 모자이크, 라운드 20 전체
   -------------------------------------------------------------------------- */
.gnr .gnr-ways { margin-top: var(--gn-sec-mt); }
.gnr .gnr-ways__title { text-align: center; }
.gnr .gnr-ways__grid {
    display: grid;
    /* 8/24 — 최신 PSD(A-2 ver2_0820) 실측으로 갱신 : 대형 713x487 / 소형 342x232(+233) / 행간 22.
       구 709/343 x 200 은 이전 시안(996:8829) 값이라 카드가 납작했다.
       열 합 1397 + 남는 43 은 space-between 이 두 열 사이에 균등 분배 (시안 21/22) */
    grid-template-columns: 713px 342px 342px;
    grid-template-rows: 232px 233px;
    row-gap: 22px;
    justify-content: space-between;
    margin-top: 84px;
}

.gnr .gnr-ways__big {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
    border-radius: var(--gn-r-xl);
    overflow: hidden;
}
.gnr .gnr-ways__card {
    position: relative;
    border-radius: var(--gn-r-xl);
    overflow: hidden;
}
/* 배경 사진만 cover — 버튼/데코 img 까지 늘어나지 않게 첫 자식으로 한정 */
.gnr .gnr-ways__big > img:first-child,
.gnr .gnr-ways__card > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gn-dur-slow) var(--gn-ease-out);
}
/* 호버 시 카드 안 이미지 확장 (8/11 주석) */
.gnr .gnr-ways__big:hover > img:first-child,
.gnr .gnr-ways__card:hover > img:first-child { transform: scale(1.04); }


.gnr .gnr-ways__big-body { position: absolute; left: 40px; top: 40px; z-index: 1; }   /* 8/24 검수 — top 48→40 */
.gnr .gnr-ways__big-body > span,
.gnr .gnr-ways__big-body > strong { display: block; }
/* 8/11 최종 — 밝은 사진 좌측 위 어두운 텍스트 (구 흰 텍스트 시안에서 변경) */
.gnr .gnr-ways__eyebrow {
    font-family: var(--gn-font);
    font-weight: 700;
    font-size: var(--gn-fz-body);
    line-height: var(--gn-lh-body);
    letter-spacing: var(--gn-ls-wide);
    color: var(--gn-olive-600);
}
.gnr .gnr-ways__big-title {
    margin-top: 12px;
    font-size: var(--gn-fz-sub);
    font-weight: 700;
    line-height: var(--gn-lh-sub);
    letter-spacing: var(--gn-ls-wide);
    color: var(--gn-gray-900);
}
.gnr .gnr-ways__big-desc {
    margin-top: 6px;                 /* 8/24 검수 — 12→6 */
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    letter-spacing: var(--gn-ls-wide);
    color: var(--gn-gray-800);
}

/* --- 영상(VIDEO) 타입 변형 (8/24 확정 — 기본은 주석, 개발이 배너 타입으로 분기) ---
   PSD A-2 ver2_0820 실측 : 텍스트 흰색(eyebrow 없음) / 상단 음영 h247 검정 60%→0 (60% 를 43px 까지 유지) /
   플레이 버튼 = 정중앙 원 124 (흰 링 5 + 유리 채움) + 흰 삼각형 38x44. 클릭 = 캠페인 페이지 이동 */
.gnr .gnr-ways__big--video::before {
    content: '';
    position: absolute;
    inset: 0;                         /* 8/24 검수 — 딤을 카드 전체로 (위 진하게 → 아래 30% 유지, MO 와 동일) */
    z-index: 1;                       /* hover 시 transform 된 사진이 위로 올라오지 않게 명시 */
    background: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .8) 4%, rgba(0, 0, 0, .3) 25%, rgba(0, 0, 0, .3) 100%);
    pointer-events: none;
}
.gnr .gnr-ways__big--video .gnr-ways__big-body { z-index: 2; }
.gnr .gnr-ways__big--video .gnr-ways__big-title { margin-top: 0; color: var(--gn-white); }   /* eyebrow 없음 */
.gnr .gnr-ways__big--video .gnr-ways__big-desc  { color: var(--gn-white); }
.gnr .gnr-ways__play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(50% + 15px);           /* 8/24 검수 — MO 조정본과 동일 스타일 (구 PSD 실측 124/링5/정중앙) */
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    box-shadow: inset 0 0 0 2px var(--gn-white);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}
/* 삼각형 — 중앙 기준 배치, 시각 무게 보정으로 살짝 우측(54%) */
.gnr .gnr-ways__play::after {
    content: '';
    position: absolute;
    left: 54%;
    top: 50%;
    width: 38px;
    height: 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='44' viewBox='0 0 38 44'%3E%3Cpath d='M9 9 L30 22 L9 35 Z' fill='white' stroke='white' stroke-width='9' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: translate(-50%, -50%);
}
/* 원형 링 버튼 — 링은 보더, ↗ 화살표는 CSS 로 분리 (section10_ico01.svg 재현, 8/11)
   카드 호버 시 : 사진만 scale (화살표 제외), 화살표는 우상향으로 나가고 좌하단 복제가 중앙 진입 */
.gnr .gnr-ways__go {
    position: absolute;
    left: 608px;
    top: 388px;                       /* 8/24 — 대형 424→487 확대에 맞춰 재계산 (하단 여백 39 유지) */
    z-index: 1;
    border: 2px solid var(--gn-white);
    border-radius: 50%;
    overflow: hidden;                 /* 화살표 교체 모션 마스크 */
}
.gnr .gnr-ways__go-arrow {
    position: absolute;
    inset: 0;
    transition: transform .45s var(--gn-ease);
}
/* 대각 라인 (svg path 22,38→40,22 재현) */
.gnr .gnr-ways__go-arrow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--gn-white);
    transform: translate(-50%, -50%) rotate(-42deg);
}
/* 우상단 헤드 (svg path 28.4,22 H40 V32.4) */
.gnr .gnr-ways__go-arrow::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 20px;
    width: 12px;
    height: 10px;
    border-top: 2px solid var(--gn-white);
    border-right: 2px solid var(--gn-white);
}
.gnr .gnr-ways__go-arrow--copy { transform: translate(-100%, 100%); }   /* 좌하단 대기 */
.gnr .gnr-ways__big:hover .gnr-ways__go-arrow { transform: translate(100%, -100%); }
.gnr .gnr-ways__big:hover .gnr-ways__go-arrow--copy { transform: translate(0, 0); }

.gnr .gnr-ways__label {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;                  /* 8/24 최신 PSD 실측 — 25 / SemiBold (구 20/700) */
    font-weight: 600;
    line-height: 36px;
    letter-spacing: var(--gn-ls-wide);
    color: var(--gn-white);
}
/* 좋은이웃가게 라벨 뒤 원형 데코 */
/* SVG 가 blur 여백 포함 500x377 캔버스 — 타원 본체(198x75)가 시안 좌표(81,82)에
   오도록 여백만큼 당겨 배치, 카드 밖은 overflow 로 잘림 */
.gnr .gnr-ways__deco { position: absolute; left: -70px; top: -69px; z-index: 1; width: 500px; max-width: none; height: 377px; }

/* 8/11 — 문구 없는 원본 컷으로 교체됨에 따라 라벨/딤/화살표 오버레이 재활성.
   소형 카드는 흰 라벨 가독용 딤을 CSS 로 깐다 (시안 룩) */
.gnr .gnr-ways__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(28, 27, 27, .32);
}
.gnr .gnr-ways__card .gnr-ways__label,
.gnr .gnr-ways__card .gnr-ways__deco { z-index: 1; }   /* 딤 위로 */

/* --------------------------------------------------------------------------
   section 11 — 후원 첫걸음 + 뉴스레터 + 푸터   (996:9056 / 1920x1211)
   -------------------------------------------------------------------------- */
.gnr .gnr-first { margin-top: var(--gn-sec-mt); text-align: center; }
.gnr .gnr-first__title {
    font-family: var(--gn-font-brand);
    font-weight: 700;
    font-size: var(--gn-fz-head);
    line-height: var(--gn-lh-head);
    color: var(--gn-gray-900);
}
.gnr .gnr-first__title em { color: var(--gn-title-green); }
.gnr .gnr-first .gn-arrowlinks { margin-top: 56px; }   /* 8/18 검수 — 타이틀과 붙어 보임, 32→56 */

/* --- 뉴스레터 --- */
/* 첫걸음 블록과 뉴스레터는 시안에서 붙어 있고(합계 625), 그 아래 100 띄우고 푸터 */
.gnr .gnr-nl { margin-top: 160px; padding-bottom: 0; }   /* 첫걸음과 결합 유닛 — 시안 간격 유지 (섹션 공통 300 미적용) */

.gnr .gnr-newsletter {
    position: relative;
    height: 230px;
    border-radius: var(--gn-r-xl);
    background: var(--gn-bg-soft);
    overflow: hidden;
}
.gnr .gnr-newsletter__title {
    position: absolute;
    left: 70px;
    top: 72px;
    font-size: var(--gn-fz-sub);
    font-weight: 700;
    line-height: var(--gn-lh-sub);
    letter-spacing: var(--gn-ls-tight);
    color: #414141;
}
.gnr .gnr-newsletter__desc {
    position: absolute;
    left: 70px;
    top: 127px;
    font-size: var(--gn-fz-body);
    font-weight: 400;
    line-height: var(--gn-lh-body);
    color: var(--gn-gray-500);
}
.gnr .gnr-newsletter__form {
    position: absolute;
    left: 622px;                      /* 시안 절대 862 - 컨테이너 좌 240 */
    top: 60px;
    right: 70px;
}
.gnr .gnr-newsletter__row { display: flex; align-items: center; gap: 14px; }
.gnr .gnr-newsletter__form .gn-input {
    height: 56px;
    padding: 14px 16px;
    border-color: var(--gn-gray-400);
    border-radius: var(--gn-r-sm);
    font-size: var(--gn-fz-body2);
    line-height: 24px;
}
.gnr .gnr-newsletter__form .gn-input::placeholder { color: var(--gn-gray-350); }
.gnr .gnr-newsletter__name  { width: 190px; }
.gnr .gnr-newsletter__email { flex: 1 1 auto; min-width: 0; }
.gnr .gnr-newsletter__submit {
    flex: none;
    width: 165px;
    height: 56px;
    justify-content: center;
    border-radius: var(--gn-r-sm);
    font-size: var(--gn-fz-body);
    font-weight: 700;
}
/* 관심사 체크박스 행 — 라벨(SemiBold) + 체크 4개, 시안 실측 gap 24 */
.gnr .gnr-newsletter__opts {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
}
.gnr .gnr-newsletter__opts-label {
    flex: none;
    white-space: nowrap;
    font-size: 18px;                 /* 8/13 시안 — 16 은 과소 */
    font-weight: 600;
    line-height: 1;
    color: var(--gn-gray-700);
}
.gnr .gnr-newsletter__opts .gn-check { flex: none; gap: 8px; }
.gnr .gnr-newsletter__opts .gn-check__text { white-space: nowrap; color: var(--gn-gray-700); }
.gnr .gnr-newsletter__agree .gn-check__text a { text-decoration: none; }


/* --------------------------------------------------------------------------
   로그인 콘텐츠 케이스 토글 (JSP 이식, 2026-08-25)
   리셋이 section 의 display 를 덮어 [hidden] 이 먹지 않으므로 명시한다.
   (탭 패널 관례와 동일 — 실서비스에서 개발이 1개 케이스만 렌더해도 무해)
   -------------------------------------------------------------------------- */
.gnr .gnr-my[hidden] { display: none; }


/* --------------------------------------------------------------------------
   [푸터]
   -------------------------------------------------------------------------- */
.gnr .gnr-footer {
    margin-top: 100px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    background: var(--gn-brown-600);
    color: var(--gn-gray-300);
}
.gnr .gnr-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gn-col-gap);
    padding: 32px 0 33px;
    border-bottom: 1px solid #999999;
}
.gnr .gnr-footer__nav { display: flex; flex-wrap: wrap; gap: 16px 24px; width: 744px; }
.gnr .gnr-footer__nav a {
    font-size: var(--gn-fz-cap);
    font-weight: 500;
    line-height: var(--gn-lh-cap);
    color: var(--gn-gray-300);
}
.gnr .gnr-footer__nav a:hover,
.gnr .gnr-footer__nav a.is-strong { font-weight: 600; color: var(--gn-white); }

.gnr .gnr-footer__sns { display: flex; flex-wrap: wrap; gap: 12px; width: 380px; }
.gnr .gnr-footer__sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gn-text-sub);   /* #948C85 */
    transition: background-color var(--gn-dur-fast) var(--gn-ease);
}
.gnr .gnr-footer__sns a:hover { background: var(--gn-brown-400); }
.gnr .gnr-footer__sns img { width: 23px; height: 23px; }
/* 블로그 : "blog" 레터링까지 svg 안에 포함된 단일 아이콘 (8/12 — em 오버레이 제거) */
.gnr .gnr-footer__sns-blog img { width: 17px; height: 17px; }

/* side(340) 컬럼이 상단 SNS 묶음과 같은 우측 라인에 정렬되도록 space-between */
.gnr .gnr-footer__body { display: flex; justify-content: space-between; gap: 40px; padding: 24px 0 48px; }
.gnr .gnr-footer__body > div:first-child { flex: 1 1 auto; min-width: 0; }
.gnr .gnr-footer__logo { display: block; width: 239px; }
.gnr .gnr-footer__info { margin-top: 16px; }
/* 8/11 실측 : 행 피치 30 (lh26 + 행간 4) / fz16 */
.gnr .gnr-footer__info p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--gn-gray-300);
}
.gnr .gnr-footer__info p + p { margin-top: 4px; }
.gnr .gnr-footer__copy { margin-top: 16px; }

.gnr .gnr-footer__side { flex: none; width: 380px; }
.gnr .gnr-footer__side .gn-btn {
    width: 48%;
    height: 56px;
    padding: 0 25px;
    gap: 8px;
    border-radius: 1000px;
    background: transparent;
    border-color: var(--gn-white);
    font-size: var(--gn-fz-cap);
    font-weight: 700;
    color: var(--gn-white);
}
.gnr .gnr-footer__side .gn-btn:hover { background: rgba(255, 255, 255, .12); }
.gnr .gnr-footer__side .gn-btn img { flex: none; width: 18px; }
.gnr .gnr-footer__side .gn-btn + .gn-btn img { width: 20px; }
.gnr .gnr-footer__side .gn-btn + .gn-btn { margin-top: 12px; }
.gnr .gnr-footer__contact-t {
    display: block;
    margin-top: 24px;                 /* 8/11 실측 (버튼 끝 124 → 라벨 148) */
    font-size: var(--gn-fz-small);
    font-weight: 700;
    line-height: 21px;
    color: var(--gn-white);
}
.gnr .gnr-footer__tels { display: flex; gap: 12px; margin-top: 16px; }
.gnr .gnr-footer__tel {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 16px;
    border-radius: var(--gn-r-box);
    background: var(--gn-pastel-blue);
    color: var(--gn-brown-600);
}
.gnr .gnr-footer__tel--green { background: var(--gn-pastel-green); }
.gnr .gnr-footer__tel dt { font-size: 13px; font-weight: 500; line-height: 20px; }
.gnr .gnr-footer__tel dd { margin-top: 6px; font-size: 18px; font-weight: 800; line-height: 24px; }   /* 8/11 실측 */
.gnr .gnr-footer__hours {
    margin-top: 16px;
    padding-left: 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--gn-white);
}
/* ========================================
   이미지형 메인 이슈 배너
   ======================================== */

.gnr .Top_Banner {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: #a1e6ad;
}

.gnr .Top_Banner .Top_BannerW {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.gnr .Top_Donation_Banner {
    display: block;

    width: 100%;
    max-width: 1920px;
    height: 75px;

    margin: 0;
    padding: 0;

    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 75px;

    font-size: 0;
    line-height: 0;
    text-indent: -9999px;

    overflow: hidden;
}


/* 이미지형 배너 X 버튼 */
.gnr .Top_Banner_Close {
    position: absolute;
    display: block;

    top: 50%;
    left: 50%;

    width: 18px;
    height: 18px;

    margin-left: 607px;

    transform: translateY(-50%);

    z-index: 10;

    background-image: url("/assets/images/main/Top_Donation_Close.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;

    font-size: 0;
    line-height: 0;
    text-indent: -9999px;

    overflow: hidden;
}
/* 이슈 로고배너(MAIN_ISSUE_LOGO_BANNER) + 브랜드 로고 조합.
   2026-09-21 — 운영(as-is)과 크기·위치를 맞춘다.
   운영은 배너를 background 로 깔고 91x56 창에서 잘라 쓴다(native 111x56 중 우측 20px 크롭).
   이식본이 <img width:91px> 로 전체를 0.82배 축소해 배지가 작아져 있었다.
   → 링크를 91x56 크롭 창으로 쓰고 이미지는 native 치수로 되돌림.
   margin-bottom -8px : 운영은 배너 박스(h56)가 로고(h36 + margin-top 12 = bottom 48)보다 8px 아래로 내려온다. */
.gnr .gn-logos {
    display: flex;
    align-items: flex-end; /* 두 로고 모두 아래 기준으로 정렬 */
    gap: 10px;             /* 로고 사이 간격 — 운영 .logos a:nth-child(2) margin-left 와 동일 */
}

/* 두 로고 조합일 때만 적용 — 링크가 inline 이라 생기는 baseline 여백(약 4px)이
   flex-end 정렬을 어긋나게 해서 제거한다. 배너 없는 단일 로고(.gn-logos 자체가 <a>)는 해당 없음. */
.gnr .gn-logos > a { display: block; font-size: 0; line-height: 0; }

.gnr .gn-logos__annivLink {
    display: block;
    width: 91px;
    height: 56px;
    margin-bottom: -8px;
    overflow: hidden;
    flex-shrink: 0;
}

.gnr .gn-logos__anniv {
    position: static;      /* absolute 해제 */
    display: block;
    width: auto;           /* 등록 이미지 native 치수 (운영 background no-repeat 와 동일) */
    max-width: none;       /* common.css .gnr img max-width:100% 해제 — 91px 창에 맞춰 줄어드는 것 방지 */
    flex-shrink: 0;
}

/* ==========================================================================
   영상 레이어 팝업
   ========================================================================== */

.popup_wrap.video_popup .popup {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 960px;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    background: transparent;
    overflow: visible;
}


/* 닫기 버튼 */
.popup_wrap.video_popup .popup_head {
    position: absolute !important;
    z-index: 20;
    top: -52px;
    right: 0;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.popup_wrap.video_popup .popup_head .btn_close {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    transform: none !important;
}


/* 콘텐츠 */
.popup_wrap.video_popup .popup_content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible;
}


/* 영상 */
.popup_wrap.video_popup .video_popup__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;
    background: #000;
}

.popup_wrap.video_popup .video_popup__frame iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* 하단 버튼 */
.popup_wrap.video_popup .video_popup__buttons {
    display: flex;
    gap: 25px;
    width: 560px;
    margin: 20px auto 0;
}

.popup_wrap.video_popup .video_popup__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--gn-white);
    transition: filter .2s ease;
}

.popup_wrap.video_popup .video_popup__btn--donate {
    background: var(--gn-olive-500);
}

.popup_wrap.video_popup .video_popup__btn--detail {
    background: var(--gn-brown-500);
}

.popup_wrap.video_popup .video_popup__btn:hover {
    filter: brightness(1.06);
}

.popup_wrap.video_popup .icon_popup_close--white {
    width: 32px;
    height: 32px;
    overflow: hidden;
    text-indent: -9999px;

    background-image: url('/assets/web/images/icons/common/common_icon.png');
    background-repeat: no-repeat;
    background-position: -180px -127px;
}