@charset "UTF-8";
/* ==========================================================================
   굿네이버스 메인 개편 — 리뉴얼 공용 부품 (2026-08-26 정리)
   ★ 지금은 renewal/common.css 로 따로 로드하지만, 오픈 시 이 블록 전체를
     "운영 assets/web/css/common.css 맨 아래에" 그대로 append 해 합칠 예정.
     (운영 common.css 는 무수정 — 이 블록이 뒤에 붙어 리뉴얼 부품만 추가하는 구조)
   구성: 가드/리셋 + 버튼 + 뱃지 + 폼 + 캐러셀 컨트롤 + 탭 + 유틸 + 모션.
   미사용 부품(카드·태그·타이포 스케일·그리드 등 115클래스)은 8/26 삭제 — CSS-정리안.md 참조.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. LEGACY GUARD
   JSP 이식 시 meta-tag.jsp 가 /assets/web/css/common.css 를 먼저 깐다.
   레거시가 전역 `* { color:#4c4c4c; letter-spacing:.02em }` 과
   `img { width:100% }`, `body { min-width:1280px }` 를 박아 자식 span/em 이
   부모 타이포를 상속받지 못하는 문제가 있음 → 스코프 안에서 상속으로 되돌린다.
   (specificity 0,1,0 — 아래 컴포넌트 규칙들이 뒤에 정의되어 동률 승)
   -------------------------------------------------------------------------- */
.gnr * {
    box-sizing: border-box;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* `* { font-weight:inherit }` 로 죽는 기본 강조 되살리기 */
.gnr b, .gnr strong { font-weight: 700; }

/* 레거시 `img { width:100% }` 무력화용이지만 `width:auto` 를 박으면 마크업의
   width 속성(프레젠테이션 힌트) 까지 같이 죽는다 — 속성보다 CSS 가 항상 이기므로.
   그래서 width 는 건드리지 않고, 고정 치수가 필요한 이미지는 아래 컴포넌트
   규칙에서 CSS width 로 명시한다 (JSP 이식 시 레거시 100% 도 이 쪽이 이김). */
.gnr img { max-width: 100%; height: auto; }

.gnr [class^="img-box"] > img,
.gnr [class*=" img-box"] > img { width: 100%; }

.gnr {
    font-family: var(--gn-font);
    font-size: var(--gn-fz-body2);
    font-weight: 400;
    line-height: var(--gn-lh-body2);
    letter-spacing: var(--gn-ls);
    color: var(--gn-text-body);
}

.gnr .gn-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 .gn-title em  { color: var(--gn-title-green); }

/* 단일 행 텍스트는 line-height:1 (컨벤션) */
.gnr .is-single { line-height: 1; }

/* 색 helper — `.gnr` 하위로 정의해 0,2,0 확보 (레거시 * 리셋에 안 짐) */
.gnr .c-primary  { color: var(--gn-olive-500); }

/* --------------------------------------------------------------------------
   2. LAYOUT
   -------------------------------------------------------------------------- */
.gnr .gn-container {
    width: 100%;
    max-width: var(--gn-container);
    margin: 0 auto;
    padding: 0 var(--gn-gutter);
}

@media (min-width: 1025px) {
    /* PC 는 시안 좌우 여백(240 / 100)이 고정 — gutter 를 0 으로 두고 max-width 로만 잡음 */
    .gnr .gn-container { padding: 0; }}

/* 섹션 헤드 : 타이틀 + (부가설명) + (더보기)
   확정 시안은 대부분 "가운데 타이틀 + 우측 더보기" 또는 "좌측 타이틀 + 우측 더보기" — 두 배치 다 지원 */
.gnr .gn-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gn-col-gap); }

.gnr .gn-sechead + * { margin-top: var(--gn-sec-gap); }

.gnr .gn-sechead__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 .gn-sechead__title em { color: var(--gn-title-green); }

/* 타이틀 가운데 · 더보기 우측 (스토리/새소식 패턴) */
.gnr .gn-sechead--split { display: block; text-align: center; }

.gnr .gn-sechead--split .gn-sechead__more { display: flex; justify-content: flex-end; margin-top: var(--gn-sec-gap-xs); }

@media (max-width: 1024px) {
    .gnr .gn-sechead { flex-direction: column; align-items: flex-start; gap: 12px; }}

/* --------------------------------------------------------------------------
   3. BUTTON
   실측 : 히어로 CTA 156x64(brown) · 헤더 바로후원 197x58(olive) · 금액칩 102x44
   -------------------------------------------------------------------------- */
.gnr .gn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 32px;
    border: 1px solid transparent;
    border-radius: var(--gn-r-pill);
    background: var(--gn-olive-500);
    font-size: var(--gn-fz-body2);
    font-weight: 600;
    line-height: 1;
    color: var(--gn-white);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--gn-dur-fast) var(--gn-ease),
                border-color var(--gn-dur-fast) var(--gn-ease),
                color var(--gn-dur-fast) var(--gn-ease),
                transform var(--gn-dur-fast) var(--gn-ease);
}

.gnr .gn-btn:hover { background: var(--gn-olive-600); }

.gnr .gn-btn:active { transform: translateY(1px); }

.gnr .gn-btn[disabled],
.gnr .gn-btn.is-disabled {
    background: var(--gn-gray-200);
    color: var(--gn-white);
    cursor: default;
    pointer-events: none;
}

/* variant */
.gnr .gn-btn--brown { background: var(--gn-brown-600); }

.gnr .gn-btn--brown:hover { background: var(--gn-brown-700); }

/* 후원 CTA — 헤더 "바로 후원하기" / 퀵후원 "후원하기". 플랫 올리브가 아니라 그라데이션 */
.gnr .gn-btn--grad {
    background: var(--gn-grad-cta);
    font-weight: 700;
    font-size: var(--gn-fz-body);
}

.gnr .gn-btn--grad:hover { background: var(--gn-grad-cta); filter: brightness(1.06); }

/* 하트 SVG 도 y 반전 export — 꼭짓점이 아래로 오도록 되돌림 */
.gnr .gn-btn--grad .gn-btn__ico { width: 24px; height: 28px; transform: scaleY(-1); }

.gnr .gn-btn--line {
    background: transparent;
    border-color: var(--gn-olive-500);
    color: var(--gn-olive-500);
}

.gnr .gn-btn--line:hover { background: var(--gn-olive-50); }

.gnr .gn-btn--line-white {
    background: transparent;
    border-color: var(--gn-white);
    color: var(--gn-white);
}

.gnr .gn-btn--line-white:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 1024px) {
    .gnr .gn-btn    { height: 48px; padding: 0 24px; font-size: var(--gn-fz-cap); }}

/* 캐러셀 원형 버튼 — 실측 48x48, 반투명 유리 (backdrop-blur 2px) */
.gnr .gn-btn-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    /* 윤곽선은 border 가 아니라 box-shadow 링으로 (8/14) — border 를 쓰면 안쪽 ::before 원과
       곡률이 미세하게 어긋나 그 사이에 얇은 틈이 보인다. shadow 는 요소 밖에 그려져 틈이 없고
       transparent → 색으로 transition 도 걸린다 */
    box-shadow: var(--gn-shadow-sm), inset 0 0 0 2px transparent;
    transition: background-color var(--gn-dur-fast) var(--gn-ease),
                box-shadow var(--gn-dur) var(--gn-ease);
}

/* 원본 아이콘은 아래방향(v) chevron — rotate(90)=왼쪽(<), rotate(-90)=오른쪽(>) */
.gnr .gn-btn-circle > img { width: 32px; height: 38px; }
   /* SVG 캔버스 크기 그대로 — chevron 실측 15x9.5 */
/* 8/14 — 화살표를 방향별 SVG(common_arrow_l/r)로 통일해 회전 보정이 필요 없어짐.
   (아래 방향 원본을 rotate 로 돌려 쓰던 방식 폐기 — 굵기·모양이 제각각이던 원인) */
/* hover = 반전 (8/14 요청) — 원형 화살표 버튼 공통.
   반전 색이 안에서부터 원형으로 차오르고(::before), 화살표는 우로 갔다 돌아오며 튕긴다.
   화살표가 <img> 라 src 를 바꿀 수 없어 색은 filter:invert 로 뒤집는다. */
.gnr .gn-btn-circle { position: relative; overflow: hidden; }

.gnr .gn-btn-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gn-brown-600);
    transform: scale(0);
    transition: transform var(--gn-dur) var(--gn-ease);
}

.gnr .gn-btn-circle > img {
    position: relative;
    z-index: 1;
    transition: filter var(--gn-dur-fast) var(--gn-ease);
}

.gnr .gn-btn-circle:hover::before { transform: scale(1); }

.gnr .gn-btn-circle:hover > img {
    filter: invert(1);
    animation: gn-arrow-nudge .45s var(--gn-ease);
}

/* 좌향 버튼은 왼쪽으로 튕긴다 */
.gnr .gn-btn-circle--prev:hover > img { animation-name: gn-arrow-nudge-l; }

.gnr .gn-btn-circle[disabled] { opacity: .35; pointer-events: none; }

/* variant : 갈색 반투명(후기 섹션 — 사진 위) / 회색 반투명(아동결연 — 흰 카드 위) / 라인 */
.gnr .gn-btn-circle--brown { background: rgba(86, 79, 73, .4); }

/* 기본이 어두운 배경 + 흰 화살표라 반전 방향이 반대 — 흰색이 차오르고 화살표는 어두워진다.
   사진 위라 흰 보더만으로 윤곽이 충분 (8/14 요청) */
.gnr .gn-btn-circle--brown::before { background: var(--gn-white); }

/* 후기 세로 네비(위·아래·일시정지) 링은 1px 에서 2px 로 자라며 나타난다 (8/14 요청) */
.gnr .gn-btn-circle--brown { box-shadow: var(--gn-shadow-sm), inset 0 0 0 1px transparent; }

.gnr .gn-btn-circle--brown:hover { box-shadow: var(--gn-shadow-sm), inset 0 0 0 2px var(--gn-white); }

.gnr .gn-btn-circle--line  { background: transparent; box-shadow: inset 0 0 0 1px var(--gn-gray-900); }

.gnr .gn-btn-circle--line:hover { box-shadow: inset 0 0 0 2px var(--gn-brown-600); }

/* 첫장/마지막장 비활성 — 화살표 #999999 (8/11 주석. 아이콘이 img 라 opacity 로 근사) */
.gnr .gn-btn-circle.is-disabled { pointer-events: none; cursor: default; }

.gnr .gn-btn-circle.is-disabled > img { opacity: .4; }

/* 텍스트 + 원형 화살표 링크 — 실측 : 라벨 20px SemiBold #444 + 40px 원형, gap 12
   아이콘은 이미지가 아니라 CSS 구현(공통 컴포넌트):
   기본 = 브라운 원 + 흰 화살표 (--olive 변형 = 올리브 원 : 쌍의 첫 번째 링크, 1300:8949)
   hover = ① 흰색이 중앙에서 원형으로 차오르고 ② 화살표는 원래 원 색으로 반전 ③ 보더는 원 색 유지
           ④ 화살표만 오른쪽으로 살짝 튕김 */
.gnr .gn-arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: var(--gn-fz-body);
    line-height: 1;
    font-weight: 700;                 /* 8/12 시안 대조 — 신뢰/첫걸음 라벨 Bold */
    color: var(--gn-gray-600);
    white-space: nowrap;
}

/* "더보기" 형(섹션 헤드/새소식 툴바)은 Medium (8/12 시안 대조) */
.gnr .gn-sechead__more .gn-arrowlink,
.gnr .gnr-news__toolbar .gn-arrowlink { font-weight: 500; }

.gnr .gn-arrowlink__ico {
    position: relative;
    flex: none;
    width: 48px;                     /* 8/13 시안 실측 40→48 */
    height: 48px;
    border-radius: 50%;
    overflow: hidden;                /* 차오르는 원 클리핑 */
    background-color: var(--gn-brown-600);
    /* 채움형은 border — 배경색이 border 밑까지 칠해지므로 틈이 생기지 않는다.
       두께는 hover 에서도 1px 고정 (8/14 요청) */
    border: 1px solid transparent;
    transition: border-color var(--gn-dur) var(--gn-ease);
}

/* 반전 원 — 안에서부터 원형으로 커진다 (8/14) */
.gnr .gn-arrowlink__ico::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gn-white);
    transform: scale(0);
    transition: transform var(--gn-dur) var(--gn-ease);
}

/* 화살표 — 히어로 스와이퍼와 같은 chevron SVG. 색이 다른 두 장을 겹쳐 두고
   opacity 로 크로스페이드한다 (background-image 는 transition 이 안 걸린다).
     · 기본색 = .gn-arrowlink__ico::after
     · 반전색 = .gn-arrowlink::after  (원 위에 겹치는 별도 레이어) */
.gnr .gn-arrowlink__ico::after,
.gnr .gn-arrowlink::after {
    content: '';
    position: absolute;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 38px;
    transition: opacity var(--gn-dur) var(--gn-ease);
    pointer-events: none;
}

.gnr .gn-arrowlink__ico::after {
    inset: 0;
    background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r.svg);
    opacity: 1;
}

.gnr .gn-arrowlink {
    position: relative;              /* 반전 화살표 레이어 기준 */
}

.gnr .gn-arrowlink::after {
    right: 0;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    z-index: 2;
    background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r_d.svg);
    opacity: 0;
}

/* hover — 원이 차오르며 반전, 화살표는 크로스페이드 + 우로 갔다 돌아오며 튕김.
   채움형은 흰 배경이 되면 흰 지면에서 윤곽이 사라지므로 원래 색 보더를 남긴다 */
.gnr .gn-arrowlink:hover .gn-arrowlink__ico { border-color: var(--gn-brown-600); }

.gnr .gn-arrowlink:hover .gn-arrowlink__ico::before { transform: scale(1); }

.gnr .gn-arrowlink:hover .gn-arrowlink__ico::after { opacity: 0; }

.gnr .gn-arrowlink:hover::after {
    opacity: 1;
    animation: gn-arrow-nudge .45s var(--gn-ease);
}

@keyframes gn-arrow-nudge {
    50% { transform: translateX(4px); }
}
@keyframes gn-arrow-nudge-l {
    50% { transform: translateX(-4px); }
}

@keyframes gn-arrow-nudge-u {
    50% { transform: translateY(-4px); }
}
@keyframes gn-arrow-nudge-d {
    50% { transform: translateY(4px); }
}

.gnr .gn-arrowlink--olive .gn-arrowlink__ico { background-color: #7C9B2B; }

.gnr .gn-arrowlink--olive:hover .gn-arrowlink__ico { border-color: #7C9B2B; }

.gnr .gn-arrowlink--olive::after { background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r_o.svg); }

/* 더보기형(섹션 헤드/새소식 툴바) — outline + 어두운 화살표.
   반전 방향이 반대라 차오름 색은 어둡게, 화살표는 어두움 → 흰색으로 (8/13 + 8/14) */
.gnr .gn-sechead__more .gn-arrowlink__ico,
.gnr .gnr-news__toolbar .gn-arrowlink__ico {
    background-color: transparent;
    /* 흰 지면 위 링형 — 링은 inset(요소 안쪽)으로 그려 배경·차오름 원과 틈이 없다.
       기본 1px → hover 2px 로 두꺼워진다 (8/14) */
    border: 0;
    box-shadow: inset 0 0 0 1px #D7D7D7;
    transition: box-shadow var(--gn-dur) var(--gn-ease);
}

.gnr .gn-sechead__more .gn-arrowlink__ico::before,
.gnr .gnr-news__toolbar .gn-arrowlink__ico::before { background: var(--gn-gray-900); }

.gnr .gn-sechead__more .gn-arrowlink__ico::after,
.gnr .gnr-news__toolbar .gn-arrowlink__ico::after {
    background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r_k.svg);
}

.gnr .gn-sechead__more .gn-arrowlink::after,
.gnr .gnr-news__toolbar .gn-arrowlink::after {
    background-image: url(https://cdn.gni.kr/assets/images/main/common_arrow_r.svg);
}

.gnr .gn-sechead__more .gn-arrowlink:hover .gn-arrowlink__ico,
.gnr .gnr-news__toolbar .gn-arrowlink:hover .gn-arrowlink__ico { box-shadow: inset 0 0 0 2px var(--gn-gray-900); }

.gnr .gn-arrowlinks { display: flex; align-items: center; justify-content: center; gap: 40px; }
   /* 8/20 검수 — 링크 사이 24→40 */

/* 60px 원형 링크 버튼 (후원방식 대형카드) */
.gnr .gn-btn-60 { display: block; width: 60px; height: 60px; }

/* 이미지 위 뱃지 (활동 카드) — 올리브 / 브라운 / 화이트 3종 */
.gnr .gn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px;
    border-radius: var(--gn-r-pill);
    background: var(--gn-olive-500);
    font-size: var(--gn-fz-cap);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gn-white);
    white-space: nowrap;
}

.gnr .gn-badge--brown { background: var(--gn-brown-500); font-family: var(--gn-font-brand); padding: 6px 23px; line-height: 1.5; }

.gnr .gn-badge--white { background: var(--gn-white); color: var(--gn-gray-900); font-family: var(--gn-font-brand); padding: 6px 23px; line-height: 1.5; }

.gnr .gn-badge--lg    { padding: 12px 31px; font-family: var(--gn-font-brand); font-size: var(--gn-fz-sub3); background: var(--gn-white); color: var(--gn-gray-900); line-height: 1.5; }

  

/* --------------------------------------------------------------------------
   6. FORM
   -------------------------------------------------------------------------- */
.gnr .gn-input,
.gnr .gn-select {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border: 1px solid var(--gn-line);
    border-radius: var(--gn-r-sm);
    background: var(--gn-white);
    font-size: var(--gn-fz-cap);
    color: var(--gn-text-title);
    transition: border-color var(--gn-dur-fast) var(--gn-ease);
}

.gnr .gn-input:focus,
.gnr .gn-select:focus { border-color: var(--gn-olive-500); }

.gnr .gn-input.is-error { border-color: var(--gn-error); }

.gnr .gn-input[readonly],
.gnr .gn-input[disabled] { background: var(--gn-bg-soft); color: var(--gn-text-sub); }

/* checkbox / radio */
.gnr .gn-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }

.gnr .gn-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.gnr .gn-check__box {
    flex: none;
    width: 22px;
    height: 22px;
    border: 1px solid var(--gn-line);
    border-radius: var(--gn-r-xs);
    background: var(--gn-white);
    position: relative;
    transition: all var(--gn-dur-fast) var(--gn-ease);
}

.gnr .gn-check__box::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid var(--gn-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(.6);
    opacity: 0;
    transition: all var(--gn-dur-fast) var(--gn-ease);
}

.gnr .gn-check input:checked + .gn-check__box { border-color: var(--gn-olive-500); background: var(--gn-olive-500); }

.gnr .gn-check input:checked + .gn-check__box::after { opacity: 1; transform: rotate(45deg) scale(1); }

.gnr .gn-check input:focus-visible + .gn-check__box { outline: 2px solid var(--gn-olive-500); outline-offset: 2px; }

.gnr .gn-check__text { font-size: var(--gn-fz-cap); color: var(--gn-text-strong); }

/* 금액 선택 칩 (퀵후원 모듈)
   8/10 신규 A-2 실측 : 칩 102x44 / radius 6 / 16px
   8/14 요청 : 칩 105x45, 직접입력 필드 150x45 로 확대
   선택 = #638847 채움 + 흰 글자 Bold / 비선택 = 흰 배경 + #E2E0E0 1px 라인 + #333 / gap 10 */
.gnr .gn-amount { display: flex; align-items: center; gap: 10px; }

.gnr .gn-amount__item { position: relative; }

.gnr .gn-amount__item input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.gnr .gn-amount__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 45px;
    border: 1px solid #E2E0E0;
    border-radius: 6px;
    background: var(--gn-white);
    font-size: 18px; /* 8/14 요청 : 16px -> 18px (버튼 전용, 공용 토큰 --gn-fz-cap 미변경) */
    font-weight: 400;
    line-height: 1;
    color: var(--gn-gray-700);
    cursor: pointer;
    transition: all var(--gn-dur-fast) var(--gn-ease);
}

.gnr .gn-amount__btn:hover { border-color: var(--gn-point-green); }

.gnr .gn-amount__item input:checked + .gn-amount__btn,
.gnr .gn-amount__btn.is-active {
    background: var(--gn-point-green);
    border-color: var(--gn-point-green);
    font-weight: 700;
    color: var(--gn-white);
}

.gnr .gn-amount__item input:focus-visible + .gn-amount__btn { outline: 2px solid var(--gn-point-green); outline-offset: 2px; }

.gnr .gn-amount__direct { display: flex; align-items: center; gap: 10px; }

.gnr .gn-amount__direct .gn-input {
    width: 150px;
    height: 45px;
    padding: 0 15px;
    border: 1px solid #E2E0E0;
    border-radius: 6px;
    background: var(--gn-white);
    text-align: right;
    font-size: var(--gn-fz-body2);
    color: var(--gn-gray-700);
}

.gnr .gn-amount__unit { font-size: 17px; line-height: 1; color: var(--gn-gray-900); }

/* --------------------------------------------------------------------------
   7. CAROUSEL CONTROL
   실측(히어로) : 진행바 200x3 (fill 50 = 1/4) + "1 | 4" 카운터 + 좌우 원형 48, 버튼 gap 8
   실측(활동)   : 진행바 554x4 pill (track #E4E7ED 52%, fill #7E982A) + 원형 48, gap 24
   -------------------------------------------------------------------------- */
.gnr .gn-carousel { position: relative; }

.gnr .gn-carousel__bar {
    position: relative;
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, .48);
    overflow: hidden;
}

.gnr .gn-carousel__bar > span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--gn-brown-600);
    transition: width var(--gn-dur) var(--gn-ease);
}

/* 활동 섹션 변형 — pill 형태 + 올리브 fill */
.gnr .gn-carousel__bar--pill {
    height: 4px;
    border-radius: var(--gn-r-pill);
    background: rgba(228, 231, 237, .52);
}

.gnr .gn-carousel__bar--pill > span { border-radius: var(--gn-r-pill); background: var(--gn-olive-600); }

.gnr .gn-carousel__count {
    font-size: var(--gn-fz-body2);
    line-height: 1;
    color: rgba(0, 0, 0, .5);
    /* 숫자 폭이 자릿수마다 달라(1 이 4 보다 좁음) 슬라이드가 넘어갈 때 진행바·네비가 밀렸다
       → 고정폭 숫자 + 자리 확보 (8/18 검수) */
    font-variant-numeric: tabular-nums;
}

.gnr .gn-carousel__count b,
.gnr .gn-carousel__count > span { display: inline-block; min-width: 1ch; text-align: center; }

.gnr .gn-carousel__count b { font-weight: 700; color: var(--gn-gray-900); }

.gnr .gn-carousel__count i { display: inline-block; width: 1px; height: 16px; margin: 0 10px; background: rgba(0, 0, 0, .28); vertical-align: -3px; }

.gnr .gn-carousel__nav { display: flex; gap: 8px; }

.gnr .gn-carousel__nav--gap24 { gap: var(--gn-col-gap); }

@media (max-width: 1024px) {
    .gnr .gn-carousel__bar { width: 90px; }
    .gnr .gn-carousel__nav .gn-btn-circle { width: 36px; height: 36px; }
    .gnr .gn-carousel__nav .gn-btn-circle > img { width: 28px; height: 33px; }}

/* --------------------------------------------------------------------------
   8. TAB
   -------------------------------------------------------------------------- */
/* 8/10 신규 A-2 실측(아동결연 지역 탭) : h50 / px24 / pill / 20px
   active = bg #564F49 흰글씨 Bold · inactive = bg #E3E8DE #564F49 SemiBold / gap 8 */
.gnr .gn-tab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.gnr .gn-tab__btn {
    height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--gn-r-pill);
    background: var(--gn-tab-idle);
    font-size: var(--gn-fz-body);
    font-weight: 600;
    line-height: 1;
    color: var(--gn-brown-600);
    transition: background-color var(--gn-dur-fast) var(--gn-ease),
                color var(--gn-dur-fast) var(--gn-ease);
}

/* hover = active 와 같은 색 반전 (8/11 요청 — 원형 확대 fill 안 씀) */
.gnr .gn-tab__btn:hover,
.gnr .gn-tab__btn.is-active { background: var(--gn-brown-600); color: var(--gn-white); }

.gnr .gn-tab__btn.is-active { font-weight: 700; }

/* 아동결연 변형 — 비활성 흰 배경 (연블루 섹션 위) */
.gnr .gn-tab--light .gn-tab__btn { background: var(--gn-white); color: var(--gn-brown-600); }

.gnr .gn-tab--light .gn-tab__btn:hover,
.gnr .gn-tab--light .gn-tab__btn.is-active { background: var(--gn-brown-600); color: var(--gn-white); }

/* 새소식 변형 — 비활성 배경 없이 텍스트만.
   active 배경은 버튼이 아니라 독립 pill(.gn-tab__pill, JS 주입)이 슬라이드하며 담당 */
.gnr .gn-tab--news { position: relative; }

.gnr .gn-tab__pill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: var(--gn-r-pill);
    background: var(--gn-brown-700);
    transition: left var(--gn-dur) var(--gn-ease), width var(--gn-dur) var(--gn-ease);
    pointer-events: none;
}

.gnr .gn-tab--news .gn-tab__btn { position: relative; z-index: 1; background: transparent; font-weight: 400; color: var(--gn-gray-900); }
   /* 8/12 시안 — 비활성 Regular #111 */
.gnr .gn-tab--news .gn-tab__btn:hover { background: transparent; color: var(--gn-brown-700); }

.gnr .gn-tab--news .gn-tab__btn.is-active { background: transparent; font-weight: 600; color: var(--gn-white); }

/* 패널 자체에 display 가 잡혀 있어도(grid 등) hidden 이 항상 이기게 */
.gnr [data-gn-tab-panel][hidden] { display: none; }

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   10. UTILITY
   -------------------------------------------------------------------------- */
.gnr .blind,
.gnr .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.gnr .pc-only { display: block; }

.gnr .mo-only { display: none; }

@media (max-width: 1024px) {
    .gnr .pc-only { display: none; }
    .gnr .mo-only { display: block; }}

/* 스크롤 잠금 (팝업 오픈 시 body 에 부여) */
body.gn-scroll-lock { overflow: hidden; }

/* 드래그 스와이프 UX — 트랙 안 이미지/텍스트가 드래그를 가로채지 않게 */
.gnr [data-gn-carousel-track],
.gnr [data-gn-act-track] { user-select: none; }

.gnr [data-gn-carousel-track] img,
.gnr [data-gn-act-track] img { -webkit-user-drag: none; pointer-events: none; }

.gnr [data-gn-carousel-track] a,
.gnr [data-gn-act-track] a { -webkit-user-drag: none; }

/* --------------------------------------------------------------------------
   11. MOTION
   진입 모션 = .motion-*  /  타이틀 줄 리빌 = .tl-line (프로젝트 표준)
   초기 상태는 CSS 선셋 — JS gsap.set 으로만 숨기지 않음
   -------------------------------------------------------------------------- */
.gnr .motion-fade-up,
.gnr .motion-fade-down,
.gnr .motion-fade-in,
.gnr .motion-scale-up {
    transition: opacity var(--gn-dur-slow) var(--gn-ease),
                transform var(--gn-dur-slow) var(--gn-ease);
    will-change: opacity, transform;
}

.gnr .motion-fade-up   { opacity: 0; transform: translateY(40px); }

.gnr .motion-fade-down { opacity: 0; transform: translateY(-40px); }

.gnr .motion-fade-in   { opacity: 0; }

.gnr .motion-scale-up  { opacity: 0; transform: scale(.8); }

.gnr .motion-fade-up.motion-play,
.gnr .motion-fade-down.motion-play { opacity: 1; transform: translateY(0); }

.gnr .motion-fade-in.motion-play   { opacity: 1; }

.gnr .motion-scale-up.motion-play  { opacity: 1; transform: scale(1); }

/* 타이틀 줄 단위 크롭 리빌 */
.gnr .mt-hide { visibility: hidden; }

.gnr .tl-line { display: block; overflow: hidden; }

.gnr .tl-line.is-open { overflow: visible; }

.gnr .tl-ch,
.gnr .tl-in { display: inline-block; }

/* 캡쳐/JS 미실행 대비 — 정적 노출 강제 */
body.gn-nomotion .gnr .mt-hide { visibility: visible; }

body.gn-nomotion .gnr [class*="motion-"] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
    .gnr .mt-hide { visibility: visible; }
    .gnr .motion-fade-up,
    .gnr .motion-fade-down,
    .gnr .motion-fade-in,
    .gnr .motion-scale-up { opacity: 1; transform: none; }}