@charset "utf-8";
/* ==========================================================================
   2026 더아동페스타 (The Children Festa) — 공용 스타일
   --------------------------------------------------------------------------
   구조 : common.css (토큰/리셋/헤더/푸터/공용 컴포넌트) + 페이지별 css
   기준 : PC 1920 시안 / 모바일 430 시안
   반응형: mobile ~767 / tablet 768~1279 / desktop 1280~
   ========================================================================== */

/* ==========================================================================
   1. FONTS
   --------------------------------------------------------------------------
   · Pretendard         : 본문 / 제목            (OFL, 로컬 번들·동적 서브셋)
   · NeoDunggeunmo Pro  : 픽셀 폰트 (섹션 타이틀·버튼·레트로 UI)
   · NanumBarunGothic   : GNB 메뉴               (OFL, GNB 문구만 서브셋)
   ※ 모두 assets/fonts/ 에 동봉되어 있어 외부 CDN 없이 동작합니다.
   ※ 라이선스 안내는 assets/fonts/FONTS.md 참고.
   ========================================================================== */
@import url("../fonts/pretendard.css");

@font-face {
  font-family: "NeoDunggeunmo";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("NeoDunggeunmo Pro"), local("Neo둥근모 Pro"),
       url("../fonts/NeoDunggeunmoPro-Regular.woff2") format("woff2"),
       url("../fonts/NeoDunggeunmoPro-Regular.woff") format("woff");
}

@font-face {
  font-family: "NanumBarunGothic";
  /* 시안 GNB 는 weight 600. 동봉된 파일은 Bold 한 종뿐이라 600~700 을 이 파일로 받는다.
     (정확히 맞추려면 NanumBarunGothicOTF 600 웨이트 파일이 필요 — FONTS.md 참고) */
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  src: local("NanumBarunGothic Bold"), local("나눔바른고딕 Bold"),
       url("../fonts/NanumBarunGothicBold.woff2") format("woff2"),
       url("../fonts/NanumBarunGothicBold.woff") format("woff");
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- brand color --- */
  --c-primary: #1cabe2;          /* UNICEF cyan */
  --c-primary-dark: #1691c1;
  --c-primary-light: #6fc9ec;
  --c-primary-pale: #e8f6fd;

  /* --- track color (프로그램 트랙 밴드) --- */
  --c-track-a: #ebad33;          /* Track S / Track A */
  --c-track-b: #e68812;          /* Track F / Track E */

  /* --- neutral --- */
  --c-black: #000000;
  --c-text: #1a1a1a;
  --c-text-sub: #555555;
  --c-text-mute: #999999;
  --c-line: #e0e0e0;
  --c-line-dark: #c9c9c9;
  --c-bg: #ffffff;
  --c-bg-gray: #f2f2f2;
  --c-bg-gray-2: #ededed;
  --c-bg-footer: #ebebeb;
  --c-white: #ffffff;

  /* --- font family --- */
  --ff-base: "Pretendard Variable", Pretendard, -apple-system,
             BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo",
             "Malgun Gothic", sans-serif;
  --ff-pixel: "NeoDunggeunmo", "Galmuri11", "DungGeunMo", monospace;
  --ff-gnb: "NanumBarunGothic", var(--ff-base);

  /* --- layout --- */
  --container: 1560px;           /* 본문 최대 폭 */
  --container-narrow: 1420px;
  --gutter: 40px;
  --gutter-lg: clamp(20px, 7.031vw, 135px);  /* 시안 좌우 여백 135 */
  --header-h: 109px;

  /* --- fluid type scale (1280~1920 사이에서 선형 보간) ---
     디자인(1920) 값을 상한으로 두고 축소됩니다. */
  --fs-display: clamp(48px, 4.6vw, 88px);   /* KV 대형 타이틀 */
  --fs-h1: clamp(30px, 2.3vw, 44px);        /* 섹션 타이틀(픽셀) */
  --fs-h2: clamp(26px, 2.5vw, 48px);        /* 카드 타이틀 */
  --fs-h3: clamp(20px, 1.7vw, 32px);
  --fs-h4: clamp(18px, 1.3vw, 24px);
  --fs-body-lg: clamp(16px, 1.15vw, 22px);
  --fs-body: clamp(15px, 1vw, 19px);
  --fs-sm: clamp(13px, 0.85vw, 16px);
  --fs-xs: clamp(12px, 0.75vw, 14px);

  /* --- spacing --- */
  --sec-pt: clamp(60px, 5.2vw, 100px);
  --sec-pb: clamp(60px, 5.2vw, 100px);

  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 태블릿: PC 레이아웃을 축소해서 사용 (컬럼만 조정) */
@media (max-width: 1279px) {
  :root {
    --gutter: 32px;
    --header-h: 84px;
    --fs-display: clamp(40px, 6.4vw, 64px);
    --fs-h1: clamp(26px, 3.4vw, 38px);
    --fs-h2: clamp(24px, 3.2vw, 38px);
    --fs-h3: clamp(19px, 2.4vw, 26px);
    --fs-h4: clamp(17px, 1.9vw, 21px);
    --fs-body-lg: clamp(15px, 1.7vw, 18px);
    --fs-body: clamp(14px, 1.5vw, 17px);
    --fs-sm: 14px;
    --fs-xs: 12px;
  }
}

/* 모바일: 430 시안 기준 */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --header-h: 64px;
    --fs-display: clamp(34px, 11vw, 48px);
    --fs-h1: 22px;
    --fs-h2: 21px;
    --fs-h3: 17px;
    --fs-h4: 16px;
    --fs-body-lg: 15px;
    --fs-body: 14px;
    --fs-sm: 13px;
    --fs-xs: 11px;
    --sec-pt: 48px;
    --sec-pb: 48px;
  }
}

/* ==========================================================================
   3. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.blind {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 0; top: -60px;
  z-index: 1000;
  padding: 10px 20px;
  background: var(--c-primary); color: #fff;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sec-pt) var(--sec-pb); position: relative; }
.section--gray { background: var(--c-bg-gray); }
.section--cyan { background: var(--c-primary); color: #fff; }

#content { padding-top: var(--header-h); }
/* 헤더가 KV 위에 겹쳐지는 페이지 */
.is-overlap-header #content { padding-top: 0; }

/* ==========================================================================
   5. PIXEL DOT BACKGROUND (시안의 픽셀 패턴)
   --------------------------------------------------------------------------
   Figma "디자인 정리" 페이지의 픽셀 장식을 SVG 로 내보내 그대로 사용한다.
   → assets/images/deco/  (CSS 근사로 대체하지 말 것)

   .pixel-bg           : 섹션 전면 픽셀 패턴 레이어
   .pixel-bg--light    : 밝은 회색 배경 위 (흰색 픽셀)   — Figma 10929:1315
   .pixel-bg--cyan     : 시안 배경 위 (연한 시안 픽셀)   — Figma 10891:4820
   ========================================================================== */
.pixel-bg { position: relative; isolation: isolate; }
.pixel-bg > * { position: relative; z-index: 1; }
.pixel-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.pixel-bg--light::before { background-image: url("../images/deco/pattern-exhibit.svg"); }
.pixel-bg--cyan::before  { background-image: url("../images/deco/pattern-safe.svg"); }

/* ==========================================================================
   5-1. DECO LAYER (키비주얼·서브 키비주얼의 장식 요소)
   --------------------------------------------------------------------------
   .deco          : 장식 전용 래퍼 (클릭 차단 · 본문 뒤로)
   .deco__layer   : 큰 배경 레이어 (그라디언트 메쉬 / 픽셀 필드 / 하단 웨이브)
   .deco__mark    : 작은 포인트 (플러스 · 셰브론)
   위치·크기는 각 페이지 CSS 에서 시안 좌표를 % 로 환산해 지정한다.
   ========================================================================== */
.deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.deco__layer,
.deco__mark {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* 포인트 마크 — 시안 원본 크기 44x44 / 125x65 / 66x126 */
.deco__mark--plus      { aspect-ratio: 1; background-image: url("../images/deco/plus.svg"); }
.deco__mark--plus-open { aspect-ratio: 1; background-image: url("../images/deco/plus-open.svg"); }
.deco__mark--chev-l    { aspect-ratio: 125 / 65;  background-image: url("../images/deco/chevron-left.svg"); }
.deco__mark--chev-u    { aspect-ratio: 66 / 126;  background-image: url("../images/deco/chevron-up.svg"); }

/* ==========================================================================
   6. TYPOGRAPHY / 공용 타이틀
   ========================================================================== */
.pixel { font-family: var(--ff-pixel); font-weight: 400; letter-spacing: 0.02em; }

/* 섹션 타이틀 : PROGRAM / LOCATION / FAQ / ORGANIZERS */
.sec-title {
  font-family: var(--ff-pixel);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.04em;
}
.sec-title--white { color: #fff; }

.sec-lead {
  margin-top: 18px;
  text-align: center;
  font-size: var(--fs-body-lg);
  color: var(--c-text-sub);
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* 큰 CTA (자세히 보기 >> / 프로그램 자세히 보기 >>) */
.btn-cta {
  font-family: var(--ff-pixel);
  font-size: clamp(16px, 1.25vw, 24px);
  color: #fff;
  background: var(--c-primary);
  min-width: clamp(220px, 20vw, 377px);
  min-height: clamp(48px, 3.7vw, 70px);
  padding-inline: 28px;
}
.btn-cta:hover { background: var(--c-primary-dark); }
.btn-cta--light { background: var(--c-primary-light); }
.btn-cta--light:hover { background: var(--c-primary); }
.btn-cta--block { width: 100%; }

/* 라인 버튼 */
.btn-line {
  border: 1px solid var(--c-primary);
  color: var(--c-primary);
  background: #fff;
  min-height: 56px;
  padding-inline: 28px;
  font-size: var(--fs-body);
  font-weight: 600;
}
.btn-line:hover { background: var(--c-primary-pale); }

/* 솔리드 (폼 제출 등) */
.btn-solid {
  background: var(--c-primary);
  color: #fff;
  min-height: 56px;
  padding-inline: 28px;
  font-size: var(--fs-body);
  font-weight: 700;
}
.btn-solid:hover { background: var(--c-primary-dark); }
.btn-solid[disabled],
.btn-solid.is-disabled {
  background: var(--c-line-dark);
  cursor: not-allowed;
}

.btn-gray {
  background: #d9d9d9;
  color: #555;
  min-height: 56px;
  padding-inline: 28px;
  font-weight: 600;
}
.btn-gray:hover { background: #cfcfcf; }

.btn-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   8. SYSTEM WINDOW (레트로 창 컴포넌트)
   --------------------------------------------------------------------------
   시안의 "● SYSTEM MESSAGE  _ □ ×" 창 UI
   ※ 모서리의 픽셀 장식은 Figma 벡터입니다. 정밀 재현이 필요하면
     assets/images/win-corner.svg 로 교체하세요.
   ========================================================================== */
/* 시안(10882:19376 / 729x135) 실측
   · 테두리 2px 시안색, 배경 흰색
   · 타이틀바는 흰 배경 + 시안색 글자, 높이 28px, 아래 1px 시안 구분선
   · 좌우 안쪽 여백 12px (● 마크가 x=12 에서 시작) */
.sys-win {
  border: 1px solid var(--c-primary);
  background: #fff;
}
/* 시안 1920 기준 테두리 2px */
@media (min-width: 1280px) { .sys-win { border-width: 2px; } }

.sys-win__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: clamp(18px, 1.458vw, 28px);
  padding-inline: clamp(6px, 0.625vw, 12px);
  border-bottom: 1px solid var(--c-primary);
  background: #fff;
  color: var(--c-primary);
  font-family: var(--ff-pixel);
  font-size: clamp(9px, 0.677vw, 13px);
  letter-spacing: 0.08em;
}
.sys-win__bar::before {
  content: "● SYSTEM MESSAGE";
  white-space: nowrap;
}
.sys-win__bar::after {
  content: "_ ⊡ ×";
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.sys-win__body { padding: clamp(20px, 2.1vw, 40px); }

/* KV 안의 터미널 입력 창 — 시안 729x135, 타이틀바 28 + 본문 107 */
.sys-win--terminal .sys-win__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
  min-height: clamp(60px, 5.365vw, 103px);
}
.sys-win--terminal .sys-win__text {
  font-family: var(--ff-pixel);
  /* 시안(10882:19400): 문구+커서 폭 404px @1920 */
  font-size: clamp(20px, 2.34vw, 45px);
  color: #717071;
  letter-spacing: 0.06em;
}
.sys-win__caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.12em;
  animation: caretBlink 1s steps(1, end) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sys-win__caret { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   9. HEADER / GNB
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  max-width: 1920px;
  margin-inline: auto;
  /* 시안: 헤더 내용이 x=135 에서 시작 (1650 폭, 1920 안에서 가운데) */
  padding-inline: var(--gutter-lg);
}

/* 시안: 메뉴 블록이 화면 가운데(960) — 양쪽 로고를 같은 비중으로 두어 가운데 정렬 */
.header__logo { display: flex; align-items: center; gap: 18px; flex: 1 1 0; }
.header__brand { display: flex; justify-content: flex-end; flex: 1 1 0; }
/* 시안 개정: 스택형 로고 104x55 (KOREA 없음) */
.header__logo img { height: clamp(34px, 2.865vw, 55px); width: auto; }

/* PC 메뉴 */
/* 시안(1920) 간격 — 텍스트 메뉴 사이 74px, 첫 pill 앞 52px, pill 사이 31px */
.gnb {
  --gnb-gap: clamp(20px, 3.854vw, 74px);
  --gnb-pill-lead: clamp(16px, 2.708vw, 52px);
  --gnb-pill-gap: clamp(10px, 1.615vw, 31px);
  display: flex;
  align-items: center;
  gap: var(--gnb-gap);
}
.gnb__link {
  font-family: var(--ff-gnb);
  font-weight: 600;
  font-size: clamp(15px, 1.0417vw, 20px);
  line-height: 1.48;
  color: #000;
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.gnb__link:not(.gnb__link--pill) + .gnb__link--pill { margin-left: calc(var(--gnb-pill-lead) - var(--gnb-gap)); }
.gnb__link--pill + .gnb__link--pill { margin-left: calc(var(--gnb-pill-gap) - var(--gnb-gap)); }
.gnb__link:hover,
.gnb__link[aria-current="page"] { color: var(--c-primary); }

.gnb__link--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(90px, 6vw, 115px);
  height: clamp(30px, 1.9vw, 36px);
  padding-inline: 14px;
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  color: #fff;
}
.gnb__link--pill:hover,
.gnb__link--pill[aria-current="page"] { background: var(--c-primary-dark); color: #fff; }

.header__brand { flex-shrink: 0; }
.header__brand img { height: clamp(34px, 2.6vw, 49px); width: auto; }

/* 햄버거 */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  position: relative;
  flex-shrink: 0;
}
.hamburger span {
  position: absolute;
  left: 9px;
  width: 26px; height: 2px;
  background: var(--c-black);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 메뉴 오버레이 */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: #fff;
  padding: 0 var(--gutter);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--c-line);
  font-size: 22px;
  font-weight: 700;
}
.mobile-menu__item svg { flex-shrink: 0; }
.mobile-menu__item:hover { color: var(--c-primary); }

body.is-menu-open { overflow: hidden; }

@media (max-width: 1279px) {
  .gnb { --gnb-gap: 18px; --gnb-pill-lead: 14px; --gnb-pill-gap: 10px; }
  .gnb__link { font-size: 15px; }
}
@media (max-width: 1023px) {
  .header__inner { padding-inline: var(--gutter); }
  .gnb { display: none; }
  .hamburger { display: block; }
  .header__inner { justify-content: flex-start; }
  .header__logo { gap: 12px; }
  .header__logo img { height: 34px; }
  /* 모바일 시안: 유니세프 로고 옆에 THE CHILDREN FESTA 로고 병기 */
  .header__brand { margin-right: auto; }
  .header__brand img { height: 26px; }
}
@media (max-width: 400px) {
  .header__brand { display: none; }
}

/* 모바일 헤더가 시안(11007:4793)처럼 시안색 배경일 때 */
.header--cyan { background: var(--c-primary); border-bottom-color: transparent; }
.header--cyan .hamburger span { background: #fff; }

/* ==========================================================================
   9-2. SUB KEY VISUAL (서브 페이지 공통 상단)
   --------------------------------------------------------------------------
   로고타입 + SYSTEM MESSAGE 창에 페이지명이 들어가는 공통 헤드입니다.
   ========================================================================== */
.subkv {
  position: relative;
  overflow: hidden;
  /* 시안(1920): 헤더 하단~타이틀 74px, 하단 여백 74px → 3.85vw */
  padding-top: calc(var(--header-h) + clamp(22px, 3.85vw, 74px));
  padding-bottom: clamp(24px, 3.85vw, 74px);
  background: #ffffff;
  text-align: center;
}
.subkv > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   서브 키비주얼 장식 레이어
   Figma "상단 키비주얼"(10800:3409 / PC 1920x523) 좌표를 프레임 대비 % 로 환산.
   -------------------------------------------------------------------------- */
.subkv__mesh-tl {                                 /* 10929:2397 */
  left: 0; top: var(--header-h);
  width: 25.52%; aspect-ratio: 490 / 406;
  background-image: url("../images/deco/subkv-mesh-tl.svg");
}
.subkv__dots-tl {                                 /* 10929:2398 */
  left: 0; top: var(--header-h);
  width: 30.99%; aspect-ratio: 595 / 406;
  background-image: url("../images/deco/subkv-dots-tl.svg");
}
.subkv__mesh-br {                                 /* 10929:3481 — 프레임 높이 전체 */
  right: 0; top: 0; bottom: 0;
  width: 36.56%;
  background-image: url("../images/deco/subkv-mesh-br.svg");
}
.subkv__dots-br {                                 /* 10929:3482 */
  right: 0; bottom: 0;
  width: 30.89%; aspect-ratio: 593 / 492;
  background-image: url("../images/deco/subkv-dots-br.svg");
}
.subkv__wave {                                    /* 10929:4564 */
  left: 0; right: 0; bottom: 0;
  height: 27.34%;
  min-height: 70px;
  background-image: linear-gradient(180deg, rgba(28, 171, 226, 0) 33.8%, rgba(28, 171, 226, 0.25) 100%);
}

/* 포인트 마크는 헤더 아래 영역(시안 523 - 헤더 109 = 414px) 기준으로 배치한다.
   섹션 높이가 시안 비율보다 낮아져도 헤더 뒤로 숨지 않도록 --deco-band 를 쓴다. */
.subkv__deco .deco__mark { --deco-band: calc(100% - var(--header-h)); }

.subkv__chev-r { left: 83.49%; top: calc(var(--header-h) + 0.1546 * var(--deco-band)); width: 4.95%; opacity: 0.3; }  /* 10929:22284 */
.subkv__chev-l { left: 20.99%; top: calc(var(--header-h) + 0.3768 * var(--deco-band)); width: 2.60%; opacity: 0.3; }  /* 10929:22297 */
.subkv__plus-1 { left:  5.99%; top: calc(var(--header-h) + 0.7440 * var(--deco-band)); width: 1.72%; opacity: 0.2; }  /* 10929:22307 */
.subkv__plus-2 { left: 79.74%; top: calc(var(--header-h) + 0.5749 * var(--deco-band)); width: 1.72%; }               /* 10929:22319 */
.subkv__plus-3 { left: 13.33%; top: calc(var(--header-h) + 0.1667 * var(--deco-band)); width: 1.72%; }               /* 10929:22326 */

/* 픽셀 캐릭터 — 시안상 서브 키비주얼에 떠 있는 포인트 */
.subkv__char-flower { left: 24.58%; top: calc(var(--header-h) + 0.1498 * var(--deco-band)); width: 1.61%; aspect-ratio: 1;
  background-image: url("../images/char-flower.svg"); }                    /* 10943:10712 */
.subkv__char-smile  { left: 12.03%; top: calc(var(--header-h) + 0.6932 * var(--deco-band)); width: 1.56%; aspect-ratio: 1;
  background-image: url("../images/char-smile.svg"); }                     /* 10943:10790 */
.subkv__char-heart  { left: 90.00%; top: calc(var(--header-h) + 0.3961 * var(--deco-band)); width: 1.82%; aspect-ratio: 35 / 31;
  background-image: url("../images/char-heart.svg"); }                     /* 10943:10662 */
/* 시안(10800:3409): 글자 블록·창 모두 729 폭, 창은 y313~446 */
.subkv__title { max-width: clamp(270px, 37.97vw, 729px); margin-inline: auto; }
.subkv__win { max-width: clamp(320px, 37.97vw, 729px); margin-inline: auto; }
.subkv__title { line-height: 0; }
.subkv__title img { width: 113.45%; max-width: none; height: auto; }   /* 809/713 — 흩뿌림만 우측으로 */
.subkv__win { width: 100%; margin-top: clamp(10px, 1.042vw, 20px); }
.subkv__win .sys-win__body {
  display: grid;
  place-items: center;
  min-height: clamp(58px, 5.208vw, 100px);
  padding-block: 10px;
}
.subkv__name {
  font-family: var(--ff-pixel);
  font-weight: 400;
  font-size: clamp(20px, 2.396vw, 46px);   /* 시안 46px */
  letter-spacing: 0.19em;
  text-indent: 0.19em;
  color: #717071;
}
.subkv__name .sys-win__caret { letter-spacing: 0; }

@media (max-width: 767px) {
  .subkv { padding-top: calc(var(--header-h) + 18px); padding-bottom: 20px; }
  .subkv__title img { width: 113.45%; }
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.footer {
  background: var(--c-bg-footer);
  color: #aaa;
}

/* 시안(10800:30183 / 1920x517) 실측
   · 안내문 top 69 / 흰 구분선 y=165 / 좌우 여백 135
   · 안내문 28.67px Bold #000 · 그 외 28.67px Regular #aaa
   · 사업자 20px · 고지 13px                                     */
.footer__notice {
  text-align: center;
  padding-block: clamp(26px, 3.594vw, 69px) clamp(22px, 3.073vw, 59px);
  padding-inline: var(--gutter-lg);
  border-bottom: 1px solid #fff;
  font-size: clamp(17px, 1.493vw, 28.67px);
  font-weight: 700;
  line-height: 1.3;
  color: #000;
}

.footer__inner {
  padding: clamp(28px, 3.073vw, 59px) var(--gutter-lg) clamp(34px, 3.49vw, 67px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 60px);
  flex-wrap: wrap;
}

/* 시안: 유니세프 로고 386.4x50 · x=135 / 페스타 로고 156x55 · x=597 (간격 76) */
.footer__logos { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(28px, 3.958vw, 76px); }
.footer__logos img { width: auto; max-width: 100%; }
.footer__logos .footer__logo-unicef { height: clamp(30px, 2.604vw, 50px); }
.footer__logos .footer__logo-festa { height: clamp(33px, 2.865vw, 55px); }

.footer__info { text-align: right; margin-left: auto; }

.footer__links {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: clamp(16px, 3.49vw, 67px);
  font-size: clamp(15px, 1.493vw, 28.67px);
  line-height: 1.3;
  color: #aaa;
}
.footer__links + .footer__links { margin-top: clamp(4px, 0.469vw, 9px); }
.footer__links a { color: inherit; }
.footer__links a:hover { color: var(--c-primary); }
.footer__links .bar { color: inherit; font-weight: 400; }
.footer__contact {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(8px, 1.51vw, 29px);
  color: inherit;
}

.footer__biz {
  margin-top: clamp(16px, 1.563vw, 30px);
  font-size: clamp(13px, 1.042vw, 20px);
  line-height: 1.3;
  color: #aaa;
  font-style: normal;
}
.footer__copy {
  margin-top: clamp(12px, 1.094vw, 21px);
  font-size: clamp(11px, 0.677vw, 13px);
  line-height: 1.5;
  color: #aaa;
}

@media (max-width: 767px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .footer__logos { gap: 16px; }
  .footer__logos .footer__logo-unicef { height: auto; width: min(100%, 260px); }
  .footer__logos .footer__logo-festa { height: auto; width: min(100%, 120px); }
  .footer__info { text-align: left; margin-left: 0; }
  .footer__links { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
  .footer__contact { gap: 8px; }
}

/* ==========================================================================
   11. FORM (참가신청 / 로그인 공용)
   ========================================================================== */
.field { margin-bottom: 22px; }
.field__label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-body);
  font-weight: 700;
}
.field__label .req { color: #e2413b; margin-left: 4px; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--c-line-dark);
  background: #fff;
  font-size: var(--fs-body);
  transition: border-color 0.2s var(--ease);
}
.textarea { min-height: 140px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: #b5b5b5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-primary);
}
.input[aria-invalid="true"] { border-color: #e2413b; }

.field__error {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: #e2413b;
}
.field__help {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--c-text-mute);
}

/* 체크박스 / 라디오 */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: var(--fs-body);
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-primary); flex-shrink: 0; }

.agree-box {
  border: 1px solid var(--c-line);
  padding: 20px;
  max-height: 220px;
  overflow-y: auto;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  line-height: 1.8;
  background: #fafafa;
}

/* ==========================================================================
   12. MODAL / POPUP
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(0, 0, 0, 0.72);
}
.modal.is-open { display: flex; }
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  background: #fff;
  padding: clamp(24px, 2.6vw, 44px);
}
.modal__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 18px;
}
.modal__close {
  position: absolute;
  top: clamp(14px, 2.083vw, 40px); right: clamp(14px, 2.083vw, 40px);
  display: grid;
  place-items: center;
  font-size: clamp(24px, 2.5vw, 48px);
  line-height: 1;
  color: #c9c9c9;
}

/* 시안(10943:2211 / 1044x969): 넓은 모달 — 제목 64 · 저장 버튼 371x69 */
.modal--wide .modal__panel { max-width: 1044px; padding: clamp(24px, 3.854vw, 74px); }
.modal--wide .modal__title { font-size: clamp(24px, 3.333vw, 64px); line-height: 1.5; margin-bottom: clamp(8px, 1.042vw, 20px); }
.modal__sub { text-align: center; font-size: clamp(13px, 1.042vw, 20px); line-height: 1.8; color: #000; }
.modal__sub strong { font-weight: 700; }
.modal__foot { margin-top: clamp(24px, 2.917vw, 56px); }
.modal__save { min-width: clamp(200px, 19.323vw, 371px); min-height: clamp(42px, 3.594vw, 69px); font-size: clamp(14px, 1.25vw, 24px); }

/* 시안(10800:25612 / 1044x276): 참석확인증 — 문구만 */
.modal__panel--note { max-width: 1044px; padding: clamp(30px, 3.854vw, 74px) clamp(24px, 3.021vw, 58px); }
.modal__note { text-align: center; font-size: clamp(15px, 1.667vw, 32px); line-height: 1.8; color: #000; }
.modal__note strong { font-weight: 700; }
.modal__close:hover { color: var(--c-text); }

/* ==========================================================================
   13. TABLE (신청 내역 등)
   ========================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { min-width: 680px; font-size: var(--fs-body); }
.tbl th, .tbl td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: middle;
}
.tbl thead th {
  background: #f7f7f7;
  font-weight: 700;
  border-top: 2px solid var(--c-text);
  white-space: nowrap;
}

/* ==========================================================================
   14. UTILITIES
   ========================================================================== */
.tc { text-align: center; }
.tr { text-align: right; }
.mt-0  { margin-top: 0 !important; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: clamp(24px, 2.4vw, 40px); }
.mt-60 { margin-top: clamp(36px, 3.6vw, 60px); }
.mt-80 { margin-top: clamp(44px, 4.6vw, 80px); }

/* 디바이스별 노출 제어
   — 요소 고유의 display(flex/grid 등)를 유지하기 위해 '숨김'만 강제합니다. */
@media (min-width: 1280px) {
  .only-tablet, .only-mo { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .only-pc, .only-mo { display: none !important; }
}
@media (max-width: 767px) {
  .only-pc, .only-tablet, .hide-mo { display: none !important; }
}
@media (min-width: 768px) {
  .hide-tablet-up { display: none !important; }
}

/* --------------------------------------------------------------------------
   임시 오픈용 — 특정 화면/섹션 숨김 스위치
   ex) <body data-page="main"> 의 하위 섹션을 아래처럼 제어하세요.
   [data-sec="sponsor"] { display: none; }
   -------------------------------------------------------------------------- */

/* ==========================================================================
   15. IMAGE PLACEHOLDER
   --------------------------------------------------------------------------
   에셋 교체 전까지 자리를 잡아두는 박스입니다.
   실제 이미지가 들어오면 <img> 로 교체하고 .ph 클래스를 제거하세요.
   ========================================================================== */
.ph {
  display: grid;
  place-items: center;
  width: 100%;
  background: #dcdcdc;
  color: #6f6f6f;
  font-family: var(--ff-base);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-align: center;
  padding: 16px;
}
.ph--cyan { background: rgba(255, 255, 255, 0.2); color: #fff; }
.ph--ratio-16x9 { aspect-ratio: 16 / 9; }
.ph--ratio-4x3  { aspect-ratio: 4 / 3; }
.ph--ratio-1x1  { aspect-ratio: 1 / 1; }