@charset "utf-8";
@font-face {
  font-family: "YeogiOttaeJalnan";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff")
    format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eommakkaturi";
  src: url("https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/Katuri.woff")
    format("woff");
  font-weight: normal;
  font-display: swap;
}

/* #region font size */
@media (min-width: 1921px) {
  html {
    font-size: clamp(0px, calc((100 / 1920) * 1vw), 100px);
  }
}
@media (width: 1920px) {
  /*
	1920px 해상도 환경: 글꼴 크기 6.25% 고정값 적용
	브라우저 기본 글꼴 크기 대응을 위한 최적화 설정
	다른 해상도에서는 clamp 함수로 동적 크기 조정을 하지만,
	1920px에서는 브라우저 기본 글꼴 크기 기준 6.25% 고정 비율로
	일관된 글꼴 표시 보장
	*/
  html {
    font-size: 6.25%;
  }
}
@media (max-width: 1919px) and (min-width: 1280px) {
  html {
    font-size: clamp(0px, calc((100 / 1400) * 0.92 * 1vw), 1px);
  }
}
@media (max-width: 1279px) and (min-width: 768px) {
  html {
    font-size: clamp(0px, calc((100 / 768) * 1vw), 1px);
  }
}
@media (max-width: 767px) {
  html {
    font-size: clamp(0px, calc((100 / 360) * 1vw), 1px);
  }
}
/* #endregion font size */

/* #region 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */
@media (min-width: 768px) {
  #content .show-mob {
    display: none;
  }
}
@media (min-width: 1280px) {
  #content .show-tab {
    display: none;
  }
}
@media (max-width: 1279px) {
  #content .hide-tab {
    display: none;
  }
}
@media (max-width: 767px) {
  #content .hide-mob {
    display: none;
  }
}
/* #endregion 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */

/* #region base */
.page-event {
  --primary: #faa32d;
  --secondary: #f7a536;
  --tertiary: #f48c30;
  --border-color: #ede5d0;
  --container: 1400;
  --container-edge-offset: calc((100vw - 40rem) / 2);
  --section-padding-block-min: 60rem;
  --font-pret: "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
  --font-jal: "YeogiOttaeJalnan", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
  --font-mont: "Montserrat", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
  --font-ekt: "Eommakkaturi", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
  --font-sans: var(--font-pret);
  .container {
    position: relative;
    margin-inline: auto;
    max-width: calc(var(--container) * 1rem);
    width: calc(100% - 40rem);
    &.container--fluid {
      max-width: none;
      width: auto;
    }
  }
  .visually-hidden {
    contain: content;
    position: absolute;
    width: 0;
    height: 0;
    clip-path: rect(0 0 0 0);
  }
  .reverse-selection::selection,
  .reverse-selection *::selection {
    background: #fff;
    color: var(--primary);
  }
  .text-primary {
    color: var(--primary);
  }
  body:has(&) {
    #content {
      padding: 0;
    }
    .area-subVisual,
    .area_tab {
      display: none;
    }
  }

  --font-min-xl: 32rem;
  /* 60–70 */
  --font-min-lg: 24rem;
  /* 50–59 */
  --font-min-md: 20rem;
  /* 36–49 */
  --font-min-sm: 18rem;
  /* 26–35 */
  --font-min-xs: 16rem;
  /* 16–25 */
  --font-min-xxs: 14rem;
  /* 15 */
  --font-min-minimum: 12rem;
  /* 12 */

  --font-size-heading-xl: var(--font-size-32);
  --font-size-heading-md: var(--font-size-24);
  --font-size-body-lg: var(--font-size-18);
  --font-size-body: var(--font-size-16);
  --font-size-caption: var(--font-size-13);

  --font-size-70: clamp(
    var(--font-min-xl),
    calc(70 / var(--container) * 100vw),
    70rem
  );
  --font-size-69: clamp(
    var(--font-min-xl),
    calc(69 / var(--container) * 100vw),
    69rem
  );
  --font-size-68: clamp(
    var(--font-min-xl),
    calc(68 / var(--container) * 100vw),
    68rem
  );
  --font-size-67: clamp(
    var(--font-min-xl),
    calc(67 / var(--container) * 100vw),
    67rem
  );
  --font-size-66: clamp(
    var(--font-min-xl),
    calc(66 / var(--container) * 100vw),
    66rem
  );
  --font-size-65: clamp(
    var(--font-min-xl),
    calc(65 / var(--container) * 100vw),
    65rem
  );
  --font-size-64: clamp(
    var(--font-min-xl),
    calc(64 / var(--container) * 100vw),
    64rem
  );
  --font-size-63: clamp(
    var(--font-min-xl),
    calc(63 / var(--container) * 100vw),
    63rem
  );
  --font-size-62: clamp(
    var(--font-min-xl),
    calc(62 / var(--container) * 100vw),
    62rem
  );
  --font-size-61: clamp(
    var(--font-min-xl),
    calc(61 / var(--container) * 100vw),
    61rem
  );
  --font-size-60: clamp(
    var(--font-min-xl),
    calc(60 / var(--container) * 100vw),
    60rem
  );

  --font-size-59: clamp(
    var(--font-min-lg),
    calc(59 / var(--container) * 100vw),
    59rem
  );
  --font-size-58: clamp(
    var(--font-min-lg),
    calc(58 / var(--container) * 100vw),
    58rem
  );
  --font-size-57: clamp(
    var(--font-min-lg),
    calc(57 / var(--container) * 100vw),
    57rem
  );
  --font-size-56: clamp(
    var(--font-min-lg),
    calc(56 / var(--container) * 100vw),
    56rem
  );
  --font-size-55: clamp(
    var(--font-min-lg),
    calc(55 / var(--container) * 100vw),
    55rem
  );
  --font-size-54: clamp(
    var(--font-min-lg),
    calc(54 / var(--container) * 100vw),
    54rem
  );
  --font-size-53: clamp(
    var(--font-min-lg),
    calc(53 / var(--container) * 100vw),
    53rem
  );
  --font-size-52: clamp(
    var(--font-min-lg),
    calc(52 / var(--container) * 100vw),
    52rem
  );
  --font-size-51: clamp(
    var(--font-min-lg),
    calc(51 / var(--container) * 100vw),
    51rem
  );
  --font-size-50: clamp(
    var(--font-min-lg),
    calc(50 / var(--container) * 100vw),
    50rem
  );

  --font-size-49: clamp(
    var(--font-min-md),
    calc(49 / var(--container) * 100vw),
    49rem
  );
  --font-size-48: clamp(
    var(--font-min-md),
    calc(48 / var(--container) * 100vw),
    48rem
  );
  --font-size-47: clamp(
    var(--font-min-md),
    calc(47 / var(--container) * 100vw),
    47rem
  );
  --font-size-46: clamp(
    var(--font-min-md),
    calc(46 / var(--container) * 100vw),
    46rem
  );
  --font-size-45: clamp(
    var(--font-min-md),
    calc(45 / var(--container) * 100vw),
    45rem
  );
  --font-size-44: clamp(
    var(--font-min-md),
    calc(44 / var(--container) * 100vw),
    44rem
  );
  --font-size-43: clamp(
    var(--font-min-md),
    calc(43 / var(--container) * 100vw),
    43rem
  );
  --font-size-42: clamp(
    var(--font-min-md),
    calc(42 / var(--container) * 100vw),
    42rem
  );
  --font-size-41: clamp(
    var(--font-min-md),
    calc(41 / var(--container) * 100vw),
    41rem
  );
  --font-size-40: clamp(
    var(--font-min-md),
    calc(40 / var(--container) * 100vw),
    40rem
  );
  --font-size-39: clamp(
    var(--font-min-md),
    calc(39 / var(--container) * 100vw),
    39rem
  );
  --font-size-38: clamp(
    var(--font-min-md),
    calc(38 / var(--container) * 100vw),
    38rem
  );
  --font-size-37: clamp(
    var(--font-min-md),
    calc(37 / var(--container) * 100vw),
    37rem
  );
  --font-size-36: clamp(
    var(--font-min-md),
    calc(36 / var(--container) * 100vw),
    36rem
  );

  --font-size-35: clamp(
    var(--font-min-sm),
    calc(35 / var(--container) * 100vw),
    35rem
  );
  --font-size-34: clamp(
    var(--font-min-sm),
    calc(34 / var(--container) * 100vw),
    34rem
  );
  --font-size-33: clamp(
    var(--font-min-sm),
    calc(33 / var(--container) * 100vw),
    33rem
  );
  --font-size-32: clamp(
    var(--font-min-sm),
    calc(32 / var(--container) * 100vw),
    32rem
  );
  --font-size-31: clamp(
    var(--font-min-sm),
    calc(31 / var(--container) * 100vw),
    31rem
  );
  --font-size-30: clamp(
    var(--font-min-sm),
    calc(30 / var(--container) * 100vw),
    30rem
  );
  --font-size-29: clamp(
    var(--font-min-sm),
    calc(29 / var(--container) * 100vw),
    29rem
  );
  --font-size-28: clamp(
    var(--font-min-sm),
    calc(28 / var(--container) * 100vw),
    28rem
  );
  --font-size-27: clamp(
    var(--font-min-sm),
    calc(27 / var(--container) * 100vw),
    27rem
  );
  --font-size-26: clamp(
    var(--font-min-sm),
    calc(26 / var(--container) * 100vw),
    26rem
  );

  --font-size-25: clamp(
    var(--font-min-xs),
    calc(25 / var(--container) * 100vw),
    25rem
  );
  --font-size-24: clamp(
    var(--font-min-xs),
    calc(24 / var(--container) * 100vw),
    24rem
  );
  --font-size-23: clamp(
    var(--font-min-xs),
    calc(23 / var(--container) * 100vw),
    23rem
  );
  --font-size-22: clamp(
    var(--font-min-xs),
    calc(22 / var(--container) * 100vw),
    22rem
  );
  --font-size-21: clamp(
    var(--font-min-xs),
    calc(21 / var(--container) * 100vw),
    21rem
  );
  --font-size-20: clamp(
    var(--font-min-xs),
    calc(20 / var(--container) * 100vw),
    20rem
  );
  --font-size-20-to-14: clamp(
    14rem,
    calc(20 / var(--container) * 100vw),
    20rem
  );
  --font-size-19: clamp(
    var(--font-min-xs),
    calc(19 / var(--container) * 100vw),
    19rem
  );
  --font-size-18: clamp(
    var(--font-min-xs),
    calc(18 / var(--container) * 100vw),
    18rem
  );
  --font-size-18-to-14: clamp(
    14rem,
    calc(18 / var(--container) * 100vw),
    18rem
  );
  --font-size-17: clamp(
    var(--font-min-xs),
    calc(17 / var(--container) * 100vw),
    17rem
  );
  --font-size-16: clamp(
    var(--font-min-xxs),
    calc(16 / var(--container) * 100vw),
    16rem
  );
  --font-size-16-to-12: clamp(
    12rem,
    calc(16 / var(--container) * 100vw),
    16rem
  );
  --font-size-15: clamp(
    var(--font-min-xxs),
    calc(15 / var(--container) * 100vw),
    15rem
  );

  --font-size-14: clamp(
    var(--font-min-minimum),
    calc(14 / var(--container) * 100vw),
    14rem
  );
  --font-size-13: clamp(
    var(--font-min-minimum),
    calc(13 / var(--container) * 100vw),
    13rem
  );
}
/* #endregion base */

.page-event {
  word-break: keep-all;
  .ui-button-arrow {
    display: flex;
    align-items: center;
    gap: 1.36363636em;
    width: fit-content;
    padding: 1.13636364em clamp(2em, calc(59 / var(--container) * 100vw), 59rem);
    background: #000;
    border-radius: 5em;
    font-size: var(--font-size-22);
    color: #fff;
  }
  .ui-button-arrow--bg-secondary {
    background: var(--secondary);
  }
  .ui-button-arrow::after {
    content: "";
    display: block;
    width: 0.36363636em;
    aspect-ratio: 8/12;
    background: url("/images/event-2025/ui-right-arrow.svg") no-repeat 50% /
      contain;
  }
  .section-hero {
    contain: content;
    padding-top: clamp(110rem, calc(140 / var(--container) * 100vw), 140rem);
    background: #fef0e5 url("/images/event-2025/hero-bg.webp") no-repeat 50%
      100% / 210%;
    text-align: center;
    isolation: isolate;
    @media (width >= 768px) {
      padding-bottom: clamp(
        250rem,
        calc(389 / var(--container) * 100vw),
        389rem
      );
      background-size: cover;
    }
    @media (width < 768px) {
      padding-bottom: clamp(180rem, calc(320 / 768 * 100vw), 320rem);
    }
    .eyebrow {
      position: relative;
      margin-inline: auto;
      width: fit-content;
      font: var(--font-size-50) var(--font-ekt);
      color: #2b2b2b;
    }
    .eyebrow-text {
      display: block;
      margin-bottom: -1.36em;
      padding: 0.58em 0.92em 1.94em;
      background: #fff;
      border-radius: 1em 1em 0 0;
    }
    .flower-1 {
      content: "";
      position: absolute;
      top: 0.46em;
      left: -1.06em;
      width: 1.62em;
      aspect-ratio: 81/66;
      background: url("/images/event-2025/hero-flower-1.svg") no-repeat 50% /
        contain;
    }
    .flower-2 {
      content: "";
      position: absolute;
      top: -1.14em;
      right: -2.34em;
      z-index: -2;
      width: 4.66em;
      aspect-ratio: 233/250;
      background: url("/images/event-2025/hero-flower-2.svg") no-repeat 50% /
        contain;
    }
    .heading {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0lh 0.4ch;
      font: var(--font-size-70) / 1.2 var(--font-jal);
      letter-spacing: 0;
      color: #ffce55;
    }
    :where(.heading-1, .heading-2) {
      position: relative;
      display: inline-block;
      letter-spacing: -0.0175em;
      color: #0000;
      user-select: none;
    }
    .heading-1::before {
      content: "";
      position: absolute;
      top: 55%;
      left: 49.8%;
      translate: -50% -50%;
      width: 9.08571429em;
      aspect-ratio: 636/97;
      background: url("/images/event-2025/hero-heading-1.png?v=1") no-repeat 50% /
        contain;
    }
    .heading-2::before {
      content: "";
      position: absolute;
      top: 51.6%;
      left: 51%;
      translate: -50% -50%;
      aspect-ratio: 530/90;
      width: 7.57142857em;
      background: url("/images/event-2025/hero-heading-2.png?v=1") no-repeat 50% /
        contain;
    }
    :where(.heading-1, .heading-2)::after {
      content: "";
      position: absolute;
      inset: 25% 0;
      z-index: -1;
      background: #fff;
    }
    .description {
      margin: 1.8em auto 0;
      width: fit-content;
      padding: 0.6em 0.88em;
      background: linear-gradient(90deg, #fa5973, #ff8975);
      border: 3rem solid currentColor;
      border-radius: 5em;
      box-shadow: 0 0 14rem #00000026;
      font: 700 var(--font-size-25) var(--font-sans);
      letter-spacing: 0.045em;
      color: #fff;
      text-wrap: balance;
    }
    .counter {
      position: absolute;
      width: 3.4em;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.26em;
      aspect-ratio: 1;
      background: #fff;
      border: clamp(3rem, 0.1em, 5rem) solid #ffd028;
      border-radius: 50% 50% 50% 20rem;
      box-shadow: 0 6rem 14.8rem #00000026;
      font: 700 var(--font-size-50) / 1 var(--font-jal);
      text-align: center;
      animation-name: shake;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-delay: 0.5s;
      @media (width >= 1900px) {
        top: 13.6%;
        right: 5.8%;
      }
      @media (width < 1900px) {
        top: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);
        right: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);
      }
    }
    .counter-label {
      font-size: var(--font-size-20);
      font-size: clamp(12rem, 0.4em, 20rem);
      text-transform: capitalize;
    }
    .counter-value {
      color: var(--primary);
    }
  }
  .section-public-service-campaign {
    padding-block: clamp(
      var(--section-padding-block-min),
      calc(140 / var(--container) * 100vw),
      140rem
    );
    .heading {
      margin-inline: auto;
      max-width: 86ch;
      font: var(--font-size-24) / 1.45833333 var(--font-sans);
      text-align: center;
    }
    .list {
      margin-top: 60rem;
      display: grid;
      grid-template-columns: 1fr;
      gap: 22rem;
      text-align: center;
    }
    @media (min-width: 768px) {
      .list {
        grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
      }
    }
    .item {
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: center;
      align-items: center;
      padding: 28rem;
      background: #fff6f0;
      border: 1px solid #f5dece;
      border-radius: 20rem;
    }
    .item > .item-warp {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 24px;
      justify-content: center;
      align-items: center;

      .host-wrap {
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: center;

        & > dt {
          font: 700 var(--font-size-16) / 1.2 var(--font-jal);
          color: var(--primary);
        }

        & > img {
          height: 34px;
        }
      }
    }
    @media (min-width: 1024px) {
      .item > .item-warp {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 48px;
      }
    }
    .label {
      font: 600 var(--font-size-20) var(--font-sans);
    }
    .value {
      /* margin-top: 0.54166667em; */
      font: 700 var(--font-size-24) / 1.2 var(--font-jal);
      color: var(--primary);
    }
    @media (width >=768px) {
      background: url("/images/event-2025/public-service-campaign-bg.svg")
        no-repeat 100.1% 100.9% / min(400rem, 30%);
    }
  }
  .section-croquiky-brothers {
    contain: content;
    padding-block: clamp(
      var(--section-padding-block-min),
      calc(140 / var(--container) * 100vw),
      140rem
    );
    background: #f9f5e4 url("/images/event-2025/croquiky-brothers-bg.webp")
      no-repeat 50% / cover;
    /* .container {
      display: grid;
      gap: clamp(40rem, calc(103 / var(--container) * 100vw), 103rem) 14rem;
    } */
    .content-croquiky {
      display: flex;
      flex-direction: column;
      gap: clamp(32px, calc(100 / var(--container) * 100vw), 100px);
    }
    .wrap-croquiky {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 48px;
    }
    @media (min-width: 1024px) {
      .wrap-croquiky {
        flex-direction: row;
      }
    }
    .eyebrow {
      margin-top: -1px;
      font: 600 var(--font-size-30) var(--font-sans);
      color: var(--primary);
    }
    .heading {
      margin-top: 0.52em;
      font: 700 var(--font-size-50) var(--font-jal);
      color: var(--primary);
      small {
        display: inline-block;
        font: 600 0.6em var(--font-sans);
      }
      @media (width >= 768px) {
        white-space: nowrap;
      }
      @media (width < 768px) {
        margin-bottom: 1em;
        line-height: 1;
      }
    }
    .byline {
      margin-top: 7rem;
      width: fit-content;
      padding: 0.54166667em 0.83333333em;
      background: #fff;
      border-radius: 5em;
      font: var(--font-size-24) var(--font-sans);
    }
    .description {
      position: relative;
      margin-top: 4.16666667em;
      font: var(--font-size-24) / 1.45833333 var(--font-sans);
    }
    .description::before {
      content: "";
      position: absolute;
      top: -2.125em;
      width: 4.16666667em;
      border-top: 1px solid currentColor;
    }
    .illustration {
      display: block;
      max-width: 680rem;
      width: 100%;
      height: auto;
    }
    /* .scroll-x {
      overflow: auto clip;
      overflow-clip-margin: 50px;
      grid-column: 1/-1;
      margin-inline: calc(var(--container-edge-offset) * -1);
      padding-inline: var(--container-edge-offset);
    } */
    .award-list {
      /* display: grid;
      gap: 30rem;
      min-width: 920rem; */
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 32px;

      .card-1 {
        background: url("/images/event-2025/croquiky-card-1.webp") no-repeat 50% /
          cover;
      }
      .card-2 {
        background: url("/images/event-2025/croquiky-card-2.webp") no-repeat 50% /
          cover;
      }
      .card-3 {
        background: url("/images/event-2025/croquiky-card-3.webp") no-repeat 50% /
          cover;
      }
    }
    @media (min-width: 1024px) {
      .award-list {
        flex-direction: row;
      }
    }
    .award-item {
      contain: content;
      align-content: end;
      width: 100%;
      min-width: 300px;
      height: 472px;
      /* background: #fff
        linear-gradient(
          180deg,
          rgba(239, 129, 31, 0) 50%,
          rgba(239, 129, 31, 0.8) 100%
        ); */
      border-radius: 20rem;
      box-shadow: 0px 0px 24px #0000000d;
    }
    .details-list {
      display: flex;
      flex-direction: column;
      min-height: 250px;
      gap: 8px;
      padding: clamp(16rem, calc(31 / var(--container) * 100vw), 31rem)
        clamp(16rem, calc(32 / var(--container) * 100vw), 32rem)
        clamp(16rem, calc(32 / var(--container) * 100vw), 32rem)
        clamp(32rem, calc(59 / var(--container) * 100vw), 59rem);
      background: #ef811f99;
      backdrop-filter: blur(32px);
      font: 400 var(--font-size-18) / 1.4 var(--font-sans);
      color: #fff;
    }
    .details-item {
      position: relative;
    }
    .details-item::before {
      content: "";
      position: absolute;
      top: 0.55lh;
      left: -1.5ch;
      translate: 0 -50%;
      width: 5rem;
      aspect-ratio: 1;
      background: currentColor;
      border-radius: 50%;
    }
    /* @media (width >=768px) {
      .container {
        display: grid;
        grid-template-columns: 706fr 680fr;
      }
      .award-list {
        grid-template-columns: repeat(3, 1fr);
      }
    } */
    /* @media (width >=1280px) {
      .award-list {
        grid-template-columns: repeat(3, 1fr);
      }
    } */
    @media (width<768px) {
      .description br {
        display: none;
      }
    }
    /* .award-list {
      grid-template-columns: repeat(3, 1fr);
    } */
  }
  .section-encouragement {
    contain: content;
    padding-top: clamp(
      var(--section-padding-block-min),
      calc(130 / var(--container) * 100vw),
      130rem
    );
    background: #6f6869 url("/images/event-2025/encouragement-bg.webp")
      no-repeat 50% / cover;
    background-attachment: fixed;
    color: #fff;
    .container {
      display: grid;
    }
    .eyebrow {
      font-size: var(--font-size-30);
    }
    .heading {
      margin-block: 0.8em 0.36em;
      font: 700 var(--font-size-50) / 1.5 var(--font-jal);
      text-wrap: balance;
    }
    .description {
      max-width: calc(var(--font-size-50) * 17.34);
      font: var(--font-size-24) / 1.45833333 var(--font-sans);
    }
    .visual {
      margin: 40rem 2.6% 0 auto;
      width: 100%;
      aspect-ratio: 650/406;
      background: url("/images/event-2025/encouragement-visual.webp") no-repeat
        50% / contain;
    }
    @media (width >= 1280px) {
      & {
        padding-bottom: clamp(
          var(--section-padding-block-min),
          calc(130 / var(--container) * 100vw),
          130rem
        );
      }
      .visual {
        position: absolute;
        right: 10%;
        bottom: 0;
        right: 0;
        max-width: 33.85416667%;
      }
    }
    @media (width < 1280px) {
      .visual {
        max-width: min(85%, 550rem);
      }
    }
  }
  .section-promotional-video {
    padding-block: clamp(
      var(--section-padding-block-min),
      calc(80 / var(--container) * 100vw),
      80rem
    );
    background: url("/images/event-2025/banner-promo-vid.webp") no-repeat 50% /
      cover;
    /* .player-block {
      background: url("/images/event-2025/banner-promo-vid.webp") no-repeat 50% /
        100%;
    } */
    .player-border {
      margin-inline: auto;
      max-width: 920rem;
      background: #fff;
      border: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem) solid
        #fff;
      border-radius: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
      box-shadow: 0 0 25rem #0000000d;
    }
    .player {
      display: block;
      width: 100%;
      aspect-ratio: 16/9;
      height: auto;
      border: 0;
    }
    .description {
      margin-top: 2.22222222em;
      font: var(--font-size-18) / 1.66666667 var(--font-sans);
      text-align: center;
    }
    @media (width < 768px) {
      .description br {
        display: none;
      }
    }
  }
  .section-pompe-disease-introduction {
    padding-block: clamp(
        var(--section-padding-block-min),
        calc(117 / var(--container) * 100vw),
        117rem
      )
      clamp(
        var(--section-padding-block-min),
        calc(130 / var(--container) * 100vw),
        130rem
      );
    .heading {
      font: 700 var(--font-size-50) var(--font-jal);
      color: var(--secondary);
      text-align: center;
    }
    .overview-list {
      margin-top: clamp(50rem, calc(85 / var(--container) * 100vw), 85rem);
      display: grid;
      gap: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
      counter-reset: index;
    }
    .overview-item {
      padding: clamp(16rem, calc(40 / var(--container) * 100vw), 40rem)
        clamp(16rem, calc(40 / var(--container) * 100vw), 40rem)
        clamp(16rem, calc(42 / var(--container) * 100vw), 42rem);
      background: #f6f6f6;
      border-radius: 20rem;
    }
    .title {
      margin-bottom: 25rem;
      display: flex;
      align-items: center;
      gap: 1em;
      padding-bottom: 21rem;
      border-bottom: 1px solid #ddd;
      font: 700 var(--font-size-30) var(--font-jal);
    }
    .title::before {
      counter-increment: index;
      content: counter(index, decimal-leading-zero);
      display: block;
      width: 2.55em;
      aspect-ratio: 1;
      align-content: center;
      background: var(--secondary);
      border-radius: 50%;
      font: 700 var(--font-size-20) var(--font-jal);
      color: #fff;
      text-align: center;
    }
    .subtitle {
      font: 700 var(--font-size-24) var(--font-sans);
    }
    .details-list {
      margin-top: 1.3em;
      display: grid;
      gap: 0.17lh;
      font: var(--font-size-20) / 1.5 var(--font-sans);
    }
    .details-item {
      position: relative;
      padding-left: 1.5em;
    }
    .details-item::before {
      content: "";
      position: absolute;
      top: 0.55lh;
      left: 1.3ch;
      display: block;
      width: 4rem;
      aspect-ratio: 1;
      background: currentColor;
      border-radius: 50%;
      translate: -50% -50%;
    }
    .link-block {
      margin-top: clamp(50rem, calc(80 / var(--container) * 100vw), 80rem);
      display: flex;
      justify-content: center;
      gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);
      font-size: var(--font-size-22);
      color: #fff;
    }
    .note {
      margin-top: 2.5em;
      font-size: var(--font-size-20);
      text-align: center;
      text-wrap: balance;
    }
    @media (width >=768px) {
      .overview-list {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
  .section-storytoon {
    position: relative;
    padding-block: clamp(
        var(--section-padding-block-min),
        calc(117 / var(--container) * 100vw),
        117rem
      )
      clamp(
        var(--section-padding-block-min),
        calc(130 / var(--container) * 100vw),
        130rem
      );
    background: #f9f5e4;
    .container {
      display: grid;
    }
    .heading {
      font: 700 var(--font-size-50) var(--font-jal);
      text-align: center;
      text-wrap: balance;
    }
    .panel {
      padding: clamp(24rem, calc(48 / var(--container) * 100vw), 48rem);
      background: #fff;
      border: 2rem solid var(--border-color);
      border-radius: 20rem;
      box-shadow: 0px 0px 24px #0000000d;
    }
    .split {
      margin-top: clamp(60rem, calc(85 / var(--container) * 100vw), 85rem);
      display: grid;
      gap: 24rem clamp(10rem, calc(30 / var(--container) * 100vw), 30rem);
    }
    .title {
      font: 700 var(--font-size-32) var(--font-sans);
      color: var(--primary);
    }
    .description {
      margin-top: 1em;
      font: var(--font-size-18) / 1.94444444 var(--font-sans);
    }
    .summary-text {
      margin-top: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem);
      font: var(--font-size-24) / 1.45833333 var(--font-sans);
      text-align: center;
      text-wrap: balance;
    }
    .poster-block {
      margin-top: clamp(50rem, calc(80 / var(--container) * 100vw), 80rem);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(200rem, 100%), 1fr));
      gap: clamp(16rem, calc(24 / var(--container) * 100vw), 24rem);
      padding: clamp(16rem, calc(25 / var(--container) * 100vw), 25rem);
      background: #fff;
      border: 5rem solid var(--border-color);
      border-radius: 30rem;

      & > figure {
        cursor: pointer;
      }
    }
    .poster {
      display: block;
      width: 100%;
      height: auto;
      border: 1px solid #eee;
      border-radius: 10rem;
    }
    .poster-caption {
      margin-top: 1.5em;
      display: block;
      font-size: var(--font-size-20);
      text-align: center;
    }
    .like-btn {
      display: flex;
      gap: 4px;
      align-items: center;
      width: fit-content;
      margin: clamp(50rem, calc(80 / var(--container) * 100vw), 80rem) auto 0;
      padding: 24px 48px;
      background: #fff;
      border: 2rem solid var(--border-color);
      border-radius: 5em;
      font-size: var(--font-size-22);
    }
    .like-btn:hover {
      background: #f8f8f8;
    }
    .like-btn.active {
      background: #ff4b4b;
      color: #fff;
    }
    .heart {
      color: red;
    }
    .like-btn.active .heart {
      color: #fff;
    }
    @media (width >=768px) {
      .split {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .modal-comic {
      display: none;
    }
    .modal-comic.show {
      position: fixed;
      inset: 0;
      z-index: 999;
      display: flex;
      width: 100%;
      height: 100vh;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(25px);

      /* .modal {
        width: 100%;
        max-width: 600px;
        height: 200px;
        background-color: #fff;
        color: #000;
      } */
    }
    @media (min-width: 480px) {
      .modal-comic.show {
        padding: 32px;
      }
    }
    .modal-eps-1,
    .modal-eps-2,
    .modal-eps-3 {
      display: none;
    }
    .modal-eps-1.active,
    .modal-eps-2.active,
    .modal-eps-3.active {
      width: 100%;
      max-width: 1300px;
      margin: 12px auto;
      height: calc(100dvh - 200px);
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;

      /* ===== Header (sesuai CSS kamu) ===== */
      .head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 24px;
        background: #f08221 url(/images/event-2025/participating-event-bg.webp)
          no-repeat 50% / cover;

        .title {
          font: 700 var(--font-size-28, 28px) var(--font-jal, system-ui);
          color: #fff;
          text-align: center;
          letter-spacing: 0.3px;
        }

        > button {
          background: transparent;
          border: 0;
          width: 40px;
          height: 40px;
          display: grid;
          place-items: center;
          border-radius: 10px;
          outline: none;
          cursor: pointer;
          transition: transform 0.12s ease;
          &:active {
            transform: scale(0.96);
          }

          > i {
            font-size: clamp(24px, calc(32 / var(--container) * 100vw), 32px);
            color: #fff;
            line-height: 1;
          }
        }
      }

      /* ===== Body scroll area ===== */
      .body {
        overflow: auto;
        padding: clamp(24px, 2.4vw, 65px);
        /* background: #faf8f6; */

        .container {
          display: flex;
          flex-direction: column;
          gap: 64px;
          width: 100%;
        }

        @media (min-width: 480px) {
          .container {
            width: 60%;
          }
        }
      }

      /* ===== Responsive ===== */
      @media (max-width: 480px) {
        margin: 0;
        max-width: none;
        height: 100dvh;
        border-radius: 0;

        .head {
          padding: 20px;
        }
      }
    }
  }
  .section-interview {
    position: relative;
    padding-block: clamp(
        var(--section-padding-block-min),
        calc(115 / var(--container) * 100vw),
        115rem
      )
      clamp(
        var(--section-padding-block-min),
        calc(130 / var(--container) * 100vw),
        130rem
      );
    background: #f6f6f6 url("/images/event-2025/interview-bg.svg") no-repeat
      100% 0% / 473rem;
    .heading {
      font: 700 var(--font-size-50) var(--font-jal);
      color: var(--primary);
      text-align: center;
    }
    .list {
      margin-top: clamp(50rem, calc(65 / var(--container) * 100vw), 65rem);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(200rem, 100%), 1fr));
      gap: clamp(16rem, calc(24 / var(--container) * 100vw), 24rem);
      padding: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
      background: #fff;
      border-radius: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
    }
    .author-image {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 10rem;
    }
    .author-name {
      margin-top: 1.45em;
      font: 700 var(--font-size-20) var(--font-sans);
      text-align: center;
    }
    .card-item-interview {
      cursor: pointer;
    }
    .modal-interview {
      display: none;
    }
    .modal-interview.show {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      display: flex;
      width: 100%;
      height: 100vh;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(25px);

      .modal {
        width: 100%;
        max-width: 600px;
        height: 200px;
        background-color: #fff;
        color: #000;
      }
    }
    @media (min-width: 480px) {
      .modal-interview.show {
        padding: 32px;
      }
    }
    .modal-eps-1,
    .modal-eps-2,
    .modal-eps-3 {
      display: none;
    }
    .modal-eps-1.active,
    .modal-eps-2.active,
    .modal-eps-3.active {
      width: 100%;
      max-width: 1300px;
      margin: 12px auto;
      height: calc(100dvh - 200px);
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;

      /* ===== Header (sesuai CSS kamu) ===== */
      .head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 32px;
        background: #f08221 url(/images/event-2025/participating-event-bg.webp)
          no-repeat 50% / cover;

        .title {
          font: 700 var(--font-size-32, 28px) var(--font-jal, system-ui);
          color: #fff;
          text-align: center;
          letter-spacing: 0.3px;
        }

        > button {
          background: transparent;
          border: 0;
          width: 40px;
          height: 40px;
          display: grid;
          place-items: center;
          border-radius: 10px;
          outline: none;
          cursor: pointer;
          transition: transform 0.12s ease;
          &:active {
            transform: scale(0.96);
          }

          > i {
            font-size: clamp(24px, calc(32 / var(--container) * 100vw), 32px);
            color: #fff;
            line-height: 1;
          }
        }
      }

      /* ===== Body scroll area ===== */
      .body {
        overflow: auto;
        padding: clamp(24px, 2.4vw, 65px);
        background: #faf8f6;

        .container {
          display: flex;
          flex-direction: column;
          gap: 64px;
          width: 100%;
        }
      }

      /* ===== Question balloon ===== */
      .question {
        position: relative;
        max-width: 680px;
        background: #fff;
        border: 2px solid #ffd3ac;
        padding: 20px 22px;
        border-radius: 14px;
        color: #222;
        line-height: 1.6;
        box-shadow: 0 6px 0 #ffe4cc;

        &::after {
          content: "";
          position: absolute;
          left: 32px;
          bottom: -16px;
          border: 10px solid transparent;
          border-top-color: #fff;
          filter: drop-shadow(0 10px 0 #ffe4cc);
        }
      }

      /* ===== Answer card ===== */
      .answer-wrap {
        display: flex;
        justify-content: end;
      }
      .answer {
        background: #fff7f0;
        border: 2px solid #ffd8b8;
        border-radius: 14px;
        padding: 18px;
        box-shadow: 0 6px 0 #ffe4cc;
        max-width: 680px;

        &::after {
          content: "";
          position: absolute;
          right: 32px;
          bottom: -16px;
          border: 10px solid transparent;
          border-top-color: #fff7f0;
          filter: drop-shadow(0 10px 0 #ffe4cc);
        }

        .answer__header {
          display: grid;
          grid-template-columns: 48px 1fr;
          gap: 12px;
          align-items: center;
          margin-bottom: 12px;
        }

        .avatar {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          overflow: hidden;
          border: 2px solid #fff;
          box-shadow: 0 0 0 2px #ffd8b8;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .name {
          font-weight: 700;
          color: #d86700;
          font-family: var(--font-jal, system-ui);
        }

        .answer__body {
          color: #555;
          line-height: 1.8;
          font-size: clamp(14px, 1.5vw, 16px);
        }
      }

      /* ===== Responsive ===== */
      @media (max-width: 480px) {
        margin: 0;
        max-width: none;
        height: 100dvh;
        border-radius: 0;

        .head {
          padding: 20px;
        }
        .question {
          margin-right: 8px;
        }
      }
    }
  }
  .campaign-with-support-messages-image {
    margin-inline: auto;
    display: block;
    width: 100%;
    opacity: 0.3;
    #content & {
      max-width: 1400rem;
    }
  }
  .section-message {
    padding-block: clamp(
        var(--section-padding-block-min),
        calc(115 / var(--container) * 100vw),
        115rem
      )
      clamp(
        var(--section-padding-block-min),
        calc(130 / var(--container) * 100vw),
        130rem
      );
    background: #ffffff;
    .heading {
      font: 700 var(--font-size-50) var(--font-jal);
      text-align: center;

      & > span {
        color: var(--primary);
      }
    }
    .main-message {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 48px;
      padding: 64px;
      background: #f08221 url("/images/event-2025/participating-event-bg.webp")
        no-repeat 50% / cover;
      border: 1px solid #ddd;
      border-radius: 32px;
      margin-top: clamp(
        var(--section-padding-block-min),
        calc(80 / var(--container) * 100vw),
        80rem
      );

      .profile {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 180px;

        & > img {
          width: 100%;
          max-width: 180px;
          height: auto;
        }

        .profile-info {
          font-size: var(--font-size-16);
          color: #fff;

          & > h2 {
            font-size: var(--font-size-16);
            font-weight: 700;
          }
        }
      }

      span {
        width: 100%;
        height: 1px;
        background-color: #ddd;
      }

      h1 {
        color: #fff;
        font-size: var(--font-size-18-to-14);
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
      }
    }
    @media (min-width: 768px) {
      .main-message {
        flex-direction: row;

        span {
          width: 1px;
          height: 200px;
          background-color: #ddd;
        }
      }
    }
    .wrap-other-message {
      /* display: flex; */
      /* display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16rem, calc(48 / var(--container) * 100vw), 48rem);
      margin-top: clamp(
        var(--section-padding-block-min),
        calc(80 / var(--container) * 100vw),
        80rem
      ); */
      column-count: 3;
      column-width: 360px; /* browser ngatur jumlah kolom otomatis */
      column-gap: clamp(16rem, calc(48 / var(--container) * 100vw), 48rem);
      margin-top: clamp(16rem, calc(48 / var(--container) * 100vw), 48rem);

      /* .message-col {
        display: flex;
        flex-direction: column;
        gap: clamp(16rem, calc(48 / var(--container) * 100vw), 48rem);
        width: 100%;
      } */

      .other-message {
        /* display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        gap: 48px;
        padding: 64px 32px;
        background: #f9f5e4;
        border: 1px solid #ddd;
        border-radius: 32px; */
        display: flex;
        flex-direction: column;
        width: 100%;
        break-inside: avoid;
        margin-bottom: clamp(16rem, calc(48 / var(--container) * 100vw), 48rem);
        gap: 48px;
        padding: 64px 32px;
        background: #f9f5e4;
        border: 1px solid #ddd;
        border-radius: 32px;

        h1 {
          color: #000;
          font-size: var(--font-size-18-to-14);
          font-style: normal;
          font-weight: 400;
          line-height: 140%;

          & > p {
            font-size: 12px;
          }
        }

        span {
          width: 100%;
          height: 1px;
          background-color: #bababa;
        }

        .profile {
          display: flex;
          flex-direction: column-reverse;
          gap: 24px;
          width: 100%;

          .profile-info {
            display: flex;
            flex-direction: column;
            font-size: var(--font-size-16);
            color: #000000;

            & > h2 {
              font-size: var(--font-size-16);
              font-weight: 700;
            }
          }

          & > img {
            width: 100%;
            max-width: 180px;
          }
        }

        @media (min-width: 1024px) {
          .profile {
            flex-direction: row;
            justify-content: space-between;
            gap: 16px;
          }
        }
      }
    }

    @media (max-width: 1024px) {
      .wrap-other-message {
        column-width: 300px;
      }
    }
    @media (max-width: 640px) {
      .wrap-other-message {
        column-count: 1;
      }
    }
  }
  .section-video-messages {
    padding-block: clamp(
        var(--section-padding-block-min),
        calc(80 / var(--container) * 100vw),
        80rem
      )
      clamp(
        var(--section-padding-block-min),
        calc(85 / var(--container) * 100vw),
        85rem
      );
    background: #fafafa;
    .heading {
      font: var(--font-size-40) var(--font-sans);
      text-align: center;
    }
    .list {
      margin-top: 40rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(353rem, 1fr));
      grid-template-columns: repeat(auto-fit, minmax(min(353rem, 100%), 1fr));
      gap: 40rem clamp(16rem, calc(40 / var(--container) * 100vw), 40rem);
    }
    .item {
      padding: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
      background: #fff;
      border-radius: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
      box-shadow: 0 0 25px #0000000d;
    }
    .player {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      border: 0;
    }
    .notice {
      margin-top: 2.55555556em;
      font-size: var(--font-size-18);
      text-align: center;
    }
  }
  .section-participating-event {
    padding-block: clamp(
      var(--section-padding-block-min),
      calc(130 / var(--container) * 100vw),
      130rem
    );
    background: #f08221 url("/images/event-2025/participating-event-bg.webp")
      no-repeat 50% / cover;
    /* .split {
      display: grid;
      gap: 30rem clamp(16rem, calc(32 / var(--container) * 100vw), 32rem);
      @media (width >= 1280px) {
        grid-template-columns: 612fr 756fr;
      }
      @media (768px <= width < 1280px) {
        grid-template-columns: 1fr auto;
      }
    } */
    .split {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      gap: 48px;
    }
    @media (min-width: 1280px) {
      .split {
        flex-direction: row;
      }
    }
    .heading-block {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    .heading {
      /* margin-bottom: 0.78571429em; */
      font-size: var(--font-size-70);
      width: 100%;
      aspect-ratio: 380/81;
      background: url("/images/event-2025/participating-event-heading.svg")
        no-repeat 50% / contain;
      color: #0000;
      user-select: none;
      /* @media (width >= 768px) {
        translate: -1.3%;
        margin-top: 1.01428571em;
      } */
    }
    .subheading {
      font: var(--font-size-24) / 1.55 var(--font-sans);
      color: #fff;
      text-align: center;
    }
    @media (min-width: 1280px) {
      .subheading {
        text-align: start;
      }
    }
    .prize-count {
      font-size: 1.25em;
      color: #fff600;
    }
    .schedule-block {
      /* @media (width >= 1280px) {
        display: grid;
        grid-template: 92fr 231fr 38fr / 399fr 192fr 165fr;
        max-width: 756rem;
      } */
      /* display: grid;
      grid-template: 92fr 231fr 38fr / 399fr 192fr 165fr; */
      display: flex;
      align-items: center;
      width: fit-content;
      /* max-width: 756px; */
    }
    .schedule-text-block {
      /* grid-area: 2/1/3/3; */
      /* padding: 25rem 28rem;
      padding: clamp(24rem, calc(25 / var(--container) * 100vw), 25rem)
        clamp(24rem, calc(28 / var(--container) * 100vw), 28rem); */
      padding-block: 32px;
      padding-left: 32px;
      padding-right: 32px;
      border: 2rem solid #fff;
      border-radius: 30rem;
      /* @media (width < 768px) {
        width: fit-content;
      } */
    }
    @media (min-width: 768px) {
      .schedule-text-block {
        padding-right: 120px;
      }
    }
    .schedule-title {
      aspect-ratio: 347/31;
      background: url("/images/event-2025/participating-event-schedule-title.svg")
        no-repeat 50% / contain;
      translate: -1.15%;
      font-size: var(--font-size-24);
      @media (width >= 768px) {
        width: 14.45833333em;
      }
      @media (width < 768px) {
        width: 15.5em;
      }
    }
    .schedule-list {
      margin-top: 18rem;
      display: grid;
      gap: 0.44444444em;
      width: fit-content;
      padding: 0.83333333em 0.83333333em 1.11111111em;
      background: rgb(from currentColor r g b / 0.1);
      border-radius: 10rem;
      font-size: var(--font-size-18);
      color: #fff;
    }
    .schedule-item {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: baseline;
      gap: 0.35lh 0.88888889em;
    }
    .schedule-value {
      grid-column-start: 2;
      font: 700 1.11111111em var(--font-sans);
    }
    .schedule-image-block {
      /* @media (width >= 1280px) {
        grid-area: 1/2/4/4;
        aspect-ratio: 357/361;
        background: url("/images/event-2025/participating-event-coffee.webp")
          no-repeat 50% / contain;
        animation-name: shake;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-delay: 0.5s;
      } */
      /* grid-area: 1/2/4/4;
      aspect-ratio: 357/361;
      background: url("/images/event-2025/participating-event-coffee.webp")
        no-repeat 50% / contain; */
      margin-left: -90px;
      animation-name: shake;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-delay: 0.5s;
      display: none;
      /* @media (width < 1280px) {
        display: none;
      } */
    }
    @media (min-width: 768px) {
      .schedule-image-block {
        display: block;
      }
    }
    /* @media (min-width: 1280px) {
      .schedule-image-block {
        width: 200px;
        height: auto;
      }
    } */
    .section-quiz {
      margin-top: clamp(
        var(--section-padding-block-min),
        calc(90 / var(--container) * 100vw),
        90rem
      );
    }
    .quiz-heading {
      font: 700 var(--font-size-36) var(--font-jal);
      color: #fff;
      text-align: center;
    }
    .quiz-question {
      margin-top: 1.25em;
      font: 600 var(--font-size-24) var(--font-sans);
      color: #fff;
    }
    .quiz-list {
      counter-reset: index;
      margin-top: 40rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(260rem, 100%), 1fr));
      gap: 16rem;
      font: 700 var(--font-size-24) / 1.66666667 var(--font-jal);
    }
    .quiz-item {
      position: relative;
      align-content: center;
      aspect-ratio: 456/430;
      padding: 3.5% 11% 5%;
      background: repeating-linear-gradient(
          90deg,
          #0000,
          #0000 3px,
          #f6f6f6 3px,
          #f6f6f6 5px,
          #0000 5px,
          #0000 20px
        ),
        repeating-linear-gradient(
          180deg,
          #0000,
          #0000 17px,
          #f6f6f6 17px,
          #f6f6f6 19px,
          #0000 19px,
          #0000 20px
        ),
        #fff;
      border-radius: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
      text-align: center;
    }
    .quiz-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 6.4%;
      translate: 0 -13%;
      width: 11.40350877%;
      aspect-ratio: 52/79;
      background: url("/images/event-2025/quiz-clip.png") no-repeat 50% /
        contain;
    }
    .quiz-item::after {
      --space: clamp(16rem, calc(20 / var(--container) * 100vw), 20rem);
      counter-increment: index;
      content: "Q" counter(index);
      position: absolute;
      top: var(--space);
      right: var(--space);
      width: 2.29166667em;
      align-content: center;
      aspect-ratio: 1;
      background: var(--secondary);
      border-radius: 50%;
      font: 700 var(--font-size-24) var(--font-jal);
      color: #fff;
      text-align: center;
    }
    .quiz-masking {
      font: 250 1.25em var(--font-mont);
    }
    .quiz-hint {
      margin-top: 1.25em;
      font: 600 var(--font-size-24) var(--font-sans);
      color: #fff;
    }
    .quiz-answer-modal-trigger {
      margin: 1.81818182em auto 0;
    }
    .quiz-answer-modal-trigger.is-disabled {
      cursor: not-allowed;
      background: lightslategray;
      color: lightgray;
    }
    .quiz-answer-modal-trigger.is-disabled::after {
      filter: brightness(0.75);
    }
  }
  .section-share-event {
    background: #f9f5e4;
    .top-area {
      padding-top: clamp(
        var(--section-padding-block-min),
        calc(70 / var(--container) * 100vw),
        70rem
      );
      background: url("/images/event-2025/section-share-even-bg-1.svg")
          no-repeat 0 100% / min(581rem, 31%),
        url("/images/event-2025/section-share-even-bg-2.svg") no-repeat 100%
          100% / min(660rem, 35%);
    }
    .heading {
      font: 700 var(--font-size-36) var(--font-jal);
      text-align: center;
    }
    .subheading {
      margin-top: 0.78125em;
      font: 300 var(--font-size-32) / 1.5 var(--font-sans);
      text-align: center;
      text-wrap: balance;
    }
    .subheading b {
      font-weight: 700;
    }
    .social-list {
      margin-top: 35rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(170rem, 100%), 1fr));
      gap: clamp(16rem, calc(20 / var(--container) * 100vw), 20rem);
    }
    .social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1em;
      padding: 0.85em;
      background: #fff;
      border: 2rem solid var(--border-color);
      border-radius: 5em;
      font: 700 var(--font-size-20) var(--font-jal);
    }
    .social-link::before {
      content: "";
      display: block;
      flex-shrink: 0;
      width: 1.5em;
      aspect-ratio: 1;
      background: no-repeat 50% / contain;
    }
    .social-link--instagram::before {
      background-image: url("/images/event-2025/social-instagram.svg");
    }
    .social-link--facebook::before {
      background-image: url("/images/event-2025/social-facebook.svg");
    }
    .social-link--naver::before {
      background-image: url("/images/event-2025/social-naver.svg");
    }
    .form-link {
      margin: 40rem auto 0;
    }
    .note {
      margin: clamp(50rem, calc(80 / var(--container) * 100vw), 80rem) auto 0;
      width: fit-content;
      padding: 20rem 30rem;
      background: #fff;
      border-radius: 30rem 30rem 0 0;
      font-size: var(--font-size-20);
    }
    .bottom-area {
      padding-block: 66rem 185rem;
      background: url("/images/event-2025/section-share-even-bg-3.webp")
        no-repeat 20% 100% / auto 120rem;
      color: #6b481a;
    }
    .notes-container {
      margin-inline: auto;
      display: grid;
      align-items: center;
      max-width: 938rem;
      @media (width >= 768px) {
        grid-template-columns: auto 658fr;
      }
    }
    .notes-heading {
      position: relative;
      font: 700 var(--font-size-40) var(--font-jal);
      @media (width >= 768px) {
        width: fit-content;
        margin-right: 3em;
      }
      @media (width < 768px) {
        margin-bottom: 3em;
        text-align: center;
      }
    }
    .notes-heading::before {
      content: "";
      position: absolute;
      background: currentColor;
      @media (width >= 768px) {
        top: 50%;
        right: -1.55em;
        translate: 0 -50%;
        width: 1px;
        height: 2.625em;
      }
      @media (width < 768px) {
        bottom: -1.5em;
        left: 50%;
        translate: -50%;
        width: 5em;
        height: 1px;
      }
    }
    .notes-list {
      display: grid;
      gap: 0.45lh;
      font-size: var(--font-size-20);
    }
    .notes-item {
      position: relative;
      padding-left: 31rem;
    }
    .notes-item::before {
      content: "";
      position: absolute;
      left: 1.2ch;
      top: 51%;
      translate: 0 -50%;
      width: 4rem;
      aspect-ratio: 1;
      background: currentColor;
      border-radius: 50%;
    }
    .list-link {
      margin: clamp(40rem, calc(60 / var(--container) * 100vw), 60rem) auto 0;
      display: block;
      width: fit-content;
      padding: 0.95em 2.95em;
      border: 1px solid currentColor;
      border-radius: 5em;
      font-size: var(--font-size-20);
      text-align: center;
    }
  }
  .section-cheer-board {
    padding-block: clamp(
      var(--section-padding-block-min),
      calc(130 / var(--container) * 100vw),
      130rem
    );
    .cheer-board {
      display: grid;
      gap: 40rem 30rem;
      padding: 26rem clamp(8rem, calc(26 / var(--container) * 100vw), 26rem);
      /* background: #fafafa; */
      border-radius: 30rem;
      /* box-shadow: 0 0 40rem #00000014; */
      @media (width >= 1280px) {
        grid-template-columns: 700fr 625fr;
        align-items: end;
        padding-bottom: 2rem;
      }
    }
    .heading-block {
      padding-left: 0.38em;
      /* display: flex;
      flex-direction: column;
      gap: 32px; */
      font: 700 var(--font-size-50) / 1.47 var(--font-jal);
    }
    .heading {
      /* padding-left: 0.54em; */
      font: inherit;
    }
    .heading-visual {
      margin-top: 1.52em;
      width: 100%;
      aspect-ratio: 534/245;
      background: url("/images/event-2025/cheer-board-visual.svg") no-repeat 50% /
        contain;
      @media (width >= 1280px) {
        width: 10.68em;
      }
      @media (768px <= width < 1280px) {
        width: 80%;
      }
    }
    .message-block {
      padding: clamp(16rem, calc(40 / var(--container) * 100vw), 40rem)
        clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
      background: #fff;
      border: 4rem solid var(--tertiary);
      border-radius: 24rem;
    }
    .message-list::-webkit-scrollbar {
      display: block;
      width: 9rem;
    }
    .message-list::-webkit-scrollbar-thumb {
      border: 0;
    }
    .message-list {
      overflow: clip auto;
      display: grid;
      gap: 30rem;
      max-height: 315rem;
    }
    .message-item {
      display: grid;
      align-items: center;
      gap: 12px;
      /* @media (width >= 768px) {
        grid-template-columns: auto 1fr;
      } */
    }
    .message-date {
      display: block;
      width: 8.125em;
      padding: 0.625em 1.25em;
      background: #f9f5e4;
      border-radius: 5em;
      font-weight: 700;
      color: #ab922b;
    }
    .message-text {
      overflow: hidden;
      font-size: var(--font-size-18);
      @media (width >= 768px) {
        display: -webkit-box;
        line-height: 140%;
        /* -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; */
        word-break: break-all;
      }
      @media (width < 768px) {
        padding-left: 2ch;
        line-height: 1.5;
      }
    }
    .message-form {
      margin-top: 30rem;
      border-top: 1px solid #ddd;
      padding-top: 29rem;
      display: grid;
      grid-template-columns: repeat(1fr, 2fr);
      grid-template-rows: repeat(2, 1fr);
      /* grid-template: "spam-number spam-input" "message-input message-input" / auto 1fr; */
      gap: 10rem;
    }
    .field {
      margin: 0;
      min-width: 0;
      height: 3.38888889em;
      background: #f3f3f3;
      border: 0;
      border-radius: 5em;
      font-size: var(--font-size-18);
    }
    .spam-number {
      /* grid-area: spam-number; */
      grid-area: 1 / 1 / 2 / 2;
      /* width: fit-content; */
      height: 100%;
      font-weight: 700;
      text-align: center;
      user-select: none;
      pointer-events: none;
    }
    .spam-input {
      /* grid-area: spam-input; */
      grid-area: 1 / 2 / 2 / 3;
      width: 100%;
      height: 100%;
      padding-inline: clamp(28px, calc(50 / var(--container) * 100vw), 50px);
    }
    .spam-input:focus {
      outline: 0;
    }
    .field-message-input {
      /* grid-area: message-input; */
      grid-area: 2 / 1 / 3 / 3;
      display: grid;
      grid-template-columns: 1fr auto;
      height: auto;
      gap: 12px;
      padding: 12px;
    }
    .message-input {
      margin: 0;
      width: 100%;
      height: 100%;
      padding: 0 0 0 clamp(16rem, calc(41 / var(--container) * 100vw), 41rem);
      background: 0;
      border: 0;
      font: inherit;
    }
    .message-input:focus {
      outline: 0;
    }
    .submit-btn {
      width: 2.5em;
      aspect-ratio: 1;
      background: var(--tertiary)
        url("/images/event-2025/cheer-board-submit.svg") no-repeat 50% /
        44.44444444%;
      border-radius: 50%;
      font-size: var(--font-size-18);
    }
    .list-link {
      margin: clamp(40rem, calc(80 / var(--container) * 100vw), 80rem) auto 0;
      display: block;
      width: fit-content;
      padding: 0.95em 2.95em;
      border: 1px solid currentColor;
      border-radius: 5em;
      font-size: var(--font-size-20);
      text-align: center;
    }
  }
}