@charset "utf-8";
/* ============================================================
   site.css — 덕화장학회 공개 사이트(머리·바닥·홈). 클래스는 h-.
   ★ 색 바꾸기: 아래 :root 의 --c-main(주색) · --c-accent(강조색) 두 값만 바꾸면
     연한 바탕·테두리·바닥 색까지 color-mix 로 따라 바뀐다.
   4px 격자 · 테두리 1px · 글자 크기는 rem(사용자 글자 크기 조절)
   ============================================================ */

:root {
  --c-main: #2d4c9c;     /* 주색 — 로고 남색을 밝게 */
  --c-accent: #4f9d3a;   /* 강조색 — 로고 녹색(버튼 · 포인트) */

  /* 아래는 위 두 색에서 자동으로 만든다 — 손대지 않아도 된다 */
  --c-main-dk: color-mix(in oklab, var(--c-main) 82%, #000);
  --c-tint: color-mix(in oklab, var(--c-main) 5%, #fff);       /* 연한 바탕 */
  --c-soft: color-mix(in oklab, var(--c-main) 11%, #fff);      /* 연한 칸 */
  --c-line: color-mix(in oklab, var(--c-main) 13%, #e8eaec);   /* 테두리 */
  --c-accent-dk: color-mix(in oklab, var(--c-accent) 85%, #000);
  --c-accent-ink: color-mix(in oklab, var(--c-accent) 78%, #000);  /* 흰 바탕 위 강조 글자(대비 AA) */
  --c-accent-soft: color-mix(in oklab, var(--c-accent) 12%, #fff);
  --c-foot: color-mix(in oklab, var(--c-main) 72%, #000);

  --c-gray: #f5f7fa;
  --c-ink: #1a2133;
  --c-sub: #586274;
  --c-mute: #8a93a5;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow: 0 1px 2px rgba(28, 36, 32, .04), 0 8px 24px -12px rgba(28, 36, 32, .14);
  --gutter: 24px;
  /* 아이콘 색 — 목록 순서대로 파랑 · 초록 · 주황 · 하늘(밝은 원색 바탕 + 흰 아이콘) */
  --t1: #2f80ff;
  --t2: #22b356;
  --t3: #ff8a1c;
  --t4: #12b8c4;
  /* 콘텐츠 글자 크기 — 본문 · 보조 · 카드 제목 세 가지만 쓴다 */
  --fs-body: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-card: 1.1875rem;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --font-title: 'Clipartkorea', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
}

@font-face { font-family: 'Clipartkorea'; src: url('../fonts/clipartkorea/Clipartkorea-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ===== 기본 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--c-ink); background: #fff; word-break: keep-all; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--c-main); text-decoration: none; }
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h-skip { position: absolute; left: -9999px; top: 0; z-index: 400; padding: 12px 20px; background: var(--c-ink); color: #fff; font-weight: 600; }
.h-skip:focus { left: 0; }
.h-wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 var(--gutter); }

/* ===== 버튼 · 칩 · 배지 ===== */
.h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-md); font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.h-btn i { font-size: 1.125rem; }
.h-btn--primary { background: var(--c-main); color: #fff; }
.h-btn--primary:hover { background: var(--c-main-dk); color: #fff; }
.h-btn--accent { background: var(--c-accent); color: #fff; }
.h-btn--accent:hover { background: var(--c-accent-dk); color: #fff; }
.h-btn--line { background: #fff; border-color: var(--c-line); color: var(--c-ink); }
.h-btn--line:hover { border-color: var(--c-main); color: var(--c-main); }
.h-btn--lg { height: 56px; padding: 0 28px; font-size: 1.0625rem; }

.h-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; font-size: 1rem; font-weight: 700; color: var(--c-main); white-space: nowrap; }
.h-chip i { color: var(--c-accent); font-size: 1.125rem; }

.h-bd { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; flex-shrink: 0; border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap; background: var(--c-soft); color: var(--c-main); }
.h-bd--accent { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.h-bd--gray { background: var(--c-gray); color: var(--c-sub); }

/* ===== 머리 ===== */
.h-head { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--c-line); }
.h-head-in { display: flex; align-items: center; gap: 32px; height: 88px; }
.h-logo { display: flex; flex-shrink: 0; }
.h-adm { align-self: stretch; flex-shrink: 0; width: 32px; margin-left: -32px; }   /* 로고 오른쪽 빈칸(간격 자리) — 더블클릭하면 관리자 화면(site.js) */
.h-lg { display: block; width: auto; height: 52px; }
.h-foot-name .h-lg { height: 44px; }
.h-nav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex: 1 1 auto; min-width: 0; }
.h-nav-main { display: flex; gap: 4px; }
.h-nav-main a { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 16px; border-radius: var(--r-sm); font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.h-nav-main a:hover { background: var(--c-tint); color: var(--c-main); }
.h-nav-main a > i { font-size: .875rem; color: var(--c-mute); transition: transform .15s ease; }
.h-has-sub { position: relative; }
.h-sub { position: absolute; left: 50%; top: 100%; z-index: 10; min-width: 184px; padding: 8px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.h-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.h-has-sub:hover > .h-sub, .h-has-sub:focus-within > .h-sub { opacity: 1; visibility: visible; transform: translate(-50%, 4px); }
.h-has-sub:hover > a > i, .h-has-sub:focus-within > a > i { transform: rotate(180deg); color: var(--c-main); }
.h-sub a { height: 44px; padding: 0 16px; font-size: 1rem; }
.h-menu-btn { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; color: var(--c-ink); font-size: 1.5rem; cursor: pointer; }

/* ===== 첫 화면 ===== */
.h-hero { position: relative; overflow: hidden; background: var(--c-tint); border-radius: 0 0 64px 64px; }
.h-hero::before { content: ''; position: absolute; top: -280px; right: -160px; width: 880px; height: 880px; border-radius: 50%; background: var(--c-soft); }
.h-hero-ground { position: absolute; left: 50%; bottom: -96px; width: 100%; min-width: 1440px; height: auto; transform: translateX(-50%); pointer-events: none; transition: opacity .8s ease; -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 72%); mask-image: linear-gradient(to bottom, transparent 55%, #000 72%); }   /* 위쪽은 흐리게 — 글과 겹치지 않게 */
.h-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 560px; grid-template-areas: "txt art"; align-items: end; column-gap: 40px; padding-top: 64px; padding-bottom: 128px; }
.h-hero-txt { grid-area: txt; align-self: start; padding-bottom: 40px; }   /* 제목은 위에 붙인다(글이 줄어도 내려가지 않게) */
.h-hero-txt h1 { margin-top: 24px; font-family: var(--font-title); font-size: 2.75rem; font-weight: 700; line-height: 3.625rem; letter-spacing: -.02em; }
.h-hero-txt h1 em { font-style: normal; color: var(--c-main); }
.h-hero-txt p { max-width: 30em; margin-top: 20px; font-size: 1.125rem; line-height: 1.7; color: var(--c-sub); }
.h-hero-arts { grid-area: art; display: grid; align-items: end; }   /* 두 비주얼을 겹쳐 두고 번갈아 보인다(site.js) */
.h-hero-art { grid-area: 1 / 1; display: block; width: 100%; height: auto; transition: opacity .8s ease; }
.h-hero-art:not(.is-on), .h-hero-ground:not(.is-on) { opacity: 0; }

/* ===== 섹션 ===== */
.h-sec { padding: 92px 0; }
.h-sec--tint { background: var(--c-tint); }
.h-sec--gray { background: var(--c-gray); }
.h-sec--green { border-bottom: 1px solid color-mix(in oklab, var(--c-accent) 30%, #fff); background: color-mix(in oklab, var(--c-accent) 8%, #fff); }   /* 메인 사업 카드 — 아래 공지 · 자료실(파란 바탕)과 구분 */
.h-eyebrow { display: block; margin-bottom: 12px; font-size: 1rem; font-weight: 700; color: var(--c-accent-ink); text-align: center; letter-spacing: .04em; }
.h-title { font-family: var(--font-title); font-size: 2.75rem; font-weight: 700; line-height: 3.5rem; letter-spacing: -.02em; text-align: center; }
.h-title em { font-style: normal; color: var(--c-main); }
.h-title + * { margin-top: 56px; }
.h-title + .h-lead { margin-top: 20px; }
.h-lead { max-width: 40em; margin-inline: auto; font-size: 1.125rem; color: var(--c-sub); text-align: center; }
.h-lead + * { margin-top: 48px; }



/* 숫자로 보는 30년 */
.h-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.h-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px 32px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; text-align: center; }
.h-stat dt { font-size: var(--fs-sm); font-weight: 700; color: var(--c-sub); }
.h-stat dd { display: flex; align-items: baseline; gap: 4px; color: var(--c-main); }
.h-stat dd b { font-family: var(--font-title); font-size: 3.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.h-stat dd span { font-size: 1.25rem; font-weight: 800; }
.h-stat p { font-size: var(--fs-sm); color: var(--c-mute); }
.h-stats-note { margin-top: 20px; font-size: .9375rem; color: var(--c-mute); text-align: right; }

/* 사업안내 */
.h-biz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.h-biz-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow); color: var(--c-ink); transition: border-color .15s ease, transform .15s ease; }
.h-biz-card:hover { border-color: var(--c-main); color: var(--c-ink); transform: translateY(-3px); }
.h-biz-pic { display: flex; align-items: center; justify-content: center; height: 200px; overflow: hidden; background: var(--c-tint); border-bottom: 1px solid var(--c-line); }
.h-biz-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }   /* 그림 둘레 흰 여백을 잘라 카드를 채운다 */
.h-biz-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px; }
.h-biz-no { font-size: .9375rem; font-weight: 800; color: var(--c-accent-ink); }
.h-biz-card h3 { font-size: var(--fs-card); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }
.h-biz-card p { font-size: var(--fs-body); line-height: 1.65; color: var(--c-sub); text-align: justify; word-break: break-all; }   /* 양쪽 정렬 · 글자 단위 줄바꿈 */
.h-biz-go { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--c-main); }
.h-biz-go i { transition: transform .15s ease; }
.h-biz-card:hover .h-biz-go i { transform: translateX(4px); }

/* 공지 · 자료실 */
.h-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.h-panel { min-width: 0; padding: 32px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow); }
.h-panel-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--c-line); }
.h-panel-head img { flex-shrink: 0; width: 56px; height: 56px; object-fit: contain; }
.h-panel-head h2 { flex: 1 1 auto; font-size: var(--fs-card); font-weight: 800; letter-spacing: -.02em; }
.h-more { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: var(--r-sm); font-size: 1rem; font-weight: 600; color: var(--c-sub); }
.h-more:hover { background: var(--c-tint); color: var(--c-main); }
.h-posts li + li { border-top: 1px solid var(--c-gray); }
.h-posts a { display: flex; align-items: center; gap: 12px; height: 60px; color: var(--c-ink); }
.h-posts a:hover .h-post-t { color: var(--c-main); }
.h-post-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); font-weight: 600; }
.h-post-d { flex-shrink: 0; font-size: var(--fs-sm); color: var(--c-mute); font-variant-numeric: tabular-nums; }
.h-post-f { flex-shrink: 0; color: var(--c-accent-ink); font-size: 1.125rem; }
.h-panel-empty { padding: 48px 0 24px; text-align: center; color: var(--c-mute); }

/* 장학회 소식 */
.h-news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.h-ncard { display: flex; flex-direction: column; overflow: hidden; height: 100%; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; color: var(--c-ink); transition: border-color .15s ease; }
.h-ncard:hover { border-color: var(--c-main); color: var(--c-ink); }
.h-ncard-ph { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-gray); }
.h-ncard-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.h-ncard:is(:hover, :focus-visible) .h-ncard-ph img { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .h-ncard-ph img { transition: none; } }
.h-ncard-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.h-ncard-meta { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--c-mute); font-variant-numeric: tabular-nums; }
.h-ncard h3 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-card); font-weight: 700; line-height: 1.5; }
.h-sec-foot { margin-top: 40px; text-align: center; }


/* ===== 바닥 ===== */
.h-foot { background: var(--c-foot); color: rgba(255, 255, 255, .72); }
.h-foot .h-wrap { padding-top: 48px; padding-bottom: 40px; }
.h-foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.h-foot-name { display: flex; }
.h-foot-links { display: flex; flex-wrap: wrap; align-items: center; }
.h-foot-links li + li::before { content: "|"; margin: 0 16px; color: rgba(255, 255, 255, .24); }
.h-foot-links a { font-size: 1rem; color: rgba(255, 255, 255, .72); }
.h-foot-links a:hover { color: #fff; }
.h-foot-links a.is-strong { font-weight: 800; color: #fff; }
.h-foot-info { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-size: .9375rem; }
.h-foot-info div { display: flex; gap: 8px; }
.h-foot-info dt { color: rgba(255, 255, 255, .5); }
.h-foot-info dd { font-weight: 600; color: rgba(255, 255, 255, .9); }
.h-foot-info a { color: inherit; }
.h-foot-copy { margin-top: 16px; font-size: .9375rem; color: rgba(255, 255, 255, .5); }

/* ===== 반응형 ===== */
@media (max-width: 1279.98px) {
  .h-head-in { position: relative; gap: 12px; }
  .h-adm { width: 12px; margin-left: -12px; }
  .h-menu-btn { display: inline-flex; margin-left: auto; }
  .h-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 88px); overflow-y: auto; padding: 8px var(--gutter) 16px; background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: 0 16px 32px -16px rgba(28, 36, 32, .2); }
  .h-nav.is-open { display: flex; }
  .h-nav-main { flex-direction: column; gap: 0; }
  .h-nav-main a { height: 56px; padding: 0 8px; border-radius: 0; border-bottom: 1px solid var(--c-gray); }
  .h-nav-main a > i { display: none; }
  .h-sub { position: static; min-width: 0; padding: 0 0 0 16px; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .h-sub::before { display: none; }
  .h-sub a { height: 48px; font-weight: 500; color: var(--c-sub); }
  .h-biz, .h-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .h-hero-txt h1 { font-size: 2.375rem; line-height: 3.125rem; }
  .h-title { font-size: 2.25rem; line-height: 2.875rem; }
  .h-hero-in { grid-template-columns: 1fr; grid-template-areas: "txt" "art"; padding-top: 56px; }
  .h-hero-txt { padding-bottom: 0; text-align: center; }
  .h-hero-txt p { margin-inline: auto; }
  .h-hero-arts { width: 100%; max-width: 520px; margin: 24px auto 0; }
  .h-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-two { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767.98px) {
  :root { --gutter: 16px; --fs-body: 1rem; --fs-sm: .875rem; --fs-card: 1.125rem; }
  .h-head-in { height: 68px; }
  .h-nav { max-height: calc(100dvh - 68px); }
  .h-lg { height: 40px; }
  .h-hero { border-radius: 0 0 32px 32px; }
  .h-hero::before { top: -200px; right: -240px; width: 560px; height: 560px; }
  .h-hero-in { padding-top: 40px; padding-bottom: 40px; }
  .h-hero-txt h1 { margin-top: 20px; font-size: 1.75rem; line-height: 2.375rem; }
  .h-hero-txt p { font-size: 1rem; }
  .h-chip { height: 36px; padding: 0 16px; font-size: .9375rem; }
  .h-sec { padding: 48px 0; }
  .h-title { font-size: 1.5rem; line-height: 2rem; }
  .h-title + * { margin-top: 32px; }
  .h-lead { font-size: 1rem; }
  .h-lead + * { margin-top: 32px; }
  .h-stats { gap: 12px; }
  .h-stat { padding: 24px 8px; }
  .h-stat dd b { font-size: 2.25rem; }
  .h-stat dd span { font-size: 1rem; }
  .h-biz { grid-template-columns: 1fr; gap: 16px; }
  .h-biz-card { flex-direction: row; }
  .h-biz-pic { flex-shrink: 0; width: 120px; height: auto; border-bottom: 0; border-right: 1px solid var(--c-line); }
  .h-biz-body { padding: 16px; gap: 6px; }
  .h-biz-go { display: none; }
  .h-news { gap: 12px; }
  .h-ncard-body { padding: 12px; }
  .h-ncard-meta .h-bd { display: none; }
  .h-panel { padding: 24px 16px; }
  .h-panel-head img { width: 48px; height: 48px; }
  .h-post-d { display: none; }
  .h-foot-top { flex-direction: column; align-items: flex-start; }
  .h-foot-links { gap: 8px 20px; }
  .h-foot-links li + li::before { display: none; }   /* 줄이 넘어가면 앞에 구분선이 남는다 — 간격으로만 나눈다 */
  .h-foot-info { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}


/* ===== 바로가기 막대 — 옛 사이트 모양 그대로(첫 화면 아래에 겹쳐 놓는다) ===== */
.h-qbar { position: relative; z-index: 2; margin-top: -64px; }
.h-qbar ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: var(--r-lg); background: #fff; box-shadow: 0 16px 40px rgba(28, 36, 32, .1); }
.h-qbar li + li { border-left: 1px solid var(--c-line); }
.h-qbar a { display: flex; align-items: center; gap: 16px; height: 100%; padding: 28px; color: var(--c-ink); transition: background-color .18s ease; }
.h-qbar a:hover { background: var(--c-soft); color: var(--c-ink); }
.h-qbar-ico { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--c-soft); color: var(--c-main); font-size: 1.375rem; transition: background-color .18s ease, color .18s ease; }
.h-qbar a:hover .h-qbar-ico { background: var(--c-main); color: #fff; }
.h-qbar-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h-qbar-txt b { font-size: 1.125rem; font-weight: 800; }
.h-qbar-txt span { font-size: .875rem; color: var(--c-mute); }

/* ===== 후원 — 녹색 띠 · 그림 원 · 통장 카드 ===== */
.h-give { position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto 92px; border-radius: 40px; background: var(--c-main); color: #fff; }
.h-give::before { content: ''; position: absolute; right: -180px; top: -220px; width: 560px; height: 560px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.h-give::after { content: ''; position: absolute; left: 30%; bottom: -260px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .04); }
.h-give-in { position: relative; z-index: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr) 380px; align-items: center; gap: 48px; padding: 64px 56px; }
.h-give-art { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 12px rgba(255, 255, 255, .06); }
.h-give-art::after { content: ''; position: absolute; inset: 0; border: 2px solid #9a8a7c; border-radius: 50%; pointer-events: none; }   /* 원 테두리는 고정 */
.h-give-art img { width: 100%; height: auto; transform: scale(1.03); }   /* 그림 자체 테두리는 원 밖으로 밀어 숨긴다 */
@keyframes h-pulse { 0%, 100% { transform: scale(1.03); } 50% { transform: scale(1.12); } }
.h-give:hover .h-give-art img { animation: h-pulse 8s ease-in-out infinite; }   /* 카드에 마우스 — 원은 그대로, 안의 그림만 아주 느리게 커졌다 작아졌다 */
@media (prefers-reduced-motion: reduce) { .h-give:hover .h-give-art img { animation: none; } }
.h-give-eyebrow { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .9375rem; font-weight: 700; color: #fff; }
.h-give-txt h2 { margin-top: 16px; font-family: var(--font-title); font-size: 1.75rem; font-weight: 700; line-height: 2.5rem; letter-spacing: -.02em; white-space: nowrap; }
.h-give-txt h2 em { font-style: normal; color: color-mix(in oklab, var(--c-accent) 55%, #fff); }
.h-give-txt p { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.h-give-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .4); font-weight: 700; color: #fff; }
.h-give-more:hover { color: #fff; border-color: #fff; }
.h-give-more i { transition: transform .15s ease; }
.h-give-more:hover i { transform: translateX(4px); }
.h-acct { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 28px 28px 36px; border-radius: 24px; background: #fff; color: var(--c-ink); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .35); }
.h-acct-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--c-line); }
.h-acct-bank { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--c-main); }
.h-acct-bank i { font-size: 1.25rem; }
.h-acct-own { font-size: .9375rem; color: var(--c-sub); }
.h-acct-no { font-family: var(--font-title); white-space: nowrap; font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.h-acct .h-btn { width: 100%; }
.h-copied { position: absolute; left: 0; right: 0; bottom: 10px; font-size: .8125rem; font-weight: 600; color: var(--c-main); text-align: center; }   /* 복사 안내 — 칸을 차지하지 않게 카드 아래 여백에 띄운다 */

/* ===== 선발 안내 팝업 — 하루 · 일주일 동안 열지 않기(site.js) ===== */
/* 형식은 고성 반값여행 공지 팝업(gsnpop--notice)과 같다 — 물결 머리띠 · 둥근 아이콘 · 가운데 본문 · 아래 열지 않기 + 주 버튼 */
.h-pop { width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 56px); padding: 0; overflow: hidden auto; border: 0; border-radius: 20px; background: #fff; color: var(--c-ink); box-shadow: 0 24px 60px rgba(14, 28, 64, .34), 0 4px 12px rgba(14, 28, 64, .12); }
.h-pop[open] { animation: h-pop-in .34s cubic-bezier(.2, .9, .3, 1); }
.h-pop::backdrop { background: rgba(10, 20, 44, .6); backdrop-filter: blur(3px); }
.h-pop[open]::backdrop { animation: h-pop-fade .28s ease; }
@keyframes h-pop-in { from { opacity: 0; transform: translateY(4%) scale(.96); } }
@keyframes h-pop-fade { from { opacity: 0; } }
.h-pop-head { position: relative; padding: 28px 30px 36px; background: linear-gradient(135deg, var(--c-main-dk) 0%, var(--c-main) 55%, color-mix(in oklab, var(--c-main) 55%, #5fb4e6) 100%); color: #fff; }
.h-pop-head::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 26px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.h-pop-badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .875rem; font-weight: 800; letter-spacing: .06em; }
.h-pop-htit { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .9375rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.h-pop-state { padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .8125rem; font-weight: 700; color: #fff; }
.h-pop-x { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: .875rem; cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
.h-pop-x:hover { background: rgba(255, 255, 255, .32); transform: rotate(90deg); }
.h-pop-icon { position: absolute; left: 50%; bottom: -36px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; transform: translateX(-50%); border: 1px solid color-mix(in oklab, var(--c-main) 20%, #fff); border-radius: 50%; background: var(--c-soft); box-shadow: 0 6px 18px color-mix(in oklab, var(--c-main) 22%, transparent); color: var(--c-main); font-size: 2rem; }
.h-pop-body { padding: 56px 36px 28px; text-align: center; }
.h-pop h2 { margin: 15px 0 14px; font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; line-height: 1.35; letter-spacing: -.03em; color: var(--c-ink); }
.h-pop-list { margin: 16px 0 0; padding: 14px 16px; list-style: none; border: 1px solid color-mix(in oklab, var(--c-main) 20%, #fff); border-radius: 12px; background: var(--c-tint); text-align: left; }
.h-pop-list li { display: flex; align-items: baseline; gap: 10px; font-size: .9375rem; line-height: 1.7; color: var(--c-sub); }
.h-pop-list li + li { margin-top: 4px; }
.h-pop-list span { flex: 0 0 72px; font-weight: 700; color: var(--c-main); }
.h-pop-list b { font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.h-pop-go { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-top: 14px; padding: 0 14px; border: 1px solid color-mix(in oklab, var(--c-main) 30%, #fff); border-radius: 9px; background: #fff; font-size: .875rem; font-weight: 700; color: var(--c-main); transition: background-color .16s ease, border-color .16s ease; }
.h-pop-go:hover { border-color: color-mix(in oklab, var(--c-main) 55%, #fff); background: var(--c-soft); color: var(--c-main); }
.h-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 14px 22px; border-top: 1px solid var(--c-line); background: var(--c-gray); }
.h-pop-skip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.h-pop-skip button { height: 34px; padding: 0 13px; border: 1px solid var(--c-line); border-radius: 9px; background: #fff; font-size: .875rem; font-weight: 600; color: var(--c-sub); cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.h-pop-skip button:hover { border-color: color-mix(in oklab, var(--c-main) 40%, #fff); background: var(--c-soft); color: var(--c-main); }
.h-pop-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 28px; border-radius: 12px; background: var(--c-main); font-size: 1.0625rem; font-weight: 700; color: #fff; white-space: nowrap; transition: background-color .18s ease, transform .18s ease; }
.h-pop-btn:hover { background: var(--c-main-dk); color: #fff; transform: translateY(-1px); }

@media (max-width: 1279.98px) {
  .h-give { margin-inline: var(--gutter); }
  .h-give-in { grid-template-columns: 220px minmax(0, 1fr); padding: 56px 48px; }
  .h-acct { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .h-acct-top { flex: 1 1 100%; }
  .h-acct-no { flex: 1 1 auto; }
  .h-acct .h-btn { width: auto; }
}
@media (max-width: 1023.98px) {
  .h-qbar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-qbar li:nth-child(3) { border-left: 0; }
  .h-qbar li:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .h-give-in { grid-template-columns: 1fr; gap: 32px; padding: 56px 32px; text-align: center; }
  .h-give-art { width: 240px; margin: 0 auto; }
  .h-acct { text-align: left; }
}
@media (max-width: 767.98px) {
  .h-hero-in { padding-bottom: 104px; }
  .h-qbar { margin-top: -56px; }
  .h-qbar a { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 16px; }
  .h-qbar-ico { width: 44px; height: 44px; border-radius: 12px; font-size: 1.25rem; }
  .h-qbar-txt b { font-size: 1.0625rem; }
  .h-give { margin-bottom: 48px; border-radius: 24px; }
  .h-give-in { padding: 40px 20px; }
  .h-give-art { width: 180px; }
  .h-give-txt h2 { font-size: 1.375rem; line-height: 2rem; }
  .h-give-txt p { font-size: 1rem; }
  .h-acct { flex-direction: column; align-items: stretch; padding: 24px 20px; }
  .h-acct-no { font-size: 1.5rem; text-align: center; }
  .h-acct .h-btn { width: 100%; }
  .h-pop { width: calc(100vw - 24px); max-height: calc(100dvh - 40px); border-radius: 16px; }
  .h-pop-head { padding: 22px 22px 30px; }
  .h-pop-icon { width: 64px; height: 64px; bottom: -32px; font-size: 1.75rem; }
  .h-pop-body { padding: 48px 20px 24px; }
  .h-pop h2 { font-size: 1.375rem; }
  .h-pop-list span { flex-basis: 64px; }
  .h-pop-foot { flex-direction: column; align-items: stretch; padding: 12px 14px; gap: 10px; }
  .h-pop-skip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .h-pop-skip button { padding: 0 8px; font-size: .8125rem; }
  .h-pop-btn { justify-content: center; height: 44px; font-size: 1rem; }
}

/* ===== 하위 화면 머리 — 배너(제목 · 그림) + 탭 바(같은 묶음 화면 · 현재 위치) ===== */
.h-nav-main a.is-on { color: var(--c-main); font-weight: 700; }
.h-banner { position: relative; overflow: hidden; background: var(--c-tint); }
.h-banner::before { content: ''; position: absolute; top: -240px; right: -120px; width: 680px; height: 680px; border-radius: 50%; background: var(--c-soft); }
.h-banner-in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; height: 320px; padding-bottom: 48px; }
.h-banner-title { font-family: var(--font-title); font-size: 3rem; font-weight: 700; line-height: 3.75rem; letter-spacing: -.02em; }
.h-banner-art { align-self: flex-end; width: auto; max-width: 45%; height: 248px; object-fit: contain; object-position: right bottom; }
.h-tabbar { position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; min-height: 88px; margin: -48px 0 64px; padding-right: 32px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow); }
.h-tabs { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.h-tabs::-webkit-scrollbar { display: none; }
.h-tabs li { display: flex; }
.h-tabs li + li { border-left: 1px solid var(--c-line); }
.h-tabs li:last-child { border-right: 1px solid var(--c-line); }
.h-tabs a { display: flex; align-items: center; padding: 0 36px; font-size: 1.0625rem; font-weight: 600; color: var(--c-sub); white-space: nowrap; }
.h-tabs a:hover { color: var(--c-main); }
.h-tabs a[aria-current="page"] { background: var(--c-main); color: #fff; font-weight: 800; }
.h-crumb { display: flex; align-self: center; align-items: center; gap: 8px; flex-shrink: 0; font-size: .9375rem; color: var(--c-sub); white-space: nowrap; }
.h-crumb li + li::before { content: '\203A'; margin-right: 8px; color: var(--c-mute); }
.h-crumb a { display: grid; place-items: center; width: 32px; height: 32px; color: var(--c-sub); font-size: 1.0625rem; }
.h-crumb a:hover { color: var(--c-main); }
.h-crumb [aria-current] { font-weight: 700; color: var(--c-ink); }
@media (max-width: 1023.98px) {
  .h-banner-in { height: 280px; }
  .h-banner-art { height: 200px; }
  .h-crumb { display: none; }
  .h-tabbar { padding-right: 0; margin-bottom: 48px; }
}
@media (max-width: 767.98px) {
  .h-banner-in { justify-content: flex-start; height: 200px; padding-bottom: 48px; }
  .h-banner-title { font-size: 1.875rem; line-height: 2.375rem; }
  .h-banner-art { position: absolute; right: var(--gutter); bottom: 48px; max-width: 50%; height: 120px; }
  .h-tabbar { min-height: 0; margin: -48px 0 32px; }
  .h-tabs a { height: 56px; padding: 0 20px; font-size: 1rem; }
}

/* ===== 아이콘 색 — 목록 칸마다 밝은 원색 바탕을 돌려 쓰고 아이콘은 흰색(바로가기 · 목적사업 · 사업 주요 내용 · 오시는 길 · 내려받기) ===== */
:is(.h-qbar ul, .ab-biz, .bz-points, .ab-loc, .ab-dl) > li:nth-child(4n+1) { --t: var(--t1); }
:is(.h-qbar ul, .ab-biz, .bz-points, .ab-loc, .ab-dl) > li:nth-child(4n+2) { --t: var(--t2); }
:is(.h-qbar ul, .ab-biz, .bz-points, .ab-loc, .ab-dl) > li:nth-child(4n+3) { --t: var(--t3); }
:is(.h-qbar ul, .ab-biz, .bz-points, .ab-loc, .ab-dl) > li:nth-child(4n+4) { --t: var(--t4); }
.h-qbar-ico, .ab-biz-ico, .bz-ico, .ab-loc-ico, .ab-dl-ext { background: var(--t) !important; color: #fff !important; }

/* ===== GNB 전체 펼침 메뉴(PC) — 칸 너비는 내용(메뉴명 · 가장 긴 하위 메뉴)에 맞춘다. 올리면 헤더 아랫선 밑으로 판이 펼쳐지고 칸마다 세로선 · 올린 칸 위 4px 막대 ===== */
@media (min-width: 1280px) {
  .h-head::after { content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 0; overflow: hidden; background: #fff; box-shadow: 0 16px 32px -20px rgba(26, 33, 51, .25); opacity: 0; visibility: hidden; transition: height .2s ease, opacity .2s ease, visibility .2s; }   /* +1px: 헤더 아랫선을 덮지 않는다 */
  .h-head:has(.h-nav-main:hover, .h-nav-main:focus-within)::after { height: 290px; border-bottom: 1px solid var(--c-line); opacity: 1; visibility: visible; }
  .h-nav { position: relative; z-index: 1; align-self: stretch; }
  .h-nav-main { display: flex; align-self: stretch; gap: 0; }
  .h-nav-main > li { display: flex; flex-direction: column; }
  .h-nav-main > li > a { flex: 0 0 88px; justify-content: flex-start; height: 88px; padding: 0 28px; border-radius: 0; font-size: 1.125rem; font-weight: 700; }
  .h-nav-main > li > a:hover { background: none; }
  .h-nav-main > li > a > i { display: none; }
  .h-has-sub:hover > a, .h-has-sub:focus-within > a { color: var(--c-main); }
  /* 하위 메뉴는 흐름 안에 두어(높이 0) 칸 너비를 정하고, 세로선 · 막대는 ::after 로 판 높이만큼 그린다 */
  .h-sub { position: relative; top: auto; left: auto; right: auto; height: 0; min-width: 0; padding: 25px 28px 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; transform: none; transition: opacity .2s ease, visibility .2s; }
  .h-sub::before { display: none; }
  .h-sub { z-index: 1; }
  .h-sub::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 1px; height: 290px; border-left: 1px solid var(--c-line); border-top: 4px solid transparent; }   /* 칸 전체(빈 곳 포함)가 마우스를 받아 메뉴가 닫히지 않는다 · 글자 뒤에 깔려 링크는 그대로 눌린다 */
  .h-has-sub:hover > .h-sub::after, .h-has-sub:focus-within > .h-sub::after { border-top-color: var(--c-main); }
  .h-nav-main:hover .h-sub, .h-nav-main:focus-within .h-sub, .h-has-sub:hover > .h-sub { opacity: 1; visibility: visible; transform: none; }
  .h-sub a { justify-content: flex-start; height: 48px; padding: 0; border-radius: 0; font-size: 1rem; font-weight: 600; color: var(--c-sub); white-space: nowrap; }
  .h-sub a::before { content: '-'; margin-right: 6px; }
  .h-sub a:hover { background: none; color: var(--c-main); }
}

/* ===== 비주얼 애니메이션 — 메인 · 서브 공통(움직임 줄이기 설정이면 멈춤) =====
   글: 왼쪽에서 들어옴 · 인물: 왼쪽에서 날아온 뒤 위아래로 · 큰 원: 숨 쉬듯 · 하늘: 옅은 구름이 흐름 */
@keyframes h-rise { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes h-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes h-fly { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes h-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes h-drift { from { background-position: -40% 30%, 120% 65%; } to { background-position: 140% 30%, -60% 65%; } }
.h-hero-txt > * { animation: h-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.h-hero-txt > :nth-child(2) { animation-delay: .15s; }
.h-hero-txt > :nth-child(3) { animation-delay: .3s; }
.h-banner-title { animation: h-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.h-hero-arts { animation: h-fly 1.1s cubic-bezier(.2, .7, .2, 1) .2s both, h-bob 3.2s ease-in-out 1.3s infinite; }
.h-banner-art { animation: h-fly 1.1s cubic-bezier(.2, .7, .2, 1) .2s both, h-bob 3.2s ease-in-out 1.3s infinite; }
.h-hero::before, .h-banner::before { animation: h-breathe 8s ease-in-out infinite; transform-origin: center; }
.h-hero::after, .h-banner::after { content: ''; position: absolute; inset: 0 0 45% 0; z-index: 0; pointer-events: none; background:
    radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)) no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)) no-repeat;
  background-size: 360px 90px, 260px 70px; animation: h-drift 40s linear infinite; }
.h-hero-in, .h-banner-in { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .h-hero-txt > *, .h-banner-title, .h-hero-arts, .h-banner-art, .h-hero::before, .h-banner::before, .h-hero::after, .h-banner::after { animation: none !important; }
}

/* 서브 타이틀 도형 — 왼쪽 위 고리(천천히 떠다님) · 제목 아래 점 무늬 · 제목 끝 작은 초록 점 */
.h-banner-in::before { content: ''; position: absolute; left: -28px; top: 36px; z-index: -1; width: 72px; height: 72px; border: 12px solid color-mix(in oklab, var(--c-accent) 28%, #fff); border-radius: 50%; animation: h-bob 6s ease-in-out infinite; }
.h-banner-in::after { content: ''; position: absolute; left: 0; bottom: 72px; z-index: -1; width: 152px; height: 40px; background: radial-gradient(circle, color-mix(in oklab, var(--c-main) 30%, #fff) 2.5px, transparent 3px) 0 0 / 16px 16px; animation: h-rise .9s ease-out .4s both; }
.h-banner-title::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border-radius: 50%; background: var(--c-accent); vertical-align: .9em; }
@media (max-width: 767.98px) {
  .h-banner-in::before { left: -16px; top: 20px; width: 48px; height: 48px; border-width: 8px; }
  .h-banner-in::after { bottom: 52px; width: 104px; height: 24px; background-size: 12px 12px; }
  .h-banner-title::after { width: 8px; height: 8px; margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .h-banner-in::before, .h-banner-in::after { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .h-pop[open], .h-pop[open]::backdrop { animation: none; }
  .h-pop-x, .h-pop-btn { transition: none; }
}