@charset "UTF-8";
/* ==========================================================================
   굿네이버스 메인 개편 — base.css (디자인 토큰)
   폰트 / --gn-* 변수 / .gnr 스코프 리셋.
   ★ 지금은 renewal 전용으로 로드하지만, 오픈 시 운영 전역 자산으로 승격(신규 등재) 예정.
   ========================================================================== */

/* ==========================================================================
   굿네이버스 메인 개편 — base.css
   폰트 / 리셋 / 디자인 토큰

   수치 출처 : Figma 확정 시안 "현업 PC최종 컨펌시안" > 프레임 A-2 (996:8322) 실측.
              1920 기준 / 콘텐츠 1440(좌우 240) / 히어로 1720(좌우 100).
   장표(p8 컬러 · p9 타이포) 는 초기 참고값이었고, 아래 값이 정본으로 이를 덮음.
   주요 정정 : 섹션 타이틀 52px(장표 48 아님) · 행간 전부 ×1.48 · 자간 0(-0.02em 아님)
              · 섹션 타이틀/카드 타이틀 서체는 Pretendard 아닌 브랜드 서체
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT
   Pretendard 정적 face 는 Light(300) / Regular(400) / Medium(500) / Bold 만 존재.
   디자인시스템의 Semibold(600) 는 전용 face 가 없으므로 Bold 파일을 600~700
   범위로 등록해 합성(faux bold) 없이 렌더되게 함.
   레거시 common.css 는 Bold 를 weight:600 단독으로 등록해 700 이 합성으로 굵어짐 — 그 함정 회피.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Light.woff2) format('woff2'),
         url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Light.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Regular.woff2) format('woff2'),
         url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Regular.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Medium.woff2) format('woff2'),
         url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Medium.woff) format('woff');
}
/* 8/12 — cdn.gni.kr 엔 4종뿐이라 600~800 을 Bold 로 뭉뚱그렸더니 SemiBold 가
   한 단계 굵게 보임(시안 대비 볼드 과다). 공식 배포(jsDelivr)에서 전용 face 보충.
   실반영 시엔 SemiBold/ExtraBold woff2 를 gni CDN 에 등록 요청 후 경로 교체. */
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url(https://fastly.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-SemiBold.woff2) format('woff2');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Bold.woff2) format('woff2'),
         url(https://cdn.gni.kr/assets/font/Pretendard/Pretendard-Bold.woff) format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url(https://fastly.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-ExtraBold.woff2) format('woff2');
}

/* 브랜드 서체 — 시안의 섹션 타이틀 / 히어로 타이틀 / 카드 타이틀 전부 이 서체.
   Bold 한 벌만 존재. gniweb 레거시(assets/web/css/mypage/index.css L2363)가 이미
   같은 CDN 으로 쓰고 있어 그 경로를 그대로 재사용. */
@font-face {
    font-family: 'GoodNeighbors';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/GoodNeighbors-Good-Neighbors-Bold.woff2) format('woff2');
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* --- brand : olive green (primary) --- */
    --gn-olive-900: #2D4718;   /* Figma 변수 "찐올" */
    --gn-olive-800: #536D21;   /* 띠배너 화이트칩 텍스트 */
    --gn-olive-700: #708921;   /* 띠배너 뱃지 */
    --gn-olive-600: #7E982A;   /* 활동 진행바 fill · hover */
    --gn-olive-500: #89A230;   /* PRIMARY */
    --gn-olive-400: #A3B85E;
    --gn-olive-300: #C3CF95;   /* 서브 파스텔 */
    --gn-olive-200: #DDE5BE;
    --gn-olive-100: #E7ECD3;
    --gn-olive-50:  #EFF6DD;

    /* 타이틀 강조 그린 — primary 와 다른 값이 섹션별로 쓰임 (시안 실측 그대로) */
    --gn-title-green:   #7C9B2B;  /* 스토리 · 활동 · 새소식 · 후원방식 · 첫걸음 · 신뢰 (8/13 포인트컬러 통일) */
    --gn-title-green-2: #6C8023;  /* 아동결연 — 포인트컬러 통일 대상 제외 */
    --gn-lime:          #B8FF44;  /* 후원방식 대형카드 eyebrow */

    /* --- brand : brown (secondary) --- */
    --gn-brown-900: #2A2623;
    --gn-brown-800: #3D3733;
    --gn-brown-700: #454038;
    --gn-brown-600: #564F49;   /* SECONDARY = Figma 변수 "버튼 컬러". 히어로 CTA · 탭 active · 후기 텍스트 */
    --gn-brown-500: #6B5954;   /* 활동 카드 뱃지 (Figma 변수 "브라운" #685A55 계열) */
    --gn-brown-400: #8F8581;   /* 후기 카드 작성자/날짜 */
    --gn-brown-300: #A79E98;
    --gn-brown-200: #CFC7C1;
    --gn-brown-100: #E5DED8;
    --gn-brown-50:  #F1EFEC;   /* 퀵후원 바 · 태그 bg */

    /* --- neutral --- */
    --gn-white: #FFFFFF;
    --gn-gray-900: #1C1B1B;   /* 타이틀 */
    --gn-gray-800: #272727;   /* 새소식 캡션 타이틀 */
    --gn-gray-700: #333333;   /* 신뢰 카드 설명 · 금액칩 */
    --gn-gray-600: #444444;   /* 화살표 링크 라벨 */
    --gn-gray-500: #666666;   /* 뉴스레터 설명 · 날짜 */
    --gn-gray-450: #868686;   /* 아동결연 비활성 탭 텍스트 */
    --gn-gray-400: #B8B8B8;   /* input 보더 */
    --gn-gray-350: #9CA3AF;   /* input placeholder */
    --gn-gray-300: #CCCCCC;   /* 푸터 링크/정보 */
    --gn-gray-200: #D9D9D9;   /* 새소식 구분선 */
    --gn-gray-100: #ECECEC;
    --gn-gray-50:  #F5F5F5;   /* 신뢰 카드 bg */

    /* --- point / pastel (카드·섹션 배경) --- */
    /* 최종 컨펌 시안(1266:4783) 실측 갱신 : 금액칩 선택 = 올리브 채움 + 흰 글자,
       아동결연 섹션 bg #F1F4F9 (지도 워터마크 배경과 동일) */
    --gn-point-green: #7C9B2B;   /* 금액칩 선택 bg (구: #56C066 보더 방식) */
    --gn-pastel-green: #F2F9F2;  /* 푸터 회원상담 박스 */
    --gn-pastel-blue:  #ECF1F5;  /* 히어로 비주얼 placeholder bg · 푸터 대표전화 박스 */
    --gn-pastel-blue-2: #DEE1E8; /* 탭 비활성 (기본형) */
    --gn-pastel-blue-3: #E4E7ED; /* Figma 변수 BG_02 — 활동 진행바 track */
    --gn-child-bg:  #F1F4F9;     /* 아동결연 섹션 bg */

    /* --- semantic : text --- */
    --gn-text-title:  #1C1B1B;
    --gn-text-strong: #454838;   /* GNB 메뉴 */
    --gn-text-body:   #333333;
    --gn-text-sub:    #948C85;
    --gn-text-mute:   #767966;   /* 새소식 리스트 날짜 */
    --gn-text-hero:   #39383B;   /* 히어로 서브카피 */
    --gn-text-on-dark: #FFFFFF;
    --gn-text-link:   #89A230;

    /* --- semantic : surface / line --- */
    --gn-bg:        #FFFFFF;
    --gn-bg-soft:   #F7F7F7;     /* 뉴스레터 박스 */
    --gn-bg-card:   #F5F5F5;     /* 신뢰 카드 */
    --gn-bg-warm:   #F7F7F7;     /* 퀵후원 바 */
    --gn-bg-brand:  #E7ECD3;
    --gn-line:      #D9D9D9;
    --gn-line-soft: #ECECEC;
    --gn-line-card: rgba(0, 0, 0, .05);   /* 후기 카드 보더 */
    --gn-dim:       rgba(28, 27, 27, .6);

    /* --- gradient : 후원 CTA (헤더 "바로 후원하기" · 퀵후원 "후원하기") --- */
    --gn-grad-cta: linear-gradient(90deg, #97A836 0%, #70AA67 80.374%);

    /* --- state --- */
    --gn-error:   #E2452F;
    --gn-success: #2F8F3A;
    --gn-warning: #E3860F;

    /* --- typography : PC (Figma A-2 실측)
           행간은 국문 멀티행 전부 ×1.48 로 통일되어 있음 → 사이즈별 px 로 고정 기입.
           단일 행 텍스트는 line-height:1 (프로젝트 컨벤션, `.is-single`) --- */
    --gn-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Malgun Gothic', 'Noto Sans KR', sans-serif;
    --gn-font-brand: 'GoodNeighbors', var(--gn-font);

    --gn-fz-display: 48px; --gn-lh-display: 71px;  /* 섹션 타이틀 정본 (8/12 시안 대조 52→48, lh 1.48). 히어로 타이틀은 52 개별 지정 */
    --gn-fz-head:   48px;  --gn-lh-head:   71px;   /* 활동 · 첫걸음 타이틀 */
    --gn-fz-sub:    32px;  --gn-lh-sub:    47px;   /* 후원방식 대형카드 · 뉴스레터 */
    --gn-fz-sub2:   28px;  --gn-lh-sub2:   41px;   /* 신뢰 카드 · 아동 인용 타이틀 */
    --gn-fz-sub3:   24px;  --gn-lh-sub3:   36px;   /* 카드 타이틀 (스토리 대형은 33) */
    --gn-fz-body:   20px;  --gn-lh-body:   30px;   /* GNB · 화살표링크 · 탭 · 신뢰 설명 */
    --gn-fz-body2:  18px;  --gn-lh-body2:  27px;   /* 본문 · 태그 · 카드 타이틀(소) */
    --gn-fz-cap:    16px;  --gn-lh-cap:    24px;   /* 유틸바 · 푸터 링크 */
    --gn-fz-small:  14px;  --gn-lh-small:  21px;   /* 날짜 · 작성자 */

    --gn-fw-display: 700; --gn-fw-head: 700;
    --gn-fw-sub: 600;     --gn-fw-body: 500;

    --gn-ls: 0;                /* 국문 기본 — Figma 타입 스타일 letterSpacing 0 */
    --gn-ls-wide: 0.02em;      /* 후원방식 카드 라벨 등 (tracking 0.4~0.64px) */
    --gn-ls-tight: -0.025em;   /* 뉴스레터 타이틀 (tracking -0.8px @32px) */

    /* --- layout (Figma A-2 실측) --- */
    --gn-page-min: 1280px;     /* 레거시 body min-width 와 동일 */
    --gn-container: 1440px;    /* 콘텐츠 폭 (1920 - 240*2) */
    --gn-container-wide: 1720px; /* 히어로+퀵후원 카드 폭 (1920 - 100*2) */
    --gn-gutter: 24px;         /* 컨테이너 축소 구간 좌우 여백 */
    --gn-col-gap: 24px;        /* 카드 그리드 공통 거터 — 708*2+24 / 342*4+24*3 = 1440 */

    --gn-banner-h: 61px;       /* 공지 띠배너 */
    --gn-header-h: 124px;      /* 헤더 (유틸 36 + gap 8 + 메인 80) */
    --gn-header-h-fixed: 84px; /* 스크롤 축소 시 */

    /* --- section spacing --- */
    --gn-sec-mt: 185px;              /* 8/19 검수 — 섹션 사이 간격 통일, 아래 섹션의 margin-top 이 소유. 8/20 300→250 조정 */
    --gn-sec-pt: 150px;              /* (구 padding 방식 잔여 — .gn-section 클래스 전용, 현재 메인 미사용) */
    --gn-sec-pb: 150px;
    --gn-sec-gap: 100px;       /* 섹션 헤드 ↔ 콘텐츠 (신뢰·후원방식·첫걸음) */
    --gn-sec-gap-sm: 80px;     /* 스토리 */
    --gn-sec-gap-xs: 40px;     /* 새소식 */

    /* --- radius --- */
    --gn-r-xs: 4px;
    --gn-r-sm: 8px;            /* input */
    --gn-r-md: 10px;           /* 뉴스레터 신청 버튼 */
    --gn-r-lg: 16px;
    --gn-r-xl: 20px;           /* 카드 대각 라운드 기본값 */
    --gn-r-2xl: 32px;
    --gn-r-3xl: 40px;          /* 히어로 · 대형카드 대각 라운드 */
    --gn-r-box: 6px;           /* 푸터 연락처 박스 */
    --gn-r-pill: 999px;
    --gn-r-card: var(--gn-r-xl);

    /* --- shadow (Figma 실측) --- */
    --gn-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);            /* 캐러셀 원형 버튼 */
    --gn-shadow-md: 0 10px 25px -5px rgba(0, 0, 0, .08);     /* 후기 카드 */
    --gn-shadow-lg: 0 12px 36px rgba(42, 38, 35, .14);
    --gn-shadow-card:  4px 4px 12px rgba(0, 0, 0, .16);      /* 스토리 대형 카드 (drop-shadow) */
    --gn-shadow-card2: 0 4px 5.1px rgba(0, 0, 0, .16);       /* 스토리 소형 카드 */

    /* --- z-index --- */
    --gn-z-base: 1;
    --gn-z-sticky: 100;
    --gn-z-header: 200;
    --gn-z-gnb: 210;
    --gn-z-float: 300;
    --gn-z-dim: 900;
    --gn-z-popup: 1000;

    /* --- motion --- */
    --gn-ease: cubic-bezier(.4, 0, .2, 1);
    --gn-ease-out: cubic-bezier(.16, 1, .3, 1);
    --gn-dur-fast: .2s;
    --gn-dur: .35s;
    --gn-dur-slow: .7s;
}

/* MO / 태블릿 — 토큰만 갈아끼우면 컴포넌트는 그대로 동작 */
/* MO / 태블릿 — 토큰만 갈아끼우면 컴포넌트는 그대로 동작.
   현재 값은 PC 확정 후 MO 사이클 착수 시 MO 시안(996:17577 등) 실측으로 교체 예정. */
@media (max-width: 1024px) {
    :root {
        --gn-fz-display:32px;  --gn-lh-display:47px;
        --gn-fz-head:   28px;  --gn-lh-head:   41px;
        --gn-fz-sub:    24px;  --gn-lh-sub:    36px;
        --gn-fz-sub2:   22px;  --gn-lh-sub2:   33px;
        --gn-fz-sub3:   20px;  --gn-lh-sub3:   30px;
        --gn-fz-body:   17px;  --gn-lh-body:   25px;
        --gn-fz-body2:  16px;  --gn-lh-body2:  24px;
        --gn-fz-cap:    14px;  --gn-lh-cap:    21px;
        --gn-fz-small:  13px;  --gn-lh-small:  20px;

        --gn-page-min: 320px;
        --gn-container: 100%;
        --gn-container-wide: 100%;
        --gn-gutter: 20px;
        --gn-col-gap: 16px;

        --gn-banner-h: 48px;
        --gn-header-h: 56px;
        --gn-header-h-fixed: 56px;

        --gn-sec-pt: 60px;
        --gn-sec-pb: 60px;
        --gn-sec-gap: 32px;
        --gn-sec-gap-sm: 28px;
        --gn-sec-gap-xs: 24px;

        --gn-r-3xl: 24px;
        --gn-r-card: var(--gn-r-lg);
    }
}

/* --------------------------------------------------------------------------
   3. RESET
   정적 프로토타입(단독 로드) 기준. JSP 이식 시엔 레거시 common.css 가 이미
   리셋을 깔고 있으므로 common.css 의 `.gnr` 스코프 리셋이 충돌을 정리함.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: var(--gn-page-min);
    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);
    background: var(--gn-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
}

input, select, textarea {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}
input::placeholder, textarea::placeholder { color: var(--gn-text-sub); }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 레거시 common.css 의 `img { width:100% }` 는 아이콘/로고까지 늘려버림 — 여기선 금지 */
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }

table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: inherit; text-align: left; }

address, em, i { font-style: normal; }

fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

hr { border: 0; border-top: 1px solid var(--gn-line); margin: 0; }

/* 접근성 : 레거시가 outline:none 을 전역으로 박아 키보드 포커스가 사라짐 → focus-visible 로 복원 */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--gn-olive-500);
    outline-offset: 2px;
    border-radius: var(--gn-r-xs);
}

::selection { background: var(--gn-olive-200); color: var(--gn-gray-900); }

/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* ==========================================================================
   굿네이버스 메인 개편 — common.css
   타이포 / 레이아웃 / 공통 컴포넌트 / 유틸 / 모션
   전제 : base.css 선행 로드. 모든 규칙은 `.gnr` 스코프 안에서만 동작한다.
   ========================================================================== */