@charset "utf-8";
/* ==========================================================================
   행사소개 (about.html)
   --------------------------------------------------------------------------
   시안: 개요 본문 10800:25886 (1920x4469) — 좌표·타이포는 모두 실측값
   ========================================================================== */

/* 시안 본문 폭 1650 (좌우 여백 135) */
.ab-body .container { max-width: calc(1650px + var(--gutter) * 2); }

/* ---------- INTRO ---------- */
/* 시안: 리드 y100 · 픽셀 타이틀 y153 · 리드문 y341 · 카드 y483(272 높이) */
.ab-intro { padding-top: clamp(62px, 5.365vw, 103px); padding-bottom: 0; }
.ab-intro__eyebrow {
  text-align: center;
  font-size: clamp(22px, 2.396vw, 46px);
  font-weight: 700;
  line-height: 1.2;
}
/* kv-title.svg = 글자 블록(0~713) + 오른쪽 픽셀 흩뿌림(713~809).
   글자 블록이 718 이 되도록 이미지를 809/713 배로 키운다. */
.ab-intro__mark {
  max-width: clamp(270px, 37.396vw, 718px);
  margin: clamp(1px, 0.104vw, 2px) auto 0;   /* 시안: 위 문구 잉크와 20 간격 */
  line-height: 0;
}
.ab-intro__mark img { width: 113.45%; max-width: none; height: auto; }

.ab-intro__lead {
  margin-top: clamp(34px, 4.167vw, 80px);
  text-align: center;
  font-size: clamp(17px, 1.667vw, 32px);
  font-weight: 700;
  line-height: 1.8;
}
.ab-intro__sub {
  margin-top: 0;
  text-align: center;
  font-size: clamp(13px, 1.042vw, 20px);
  line-height: 1.8;
  color: #000;
}

/* 2 카드 — 시안 796x272 / 800x272, x134 · x987 */
.ab-cards {
  margin-top: clamp(24px, 2.5vw, 48px);
  display: grid;
  grid-template-columns: 796fr 800fr;
  gap: clamp(20px, 2.969vw, 57px);
  max-width: 1653px;
  margin-inline: auto;
}
.ab-card {
  min-height: clamp(150px, 14.167vw, 272px);
  padding: clamp(26px, 2.76vw, 53px) clamp(20px, 2.2vw, 42px) 0;
  text-align: center;
}
.ab-card--line { border: 2px solid var(--c-primary); background: #fff; }
.ab-card--fill { background: var(--c-primary); color: #fff; }
.ab-card__title {
  font-size: clamp(22px, 2.396vw, 46px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--c-primary);
}
.ab-card--fill .ab-card__title { color: #fff; }
.ab-card__desc {
  margin-top: clamp(14px, 1.458vw, 28px);
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-primary);
}
.ab-card--fill .ab-card__desc { color: #fff; }

@media (max-width: 767px) {
  .ab-cards { grid-template-columns: 1fr; }
  .ab-card { min-height: 0; padding-bottom: 26px; }
}

/* ---------- THE UNSEEN IS URGENT ---------- */
/* 시안: 캐릭터 y860 · 제목 y938 · 부제 y1027 · 통계 창 y1115 (765x270) */
.ab-urgent { padding-top: clamp(52px, 5vw, 96px) !important; padding-bottom: 0; }

.ab-h2 {
  text-align: center;
  font-size: clamp(22px, 2.396vw, 46px);
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}
.ab-h2--lg { font-size: clamp(24px, 2.5vw, 48px); }
.ab-h2-sub {
  margin-top: clamp(10px, 1.042vw, 20px);
  text-align: center;
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}

.ab-stat {
  width: min(100%, clamp(300px, 39.844vw, 765px));   /* 시안 765 */
  margin: clamp(26px, 2.708vw, 52px) auto 0;
}
.ab-stat .sys-win__body {
  text-align: center;
  padding-block: clamp(16px, 1.615vw, 31px) clamp(12px, 1.302vw, 25px);
}
.ab-stat__label {
  font-size: clamp(17px, 1.667vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}
.ab-stat__value {
  margin-top: clamp(6px, 0.625vw, 12px);
  color: var(--c-primary);
  font-size: clamp(62px, 6.493vw, 124.67px);          /* 시안 124.67 */
  line-height: 1;
  letter-spacing: 0.02em;
}
.ab-stat__source {
  margin-top: clamp(8px, 0.625vw, 12px);
  text-align: center;
  font-size: clamp(13px, 0.938vw, 18px);
  line-height: 1.5;
  color: #000;
}

/* 시안: 본문 y1495 · y1687 · 강조 y1750 */
.ab-para {
  margin-top: clamp(30px, 3.021vw, 58px);
  text-align: center;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.8;
  color: #000;
}
.ab-para__strong {
  margin-top: clamp(10px, 1.042vw, 20px);
  font-weight: 800;
  font-size: clamp(17px, 1.667vw, 32px);
}

/* ---------- S.A.F.E ---------- */
/* 시안: 제목 y1995 · 카드 y2100 (398x227, 간격 19) · 헤드 70 · 키 50x50 */
.ab-safe { padding-top: clamp(36px, 3.229vw, 62px) !important; padding-bottom: 0; }
.ab-safe .ab-h2 { line-height: 1.3; }
.ab-safe__code { color: var(--c-primary); }

.ab-safe__grid {
  margin-top: clamp(24px, 2.344vw, 45px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 0.99vw, 19px);
  max-width: 1650px;
  margin-inline: auto;
}
.ab-safe__card { border: 1px solid #d9d9d9; background: #fff; }

.ab-safe__head {
  display: flex;
  align-items: center;
  height: clamp(44px, 3.646vw, 70px);
  padding-left: clamp(6px, 0.573vw, 11px);
  background: var(--c-primary);
  color: #fff;
}
.ab-safe__key {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(30px, 2.604vw, 50px);
  height: clamp(30px, 2.604vw, 50px);
  background: #fff;
  color: var(--c-primary);
  font-size: clamp(32px, 2.893vw, 55.55px);          /* 시안 55.55 */
  line-height: 1;
}
.ab-safe__en {
  margin-left: clamp(8px, 0.833vw, 16px);
  font-size: clamp(20px, 1.875vw, 36px);             /* 시안 36 */
  line-height: 1.5;
}
.ab-safe__ko {
  margin-left: clamp(8px, 0.833vw, 16px);
  font-size: clamp(13px, 1.042vw, 20px);             /* 시안 20 */
  font-weight: 700;
  line-height: 1.8;
}
.ab-safe__desc {
  padding: clamp(14px, 1.302vw, 25px) clamp(10px, 1.25vw, 24px) clamp(14px, 1.406vw, 27px) clamp(12px, 1.458vw, 28px);
  text-align: center;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.5;
  color: #000;
}

@media (max-width: 1023px) {
  .ab-safe__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ab-safe__grid { grid-template-columns: 1fr; }
  .ab-safe__desc { padding-block: 18px 22px; }
}

/* ---------- 참여 ---------- */
/* 시안: 제목 y2509 · 부제 y2598 · 구분선 y2654 부터 190 간격 (x135 w1650) */
.ab-part { padding-top: clamp(46px, 4.323vw, 83px) !important; padding-bottom: 0; }
.ab-part__list {
  margin-top: clamp(10px, 1.042vw, 20px);
  max-width: 1650px;
  margin-inline: auto;
  border-top: 1px solid #d1d1d1;
}
.ab-part__item {
  padding-block: clamp(11px, 1.042vw, 20px) clamp(16px, 1.563vw, 30px);
  border-bottom: 1px solid #d1d1d1;
  text-align: center;
}
.ab-part__ico { margin: 0 auto clamp(8px, 0.729vw, 14px); height: clamp(22px, 1.667vw, 32px); width: auto; }
.ab-part__title {
  font-size: clamp(17px, 1.667vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}
.ab-part__desc {
  margin-top: clamp(6px, 0.521vw, 10px);
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.5;
  color: #888888;
}

/* ---------- 모든 어린이를 위한, 유니세프 ---------- */
/* 시안: 제목 y3809 (48px, 2줄) · 부제 y3973 · 카드 y4090 (473x278, 간격 38) */
.ab-unicef { padding-top: clamp(56px, 5.469vw, 105px) !important; padding-bottom: clamp(56px, 5.26vw, 101px); }

.ab-role {
  margin-top: clamp(26px, 2.344vw, 45px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.979vw, 38px);
  max-width: 1495px;
  margin-inline: auto;
}
.ab-role__card {
  /* 시안(10929:10765): 시안색 판 위에 4x4 흰 픽셀이 흩뿌려진 패턴 */
  background: var(--c-primary) url("../images/deco/about-role-card.png") center / 100% 100% no-repeat;
  color: #fff;
  padding: clamp(26px, 2.76vw, 53px) clamp(20px, 2.552vw, 49px) clamp(26px, 2.708vw, 52px);
  min-height: clamp(150px, 14.479vw, 278px);
}
.ab-role__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(17px, 1.667vw, 32px);             /* 시안 32 */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.ab-role__dia { font-size: 0.8em; }
.ab-role__desc {
  margin-top: clamp(8px, 0.885vw, 17px);
  font-size: clamp(14px, 1.25vw, 24px);              /* 시안 24 */
  line-height: 1.5;
  color: #fff;
}
.ab-role__desc strong { font-weight: 700; color: #fff; }

@media (max-width: 1023px) {
  .ab-role { grid-template-columns: 1fr; }
  .ab-role__card { min-height: 0; }
}

/* ==========================================================================
   본문 배경 장식
   --------------------------------------------------------------------------
   Figma "개요 본문"(10800:25886 / 1920x4469)
   · 프레임 채우기 : 세로 linear-gradient
   · 상단 픽셀 필드 : 10954:16860 (1,0 / 1919x1610)
   · 하단 픽셀 필드 : 10995:9055  (315,3338 / 1605x1131)
   · 포인트(셰브론·플러스) : 10995:10138 / 10151 / 10161 / 10167 / 10172
   ========================================================================== */
.ab-body {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: linear-gradient(180deg, #e8f9ff 0%, #ffffff 50%, #eaf9ff 100%);
}
.ab-body > .section { position: relative; z-index: 1; }

.ab-dots-top {
  left: 0; top: 0;
  width: 99.95%; aspect-ratio: 1919 / 1610;
  background-image: url("../images/deco/about-dots-top.svg");
}
.ab-dots-bottom {
  left: 16.41%; bottom: 0;
  width: 83.59%; aspect-ratio: 1605 / 1131;
  background-image: url("../images/deco/about-dots-bottom.svg");
}

/* 포인트 — 시안 y 좌표를 프레임 높이(4469) 대비 % 로 환산 */
.ab-chev-r { left: 87.86%; top: 23.81%; width: 4.95%; opacity: 0.3; }  /* 10995:10138 (1687,1064) */
.ab-chev-l { left: 20.99%; top: 28.46%; width: 2.60%; opacity: 0.3; }  /* 10995:10151 (403,1272)  */
.ab-plus-1 { left:  7.14%; top: 33.19%; width: 1.72%; opacity: 0.2; }  /* 10995:10161 (137,1483)  */
.ab-plus-2 { left: 82.76%; top: 33.54%; width: 1.72%; }                /* 10995:10167 (1589,1499) */
.ab-plus-3 { left: 13.33%; top: 23.43%; width: 1.72%; }                /* 10995:10172 (256,1047)  */

@media (max-width: 767px) {
  /* 모바일에서는 큰 픽셀 필드만 유지하고 포인트는 과밀해져 숨김 */
  .ab-deco .deco__mark { display: none; }
}