@charset "UTF-8";
/* ============================================================================
   청개구리 사회적협동조합 — 디자인 시스템
   시안: docs/반응형 사이트 구축 계획/*.dc.html (시안이 정본)

   시안은 100% 인라인 스타일이라 값을 그대로 옮기되 클래스로 정리했다.
   크기·간격은 대부분 clamp()로 유동적이며 미디어쿼리는 3곳(760/520/880px)뿐이다.

   01 tokens · 02 reset+base · 03 primitives · 04 header · 05 hero
   06 programs · 07 trust · 08 news · 09 footer · 10 breakpoints
   ========================================================================= */

/* ── 01 tokens ───────────────────────────────────────────────────────────── */
:root {
    --gf-green: #1fa968;
    --gf-green-dark: #17824f;
    --gf-accent: #28bd79;
    --gf-mint: #eaf7f0;
    --gf-select: #bdead2;
    --gf-orange: #f2a340;

    --gf-text: #383838;
    --gf-heading: #2b2b2b;
    --gf-muted: #6f6f6f;
    --gf-stat-label: #7a7a70;
    --gf-caption: #8b8f76;

    --gf-band: #f6f7ec;
    --gf-band-line: #e4e6d5;

    --gf-header-bg: linear-gradient(180deg, #eef1e8 0%, #f5f3ec 100%);
    --gf-header-line: #e2e2da;
    --gf-header-h: 74px;

    --gf-container: min(1180px, 92%);
    --gf-font: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', system-ui, -apple-system, sans-serif;

    /* 주의: 커스텀 속성은 @media 조건에 쓸 수 없다. 아래 브레이크포인트는 참고용이며
       실제 미디어쿼리에는 760px / 520px / 880px 을 리터럴로 적어야 한다. */
    --gf-bp-nav: 760px;
    --gf-bp-news-2: 520px;
    --gf-bp-news-4: 880px;
}

/* ── 02 reset + base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { position: relative; }

body.gf-body {
    margin: 0;
    padding: 0;
    font-family: var(--gf-font);
    color: var(--gf-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    /* 시안 루트는 overflow-x:hidden 이지만 body 에 hidden 을 주면 스크롤 컨테이너가 되어
       sticky 헤더가 동작하지 않는다. clip 은 스크롤 컨테이너를 만들지 않으므로 안전하다. */
    overflow-x: clip;
}

a { color: var(--gf-green); text-decoration: none; }
a:hover { color: var(--gf-green-dark); }

img { max-width: 100%; display: block; }

::selection { background: var(--gf-select); }

h1, h2, h3, h4, p { margin: 0; }

button { font-family: inherit; }

:focus-visible { outline: 3px solid var(--gf-green); outline-offset: 2px; }

/* 스크린리더 전용 텍스트 */
.gf-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 본문 바로가기 — 평소엔 화면 밖, 탭으로 포커스되면 나타난다 */
.gf-skip {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 100;
    background: var(--gf-green);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 0 0 8px 8px;
    transition: top .15s ease;
}
.gf-skip:focus { top: 0; color: #fff; }

/* ── 03 primitives ───────────────────────────────────────────────────────── */
.gf-container {
    width: var(--gf-container);
    margin-left: auto;
    margin-right: auto;
}

.gf-section { padding: clamp(56px, 8vw, 96px) 0; }

.gf-h2 {
    font-weight: 900;
    font-size: clamp(24px, 3.4vw, 36px);
    letter-spacing: -0.5px;
    color: var(--gf-heading);
}

.gf-accent { color: var(--gf-accent); }

/* 주황 후원 버튼 (헤더) */
.gf-cta {
    background: var(--gf-orange);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 22px;
    border-radius: 8px;
    white-space: nowrap;
}
.gf-cta:hover { color: #fff; filter: brightness(.95); }

.gf-cta--block {
    display: block;
    margin: 16px 0 4px;
    text-align: center;
    font-size: 16px;
    padding: 13px;
}

/* 테두리형 링크 버튼 (프로그램 카드의 "자세히 보기") */
.gf-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8d8d0;
    color: #555;
    font-weight: 500;
    font-size: 14px;
    padding: 9px 20px;
    border-radius: 6px;
}
.gf-link-btn:hover { color: var(--gf-green-dark); border-color: var(--gf-green); }
.gf-link-btn__chev { width: 15px; height: 15px; flex: 0 0 auto; }

/* ── 04 header ───────────────────────────────────────────────────────────── */
.gf-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--gf-header-bg);
    border-bottom: 1px solid var(--gf-header-line);
}

.gf-header__bar {
    height: var(--gf-header-h);
    display: flex;
    align-items: center;
    gap: 24px;
}

.gf-header__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* 공식 로고 SVG (마크 + 워드마크). 원본 비율 205.03 : 66.87 */
.gf-header__logo-img {
    height: 38px;
    width: auto;
    flex: 0 0 auto;
}

.gf-header__nav {
    display: none;             /* 모바일 우선: 760px 이상에서만 표시 */
    gap: 36px;
    margin-left: 20px;
    align-self: stretch;
    align-items: center;
}

.gf-header__top {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 17px;
    color: #333;
}
.gf-header__top:hover { color: var(--gf-green-dark); }

/* 상단 메뉴의 초록 밑줄.
   현재 보고 있는 항목(--active)뿐 아니라 **마우스를 올리거나 키보드 포커스가 가도** 같은 표시가 나온다
   — 눌러 보기 전에도 어디를 가리키고 있는지 알 수 있어야 한다.
   별도 <span> 이 아니라 ::after 로 두었다. 활성 항목에 마우스를 올려도 밑줄이 두 겹으로 그려지지 않는다.
   (움직임을 줄이는 설정에서는 파일 끝의 prefers-reduced-motion 규칙이 전환을 없앤다) */
.gf-header__top::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: var(--gf-green);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform .18s ease;
}
.gf-header__top--active::after,
.gf-header__top:hover::after,
.gf-header__top:focus-visible::after { transform: scaleX(1); }

.gf-header__tools {
    display: none;             /* 모바일 우선 */
    margin-left: auto;
    align-items: center;
    gap: 20px;
}

.gf-iconbtn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
}
.gf-iconbtn img { width: 24px; height: 24px; object-fit: contain; }

.gf-burger {
    display: flex;
    margin-left: auto;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #333;
}
.gf-burger__icon { display: block; }

/* 메가패널 — 3개 그룹을 한 패널에 동시에 보여준다(시안 구조) */
.gf-mega {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: var(--gf-header-h);
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 14px 24px rgba(0, 0, 0, .06);
}

.gf-mega__inner {
    display: flex;
    gap: 56px;
    padding: 30px 0 38px;
    padding-left: 210px;       /* 첫 열을 첫 메뉴 아래에 맞추기 위한 시안 값 */
}

.gf-mega__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 96px;
    /* 링크 상자를 글자 폭에 맞춘다 — 밑줄이 열 전체가 아니라 글자만큼만 그려져야 한다.
       글자는 원래도 왼쪽 정렬이라 보이는 모습은 그대로다. */
    align-items: flex-start;
}

.gf-mega__link {
    position: relative;
    font-size: 15px;
    color: #555;
    font-weight: 500;
}
.gf-mega__link:hover { color: var(--gf-green-dark); }

/* 마우스를 올리거나 키보드 포커스가 가면 밑줄로 알려 준다(상단 메뉴와 같은 규칙).
   아직 페이지가 없는 항목([data-gf-todo])은 제외한다 — 갈 수 없는 곳에
   '여기로 갑니다' 표시를 내면 거짓말이 된다. */
.gf-mega__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 2px;
    background: var(--gf-green);
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform .16s ease;
}
.gf-mega__link:not([data-gf-todo]):hover::after,
.gf-mega__link:not([data-gf-todo]):focus-visible::after { transform: scaleX(1); }

/* 모바일 메뉴 — 그룹을 모두 펼친 목록(시안대로 개별 접기 없음) */
.gf-mmenu {
    display: none;
    background: #fff;
    border-top: 1px solid var(--gf-header-line);
    padding: 6px 0 14px;
}
.gf-mmenu.is-open { display: block; }

.gf-mmenu__inner {
    width: 92%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.gf-mmenu__group {
    padding: 14px 4px 6px;
    font-weight: 700;
    font-size: 16px;
    color: var(--gf-green);
}

.gf-mmenu__link { position: relative; padding: 10px 14px; font-size: 15px; color: #444; }
.gf-mmenu__link:hover { color: var(--gf-green-dark); }

/* 마우스를 올리거나 키보드 포커스가 가면 왼쪽 초록 막대로 알려 준다.
   세로로 늘어선 줄 목록이라 밑줄보다 막대가 맞다(관리자 사이드바와 같은 모양).

   · ::before 로 그린다 — border-left 를 주면 글자가 3px 씩 밀린다
   · `> ` 로 메뉴 링크만 고른다. 계정 줄(.gf-mmenu__account 안의 로그인·회원가입)은
     가로로 늘어선 다른 성격의 묶음이라 제외한다
   · 아직 페이지가 없는 항목([data-gf-todo])은 제외한다 — 갈 수 없는 곳에 표시를 내면 거짓말이 된다 */
.gf-mmenu__inner > .gf-mmenu__link::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--gf-green);
    transform: scaleY(0);
    transition: transform .15s ease;
}

/* 손가락으로 쓰는 화면에서는 탭한 뒤 hover 가 남는다 — 마우스가 있을 때만 켠다.
   (키보드 포커스는 입력 장치와 무관하므로 이 밖에 둔다) */
@media (hover: hover) {
    .gf-mmenu__inner > .gf-mmenu__link:not([data-gf-todo]):hover { background: #f4f5f0; }
    .gf-mmenu__inner > .gf-mmenu__link:not([data-gf-todo]):hover::before { transform: scaleY(1); }
}
.gf-mmenu__inner > .gf-mmenu__link:not([data-gf-todo]):focus-visible::before { transform: scaleY(1); }

/* ── 05 hero ─────────────────────────────────────────────────────────────── */
.gf-hero {
    position: relative;
    width: 100%;
    height: clamp(440px, 64vh, 600px);
    overflow: hidden;
    background: #7fa87c;
}

.gf-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}
.gf-hero__slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }

.gf-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 왼쪽 스크림 — 흰 글씨 가독성 확보용. 65% 지점에서 완전히 투명해진다 */
.gf-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(60, 80, 55, .62) 0%, rgba(60, 80, 55, .28) 42%, rgba(60, 80, 55, 0) 65%);
    pointer-events: none;
}

.gf-hero__body {
    position: relative;
    z-index: 2;
    width: var(--gf-container);
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;      /* 배경 위 텍스트가 클릭을 가로채지 않도록 */
}

.gf-hero__title {
    margin: 0 0 18px;
    color: #fff;
    font-weight: 900;
    font-size: clamp(30px, 5.2vw, 58px);
    line-height: 1.18;
    letter-spacing: -1px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .22);
}

.gf-hero__lead {
    margin: 0 0 30px;
    color: rgba(255, 255, 255, .95);
    font-weight: 500;
    font-size: clamp(14px, 1.5vw, 19px);
    line-height: 1.7;
    max-width: 560px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

.gf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    pointer-events: auto;      /* 버튼만 클릭 가능하게 되살린다 */
}

.gf-btn {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 18px);
    padding: 15px 34px;
    border-radius: 40px;
}

.gf-btn--primary {
    gap: 9px;
    background: var(--gf-green);
    color: #fff;
    box-shadow: 0 6px 20px rgba(31, 169, 104, .35);
}
.gf-btn--primary:hover { color: #fff; background: var(--gf-green-dark); }
.gf-btn__heart { width: 21px; height: 21px; display: block; flex: 0 0 auto; }

.gf-btn--ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .85);
}
.gf-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .15); }

/* 슬라이더 컨트롤 */
.gf-hero__controls {
    position: absolute;
    z-index: 3;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gf-hero__arrow {
    background: rgba(255, 255, 255, .18);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.gf-hero__arrow:hover { background: rgba(255, 255, 255, .3); }
.gf-hero__arrow svg { width: 22px; height: 22px; }

.gf-hero__dots {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(31, 169, 104, .55);
    padding: 9px 16px;
    border-radius: 20px;
}

/* 시안의 비활성 도트는 8x8px 로 터치 최소 크기(24px)에 못 미친다.
   버튼은 24x24 로 만들고 눈에 보이는 도형만 안쪽 span 에 둔 뒤,
   음수 마진으로 시안의 9px 간격을 유지한다. */
.gf-hero__dot {
    width: 24px;
    height: 24px;
    margin: 0 -4px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.gf-hero__dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition: width .25s ease, border-radius .25s ease, background .25s ease;
}
.gf-hero__dot.is-active span {
    width: 26px;
    height: 8px;
    border-radius: 5px;
    background: #fff;
}

/* ── 06 programs ─────────────────────────────────────────────────────────── */
.gf-programs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(24px, 3vw, 44px);
}

.gf-programs .gf-h2 { margin: 0 0 clamp(36px, 5vw, 56px); }

.gf-prog {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gf-prog__disc {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--gf-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: var(--gf-accent);
}
.gf-prog__icon { display: block; }

.gf-prog__title {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 20px;
    color: var(--gf-heading);
}

.gf-prog__desc {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--gf-muted);
    max-width: 280px;
}

/* ── 07 trust ────────────────────────────────────────────────────────────── */
.gf-trust__head { padding: 0 0 clamp(40px, 5vw, 60px); }
.gf-trust__head .gf-h2 { margin: 0 0 clamp(32px, 4vw, 48px); }

.gf-trust__band {
    background: var(--gf-band);
    padding: clamp(44px, 6vw, 72px) 0;
}

.gf-awards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(16px, 2.5vw, 28px);
    padding-bottom: clamp(36px, 5vw, 54px);
    border-bottom: 1px solid var(--gf-band-line);
}

.gf-award {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.gf-award__logo { display: block; object-fit: contain; }

.gf-award__caption {
    font-size: 13px;
    line-height: 1.55;
    color: var(--gf-caption);
}

.gf-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(28px, 4vw, 40px);
    padding-top: clamp(40px, 5vw, 56px);
}

.gf-stat { text-align: center; }

.gf-stat__num {
    font-weight: 900;
    font-size: clamp(34px, 5vw, 52px);
    color: var(--gf-heading);
    line-height: 1;
}

/* 단위는 숫자 크기에 비례해서 같이 줄고 늘어난다 */
.gf-stat__unit {
    font-size: 0.42em;
    font-weight: 700;
    margin-left: 2px;
}

.gf-stat__label {
    margin-top: 14px;
    font-size: 14px;
    color: var(--gf-stat-label);
}

/* ── 08 news ─────────────────────────────────────────────────────────────── */
.gf-news__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: clamp(28px, 4vw, 44px);
    gap: 16px;
}

.gf-news__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #777;
    font-weight: 500;
    font-size: 15px;
}
.gf-news__more:hover { color: var(--gf-green-dark); }
.gf-news__plus { font-size: 18px; line-height: 1; }

.gf-news__grid {
    display: grid;
    grid-template-columns: 1fr;    /* 모바일 우선. 520/880px 에서 2·4열 */
    gap: clamp(18px, 2.5vw, 28px);
}

.gf-card {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: #e6e6e6;
    transition: transform .18s ease, box-shadow .18s ease;
}

/* 카드 한 장이 통째로 글 링크다 — 현장소식 카드와 같은 방식으로 살짝 떠오른다.
   글이 아직 없어 시안 예시로 채운 카드([data-gf-todo])는 제외한다 — 눌러도 열리지 않는다. */
.gf-card:not([data-gf-todo]):hover,
.gf-card:not([data-gf-todo]):focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
}
.gf-card:focus-visible { outline: 2px solid var(--gf-green); outline-offset: 4px; }

.gf-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 사진이 아직 없는 카드의 자리표시자 */
.gf-card__ph {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, #e6e6e6 0 14px, #dedede 14px 28px);
}

.gf-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .6) 100%);
    pointer-events: none;
}

.gf-card__title {
    position: absolute;
    left: 20px; right: 20px; bottom: 20px;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
    pointer-events: none;
}

/* ── 09 footer ───────────────────────────────────────────────────────────── */
.gf-footer {
    border-top: 1px solid #ececec;
    background: #fff;
}

.gf-footer__contact {
    padding: 26px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.gf-footer__contact-label { font-weight: 700; font-size: 15px; color: #333; }
.gf-footer__tel { font-weight: 900; font-size: 17px; color: var(--gf-green); letter-spacing: .5px; }
.gf-footer__hours { font-size: 14px; color: #999; }

.gf-footer__body { padding: 34px 0 44px; }

.gf-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 30px;
}
.gf-social__link { display: block; }
.gf-social__link img { width: 34px; height: 34px; object-fit: contain; }

.gf-policy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 26px;
    margin-bottom: 22px;
}
.gf-policy__logo { display: flex; align-items: center; margin-right: 6px; }
.gf-policy__logo img { height: 30px; width: auto; opacity: .5; }

.gf-policy__link { color: #666; font-size: 14px; }
.gf-policy__link:hover { color: var(--gf-green-dark); }
.gf-policy__link--strong { color: var(--gf-green); font-weight: 700; }

.gf-legal {
    text-align: center;
    color: #a8a8a8;
    font-size: 13px;
    line-height: 1.9;
}

/* ── 09b 서브배너 ────────────────────────────────────────────────────────── */
.gf-subbanner__hero {
    position: relative;
    width: 100%;
    height: clamp(150px, 22vw, 260px);
    overflow: hidden;
    background: #7fa87c;
}
.gf-subbanner__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gf-subbanner__tint {
    position: absolute;
    inset: 0;
    background: rgba(70, 90, 60, .16);
    pointer-events: none;
}

.gf-crumb {
    border-bottom: 1px solid #eee;
    background: #fafafa;
}
.gf-crumb__inner {
    height: 64px;
    display: flex;
    align-items: stretch;
}

.gf-crumb__home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    flex: 0 0 auto;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}
.gf-crumb__home img { width: 20px; height: 20px; object-fit: contain; }

.gf-crumb__cell {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    border-right: 1px solid #eee;
    font-size: 15px;
    white-space: nowrap;
}
.gf-crumb__cell--category { color: #555; }
.gf-crumb__cell--category .gf-crumb__chev { color: #bbb; }
.gf-crumb__cell--page { color: var(--gf-orange); font-weight: 700; }
.gf-crumb__cell--page .gf-crumb__chev { color: var(--gf-orange); }
.gf-crumb__chev { flex: 0 0 auto; }

/* ── 09c 서브페이지 공통 ─────────────────────────────────────────────────── */
.gf-page {
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 96px);
}
.gf-page--760  { width: min(760px, 92%); }
.gf-page--980  { width: min(980px, 92%); }
.gf-page--1040 { width: min(1040px, 92%); }
.gf-page--1120 { width: min(1120px, 92%); }
.gf-page--tight { padding-top: clamp(40px, 6vw, 72px); }
.gf-page--field { padding-top: clamp(44px, 6vw, 80px); }

.gf-page__title {
    margin: 0 0 clamp(28px, 4vw, 44px);
    font-weight: 900;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -1px;
    color: #222;
}
/* 시안은 페이지마다 제목·리드의 여백이 조금씩 다르다. 묶지 말고 그대로 둔다.
   --tight = 현장소식(10px) / --sub = 주요사업(12px) */
.gf-page__title--tight { margin-bottom: 10px; }
.gf-page__title--sub { margin-bottom: 12px; }

.gf-page__lead {
    margin: 0 0 clamp(32px, 4vw, 48px);   /* 현장소식 */
    font-size: clamp(15px, 1.6vw, 18px);
    color: #7a7a7a;
}
.gf-page__lead--wide { margin-bottom: clamp(44px, 6vw, 72px); }   /* 주요사업 */

/* 사진이 아직 없는 자리 — 대문 뉴스 카드와 같은 사선 무늬 */
.gf-ph,
.gf-biz__ph,
.gf-story__ph,
.gf-map__ph,
.gf-pcard__ph {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, #e6e6e6 0 14px, #dedede 14px 28px);
}

/* ── 인사말 ─────────────────────────────────────────────────────────────── */
.gf-greet__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8;
    border-radius: 8px;
    overflow: hidden;
    background: #dfe6ea;
    margin: 0 0 clamp(40px, 6vw, 64px);
}
.gf-greet__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gf-greet__photo-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, rgba(18, 32, 22, .35) 100%);
    pointer-events: none;
}
.gf-greet__quote {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    text-align: right;
    color: #fff;
    font-weight: 700;
    font-size: clamp(18px, 3vw, 32px);
    line-height: 1.5;
    background: rgba(16, 30, 20, .82);
    padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.8vw, 34px);
    border-radius: 6px;
    pointer-events: none;
}

.gf-greet__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.gf-greet__title {
    margin: 0;
    font-weight: 900;
    font-size: clamp(30px, 4.4vw, 48px);
    letter-spacing: -1px;
    color: #222;
}
.gf-greet__text {
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 2;
    color: #4a4a4a;
}
.gf-greet__text p { margin: 0 0 24px; }
.gf-greet__closing { margin-bottom: 40px !important; }
.gf-greet__sign { text-align: right; }
.gf-greet__role { font-size: 15px; color: #888; }
.gf-greet__name { font-weight: 900; font-size: 26px; color: #222; margin-top: 6px; }

/* ── 핵심가치 ───────────────────────────────────────────────────────────── */
.gf-values__intro {
    background: #f2f2f0;
    border-radius: 6px;
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 60px);
    text-align: center;
    margin-bottom: clamp(48px, 7vw, 80px);
}
.gf-values__headline {
    margin: 0 0 22px;
    font-weight: 900;
    font-size: clamp(26px, 3.8vw, 40px);
    line-height: 1.35;
    letter-spacing: -0.5px;
    color: var(--gf-heading);
}
.gf-values__lead {
    margin: 0;
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.8;
    color: #666;
}

.gf-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: clamp(16px, 4vw, 48px);
    align-items: start;
    padding: clamp(28px, 4vw, 44px) 0;
    border-bottom: 1px solid #ececec;
}
.gf-value__title {
    margin: 0;
    font-weight: 900;
    font-size: clamp(26px, 3.4vw, 38px);
    color: #222;
    letter-spacing: -0.5px;
}
.gf-value__desc {
    margin: 0;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.9;
    color: #555;
}

/* ── 히스토리 ───────────────────────────────────────────────────────────── */
.gf-timeline { position: relative; }
.gf-timeline__line {
    position: absolute;
    left: 6px; top: 8px; bottom: 8px;
    width: 2px;
    background: #cdeadd;
}

.gf-phase { margin-bottom: clamp(36px, 5vw, 52px); }

.gf-phase__head {
    position: relative;
    padding-left: 40px;
    margin: 0 0 26px;
    font-weight: 400;   /* h2 기본 굵기 상쇄 — 실제 스타일은 알약에 준다 */
    font-size: inherit;
}
.gf-phase__dot {
    position: absolute;
    left: -1px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--gf-green);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #cdeadd;
}
.gf-phase__pill {
    display: inline-block;
    border: 1.5px solid var(--gf-green);
    color: var(--gf-green);
    font-weight: 700;
    font-size: clamp(15px, 1.7vw, 18px);
    padding: 9px 22px;
    border-radius: 40px;
}

.gf-entry {
    position: relative;
    padding-left: 40px;
    padding-bottom: 24px;
}
.gf-entry__dot {
    position: absolute;
    left: 1px; top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--gf-green);
}
.gf-entry__year {
    font-weight: 700;
    font-size: clamp(17px, 2vw, 21px);
    color: var(--gf-green);
    margin-bottom: 6px;
}
.gf-entry__text {
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 1.7;
    color: #555;
}

/* ── 목록 페이지 공통 (투명경영 · 현장소식) ──────────────────────────────── */
.gf-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #e5e5e5;
    margin-bottom: clamp(28px, 4vw, 40px);
}
.gf-tabs--filled { margin-bottom: clamp(32px, 4vw, 48px); }

.gf-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 14px clamp(14px, 2vw, 26px);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(14px, 1.6vw, 18px);
    color: #888;
}
.gf-tab.is-active { border-bottom-color: var(--gf-green); color: var(--gf-green); }

/* 투명경영 탭은 폭을 균등 분할하고 비활성 배경이 있다 */
.gf-tabs--filled .gf-tab {
    flex: 1 1 0;
    background: #f7f7f5;
    padding: clamp(14px, 1.8vw, 20px) 8px;
    font-size: clamp(15px, 1.7vw, 19px);
}
.gf-tabs--filled .gf-tab.is-active { background: #fff; }

.gf-listfilter {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(28px, 4vw, 44px);
}
.gf-listfilter__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(560px, 100%);
}
.gf-listfilter__select {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    border: 1px solid #ddd;
    border-radius: 40px;
    padding: 11px 20px;
    background: none;
    color: #666;
    font-size: 15px;
    cursor: pointer;
}
.gf-listfilter__chev { color: #999; }
.gf-listfilter__search {
    flex: 1;
    /* min-width:0 이 없으면 flex 항목이 내용(입력칸+아이콘)보다 작게 줄지 못해
       좁은 화면에서 페이지 전체가 가로로 넘친다 */
    min-width: 0;
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 40px;
    padding: 11px 20px;
    gap: 10px;
}
.gf-listfilter__search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    background: transparent;
    color: #333;
}
.gf-listfilter__icon { color: #999; flex: 0 0 auto; }

.gf-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: clamp(36px, 5vw, 52px);   /* 투명경영 */
    color: #888;
    font-size: 15px;
    flex-wrap: wrap;
}
.gf-pager--wide { margin-top: clamp(40px, 5vw, 60px); }   /* 현장소식 */
.gf-pager__edge { padding: 6px 8px; color: #888; }
.gf-pager__num { padding: 6px 11px; border-radius: 5px; color: #888; }
.gf-pager__edge:hover, .gf-pager__num:hover { color: var(--gf-green-dark); }
.gf-pager__num.is-active {
    font-weight: 700;
    color: var(--gf-green);
    text-decoration: underline;
}

/* ── 투명경영 표 ────────────────────────────────────────────────────────── */
.gf-table-wrap {
    /* position:relative 가 반드시 있어야 한다.
       표 안에 .gf-sr-only(position:absolute) 라벨이 들어가면, 이 상자가 positioned 가 아닐 때
       그 라벨의 컨테이닝 블록이 최초 컨테이닝 블록이 되어 아래 overflow 클리핑을 빠져나간다.
       그러면 표는 얌전히 가로 스크롤되는데 페이지 전체가 가로로 밀린다(원인이 전혀 안 보인다). */
    position: relative;
    overflow-x: auto;
    border-top: 2px solid var(--gf-green);
}
.gf-table { min-width: 680px; }

.gf-table__head,
.gf-table__row {
    display: grid;
    grid-template-columns: 1.3fr 3.4fr 1.3fr 0.9fr 1.1fr;
}
.gf-table__head {
    background: #f7f7f5;
    padding: 16px 8px;
    font-weight: 700;
    font-size: 15px;
    color: #444;
}
.gf-table__row {
    align-items: center;
    padding: 18px 8px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    color: #555;
}
/* 표의 줄은 링크가 아니다(투명경영은 줄 안의 '다운로드' 버튼이, 관리자 목록은 '수정'이 링크다).
   그래서 초록 막대 같은 '여기로 갑니다' 표시는 붙이지 않는다 — 거짓말이 된다.
   대신 열이 많은 표에서 눈이 한 줄을 따라가도록 바탕만 옅게 깐다(읽기 보조). */
.gf-table__row { transition: background-color .15s ease; }
.gf-table__row:hover { background: #f9f9f6; }

.gf-table__head > *, .gf-table__row > * { padding: 0 12px; }
.gf-table__muted { color: #888; }
.gf-table__title { color: #333; font-weight: 500; }

.gf-dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8d8d0;
    border-radius: 5px;
    padding: 7px 12px;
    font-size: 13px;
    color: #555;
}
.gf-dl:hover { color: var(--gf-green-dark); border-color: var(--gf-green); }
.gf-dl__icon { flex: 0 0 auto; }

/* ── 오시는길 ───────────────────────────────────────────────────────────── */
.gf-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 8px;
    overflow: hidden;
    background: #e4e9e6;
    margin-bottom: clamp(36px, 5vw, 56px);
    border: 1px solid #e2e2e2;
}
.gf-map__note {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: #7d8a82;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

/* 카카오맵 '지도 퍼가기'가 들어간 약도.
   높이는 비율로 고정하지 않고 내용에 맡긴다 — 폭과 16:7 비율은 directions-map.js 가 계산해 넣는다.
   (지도 아래 딸려 오는 안내 막대들을 감추기 전에는 비율을 고정하면 그 막대가 잘렸다) */
.gf-map--live {
    aspect-ratio: auto;
    background: #f2f4f2;
    line-height: 0;                       /* 지도 아래 생기는 인라인 여백 제거 */
}
.gf-map--live .root_daum_roughmap {
    width: 100% !important;               /* 로더가 인라인으로 박는 px 폭을 덮는다 */
    line-height: normal;
}
.gf-map--live .root_daum_roughmap .wrap_map { width: 100% !important; }

/* 지도 아래에 카카오가 붙이는 두 덩어리를 감춘다 — 지도 그림만 남긴다.
   · .cont           '주소·전화'. 바로 밑 '주소 · 연락처' 카드와 겹치고, 전화는 등록값이 없어 '-' 로 나온다
   · .wrap_controllers  kakaomap 로고·길찾기 막대
   출처 표시는 지도 그림 우하단에 박혀 있는 kakao 워터마크·축척으로 남는다(그건 건드리지 않는다). */
.gf-map--live .root_daum_roughmap .cont,
.gf-map--live .root_daum_roughmap .wrap_controllers { display: none !important; }

/* 지도를 못 띄웠을 때(JS 꺼짐·로더 실패) 되돌아가는 자리 — 시안 자리표시자와 같은 모양 */
.gf-map__fallback {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    line-height: normal;
}
.gf-map__fallback .gf-map__note a { color: var(--gf-green-dark); text-decoration: underline; }

.gf-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 3vw, 32px);
}
.gf-info__card {
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: clamp(24px, 3vw, 34px);
}
.gf-info__title {
    margin: 0 0 20px;
    font-weight: 700;
    font-size: 20px;
    color: var(--gf-green);
}
.gf-info__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.gf-info__row { display: flex; gap: 14px; }
.gf-info__row dt {
    flex: 0 0 64px;
    font-weight: 700;
    color: #888;
    font-size: 15px;
}
.gf-info__row dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

/* ── 주요사업 ───────────────────────────────────────────────────────────── */
.gf-biz {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    margin-bottom: clamp(48px, 7vw, 84px);
}
.gf-biz:last-child { margin-bottom: 0; }

.gf-biz__figure {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: #e8e8e8;
}
.gf-biz__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 글이 왼쪽인 블록 — 마크업 순서는 그대로 두고 시각 순서만 바꾼다 */
.gf-biz--reverse .gf-biz__figure { order: 2; }
.gf-biz--reverse .gf-biz__body { order: 1; }

.gf-biz__title {
    margin: 0 0 18px;
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 28px);
    color: var(--gf-accent);
}
.gf-biz__summary {
    margin: 0 0 22px;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.85;
    color: #555;
}
.gf-biz__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: clamp(14px, 1.5vw, 16px);
    color: #555;
}
.gf-biz__points li { display: flex; gap: 10px; }
.gf-biz__bullet { color: var(--gf-accent); font-weight: 900; flex: 0 0 auto; }

/* ── 현장소식 ───────────────────────────────────────────────────────────── */
.gf-stories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(22px, 3vw, 36px);
}
/* 카드 한 장이 통째로 글 링크다 — 마우스를 올리거나 키보드 포커스가 가면
   살짝 떠오르고 그림자가 생겨 "이걸 누르면 열린다"를 알려 준다(인물 카드와 같은 언어). */
.gf-story {
    display: block;
    transition: transform .18s ease;
}
.gf-story:hover,
.gf-story:focus-visible { transform: translateY(-4px); }
.gf-story:focus-visible {
    outline: 2px solid var(--gf-green);
    outline-offset: 6px;
    border-radius: 8px;
}

.gf-story__figure {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    background: #e6e6e6;
    margin-bottom: 16px;
    transition: box-shadow .18s ease;
}
.gf-story:hover .gf-story__figure,
.gf-story:focus-visible .gf-story__figure { box-shadow: 0 12px 26px rgba(0, 0, 0, .16); }
.gf-story__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gf-story__title {
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.5;
    color: #333;
    transition: color .18s ease;
}
.gf-story:hover .gf-story__title,
.gf-story:focus-visible .gf-story__title { color: var(--gf-green-dark); }

/* ── 도움 요청 ──────────────────────────────────────────────────────────── */
.gf-help__lead {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 4vw, 48px);
    align-items: start;
    padding-bottom: clamp(40px, 6vw, 64px);
    border-bottom: 1px solid #ececec;
}
.gf-help__title {
    margin: 0;
    font-weight: 900;
    font-size: clamp(30px, 4.4vw, 48px);
    letter-spacing: -1px;
    color: #222;
}
.gf-help__hook {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: clamp(17px, 1.9vw, 22px);
    color: var(--gf-accent);
}
.gf-help__desc {
    margin: 0 0 30px;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.8;
    color: #555;
}
.gf-help__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.gf-help__or { color: #999; font-size: 15px; }

.gf-btn-kakao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fae100;
    color: #3c1e1e;
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 18px);
    padding: 16px 30px;
    border-radius: 10px;
}
.gf-btn-kakao:hover { color: #3c1e1e; filter: brightness(.95); }
.gf-btn-kakao__icon { flex: 0 0 auto; }

.gf-btn-tel {
    display: inline-flex;
    align-items: center;
    background: #f0f0f0;
    color: #666;
    font-weight: 500;
    font-size: clamp(14px, 1.5vw, 16px);
    padding: 16px 26px;
    border-radius: 10px;
}
.gf-btn-tel:hover { color: var(--gf-green-dark); }

.gf-help__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(32px, 5vw, 48px);
    padding-top: clamp(48px, 7vw, 80px);
}
.gf-hfeat { text-align: center; }
.gf-hfeat__icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gf-hfeat__icon img { height: 76px; width: auto; object-fit: contain; }
.gf-hfeat__title {
    margin: 0 0 12px;
    font-weight: 900;
    font-size: 20px;
    color: #222;
}
.gf-hfeat__desc { margin: 0; font-size: 15px; color: #777; }

/* ── 09d 계정 (회원가입 · 로그인) ────────────────────────────────────────
   시안이 없는 화면이라 기존 토큰으로 새로 구성했다. */

.gf-page--440 { width: min(440px, 92%); }
.gf-page--560 { width: min(560px, 92%); }
.gf-page__title--center { text-align: center; margin-bottom: 14px; }

.gf-flash {
    background: var(--gf-mint);
    border-bottom: 1px solid #cfe9dc;
    color: #17724c;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 0;
}

.gf-form__intro {
    margin: 0 0 clamp(28px, 4vw, 40px);
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    color: #777;
}
.gf-form__req-note { display: block; margin-top: 6px; font-size: 13px; color: #999; }

.gf-form { display: flex; flex-direction: column; gap: 20px; }

/* 서버가 돌려준 폼 전체 오류(로그인 실패 등) */
.gf-form__summary { display: none; }
.gf-form__summary.validation-summary-errors {
    display: block;
    background: #fdf1f1;
    border: 1px solid #f0c8c8;
    border-radius: 8px;
    padding: 14px 18px;
    color: #b33a3a;
    font-size: 15px;
    line-height: 1.6;
}
.gf-form__summary ul { margin: 0; padding-left: 18px; }
.gf-form__summary ul:only-child li:only-child { list-style: none; margin-left: -18px; }

.gf-field { display: flex; flex-direction: column; gap: 8px; }

.gf-label {
    font-weight: 700;
    font-size: 15px;
    color: #444;
}
.gf-req { color: #d9534f; margin-left: 2px; }
.gf-optional { color: #999; font-weight: 400; }

.gf-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 15px;
    color: #333;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gf-input::placeholder { color: #bbb; }
.gf-input:focus {
    outline: none;
    border-color: var(--gf-green);
    box-shadow: 0 0 0 3px rgba(31, 169, 104, .15);
}
.gf-input.input-validation-error { border-color: #d9534f; }
.gf-input.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(217, 83, 79, .15); }

/* 코드를 붙여 넣는 칸(지도 퍼가기 소스 등) — 줄바꿈이 그대로 보여야 확인하기 쉽다 */
.gf-input--code {
    font-family: Consolas, "D2Coding", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    resize: vertical;
}

.gf-hint { font-size: 13px; color: #999; line-height: 1.5; min-height: 0; }
.gf-hint.is-ok { color: var(--gf-green); font-weight: 500; }
.gf-hint.is-ng { color: #d9534f; font-weight: 500; }

.gf-error { font-size: 13px; color: #d9534f; line-height: 1.5; }
.gf-error:empty { display: none; }

.gf-agree {
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 20px 22px;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gf-agree__legend {
    padding: 0 8px;
    font-weight: 700;
    font-size: 15px;
    color: #444;
}

.gf-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    cursor: pointer;
}
.gf-check input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex: 0 0 auto;
    accent-color: var(--gf-green);
    cursor: pointer;
}
.gf-check--inline { margin: -4px 0 0; }

/* 동의 체크박스 + '전문 보기' 링크를 한 줄에 놓는다.
   ⚠️ 링크를 .gf-check(label) **안**에 넣으면 안 된다 — 전문을 열려고 누를 때
   label 이 연결된 체크박스를 함께 토글한다. 그래서 형제로 두고 이 행이 나란히 놓는다. */
.gf-agree__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.gf-agree__row .gf-check { flex: 1 1 auto; }
.gf-agree__view {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gf-green);
    text-decoration: underline;
    white-space: nowrap;
}
.gf-agree__view:hover,
.gf-agree__view:focus-visible { color: var(--gf-green-dark); }

.gf-submit {
    width: 100%;
    margin-top: 8px;
    background: var(--gf-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px;
    font-family: inherit;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    transition: background .15s ease;
}
.gf-submit:hover { background: var(--gf-green-dark); }

.gf-form__foot {
    margin: 4px 0 0;
    text-align: center;
    font-size: 15px;
    color: #777;
}
.gf-form__foot a { font-weight: 700; margin-left: 4px; }

/* 안내 상자 (비밀번호 찾기 접수·토큰 오류 등) */
.gf-notice {
    background: var(--gf-mint);
    border: 1px solid #cfe9dc;
    border-radius: 8px;
    padding: 22px 24px;
    font-size: 15px;
    line-height: 1.75;
    color: #2f6b51;
}
.gf-notice p { margin: 0 0 10px; }
.gf-notice p:last-child { margin-bottom: 0; }
.gf-notice__sub { font-size: 14px; color: #5c8672; }
.gf-notice--warn {
    background: #fdf6ec;
    border-color: #f0dcb8;
    color: #8a6320;
}

.gf-form__sep { margin: 0 8px; color: #ccc; }

/* 마이페이지 */
.gf-summary {
    margin: 0 0 clamp(28px, 4vw, 40px);
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gf-summary__row { display: flex; gap: 14px; font-size: 15px; }
.gf-summary__row dt { flex: 0 0 84px; color: #888; font-weight: 700; }
.gf-summary__row dd { margin: 0; color: #444; }

.gf-panel {
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: clamp(22px, 3vw, 30px);
    margin-bottom: 24px;
}
.gf-panel:last-child { margin-bottom: 0; }
.gf-panel__title {
    margin: 0 0 20px;
    font-weight: 700;
    font-size: 19px;
    color: var(--gf-green);
}
.gf-panel__desc {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #777;
}

.gf-panel--danger { border-color: #f0d5d5; background: #fdfafa; }
.gf-panel--danger .gf-panel__title { color: #b33a3a; }

/* 반드시 읽어야 하는 안내(위험하지는 않지만 놓치면 안 되는 것) */
.gf-panel--warn { border-color: #f0e3c8; background: #fffdf7; }
.gf-panel--warn .gf-panel__title { color: #a9761d; }

/* 패널 안의 설명 목록 — .gf-panel__desc 와 같은 글씨로 둔다 */
.gf-panel__list {
    margin: 0 0 20px;
    padding-left: 20px;
    list-style: disc;
    font-size: 14px;
    line-height: 1.7;
    color: #777;
}
.gf-panel__list:last-child { margin-bottom: 0; }
.gf-panel__list li { margin: 0 0 8px; }
.gf-panel__list li:last-child { margin-bottom: 0; }
.gf-panel__list strong { color: #555; }

.gf-submit--danger { background: #c0504d; }
.gf-submit--danger:hover { background: #a34240; }

/* 헤더·모바일 메뉴의 로그인 상태 표시 */
.gf-header__me { font-size: 15px; color: #555; font-weight: 500; white-space: nowrap; }
.gf-header__me:hover { color: var(--gf-green-dark); }
.gf-header__logout { margin: 0; display: flex; }

.gf-linkbtn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    color: #777;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gf-linkbtn:hover { color: var(--gf-green-dark); }

.gf-mmenu__account {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 14px 4px;
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
}
.gf-mmenu__account form { margin: 0; }
.gf-mmenu__me { font-size: 15px; color: #555; font-weight: 500; }
.gf-mmenu__account .gf-mmenu__link { padding: 0; }

/* ── 09e 게시판 ──────────────────────────────────────────────────────────
   시안(현장소식·투명경영)의 목록 모양은 그대로 두고, 상세·관리·댓글을 새로 구성했다. */

.gf-admin__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.gf-admin__head--right { justify-content: flex-end; margin-bottom: 16px; }

/* 오른쪽에 버튼이 둘 이상일 때 — space-between 이 가운데 것을 어중간한 자리에 놓지 않게 묶는다 */
.gf-admin__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* 헤더의 관리자 버튼 — 관리자에게만 보인다 */
.gf-header__admin {
    flex: 0 0 auto;
    border: 1px solid var(--gf-green);
    color: var(--gf-green-dark);
    font-weight: 700;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
}
.gf-header__admin:hover { background: var(--gf-mint); color: var(--gf-green-dark); }

/* 공개 게시판 목록에서 관리자에게만 보이는 '글 등록' 버튼.
   관리자 화면에서도 같은 모양을 쓴다(admin.css 는 이 규칙 위에 얹힌다) */
.gf-btn-add {
    flex: 0 0 auto;
    background: var(--gf-green);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 20px;
    border-radius: 8px;
    white-space: nowrap;
}
.gf-btn-add:hover { color: #fff; background: var(--gf-green-dark); }

.gf-empty {
    margin: clamp(40px, 6vw, 72px) 0;
    text-align: center;
    color: #999;
    font-size: 16px;
}
.gf-empty--small { margin: 24px 0; font-size: 15px; }

/* 검색 폼의 제출 버튼(시안에는 아이콘만 있었다) */
.gf-listfilter__submit {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    color: #999;
    cursor: pointer;
    flex: 0 0 auto;
}
.gf-listfilter__submit:hover { color: var(--gf-green); }

.gf-table__row.is-deleted { opacity: .55; }
.gf-table__actions { display: flex; gap: 12px; align-items: center; }
.gf-table__actions form { margin: 0; }

.gf-badge {
    display: inline-block;
    margin-left: 8px;
    background: var(--gf-mint);
    color: var(--gf-green-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}

.gf-pager__edge.is-off { color: #ddd; }

/* 카드 목록의 추가 정보 */
.gf-story__meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #999;
}
.gf-story__cat { color: var(--gf-accent); font-weight: 700; }
.gf-story__pin {
    position: absolute;
    left: 10px; top: 10px;
    z-index: 2;
    background: var(--gf-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
}

/* 글 상세 */
.gf-post__head {
    padding-bottom: 24px;
    border-bottom: 2px solid #eee;
    margin-bottom: clamp(28px, 4vw, 44px);
}
.gf-post__cat {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--gf-accent);
    font-weight: 700;
    font-size: 15px;
}
.gf-post__title {
    margin: 0 0 16px;
    font-weight: 900;
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.35;
    letter-spacing: -0.5px;
    color: #222;
}
.gf-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 14px;
    color: #999;
}

.gf-post__body {
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.9;
    color: #4a4a4a;
    word-break: break-word;
}
.gf-post__body p { margin: 0 0 20px; }
.gf-post__body img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }
.gf-post__body h1, .gf-post__body h2, .gf-post__body h3 {
    margin: 32px 0 14px;
    font-weight: 700;
    color: var(--gf-heading);
    line-height: 1.4;
}
.gf-post__body h1 { font-size: 26px; }
.gf-post__body h2 { font-size: 22px; }
.gf-post__body h3 { font-size: 19px; }
.gf-post__body ul, .gf-post__body ol { margin: 0 0 20px; padding-left: 22px; }
.gf-post__body li { margin-bottom: 8px; }
.gf-post__body blockquote {
    margin: 0 0 20px;
    padding: 12px 20px;
    border-left: 4px solid var(--gf-mint);
    background: #fafafa;
    color: #666;
}
.gf-post__body table { border-collapse: collapse; width: 100%; margin: 0 0 20px; }
.gf-post__body th, .gf-post__body td { border: 1px solid #e5e5e5; padding: 10px 12px; }
.gf-post__body th { background: #f7f7f5; font-weight: 700; }

.gf-post__files {
    margin-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid #ececec;
    padding-top: 24px;
}
.gf-post__files-title { margin: 0 0 14px; font-weight: 700; font-size: 16px; color: #444; }

.gf-filelist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gf-filelist li {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 15px;
}
.gf-filelist__link { display: inline-flex; align-items: center; gap: 7px; color: #444; }
.gf-filelist__link:hover { color: var(--gf-green-dark); }
.gf-filelist__name { color: #444; }
.gf-filelist__size { font-size: 13px; color: #aaa; }
/* 파일별 내려받은 횟수(관리자 글 수정 화면). 크기 표시보다 눈에 띄되 파일명보다는 약하게 */
.gf-filelist__count {
    font-size: 13px;
    color: var(--gf-green-dark);
    background: var(--gf-mint);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
.gf-filelist form { margin: 0; }

.gf-post__nav {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: clamp(36px, 5vw, 56px);
}

/* 댓글 */
.gf-comments {
    margin-top: clamp(44px, 6vw, 72px);
    border-top: 1px solid #ececec;
    padding-top: clamp(28px, 4vw, 40px);
}
.gf-comments__title { margin: 0 0 20px; font-weight: 700; font-size: 18px; color: #333; }
.gf-comments__count { color: var(--gf-green); margin-left: 4px; }

.gf-comments__list { margin: 0 0 24px; padding: 0; list-style: none; }
.gf-comment { padding: 18px 0; border-bottom: 1px solid #f2f2f2; }
.gf-comment__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.gf-comment__head form { margin: 0; }
.gf-comment__author { font-weight: 700; font-size: 15px; color: #444; }
.gf-comment__date { font-size: 13px; color: #aaa; }
.gf-comment__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    white-space: pre-wrap;   /* 줄바꿈은 살리되 HTML 은 실행되지 않는다 */
    word-break: break-word;
}

.gf-comment-form { gap: 12px; }
.gf-textarea { resize: vertical; min-height: 90px; font-family: inherit; line-height: 1.6; }
.gf-submit--inline { width: auto; align-self: flex-end; padding: 12px 28px; font-size: 15px; margin-top: 0; }
.gf-comments__signin { margin: 0; font-size: 15px; color: #777; text-align: center; padding: 20px 0; }

/* 관리자 편집 화면 */
.gf-input--file { padding: 10px 12px; }
.gf-thumb-preview {
    max-width: 240px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    margin-bottom: 4px;
}
select.gf-input { appearance: auto; }

/* ── 09f 후원하기 ────────────────────────────────────────────────────────
   시안이 없는 화면이라 기존 토큰으로 새로 구성했다. */

.gf-donate__types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.gf-dtype {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    padding: 18px 20px;
    background: #fff;
    text-align: left;
}
.gf-dtype:hover { border-color: var(--gf-green); }
.gf-dtype.is-active {
    border-color: var(--gf-green);
    background: var(--gf-mint);
    box-shadow: 0 0 0 1px var(--gf-green) inset;
}
.gf-dtype__name { font-weight: 700; font-size: 17px; color: var(--gf-heading); }
.gf-dtype.is-active .gf-dtype__name { color: var(--gf-green-dark); }
.gf-dtype__desc { font-size: 13px; line-height: 1.5; color: #888; }

.gf-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.gf-amount {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 8px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
}
.gf-amount:hover { border-color: var(--gf-green); color: var(--gf-green-dark); }
.gf-amount.is-active {
    border-color: var(--gf-green);
    background: var(--gf-green);
    color: #fff;
    font-weight: 700;
}

.gf-amount-input { position: relative; }
.gf-amount-input .gf-input { padding-right: 44px; }
.gf-amount-unit {
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 15px;
    pointer-events: none;
}

.gf-radios { display: flex; flex-wrap: wrap; gap: 10px; }
.gf-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 15px;
    color: #555;
    cursor: pointer;
}
.gf-radio:has(input:checked) {
    border-color: var(--gf-green);
    background: var(--gf-mint);
    color: var(--gf-green-dark);
    font-weight: 700;
}
.gf-radio input { width: 17px; height: 17px; accent-color: var(--gf-green); cursor: pointer; }

.gf-donate__bank { margin-top: clamp(36px, 5vw, 56px); }

/* ── 09h 봉사하기 ────────────────────────────────────────────────────────
   시안이 없는 화면이다. 후원하기의 구성·간격을 그대로 따랐다. */

.gf-vol__areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.gf-varea {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 20px 22px;
    background: #fbfbf9;
}
.gf-varea__name { margin: 0; font-weight: 700; font-size: 17px; color: var(--gf-green-dark); }
.gf-varea__desc { margin: 0; font-size: 14px; line-height: 1.65; color: #777; }
.gf-varea__pick {
    margin-top: auto;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gf-green);
}
.gf-varea__pick:hover { color: var(--gf-green-dark); text-decoration: underline; }

/* 체크박스 묶음(관심 활동·요일·시간대) */
.gf-cgroup {
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 18px 20px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gf-cgroup__legend {
    padding: 0 8px;
    font-weight: 700;
    font-size: 15px;
    color: #444;
}
.gf-cgroup__items { display: flex; flex-wrap: wrap; gap: 10px; }

.gf-cpill {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 15px;
    color: #555;
    cursor: pointer;
}
.gf-cpill:has(input:checked) {
    border-color: var(--gf-green);
    background: var(--gf-mint);
    color: var(--gf-green-dark);
    font-weight: 700;
}
.gf-cpill input { width: 17px; height: 17px; accent-color: var(--gf-green); cursor: pointer; flex: 0 0 auto; }
.gf-cpill--sm { padding: 10px 14px; min-width: 58px; justify-content: center; }
.gf-cpill__hint { font-weight: 400; font-size: 13px; color: #999; margin-left: 2px; }
.gf-cpill:has(input:checked) .gf-cpill__hint { color: #5c8672; }

/* 신청 후 진행 순서 */
.gf-vol__guide { margin-top: clamp(36px, 5vw, 56px); }
.gf-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.gf-step { display: flex; gap: 14px; align-items: flex-start; }
.gf-step__no {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gf-mint);
    color: var(--gf-green-dark);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gf-step__body { font-size: 15px; line-height: 1.7; color: #555; }
.gf-step__body strong { color: var(--gf-heading); }
.gf-vol__contact { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #f2f2f2; }

/* ── 09i 함께하는 사람들 ─────────────────────────────────────────────────
   시안이 없는 화면이다. 통계·로고는 대문 TRUST(.gf-stats / .gf-awards)를 그대로 쓰고,
   인물 카드와 모달만 여기서 새로 만든다. */

.gf-people__intro { padding: clamp(48px, 7vw, 88px) 0 clamp(20px, 3vw, 36px); }
.gf-people__sec { padding: clamp(36px, 5vw, 60px) 0; }
.gf-people__head { margin: 0 0 clamp(22px, 3vw, 34px); }
.gf-people__lead { margin: 10px 0 0; font-size: clamp(14px, 1.5vw, 16px); color: #7a7a7a; line-height: 1.7; }

/* 띠 구역이 연달아 오면 사이 여백이 두 배가 된다 */
.gf-trust__band + .gf-trust__band { padding-top: 0; }
.gf-people .gf-trust__band .gf-awards { border-bottom: none; padding-bottom: 0; }

/* 로고 파일이 아직 없는 자리 */
.gf-award__logo--empty {
    display: block;
    border-radius: 6px;
    background: repeating-linear-gradient(135deg, #e6e6e6 0 14px, #dedede 14px 28px);
}

/* ── 인물 카드 ─────────────────────────────────────────────────────────── */

.gf-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
}

.gf-pcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    color: inherit;
}

.gf-pcard__figure {
    /* overflow 로 자르므로 position:relative 가 반드시 있어야 한다 —
       안쪽 절대배치 요소가 클리핑을 빠져나가 페이지를 가로로 밀었던 전례가 있다 */
    position: relative;
    width: 100%;
    max-width: 168px;
    aspect-ratio: 1 / 1;
    margin-bottom: 14px;
    border-radius: 50%;
    overflow: hidden;
    background: #e6e6e6;
}
.gf-pcard__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gf-pcard__name { font-weight: 700; font-size: clamp(16px, 1.7vw, 18px); color: var(--gf-heading); }
.gf-pcard__role { font-size: 14px; font-weight: 700; color: var(--gf-green); }
.gf-pcard__bio { margin-top: 4px; font-size: 14px; line-height: 1.65; color: #8a8a8a; }

/* 누를 수 있는 카드만 반응한다 */
.gf-pcard__more {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #b5b5b0;
}
.gf-pcard--link { cursor: pointer; }
.gf-pcard--link .gf-pcard__figure { transition: box-shadow .18s ease, transform .18s ease; }
.gf-pcard--link:hover .gf-pcard__figure {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}
.gf-pcard--link:hover .gf-pcard__name { color: var(--gf-green-dark); }
.gf-pcard--link:hover .gf-pcard__more { color: var(--gf-green); }
.gf-pcard--link:focus-visible {
    outline: 2px solid var(--gf-green);
    outline-offset: 6px;
    border-radius: 12px;
}

/* ── 인물 상세 모달 ──────────────────────────────────────────────────────
   <dialog> 는 showModal() 없이는 열리지 않는다. JS 가 없을 때는 :target 으로 연다.
   두 경로의 외형을 같게 만들려고 ::backdrop 을 투명으로 두고 어둠은 내부 스크림이 담당한다
   (::backdrop 은 showModal() 로 연 경우에만 칠해지므로, 그대로 쓰면 두 경로가 달라 보인다). */

.gf-pmodal {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
.gf-pmodal::backdrop { background: transparent; }

/* JS 없는 경로 — UA 의 dialog:not([open]){display:none} 보다 뒤에 오므로 이긴다 */
.gf-pmodal:target { display: block; }

.gf-pmodal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 28, 22, .5);
}

.gf-pmodal__panel {
    position: relative;
    width: min(560px, 92%);
    max-height: min(86vh, 760px);
    overflow: auto;
    margin: clamp(24px, 8vh, 80px) auto;
    padding: clamp(28px, 4vw, 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
    text-align: center;
}

.gf-pmodal__close {
    position: absolute;
    right: 12px;
    top: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: #b0b0b0;
}
.gf-pmodal__close:hover { color: var(--gf-green-dark); }

.gf-pmodal__figure {
    position: relative;
    width: 132px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    background: #e6e6e6;
}
.gf-pmodal__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.gf-pmodal__title { margin: 0; font-weight: 900; font-size: clamp(20px, 2.4vw, 26px); color: var(--gf-heading); }
.gf-pmodal__role { margin: 6px 0 0; font-weight: 700; color: var(--gf-green); }
.gf-pmodal__body {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: left;
    font-size: 15px;
    line-height: 1.85;
    color: #444;
}
.gf-pmodal__body p { margin: 0 0 14px; }
.gf-pmodal__body p:last-child { margin-bottom: 0; }
.gf-pmodal__body img { max-width: 100%; height: auto; border-radius: 8px; }

/* 로고에 링크가 걸린 경우 */
a.gf-award:hover .gf-award__caption { color: var(--gf-green-dark); }

/* ── 정책 문서 모달 ──────────────────────────────────────────────────────
   인물 모달과 골격(:target·::backdrop·스크림)을 그대로 쓰고 본문 서식만 다르다.
   새 블록을 만들면 그 골격을 통째로 복제해야 하고 한쪽만 고치는 사고가 난다. */

.gf-pmodal--doc .gf-pmodal__panel {
    width: min(760px, 92%);
    text-align: left;            /* 인물 모달은 가운데 정렬이다 — 문서에는 맞지 않는다 */
}
.gf-pmodal--doc .gf-pmodal__title {
    font-size: clamp(19px, 2.2vw, 24px);
    padding-right: 44px;         /* 우상단 닫기 버튼과 글자가 겹치지 않게 */
}
.gf-pmodal__meta {
    margin: 6px 0 0;
    font-size: 13px;
    color: #8a8a8a;
}
.gf-pmodal--doc .gf-pmodal__body { font-size: 14.5px; }
.gf-pmodal__foot {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
}

/* 본문 끝의 닫기 버튼. <button> 이 아니라 앵커다(JS 없이도 닫히게) — 모양만 버튼으로 만든다 */
.gf-pmodal__closebtn {
    display: inline-block;
    min-width: 132px;
    padding: 11px 26px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    font-size: 15px;
    color: #555;
}
.gf-pmodal__closebtn:hover,
.gf-pmodal__closebtn:focus-visible {
    border-color: var(--gf-green);
    background: #f4faf6;
    color: var(--gf-green-dark);
}

/* ── 정책 문서 본문 서식 ─────────────────────────────────────────────────
   모달과 독립 페이지가 **같은 서식**을 쓴다 — 두 경로에서 문서가 달라 보이면 안 된다.
   표 테두리는 여기서 그린다: ContentSanitizer 가 border·cellpadding 속성을 지운다. */

.gf-policydoc { line-height: 1.85; color: #444; }
.gf-policydoc h2 {
    margin: 30px 0 12px;
    font-weight: 700;
    font-size: 17px;
    color: var(--gf-heading);
}
.gf-policydoc h2:first-child { margin-top: 0; }
.gf-policydoc h3 { margin: 22px 0 10px; font-weight: 700; font-size: 15px; color: var(--gf-heading); }
.gf-policydoc p { margin: 0 0 14px; }
.gf-policydoc ul,
.gf-policydoc ol { margin: 0 0 14px; padding-left: 22px; }
.gf-policydoc ul { list-style: disc; }
.gf-policydoc ol { list-style: decimal; }
.gf-policydoc li { margin: 0 0 8px; }
.gf-policydoc li > ul,
.gf-policydoc li > ol { margin: 8px 0 0; }
.gf-policydoc strong { color: #222; }

/* 표는 좁은 화면에서 넘친다 — 본문이 아니라 표만 가로로 스크롤되게 감싼다.
   시드 본문이 <div class="gf-policydoc__scroll"> 로 표를 감싸 둔다. */
.gf-policydoc__scroll {
    overflow-x: auto;
    margin: 0 0 16px;
    -webkit-overflow-scrolling: touch;
}
.gf-policydoc table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: 1.7;
}
.gf-policydoc th,
.gf-policydoc td {
    border: 1px solid #e6e6e6;
    padding: 9px 11px;
    text-align: left;
    vertical-align: top;
}
.gf-policydoc thead th { background: #f6f7f3; font-weight: 700; color: #333; white-space: nowrap; }
.gf-policydoc tbody th { background: #fafaf7; font-weight: 700; color: #333; white-space: nowrap; }

/* ── FAQ 아코디언 ────────────────────────────────────────────────────────
   접기·펴기는 <details>/<summary> 가 한다 — **JS 0줄**이고 스크립트가 없어도 동작한다.
   관리자의 .gf-details(admin.css)를 옮겨 쓰지 않았다: 그쪽은 "위험한 폼을 접어 둔다" 용도로
   14px 회색 상자이고, admin.css 는 공개 레이아웃에 실리지도 않는다.
   ⚠️ <details> 는 :target 으로 열리지 않는다(open 속성이 필요하다). 앵커는 스크롤까지만 기대한다. */

.gf-faqsec { margin-bottom: clamp(36px, 5vw, 56px); }
.gf-faqsec:last-of-type { margin-bottom: 0; }
.gf-faqsec__title {
    margin: 0 0 14px;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 21px);
    color: var(--gf-green);
}

.gf-faqlist { border-top: 1px solid #e8e8e8; }

.gf-faq { border-bottom: 1px solid #e8e8e8; }

.gf-faq__q {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding: 18px 44px 18px 0;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(15px, 1.7vw, 17px);
    line-height: 1.6;
    color: var(--gf-heading);

    /* 브라우저 기본 삼각형을 지운다 — ＋/－ 를 직접 그린다 */
    list-style: none;

    /* ＋ 의 **세로** 막대. 별도 요소를 두지 않으려고 배경으로 그린다.
       열리면 background-size 를 0 으로 만들어 － 가 된다. */
    background-image: linear-gradient(#aaa, #aaa);
    background-repeat: no-repeat;
    background-size: 2px 14px;
    background-position: right 14px center;
}
.gf-faq__q::-webkit-details-marker { display: none; }
.gf-faq__q::marker { content: ""; }

/* 질문 앞의 Q 표식 */
.gf-faq__q::before {
    content: "Q";
    flex: 0 0 auto;
    font-weight: 900;
    color: var(--gf-green);
}

/* ＋ 의 **가로** 막대 — 열려도 그대로 남아 － 가 된다 */
.gf-faq__q::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 14px;
    height: 2px;
    margin-top: -1px;
    background: #aaa;
}

.gf-faq__q:hover,
.gf-faq__q:focus-visible { color: var(--gf-green-dark); }
.gf-faq__q:focus-visible { outline: 2px solid var(--gf-green); outline-offset: 2px; }

.gf-faq[open] > .gf-faq__q { color: var(--gf-green); background-size: 0 0; }

.gf-faq__a {
    padding: 0 0 22px 26px;   /* 왼쪽은 Q 표식 폭만큼 들여쓴다 */
    font-size: 15px;
}

/* ── 채용 공고 ───────────────────────────────────────────────────────── */

.gf-recruit__sec { margin-bottom: clamp(40px, 5vw, 60px); }
.gf-recruit__sec:last-of-type { margin-bottom: 0; }
.gf-recruit__title {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: clamp(19px, 2.1vw, 23px);
    color: var(--gf-green);
}
.gf-recruit__note { margin: -6px 0 16px; font-size: 14px; color: #888; }

.gf-joblist { margin: 0; padding: 0; list-style: none; }
.gf-joblist--closed { opacity: .72; }

.gf-job { margin-bottom: 14px; }
.gf-job:last-child { margin-bottom: 0; }

.gf-job__box {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background: #fff;
}
.gf-job__q {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
}
.gf-job__q::-webkit-details-marker { display: none; }
.gf-job__q::marker { content: ""; }
.gf-job__q:hover .gf-job__title,
.gf-job__q:focus-visible .gf-job__title { color: var(--gf-green-dark); }
.gf-job__q:focus-visible { outline: 2px solid var(--gf-green); outline-offset: 2px; border-radius: 10px; }

.gf-job__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: clamp(16px, 1.8vw, 18px);
    color: var(--gf-heading);
}
.gf-job__box[open] > .gf-job__q { border-bottom: 1px solid #f0f0f0; }
.gf-job__inner { padding: 18px; }

.gf-job__meta {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 8px 14px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f8f9f6;
    font-size: 14.5px;
}
.gf-job__meta dt { font-weight: 700; color: #666; }
.gf-job__meta dd { margin: 0; color: #333; }

.gf-job__foot { margin: 18px 0 0; }
.gf-job__apply {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 8px;
    background: var(--gf-green);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.gf-job__apply:hover,
.gf-job__apply:focus-visible { background: var(--gf-green-dark); color: #fff; }

/* 상태 뱃지 — Models/Recruit.cs 의 BadgeClass 와 짝이다.
   admin.css 의 .gf-tag 는 공개 레이아웃에 실리지 않으므로 여기에 따로 둔다. */
.gf-badge {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
}
.gf-badge--open { background: #e7f6ee; color: var(--gf-green-dark); }
.gf-badge--always { background: #fdf1e0; color: #a9761d; }
.gf-badge--soon { background: #eef1f6; color: #5d6b80; }
.gf-badge--closed { background: #f1f1f1; color: #888; }

/* 기본 문서 스타일 — 아직 시안이 없는 페이지(Policy/Error/스텁)가 깨져 보이지 않도록 */
.gf-doc { padding: clamp(40px, 6vw, 72px) 0; }
.gf-doc h1 { font-weight: 900; font-size: clamp(26px, 3.4vw, 38px); color: var(--gf-heading); margin: 0 0 20px; }
.gf-doc h2 { font-weight: 700; font-size: 20px; color: var(--gf-heading); margin: 32px 0 12px; }
.gf-doc h3 { font-weight: 700; font-size: 17px; color: var(--gf-heading); margin: 24px 0 10px; }
.gf-doc p { margin: 0 0 16px; line-height: 1.9; }
.gf-doc code { background: #f4f4f0; padding: 2px 6px; border-radius: 4px; font-size: .92em; }

/* 약관·정책 페이지 — 본문 폭을 글 영역에 맞춘다(시안의 본문 글 영역과 같은 값) */
.gf-doc .gf-policydoc { max-width: 980px; }
.gf-doc__meta { margin: -8px 0 18px; font-size: 14px; color: #8a8a8a; }
.gf-doc__lead { margin: 0 0 28px; font-size: 16px; color: #555; }

.gf-doc__nav { margin-top: 48px; padding-top: 28px; border-top: 1px solid #ececec; }
.gf-doc__nav h2 { margin: 0 0 12px; font-size: 17px; }
.gf-doc__list { margin: 0; padding: 0; list-style: none; }
.gf-doc__list li { margin: 0 0 12px; }
.gf-doc__list a { font-weight: 700; color: var(--gf-heading); }
.gf-doc__list a:hover,
.gf-doc__list a:focus-visible { color: var(--gf-green-dark); text-decoration: underline; }
.gf-doc__listdesc { display: block; margin-top: 4px; font-size: 14px; color: #777; }

/* ── 10 breakpoints ──────────────────────────────────────────────────────── */

/* 뉴스 그리드: 1 → 2 → 4열. 시안은 JS로 계산했지만 미디어쿼리가 정답이다
   (서버 렌더 결과가 항상 맞고, JS 없이도 동작하며, 첫 페인트가 틀리지 않는다) */
@media (min-width: 520px) {
    .gf-news__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
    .gf-news__grid { grid-template-columns: repeat(4, 1fr); }
}

/* 헤더: 760px 이상은 데스크톱 메뉴, 미만은 햄버거 */
@media (min-width: 760px) {
    .gf-header__nav { display: flex; }
    .gf-header__tools { display: flex; }
    .gf-burger { display: none; }
    .gf-mmenu { display: none !important; }
    .gf-mega.is-open { display: block; }
}

/* 애니메이션 최소화 설정 존중.
   히어로는 **자동 넘김을 멈추지 않는다**(그러면 배너가 첫 장에 붙박여 보인다).
   대신 아래 규칙이 페이드를 없애 슬라이드가 '움직이지 않고 즉시' 바뀐다 — 모션 부담은 여기서 던다. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}