/* ===========================================================
   국제e스포츠진흥원(IESI) 경기북부 의정부 연합회
   공통 스타일 — 화이트 베이스 + 그린 포인트 (saka.kr / goldenkp.com 스타일)
   이전 다크 네이비+블루 버전은 style.css.dark-backup 참고
   =========================================================== */

:root {
  --bg:            #FFFFFF;   /* 메인 배경 */
  --bg-alt:        #F5F8FC;   /* 섹션 구분용 연한 배경 */
  --surface:       #FFFFFF;   /* 카드/프레임 배경 */
  --text:          #0B1220;   /* 본문 텍스트 */
  --text-muted:    #4A5568;   /* 보조 텍스트 */
  --text-faint:    #64748B;   /* 최저 강조 텍스트 (메타 정보, 타임스탬프 등) — 흰 배경 대비 AA 기준(4.5:1) 확보 */
  --accent-green:       #187F53;  /* 포인트 컬러 (그린) — 흰 배경 대비 확보 위해 #1B8A5A에서 살짝 진하게 조정 (약 5:1) */
  --accent-green-light: #2FBE81;  /* 블랙 배경(유틸바/푸터) 전용 밝은 그린 — 흰 배경 텍스트로는 사용 안 함(대비 부족) */
  --on-accent:     #FFFFFF;   /* 그린 배경 위 텍스트 색상 */
  --line:          rgba(24,127,83,0.15); /* 구분선 */
  --card-border:   #E2E8F0;   /* 카드 테두리 */
  --card-shadow:   0 4px 16px rgba(15,32,66,0.06); /* 카드 입체감 */

  /* 상단 유틸바 · 푸터 전용 (saka.kr 스타일 — 흰 바디를 위아래 블랙으로 샌드위치) */
  --dark-bg:       #060A12;   /* 유틸바/푸터 배경 (이전 다크테마 --ink 값) */
  --text-on-dark:  #EEF2F8;   /* 블랙 배경 위 본문 텍스트 */
  --line-on-dark:  rgba(47,190,129,0.22); /* 블랙 배경 위 구분선 (그린 라이트 기반) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16.5px;
  min-height: 100svh;
  line-height: 1.6;
}

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

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container { max-width: 1180px; margin: 0 auto; padding: 0 56px; }

/* ---------- 공사중 안내 배너 (좌→우 흐르는 마퀴) ---------- */
.construction-banner {
  overflow: hidden;
  white-space: nowrap;
  background: repeating-linear-gradient(45deg, #FFD400, #FFD400 22px, #111111 22px, #111111 44px);
  border-bottom: 2px solid #111111;
}
.construction-banner__track {
  display: inline-flex;
  width: max-content;
  animation: construction-scroll 16s linear infinite;
}
.construction-banner__group { display: inline-flex; }
.construction-banner__group span {
  display: inline-block;
  padding: 6px 28px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  -webkit-text-stroke: 1px #111111;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
@keyframes construction-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}
@media (prefers-reduced-motion: reduce) {
  .construction-banner__track { animation: none; }
}

/* ---------- top utility bar (블랙 고정 띠 — saka.kr AFFILIATION 바 참고) ---------- */
.top-utility-bar {
  background: var(--dark-bg);
  color: var(--text-on-dark);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 24px;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.top-utility-bar__pill {
  display: inline-flex; align-items: center;
  background: var(--accent-green); color: var(--on-accent);
  font-size: 10px; font-weight: 800; letter-spacing: 0.09em;
  padding: 3px 11px; border-radius: 999px; text-transform: uppercase;
}
.top-utility-bar a { color: var(--accent-green-light); text-decoration: none; }
.top-utility-bar a:hover { color: var(--text-on-dark); }
.top-utility-bar__text { color: var(--accent-green-light); }
.top-utility-bar__admin {
  margin-left: 16px; padding-left: 16px;
  border-left: 1px solid var(--line-on-dark);
  font-size: 10px; letter-spacing: 0.09em;
  color: var(--text-on-dark) !important; opacity: 0.4;
}
.top-utility-bar__admin:hover { opacity: 0.9; }

.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 16px; padding-left: 16px;
  border-left: 1px solid var(--line-on-dark);
}
.lang-switch__link {
  color: var(--text-on-dark); opacity: 0.6;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
}
.lang-switch__link:hover { opacity: 1; color: var(--text-on-dark); }
.lang-switch__link.is-active { color: var(--accent-green-light); opacity: 1; }
.lang-switch__sep { color: var(--text-on-dark); opacity: 0.25; font-size: 11px; }

/* ---------- shared header / nav (좌: 로고 / 중앙: nav / 우: 오시는길 CTA) ----------
   saka.kr 실제 구현 확인 결과 — 진짜 수학적 중앙정렬이 아니라 평범한 flex justify-between 3분할이었음.
   (로고 폭 ≒ 우측 버튼 폭이라 nav가 가운데처럼 보일 뿐) 동일하게 단순 flex로 맞춤 — 불필요한
   position:absolute/grid 트릭 제거로 hover 히트 영역 관련 리스크도 함께 없앰. */
header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.85); backdrop-filter: blur(10px);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 56px;
}
.header-right { display: flex; align-items: center; gap: 14px; }
.header-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 999px;
  background: var(--accent-green); color: var(--on-accent);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  box-shadow: 0 4px 14px rgba(24,127,83,0.25);
  transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.header-cta:hover { filter: brightness(0.94); transform: scale(1.03); box-shadow: 0 8px 22px rgba(24,127,83,0.35); }
.header-cta.is-current { filter: brightness(0.9); box-shadow: 0 0 0 2px rgba(24,127,83,0.32), 0 4px 14px rgba(24,127,83,0.25); }
@media (max-width: 860px) {
  /* 모바일에서는 상단바 CTA를 숨기고 햄버거 메뉴 안의 .mobile-drawer__cta로 대체 */
  .header-cta { display: none; }
}

/* 앵커 링크로 점프할 때 고정(sticky) 헤더에 섹션 제목이 가리지 않도록 여유 확보 */
#notices, #news-gallery, #greeting, #vision { scroll-margin-top: 100px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 32px; height: 32px; border: 1px solid var(--accent-green);
  display: flex; align-items: center; justify-content: center; transform: rotate(45deg);
  flex-shrink: 0;
}
.brand-mark span { transform: rotate(-45deg); color: var(--accent-green); font-size: 13px; font-weight: 700; }
.brand-logo { display: block; object-fit: contain; flex-shrink: 0; }
.brand-logo--iesi { height: 26px; width: auto; }
.brand-logo--kb { height: 36px; width: auto; }
.brand-text .kr { font-size: 14.5px; font-weight: 700; line-height: 1.3; }

@media (max-width: 860px) {
  .brand-logo--iesi { height: 22px; }
  .brand-logo--kb { height: 30px; }
}

/* ---------- 데스크톱 nav — saka.kr 실제 구조 그대로 이식 (순수 CSS :hover, JS 불필요) ---------- */
.top-nav-desktop { display: flex; align-items: center; gap: 26px; }
.top-nav-desktop .nav-link {
  display: flex; align-items: center; gap: 4px;
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500;
  letter-spacing: 0.02em; opacity: 0.78; position: relative; transition: opacity 0.25s;
}
.top-nav-desktop .nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 1px;
  background: var(--accent-green); transition: width 0.3s ease;
}
.top-nav-desktop .nav-link:hover { opacity: 1; }
.top-nav-desktop .nav-link:hover::after { width: 100%; }
.top-nav-desktop .nav-link.is-current { opacity: 1; color: var(--accent-green); }
.top-nav-desktop .nav-link.is-current::after { width: 100%; }

.nav-dropdown-group { position: relative; }
.nav-dropdown-group .chevron { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.25s ease; }
.nav-dropdown-group:hover .chevron { transform: rotate(180deg); }

.nav-dropdown-group .dropdown-menu {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translate(-50%, 8px);
  min-width: 190px; background: var(--surface); border: 1px solid var(--card-border);
  border-radius: 10px; box-shadow: var(--card-shadow);
  padding: 10px 0; z-index: 60;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dropdown-group:hover .dropdown-menu,
.dropdown-menu.force-open {
  opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) !important;
}
.dropdown-menu a {
  display: block; padding: 10px 22px; font-size: 13.5px; letter-spacing: 0.01em;
  color: var(--text); text-decoration: none; opacity: 0.75;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.dropdown-menu a:hover, .dropdown-menu a.is-current {
  opacity: 1; color: var(--accent-green); background: rgba(24,127,83,0.07);
}

@media (max-width: 860px) {
  .top-nav-desktop { display: none; }
}

/* ---------- 모바일 햄버거 버튼 (정적 마크업, saka.kr #mobile-menu-btn 참고) ---------- */
.mobile-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; box-sizing: border-box; background: none; border: none; cursor: pointer;
}
.mobile-toggle span { width: 24px; height: 1px; background: var(--accent-green); transition: all 0.3s ease; }
.mobile-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) { .mobile-toggle { display: flex; } }

/* ---------- 모바일 드로어 (헤더와 별도 블록, saka.kr #mobile-drawer 구조 그대로) ---------- */
.mobile-drawer { display: none; }
@media (max-width: 860px) {
  .mobile-drawer.open {
    display: block; position: fixed; inset: 0; top: 85px; z-index: 90;
    background: var(--bg); overflow-y: auto; padding: 12px 24px 40px;
  }
  /* top 값은 js/main.js에서 헤더 실측 높이로 인라인 오버라이드됨 — 85px는 JS 미작동 시 대비용 */
}
.mobile-drawer__link {
  display: block; padding: 16px 4px; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-size: 16px; font-weight: 600;
}
.mobile-drawer__group { border-bottom: 1px solid var(--line); }
.mobile-drawer__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 16px; font-weight: 600; font-family: inherit;
}
.mobile-drawer__toggle .chevron { width: 16px; height: 16px; transition: transform 0.25s ease; }
.mobile-drawer__group.open .mobile-drawer__toggle .chevron { transform: rotate(180deg); }
.mobile-drawer__submenu {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  display: flex; flex-direction: column; padding-left: 12px;
}
.mobile-drawer__group.open .mobile-drawer__submenu { max-height: 260px; padding-bottom: 10px; }
.mobile-drawer__submenu a {
  padding: 10px 4px; color: var(--text-muted); text-decoration: none; font-size: 14.5px;
}
.mobile-drawer__submenu a.is-current { color: var(--accent-green); font-weight: 700; }
.mobile-drawer__toggle span.is-current { color: var(--accent-green); }
.mobile-drawer__link.is-current { color: var(--accent-green); font-weight: 700; }

/* 모바일 드로어 하단 "오시는길" — 데스크톱 헤더 CTA와 동일한 강조 톤으로 유지 */
.mobile-drawer__cta {
  display: block; margin-top: 20px; padding: 14px 20px; border-radius: 999px;
  background: var(--accent-green); color: var(--on-accent); border-bottom: none;
  text-align: center; font-weight: 700; font-size: 15px;
}
.mobile-drawer__cta:hover, .mobile-drawer__cta.is-current { color: var(--on-accent); filter: brightness(0.94); }
body.no-scroll { overflow: hidden; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; border: 1.5px solid transparent; border-radius: 10px;
  text-decoration: none; font-size: 12.5px; letter-spacing: 0.12em; font-weight: 700;
  text-transform: uppercase; cursor: pointer; font-family: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn:hover { transform: scale(1.03); }
.btn-filled {
  background: var(--accent-green); color: var(--on-accent); border-color: var(--accent-green);
  box-shadow: 0 6px 18px rgba(24,127,83,0.2);
}
.btn-filled:hover { filter: brightness(0.94); box-shadow: 0 12px 30px rgba(24,127,83,0.32); }
.btn-ghost {
  /* secondary 버튼 — 흰/밝은 배경 섹션 전용. 어두운 배경(히어로, .section-dark 등) 위에서는
     다크네이비 채움이 배경과 거의 구분되지 않으므로 .btn-secondary-on-dark를 대신 사용할 것. */
  background: var(--dark-bg); color: var(--text-on-dark); border-color: var(--dark-bg);
  box-shadow: 0 6px 18px rgba(6,10,18,0.18);
}
.btn-ghost:hover { background: #0E1B33; border-color: #0E1B33; box-shadow: 0 12px 30px rgba(6,10,18,0.3); }
.btn-secondary-on-dark {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.7);
  color: #FFFFFF;
  backdrop-filter: blur(6px);
  border-radius: 10px;
  transition: all 0.25s ease;
}
.btn-secondary-on-dark:hover {
  background: rgba(255,255,255,0.18);
  border-color: #FFFFFF;
  transform: scale(1.03);
}

/* ---------- hero (full-bleed 배경사진, index.html) ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 94svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 70px 24px 60px;
  color: var(--text-on-dark);
  background: var(--dark-bg); /* 슬라이드 전환 중에도 절대 흰색이 비치지 않도록 하는 안전망 */
}

/* ---------- 히어로 배경 슬라이더 (3장, opacity 크로스페이드 자동 순환 — SAKA_CLAUDE 방식 참고) ---------- */
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,10,18,0.52) 0%, rgba(6,10,18,0.62) 45%, rgba(6,10,18,0.88) 100%);
}
.hero-dots { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; display: flex; gap: 20px; }
.hero-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 999px; padding: 0; border: none; cursor: pointer;
  background: rgba(238,242,248,0.4); transition: all 0.3s ease;
}
/* 시각적 크기는 유지하되 탭 히트박스를 넓힘 — gap(20px)과 맞춰 인접 점끼리 겹치지 않는 선(±10px)까지만 확장 */
.hero-dot::before { content: ""; position: absolute; inset: -10px; }
.hero-dot.active { width: 26px; background: var(--text-on-dark); }
/* ---------- LED 도트매트릭스 티커 (Canvas 렌더링 — js/main.js) ---------- */
.led-ticker-wrap {
  position: relative; z-index: 2;
  width: 100%; max-width: 640px; margin: 0 auto 28px;
  padding: 10px 0;
  border-radius: 8px;
  background: rgba(6,10,18,0.45);
  border: 1px solid rgba(255,255,255,0.10);
  animation: rise 1s ease-out both;
}
.led-ticker-canvas { display: block; width: 100%; height: 60px; }
@media (max-width: 640px) {
  .led-ticker-canvas { height: 42px; }
}
h1.hero-title {
  position: relative; z-index: 2;
  font-family: 'Noto Sans KR', sans-serif; font-weight: 900; letter-spacing: -0.01em;
  font-size: clamp(38px, 6vw, 72px); line-height: 1.12; max-width: 22ch;
  animation: rise 1s ease-out both; animation-delay: 0.1s;
}
h1.hero-title em {
  font-style: normal; font-weight: 900;
  background: linear-gradient(120deg, var(--accent-green-light), var(--accent-green) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  position: relative; z-index: 2;
  margin-top: 24px; max-width: 50ch; font-size: 18px; line-height: 1.85;
  color: rgba(238,242,248,0.86); animation: rise 1s ease-out both; animation-delay: 0.18s;
}
.hero-actions {
  position: relative; z-index: 2;
  margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  animation: rise 1s ease-out both; animation-delay: 0.26s;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 히어로 우측 비주얼 클러스터 (동심원 배경 + 겹쳐진 글래스모피즘 카드, goldenkp.com 참고) ---------- */
.hero-visual-cluster {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  width: 420px; height: 300px; z-index: 2;
}

.hero-orbit-bg {
  position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,138,90,0.18) 0%, rgba(27,138,90,0.06) 40%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.hero-orbit-bg::before {
  content: ''; position: absolute; inset: 55px; border-radius: 50%;
  border: 1px solid rgba(111,168,255,0.15);
}
.hero-orbit-bg::after {
  content: ''; position: absolute; inset: 115px; border-radius: 50%;
  border: 1px solid rgba(47,190,129,0.14);
}

@media (max-width: 960px) {
  .hero-visual-cluster { display: none; }
}

/* ---------- page hero (sub pages) ---------- */
.page-hero {
  /* .page-hero도 실제로는 <header> 태그라 위쪽 header{} 규칙(position:sticky; z-index:100)을
     그대로 상속받는다 — 이게 nav 헤더와 z-index가 같아져서 DOM 순서상 나중인 page-hero가
     드롭다운 위를 덮어버리던 진짜 원인. 명시적으로 되돌려서 상속을 끊는다. */
  position: static; top: auto; z-index: auto; display: block;
  padding: 90px 56px 60px;
  background:
    radial-gradient(ellipse 800px 400px at 20% -10%, rgba(24,127,83,0.10), transparent 60%),
    var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-green);
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent-green); }
h1.page-title {
  /* 메인 히어로(h1.hero-title, 최대 72px)보다 확실히 한 단계 작은 서브페이지 제목 스케일.
     eyebrow 라벨과 조합해 임팩트를 유지하되, 히어로와 위계가 섞이지 않게 한다. */
  font-family: 'Noto Sans KR', sans-serif; font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(30px, 3.6vw, 42px); max-width: 20ch; line-height: 1.18;
}
.page-sub { margin-top: 20px; max-width: 60ch; color: var(--text-muted); line-height: 1.85; font-size: 16.5px; }

/* ---------- 서브페이지 다크 히어로 밴드 (saka.kr about.html 참고 — .section-dark 재사용,
   "연합회소개" 그룹 하위 페이지 전반에서 재사용 가능하도록 설계) ---------- */
.subpage-hero-dark { position: relative; overflow: hidden; padding: 88px 0 56px; }
.subpage-hero-dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.subpage-hero-dark .container { position: relative; z-index: 1; }
@media (max-width: 860px) { .subpage-hero-dark { padding: 60px 0 40px; } }

/* 다크 밴드 바로 아래, 밝은 배경 위에 배치하는 브레드크럼 바 */
.breadcrumb-bar { background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px 0; }
.breadcrumb-bar .breadcrumb { margin-bottom: 0; }

/* ---------- content shell / sections ---------- */
main { padding: 0 0 0; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- 다크 블록 섹션 (섹션 리듬용 — saka.kr "MAJOR PROJECTS" 블록 참고)
   주의: .section-dark는 color:var(--text-on-dark)를 자식에 상속시킨다. 이 안에 흰 배경 카드
   (.goal-card 등)를 배치할 경우, 카드 내부 텍스트 요소는 반드시 자체 color를 명시해야 한다
   (상속된 밝은 텍스트가 흰 카드 위에서 거의 안 보이는 문제 방지 — .goal-card__title 참고). */
.section-dark {
  background: #0E1B33; color: var(--text-on-dark);
  border-top: 1px solid var(--line-on-dark); border-bottom: 1px solid var(--line-on-dark);
}
.section-dark .section-label { color: var(--accent-green-light); }
.section-dark .section-title { color: var(--text-on-dark); }
.section-dark .section-header p, .section-dark .section-header--center p,
.section-dark .prose p, .section-dark .page-sub { color: rgba(238,242,248,0.72); }
.section-dark .eyebrow { color: var(--accent-green-light); }
.section-dark .eyebrow::before { background: var(--accent-green-light); }
.section-dark .goal-grid, .section-dark .stat-grid, .section-dark .stage-grid, .section-dark .insight-grid {
  background: var(--line-on-dark); border-color: var(--line-on-dark);
}
.section-header { max-width: 640px; margin-bottom: 52px; }
.section-header--center { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.section-label {
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-green);
  display: inline-block; margin-bottom: 14px; font-weight: 700;
}
.section-title { font-family: 'Noto Sans KR', sans-serif; font-weight: 900; letter-spacing: -0.01em; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; }
.section-header p, .section-header--center p { margin-top: 16px; font-size: 15.5px; color: var(--text-muted); line-height: 1.8; }

h2.block-title { font-size: clamp(22px, 2.4vw, 29px); font-weight: 900; margin: 48px 0 18px; line-height: 1.25; }
h3.block-subtitle { font-size: 17px; font-weight: 700; margin: 28px 0 12px; color: var(--accent-green); }
.prose p { font-size: 15.5px; line-height: 1.95; color: var(--text-muted); margin-bottom: 16px; }
.prose { max-width: 760px; }

/* ---------- stat grid ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); background: var(--line); gap: 1px;
  margin-top: 40px; border-radius: 6px; overflow: hidden; box-shadow: var(--card-shadow);
}
.stat-item {
  position: relative; overflow: hidden;
  background: var(--surface); padding: 44px 20px 34px; text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.stat-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--stat-accent, var(--accent-green));
}
.stat-item:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,32,66,0.12); z-index: 1; }
.stat-item--blue  { --stat-accent: #2C6BED; --stat-badge-bg: rgba(44,107,237,0.12); }
.stat-item--green { --stat-accent: #1B8A5A; --stat-badge-bg: rgba(27,138,90,0.12); }
.stat-item--gold  { --stat-accent: #D98F1F; --stat-badge-bg: rgba(242,169,59,0.15); }
.stat-item--red   { --stat-accent: #E5484D; --stat-badge-bg: rgba(229,72,77,0.12); }
.stat-item__badge {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--stat-badge-bg); color: var(--stat-accent);
  transition: transform 0.25s ease;
}
.stat-item__badge svg { width: 24px; height: 24px; }
.stat-item:hover .stat-item__badge { transform: scale(1.1) rotate(-4deg); }
.stat-num { font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; color: var(--accent-green); }
.stat-label { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .stat-item { padding: 34px 16px 26px; }
  .stat-item__badge { width: 42px; height: 42px; margin-bottom: 12px; }
  .stat-item__badge svg { width: 20px; height: 20px; }
}

/* ---------- goal / feature cards ---------- */
.goal-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border: 1px solid var(--line); background: var(--line); gap: 1px; margin-top: 40px;
  border-radius: 6px; overflow: hidden; box-shadow: var(--card-shadow);
}
.goal-card { background: var(--surface); padding: 40px 30px; transition: background 0.3s ease; color: var(--text); }
.goal-card:hover { background: var(--bg-alt); }
.goal-card__icon { font-size: 30px; margin-bottom: 18px; }
.goal-card__title { font-size: 18.5px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.goal-card__desc { font-size: 14.5px; line-height: 1.85; color: var(--text-muted); margin-bottom: 18px; }
.goal-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 5px 12px; border: 1px solid var(--line); color: var(--accent-green); letter-spacing: 0.02em; white-space: nowrap; }

/* ---------- 핵심 가치 카드 (greeting.html 비전 및 가치) ---------- */
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
.value-card {
  padding: 30px 28px; border: 1px solid var(--card-border); border-radius: 10px;
  background: var(--surface); box-shadow: var(--card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,32,66,0.12); }
.value-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; margin-bottom: 16px;
  background: rgba(24,127,83,0.1); color: var(--accent-green);
  font-weight: 800; font-size: 15.5px;
}
.value-card__title { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.value-card__desc { font-size: 14px; color: var(--text-muted); line-height: 1.8; }
@media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; } }

/* ---------- partner cards ---------- */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 40px; }
.partner-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--card-border); border-radius: 10px; padding: 48px 24px 44px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-decoration: none; color: var(--text); transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  background: var(--surface); box-shadow: 0 4px 16px rgba(15,32,66,0.08);
}
.partner-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-green-light));
}
.partner-card:hover { border-color: var(--accent-green); transform: translateY(-6px); box-shadow: 0 16px 36px rgba(15,32,66,0.16); }
.partner-card img { max-width: 130px; max-height: 72px; object-fit: contain; }
.partner-card__role { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-green); }
.partner-card__name { font-size: 15px; font-weight: 600; line-height: 1.5; }
.partner-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ---------- 협력기관 티저 (홈 미리보기 — goldenkp.com "OUR PARTNERS" 참고, 로고만 작게·궁금증 유발형) ---------- */
.partners-teaser {
  background: var(--dark-bg); color: var(--text-on-dark);
  border-top: 1px solid var(--line-on-dark); border-bottom: 1px solid var(--line-on-dark);
}
.partners-teaser .section-label { color: var(--accent-green-light); }
.partner-orbs { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; }
.partner-orb {
  width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; padding: 16px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-on-dark);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.partner-orb img { width: 100%; height: 100%; object-fit: contain; }
.partner-orb:hover { border-color: var(--accent-green-light); transform: translateY(-4px); box-shadow: 0 0 24px rgba(47,190,129,0.35); }
@media (max-width: 640px) {
  .partner-orb { width: 64px; height: 64px; padding: 12px; }
  .partner-orbs { gap: 18px; }
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 4px;
  font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent-green-light); text-decoration: none;
  transition: opacity 0.25s ease;
}
.link-arrow:hover { opacity: 0.78; }

/* ---------- data tables (시장동향 리포트) ---------- */
.table-scroll { overflow-x: auto; margin: 24px 0; border: 1px solid var(--card-border); border-radius: 6px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.data-table th, .data-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.data-table td:first-child, .data-table th:first-child { white-space: normal; }
.data-table th {
  color: var(--accent-green); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; background: rgba(24,127,83,0.06);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(24,127,83,0.04); }

/* ---------- report note / citation ---------- */
.report-note {
  border-left: 2px solid var(--accent-green); padding: 16px 24px; margin: 28px 0;
  background: rgba(24,127,83,0.05); font-size: 14.5px; line-height: 1.85; color: var(--text);
}
.source-list { margin-top: 12px; font-size: 12.5px; color: var(--text-faint); line-height: 1.9; }
.source-list li { list-style: none; }

/* ---------- stage / roadmap cards ---------- */
.stage-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); background: var(--line); gap: 1px; margin: 32px 0;
  border-radius: 6px; overflow: hidden; box-shadow: var(--card-shadow);
}
.stage-card { background: var(--surface); padding: 32px 26px; }
.stage-card__phase { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-green); margin-bottom: 8px; font-weight: 700; }
.stage-card__period { font-size: 19px; font-weight: 700; margin-bottom: 16px; }
.stage-card__task { font-size: 13.5px; line-height: 1.85; color: var(--text-muted); margin-bottom: 16px; }
.stage-card__goal { font-size: 12.5px; color: var(--accent-green); border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 760px) { .stage-grid { grid-template-columns: 1fr; } }

/* ---------- insight cards ---------- */
.insight-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 40px;
  border-radius: 6px; overflow: hidden; box-shadow: var(--card-shadow);
}
.insight-card { background: var(--surface); padding: 32px 26px; text-decoration: none; color: var(--text); transition: background 0.3s ease; display: block; }
.insight-card:hover { background: var(--bg-alt); }
.insight-card__num { font-size: 11px; letter-spacing: 0.1em; color: var(--accent-green); margin-bottom: 12px; }
.insight-card__title { font-size: 16px; font-weight: 700; line-height: 1.5; margin-bottom: 10px; }
.insight-card__desc { font-size: 13.5px; line-height: 1.75; color: var(--text-muted); margin-bottom: 18px; }
.insight-card__meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-faint); }
.insight-card__link { color: var(--accent-green); }

/* ---------- gallery thumbnail grid ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 24px; }
/* aspect-ratio 미지원 브라우저(카카오톡/네이버 인앱 등 구형 WebView) 대비 padding-top 폴백 —
   aspect-ratio를 지원하면 그 값이 우선 적용되고, 미지원 시에도 ::before가 높이를 보장한다 */
.gallery-grid .img-frame { position: relative; aspect-ratio: 1/1; }
.gallery-grid .img-frame::before { content: ''; display: block; padding-top: 100%; }
.gallery-grid .img-frame img { position: absolute; inset: 0; }

/* ---------- notice list ---------- */
.notice-list { border-top: 1px solid var(--line); margin-top: 32px; }
.notice-item {
  display: block; padding: 24px 4px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--text); transition: background 0.2s ease;
}
.notice-item:hover { background: var(--bg-alt); }
.notice-item__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); margin-bottom: 10px; }
.notice-item__tag { font-size: 10.5px; padding: 4px 10px; border: 1px solid var(--line); color: var(--accent-green); white-space: nowrap; }
.notice-item__source { color: var(--accent-green); font-weight: 700; }
.notice-item__date { color: var(--text-faint); }
.notice-item__title { display: flex; align-items: center; gap: 6px; font-size: 16.5px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; }
.notice-item__title .ext-icon { font-size: 13px; color: var(--accent-green); flex-shrink: 0; }
.notice-item__desc { font-size: 14px; color: var(--text-muted); line-height: 1.75; }
.notice-empty { padding: 56px 4px; text-align: center; color: var(--text-faint); font-size: 14.5px; }

/* ---------- 유튜브 채널 배지 ---------- */
.youtube-badge {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 20px 0 8px; padding: 14px 26px; border-radius: 999px;
  background: #FF0000; color: #FFFFFF; text-decoration: none;
  font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(255,0,0,0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.youtube-badge:hover { filter: brightness(1.08); transform: scale(1.03); box-shadow: 0 12px 30px rgba(255,0,0,0.4); }
.youtube-badge__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.9);
}
.youtube-badge__icon svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .youtube-badge { padding: 12px 20px; font-size: 13.5px; }
}

/* ---------- 공지사항 카드 (협회 자체 발표 — 외부 뉴스 링크형 .notice-item과 구분) ---------- */
.notice-card {
  padding: 32px 28px; border: 1px solid var(--card-border); border-radius: 10px;
  background: var(--surface); box-shadow: var(--card-shadow);
}
.notice-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.notice-card__badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em; padding: 4px 12px; border-radius: 999px;
  background: rgba(24,127,83,0.1); color: var(--accent-green);
}
.notice-card__date { font-size: 12.5px; color: var(--text-faint); }
.notice-card__title { font-size: 19px; font-weight: 800; line-height: 1.4; margin-bottom: 16px; }
.notice-card__body p { font-size: 14.5px; line-height: 1.85; color: var(--text); margin-bottom: 14px; }
.notice-card__body p:last-child { margin-bottom: 0; }
.notice-card__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.notice-card__images img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; border: 1px solid var(--card-border); }
@media (max-width: 640px) {
  .notice-card { padding: 24px 20px; }
  .notice-card__images { grid-template-columns: 1fr; }
  .notice-card__images img { height: 200px; }
}

/* ---------- 뉴스 기사형 카드 (히어로 이미지 상단 + 본문 하단) ---------- */
.news-feature {
  display: block; border: 1px solid var(--card-border); border-radius: 10px;
  background: var(--surface); box-shadow: var(--card-shadow); overflow: hidden;
  margin-top: 32px;
}
.news-feature__hero { width: 100%; aspect-ratio: 16/7; overflow: hidden; background: var(--bg-alt); }
.news-feature__hero img { width: 100%; height: 100%; object-fit: cover; }
.news-feature__body { padding: 32px 28px; }
.news-feature__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.news-feature__date { font-size: 12.5px; color: var(--text-faint); }
.news-feature__title { font-size: 20px; font-weight: 800; line-height: 1.4; margin-bottom: 16px; }
.news-feature__text p { font-size: 14.5px; line-height: 1.85; color: var(--text); margin-bottom: 14px; }
.news-feature__text p:last-child { margin-bottom: 0; }
.news-feature__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; }
.news-feature__images img { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; border: 1px solid var(--card-border); }
@media (max-width: 640px) {
  .news-feature__hero { aspect-ratio: 4/3; }
  .news-feature__body { padding: 24px 20px; }
  .news-feature__images { grid-template-columns: 1fr; }
  .news-feature__images img { height: 200px; }
}

/* ---------- 국제 e스포츠 진흥원 사진 갤러리 (세로 이미지 좌측 + 가로 이미지 3개 우측) ---------- */
.iesi-gallery { display: flex; gap: 16px; margin-top: 20px; align-items: stretch; }
.iesi-gallery-featured, .iesi-gallery-item {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--card-border);
  background: var(--surface); box-shadow: var(--card-shadow);
}
.iesi-gallery-featured { flex: 1; display: flex; flex-direction: column; }
.iesi-gallery-featured .iesi-gallery-item__img { flex: 1; min-height: 0; }
.iesi-gallery-col { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.iesi-gallery-item__img { aspect-ratio: 16/9; overflow: hidden; }
.iesi-gallery-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.iesi-gallery-featured:hover .iesi-gallery-item__img img,
.iesi-gallery-item:hover .iesi-gallery-item__img img { transform: scale(1.05); }
.iesi-gallery-item__caption {
  padding: 12px 14px; font-size: 13.5px; font-weight: 700; line-height: 1.5;
  background: var(--surface); transition: background 0.2s ease;
}
.iesi-gallery-featured:hover .iesi-gallery-item__caption,
.iesi-gallery-item:hover .iesi-gallery-item__caption { background: var(--bg-alt); }
@media (max-width: 640px) {
  .iesi-gallery { flex-direction: column; }
  .iesi-gallery-featured .iesi-gallery-item__img { flex: none; aspect-ratio: 4/3; }
  .iesi-gallery-col { gap: 16px; }
}

/* ---------- image frame (플레이스홀더/실제 이미지 겸용) ---------- */
.img-frame {
  border: 1px solid var(--card-border); background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-frame.placeholder { font-size: 11px; letter-spacing: 0.12em; color: var(--text-faint); text-transform: uppercase; text-align: center; padding: 20px; }

/* ---------- 리포트 배너 (vision.html 인포그래픽 대체 — 타이틀 카드) ---------- */
.report-banner {
  background: var(--dark-bg); color: var(--text-on-dark);
  border-radius: 10px; padding: 28px 32px; margin-bottom: 32px; box-shadow: var(--card-shadow);
}
.report-banner__title { font-size: clamp(18px, 2vw, 22px); font-weight: 800; }
.report-banner__subtitle { font-size: 14px; color: var(--accent-green-light); margin-top: 6px; font-weight: 600; }

/* stat-grid를 3카드로 쓸 때(vision.html) */
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .stat-grid--3 { grid-template-columns: 1fr; } }

/* ---------- 시장 성장 추이 막대그래프 ---------- */
.trend-chart { margin-top: 40px; }
.trend-chart__bars {
  display: flex; align-items: flex-end; gap: 20px; height: 220px;
  padding: 0 8px; border-bottom: 1px solid var(--line);
}
.trend-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.trend-bar__value { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; white-space: nowrap; }
.trend-bar__fill {
  width: 100%; max-width: 72px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--accent-green-light), var(--accent-green));
}
.trend-bar--estimate .trend-bar__fill {
  background: rgba(24,127,83,0.12); border: 1.5px dashed var(--accent-green);
}
.trend-bar__year { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.trend-chart__note { margin-top: 14px; font-size: 12px; color: var(--text-faint); }
@media (max-width: 640px) {
  .trend-chart__bars { gap: 10px; height: 180px; }
  .trend-bar__value { font-size: 11px; }
  .trend-bar__fill { max-width: 48px; }
}

/* ---------- 경기북부 현황 상태 카드 ---------- */
.status-card {
  margin-top: 24px; padding: 26px; border-radius: 10px;
  background: rgba(24,127,83,0.045); border: 1px solid var(--line);
}
.status-list { display: flex; flex-direction: column; gap: 12px; }
.status-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 8px;
}
.status-item__badge {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.status-item__badge--gap { background: rgba(229,72,77,0.12); }
.status-item__badge--done { background: rgba(27,138,90,0.12); }
.status-item__badge--progress { background: rgba(44,107,237,0.12); }
.status-item__label { font-weight: 700; font-size: 14.5px; }
.status-item__detail { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ---------- CTA band (다크 네이비 풀블리드 + 그라디언트 블롭 + 도트 텍스처 — 히어로 톤과 통일감) ---------- */
.cta-section {
  position: relative; overflow: hidden;
  padding: 110px 0; text-align: center;
  background: var(--dark-bg); color: var(--text-on-dark);
  border-top: 1px solid var(--line-on-dark); border-bottom: 1px solid var(--line-on-dark);
}
.cta-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 480px 320px at 12% 15%, rgba(27,138,90,0.24), transparent 60%),
    radial-gradient(ellipse 420px 300px at 88% 85%, rgba(111,168,255,0.14), transparent 60%);
}
.cta-section::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; letter-spacing: -0.01em; margin-bottom: 16px; }
.cta-section p { font-size: 15.5px; color: rgba(238,242,248,0.72); margin-bottom: 32px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- contact form ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; margin-top: 40px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group label { display: block; font-size: 13px; margin-bottom: 8px; color: var(--text-muted); }
.form-group input, .form-group textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--card-border); color: var(--text);
  padding: 14px 16px; font-family: inherit; font-size: 14.5px; border-radius: 4px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent-green); }
.form-group textarea { min-height: 150px; resize: vertical; }
.form-group select {
  width: 100%; background: var(--surface); border: 1px solid var(--card-border); color: var(--text);
  padding: 14px 16px; font-family: inherit; font-size: 14.5px; border-radius: 4px; cursor: pointer;
}
.form-group .required { color: var(--accent-green); margin-left: 2px; }
.form-checkbox {
  display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-muted); line-height: 1.6;
}
.form-checkbox input { margin-top: 3px; accent-color: var(--accent-green); flex-shrink: 0; }
.form-note { font-size: 12.5px; color: var(--text-faint); margin-top: -4px; }
.form-status {
  display: none; font-size: 13.5px; line-height: 1.7; color: var(--accent-green);
  padding: 14px 18px; border: 1px solid var(--line); background: rgba(24,127,83,0.06); border-radius: 4px;
}
.form-status.is-visible { display: block; }
.form-status.is-error {
  color: #B91C1C; border-color: rgba(185,28,28,0.25); background: rgba(185,28,28,0.06);
}
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.contact-info-list { display: flex; flex-direction: column; gap: 20px; }
.contact-info-item { padding: 26px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--surface); box-shadow: var(--card-shadow); }
.contact-info-item__label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-green); margin-bottom: 8px; font-weight: 700; }
.contact-info-item__value { font-size: 15px; color: var(--text-muted); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- 인사말 2단 레이아웃 (saka.kr 이사장 인사말 패턴 참고) ---------- */
.greeting-grid { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
.greeting-photo__frame {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}
.greeting-photo__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.greeting-photo__frame.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-faint); letter-spacing: 0.04em;
}
.greeting-body p { font-size: 15.5px; line-height: 1.95; color: var(--text); margin-bottom: 22px; }
.greeting-body p:first-child { font-size: 17.5px; font-weight: 700; }
.greeting-signature { font-weight: 800; color: var(--accent-green); margin-top: 4px; }
@media (max-width: 760px) {
  .greeting-grid { grid-template-columns: 1fr; gap: 32px; }
  .greeting-photo__frame { max-width: 220px; margin: 0 auto; }
}

/* 배경 제거(투명 PNG) 인물 사진용 — 원형 프레임 없이 실루엣을 따라가는 은은한 그림자만 적용 */
.greeting-photo__frame--cutout {
  width: 100%; aspect-ratio: auto; border-radius: 0; overflow: visible;
  background: none; border: none; box-shadow: none;
}
.greeting-photo__frame--cutout img {
  width: 100%; height: auto; object-fit: contain; object-position: center top;
  filter: drop-shadow(0 18px 26px rgba(15,32,66,0.16));
}
@media (max-width: 760px) {
  .greeting-photo__frame--cutout { max-width: 240px; margin: 0 auto; }
}

/* ---------- 브레드크럼 ---------- */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-faint); margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-faint); text-decoration: none; transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--accent-green); }
.breadcrumb .current { color: var(--text-muted); }

/* ---------- 정보 카드 3개 (전화/이메일/주소) ---------- */
.info-card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 40px; }
.info-card {
  padding: 32px 28px; border: 1px solid var(--card-border); border-radius: 10px;
  background: var(--surface); box-shadow: var(--card-shadow); text-align: center;
}
.info-card__icon { font-size: 28px; margin-bottom: 14px; }
.info-card__title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.info-card__value { font-size: 16px; font-weight: 700; color: var(--accent-green); margin-bottom: 6px; }
.info-card__value.pending { color: var(--text-faint); font-weight: 500; }
.info-card__value a { color: inherit; text-decoration: none; }
.info-card__value a:hover { text-decoration: underline; }
.info-card__note { font-size: 12.5px; color: var(--text-muted); }

/* ---------- 찾아오시는 길: 지도 프레임 ---------- */
.map-frame {
  width: 100%; height: 360px; border: 1px solid var(--card-border); border-radius: 10px;
  overflow: hidden; box-shadow: var(--card-shadow); margin-top: 32px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-note {
  margin-top: 14px; font-size: 12.5px; color: var(--text-faint); line-height: 1.7;
  padding: 12px 16px; border-left: 2px solid var(--accent-green); background: rgba(24,127,83,0.05);
}
.location-list { margin-top: 24px; border-top: 1px solid var(--line); }
.location-row { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.location-row dt { color: var(--text-muted); }
.location-row dd { color: var(--text); }
.location-row dd.pending { color: var(--text-faint); }
@media (max-width: 640px) { .location-row { grid-template-columns: 1fr; gap: 4px; } .map-frame { height: 260px; } }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 32px; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--card-shadow); }
.faq-item { background: var(--surface); padding: 26px 28px; }
.faq-item__q { display: flex; gap: 10px; font-size: 15.5px; font-weight: 700; margin-bottom: 10px; }
.faq-item__q::before { content: "Q"; color: var(--accent-green); flex-shrink: 0; }
.faq-item__a { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-muted); line-height: 1.8; }
.faq-item__a::before { content: "A"; color: var(--text-faint); flex-shrink: 0; }

/* ---------- org info table (about.html) ---------- */
.org-table { border-top: 1px solid var(--line); margin-top: 32px; }
.org-row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 18px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.org-row dt { color: var(--text-muted); }
.org-row dd { color: var(--text); }
.org-row dd.pending { color: var(--text-faint); font-style: normal; }
@media (max-width: 640px) { .org-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- 사이트맵 ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-top: 8px; }
.sitemap-group h3 {
  font-size: 14px; font-weight: 800; color: var(--accent-green);
  margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.sitemap-group ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.sitemap-group a { display: block; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14.5px; transition: color 0.2s ease; }
.sitemap-group a:hover { color: var(--accent-green); }
.sitemap-group a .desc { display: block; font-size: 12.5px; color: var(--text-faint); font-weight: 400; margin-top: 3px; }

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: 0.08s; }
.reveal-delay-2.is-visible { transition-delay: 0.16s; }
.reveal-delay-3.is-visible { transition-delay: 0.24s; }
.reveal-delay-4.is-visible { transition-delay: 0.32s; }
.reveal-delay-5.is-visible { transition-delay: 0.40s; }
.reveal-delay-6.is-visible { transition-delay: 0.48s; }

/* ---------- shared footer (블랙 고정 — 상단 유틸바와 동일 톤, 흰 바디를 아래에서 감싸는 구조)
   GoldenKP(goldenkp.com) 푸터 레이아웃 참고 — 브랜드+링크 컬럼이 한 줄, 구분선 아래
   이용약관/개인정보처리방침 + 사업자정보 안내, 맨 아래 카피라이트/문의 좌우 배치 */
footer.site-footer {
  position: relative;
  border-top: 1px solid var(--line-on-dark);
  background: var(--dark-bg);
  color: var(--text-on-dark);
  padding: 80px 56px 0;
}
footer.site-footer::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-green-light), var(--accent-green));
}
.footer-top {
  max-width: 1180px; margin: 0 auto; display: flex; gap: 80px; flex-wrap: wrap;
  padding-bottom: 48px; border-bottom: 1px solid var(--line-on-dark);
}
.footer-brand-col { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-logo-mark { height: 40px; width: auto; flex-shrink: 0; object-fit: contain; }
.footer-desc { max-width: 42ch; font-size: 14px; line-height: 1.8; color: rgba(238,242,248,0.55); }
.footer-contact-mini { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.footer-contact-mini span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(238,242,248,0.5); }
.footer-contact-mini a { color: inherit; text-decoration: none; }
.footer-contact-mini a:hover { text-decoration: underline; }
.footer-col { flex: 0 0 auto; min-width: 140px; }
.footer-col h4 { position: relative; display: inline-block; font-size: 13px; letter-spacing: 0.02em; color: var(--text-on-dark); margin-bottom: 22px; padding-bottom: 10px; font-weight: 700; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--accent-green-light); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: rgba(238,242,248,0.55); text-decoration: none; font-size: 14px; transition: color 0.25s; }
.footer-col a:hover { color: var(--accent-green-light); }
.footer-legal { max-width: 1180px; margin: 0 auto; padding: 32px 0 0; display: flex; flex-direction: column; gap: 10px; }
.footer-legal-links { display: flex; gap: 20px; flex-wrap: wrap; row-gap: 8px; }
.footer-legal-links a { color: var(--text-on-dark); font-weight: 700; font-size: 13px; text-decoration: none; }
.footer-legal-links a:hover { color: var(--accent-green-light); }
.footer-org-note { font-size: 12px; color: rgba(238,242,248,0.4); }
.footer-bottom {
  max-width: 1180px; margin: 0 auto; margin-top: 28px; padding: 28px 0 36px;
  border-top: 1px solid var(--line-on-dark);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: rgba(238,242,248,0.4);
}

@media (max-width: 860px) {
  .top-utility-bar { padding: 8px 16px; font-size: 11px; }
  .header-inner { padding: 14px 20px; }
  .container { padding: 0 24px; }
  .page-hero { padding: 60px 24px 40px; }
  .section { padding: 64px 0; }
  footer.site-footer { padding: 56px 24px 0; }
  .footer-top { flex-direction: column; gap: 32px; padding-bottom: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}