/* 후원 /donation · /g-boosters — Figma 2026 후원 (1:64510 / 1:69789 / 1:75062)
   두 페이지가 이 파일 하나를 쓴다. 라이브(Framer)는 구간이 4개다:
   ≥1920 / 1200–1919(기본) / 810–1199 / <810. 기본 = 1200–1919, 나머지는 미디어쿼리로 덮는다.
   (일부 섹션은 Framer 구조 그대로 ≥1920 을 기본으로 두고 범위 쿼리로 내려간다 — 각 섹션 머리 주석 참조)
   Inter(임팩트 숫자·2026 plan 등)는 base.css 에 있다. 한글은 sans-serif 폴백 — 라이브와 같다. */

.donation {
  --dn-blue: #1d85ff;
  --dn-blue-deep: #0e64d3;
  --dn-navy: #04061e;
  --dn-inter: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.donation > section { position: relative; width: 100%; }
.donation p, .donation h2, .donation h3, .donation h4 { margin: 0; }
:where(.donation) img { display: block; max-width: none; }  /* 특이도 0 — 섹션의 display:none 이 이긴다 */

/* 섹션 머리: 영문 라벨 + 제목 */
.dn-eyebrow {
  font-size: 16px;
  font-weight: 800;
  line-height: 160%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dn-blue);
}
.dn-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 140%;
  text-align: center;
}
@media (max-width: 809.98px) {
  .dn-eyebrow { font-size: 13px; }
  .dn-title { font-size: 28px; }
}


/* ── 히어로: 픽셀 우주 배경 + 'BOOSTERS 합류하시겠습니까?' 대화창(이미지) + 자세히보기 ──
   대화창·로켓·반짝이는 라이브 Framer 좌표 그대로 절대배치(구간마다 값이 다르다). */
.dn-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  padding: 70px 0 38px;
}
.dn-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dn-hero-stage { position: relative; flex-shrink: 0; width: 771px; height: 551px; }
.dn-hero-dialog { position: absolute; left: 49.38px; top: 40.57px; width: 681px; height: 487px; }
.dn-hero-dialog-frame { width: 100%; height: 100%; object-fit: cover; }
.dn-hero-dialog-text { position: absolute; left: 53.9px; top: 75.99px; width: 561px; height: 343px; object-fit: contain; }
.dn-hero-rocket { position: absolute; z-index: 1; left: 62px; top: 0; width: 169px; height: 174px; }
.dn-hero-sparkle { position: absolute; z-index: 1; right: -40px; bottom: 29px; width: 152px; height: 124px; }
.dn-hero-sparkle--far { right: auto; left: 1239px; bottom: 204px; }
/* 자세히보기: 0 → -40px 왕복(1초, ease-in-out) */
.dn-hero-more { position: relative; width: 150px; height: 91px; animation: dn-hero-bob 1s cubic-bezier(.44, 0, .56, 1) infinite alternate; }
.dn-hero-more img { width: 100%; height: 100%; }
@keyframes dn-hero-bob { to { transform: translateY(-40px); } }

@media (min-width: 1920px) {
  .dn-hero-sparkle { right: -45px; }
  .dn-hero .dn-hero-sparkle--far { display: none; }
}
@media (max-width: 1199.98px) {
  .dn-hero-dialog { left: 63.5px; top: 45.38px; width: 644px; height: 460.25px; }
  .dn-hero-dialog-text { left: 71.5px; top: 81.98px; width: 501px; height: 306px; }
  .dn-hero-rocket { left: 42px; }
  .dn-hero-sparkle { right: auto; left: 595px; bottom: 25px; }
  .dn-hero .dn-hero-sparkle--far { display: none; }
  .dn-hero-more { width: 106px; height: 64px; }
}
@media (max-width: 809.98px) {
  .dn-hero-stage { height: 272px; }
  .dn-hero-dialog { left: 207px; top: 8.43px; width: 357px; height: 255.13px; }
  .dn-hero-dialog-text { left: 27px; top: 37.49px; width: 303px; height: 185px; }
  .dn-hero-rocket { left: 216px; top: -34px; width: 106px; height: 109px; }
  .dn-hero-sparkle { left: 487px; bottom: -16px; width: 85px; height: 69px; }
}


/* ── 문제제기: overview(식당 입구) + BACKGROUND(이동약자들이 겪는 어려움) + 악순환 다이어그램 ── */
.dn-difficulty {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 120px 0;
  background: var(--dn-navy);
  color: #fff;
  overflow: hidden;
  min-width: 1200px;
}
.dn-difficulty-strip { position: absolute; left: 0; top: 0; width: 1200px; height: 285px; }
.dn-difficulty-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 120px; width: 600px; }
.dn-difficulty-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dn-difficulty-text { width: 476px; font-size: 24px; line-height: 150%; text-align: center; }
/* 라이브 문장 끝 공백까지 그대로(가운데 정렬 위치가 달라진다) */
.dn-difficulty-lead .dn-difficulty-text p { white-space: pre-wrap; }
.dn-difficulty-text strong { font-weight: 700; }

.dn-difficulty-intro { display: flex; flex-direction: column; align-items: center; width: 100%; }
.dn-difficulty-overview { display: flex; flex-direction: column; align-items: center; gap: 75px; width: 100%; }
.dn-difficulty-store { width: 100%; height: 404px; border-radius: 24px; overflow: hidden; }
.dn-difficulty-store img { width: 100%; height: 100%; border-radius: inherit; }
/* 사진 아래 점선 + 점. 242px 은 라이브 레이아웃의 빈 공간 */
.dn-difficulty-line { position: relative; width: 0; height: 242px; }
.dn-difficulty-line img { position: absolute; top: 0; left: -14px; width: 28px; height: 259px; }

.dn-difficulty-background { display: flex; flex-direction: column; align-items: center; gap: 100px; width: 667px; }
.dn-difficulty-lead { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.dn-difficulty-cases { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; }
.dn-difficulty-case { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; }
.dn-difficulty-case:first-child { width: 600px; }
.dn-difficulty-subtitle { display: flex; align-items: center; gap: 8px; font-size: 32px; font-weight: 700; line-height: 160%; color: var(--dn-blue); }
.dn-difficulty-subtitle span {
  display: flex; justify-content: center; align-items: center;
  width: 28px; height: 28px; border-radius: 56px;
  background: var(--dn-blue); color: var(--dn-navy);
  font-size: 16px; line-height: 160%;
}
.dn-difficulty-search { width: 87%; aspect-ratio: 1.5852; }
.dn-difficulty-gaze { width: 87%; aspect-ratio: 3.55467; }

/* 악순환 다이어그램: 화살표 원(svg) + 가운데 알약 2개 + 네 모서리 라벨 */
.dn-difficulty-cycle { position: relative; width: 672px; height: 493px; }
.dn-difficulty-label { position: absolute; z-index: 1; font-size: 26px; font-weight: 700; line-height: 120%; text-align: center; white-space: pre-wrap; }
.dn-difficulty-label--tl { top: 44px; left: -19px; width: 203px; }
.dn-difficulty-label--tr { top: 43px; left: 527px; right: 0; }
.dn-difficulty-label--br { bottom: 24px; left: 525px; width: 145px; height: 76px; display: flex; flex-direction: column; justify-content: center; }
.dn-difficulty-label--bl { top: 393px; left: -29px; right: 498px; }
.dn-difficulty-ring { position: absolute; top: 0; left: 102px; width: 497px; height: 493px; }
.dn-difficulty-ring > img { width: 100%; height: 100%; }
.dn-difficulty-pills { position: absolute; top: 119px; left: 85px; display: flex; flex-direction: column; gap: 13px; }
.dn-difficulty-pill {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 328px; height: 113px; border-radius: 126px;
  font-size: 26px; font-weight: 700; line-height: 130%; text-align: center;
}
.dn-difficulty-pill--search { padding: 15px 20px 0; background: #37669e; line-height: 120%; }
.dn-difficulty-pill--search span { line-height: 130%; }
.dn-difficulty-pill--gaze { padding: 0 29px; background: #1c3757; }
.dn-difficulty-eyes { display: flex; gap: 4px; }
.dn-difficulty-plus { position: absolute; z-index: 1; left: 50%; top: 50%; width: 49px; height: 49px; transform: translate(-50%, -50%); }

@media (max-width: 1199.98px) {
  .dn-difficulty { min-width: 0; padding-bottom: 200px; }
}
@media (max-width: 809.98px) {
  .dn-difficulty { flex-direction: column; align-items: center; padding: 120px 0 80px; }
  .dn-difficulty-inner { width: 100%; }
  .dn-difficulty-intro { padding: 0 16px; }
  .dn-difficulty-eyebrow-fixed { font-size: 16px; }
  .dn-difficulty-store { height: 259px; border-radius: 8px; }
  .dn-difficulty-store img { object-fit: contain; }
  .dn-difficulty-background { width: 100%; padding: 0 16px; }
  .dn-difficulty-text { font-size: 16px; }
  .dn-difficulty-case:first-child { width: 100%; }
  .dn-difficulty-case .dn-difficulty-text { width: 100%; }
  .dn-difficulty-subtitle { font-size: 18px; }
  .dn-difficulty-subtitle span { width: 24px; height: 24px; }

  .dn-difficulty-cycle { width: 358px; height: 356px; }
  .dn-difficulty-label { font-size: 16px; white-space: pre; }
  .dn-difficulty-label--tl { top: 12px; left: 14px; width: auto; text-align: left; }
  .dn-difficulty-label--tr { top: 12px; left: 292px; right: auto; text-align: right; }
  .dn-difficulty-label--br { top: auto; bottom: 33px; left: 292px; width: auto; height: auto; justify-content: flex-end; text-align: right; }
  .dn-difficulty-label--bl { top: auto; bottom: 33px; left: 14px; right: auto; text-align: left; }
  .dn-difficulty-ring { top: calc(49.9492% - 147.8px); left: 8.325%; width: 83%; height: 296px; }
  .dn-difficulty-pills { top: 72px; left: 51px; gap: 7.8px; }
  .dn-difficulty-pill { width: 197px; height: 68px; border-radius: 76px; font-size: 16px; }
  .dn-difficulty-pill--search { padding: 9px 12px 0; }
  .dn-difficulty-pill--gaze { padding: 0 17.4px; }
  .dn-difficulty-eyes { gap: 2.4px; }
  .dn-difficulty-plus { width: 29px; height: 29px; }
}


/* ── PROBLEM: 얼마나 많은 사람이 (Frame 1261159944) ──
   기본 = 1200–1919, ≥1920·≤1199(태블릿+모바일)·<810 순으로 덮는다. 줄높이는 라이브(Framer)와 같은 % 표기. */
.dn-population {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1200px;
  padding: 180px 0;
}
.dn-population-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.dn-population-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 680px;
}
.dn-population-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dn-population-head .dn-title { color: #fff; }

.dn-population-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dn-population-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px;
  border-radius: 24px;
  background: #f4f6f8;
  text-align: center;
}
.dn-population-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; height: 307px; }
.dn-population-total { width: 729px; font-size: 30px; font-weight: 700; line-height: 150%; }
.dn-population-total > span { line-height: 150%; }
.dn-population-total-gap, .dn-population-total-rate { font-size: 32px; }
.dn-population-total-rate, .dn-population-total-gap2 { color: var(--dn-blue); }
.dn-population-total-gap2 { font-weight: 500; }
.dn-population-total-note { font-weight: 600; }

.dn-population-groups { position: relative; flex: none; width: 729px; height: 232px; overflow: hidden; }
.dn-population-icons {
  position: absolute;
  top: 12px;
  left: calc(49.9314% - 310px);
  width: 620px;
  height: 121px;
  background: url("/assets/donation/population-icons.svg") 0 0 / 100% 100%;
  image-rendering: pixelated;
}
.dn-population-group { position: absolute; top: 146px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.dn-population-group--disabled { left: 25px; width: 180px; }
.dn-population-group--family { left: 226px; width: 277px; }
.dn-population-group--senior { left: 531px; width: 180px; }
.dn-population-group-label { flex: none; font-size: 22px; font-weight: 600; line-height: 140%; white-space: nowrap; }
.dn-population-group--family .dn-population-group-label { font-size: 24px; }
.dn-population-group-count { font-size: 32px; font-weight: 700; line-height: 140%; color: #176acc; }
.dn-population-narrow { display: none; }

.dn-population-and { font-size: 24px; line-height: 150%; }
.dn-population-people { width: 729px; font-size: 28px; line-height: 150%; }
.dn-population-source { font-size: 20px; line-height: 140%; color: #9c9c9c; text-align: right; white-space: nowrap; }

.dn-population-future { display: flex; flex-direction: column; align-items: center; gap: 104px; color: #fff; text-align: center; }
.dn-population-message { display: flex; flex-direction: column; align-items: center; align-self: stretch; gap: 20px; overflow: hidden; }
.dn-population-us { position: relative; flex: none; width: 477px; height: 117px; }
.dn-population-circle {
  position: absolute;
  bottom: 5px;
  left: 373px;
  width: 84px;
  height: 51px;
  border: 7px solid #176acc;
  border-radius: 100%;
}
.dn-population-us-text {
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dn-population-further { width: 466px; font-size: 32px; line-height: 150%; }
.dn-population-aging { width: 507px; font-size: 32px; font-weight: 700; line-height: 140%; }
.dn-population-need { position: relative; flex: none; width: 100%; height: 134px; }
.dn-population-underline { position: absolute; background: #176acc; }
.dn-population-underline--1 { top: 45px; left: calc(50% - 150px); width: 300px; height: 10px; }
.dn-population-underline--2 { bottom: 10px; left: calc(50% - 286px); width: 572px; height: 11px; }
.dn-population-need-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: 700;
  line-height: 140%;
  white-space: nowrap;
}

.dn-population-cta { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dn-population-cta-button { position: relative; z-index: 1; }
.dn-population-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  padding: 20px 160px;
  border-radius: 10px;
  background: var(--dn-blue);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 140%;
  white-space: nowrap;
  text-decoration: none;
}
.dn-population-bomb { position: absolute; z-index: 1; top: -85px; left: 485px; width: 114px; height: 137px; transform: rotate(16deg); pointer-events: none; }
.dn-population-bomb img { position: absolute; top: 25px; left: 12px; width: 108px; height: 108px; object-fit: cover; transform: rotate(-16deg); }
.dn-population-join { font-size: 24px; font-weight: 500; line-height: 140%; white-space: nowrap; }

@media (min-width: 1920px) {
  .dn-population-figure { height: 314px; }
}
@media (max-width: 1199.98px) {
  .dn-population { min-width: 0; padding: 140px 48px; }
  .dn-population-inner { flex: 1 0 0; width: 1px; }
  .dn-population-stats, .dn-population-card, .dn-population-people { width: 100%; }
  .dn-population-figure { height: 314px; }
}
@media (max-width: 809.98px) {
  .dn-population { flex-direction: column; min-width: 0; padding: 80px 16px; }
  .dn-population-inner { flex: none; }
  .dn-population-inner, .dn-population-stats, .dn-population-card, .dn-population-people,
  .dn-population-future, .dn-population-message, .dn-population-cta, .dn-population-cta-button, .dn-population-btn { width: 100%; }
  .dn-population-message { align-self: auto; }
  .dn-population-card { padding: 30px 20px; border-radius: 8px; }
  .dn-population-figure { gap: 8px; height: auto; }
  .dn-population-total { width: auto; font-size: 18px; white-space: nowrap; }
  .dn-population-total-label { font-size: 30px; }
  .dn-population-total-rate, .dn-population-total-gap2 { font-size: 22px; }
  .dn-population-groups { width: 353px; height: 191px; }
  .dn-population-icons { top: 9px; left: calc(49.8584% - 225px); width: 450px; height: 88px; background-image: url("/assets/donation/population-icons-mobile.svg"); }
  .dn-population-group { top: 107px; gap: 8px; width: auto; }
  .dn-population-group--disabled { left: 13px; }
  .dn-population-group--family { left: 138px; }
  .dn-population-group--senior { left: 259px; }
  .dn-population-group-label { font-size: 16px; }
  .dn-population-group--disabled .dn-population-group-label,
  .dn-population-group--senior .dn-population-group-label { display: flex; align-items: center; height: 39px; }
  .dn-population-group--family .dn-population-group-label { font-size: 14px; }
  .dn-population-wide { display: none; }
  .dn-population-narrow { display: block; }
  .dn-population-group-count { font-size: 20px; }
  .dn-population-and { font-size: 14px; }
  .dn-population-people { font-size: 18px; }
  .dn-population-source { font-size: 13px; }
  .dn-population-us { width: 100%; height: 86px; }
  .dn-population-circle { bottom: 10px; left: 286px; width: 49px; height: 30px; border-width: 3px; }
  .dn-population-us-text { gap: 0; width: 106%; }
  .dn-population-further, .dn-population-aging { width: 100%; font-size: 24px; }
  .dn-population-need { height: 72px; }
  .dn-population-underline--1 { top: 20px; left: calc(49.7207% - 80.7614px); width: 162px; height: 10px; }
  .dn-population-underline--2 { bottom: 8px; left: calc(50% - 154.5px); width: 309px; height: 11px; }
  .dn-population-need-text { font-size: 24px; }
  .dn-population-btn { padding: 16px 160px; font-size: 22px; }
  .dn-population-bomb { top: -50px; right: -8px; left: auto; width: 85px; height: 99px; }
  .dn-population-bomb img { top: auto; bottom: 23px; left: 47%; width: 70px; height: 70px; transform: translateX(-50%) rotate(-16deg); }
  .dn-population-join { font-size: 13px; }
}


/* ── SOLUTION: 이동을 쉽게 만드는 방법 (Frame 1261159727) ──
   기본 = 1200–1919, ≥1920·≤1199(태블릿+모바일)·<810 순으로 덮는다. */
.dn-solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 1200px;
  padding: 180px 0 240px;
  background: #e0efff;
  overflow: hidden;
}
.dn-solution-inner { display: flex; flex-direction: column; align-items: center; gap: 120px; width: 100%; max-width: 1038px; }
.dn-solution-head { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 446px; }
.dn-solution-heading { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.dn-solution .dn-title { white-space: nowrap; }
.dn-solution-lead { font-size: 28px; line-height: 150%; text-align: center; white-space: pre; }

.dn-solution-pillars { display: flex; flex-direction: column; gap: 48px; width: min-content; }
.dn-solution-pillar { position: relative; display: flex; justify-content: center; align-items: center; gap: 100px; width: min-content; }
.dn-solution-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  flex: none;
  width: 345px;
  padding: 32px 62px 32px 40px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}
.dn-solution-card-label { font-size: 18px; font-weight: 700; line-height: 160%; color: #0e63d3; text-transform: uppercase; white-space: nowrap; }
.dn-solution-card-text { width: 326px; }
.dn-solution-card-sub { font-size: 22px; line-height: 140%; }
.dn-solution-card-sub--medium { font-weight: 500; }
.dn-solution-card-name { font-size: 28px; font-weight: 700; line-height: 140%; }
/* 카드와 사진을 잇는 노란 점선 */
.dn-solution-connector {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 347px;
  width: 116px;
  height: 28px;
  transform: translateY(-50%);
  background: url("/assets/donation/solution-connector-tech.svg") 0 0 / 100% 100%;
  image-rendering: pixelated;
}
.dn-solution-pillar--friend .dn-solution-connector { left: 494px; background-image: url("/assets/donation/solution-connector-friendship.svg"); }
.dn-solution-photo { display: flex; flex: none; overflow: hidden; }
.dn-solution-photo img { width: 508px; aspect-ratio: 1.5875; object-fit: contain; }

@media (min-width: 1920px) {
  .dn-solution .dn-title { font-size: 48px; }
  .dn-solution-pillars, .dn-solution-pillar { width: 100%; }
  .dn-solution-card { width: 427px; }
  .dn-solution-card-label { font-size: 20px; }
  .dn-solution-card-sub { font-size: 24px; }
  .dn-solution-card-name { font-size: 32px; }
  .dn-solution-connector { left: 47%; transform: translate(-50%, -50%); }
  .dn-solution-pillar--friend .dn-solution-connector { left: 53%; }
}
@media (max-width: 1199.98px) {
  .dn-solution { min-width: 0; padding: 180px 48px 240px; }
  .dn-solution-inner { max-width: none; gap: 100px; }
  .dn-solution-lead { font-size: 24px; }
  .dn-solution-pillars { gap: 100px; width: 100%; }
  .dn-solution-pillar { flex-direction: column; gap: 0; width: 100%; }
  .dn-solution-card { position: absolute; z-index: 1; bottom: -39px; left: 0; width: 314px; padding: 20px 30px; }
  .dn-solution-pillar--friend .dn-solution-card { bottom: -42px; left: auto; right: -7px; }
  .dn-solution-card-text { width: auto; white-space: nowrap; }
  .dn-solution-card-sub { font-size: 20px; }
  .dn-solution-connector { display: none; }
  .dn-solution-photo { width: 100%; }
  .dn-solution-pillar--tech .dn-solution-photo { max-width: 810px; }
  .dn-solution-photo img { flex: 1 0 0; width: 1px; }
  .dn-solution-pillar--tech .dn-solution-photo img { aspect-ratio: 1.5883; }
}
@media (max-width: 809.98px) {
  .dn-solution { padding: 120px 16px; }
  .dn-solution-inner { gap: 60px; }
  .dn-solution-lead { font-size: 16px; }
  .dn-solution-card { gap: 4px; width: 224px; padding: 20px; border-radius: 8px; }
  .dn-solution-card-label { font-size: 13px; }
  .dn-solution-card-sub { font-size: 16px; }
  .dn-solution-card-name { font-size: 20px; }
}


/* ── solution - Technology: 계단뿌셔클럽 앱 서비스 (Frame 1261159743) ──
   기본 = 1200–1919, ≥1920·≤1199(태블릿+모바일)·<810 순으로 덮는다. */
.dn-tech {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  min-width: 1200px;
  padding: 160px 0;
  background: linear-gradient(#fff 0%, #ebf4ff 100%);
  overflow: hidden;
}
.dn-tech-inner { display: flex; flex-direction: column; align-items: center; gap: 48px; width: min-content; }
.dn-tech-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dn-tech .dn-eyebrow { color: var(--dn-blue-deep); }
.dn-tech-heading { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; text-align: center; }
.dn-tech-sub { font-size: 32px; font-weight: 500; line-height: 130%; white-space: nowrap; }
.dn-tech .dn-title { white-space: nowrap; }

.dn-tech-body { display: flex; align-items: center; gap: 22px; }
.dn-tech-phone { flex: none; width: 491px; aspect-ratio: 0.542242; object-fit: cover; }
.dn-tech-features { display: flex; flex-direction: column; gap: 48px; width: 457px; margin: 0; padding: 0; list-style: none; }
.dn-tech-feature { display: flex; flex-direction: column; gap: 8px; }
.dn-tech-feature-head { display: flex; align-items: center; gap: 8px; height: 51px; }
.dn-tech-num {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 56px;
  background: var(--dn-blue-deep);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 160%;
}
.dn-tech-feature-title { font-size: 28px; font-weight: 700; line-height: 160%; color: var(--dn-blue-deep); white-space: nowrap; }
.dn-tech-feature-desc { width: 457px; min-height: 27px; padding-left: 35px; font-size: 24px; line-height: 150%; white-space: pre-wrap; }

/* 후기 카드 (데스크톱 2장 / 태블릿·모바일 슬라이드 공용) */
.dn-review {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 40px;
  width: 473px;
  padding: 28px;
  border-radius: 24px;
  background: url("/assets/donation/review-card-bg.png") 0 0 / 100% 100%;
  overflow: hidden;
}
.dn-review-body { display: flex; flex: none; flex-direction: column; gap: 8px; }
.dn-review-title { height: 38px; font-size: 22px; font-weight: 700; line-height: 160%; white-space: nowrap; }
.dn-review-text { width: 415px; height: 230px; object-fit: contain; }
.dn-review--knee .dn-review-text { object-position: 0% 50%; }
.dn-review-author { display: flex; flex: none; align-items: center; gap: 20px; }
.dn-review-avatar { flex: none; width: 60px; height: 60px; border-radius: 90px; }
.dn-review-name { flex: none; width: 203px; height: 31px; object-fit: contain; }
.dn-review--knee .dn-review-name { width: 158px; height: 24px; }
.dn-tech-reviews { display: flex; align-items: center; gap: 28px; }
.dn-tech-slider { display: none; }

@media (min-width: 1920px) {
  .dn-tech-inner { gap: 86px; width: 1088px; }
}
@media (max-width: 1199.98px) {
  .dn-tech { gap: 120px; padding: 160px 48px; }
  .dn-tech-inner { gap: 86px; width: 1088px; }
  .dn-tech-body { flex-direction: column; gap: 40px; }
  .dn-tech-reviews { display: none; }
  /* Framer 슬라이드쇼와 같은 구조: 가운데 칸(view) 안에서 트랙을 translateX 로 움직인다. 동작은 zz-tech.html */
  .dn-tech-slider { display: flex; justify-content: center; align-items: flex-start; width: 100%; background: #ecf5ff; overflow: hidden; }
  .dn-tech-slider-view { position: relative; flex: none; width: 473px; height: 400px; }
  .dn-tech-slider-track { display: flex; align-items: center; gap: 32px; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; user-select: none; }
  .dn-tech-slider .dn-review { width: 100%; height: 100%; }
  .dn-tech-slider img { pointer-events: none; -webkit-user-drag: none; }
  .dn-tech-slider .dn-review--knee { justify-content: space-between; }
  .dn-tech-slider .dn-review-text { width: 416px; height: 201px; }
  .dn-tech-slider .dn-review--knee .dn-review-text { height: 186px; }
}
@media (max-width: 809.98px) {
  .dn-tech { gap: 60px; min-width: 0; padding: 120px 16px; }
  .dn-tech-inner { gap: 48px; width: 100%; }
  .dn-tech-head { width: 100%; }
  .dn-tech-sub { font-size: 22px; }
  .dn-tech-body { align-items: flex-start; width: 100%; }
  .dn-tech-phone { width: 100%; }
  .dn-tech-features { gap: 24px; width: 100%; }
  .dn-tech-feature-head { height: auto; }
  .dn-tech-num { width: 24px; height: 24px; }
  .dn-tech-feature-title { font-size: 18px; }
  .dn-tech-feature-desc { width: auto; font-size: 16px; white-space: pre; }
  .dn-tech-slider-view { width: 338px; height: 280px; }
  .dn-tech-slider-track { gap: 20px; }
  .dn-tech-slider .dn-review { gap: 24px; padding: 20px; border-radius: 8px; }
  .dn-tech-slider .dn-review-title { height: auto; font-size: 18px; }
  .dn-tech-slider .dn-review-text { width: 260px; height: 152px; }
  .dn-tech-slider .dn-review--knee .dn-review-text { width: 230px; height: 142px; }
  .dn-tech-slider .dn-review-author { gap: 12px; }
  .dn-tech-slider .dn-review-avatar { width: 24px; height: 24px; }
  .dn-tech-slider .dn-review-name { width: 131px; height: 20px; }
  .dn-tech-slider .dn-review--knee .dn-review-name { width: 100px; height: 15.19px; }
}


/* ── solution-Friendship: 크러셔 클럽 커뮤니티 (Frame 1261159746) ──
   기본 = 1200–1919(≥1920 도 같다), ≤1199(태블릿+모바일)·<810 순으로 덮는다. */
.dn-friendship {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1200px;
  padding: 168px 0;
  background: linear-gradient(#fff 0%, #ebf4ff 100%);
  overflow: hidden;
}
.dn-friendship-inner { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; gap: 80px; width: 1px; overflow: hidden; }
.dn-friendship-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dn-friendship .dn-eyebrow { color: var(--dn-blue-deep); }
.dn-friendship-heading { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; text-align: center; }
.dn-friendship-sub { font-size: 32px; font-weight: 500; line-height: 130%; white-space: nowrap; }
.dn-friendship .dn-title { white-space: nowrap; }
.dn-friendship-narrow, .dn-friendship-why-list.dn-friendship-narrow { display: none; }

.dn-friendship-content { display: flex; flex-direction: column; align-items: center; gap: 120px; width: 100%; }
.dn-friendship-crew { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; overflow: hidden; }
.dn-friendship-intro { display: flex; flex: none; align-items: center; gap: 23px; }
.dn-friendship-photo { flex: none; width: 509px; height: 443px; border-radius: 24px; object-fit: fill; }
.dn-friendship-points { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.dn-friendship-point { display: flex; flex-direction: column; gap: 8px; width: 462px; }
.dn-friendship-point-head { display: flex; align-items: center; gap: 8px; height: 51px; }
.dn-friendship-num {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  border-radius: 56px;
  background: #0e63d3;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 160%;
}
.dn-friendship-point-title { font-size: 24px; font-weight: 700; line-height: 160%; color: #0e63d3; white-space: nowrap; }
.dn-friendship-point-desc { min-height: 27px; padding-left: 35px; font-size: 20px; line-height: 150%; white-space: pre; }

/* 멤버 한마디: 데스크톱은 말풍선 svg, 태블릿·모바일은 흰 카드 */
.dn-friendship-quote { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; align-self: stretch; overflow: hidden; }
.dn-friendship-bubble { flex: none; width: 887px; height: 280px; }
.dn-friendship-quote-content {
  position: absolute;
  z-index: 1;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dn-friendship-quote-title { font-size: 24px; font-weight: 700; line-height: 160%; white-space: nowrap; }
.dn-friendship-quote-text { width: 804px; height: 129px; object-fit: contain; }

.dn-friendship-why-wrap { position: relative; display: flex; flex-direction: column; align-items: center; width: 1104px; }
.dn-friendship-why { display: flex; flex-direction: column; gap: 24px; width: 888px; padding: 40px; border-radius: 24px; background: #fff; }
.dn-friendship-why-title { font-size: 24px; font-weight: 700; line-height: 160%; color: #176acc; white-space: nowrap; }
.dn-friendship-why-list { display: flex; flex-direction: column; gap: 15px; width: 100%; overflow: hidden; }
.dn-friendship-why-list ol { position: relative; margin: 0; padding: 0; list-style: none; font-size: 20px; font-weight: 700; line-height: 170%; white-space: pre; }
.dn-friendship-why-list li { padding-left: 2ch; }
.dn-friendship-why-list li::before { content: counter(list-item) "."; position: absolute; left: 0; font-variant-numeric: tabular-nums; }
.dn-friendship-why-list li p { font-weight: 400; }
.dn-friendship-badge { position: absolute; z-index: 1; top: -85px; left: 861px; width: 209px; height: 209px; transform: rotate(7deg); }

@media (max-width: 1199.98px) {
  .dn-friendship { min-width: 0; padding: 160px 48px; }
  .dn-friendship-content { gap: 180px; }
  .dn-friendship-crew { gap: 60px; width: 100%; height: 1191px; padding-bottom: 20px; }
  .dn-friendship-intro { flex-direction: column; gap: 40px; }
  .dn-friendship-photo { width: 678px; object-fit: cover; }
  .dn-friendship-quote { align-self: auto; order: 1; width: 524px; height: 286px; border-radius: 24px; background: #fff; box-shadow: 0 0 10px #1d85ff33; }
  .dn-friendship-bubble { display: none; }
  .dn-friendship-quote-content { top: 32px; left: 45%; }
  .dn-friendship-quote-title { font-size: 20px; }
  .dn-friendship-quote-text { width: 402px; height: 180px; }
  .dn-friendship-why-wrap, .dn-friendship-why { width: 100%; }
  .dn-friendship-why-list ol { white-space: pre-wrap; }
  .dn-friendship-badge { top: -100px; left: auto; right: 0; width: 166px; height: 166px; }
}
@media (max-width: 809.98px) {
  .dn-friendship { flex-direction: column; min-width: 0; padding: 120px 16px; }
  .dn-friendship-inner { flex: none; gap: 48px; width: 100%; }
  .dn-friendship-sub { font-size: 22px; }
  .dn-friendship-heading { gap: 4px; }
  .dn-friendship-wide { display: none; }
  .dn-friendship-narrow { display: block; }
  .dn-friendship-why-list.dn-friendship-narrow { display: flex; }
  .dn-friendship-content { gap: 0; }
  .dn-friendship-crew { gap: 40px; width: 100%; height: 895px; padding-bottom: 0; }
  .dn-friendship-intro { flex-direction: column; gap: 40px; width: 100%; }
  .dn-friendship-photo { width: 357px; height: 233px; border-radius: 8px; object-fit: cover; }
  .dn-friendship-points { gap: 24px; width: 100%; }
  .dn-friendship-point:last-child { width: 100%; }
  .dn-friendship-point-head { height: auto; }
  .dn-friendship-num { width: 24px; height: 24px; }
  .dn-friendship-point-title { font-size: 18px; }
  .dn-friendship-point-desc { font-size: 16px; }
  .dn-friendship-point:last-child .dn-friendship-point-desc { white-space: pre-wrap; }
  .dn-friendship-quote { align-self: auto; width: 328px; height: 163px; border-radius: 24px; background: #fff; box-shadow: 0 0 10px #1d85ff33; }
  .dn-friendship-bubble { display: none; }
  .dn-friendship-quote-content { gap: 4px; top: 21px; left: 39%; }
  .dn-friendship-quote-title { font-size: 14px; }
  .dn-friendship-quote-text { width: 214px; height: 95px; }
  .dn-friendship-why-wrap, .dn-friendship-why { width: 100%; }
  .dn-friendship-why { gap: 8px; padding: 12px; border-radius: 8px; }
  .dn-friendship-why-title { font-size: 18px; }
  .dn-friendship-why-head { display: flex; gap: 8px; }
  .dn-friendship-why-num { flex: none; font-size: 16px; font-weight: 700; line-height: 160%; }
  .dn-friendship-why-point { flex: 1 0 0; font-size: 15px; font-weight: 700; line-height: 170%; white-space: pre-wrap; }
  .dn-friendship-why-desc { padding-left: 20px; font-size: 15px; line-height: 160%; white-space: pre-wrap; }
  .dn-friendship-why-desc--loose { line-height: 170%; }
  .dn-friendship-badge { top: -93px; right: auto; left: 243px; width: 105px; height: 105px; }
}


/* 구간마다 라이브 DOM 의 문구 노드 구성이 달라서(줄바꿈 위치 등) 블록을 따로 두고 토글한다 — 섹션 6~8 공용 */
.dn-about .dn-only-m, .dn-impact .dn-only-m, .dn-support .dn-only-m, .dn-about .dn-only-1920 { display: none; }
@media (min-width: 1920px) {
  .dn-about .dn-only-1920 { display: revert; }
  .dn-about .dn-only-desk { display: none; }
}
@media (max-width: 809.98px) {
  .dn-about .dn-only-m, .dn-impact .dn-only-m, .dn-support .dn-only-m { display: revert; }
  .dn-about .dn-only-wide, .dn-impact .dn-only-wide, .dn-support .dn-only-wide { display: none; }
}

/* ── WHO WE ARE: 소개 + 연혁 + 함께하기 ── */
.dn-about { padding: 124px 0; background: #fff; color: #000; }
.dn-about-inner { display: flex; flex-direction: column; align-items: center; gap: 70px; }
.dn-about-head { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 520px; }
.dn-about-intro { display: flex; align-items: center; gap: 29px; }
.dn-about-photo { width: 422px; aspect-ratio: 422 / 347; border-radius: 24px; }
/* 라이브처럼 줄 끝 공백을 살리고(가운데 정렬 위치가 공백만큼 밀린다) 상자는 가장 긴 줄 폭에 맞춘다 */
.dn-about-text { width: max-content; font-size: 22px; line-height: 150%; white-space: pre; }

/* 연혁 카드 */
.dn-about-tl { position: relative; width: 100%; overflow: hidden; }
.dn-about-tl-track { position: absolute; overflow: hidden; }
.dn-tl-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 32px;
  background: #f6f6f6;
  border-radius: 20px;
  white-space: nowrap;
}
.dn-tl-card--right { align-items: flex-end; text-align: right; }
.dn-tl-card p { font-size: 24px; line-height: 1.5em; letter-spacing: -0.005em; }
.dn-tl-card .dn-tl-year { font-size: 24px; font-weight: 700; line-height: 120%; letter-spacing: 0; color: #0e63d3; }
.dn-tl-card a { color: #0e64d3; text-decoration: underline; text-decoration-thickness: 1px; }
.dn-tl-card strong { font-family: var(--dn-inter); font-weight: 700; }
.dn-tl-2023, .dn-tl-2024, .dn-tl-2025 { z-index: 1; }
.dn-tl-2024, .dn-tl-2025 { gap: 15px; }
.dn-tl-pole, .dn-tl-pole-m { position: absolute; top: 0; object-fit: contain; }

/* 데스크톱 1200–1919: 1111px 트랙에 절대 배치 (라이브 좌표 그대로) */
.dn-about-tl--desktop { height: 1146px; }
.dn-about-tl--desktop .dn-about-tl-track { left: calc(50.16523% - 555.483px); top: 13px; width: 1111px; height: 1164px; }
/* 좌표는 라이브 실측. 라이브처럼 일부 카드는 transform 으로 옮긴다 — 레이아웃 반올림이 없어 글자 래스터가 달라진다 */
.dn-about-tl--desktop .dn-tl-2021 { left: 157px; top: 40px; width: 350px; }
.dn-about-tl--desktop .dn-tl-2022 { left: 568px; top: 173px; }
.dn-about-tl--desktop .dn-tl-2023 { left: 125px; top: 477.25px; width: 382px; transform: translateY(-130.398px); }
.dn-about-tl--desktop .dn-tl-2024 { left: 570px; top: 558.2032px; }
.dn-about-tl--desktop .dn-tl-2025 { left: 65.1875px; top: 838px; padding: 20px 30px; }
.dn-about-tl--desktop .dn-tl-pole { left: 455.75px; width: 155.06px; height: 1208px; }
.dn-about-tl--compact, .dn-about .dn-tl-pole-m { display: none; }

/* 함께하기 CTA */
.dn-about-cta { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dn-about-cta-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  padding: 20px 0;
  border-radius: 8px;
  background: var(--dn-blue);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
}
.dn-about-cta-btn img { position: absolute; z-index: 1; left: 9px; top: -49px; width: 167px; aspect-ratio: 487 / 259; }
.dn-about-cta p { font-size: 24px; font-weight: 500; line-height: 140%; }

/* ≥1920: 트랙이 넓어지고 2024·2025 문구가 한 줄 */
@media (min-width: 1920px) {
  .dn-about-tl--desktop { height: 1142px; }
  .dn-about-tl--desktop .dn-about-tl-track { left: calc(50.3125% - 724px); top: 11px; width: 1448px; } /* 라이브가 폭에 비례해 살짝 오른쪽으로 밀린다 */
  .dn-about-tl--desktop .dn-tl-2021 { left: 331px; top: 31px; }
  .dn-about-tl--desktop .dn-tl-2022 { left: 760px; top: 162px; }
  .dn-about-tl--desktop .dn-tl-2023 { left: 296px; top: 465.594px; }
  .dn-about-tl--desktop .dn-tl-2024 { left: 760px; top: 539.2032px; }
  .dn-about-tl--desktop .dn-tl-2025 { left: 126px; top: 815px; }
  .dn-about-tl--desktop .dn-tl-pole { left: 647.88px; top: -8px; width: 152.23px; height: 1186px; }
}

/* 태블릿 810–1199 */
@media (max-width: 1199.98px) {
  .dn-about { padding: 124px 48px; }
  .dn-about .dn-eyebrow { font-size: 16px; }
  .dn-about .dn-title { font-size: 40px; }
  .dn-about-inner, .dn-about-intro { width: 100%; }
  .dn-about-intro { flex-direction: column; }
  .dn-about-photo { width: 100%; aspect-ratio: 1.21616; } /* 라이브 태블릿 실측 비율(1103×906.95) */
  .dn-about-text { text-align: center; }

  .dn-about-tl--desktop { display: none; }
  .dn-about-tl--compact { display: block; width: 784px; height: 1229px; }
  .dn-about-tl--compact .dn-about-tl-track { left: 3px; top: 0; width: 783px; height: 1251px; }
  .dn-tl-card { gap: 12px; padding: 12px 20px; z-index: 1; }
  .dn-tl-2024, .dn-tl-2025 { gap: 15px; }
  .dn-tl-card p { font-size: 20px; line-height: 1.8em; }
  .dn-tl-card .dn-tl-year { font-size: 24px; }
  .dn-tl-note { color: #0e64d3; }
  .dn-tl-card .dn-tl-note-t { font-size: 18px; line-height: 2em; letter-spacing: -0.1px; color: #0e64d3; }
  .dn-about-tl--compact .dn-tl-2021 { left: 87px; top: 39px; }
  .dn-about-tl--compact .dn-tl-2022 { left: 427px; top: 183px; width: 259.75px; }
  .dn-about-tl--compact .dn-tl-2023 { left: 234.891px; top: 367px; transform: translateX(-129.016px); }
  .dn-about-tl--compact .dn-tl-2024 { left: 428px; top: 579px; }
  .dn-about-tl--compact .dn-tl-2025 { left: 187.906px; top: 875px; transform: translateX(-177.008px); }
  .dn-about-tl--compact .dn-tl-pole { z-index: 1; left: 313.73px; width: 20%; height: 1251px; }
}

/* 모바일 <810: 깃대 오른쪽에 카드 세로 나열 */
@media (max-width: 809.98px) {
  .dn-about { padding: 120px 16px 80px; }
  .dn-about-inner { gap: 48px; }
  .dn-about-head { width: 100%; }
  .dn-about .dn-eyebrow { font-size: 13px; }
  .dn-about .dn-title { font-size: 28px; }
  .dn-about-photo { aspect-ratio: 422 / 347; border-radius: 8px; }
  .dn-about-text { font-size: 16px; }

  /* 라이브는 1040px 상자 안에서 가운데(2px 위). transform 이 아니라 레이아웃으로 놓아야 글자 래스터가 같다 */
  .dn-about-tl--compact { display: flex; justify-content: center; align-items: center; width: 100%; height: 1040px; }
  .dn-about-tl--compact .dn-about-tl-track {
    position: relative;
    left: auto;
    top: -2px;
    flex-shrink: 0;
    width: 295px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 20px 45px 0 63px;
  }
  .dn-about-tl--compact .dn-tl-card { position: static; width: auto; transform: none; gap: 6px; padding: 12px 10px; border-radius: 8px; align-items: flex-start; text-align: left; }
  .dn-tl-card p { font-size: 13px; line-height: 1.8em; }
  .dn-tl-card .dn-tl-year { font-size: 16px; }
  .dn-tl-card .dn-tl-note-t { font-size: 13px; line-height: 1.8em; letter-spacing: -0.005em; color: inherit; }
  .dn-tl-card .dn-tl-note.dn-tl-note-t { color: #0e64d3; }
  .dn-tl-pre { white-space: pre-wrap; } /* 모바일만 줄 끝 공백이 있다 */
  .dn-about-tl--compact .dn-tl-pole { display: none; }
  .dn-about .dn-tl-pole-m { display: block; left: 0; width: auto; height: 1024px; }

  .dn-about-cta { gap: 12px; }
  .dn-about-cta-btn { width: 358px; flex-shrink: 0; padding: 16px 0; font-size: 22px; }
  .dn-about-cta-btn img { left: 6px; top: -44px; width: 125px; }
  .dn-about-cta p { font-size: 14px; }
}

/* ── /g-boosters 연혁 (2024년까지, 구버전 레이아웃) ── */
.dn-gtl { position: relative; width: 100%; height: 1041px; overflow: hidden; }
.dn-gtl-track { position: absolute; left: calc(51.7708% - 459.008px); top: 8px; width: 918px; height: 903px; overflow: hidden; } /* 라이브 위치가 화면폭에 비례(51.7%)해 움직인다 */
.dn-gtl-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 32px;
  background: #f6f6f6;
  border-radius: 20px;
  white-space: nowrap;
}
.dn-gtl-card--right { align-items: flex-end; text-align: right; }
.dn-gtl-card p { font-size: 20px; line-height: 1.8em; }
.dn-gtl-card .dn-gtl-year { font-size: 24px; font-weight: 700; line-height: 120%; color: #0e63d3; }
.dn-gtl-card .dn-gtl-tight { line-height: 150%; }
.dn-gtl-card .dn-gtl-loose { line-height: 200%; }
.dn-gtl-dim { color: rgba(0, 0, 0, 0.4); }
.dn-gtl-2023 strong { color: #0e63d3; }
.dn-gtl-lines { display: flex; flex-direction: column; gap: 4px; }
.dn-gtl-card .dn-gtl-note { line-height: 1.4em; }
.dn-gtl-note strong { color: #0e64d3; }
.dn-gtl-2024 { gap: 15px; }
.dn-gtl-2021 { left: 32px; top: 1px; width: 350px; }
.dn-gtl-2022 { left: 480px; top: 120px; width: 310.2657px; }
.dn-gtl-2023 { left: 0; top: 469.547px; width: 382px; transform: translateY(-130.398px); }
.dn-gtl-2024 { left: 479px; top: 562.2032px; width: 400.2344px; }
.dn-gtl-pole { position: absolute; top: 0; }
.dn-gtl .dn-gtl-pole--m { display: none; }
.dn-gtl-pole--d { left: 50%; width: 134px; height: 1043.89px; transform: translateX(-50%); object-fit: contain; }

@media (min-width: 1920px) {
  .dn-gtl-2022 { left: 461px; }
  .dn-gtl-2024 { left: 461px; }
}

@media (max-width: 1199.98px) {
  .dn-gtl { width: 714px; height: 998px; }
  .dn-gtl-track { left: 208px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; width: 382px; }
  .dn-gtl-card { position: static; width: 382px; transform: none; padding: 12px 20px; align-items: flex-start; text-align: left; }
  .dn-gtl-pole--d { left: 73px; top: -0.78px; width: 21%; height: 111%; transform: none; }
}

@media (max-width: 809.98px) {
  .dn-gtl { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 737px; }
  .dn-gtl-track { position: static; flex-shrink: 0; width: 300px; height: 733px; }
  .dn-gtl-card { width: 300px; border-radius: 8px; }
  .dn-gtl-card p { font-size: 15px; }
  .dn-gtl-card .dn-gtl-year { font-size: 16px; }
  .dn-gtl .dn-gtl-pole--d { display: none; }
  .dn-gtl .dn-gtl-pole--m { position: static; display: block; flex-shrink: 0; width: 13%; height: 737px; object-fit: cover; }
}


/* ── accomplishment: 임팩트 숫자 + 영상 + 수상 ── */
.dn-impact { display: flex; justify-content: center; padding: 180px 0; overflow: hidden; color: #000; }
.dn-impact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.dn-impact-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 47px; width: 888px; }
.dn-impact-head { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 517px; }
.dn-impact .dn-eyebrow { color: var(--dn-blue-deep); }
.dn-impact-body { display: flex; flex-direction: column; align-items: center; gap: 95px; width: 100%; }
.dn-impact-main { display: flex; flex-direction: column; align-items: center; gap: 52px; width: 100%; }
.dn-impact-summary { display: flex; flex-direction: column; align-items: center; gap: 50px; width: 100%; overflow: hidden; }

.dn-impact-stats {
  display: flex;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 30px;
  list-style: none;
  border-radius: 20px;
  background: rgba(231, 243, 255, 0.6);
  text-align: center;
}
.dn-impact-stats li { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 260px; padding: 20px; white-space: nowrap; }
/* 라이브 Inter 텍스트 프리셋: 대체 글리프(6·9 등)까지 같게. 모바일 라벨(Pretendard)에도 붙어 있다 */
.dn-impact .dn-impact-inter { font-family: var(--dn-inter); font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11"; }
.dn-impact-stat-label { font-size: 20px; font-weight: 700; line-height: 1.4em; letter-spacing: -0.1px; }
.dn-impact-stat-value { font-size: 40px; font-weight: 700; line-height: 1.4em; letter-spacing: -0.6px; color: var(--dn-blue); }
.dn-impact-stat-growth { font-size: 20px; font-weight: 500; line-height: 1.4em; letter-spacing: -0.1px; color: var(--dn-blue); }

.dn-impact-desc { flex-shrink: 0; width: 888px; font-size: 24px; line-height: 1.7em; letter-spacing: -0.005em; text-align: center; }

/* 썸네일 위에 유튜브(자동재생·음소거)를 덮는다. 틀은 썸네일 비율, iframe 은 라이브처럼 101% 높이로 위로 8px 넘친다 */
.dn-impact-video { position: relative; display: flex; width: 615px; aspect-ratio: 1845 / 3249; overflow: hidden; border-radius: 20px; background: #fff; }
.dn-impact-video img { width: 100%; height: 100%; object-fit: fill; }
.dn-impact-video iframe { position: absolute; left: 0; top: -8px; width: 100%; height: 101%; border: 0; }

.dn-impact-awards { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 860px; }
.dn-impact-awards-intro { font-size: 24px; line-height: 150%; text-align: center; }
.dn-impact-award-grid { display: grid; grid-template-columns: 415px 415px; grid-auto-rows: 1fr; gap: 40px 30px; margin: 0; padding: 0; list-style: none; }
.dn-impact-award-grid li { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 12px; }
.dn-impact-award-grid img { width: 100%; height: 280px; object-fit: cover; border-radius: 20px; }
.dn-impact-award-grid p { font-size: 24px; font-weight: 600; line-height: 1.4em; letter-spacing: -0.005em; text-align: center; }

/* 태블릿 810–1199: 컨테이너가 화면 폭을 따른다 */
@media (max-width: 1199.98px) {
  .dn-impact { padding: 180px 48px; }
  .dn-impact-inner { width: 100%; }
  .dn-impact .dn-eyebrow { font-size: 16px; }
  .dn-impact .dn-title { font-size: 40px; }
  .dn-impact-stats { justify-content: space-between; gap: 0; padding: 20px; }
  .dn-impact-stats li { flex: 1 1 0; min-width: 0; width: auto; gap: 4px; }
  .dn-impact-stat-value { font-size: 32px; letter-spacing: -0.5px; }
  .dn-impact-awards { width: 100%; }
  .dn-impact-award-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-impact-award-grid img { height: auto; aspect-ratio: 1.22144; } /* 810·1024·1199 에서 라이브 높이(279.98·367.59·439.23)와 레이아웃 단위까지 같은 값 */
}

/* 모바일 <810 */
@media (max-width: 809.98px) {
  .dn-impact { padding: 80px 16px; }
  .dn-impact-inner { gap: 40px; }
  .dn-impact-head { width: 100%; }
  .dn-impact .dn-eyebrow { font-size: 13px; }
  .dn-impact .dn-title { font-size: 28px; }
  .dn-impact-body { gap: 48px; }
  .dn-impact-main { gap: 25px; }
  .dn-impact-summary { gap: 24px; }
  .dn-impact-stats { padding: 12px; border-radius: 8px; }
  .dn-impact-stats li { gap: 0; }
  .dn-impact .dn-impact-stat-label { font-family: inherit; font-size: 12px; } /* 모바일 라벨만 Inter 가 아니다 */
  /* 라이브는 라벨 아래 6px 빈 문단(높이 8.406px)이 있다 */
  .dn-impact-stats .dn-impact-stat-value { margin-top: 8.41px; font-size: 16px; line-height: 1.3em; letter-spacing: -0.08px; }
  .dn-impact-stat-growth { font-size: 11px; letter-spacing: -0.275px; }
  .dn-impact-desc { font-size: 14px; }
  .dn-impact-desc strong { letter-spacing: -0.05em; }
  .dn-impact-video { width: 332px; border-radius: 30px; }
  .dn-impact-video iframe { top: 0; }
  .dn-impact-awards-intro { font-size: 13px; }
  .dn-impact-award-grid { gap: 20px; }
  .dn-impact-award-grid img { aspect-ratio: 415 / 280; border-radius: 8px; }
  .dn-impact-award-grid p { font-size: 13px; }
}

/* ── /g-boosters 임팩트 (구버전 수치·수상 목록, 전부 Pretendard) ── */
.dn-impact--g .dn-impact-stats { justify-content: center; width: 828px; }
.dn-impact--g .dn-impact-stats li { width: 240px; }
.dn-impact--g .dn-impact-stat-label { line-height: 140%; letter-spacing: 0; }
.dn-impact--g .dn-impact-stat-value { font-size: 36px; line-height: 140%; letter-spacing: 0; color: var(--dn-blue-deep); }
.dn-impact--g .dn-impact-desc { font-size: 22px; line-height: 170%; letter-spacing: 0; white-space: pre-wrap; }
.dn-impact--g .dn-impact-video { width: 377px; }
.dn-impact--g .dn-impact-video iframe { left: -4px; top: -2px; width: 102%; height: 101%; }
.dn-impact--g .dn-impact-awards-intro { font-size: 22px; }
.dn-impact--g .dn-impact-award-grid { gap: 30px; }
.dn-impact--g .dn-impact-award-grid p { font-size: 20px; line-height: 140%; letter-spacing: 0; white-space: pre; }
.dn-impact-hl { color: #0e63d3; }

@media (max-width: 1199.98px) {
  .dn-impact--g .dn-impact-stats { justify-content: space-between; width: 100%; }
  .dn-impact--g .dn-impact-stats li { width: auto; gap: 12px; }
  .dn-impact--g .dn-impact-desc { width: 100%; }
}

@media (max-width: 809.98px) {
  .dn-impact--g { padding: 120px 16px; }
  .dn-impact--g .dn-impact-main { gap: 52px; }
  .dn-impact--g .dn-impact-body { gap: 95px; }
  .dn-impact--g .dn-impact-stat-label { font-size: 15px; }
  .dn-impact--g .dn-impact-stats .dn-impact-stat-value { margin-top: 0; font-size: 18px; line-height: 140%; }
  .dn-impact--g .dn-impact-desc { font-size: 16px; }
  .dn-impact--g .dn-impact-desc strong { letter-spacing: 0; }
  .dn-impact--g .dn-impact-video { width: 332px; border-radius: 20px; }
  .dn-impact--g .dn-impact-video iframe { top: -2px; height: 102.032%; }
  .dn-impact--g .dn-impact-awards-intro { font-size: 16px; }
  .dn-impact--g .dn-impact-award-grid { gap: 20px; }
  .dn-impact--g .dn-impact-award-grid img { height: 137px; aspect-ratio: auto; }
  .dn-impact--g .dn-impact-award-grid p { font-size: 14px; }
}


/* ── SUPPORT: 후원이 필요한 이유 + 후원금 사용처 ── */
.dn-support { display: flex; justify-content: center; padding: 120px 0 140px; background: var(--dn-blue-deep); color: #fff; }
.dn-support-inner { display: flex; flex-direction: column; align-items: center; gap: 60px; width: 1100px; }
.dn-support-intro { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.dn-support-head { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 352px; }
.dn-support .dn-eyebrow { font-size: 24px; color: #ffd366; }
/* 라이브처럼 줄 끝 공백을 살린다 — 가운데 정렬 위치가 공백만큼 밀린다 */
.dn-support-lead, .dn-support-q p, .dn-support-uses p { white-space: pre-wrap; }
.dn-support-lead { width: 100%; font-size: 24px; line-height: 150%; text-align: center; }

.dn-support-usage { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.dn-support-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  width: 800px;
  padding: 48px 80px 60px;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  color: #000;
}
.dn-support-q { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; width: 688px; }
.dn-support-q h3 { font-size: 32px; font-weight: 700; line-height: 150%; color: var(--dn-blue-deep); }
.dn-support-q p { font-size: 22px; line-height: 150%; text-align: center; }
.dn-support-uses { display: grid; grid-template-columns: 280px 280px; align-items: center; gap: 50px; flex-shrink: 0; margin: 0; padding: 0; list-style: none; }
.dn-support-uses li { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
/* 2·4번은 라이브처럼 아이콘+제목을 제목 폭으로 감싼다 — 아이콘이 반 레이아웃 단위 어긋나 래스터가 달라진다 */
.dn-support-use-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dn-support-icon { position: relative; display: block; width: 120px; height: 120px; overflow: hidden; }
.dn-support-icon--tall { height: 121px; }
.dn-support-icon img { width: 100%; height: 100%; }
.dn-support-icon .dn-support-icon-crusher { position: absolute; left: 5px; top: 9px; width: 112px; height: 106px; }
.dn-support-uses h4 { margin: 0; font-size: 24px; font-weight: 700; line-height: 140%; letter-spacing: -0.02em; color: #111; }
.dn-support-uses p { font-size: 20px; line-height: 150%; letter-spacing: -0.02em; color: #3f3f45; }
.dn-support-note { padding-left: 20px; font-size: 24px; line-height: 150%; text-align: center; }

@media (max-width: 1199.98px) {
  .dn-support { padding: 120px 48px 140px; }
  .dn-support-inner { width: 100%; }
  .dn-support .dn-title { font-size: 40px; }
  .dn-support-lead { width: max-content; white-space: pre; } /* 태블릿은 가장 긴 줄 폭(≈544px)에 맞춘 상자 */
  .dn-support-card { width: 100%; }
}

@media (max-width: 809.98px) {
  .dn-support { padding: 60px 16px; }
  .dn-support-intro { width: 352px; flex-shrink: 0; }
  .dn-support .dn-eyebrow { font-size: 13px; }
  .dn-support .dn-title { font-size: 28px; }
  .dn-support-lead { width: 100%; font-size: 17px; }
  .dn-support-card { gap: 24px; padding: 32px 12px; border-radius: 8px; }
  .dn-support-q { width: 100%; }
  .dn-support-q h3 { font-size: 22px; }
  .dn-support-q p { font-size: 16px; }
  .dn-support-uses { grid-template-columns: 280px; }
  .dn-support-uses h4 { font-size: 18px; }
  .dn-support-uses p { font-size: 15px; }
  .dn-support-note { font-size: 13px; }
}
/* /g-boosters 는 모바일 상하 여백만 다르다 */
@media (max-width: 809.98px) { .dn-support--g { padding: 100px 16px; } }

/* ── plan: 후원으로 뿌셔나갈 목표 — /donation 은 2026 plan(.is-2026), /g-boosters 는 2025 plan(.is-2025) ──
   라이브는 구간마다 문단 구성이 다르다(줄바꿈·문구·이어 붙임). 같은 노드 구성을 위해 구간별 블록을 두고 display 로 고른다:
   -m = 모바일(<810), -t = 태블릿(810–1199), .dn-plan-desk/.dn-plan-compact = 데스크톱 / 그 아래 */
.dn-plan {
  display: flex;
  justify-content: center;
  padding: 180px 10px 200px;
  background: #f4f6f8;
}
.dn-plan-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 950px;
}
.dn-plan-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dn-plan .dn-eyebrow { color: var(--dn-blue-deep); }
.dn-plan-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 140%;
  text-align: center;
}
.dn-plan-goals {
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: 100%;
}
.dn-plan-goal {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.dn-plan-goal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* 번호 원: 제목 한 줄 높이 안에서 세로 가운데 */
.dn-plan-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 54px;
}
.dn-plan-num span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dn-blue-deep);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 160%;
}
.dn-plan-goal-head h3 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: -0.18px;
  color: var(--dn-blue-deep);
}
/* Framer 텍스트처럼: 공백 보존(줄 끝 공백이 폭에 걸린다) + break-word 줄바꿈 */
.dn-plan p, .dn-plan h2, .dn-plan h3 { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }

/* 카드: 데스크톱은 글 475 | 그림 475 가로, 아래 구간은 그림 위 글 아래 */
.dn-plan-card {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  height: 360px;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}
.dn-plan-card.is-media-left { flex-direction: row; }
.dn-plan-card-media {
  position: relative;
  display: block;
  flex: none;
  width: 475px;
  height: 360px;
  overflow: hidden;
  background: #e8f3ff;
}
.dn-plan-card-media picture { display: contents; }
.dn-plan-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 데스크톱 글 묶음은 라이브처럼 absolute + translate 로 세로 가운데 — 플렉스 가운데와 래스터(서브픽셀)가 다르다 */
.dn-plan-card-text {
  position: absolute;
  top: 50%;
  left: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 416px;
  transform: translateY(-50%);
}
/* 오른쪽 글 패널: 패널(475) 의 51% 지점 기준 가운데 */
.dn-plan-card.is-media-left .dn-plan-card-text { left: 717.25px; transform: translate(-50%, -50%); }
/* 라이브: 두 번째 카드만 글 묶음이 가운데가 아니라 위에서 47px */
.dn-plan-card.is-text-top .dn-plan-card-text { top: 47px; transform: none; }
.dn-plan-card-text p {
  font-size: 22px;
  line-height: 1.5em;
  letter-spacing: -0.11px;
}
.dn-plan-card-text .dn-plan-card-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.12px;
}
.dn-plan-only-m,
.dn-plan-only-t { display: none; }

/* 2026: 제목·카드 글이 Inter (태블릿 본문만 Pretendard). 라이브 Inter 프리셋의 OpenType 기능(숫자 6·9 등 폭이 바뀐다) */
.is-2026 .dn-plan-goal-head h3,
.is-2026 .dn-plan-card-text p {
  font-family: var(--dn-inter);
  font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
}
.is-2026 .dn-plan-card-media.is-app img {
  position: absolute;
  top: 41px;
  left: 74px;
  width: 347px;
  height: 279px;
}
.is-2026 .dn-plan-card-media.is-circle { background: none; }

/* 2025: 번호 원 28, 제목 Pretendard 30, 글 칼럼 417, 줄마다 끊은 문단 */
.is-2025 .dn-plan-title { font-size: 40px; }
.is-2025 .dn-plan-goal-head { align-items: center; gap: 8px; }
.is-2025 .dn-plan-num { width: 28px; height: auto; }
.is-2025 .dn-plan-num span { width: 28px; height: 28px; }
.is-2025 .dn-plan-goal-head h3 {
  font-size: 30px;
  line-height: 160%;
  letter-spacing: normal;
}
.is-2025 .dn-plan-card-text { width: 417px; }
.is-2025 .dn-plan-card-text p {
  font-size: 20px;
  line-height: 150%;
  letter-spacing: normal;
}
.is-2025 .dn-plan-card-text .dn-plan-card-title { font-size: 24px; }
.is-2025 .dn-plan-desk { display: flex; flex-direction: column; gap: 12px; }
.is-2025 .dn-plan-compact { display: none; }
.is-2025 .dn-plan-card-media { background: #fff; }
.is-2025 .dn-plan-card-media.is-crew { background: rgba(29, 133, 255, 0.1); }
.is-2025 .dn-plan-card-media.is-daily { background: #e8f3ff; }
.is-2025 .dn-plan-card-media.is-seoul img {
  position: absolute;
  top: 0;
  left: -42px;
  width: 517px;
  height: 361px;
}

@media (min-width: 1920px) {
  .is-2025 .dn-plan-title { font-size: 48px; }
  .is-2025 .dn-plan-goal-head h3 { font-size: 32px; }
}

@media (max-width: 1199.98px) {
  .dn-plan { padding: 180px 48px 200px; }
  .dn-plan-inner { width: 100%; }
  .dn-plan-title { font-size: 40px; }
  .dn-plan-num { height: 48px; }
  .dn-plan-num span { font-size: 20px; }
  .dn-plan-goal-head h3 { font-size: 32px; }
  .dn-plan-card,
  .dn-plan-card.is-media-left { flex-direction: column; height: auto; }
  .dn-plan-card-media { width: 100%; height: auto; background: none; }
  .dn-plan-card-text,
  .dn-plan-card.is-media-left .dn-plan-card-text,
  .dn-plan-card.is-text-top .dn-plan-card-text,
  .is-2025 .dn-plan-card-text,
  .is-2025 .dn-plan-card.is-media-left .dn-plan-card-text {
    position: static;
    width: auto;
    padding: 24px 30px;
    transform: none;
  }

  .is-2026 .dn-plan-card-media img,
  .is-2026 .dn-plan-card-media.is-app img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.697482;
    object-position: 50% 100%;
  }
  .is-2026 .dn-plan-card-media.is-graph img { aspect-ratio: 1 / 0.69768; }
  .is-2026 .dn-plan-card-media.is-circle img { aspect-ratio: 1 / 0.67227; object-position: 50% 50%; }

  .is-2025 .dn-plan-num { height: auto; }
  .is-2025 .dn-plan-num span { font-size: 16px; }
  .is-2025 .dn-plan-goal-head h3 { font-size: 32px; }
  .is-2025 .dn-plan-desk { display: none; }
  .is-2025 .dn-plan-compact { display: block; }
  .is-2025 .dn-plan-card-media.is-seoul { width: 713px; height: 498px; }
  .is-2025 .dn-plan-card-media.is-seoul img { position: static; width: 100%; height: 100%; object-position: 50% 100%; }
  .is-2025 .dn-plan-card-media.is-shot img { height: auto; aspect-ratio: 1 / 0.69768; object-position: 50% 100%; }
  .is-2025 .dn-plan-card-media.is-crew,
  .is-2025 .dn-plan-card-media.is-daily { display: flex; justify-content: center; align-items: center; }
  .is-2025 .dn-plan-card-media.is-crew { height: 480px; background: rgba(29, 133, 255, 0.1); }
  .is-2025 .dn-plan-card-media.is-crew img { width: 475px; height: 480px; }
  .is-2025 .dn-plan-card-media.is-daily { padding: 40px 0; background: #e8f3ff; }
  .is-2025 .dn-plan-card-media.is-daily img { width: 475px; height: 360px; }
}

/* 태블릿만: 2026 본문은 Pretendard 20/150%, 일부 문단만 자간 -0.11 */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .is-2026 .dn-plan-card-text p:not(.dn-plan-card-title) {
    font-family: inherit;
    font-feature-settings: normal;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: normal;
  }
  .is-2026 .dn-plan-card-text p.is-tight {
    font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
    line-height: 1.5em;
    letter-spacing: -0.11px;
  }
  .dn-plan-only-t { display: block; }
  .dn-plan-hide-t { display: none; }
}

@media (max-width: 809.98px) {
  .dn-plan { padding: 60px 16px; }
  .dn-plan-inner { gap: 48px; }
  .dn-plan-title { font-size: 20px; }
  .dn-plan-goals { gap: 60px; }
  .dn-plan-goal { gap: 24px; }
  .dn-plan-goal-head { gap: 4px; }
  .dn-plan-num { width: 16px; height: 24px; }
  .dn-plan-num span { width: 16px; height: 16px; font-size: 10px; }
  .dn-plan-goal-head h3 { font-size: 16px; letter-spacing: -0.08px; }
  .dn-plan-card { border-radius: 8px; }
  .dn-plan-card-text,
  .dn-plan-card.is-media-left .dn-plan-card-text,
  .dn-plan-card.is-text-top .dn-plan-card-text,
  .is-2025 .dn-plan-card-text,
  .is-2025 .dn-plan-card.is-media-left .dn-plan-card-text { padding: 24px 16px 16px; }
  .dn-plan-only-m { display: block; }
  .dn-plan-hide-m { display: none; }

  .is-2026 .dn-plan-card-media img,
  .is-2026 .dn-plan-card-media.is-app img { aspect-ratio: 1 / 0.6983255; }
  .is-2026 .dn-plan-card-media.is-graph img,
  .is-2026 .dn-plan-card-media.is-circle img { aspect-ratio: 1 / 0.656428; }
  .is-2026 .dn-plan-card-text p { font-size: 14px; letter-spacing: -0.7px; }
  .is-2026 .dn-plan-card-text .dn-plan-card-title { font-size: 14px; letter-spacing: -0.07px; }
  .is-2026 .dn-plan-card-text .is-narrow { width: 416px; }

  .dn-plan.is-2025 { padding: 100px 16px 120px; }
  .is-2025 .dn-plan-title { font-size: 28px; }
  .is-2025 .dn-plan-goal-head { gap: 4px; }
  .is-2025 .dn-plan-goal + .dn-plan-goal .dn-plan-goal-head { gap: 8px; }
  .is-2025 .dn-plan-num { width: 24px; }
  .is-2025 .dn-plan-num span { width: 24px; height: 24px; }
  .is-2025 .dn-plan-goal-head h3 { font-size: 19px; letter-spacing: normal; }
  .is-2025 .dn-plan-goal + .dn-plan-goal .dn-plan-goal-head h3 { font-size: 20px; }
  .is-2025 .dn-plan-card-text p { font-size: 15px; }
  .is-2025 .dn-plan-card-text .dn-plan-card-title { font-size: 18px; }
  .is-2025 .dn-plan-card-media.is-seoul { width: 100%; height: 235px; }
  .is-2025 .dn-plan-card-media.is-shot img { height: 235px; aspect-ratio: auto; }
  .is-2025 .dn-plan-card-media.is-crew,
  .is-2025 .dn-plan-card-media.is-daily { height: 235px; padding: 0; }
  .is-2025 .dn-plan-card-media.is-crew img { width: 66%; height: auto; aspect-ratio: 1 / 1.34078; object-fit: contain; }
  .is-2025 .dn-plan-card-media.is-daily img { width: 284.25px; height: 215.44px; }
}


/* ── 부스터 (우주 배경 + 부스터즈 카드 3장) ── ≥1920 은 1200–1919 와 같다 */
.dn-booster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 180px 0 240px;
}
.dn-booster .dn-booster-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dn-booster .dn-booster-dot { position: relative; width: 8px; height: 8px; background: #00c4ff; outline: 1px solid #000; outline-offset: -1px; }
.dn-booster .dn-booster-sparkle { position: relative; width: 45px; height: 45px; }
.dn-booster .dn-booster-d { display: inline; }
.dn-booster .dn-booster-m { display: none; }
.dn-booster div.dn-booster-d { display: block; }
.dn-booster .dn-booster-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 800px;
}

/* 머리: 라벨·제목(주황 사선 하이라이트) + 리드 문단 */
.dn-booster .dn-booster-head { display: flex; flex-direction: column; align-items: center; gap: 80px; width: 100%; }
.dn-booster .dn-booster-title-wrap { position: relative; width: 498px; }
.dn-booster .dn-booster-highlight { position: absolute; left: 30px; top: 164px; width: 416px; height: 42px; }
.dn-booster .dn-booster-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.dn-booster .dn-eyebrow { color: var(--dn-blue-deep); }
.dn-booster .dn-title { color: #fff; white-space: pre-wrap; } /* 라이브처럼 줄끝 공백이 가운데 정렬에 포함된다 */
.dn-booster .dn-booster-lead { font-size: 24px; line-height: 150%; text-align: center; color: #fff; }

/* 카드 공통 */
.dn-booster .dn-booster-cards { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dn-booster .dn-booster-rocket { position: absolute; z-index: 1; top: -80px; right: 0; width: 231px; height: 238px; object-fit: cover; }
.dn-booster .dn-booster-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 40px;
  border-radius: 20px;
  background: #f8f8f8;
  color: #000;
}
.dn-booster .dn-booster-card--join { gap: 12px; background: #fff; }
.dn-booster .dn-booster-card--tiers { padding: 40px 50px 50px; }
.dn-booster .dn-booster-card-title { margin: 0; font-size: 28px; font-weight: 900; line-height: 150%; }
.dn-booster .dn-booster-card-title--lg { font-size: 32px; }
.dn-booster .dn-booster-card-title span {
  display: inline-block;
  background: linear-gradient(90deg, #ee1400 10%, #ff9d0a 67.7213%, #ffd33a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dn-booster .dn-booster-text { font-size: 22px; line-height: 160%; white-space: pre; } /* 라이브처럼 줄끝 공백 보존 */
.dn-booster b { font-weight: 700; }

/* 키트 카드 */
.dn-booster .dn-booster-kit-head { display: flex; flex-direction: column; gap: 12px; }
.dn-booster .dn-booster-kits { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; width: 703px; }
.dn-booster .dn-booster-start { width: 206px; height: 44.5px; }
.dn-booster .dn-booster-kit { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.dn-booster .dn-booster-kit-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 150%; color: var(--dn-blue-deep); }
.dn-booster .dn-booster-kit1 { width: 582px; margin-left: 12px; white-space: nowrap; }
.dn-booster .dn-booster-list, .dn-booster .dn-booster-list ul { margin: 0; padding: 0; list-style: none; }
.dn-booster .dn-booster-list li { position: relative; padding-left: 2ch; font-size: 22px; font-weight: 700; line-height: 160%; }
.dn-booster .dn-booster-list li::before { content: "•"; position: absolute; left: 0; }
.dn-booster .dn-booster-list ul li { font-weight: 400; white-space: pre; }
.dn-booster .dn-booster-list ul li.is-bold { font-weight: 700; }
.dn-booster .dn-booster-kit2 { display: flex; flex-direction: column; gap: 48px; padding-left: 12px; }
.dn-booster .dn-booster-intro { font-size: 20px; line-height: 150%; }
.dn-booster .dn-booster-goods { display: flex; flex-direction: column; gap: 42px; }
.dn-booster .dn-booster-good { display: flex; gap: 11px; }
.dn-booster .dn-booster-good-text { display: flex; flex-direction: column; gap: 12px; width: 340px; }
.dn-booster .dn-booster-good-name { font-size: 22px; font-weight: 700; line-height: 150%; }
.dn-booster .dn-booster-good-desc { font-size: 20px; line-height: 150%; white-space: pre; }
.dn-booster .dn-booster-good-img { flex: none; width: 340px; height: 260px; border-radius: 16px; object-fit: fill; }
.dn-booster .dn-booster-good-img--socks { border-radius: 25px; object-fit: cover; }
.dn-booster .dn-booster-good-img--framed { outline: 1px solid #c9c9c9; outline-offset: -1px; }

/* 금액별 구성 */
.dn-booster .dn-booster-tiers { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.dn-booster .dn-booster-tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
}
.dn-booster .dn-booster-tier--basic { width: auto; }
.dn-booster .dn-booster-tier-name { font-size: 20px; font-weight: 700; line-height: 150%; color: var(--dn-blue); }
.dn-booster .dn-booster-items { display: flex; align-items: center; gap: 30px; }
.dn-booster .dn-booster-tier:last-child .dn-booster-items { align-items: flex-start; }
.dn-booster .dn-booster-item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dn-booster .dn-booster-tier:nth-child(3) .dn-booster-item--card { gap: 10px; }
.dn-booster .dn-booster-item > img { width: 100px; height: 100px; object-fit: cover; }
.dn-booster .dn-booster-item-img { display: flex; justify-content: center; align-items: center; }
.dn-booster .dn-booster-tier:last-child .dn-booster-item-img { height: 100px; }
.dn-booster .dn-booster-tier:nth-child(2) .dn-booster-item-img, .dn-booster .dn-booster-tier:nth-child(3) .dn-booster-item-img { width: 215px; }
.dn-booster .dn-booster-item-img img { width: 153px; height: auto; aspect-ratio: 1.5291; object-fit: cover; } /* 라이브 비율 그대로 — 높이 100.047 */
.dn-booster .dn-booster-item-img .dn-booster-card-alt { width: 145px; aspect-ratio: 1.53723; }
.dn-booster .dn-booster-item p { font-size: 18px; line-height: 150%; letter-spacing: -0.01em; text-align: center; }

@media (max-width: 1199.98px) {
  .dn-booster { padding: 180px 48px 120px; }
  .dn-booster .dn-booster-inner { width: 100%; }
  .dn-booster .dn-booster-rocket { width: 152px; height: 166px; }
  .dn-booster .dn-booster-card--kit, .dn-booster .dn-booster-card--tiers { padding: 30px; }
  .dn-booster .dn-booster-kits { width: 100%; }
  .dn-booster .dn-booster-kit1 { margin-left: 0; }
  .dn-booster .dn-booster-kit2 { padding-left: 0; }
  .dn-booster .dn-booster-good { gap: 30px; }
  .dn-booster .dn-booster-good-text { flex: 1; min-width: 0; width: auto; } /* 라이브처럼 긴 줄은 넘치고 칸 폭은 안 늘어난다 */
  .dn-booster .dn-booster-good-img { width: 287px; height: 219px; }
}

@media (max-width: 809.98px) {
  .dn-booster { padding: 120px 16px; }
  .dn-booster .dn-booster-d { display: none; }
  .dn-booster .dn-booster-m { display: inline; }
  .dn-booster div.dn-booster-d { display: none; }
  .dn-booster div.dn-booster-m { display: flex; }
  .dn-booster .dn-booster-dot { position: absolute; z-index: 1; left: 306px; top: 96px; }
  .dn-booster .dn-booster-sparkle { position: absolute; z-index: 1; left: 56px; top: 46px; }
  .dn-booster .dn-booster-head { gap: 40px; }
  .dn-booster .dn-booster-title-wrap { width: 100%; }
  .dn-booster .dn-booster-highlight { left: calc(50% - 146px); top: 120.5px; width: 292px; height: 30px; }
  .dn-booster .dn-booster-lead { font-size: 17px; }
  .dn-booster .dn-booster-cards { gap: 40px; }
  .dn-booster .dn-booster-rocket { top: -50px; width: 101px; height: 108px; }
  .dn-booster .dn-booster-card { width: 100%; padding: 20px 16px 16px; border-radius: 8px; }
  .dn-booster .dn-booster-card--kit { padding: 20px 16px 16px; }
  .dn-booster .dn-booster-card--tiers { gap: 24px; padding: 24px 16px 16px; }
  .dn-booster .dn-booster-card-title, .dn-booster .dn-booster-card-title--lg { font-size: 20px; }
  .dn-booster .dn-booster-text { font-size: 16px; white-space: pre-wrap; }
  .dn-booster .dn-booster-note { font-size: 13px; }
  .dn-booster .dn-booster-kits { gap: 48px; }
  .dn-booster .dn-booster-kit-title { font-size: 18px; }
  .dn-booster .dn-booster-kit1 {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 361px;
    white-space: normal;
  }
  .dn-booster .dn-booster-bullet { display: flex; gap: 4px; overflow: hidden; font-size: 16px; line-height: 160%; white-space: pre-wrap; }
  .dn-booster .dn-booster-bullet > b:first-child { flex: none; }
  .dn-booster .dn-booster-bullet > :last-child { flex: 1; }
  .dn-booster .dn-booster-bullet--sub { padding-left: 20px; }
  .dn-booster .dn-booster-bullet--fixed { height: 78px; }
  /* 라이브 DOM 순서(하위2 → 프로그램)를 유지하고 화면 순서만 바꾼다 */
  .dn-booster .dn-booster-bullet--program { order: 1; }
  .dn-booster .dn-booster-bullet--last { order: 2; }
  .dn-booster .dn-booster-kit2 { gap: 32px; }
  .dn-booster .dn-booster-intro { font-size: 16px; }
  .dn-booster .dn-booster-good { flex-direction: column; gap: 12px; }
  .dn-booster .dn-booster-good-text { gap: 8px; }
  .dn-booster .dn-booster-good-name { font-size: 18px; }
  .dn-booster .dn-booster-good-desc { font-size: 15px; white-space: pre-wrap; }
  .dn-booster .dn-booster-good-img { width: 100%; height: auto; aspect-ratio: 1.30752; }
  .dn-booster .dn-booster-good-img--keyring { aspect-ratio: 1.3105; }
  .dn-booster .dn-booster-tiers { gap: 12px; }
  .dn-booster .dn-booster-tier, .dn-booster .dn-booster-tier--basic { width: 100%; gap: 12px; padding: 12px; }
  .dn-booster .dn-booster-tier-name { font-size: 18px; }
  .dn-booster .dn-booster-items { gap: 12px; }
  .dn-booster .dn-booster-tier:nth-child(n+3) .dn-booster-items { align-items: flex-start; }
  .dn-booster .dn-booster-tier:last-child .dn-booster-items { flex-wrap: wrap; }
  .dn-booster .dn-booster-item > img { width: 84px; height: 84px; }
  .dn-booster .dn-booster-item-img, .dn-booster .dn-booster-tier:nth-child(2) .dn-booster-item-img, .dn-booster .dn-booster-tier:nth-child(3) .dn-booster-item-img, .dn-booster .dn-booster-tier:last-child .dn-booster-item-img { width: auto; height: 84px; }
  .dn-booster .dn-booster-tier--basic .dn-booster-item-img { height: auto; }
  .dn-booster .dn-booster-item-img img, .dn-booster .dn-booster-item-img .dn-booster-card-alt { width: 92px; height: 60px; }
  .dn-booster .dn-booster-item p { font-size: 15px; }
  .dn-booster .dn-booster-item--card p { font-size: 14px; white-space: pre-wrap; }
}

/* ── 마무리: 미션 픽셀 박스 + 사선 땅(캐릭터·로고가 든 SVG) ── */
.dn-mission {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 132px;
}
.dn-mission-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dn-mission-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  background: #003dae;
}
.dn-mission-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.dn-mission-box {
  width: 764px;
  height: 310px;
  object-fit: contain;
}
.dn-mission-title {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 150%;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* 2960×537 고정, 화면 가운데 기준으로 양옆이 잘린다 */
.dn-mission-ground {
  position: relative;
  flex: none;
  width: 2960px;
  height: 537px;
}
.dn-mission-ground img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.dn-mission-rocket {
  position: absolute;
  z-index: 1;
  top: 58px;
  left: 918px;
  width: 231px;
  height: 238px;
}

@media (min-width: 1920px) {
  .dn-mission-box { width: 748px; height: 303px; }
  .dn-mission-rocket { top: 81px; left: 1480px; }
}
@media (max-width: 1199.98px) {
  .dn-mission-box { width: 763px; height: 309.15625px; }
  .dn-mission-title { font-size: 36px; }
  .dn-mission-rocket { top: 70px; left: 586px; width: 176px; height: 181px; }
}
@media (max-width: 809.98px) {
  .dn-mission-box { width: 399px; height: 161.65625px; }
  .dn-mission-title { font-size: 22px; }
  .dn-mission-rocket { top: 8px; left: 242px; width: 128px; height: 132px; }
}


/* ── 화면 아래 고정 CTA (main 밖, zz-float-cta) ── */
.dn-float-cta {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  transition: opacity .2s ease;
  will-change: transform;
}
.dn-float-cta.is-hidden { opacity: 0; pointer-events: none; }
.dn-float-cta-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  padding: 16px 0;
  border-radius: 11px;
  background: var(--dn-blue, #1d85ff);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
  white-space: pre;
}
.dn-float-cta--together .dn-float-cta-btn { border-radius: 8px !important; }
.dn-float-cta img { position: absolute; z-index: 1; display: block; }
.dn-float-cta-bomb { left: 504px; top: -69px; width: 127px; height: 127px; }
.dn-float-cta-friends { left: 9px; top: -49px; width: 167px; height: 89px; }

@media (min-width: 1920px) {
  .dn-float-cta-btn { padding: 20px 0; border-radius: 10px; }
  .dn-float-cta-bomb { left: 531px; top: -50px; width: 115px; height: 115px; }
}
@media (max-width: 1199.98px) {
  .dn-float-cta-btn { padding: 20px 0; border-radius: 10px; }
  .dn-float-cta-bomb { left: 531px; top: -50px; width: 115px; height: 115px; }
}
@media (max-width: 809.98px) {
  .dn-float-cta-btn { width: 359px; padding: 16px 0; font-size: 22px; }
  .dn-float-cta--together .dn-float-cta-btn { width: 358px; }
  .dn-float-cta-bomb { left: 295px; top: -44px; width: 70px; height: 70px; }
  .dn-float-cta-friends { left: 6px; top: -44px; width: 125px; height: 66px; }
}