/* Variable */
:root { --main-hero-height: clamp(420px, calc(100dvh * 420 / 934), 480px); }

/* Header */
#baseHeader .header__gnb-bar { background-color: transparent; }

/* Section1: Main Hero */
.main-hero { position: relative; width: 100%; overflow: hidden; background-color: #fbf2e7; }
.main-hero__shape { display: block; position: absolute; top: -30px; left: 100px; width: 400px; height: 400px; background-color: #fddede; border-radius: 50%; filter: blur(100px); }
.main-hero__shape--bottom { top: auto; left: auto; right: 100px; bottom: -200px; width: 600px; height: 600px; }
.main-hero .container { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 48px; width: 100%; max-width: 1576px; margin-top: 200px; padding-inline: 0; padding-bottom: 60px; }

/* Donation */
.main-donation { position: relative; flex-shrink: 0; width: calc(340px + 16px); padding-left: 16px; }

/* Character */
.main-donation__character { position: absolute; top: -80px; left: 0; width: 100%; height: 180px; }
.main-donation__character-img { position: absolute; top: -50%; left: calc(50% - 152px); width: 304px; height: 362px; overflow: hidden; background-image: url("/common/v2026/images/main-character.png"); background-repeat: no-repeat; background-position: 0 0; transform: scale(0.45); animation: characterSprite 3s linear infinite; }

/* Donation Form */
.main-donation__form { width: 100%; height: 100%; min-height: var(--main-hero-height); padding-block: 110px 24px; padding-inline: 32px; border-radius: 40px; text-align: center; filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.1)); background-color: rgba(255, 255, 255, 0.8); }
.main-donation__tabs { display: flex; justify-content: center; align-items: center; margin-bottom: 24px; gap: 0 8px; }
.main-donation__tab {  }
.main-donation__tab-btn { width: 100%; padding-inline: 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--color-text-300); }
.main-donation__tab--active .main-donation__tab-btn { position: relative; color: var(--color-text-700); }
.main-donation__tab--active .main-donation__tab-btn::before { content: ''; position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border-radius: 6px; background-color: var(--color-primary-400); }
.donation-panel { position: relative; display: none; text-align: left; }
.donation-panel--active { display: block; }
.donation-panel__select-wrap { position: relative; margin-bottom: 8px; }
.donation-panel__select-wrap::after { content: ''; position: absolute; top: 50%; right: 24px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.donation-panel__select { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 54px; padding-inline: 24px 38px; border: 1px solid var(--color-line-200); border-radius: 30px; font-size: 18px; text-align: left; font-weight: 500; letter-spacing: -0.5px; line-height: 1; color: var(--color-text-700); background-color: var(--color-solid-200); cursor: pointer; }
.donation-panel__direct { display: flex; align-items: center; width: 100%; height: 54px; padding-inline: 23px; border: 1px solid var(--color-line-200); border-radius: 30px; background-color: var(--color-solid-200); }
.donation-panel__input { width: 100%; padding: 0; border: none; font-size: 18px; text-align: left; font-weight: 500; letter-spacing: -0.5px; line-height: 1; color: var(--color-text-400); background-color: transparent; }
.donation-panel__input:read-only { outline: none; cursor: default; }
.donation-panel__input::placeholder { line-height: 1; color: var(--color-text-200); }
.donation-panel__unit { margin-left: auto; font-size: 18px; text-align: right; font-weight: 500; line-height: 1; }
.donation-panel__submit { width: 100%; margin-top: 12px; padding-block: 21px; border-radius: 35px; font-size: 22px; line-height: 1; font-weight: 700; color: var(--color-text-white); background-color: var(--color-primary-400); }
.donation-panel__submit:hover,
.donation-panel__submit:focus-visible { background-color: var(--color-solid-900); }

/* Main Swiper */
.main-swiper { position: relative; width: 100%; overflow: hidden; }
.main-swiper .swiper-slide { height: var(--main-hero-height); }
.main-banner { position: relative; display: flex; flex-direction: row; gap: 40px; width: 100%; height: 100%; min-width: 0; overflow: hidden; }
.main-banner__img { flex-shrink: 0; position: relative; width: auto; height: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 40px; background-color: var(--color-primary-400); mask-image: radial-gradient(white, black); }
.main-banner__img img { width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; object-fit: cover; transform: translateX(100%); border-radius: inherit; transition: transform 0.3s ease; }
.main-banner__body { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; width: auto; height: 100%; padding-top: 16px; overflow: hidden; }
.main-banner__label { display: block; width: 100%; margin-bottom: 8px; font-size: clamp(18px, 1.5vw, 26px); font-weight: 800; line-height: 1; color: var(--color-text-400); opacity: 0; overflow: hidden; transition: opacity 0.3s ease; }
.main-banner__title { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 3; -webkit-line-clamp: 3; margin-bottom: 28px; font-size: clamp(40px, 3.4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -1.7px; word-break: keep-all; color: var(--color-text-700); opacity: 0; overflow: hidden; transition: opacity 0.3s ease; }
.main-banner__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; height: 56px; overflow: hidden; padding-inline: 24px 20px; border-radius: 30px; color: var(--color-text-white); background-color: var(--color-primary-400); }
.main-banner__link:hover,
.main-banner__link:focus-visible { border: 1px solid var(--color-line-300); color: var(--color-text-600); background-color: var(--color-solid-white); }
.main-banner__link-text { margin-top: 1px; font-size: 18px; font-weight: 700; white-space: nowrap; }
.icon-swiper-link-arr { width: 16px; height: 16px; color: inherit; }

/* Swiper Slide Active Animation */
.main-swiper .swiper-slide-active .main-banner__img img { transform: translateX(0); }
.main-swiper .swiper-slide-active .main-banner__label,
.main-swiper .swiper-slide-active .main-banner__title { opacity: 1; }

/* Main Swiper Controls */
.main-swiper__control { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: calc(100% - (var(--main-hero-height) * 4 / 3) - 40px); min-width: 0; z-index: 1; }
.main-swiper__control .swiper-pagination { flex: 1; position: relative; top: auto; bottom: auto; display: flex; gap: 6px; height: 8px; padding-right: 24px; opacity: 1; }
.main-swiper__control .swiper-pagination-bullet { flex-shrink: 0; display: block; width: 8px; height: 8px; margin: 0; background-color: rgba(0, 0, 0, 0.2); border-radius: 4px; opacity: 1; }
.main-swiper__control .swiper-pagination-bullet-active { width: 32px; background-color: var(--color-solid-700); }
.main-swiper__nav-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-right: 10px; }
.main-swiper__nav-group { display: flex; align-items: center; justify-content: center; gap: 0; height: 40px; background-color: var(--color-solid-white); border: 1px solid var(--color-line-300); border-radius: 20px; }
.main-swiper__nav { display: flex; align-items: center; justify-content: center; width: 37px; height: 100%; color: var(--color-solid-800); }
.main-swiper__nav-prev { padding-left: 4px; }
.main-swiper__nav-next { padding-right: 4px; }
.icon-prev-chevron,
.icon-next-chevron { width: 16px; height: 16px; color: inherit; }
.main-swiper__pause { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--color-line-300); border-radius: 50%; color: var(--color-solid-800); background-color: var(--color-solid-white); }
.icon-swiper-pause,
.icon-swiper-play { width: 16px; height: 16px; color: inherit; }
.icon-swiper-play { display: none; }
.main-swiper__pause--paused .icon-swiper-pause { display: none; }
.main-swiper__pause--paused .icon-swiper-play { display: block; }

/* Section 2: How to Donate */
.main-how { padding-block: 12px; border-top: 1px solid var(--color-line-200); border-bottom: 1px solid var(--color-line-200); }
.main-how .container__wide { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
.main-how__title { flex-shrink: 0; min-width: 120px; font-size: 24px; font-weight: 700; color: var(--color-text-400); }
.main-how__slider { position: relative; flex: 1; min-width: 0; }
.main-how__viewport { width: 100%; min-width: 0; overflow: hidden; }
.main-how__list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; }
.main-how.is-slide .main-how__list { width: max-content; justify-content: flex-start; }
.main-how__item { flex: 0 0 160px; width: 160px; border-radius: 12px; }
.main-how__item.swiper-slide { width: 160px; }
.main-how__link { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding-block: 18px 28px; padding-inline: 12px; border-radius: 15px; text-align: center; transition: background-color 0.2s; }
.main-how__link:hover { background-color: var(--color-solid-200); }
.main-how__icon { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; }
.main-how__icon-svg { width: 100%; height: 100%; }
.main-how__label { font-size: 18px; font-weight: 700; font-family: sans-serif; letter-spacing: -0.5px; color: var(--color-text-700); }
.main-how__nav { display: none; position: absolute; top: 50%; z-index: 2; align-items: center; justify-content: center; width: 32px; height: 32px; padding-inline: 6px; border: 1px solid var(--color-line-300); border-radius: 50%; background-color: var(--color-solid-white); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-50%); }
.main-how__nav-prev { left: 0; }
.main-how__nav-next { right: 0; }
.main-how__nav:not(:disabled):hover,
.main-how__nav:not(:disabled):focus-visible { background-color: var(--color-solid-200); }
.main-how__nav:disabled,
.main-how__nav.swiper-button-disabled { opacity: 0; cursor: default; }
.main-how__nav .icon-prev-chevron,
.main-how__nav .icon-next-chevron { width: 12px; height: 12px; }

/* Section 3: Notice */
.main-notice { padding-block: 30px; border-bottom: 1px solid var(--color-line-200); }
.main-notice .container__wide { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 0 20px; }
.main-notice__viewport { flex: 1; overflow: hidden; container-type: inline-size; }
.main-notice__list { display: flex; }
.main-notice__item { flex: none; width: max-content; max-width: 50cqw; overflow: hidden; }
.main-notice__item.swiper-slide { width: max-content; }
.main-notice__link { display: flex; align-items: center; gap: 7px; max-width: 100%; height: 100%; }
.main-notice__badge { flex: none; padding-block: 6px; padding-inline: 10px; border: 1px solid var(--color-line-150); border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--color-text-600); background-color: var(--color-solid-100); }
.main-notice__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; font-weight: 500; letter-spacing: -0.5px; }
.main-notice__title:hover,
.main-notice__title:focus-visible { color: var(--color-text-700); }
.main-notice__util { flex: none; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; }
.main-notice__nav { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-line-300); border-radius: 20px; background-color: var(--color-solid-white); }
.main-notice__nav:not(:disabled):hover,
.main-notice__nav:not(:disabled):focus-visible { background-color: var(--color-solid-200); }
.main-notice__nav:disabled { opacity: 0.5; cursor: default; }
.main-notice__nav .icon-prev-chevron,
.main-notice__nav .icon-next-chevron { width: 14px; height: 14px; color: var(--color-line-500); }
.main-notice__more { display: flex; justify-content: center; align-items: center; height: 40px; margin-left: 4px; border: 1px solid var(--color-line-300); border-radius: 20px; padding-inline: 14px 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.7px; background-color: var(--color-solid-white); }
.main-notice__more:hover,
.main-notice__more:focus-visible { background-color: var(--color-solid-200); }
.icon-plus { width: 14px; height: 14px; color: inherit; }

/* Section 4: Webzine */
.main-webzine { margin-top: 80px; }
.main-webzine .container__wide { display: flex; gap: 36px; align-items: stretch; }
.main-webzine__title { margin-bottom: 40px; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; color: var(--color-text-700); }
.main-honor,
.main-change { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-change__header { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.main-change__header .main-webzine__title { flex: 1; min-width: 0; margin-bottom: 0; }
.main-change__more { display: flex; flex-shrink: 0; align-items: center; justify-content: center; height: 40px; padding-inline: 14px 10px; border: 1px solid var(--color-line-300); border-radius: 40px; font-size: 14px; font-weight: 600; color: var(--color-text-500); background-color: var(--color-solid-white); }
.main-change__more:hover,
.main-change__more:focus-visible { background-color: var(--color-solid-200); }
.main-honor__panel { position: relative; flex: 1; overflow: hidden; border-radius: 24px; max-height: 840px; aspect-ratio: 3 / 4; }
.main-honor__cover { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.main-honor__emblem { position: absolute; top: 48px; left: 48px; z-index: 2; width: 140px; }
.icon-honor-logo { display: block; width: 100%; height: auto; aspect-ratio: 127 / 78; color: var(--color-text-white); }
.main-honor__card { position: absolute; right: 20px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 280px; height: 280px; padding: 40px; border-radius: 50%; color: var(--color-text-white); background-color: #694f2e; filter: drop-shadow(2px 2px 12px rgba(0, 0, 0, 0.3)); transition: background-color 0.2s ease; }
.main-honor__card::after { content: ''; position: absolute; inset: 3.5%; border: 1px solid #cca421; border-radius: 50%; pointer-events: none; }
.main-honor__card:hover,
.main-honor__card:focus-visible { background-color: var(--palette-gray-black); }
.main-honor__card-sub { margin-bottom: 4px; font-size: 22px; font-weight: 700; text-align: center; color: #e5dcc3; }
.main-honor__card-title { margin-bottom: 32px; font-size: 28px; font-weight: 700; text-align: center; }
.main-honor__goto { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 20px; font-weight: 600; }
.main-honor__goto .icon-swiper-link-arr { width: 16px; height: 16px; color: inherit; }
.main-change__list { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); flex: 1; gap: 16px; max-height: 840px; min-height: 0; }
.main-change__item { min-width: 0; min-height: 0; }
.main-change__link { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; border-radius: 24px; color: var(--color-text-white); background-color: var(--palette-gray-black); }
.main-change__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.2s ease, opacity 0.2s ease; }
.main-change__overlay { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 50%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0) 100%); }
.main-change__title { position: absolute; left: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; width: 100%; min-height: 50%; padding: 24px; font-size: 26px; font-weight: 700; line-height: 1.2; word-break: keep-all; }
.main-change__link:hover .main-change__img,
.main-change__link:focus-visible .main-change__img { opacity: 0.7; transform: scale(1.1); }

/* Section 5: Funding */
.main-funding { margin-top: 120px; }
.main-funding .container__wide { margin-bottom: 40px; }
.main-funding__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.main-funding__title { flex: 1; min-width: 0; margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; color: var(--color-text-700); }
.main-funding__control { display: flex; flex-shrink: 0; align-items: center; gap: 4px; }
.main-funding__nav { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-line-300); border-radius: 20px; background-color: var(--color-solid-white); }
.main-funding__nav:not(.swiper-button-disabled):hover,
.main-funding__nav:not(.swiper-button-disabled):focus-visible,
.main-funding__more:hover,
.main-funding__more:focus-visible { background-color: var(--color-solid-200); }
.main-funding__nav.swiper-button-disabled { opacity: 0.5; cursor: default; }
.main-funding__nav .icon-prev-chevron,
.main-funding__nav .icon-next-chevron { width: 14px; height: 14px; color: var(--color-line-500); }
.main-funding__more { display: flex; justify-content: center; align-items: center; height: 40px; margin-left: 4px; border: 1px solid var(--color-line-300); border-radius: 20px; padding-inline: 14px 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.7px; background-color: var(--color-solid-white); }
.main-funding__viewport { position: relative; width: 100%; overflow: hidden; padding-left: max(16px, calc((100vw - var(--layout-wide-max-width)) / 2 + 16px)); padding-right: max(16px, calc((100vw - var(--layout-wide-max-width)) / 2 + 16px)); }
.main-funding__viewport.is-end::after { opacity: 0; }
.main-funding__list { align-items: stretch; height: auto; }
.main-funding__item { display: flex; height: auto !important; box-sizing: border-box; }
.main-funding__link { display: flex; flex-direction: column; width: 100%; height: 100%; }
.main-funding__bg { position: relative; overflow: hidden; aspect-ratio: 14 / 10; border-radius: 0 32px 32px 32px; }
.main-funding__thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.main-funding__badge { display: inline-flex; align-items: flex-start; position: absolute; top: 0; left: 0; z-index: 1; min-height: 44px; padding-right: 30px; }
.main-funding__badge::before { content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 80px); height: 100%; background-color: #ffffff; }
.main-funding__badge::after { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 44px; background: url(/common/v2026/images/funding-notch.svg) no-repeat right top; background-size: 100px 44px; }
.main-funding__badge-label { display: inline-flex; align-items: center; position: relative; z-index: 1; height: 36px; padding-inline: 15px; border-radius: 18px 18px 18px 4px; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: #fff; white-space: nowrap; background-color: var(--color-primary-400); }
.main-funding__text { display: flex; flex: 1; flex-direction: column; padding-block: 20px 32px; padding-inline: 16px; }
.main-funding__card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; min-height: 68px; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; word-break: keep-all; }
.main-funding__by { display: block; color: var(--color-text-400); }
.main-funding__data { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; margin-top: auto; gap: 6px; }
.main-funding__percent { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--color-primary-400); }
.main-funding__percent-val {  }
.main-funding__gauge { position: relative; display: block; width: 100%; height: 10px; background-color: #e4e6e8; border-radius: 5px; overflow: hidden; }
.main-funding__gauge-bar { display: block; position: absolute; width: 0%; height: 100%; border: 1px solid var(--color-primary-400); border-radius: 5px; background-color: var(--color-primary-400); transition: width 1s ease-out; }
.main-funding__goal { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; font-size: 15px; }
.main-funding__current { font-weight: 700; }
.main-funding__target { font-weight: 700; color: var(--color-text-300); }

/* Section 6: Story */
.main-story { margin-top: 120px; margin-bottom: 160px; }
.main-story__title { margin-bottom: 40px; font-size: 40px; font-weight: 700; letter-spacing: -0.5px; color: var(--color-text-700); }
.main-story__body { display: flex; flex-direction: row; align-items: flex-start; gap: 40px; }
.main-story__media { display: flex; flex-wrap: wrap; gap: 16px; flex: 1 1 auto; min-width: 0; }
.main-story__video { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; width: auto; padding: 0; aspect-ratio: 16 / 9; border-radius: 16px; background-color: var(--palette-gray-black); }
.main-story__video--lg { flex: 1 1 100%; }
.main-story__video--md { flex: 1 1 calc(50% - 8px); }
.main-story__poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); transition: opacity 0.2s ease-out; }
.main-story__video:hover .main-story__poster,
.main-story__video:focus-visible .main-story__poster { opacity: 0.9; }
.main-story__play { position: relative; z-index: 1; display: block; width: 70px; height: auto; flex-shrink: 0; aspect-ratio: 71 / 50; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); }
.main-story__video.is-playing { cursor: default; }
.main-story__video iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.main-story__news { display: flex; flex-direction: column; flex: 0 0 auto; width: 760px; }
.main-story__board { display: flex; flex-direction: column; margin-bottom: 12px; }
.main-story__board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; }
.main-story__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.main-story__tab { padding: 12px 16px; border: 1px solid var(--color-line-150); border-radius: 40px; font-size: 16px; font-weight: 700; color: var(--color-text-400); background-color: var(--color-solid-white); }
.main-story__tab.is-active { border-color: transparent; color: var(--color-text-white); background-color: var(--color-solid-900); }
.main-story__tab:not(.is-active):hover,
.main-story__tab:not(.is-active):focus-visible { border: 1px solid var(--color-line-300); background-color: var(--color-solid-200); }
.main-story__more { display: flex; flex-shrink: 0; align-items: center; justify-content: center; height: 38px; padding-inline: 14px 10px; border: 1px solid var(--color-line-300); border-radius: 40px; font-size: 14px; font-weight: 600; color: var(--color-text-500); background-color: var(--color-solid-white); }
.main-story__more:hover,
.main-story__more:focus-visible { background-color: var(--color-solid-200); }
.main-story__board-list { display: flex; flex-direction: column; gap: 16px; padding-block: 24px; border-top: 1px solid var(--color-line-200); }
.main-story__board-item { min-width: 0; }
.main-story__board-item.is-hidden { display: none; }
.main-story__board-link { display: flex; align-items: center; gap: 10px; width: 100%; padding-block: 7px; min-width: 0; }
.main-story__badge { flex: none; padding: 4px 6px; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1.5; }
.main-story__badge--notice { border: 1px solid var(--color-teal-400); color: var(--color-teal-600); background-color: var(--color-teal-50); }
.main-story__badge--report { border: 1px solid var(--color-rose-400); color: var(--color-rose-600); background-color: var(--color-rose-50); }
.main-story__board-title { flex: 1; min-width: 0; overflow: hidden; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text-500); }
.main-story__board-title:hover { color: var(--color-text-700); }
.main-story__board-date { flex: none; font-size: 15px; font-weight: 500; color: var(--color-text-300); }
.main-story__links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; row-gap: 28px; padding-block: clamp(32px, 3.3vw, 40px); border-top: 1px solid var(--color-line-400); border-bottom: 1px solid var(--color-line-400); }
.main-story__link-item { width: calc(100% / 6); text-align: center; }
.main-story__link-icon { width: 48px; height: 48px; color: var(--color-text-400); }
.main-story__link-label { display: block; margin-top: 12px; width: 100%; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--color-text-500); }


@media (max-width: 1560px) {
    /* Section 2: How to Donate */
    .main-how__nav { display: flex; }
}

@media (max-width: 1350px) {
    .main-swiper__control .swiper-pagination { position: absolute; left: calc(-1 * ((var(--main-hero-height) * 4 / 3) / 2 + 40px)); bottom: 20px; flex: none; width: auto; padding-right: 0; transform: translateX(-50%); z-index: 2; }
}

@media (max-width: 1280px) {
    :root { --main-hero-height: 357px; }

    /* Section1: Main Hero */
    .main-donation__tab-btn { font-size: 18px; }
    .donation-panel__select-wrap { margin-bottom: 6px; }
    .donation-panel__select { height: 48px; }
    .donation-panel__direct { height: 48px; }
    .main-hero .container { align-items: center; }
    .main-banner { gap: 32px; }

    /* Section 6: Story */
    .main-story__media { flex: 3.5 1 0; min-width: 0; width: auto; }
    .main-story__video--md { flex: 1 1 100%; }
    .main-story__news { flex: 6.5 1 0; width: auto; min-width: 0; }
}

@media (max-width: 1024px) {
    :root { --main-hero-height: 340px; }

    /* Section1: Main Hero */
    .main-hero .container { flex-direction: column-reverse; gap: 60px; margin-top: 84px; padding-bottom: 40px; padding-inline: 16px; }
    .main-donation { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; padding-block: 28px; padding-inline: 32px; border-radius: 24px; filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.1)); background-color: rgba(255, 255, 255, 0.8); }
    .main-donation__form { flex-shrink: 0; width: calc(100% - 220px); height: auto; padding-block: 28px; min-height: auto; padding-block: 0; padding-inline: 0; filter: none; background-color: transparent; }
    .main-donation__character { position: relative; top: auto; width: 220px; }
    .main-banner__img { border-radius: 24px; }
    .main-banner__title { margin-bottom: 18px; }
    .main-banner__link { height: 50px; }
    .main-swiper { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; }

    /* Section 2: How to Donate */
    .main-how .container__wide { flex-direction: column; align-items: stretch; }
    .main-how__title { width: 100%; padding-block: 8px; font-size: 18px; text-align: center; }
    .main-how__title .desktop-break { display: none; }
    .main-how__slider { width: 100%; }
    .main-how__viewport { width: calc(100% + 16px); }

    /* Section 4: Webzine */
    .main-webzine .container__wide { flex-direction: column; }
    .main-webzine__title { margin-bottom: 24px; font-size: 28px; }
    .main-change__header { margin-bottom: 24px; }
    .main-change__list { max-height: none; height: auto; }
    .main-change__item { aspect-ratio: 4 / 3; }
    .main-change__link { border-radius: 16px; }
    .main-change__title { font-size: 20px; }

    /* Section 5: Funding */
    .main-funding { margin-top: 80px; }
    .main-funding .container__wide { margin-bottom: 32px; }
    .main-funding__title { font-size: 28px; }

    /* Section 6: Story */
    .main-story__body { flex-direction: column; }
    .main-story__media { width: 100%; }
    .main-story__video--md { flex: 1 1 calc(50% - 8px); }
    .main-story__news { width: 100%; }
}

@media (max-width: 768px) {
    :root { --main-hero-height: auto; }

    /* Section1: Main Hero */
    .main-hero .container { margin-top: 66px; }
    .main-donation__character { display: none; }
    .main-swiper .swiper-slide { height: auto; }
    .main-donation__form { width: 100%; }
    .main-banner { flex-direction: column; gap: 16px; height: auto; }
    .main-banner__img { width: 100%; height: auto; border-radius: 16px; }
    .main-banner__body { flex: none; height: auto; overflow: visible; padding-top: 0; }
    .main-banner__label { font-size: 16px; }
    .main-banner__title { margin-bottom: 24px; font-size: 7vw; }
    .main-banner__link { display: none; }
    .main-banner__img[data-href] { cursor: pointer; }
    .main-swiper__control { justify-content: space-between; position: relative; width: 100%; }
    .main-swiper__control .swiper-pagination { position: relative; left: 0; bottom: auto; transform: translateX(0); }

    /* Section 2: How to Donate */
    .main-how__nav { width: 24px; height: 24px; }
    .main-how__nav-prev { left: -10px; }
    .main-how__nav-next { right: -10px; }
    .main-how__item { flex: 0 0 94px; }
    .main-how__item.swiper-slide { width: 94px; }
    .main-how__link { padding-block: 18px; padding-inline: 0; }
    .main-how__icon { width: 36px; height: 36px; }
    .main-how__label { font-size: 14px; white-space: nowrap; padding-inline: 4px; }

    /* Section 3: Notice */
    .main-notice { display: none; }

    /* Section 4: Webzine */
    .main-webzine { padding-block: 56px; }
    .main-webzine__title { margin-bottom: 24px; font-size: 24px; }
    .main-change__header { margin-bottom: 24px; }
    .main-change__more { height: 32px; padding-inline: 10px 8px; font-size: 13px; }
    .main-honor__emblem { top: 24px; left: 24px; width: 80px; }
    .main-honor__card { width: min(180px, 46vw); height: min(180px, 46vw); padding: 24px; right: 16px; bottom: 16px; }
    .main-honor__card-sub { font-size: 16px; }
    .main-honor__card-title { margin-bottom: 12px; font-size: 18px; }
    .main-honor__goto { font-size: 14px; }
    .main-change__list { grid-template-columns: 1fr; grid-template-rows: none; }
    .main-change__item { min-width: 100%; min-height: 240px; }
    .main-change__title { padding: 20px; }

    /* Section 5: Funding */
    .main-funding { margin-top: 56px; }
    .main-funding .container__wide { margin-bottom: 24px; }
    .main-funding__title { font-size: 24px; }
    .main-funding__nav { width: 32px; height: 32px; }
    .main-funding__more { height: 32px; padding-inline: 10px 8px; font-size: 13px; }
    .main-funding__viewport { padding-left: 16px; padding-right: 16px; }
    .main-funding__bg { border-radius: 0 12px 12px 12px; }
    .main-funding__badge { transform: scale(0.8); transform-origin: top left; }
    .main-funding__text { padding-block: 12px 32px; padding-inline: 8px; }
    .main-funding__card-title { min-height: 50px; margin-bottom: 4px; font-size: 20px; }
    .main-funding__percent { font-size: 16px; }
    .main-funding__gauge { height: 6px; }

    /* Section 6: Story */
    .main-story { margin-top: 56px; margin-bottom: 80px; }
    .main-story__title { margin-bottom: 24px; font-size: 24px; }
    .main-story__body { gap: 32px; }
    .main-story__media { display: flex; flex-direction: column; gap: 12px; }
    .main-story__video,
    .main-story__video--lg,
    .main-story__video--md { flex: 1 1 auto; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; }
    .main-story__play { width: 48px; }
    .main-story__board-head { padding-bottom: 16px; }
    .main-story__tab { padding: 8px 12px; font-size: 14px; }
    .main-story__more { height: 32px; padding-inline: 10px 8px; font-size: 13px; }
    .main-story__board-link { gap: 6px; padding-block: 0; }
    .main-story__board-title { font-size: 15px; }
    .main-story__board-date { font-size: 13px; }
    .main-story__link-item { width: calc(100% / 3); }
    .main-story__link-icon { width: 28px; height: 28px; }
    .main-story__link-label { margin-top: 8px; font-size: 14px; }
    .main-story__link-label .desktop-break { display: none; }
}


/* Animations */
@keyframes characterSprite {
    0% {
        background-position: 0 0;
    }
    66.67% {
        background-position: 0 0;
        animation-timing-function: steps(5, end);
    }
    100% {
        background-position: -1520px 0;
    }
}