@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 {
    /* 시안(430): 섹션 좌우 여백 26 → 본문 378 */
    --gutter: 26px;
    /* 시안(430): 헤더 하단 = y85 (배경 장식이 여기서 시작) */
    --header-h: 85px;
    --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%; }

/* 모바일 시안: CTA 는 377x42 로 얇고 길다 (컨테이너보다 좌우 6px 씩 넓다) */
@media (max-width: 767px) {
  .btn-row > .btn-cta {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 42px;
    margin-inline: calc(26px - var(--gutter));
    padding-inline: 16px;
    font-size: 18px;
  }
  .btn-row { gap: 0; }
}

/* 라인 버튼 */
.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; }
  /* 모바일 시안(11022:362): 두 로고를 나란히 왼쪽에, 햄버거만 오른쪽 끝 */
  .header__inner { justify-content: flex-start; gap: 0; }
  .header__logo { flex: 0 0 auto; gap: 12px; }
  .header__logo img { height: 30px; }
  .header__brand { flex: 0 0 auto; justify-content: flex-start; margin-right: auto; margin-left: 18px; }
  .header__brand img { height: 28px; }
}
/* 시안 실측(430): 유니세프 52x27 / 페스타 69x25 — 둘 다 왼쪽에 병기 */
@media (max-width: 767px) {
  .header__logo img { height: 27px; }
  .header__brand img { height: 25px; }
}

/* 모바일 헤더가 시안(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; }

/* --------------------------------------------------------------------------
   모바일 서브 키비주얼 — 시안 11012:3 (430x296 / 헤더 85)
   로고타입 88,145 283x37 · 창 88,191 255x47 · 하단 여백 58
   장식 좌표는 PC 와 완전히 달라 프레임(296) 대비 % 로 다시 환산했다.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .subkv { padding-top: calc(var(--header-h) + 60px); padding-bottom: 58px; }

  /* 글자 블록 249 + 오른쪽 흩뿌림 34 = 283 */
  .subkv__title { max-width: clamp(190px, 57.91vw, 249px); }
  .subkv__win { max-width: clamp(200px, 59.3vw, 255px); margin-top: 9px; }
  .subkv__win .sys-win__bar { height: 12px; padding-inline: 5px; font-size: 6px; }
  .subkv__win .sys-win__body { min-height: 34px; padding-block: 4px; }
  .subkv__name { font-size: clamp(13px, 3.72vw, 16px); }

  .subkv__mesh-tl { left: -13.49%; top: var(--header-h); width: 102.56%; aspect-ratio: 441 / 176; }
  .subkv__dots-tl { left: 0;       top: var(--header-h); width:  60.00%; aspect-ratio: 258 / 176; }
  .subkv__mesh-br {
    left: 47.44%; right: auto; top: 14.86%; bottom: auto;
    width: 70.93%; aspect-ratio: 305 / 252;
  }
  .subkv__dots-br {
    left: 57.67%; right: auto; top: 32.09%; bottom: auto;
    width: 60.47%; aspect-ratio: 260 / 201;
  }
  .subkv__wave { top: 80.41%; bottom: auto; height: 19.59%; min-height: 0; }

  .subkv__deco .deco__mark { --deco-band: 100%; }
  .subkv__chev-r      { left: 85.35%; top: 36.15%; width: 6.05%; }
  .subkv__chev-l      { left: 13.72%; top: 76.01%; width: 3.26%; }
  .subkv__plus-1      { left:  8.84%; top: 47.30%; width: 2.09%; }
  .subkv__plus-2      { left:  3.72%; top: 65.88%; width: 2.09%; }
  .subkv__plus-3      { left: 56.98%; top: 90.88%; width: 2.09%; }
  .subkv__char-flower { left: 31.16%; top: 34.80%; width: 3.26%; }
  .subkv__char-heart  { left: 92.33%; top: 62.16%; width: 3.72%; }
  .subkv__char-smile  { left:  5.81%; top: 85.14%; width: 3.26%; }
}

/* ==========================================================================
   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;
}

/* 모바일 푸터 — 시안 11007:4886 (430x226)
   안내문 32 / 구분선 77 / 로고는 왼쪽(세로 2단) · 안내 텍스트는 오른쪽 */
@media (max-width: 767px) {
  .footer__notice {
    padding-block: 32px 28px;
    padding-inline: var(--gutter);
    font-size: 12px;
  }
  .footer__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
    padding: 13px var(--gutter) 14px;
  }
  /* 로고는 위아래로 */
  .footer__logos {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 40px;
  }
  .footer__logos .footer__logo-unicef { height: auto; width: 152px; }
  .footer__logos .footer__logo-festa { height: auto; width: 96px; }

  /* 시안 텍스트 칸 219 — 좁은 화면에서는 줄어들게 둔다 */
  .footer__info { flex: 0 1 219px; min-width: 0; text-align: left; margin-left: auto; }
  /* 시안: ㅣ개인정보처리방침 / ㅣ문의 contact@… / (들여쓰기) 전화번호 세 줄 */
  .footer__links {
    display: block;
    font-size: 10px;
    line-height: 1.5;
  }
  .footer__links > .bar { display: none; }
  .footer__links > a { display: block; }
  .footer__links > a::before,
  .footer__links > .footer__contact::before {
    content: "ㅣ";
    margin-right: 2px;
  }
  .footer__links > .footer__contact { display: flex; margin-top: 5px; }
  .footer__links + .footer__links { margin-top: 2px; padding-left: 53px; }
  .footer__links + .footer__links > .footer__contact::before { content: none; }
  .footer__contact { gap: 6px; }
  .footer__biz { margin-top: 10px; font-size: 8px; line-height: 1.5; }
  .footer__copy { margin-top: 9px; font-size: 8px; line-height: 1.7; }
}

/* ==========================================================================
   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; }