:root {
  --t-display: clamp(2.9rem, 12.5vw, 5.6rem);
  --t-h1: clamp(2.2rem, 8.5vw, 3.6rem);
  --t-h2: clamp(1.75rem, 5.6vw, 2.6rem);
  --t-h3: clamp(1.28rem, 3.6vw, 1.6rem);
  --t-lead: clamp(1.06rem, 2.6vw, 1.18rem);
  --t-body: 1rem;
  --t-small: 0.9rem;
  --t-caption: 0.8rem;
  --t-label: 0.78rem;
  --lh-display: 1.12;
  --lh-h2: 1.2;
  --lh-h3: 1.35;
  --lh-lead: 1.7;
  --lh-body: 1.75;
  --lh-small: 1.7;
  --lh-caption: 1.55;
  --lh-label: 1.2;
  --ls-display: -0.035em;
  --ls-h2: -0.025em;
  --ls-h3: -0.015em;
  --ls-body: 0;
  --ls-label: 0.1em;
  --fw-display: 800;
  --fw-h2: 800;
  --fw-h3: 700;
  --fw-lead: 500;
  --fw-body: 400;
  --fw-label: 700;
}

@font-face {
  font-family: "Wanted Sans Variable";
  src: url("/presale/fonts/wanted-sans-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 1000;
  font-display: swap;
}

body[data-page="presale"] {
  --ps-paper: #f3efe6;
  --ps-paper-strong: #e8e1d3;
  --ps-ink: #171717;
  --ps-acid: #dfff00;
  --ps-nav-height: 106px;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: clip;
  border: 0;
  background: var(--ps-paper);
  color: var(--ps-ink);
  font-family: "Wanted Sans Variable", "Wanted Sans", sans-serif;
  font-synthesis: none;
  box-shadow: none;
}

body[data-page="presale"] *,
body[data-page="presale"] *::before,
body[data-page="presale"] *::after {
  font-synthesis: none;
}

body[data-page="presale"] main {
  overflow: clip;
}

/* 한글은 기본 줄바꿈 규칙에서 음절 단위로 끊겨 「성수 / 에,」처럼 어절이 갈라진다. 어절 단위로만 끊는다. */
body[data-page="presale"] h1,
body[data-page="presale"] h2,
body[data-page="presale"] h3,
body[data-page="presale"] p,
body[data-page="presale"] li,
body[data-page="presale"] dt,
body[data-page="presale"] dd,
body[data-page="presale"] blockquote,
body[data-page="presale"] button,
body[data-page="presale"] a {
  word-break: keep-all;
}

.ps-wrap {
  width: min(calc(100% - 32px), 1160px);
  margin-inline: auto;
}

.ps-block[data-nav-section] {
  scroll-margin-top: calc(var(--ps-nav-height) + 14px);
}

.ps-skip-link {
  position: fixed;
  z-index: 1200;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border: 2px solid var(--ps-ink);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ps-ink);
  font-weight: 900;
  text-decoration: none;
  transform: translateY(-160%);
}

.ps-skip-link:focus {
  transform: none;
}

.ps-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.ps-button--hook {
  font-size: 1.12rem;
  font-weight: 800;
}

.ps-button:hover {
  transform: translateY(-2px);
}

.ps-button--dark {
  border-color: var(--ps-ink);
  background: var(--ps-ink);
  color: #ffffff;
  box-shadow: 5px 5px 0 var(--hunt-purple);
}

.ps-button--light {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--ps-ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.ph-token {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  border: 1px dashed currentColor;
  border-radius: 6px;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.58);
  color: inherit;
  font-size: 0.82em;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ph-box {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  border: 2px dashed currentColor;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--muted);
  text-align: center;
}

.ph-box > span,
.ph-box > strong {
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.ph-box > small {
  max-width: 23rem;
  padding-inline: 12px;
  font-size: 0.65rem;
  line-height: 1.45;
}

/* 01 히어로 */
.ps-hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 22px 0 58px;
  background:
    linear-gradient(90deg, var(--hunt-red) 0 20%, var(--hunt-blue) 20% 40%, var(--hunt-green) 40% 60%, var(--hunt-orange) 60% 80%, var(--hunt-purple) 80%) top / 100% 8px no-repeat,
    var(--ps-paper);
}

.ps-hero__grid {
  display: grid;
  gap: 26px;
}

.ps-hero__copy {
  min-width: 0;
}

.ps-hero__copy > h1 {
  display: grid;
  justify-items: start;
  gap: 0;
  margin-top: 0;
  font-size: var(--t-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.ps-hero__title-brand,
.ps-hero__title-episode {
  display: block;
}

.ps-hero__title-brand {
  color: #53697b;
  font-size: var(--t-h3);
  font-weight: 800;
  line-height: var(--lh-h3);
  letter-spacing: 0.11em;
}

.ps-hero__title-episode {
  margin-top: 0.16em;
  color: var(--ps-blue);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.ps-tagline {
  max-width: 26rem;
  margin-top: 24px;
  color: var(--muted);
  font-size: var(--t-lead);
  font-weight: var(--fw-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
}

.ps-hidden-teaser {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 10px;
  margin-top: 22px;
  overflow: hidden;
  border: 3px solid var(--ps-ink);
  padding: 17px;
  background: #eee2ff;
  box-shadow: 7px 7px 0 var(--ps-pink);
}

.ps-hidden-teaser::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 20px;
  height: 20px;
  background: var(--ps-cyan);
  box-shadow: -32px -22px 0 -6px var(--ps-acid);
  content: "";
  transform: rotate(45deg);
}

.ps-hidden-teaser > * {
  position: relative;
  z-index: 1;
}

.ps-hidden-teaser h2 {
  max-width: 22ch;
  font-size: var(--t-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.ps-hidden-teaser h2 strong {
  color: var(--ps-blue);
}

.ps-hidden-teaser > p {
  max-width: 34rem;
  color: #40536d;
  font-size: var(--t-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.ps-hidden-teaser > p b {
  color: var(--ps-ink);
}

.ps-hero__facts {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.ps-hero__facts > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.ps-hero__facts dt {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 800;
  line-height: var(--lh-small);
  letter-spacing: var(--ls-body);
}

.ps-hero__facts dd {
  min-width: 0;
}

.ps-button--hook {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-height: 76px;
  margin: 24px 0 0;
  padding: 18px 32px;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 9px 9px 0 var(--ps-pink);
}

.ph-box--hero {
  position: relative;
  min-height: 350px;
  border-color: var(--ps-ink);
  border-radius: 28px 28px 86px 28px;
  background: #ded8ca;
  color: var(--ps-ink);
}

.ps-color-bars {
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.ps-color-bars i:nth-child(1) { background: var(--hunt-red); }
.ps-color-bars i:nth-child(2) { background: var(--hunt-blue); }
.ps-color-bars i:nth-child(3) { background: var(--hunt-green); }
.ps-color-bars i:nth-child(4) { background: var(--hunt-orange); }
.ps-color-bars i:nth-child(5) { background: var(--hunt-purple); }

/* 공통 섹션 */
.ps-section {
  padding: 68px 0;
}

.ps-section:nth-of-type(even) {
  background: rgba(255, 255, 255, 0.36);
}

.ps-heading {
  max-width: 42rem;
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}

.ps-section h2 {
  font-size: var(--t-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.ps-briefing h2 {
  font-size: var(--t-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.ps-heading > p:last-child,
.ps-content__copy > p:last-child {
  color: var(--muted);
  line-height: 1.75;
}

/* 02 티켓 */
/* 할인율 강조는 얼리버드 카드 안에서만 한다.

   예전에는 카드 위에 같은 값을 다시 적은 요약 상자(`.ps-offer-spotlight`)가 하나 더 있었다.
   노란 상자가 위아래로 두 번 나와 "가격이 두 개"로 읽혔으므로, 상자를 지우고 그 상자가 갖고
   있던 강조(파란 대형 숫자 + 흰 '할인' 태그 + 굵은 취소선 정가)를 카드로 옮겼다.
   숫자·가격 문구는 한 곳에만 있어야 나중에 값이 바뀔 때 한쪽만 고치는 사고가 없다. */
.ps-ticket__rate {
  min-width: 0;
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 3px 8px;
  margin-top: 4px;
  color: var(--ps-blue);
  font-weight: var(--fw-display);
  line-height: 0.84;
  letter-spacing: var(--ls-display);
}

.ps-ticket__rate strong {
  font-size: clamp(3.4rem, 18vw, 6.4rem);
  font-weight: 1000;
}

.ps-ticket__rate span {
  padding-bottom: 0.12em;
  font-size: clamp(1.8rem, 7.5vw, 3.6rem);
  font-weight: 1000;
}

.ps-ticket__rate b {
  margin: 0 0 0.3em 2px;
  border: 2px solid var(--ps-ink);
  padding: 5px 7px 4px;
  background: #ffffff;
  color: var(--ps-ink);
  box-shadow: 3px 3px 0 var(--ps-cyan);
  font-size: var(--t-small);
  line-height: 1;
  letter-spacing: var(--ls-label);
}

.ps-ticket-grid {
  display: grid;
  gap: 12px;
}

.ps-ticket {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  border: 2px solid var(--ps-ink);
  border-radius: 18px;
  padding: 18px;
  background: var(--ps-paper);
  box-shadow: 4px 4px 0 var(--ps-ink);
}

.ps-ticket--featured {
  background: #ffffff;
}

.ps-ticket__index {
  grid-row: 1 / span 4;
  font-size: 1.3rem;
  font-weight: 1000;
}

.ps-ticket h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.ps-ticket__period {
  grid-column: 2 / -1;
  color: var(--muted);
}

.ps-ticket__price {
  grid-column: 2 / -1;
  font-size: 1.22rem;
  font-weight: 950;
}

.ps-ticket__discount {
  min-width: 0;
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  line-height: 1.4;
}

.ps-discount-badge {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--ps-ink);
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--ps-ink);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.ps-ticket__discount s {
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 850;
  line-height: var(--lh-small);
  letter-spacing: var(--ls-body);
  text-decoration-color: var(--hunt-red);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  white-space: nowrap;
}

.ps-ticket__note {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 03 리워드 */
.ps-reward-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.ps-reward-grid--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 5vw, 42px);
}

.ps-hook-benefit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 38px;
}

.ps-hook-benefit .ps-reward-card {
  width: 100%;
}

.ps-reward-card {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 13px;
  overflow: hidden;
  border: 3px solid var(--ps-ink);
  padding: 20px;
  background: #ffffff;
  box-shadow: 7px 7px 0 var(--ps-ink);
}

.ps-reward-card--mission { background: #ffffff; }
.ps-reward-card--sns { background: #dff8ff; }
.ps-reward-card--hidden { background: #eee2ff; }

.ps-reward-card.ps-reward-card--spotlight {
  border-width: 4px;
  padding: clamp(24px, 5vw, 42px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76) 0 26%, transparent 26% 76%, rgba(255, 92, 168, 0.12) 76%),
    #eee2ff;
  box-shadow: 10px 10px 0 var(--ps-pink);
}

.ps-reward-card__head {
  display: grid;
  gap: 7px;
  border-bottom: 2px solid var(--ps-ink);
  padding-bottom: 14px;
}

.ps-reward-card__step {
  font-size: var(--t-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

/* 음료 카드의 머리말("기본 미션만 완료해도")만은 라벨이 아니라 읽는 문장이라,
   바로 아래 부제("아메리카노 …")와 같은 --t-lead 로 키운다. 라벨용 넓은 자간(0.1em)은
   이 크기에서 글자 사이가 벌어져 보이므로 본문 자간으로 되돌린다. */
.ps-hook-benefit .ps-reward-card--mission .ps-reward-card__step {
  font-size: var(--t-lead);
  letter-spacing: var(--ls-body);
}

.ps-reward-card__value {
  color: var(--ps-blue);
  font-size: var(--t-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* 테이크아웃 음료 — 모든 화면에서 도는 가로 무한 롤링.

   무한 롤링은 같은 세트를 여러 벌 이어 붙여 만들기 때문에, 창(스크롤로 보이는 폭)이 한 벌보다
   넓어지면 같은 음료가 한 화면에 두 번 그려진다. 겹치지 않을 조건은 "창에 걸치는 칸 수 ≤ 노출 종수 N",

       창폭 W < (N − 1) × 칸폭 + N × 간격                            ... (*)

   (칸 위치는 i×(칸폭+간격) 이므로 창에 걸치는 칸 수는 (W + 칸폭)/(칸폭+간격) + 1 을 넘지
   않는다. 이 값이 N 이하가 되는 조건이 (*) 다.)

   노출이 3종인 지금 (*) 의 여유는 세 브레이크포인트 모두 12px 뿐이다(예: 1280px 이상에서
   2×300 + 3×18 = 654px > 창 642px). 창 폭을 묶어 두는 또 다른 이유는 1024px 이상의 2단
   배치다 — 창이 그리드 칼럼 폭이라, 넓히면 오른쪽 설명 칸이 짜부라진다. 아래 값들은 (*) 를
   만족하면서 2단 배치가 무너지지 않는 폭이다. 칸·간격을 키우거나 종수를 더 줄이면 (*) 가
   곧바로 깨지므로 반드시 다시 계산해 창을 좁혀야 한다(tests/presale.test.cjs 가 붙잡는다).

   자동 롤링은 JS 가 scrollLeft 를 밀어서 만들고, 같은 컨테이너가 네이티브 가로 스크롤도
   그대로 받는다(터치 스와이프·트랙패드·마우스 드래그). 스크롤바는 감춘다.
   JS 는 "가로로 넘치는가" 하나만 보고 롤링 여부를 정하므로(presale.js), 창이 트랙보다
   좁기만 하면 폭에 상관없이 저절로 돈다. */
/* 칸·간격·창 폭은 롤이 아니라 카드에 둔다. PC 2단 배치에서 그리드 칼럼도 같은 창 폭을
   써야 하는데, 칼럼을 auto 로 두면 스크롤 컨테이너의 max-content(=트랙 전체 길이)까지
   벌어져 오른쪽 설명 칸이 0 으로 짜부라진다. 한 곳에 두고 양쪽이 같이 읽는다. */
.ps-hook-benefit .ps-reward-card--mission {
  /* 좁은 화면 기본값. 한 칸을 화면 절반 남짓으로 잡아 한 번에 2종만 둔다. */
  --drink-item: max(128px, calc(50vw - 50px));
  --drink-gap: 10px;
  --drink-window: 100%;
}

.ps-drink-roll {
  width: min(100%, var(--drink-window, 100%));
}

.ps-drink-roll,
.ps-photo-roll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border: 2px solid var(--ps-ink);
  background: #ffffff;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.ps-drink-roll::-webkit-scrollbar,
.ps-photo-roll::-webkit-scrollbar {
  display: none;
}

.ps-drink-roll.is-dragging,
.ps-photo-roll.is-dragging {
  cursor: grabbing;
}

.ps-drink-roll.is-dragging .ps-drink-roll__item,
.ps-photo-roll.is-dragging .ps-photo-roll__item {
  /* 드래그 중에는 이미지·캡션이 선택되지 않게 한다. */
  user-select: none;
}

.ps-drink-roll__track,
.ps-photo-roll__track {
  display: flex;
  gap: var(--drink-gap, 10px);
  width: max-content;
  margin: 0;
  padding: 10px;
  list-style: none;
}

.ps-drink-roll__item,
.ps-photo-roll__item {
  display: grid;
  flex: 0 0 auto;
  gap: 6px;
  width: var(--drink-item, max(128px, calc(50vw - 50px)));
}

.ps-drink-roll__item picture,
.ps-photo-roll__item picture {
  display: block;
  overflow: hidden;
  border: 2px solid var(--ps-ink);
}

.ps-drink-roll__item img,
.ps-photo-roll__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  -webkit-user-drag: none;
}

.ps-drink-roll__name {
  font-size: 11px;
  font-weight: var(--fw-label);
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
}

/* 태블릿·PC 는 칸을 키우고 창은 (*) 안에 묶는다. 창이 카드보다 좁아 가운데 정렬한다.
   화면이 넓어져도 창을 넓히지 않는 것이 핵심이다 — 넓히는 순간 같은 음료가 두 번 들어온다. */
@media (min-width: 520px) {
  .ps-hook-benefit .ps-reward-card--mission {
    --drink-item: 230px;
    --drink-gap: 14px;
    /* (*): 8×230 + 9×14 = 1966px 까지 허용. 2단 배치를 고려해 490px 로 묶는다. */
    --drink-window: 490px;
  }

  .ps-drink-roll {
    margin-inline: auto;
  }

  .ps-drink-roll__name {
    font-size: 12px;
  }
}

@media (min-width: 900px) {
  .ps-hook-benefit .ps-reward-card--mission {
    --drink-item: 268px;
    --drink-gap: 16px;
    /* (*): 8×268 + 9×16 = 2288px 까지 허용. 2단 배치를 고려해 572px 로 묶는다. */
    --drink-window: 572px;
  }

  .ps-drink-roll__name {
    font-size: 13px;
  }
}

@media (min-width: 1280px) {
  .ps-hook-benefit .ps-reward-card--mission {
    --drink-item: 300px;
    --drink-gap: 18px;
    /* (*): 8×300 + 9×18 = 2562px 까지 허용. 2단 배치를 고려해 642px 로 묶는다. */
    --drink-window: 642px;
  }
}

/* 창을 카드 폭까지 넓히지 않으므로, 넓은 카드에서는 롤을 왼쪽에 두고 설명을 오른쪽에 세운다.
   가운데 정렬만 하면 좌우로 200px 넘는 빈 노란 여백이 남아 롤이 떠 있는 것처럼 보인다. */
@media (min-width: 1024px) {
  .ps-hook-benefit .ps-reward-card--mission {
    grid-template-columns: var(--drink-window) minmax(0, 1fr);
    grid-template-areas:
      "roll head"
      "roll title"
      "roll subtitle"
      "roll conditions";
    align-content: center;
    column-gap: 40px;
    padding: 28px;
  }

  .ps-hook-benefit .ps-reward-card--mission > .ps-reward-card__head {
    grid-area: head;
  }

  .ps-hook-benefit .ps-reward-card--mission > .ps-drink-roll {
    grid-area: roll;
    align-self: center;
  }

  .ps-hook-benefit .ps-reward-card--mission > h3 {
    grid-area: title;
  }

  .ps-hook-benefit .ps-reward-card--mission > .ps-reward-card__subtitle {
    grid-area: subtitle;
  }

  .ps-hook-benefit .ps-reward-card--mission > .ps-reward-card__conditions {
    grid-area: conditions;
  }
}

.ps-reward-card h3 {
  min-width: 0;
  font-size: var(--t-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.ps-reward-card--spotlight h3 {
  font-size: var(--t-h1);
}

.ps-reward-card h3 span {
  font-size: 0.72em;
  white-space: nowrap;
}

.ps-reward-card__subtitle {
  color: #40536d;
  font-size: var(--t-lead);
  font-weight: var(--fw-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
}

.ps-reward-card__conditions,
.ps-reward-card__prizes {
  display: grid;
  list-style: none;
}

.ps-reward-card__conditions li,
.ps-reward-card__prizes li {
  min-width: 0;
  border-top: 1px solid rgba(23, 50, 77, 0.34);
  padding: 10px 0;
  line-height: 1.55;
}

.ps-reward-card__conditions li:last-child,
.ps-reward-card__prizes li:last-child {
  border-bottom: 1px solid rgba(23, 50, 77, 0.34);
}

.ps-reward-card__prizes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.ps-reward-card__prizes span {
  color: var(--ps-blue);
  font-weight: 1000;
  white-space: nowrap;
}

.ps-reward-card__draw {
  border-left: 5px solid var(--ps-pink);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.74);
  color: #40536d;
  font-size: var(--t-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 04 콘텐츠 */
.ps-content {
  background: var(--ps-paper-strong) !important;
}

.ps-content__copy {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
  max-width: 58rem;
}

/* 05 섹션 내비 */
.ps-section-nav {
  position: sticky;
  z-index: 80;
  top: 0;
  min-height: var(--ps-nav-height);
  border-block: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(23, 23, 23, 0.96);
  color: #ffffff;
  backdrop-filter: blur(16px);
}

.ps-section-nav__list {
  min-height: var(--ps-nav-height);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.ps-section-nav a {
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-bottom: 3px solid transparent;
  padding: 8px 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--t-caption);
  font-weight: 900;
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-body);
  text-align: center;
  text-decoration: none;
}

.ps-section-nav a span {
  color: var(--ps-acid);
  font-size: var(--t-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.ps-section-nav a[aria-current="location"] {
  border-color: var(--ps-acid);
  color: #ffffff;
}

/* 06 브리핑 */
.ps-briefing {
  background: var(--hunt-purple) !important;
  color: #ffffff;
}

.ps-briefing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ps-briefing__copy {
  width: min(100%, 58rem);
  display: grid;
  gap: 18px;
  border: 2px solid var(--ps-ink);
  border-left: 10px solid var(--hunt-purple);
  padding: clamp(24px, 7vw, 52px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 9px 9px 0 var(--ps-cyan);
}

.ps-briefing__label {
  width: fit-content;
  border-bottom: 3px solid var(--ps-pink);
  padding-bottom: 5px;
  color: var(--ps-blue);
  font-size: var(--t-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.ps-briefing__copy > p {
  max-width: 48rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--t-lead);
  line-height: 1.85;
}

/* 07 차별점 */
.ps-feature-list {
  display: grid;
  gap: clamp(40px, 8vw, 88px);
  list-style: none;
}

.ps-feature {
  --feature-color: var(--ps-blue);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ps-feature:nth-child(1) { --feature-color: var(--hunt-red); }
.ps-feature:nth-child(2) { --feature-color: var(--ps-blue); }
.ps-feature:nth-child(3) { --feature-color: var(--hunt-green); }
.ps-feature:nth-child(4) { --feature-color: var(--hunt-orange); }

.ps-feature__visual,
.ps-feature__copy {
  min-width: 0;
  flex: 1 1 0;
}

.ps-feature__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--ps-ink);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0 62%, color-mix(in srgb, var(--feature-color) 22%, white) 62%);
  color: var(--ps-ink);
  box-shadow: 8px 8px 0 var(--feature-color);
}

.ps-feature__copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  border-top: 5px solid var(--feature-color);
  padding-top: 18px;
}

.ps-feature__number {
  color: var(--feature-color);
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: 1000;
  line-height: 0.9;
  letter-spacing: var(--ls-display);
}

.ps-feature h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.ps-feature__copy p {
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 08 플레이 방법 */
.ps-how {
  background: #ffffff !important;
}

.ps-step-grid {
  position: relative;
  display: grid;
  gap: 38px;
  list-style: none;
}

.ps-step-grid li {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 0;
  box-shadow: none;
  border-radius: 0 18px 18px 0;
  padding: 18px;
  background: var(--surface-soft);
}

.ps-step-grid li:nth-child(1) { --step-color: var(--hunt-red); --step-ink: var(--hunt-red-ink); }
.ps-step-grid li:nth-child(2) { --step-color: var(--hunt-blue); --step-ink: var(--hunt-blue-ink); }
.ps-step-grid li:nth-child(3) { --step-color: var(--hunt-green); --step-ink: var(--hunt-green-ink); }
.ps-step-grid li:nth-child(4) { --step-color: var(--hunt-purple); --step-ink: var(--hunt-purple-ink); }

.ps-step-grid > li + li::before {
  position: absolute;
  top: -34px;
  left: 50%;
  color: #000000;
  content: "↓";
  font-size: 1.45rem;
  font-weight: 1000;
  line-height: 1;
  transform: translateX(-50%);
}

/* 단계 기호는 CSS 로 그린 도형이 아니라 운영체제 기본 이모지 글자다.
   마크업의 문자(🎫 📦 📍 🏁)가 그림이고, 여기서는 상자와 글자 크기만 맡는다.
   폰트 스택은 본문 폰트를 지나쳐 곧장 각 OS 의 컬러 이모지 폰트로 간다
   (Windows = Segoe UI Emoji). 기호를 바꾸려면 CSS 가 아니라 HTML 의 글자를 바꾼다.
   aria-hidden 이라 스크린 리더는 이 글자를 읽지 않는다 — 뜻은 옆의 제목이 전한다. */
.ps-step__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border: 2px solid var(--ps-ink);
  background: #ffffff;
  box-shadow: 4px 4px 0 var(--step-color);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 30px;
  line-height: 1;
}

.ps-step__number {
  color: var(--step-ink);
  font-size: var(--t-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.ps-step-grid h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.ps-step-grid p {
  color: var(--muted);
  font-size: var(--t-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.ps-kit-note {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  border: 2px solid var(--ps-ink);
  border-radius: 20px;
  padding: 20px;
  background: #ffffff;
}

.ps-kit-note h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.ps-kit-note dl {
  display: grid;
  gap: 8px;
}

.ps-kit-note dl > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
}

.ps-kit-note dt {
  font-size: var(--t-small);
  font-weight: 900;
  line-height: var(--lh-small);
  letter-spacing: var(--ls-body);
}

.ps-kit-note dd {
  min-width: 0;
}

/* 09 혜택 계산 / 구매 */
.ps-benefits {
  background: #dff5ff !important;
  color: var(--ps-ink);
}

.ps-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 6vw, 52px);
}

.ps-benefits__grid > h2 {
  max-width: 19ch;
}

.ps-prize-spotlight {
  min-width: 0;
  display: grid;
  gap: clamp(22px, 5vw, 42px);
  overflow: hidden;
  border: 4px solid var(--ps-ink);
  padding: clamp(20px, 5vw, 38px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0 65%, rgba(57, 217, 231, 0.12) 65%),
    #ffffff;
  box-shadow: 10px 10px 0 var(--ps-pink);
}

.ps-prize-spotlight__copy {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
}

.ps-prize-spotlight h3 {
  color: var(--ps-blue);
  font-size: var(--t-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.ps-prize-spotlight__copy > p {
  color: #40536d;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
}

.ps-formula {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.ps-formula i {
  justify-self: center;
  color: var(--ps-blue);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 1000;
  transform: rotate(90deg);
}

.ps-formula > span {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 2px solid var(--ps-ink);
  padding: 14px;
  background: #ffffff;
  box-shadow: 4px 4px 0 var(--ps-cyan);
}

.ps-formula small {
  font-size: 0.68rem;
  font-weight: 900;
}

.ps-formula strong {
  color: var(--ps-blue);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.1;
}

.ps-formula__notice {
  max-width: 48rem;
  border-left: 5px solid var(--ps-blue);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #40536d;
  font-size: var(--t-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.ps-formula .ph-token {
  background: rgba(255, 255, 255, 0.1);
}

.ps-purchase-box {
  min-width: 0;
  display: grid;
  gap: 18px;
  border: 2px solid var(--ps-ink);
  border-radius: 24px;
  padding: 20px;
  background: var(--ps-paper);
  color: var(--ps-ink);
  box-shadow: 8px 8px 0 var(--ps-ink);
}

.ps-purchase-box__head {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ps-purchase-box h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.ps-purchase-box__offer {
  display: grid;
  justify-items: end;
  gap: 7px;
  text-align: right;
}

.ps-purchase-box__offer > strong {
  font-size: 1.35rem;
  font-weight: 1000;
}

.ps-purchase-box__offer .ps-ticket__discount {
  grid-column: auto;
  justify-content: flex-end;
}

.ps-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-block: 1px solid var(--line-strong);
  padding: 13px 0;
  font-weight: 900;
}

.ps-quantity__controls {
  display: grid;
  grid-template-columns: 44px 48px 44px;
  align-items: center;
}

.ps-quantity__controls button {
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--ps-ink);
  border-radius: 50%;
  background: #ffffff;
  color: var(--ps-ink);
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
}

.ps-quantity__controls button:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.ps-quantity__controls output {
  text-align: center;
  font-weight: 1000;
}

.ps-price-expression {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.ps-purchase-box .ps-button {
  width: 100%;
}

/* 혜택 섹션에 통합된 이벤트 */
.ps-event-grid {
  display: grid;
  gap: 14px;
}

.ps-event-card {
  min-width: 0;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 2px solid var(--ps-ink);
  border-radius: 22px;
  padding: 20px;
  background: #ffffff;
}

.ps-event-card:first-child { box-shadow: inset 0 12px var(--hunt-orange); }
.ps-event-card:last-child { box-shadow: inset 0 12px var(--hunt-purple); }

.ps-event-card__number {
  font-size: var(--t-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}

.ps-event-card h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

.ps-event-card > p:not(.ps-event-card__period) {
  color: var(--muted);
  line-height: 1.65;
}

.ps-event-card__period {
  margin-top: 8px;
  border-top: 2px solid var(--ps-ink);
  padding-top: 13px;
  color: var(--ps-ink);
  font-weight: 900;
  line-height: 1.6;
}

.ps-event-checklist {
  display: grid;
  gap: 8px;
  list-style: none;
}

.ps-event-checklist li {
  position: relative;
  border: 1px solid rgba(23, 50, 77, 0.28);
  padding: 10px 10px 10px 38px;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 850;
  line-height: 1.45;
}

.ps-event-checklist li::before {
  position: absolute;
  top: 10px;
  left: 13px;
  width: 8px;
  height: 14px;
  border-right: 3px solid var(--ps-blue);
  border-bottom: 3px solid var(--ps-blue);
  content: "";
  transform: rotate(42deg);
}

/* 11 후기 */
.ps-reviews {
  background: var(--ps-paper-strong) !important;
}

.ps-review-grid {
  display: grid;
  gap: 14px;
}

.ps-review-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 14px;
  background: var(--ps-paper);
}

.ps-review-card blockquote {
  min-width: 0;
  margin: 0;
  font-size: var(--t-lead);
  font-weight: var(--fw-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
}

.ps-review-card > p {
  color: var(--muted);
}

/* 12 Q&A */
.ps-qna {
  background: #ffffff !important;
}

.ps-accordion {
  border-block: 2px solid var(--ps-ink);
}

.ps-accordion h3 {
  margin: 0;
}

.ps-accordion h3 button {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 12px 0;
  background: transparent;
  color: var(--ps-ink);
  font-size: var(--t-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  text-align: left;
  cursor: pointer;
}

.ps-accordion h3 button span {
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ps-ink);
  border-radius: 50%;
  font-size: 1.25rem;
  transition: transform 180ms ease;
}

.ps-accordion h3 button[aria-expanded="true"] span {
  transform: rotate(45deg);
}

.ps-accordion__panel {
  padding: 0 0 22px;
}

.ps-accordion__panel p {
  color: var(--muted);
  line-height: 1.75;
}

/* 13 유의사항 */
.ps-notice {
  background: #ffffff !important;
}

.ps-notice__grid {
  display: grid;
  gap: 22px;
}

.ps-notice ol {
  display: grid;
  gap: 2px;
  list-style: none;
}

.ps-notice li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border-top: 1px solid var(--ps-ink);
  padding: 15px 0;
}

.ps-notice li:last-child {
  border-bottom: 1px solid var(--ps-ink);
}

.ps-notice li span {
  font-size: var(--t-small);
  font-weight: 1000;
  line-height: var(--lh-small);
  letter-spacing: var(--ls-body);
}

.ps-notice li p {
  font-weight: 800;
  line-height: 1.55;
}

/* 14 후원·협찬 */
.ps-sponsors {
  background: var(--ps-ink) !important;
  color: #ffffff;
}

.ps-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ps-sponsor-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  text-align: center;
}

.ph-box--sponsor {
  min-height: 100px;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.66);
}

.ps-sponsor-card > .ph-token {
  justify-self: center;
  background: rgba(255, 255, 255, 0.06);
}

.ps-bottom-cta {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 58px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 34px;
}

.ps-bottom-cta h3 {
  max-width: 18ch;
  font-size: var(--t-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.ps-bottom-cta .ps-button {
  width: 100%;
  margin-top: 4px;
}

/* 15 푸터 */
.ps-footer {
  padding: 34px 0 calc(116px + env(safe-area-inset-bottom));
  background: #0c0c0c;
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-body);
}

.ps-footer .ps-wrap {
  display: grid;
  gap: 10px;
}

.ps-footer__brand {
  color: #ffffff;
  font-size: var(--t-caption);
  font-weight: 950;
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-body);
}

/* 모든 화면의 하단 구매 바 */
.ps-sticky-cta {
  position: fixed;
  z-index: 90;
  inset: auto 0 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 44%);
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line-strong);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(243, 239, 230, 0.96);
  color: var(--ps-ink);
  backdrop-filter: blur(16px);
}

.ps-sticky-cta > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ps-sticky-cta > div > span {
  font-size: var(--t-caption);
  font-weight: 900;
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-body);
}

.ps-sticky-cta .ph-token {
  width: fit-content;
  font-size: 0.65rem;
}

.ps-sticky-cta .ps-button {
  min-width: 0;
  min-height: 48px;
  padding-inline: 12px;
  font-size: 1.12rem;
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--hunt-purple);
}

@media (min-width: 768px) {
  body[data-page="presale"] {
    --ps-nav-height: 68px;
  }

  .ps-wrap {
    width: min(calc(100% - 64px), 1160px);
  }

  .ps-hero {
    padding: 34px 0 76px;
  }

  .ps-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: 48px;
  }

  .ps-hero__copy > h1 {
    font-size: var(--t-display);
  }

  .ps-button--hook {
    width: 100%;
  }

  .ph-box--hero {
    min-height: min(68vh, 670px);
  }

  .ps-section {
    padding: 94px 0;
  }

  .ps-heading {
    margin-bottom: 42px;
  }

  .ps-section h2 {
    font-size: var(--t-h2);
  }

  .ps-briefing h2 {
    font-size: var(--t-display);
  }

  .ps-ticket-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ps-ticket {
    grid-template-columns: 1fr auto;
    align-content: space-between;
    min-height: 300px;
  }

  .ps-ticket__index {
    grid-row: auto;
    font-size: 2rem;
  }

  .ps-ticket h3,
  .ps-ticket__period,
  .ps-ticket__rate,
  .ps-ticket__price,
  .ps-ticket__discount,
  .ps-ticket__note {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ps-ticket h3 {
    margin-top: 48px;
    font-size: var(--t-h3);
  }

  .ps-ticket__price {
    font-size: 1.55rem;
  }

  .ps-hook-benefit {
    grid-template-columns: minmax(0, 1fr);
  }

  .ps-content .ps-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .ps-content__copy {
    margin-bottom: 0;
  }

  .ps-section-nav__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ps-section-nav a {
    min-height: var(--ps-nav-height);
    font-size: var(--t-caption);
  }

  .ps-briefing__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ps-feature {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(38px, 7vw, 76px);
  }

  .ps-feature:nth-child(even) {
    flex-direction: row-reverse;
  }

  .ps-feature__visual,
  .ps-feature__copy {
    width: 50%;
  }

  .ps-feature__copy {
    border-top: 0;
    border-left: 6px solid var(--feature-color);
    padding: 28px 0 28px clamp(24px, 4vw, 46px);
  }

  .ps-feature:nth-child(even) .ps-feature__copy {
    border-right: 6px solid var(--feature-color);
    border-left: 0;
    padding-right: clamp(24px, 4vw, 46px);
    padding-left: 0;
  }

  .ps-step-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
  }

  .ps-step-grid li {
    min-height: 260px;
    align-content: start;
  }

  .ps-step-grid > li + li::before {
    top: 50%;
    left: -25px;
    content: "→";
    transform: translateY(-50%);
  }

  .ps-kit-note {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: center;
    margin-top: 28px;
    padding: 26px;
  }

  .ps-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ps-prize-spotlight {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
  }

  .ps-formula {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
  }

  .ps-formula i {
    align-self: center;
    transform: none;
  }

  .ps-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .ps-event-card {
    min-height: 360px;
    padding: 28px;
  }

  .ps-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ps-notice__grid {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 70px;
  }

  .ps-sponsor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .ph-box--sponsor {
    min-height: 150px;
  }

  .ps-bottom-cta {
    align-items: end;
    justify-items: start;
    margin-top: 90px;
  }

  .ps-bottom-cta .ps-button {
    width: auto;
    min-width: 220px;
  }

  .ps-footer {
    padding-bottom: 42px;
  }

  .ps-sticky-cta {
    grid-template-columns: minmax(0, 720px) minmax(240px, 400px);
    justify-content: center;
    padding-inline: 32px;
  }
}

@media (min-width: 1024px) {
  .ps-ticket-grid {
    gap: 20px;
  }

  .ps-sponsor-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* PC 에서는 섹션 제목을 한 줄로 세우고 글자도 키운다.
     - 42rem(672px) 상한은 좁은 화면에서 줄길이를 잡아 주는 값이라 PC 제목까지 접어 버린다.
       제목만 풀고, 본문 문단은 읽기 좋은 길이를 그대로 유지한다.
     - 크기는 실측으로 잡았다(2026-09-08). 한 줄에 필요한 폭은 글자 크기에 비례하고,
       가장 긴 제목("누구나 따라할 수 있는 4-STEP 플레이 단계")의 비례상수는 16.42,
       가장 좁은 자리에 놓이는 "플레이 전 유의사항"은 7.10 이다. 1024px 화면의 랩 폭
       960px / 유의사항 박스 334px 을 기준으로 하면 각각 58.5px·47.0px 까지 한 줄로 버틴다.
       상한 2.8rem(44.8px)은 그 아래에서 약 5% 여유를 남긴 값이다. */
  .ps-heading {
    max-width: none;
  }

  .ps-heading > p:last-child {
    max-width: 42rem;
  }

  /* 브리핑 섹션 제목만은 --t-display 로 훨씬 크게 쓰는 자리다. 여기서 덮어쓰면 안 된다. */
  .ps-section:not(.ps-briefing) h2 {
    font-size: clamp(2.55rem, 4.2vw, 2.8rem);
  }

  .ps-benefits__grid > h2 {
    max-width: none;
  }

  /* 좁은 화면에서만 쓰는 줄바꿈. PC 에서는 접어서 한 줄로 만든다(앞뒤 공백은 마크업에 있다). */
  .ps-br-narrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-button,
  .ps-sticky-cta,
  .ps-accordion h3 button span {
    transition: none !important;
  }

  .ps-button:hover,
  .ps-skip-link {
    transform: none;
  }
}

/* 밝은 2D 게임 UI: 키 비주얼의 컬러 블록과 참고 이미지의 등각 격자를 페이지 언어로 확장한다. */
body[data-page="presale"] {
  --ps-paper: #fffdf7;
  --ps-paper-strong: #eef9ff;
  --ps-ink: #17324d;
  --ps-acid: #ffe45c;
  --ps-blue: #155bd7;
  --ps-cyan: #39d9e7;
  --ps-pink: #ff5ca8;
  --ps-mint: #55e59a;
  --ps-sky: #e8f8ff;
  --ps-grid: rgba(54, 88, 119, 0.13);
  background: var(--ps-paper);
}

body[data-page="presale"] main {
  background:
    linear-gradient(30deg, var(--ps-grid) 1px, transparent 1px) 0 0 / 52px 30px,
    linear-gradient(150deg, var(--ps-grid) 1px, transparent 1px) 0 0 / 52px 30px,
    var(--ps-paper);
}

.ps-button,
.ps-discount-badge,
.ph-token {
  border-radius: 2px;
}

.ps-button {
  border: 3px solid var(--ps-ink);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, 100% 4px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) 100%, 8px 100%, 8px calc(100% - 4px), 0 calc(100% - 4px), 0 8px, 4px 8px, 4px 4px, 8px 4px);
}

.ps-button--dark {
  border-color: var(--ps-ink);
  background: var(--ps-blue);
  color: #ffffff;
  box-shadow: 6px 6px 0 var(--ps-pink);
}

.ps-button--light {
  border-color: var(--ps-ink);
  background: #ffffff;
  color: var(--ps-ink);
  box-shadow: 6px 6px 0 var(--ps-cyan);
}

.ph-box {
  border: 2px dashed var(--ps-ink);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.78);
}

/* 실제 키 비주얼 */
.ps-keyvisual {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 4px solid var(--ps-ink);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 10px 10px 0 var(--ps-cyan), 16px 16px 0 var(--ps-pink);
}

.ps-keyvisual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.ps-keyvisual picture {
  width: 100%;
  height: 100%;
  display: block;
}

.ps-keyvisual--hero {
  width: min(calc(100% - 16px), 460px);
  aspect-ratio: 1811 / 2560;
  justify-self: center;
}

.ps-keyvisual--hero img {
  object-fit: contain;
  object-position: center;
}

.ps-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(var(--ps-pink) 0 0) 3% 12% / 6px 6px no-repeat,
    linear-gradient(var(--ps-blue) 0 0) 12% 26% / 10px 10px no-repeat,
    linear-gradient(var(--ps-mint) 0 0) 24% 8% / 14px 14px no-repeat,
    linear-gradient(var(--ps-acid) 0 0) 34% 18% / 8px 8px no-repeat,
    linear-gradient(var(--ps-cyan) 0 0) 46% 6% / 6px 6px no-repeat,
    linear-gradient(var(--hunt-orange) 0 0) 58% 23% / 18px 18px no-repeat,
    linear-gradient(var(--hunt-purple) 0 0) 72% 12% / 10px 10px no-repeat,
    linear-gradient(var(--ps-pink) 0 0) 86% 20% / 14px 14px no-repeat,
    linear-gradient(var(--ps-blue) 0 0) 95% 36% / 6px 6px no-repeat,
    linear-gradient(var(--ps-mint) 0 0) 8% 44% / 14px 14px no-repeat,
    linear-gradient(var(--ps-acid) 0 0) 20% 58% / 6px 6px no-repeat,
    linear-gradient(var(--ps-cyan) 0 0) 31% 39% / 10px 10px no-repeat,
    linear-gradient(var(--hunt-orange) 0 0) 44% 51% / 14px 14px no-repeat,
    linear-gradient(var(--hunt-purple) 0 0) 55% 68% / 6px 6px no-repeat,
    linear-gradient(var(--ps-pink) 0 0) 67% 43% / 10px 10px no-repeat,
    linear-gradient(var(--ps-blue) 0 0) 78% 62% / 18px 18px no-repeat,
    linear-gradient(var(--ps-mint) 0 0) 91% 54% / 8px 8px no-repeat,
    linear-gradient(var(--ps-acid) 0 0) 12% 82% / 18px 18px no-repeat,
    linear-gradient(var(--ps-cyan) 0 0) 37% 77% / 6px 6px no-repeat,
    linear-gradient(var(--hunt-orange) 0 0) 62% 87% / 14px 14px no-repeat,
    linear-gradient(var(--hunt-purple) 0 0) 88% 80% / 10px 10px no-repeat;
  content: "";
  pointer-events: none;
}

.ps-hero__grid {
  position: relative;
  z-index: 1;
}

.ps-hero__copy > h1,
.ps-heading h2,
.ps-content__copy h2,
.ps-benefits h2,
.ps-briefing h2 {
  color: var(--ps-ink);
  text-shadow: 3px 3px 0 rgba(57, 217, 231, 0.32);
}

.ps-hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, var(--hunt-red) 0 20%, var(--ps-blue) 20% 40%, var(--ps-mint) 40% 60%, var(--ps-acid) 60% 80%, var(--ps-pink) 80%) top / 100% 10px no-repeat,
    linear-gradient(30deg, var(--ps-grid) 1px, transparent 1px) 0 0 / 52px 30px,
    linear-gradient(150deg, var(--ps-grid) 1px, transparent 1px) 0 0 / 52px 30px,
    #fffdf7;
}

.ps-hero__facts > div {
  border-left: 5px solid var(--ps-cyan);
  padding: 4px 0 4px 10px;
  background: rgba(255, 255, 255, 0.7);
}

.ps-section {
  position: relative;
  --ps-section-pixel-a: var(--ps-pink);
  --ps-section-pixel-b: var(--ps-cyan);
  --ps-section-pixel-c: var(--hunt-purple);
}

.ps-section::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(var(--ps-section-pixel-a) 0 0) 6% 14% / 7px 7px no-repeat,
    linear-gradient(var(--ps-section-pixel-b) 0 0) 22% 78% / 9px 9px no-repeat,
    linear-gradient(var(--ps-section-pixel-c) 0 0) 38% 9% / 12px 12px no-repeat,
    linear-gradient(var(--ps-section-pixel-a) 0 0) 51% 86% / 14px 14px no-repeat,
    linear-gradient(var(--ps-section-pixel-b) 0 0) 64% 58% / 17px 17px no-repeat,
    linear-gradient(var(--ps-section-pixel-c) 0 0) 75% 19% / 6px 6px no-repeat,
    linear-gradient(var(--ps-section-pixel-a) 0 0) 84% 73% / 10px 10px no-repeat,
    linear-gradient(var(--ps-section-pixel-b) 0 0) 93% 28% / 15px 15px no-repeat,
    linear-gradient(var(--ps-section-pixel-c) 0 0) 97% 91% / 8px 8px no-repeat;
  content: "";
  pointer-events: none;
}

/* 현장 사진 섹션의 제목·설명·캡션과 겹치는 도트만 가장자리로 이동한다. */
.ps-section[data-presale-block="content-intro"]::before {
  background:
    linear-gradient(var(--ps-section-pixel-a) 0 0) 1% 14% / 7px 7px no-repeat,
    linear-gradient(var(--ps-section-pixel-b) 0 0) 22% 78% / 9px 9px no-repeat,
    linear-gradient(var(--ps-section-pixel-c) 0 0) 38% 9% / 12px 12px no-repeat,
    linear-gradient(var(--ps-section-pixel-a) 0 0) 1% 92% / 14px 14px no-repeat,
    linear-gradient(var(--ps-section-pixel-b) 0 0) 64% 58% / 17px 17px no-repeat,
    linear-gradient(var(--ps-section-pixel-c) 0 0) 99% 19% / 6px 6px no-repeat,
    linear-gradient(var(--ps-section-pixel-a) 0 0) 84% 73% / 10px 10px no-repeat,
    linear-gradient(var(--ps-section-pixel-b) 0 0) 100% 28% / 15px 15px no-repeat,
    linear-gradient(var(--ps-section-pixel-c) 0 0) 97% 91% / 8px 8px no-repeat;
}

.ps-section:nth-of-type(3n + 1) {
  --ps-section-pixel-a: var(--ps-blue);
  --ps-section-pixel-b: var(--ps-acid);
  --ps-section-pixel-c: var(--ps-pink);
}

.ps-section:nth-of-type(3n + 2) {
  --ps-section-pixel-a: var(--ps-mint);
  --ps-section-pixel-b: var(--hunt-orange);
  --ps-section-pixel-c: var(--ps-blue);
}

.ps-section > .ps-wrap {
  position: relative;
  z-index: 1;
}

.ps-section:nth-of-type(even) {
  background: rgba(232, 248, 255, 0.82);
}

/* 얼리버드를 주 상품으로, 현장가는 비교용 보조 카드로 보여준다. */
.ps-ticket-grid {
  align-items: end;
  gap: 18px;
}

.ps-ticket {
  border: 2px solid #8da2b4;
  border-radius: 2px;
  background: #f3f7f9;
  color: #53697b;
  box-shadow: 3px 3px 0 #b9c7d2;
}

.ps-ticket--featured {
  min-height: 300px;
  border: 4px solid var(--ps-ink);
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0 22%, transparent 22% 78%, rgba(255, 92, 168, 0.13) 78%),
    #ffffff;
  color: var(--ps-ink);
  box-shadow: 9px 9px 0 var(--ps-pink);
}

.ps-ticket--featured .ps-ticket__index {
  color: var(--ps-blue);
  font-size: 2rem;
}

.ps-ticket--featured h3 {
  font-size: var(--t-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.ps-ticket--featured .ps-ticket__period {
  color: #3e5366;
  font-weight: 800;
}

.ps-ticket--featured .ps-ticket__price {
  color: var(--ps-ink);
  font-size: var(--t-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* 정가는 지워진 요약 상자와 같은 굵기로 긋는다. 대형 할인율 밑에서 얇은 선은 보이지 않는다. */
.ps-ticket--featured .ps-ticket__discount s {
  color: #3e5366;
  font-size: var(--t-lead);
  font-weight: 800;
  text-decoration-thickness: 3px;
}

.ps-ticket:not(.ps-ticket--featured) {
  min-height: 0;
  padding: 16px;
}

.ps-ticket:not(.ps-ticket--featured) .ps-ticket__index {
  opacity: 0.58;
}

.ps-ticket:not(.ps-ticket--featured) h3,
.ps-ticket:not(.ps-ticket--featured) .ps-ticket__price {
  color: #53697b;
}

.ps-discount-badge {
  border-color: var(--ps-ink);
  background: var(--ps-pink);
  color: var(--ps-ink);
  box-shadow: 3px 3px 0 var(--ps-ink);
}

@media (max-width: 767px) {
  .ps-button--hook {
    display: none;
  }

  .ps-ticket--featured {
    grid-template-columns: 52px minmax(0, 1fr);
    align-content: start;
  }

  .ps-ticket--featured .ps-ticket__index {
    grid-column: 1;
    grid-row: 1;
  }

  .ps-ticket--featured h3,
  .ps-ticket--featured .ps-ticket__period,
  .ps-ticket--featured .ps-ticket__rate,
  .ps-ticket--featured .ps-ticket__discount,
  .ps-ticket--featured .ps-ticket__price {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.ps-reward-card,
.ps-feature__copy,
.ps-step-grid li,
.ps-purchase-box,
.ps-event-card,
.ps-review-card,
.ps-kit-note {
  border-radius: 2px;
}

.ps-reward-card,
.ps-event-card,
.ps-review-card {
  border: 2px solid var(--ps-ink);
  box-shadow: 4px 4px 0 var(--ps-ink);
}

.ps-content {
  background: #ffffff !important;
}

.ps-section-nav {
  border-block: 2px solid var(--ps-ink);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ps-ink);
  box-shadow: 0 5px 0 var(--ps-cyan);
}

.ps-section-nav a {
  color: #53697b;
}

.ps-section-nav a[aria-current="location"] {
  color: var(--ps-ink);
}

.ps-section-nav a[aria-current="location"] span {
  background: #ffffff;
  box-shadow: 2px 2px 0 var(--ps-pink);
}

.ps-briefing {
  background: #eee2ff !important;
  color: var(--ps-ink);
}

.ps-briefing__copy > p {
  color: #40536d;
}

.ps-step-grid li {
  background: #ffffff;
}

.ps-how,
.ps-qna {
  background: rgba(255, 255, 255, 0.9) !important;
}

.ps-kit-note {
  border: 3px solid var(--ps-ink);
  background: #ffffff;
  box-shadow: 6px 6px 0 var(--ps-cyan);
}

.ps-benefits {
  background: #dff5ff !important;
  color: var(--ps-ink);
}

.ps-benefits__grid > div:first-child {
  border-color: rgba(23, 50, 77, 0.34);
}

.ps-formula .ph-token {
  background: #ffffff;
  color: var(--ps-ink);
}

.ps-purchase-box {
  border: 3px solid var(--ps-ink);
  background: #ffffff;
  box-shadow: 8px 8px 0 var(--ps-pink);
}

.ps-quantity__controls button {
  border-radius: 2px;
  background: #ffffff;
}

.ps-reviews {
  background: #fff0f7 !important;
}

.ps-accordion h3 button span {
  border-radius: 2px;
  background: #ffffff;
}

.ps-notice {
  background: #ffffff !important;
}

.ps-sponsors {
  background: #dff8ff !important;
  color: var(--ps-ink);
}

.ps-sponsor-card {
  border: 2px solid var(--ps-ink);
  border-radius: 2px;
  background: #ffffff;
  color: var(--ps-ink);
  box-shadow: 4px 4px 0 var(--ps-cyan);
}

.ps-sponsor-card > .ph-token {
  background: var(--ps-paper);
  color: var(--ps-ink);
}

.ps-footer {
  border-top: 3px solid var(--ps-ink);
  background: #ffffff;
  color: var(--ps-ink);
}

.ps-footer__brand {
  color: var(--ps-ink);
}

.ps-sticky-cta {
  border-color: var(--ps-ink);
  background: rgba(255, 253, 247, 0.97);
  box-shadow: 0 -4px 0 var(--ps-cyan);
  opacity: 1;
  transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease;
}

/* PC에서는 초기 HTML이나 이전 스크립트가 붙인 클래스가 구매 바를 숨기지 않는다. */
@media (max-width: 767px) {
  .ps-sticky-cta.is-hero-overlap {
    visibility: hidden;
    opacity: 0;
    transform: translateY(calc(100% + env(safe-area-inset-bottom) + 8px));
  }
}

.ps-section {
  background-image:
    linear-gradient(30deg, rgba(54, 88, 119, 0.065) 1px, transparent 1px),
    linear-gradient(150deg, rgba(54, 88, 119, 0.065) 1px, transparent 1px) !important;
  background-position: 0 0;
  background-size: 52px 30px;
}

@media (min-width: 768px) {
  .ps-keyvisual--hero {
    width: min(100%, 520px);
    max-height: none;
    justify-self: center;
  }

  .ps-ticket-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(230px, 0.7fr);
  }

  .ps-ticket--featured {
    min-height: 380px;
    padding: 30px;
  }

  .ps-ticket:not(.ps-ticket--featured) {
    min-height: 230px;
  }

  .ps-ticket--featured h3 {
    margin-top: 18px;
    font-size: var(--t-h1);
  }

  .ps-ticket--featured .ps-ticket__price {
    font-size: var(--t-h1);
  }

  .ps-ticket:not(.ps-ticket--featured) h3 {
    margin-top: 24px;
    font-size: var(--t-h3);
  }

  .ps-ticket:not(.ps-ticket--featured) .ps-ticket__price {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) and (max-width: 899px) and (min-height: 700px) {
  .ps-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .ps-hero__copy {
    width: min(100%, 640px);
  }

  .ps-keyvisual--hero {
    width: min(100%, 460px);
  }
}

@media (min-width: 1024px) {
  .ps-ticket-grid {
    grid-template-columns: minmax(0, 1.75fr) minmax(230px, 0.65fr);
  }
}

/* 실제 리워드 사진과 텍스트 후기 */
.ps-reward-photo {
  margin: 0;
  min-width: 0;
  align-self: center;
  overflow: hidden;
  border: 3px solid var(--ps-ink);
  background: #ffffff;
  box-shadow: 6px 6px 0 var(--ps-cyan);
}
.ps-reward-photo img { display: block; width: 100%; height: auto; }
/* 배경을 제거한 컷아웃(스위치 2·상품권)은 흰 박스에 가두지 않고 카드 바탕 위에 그대로 얹는다.
   흰 배경을 남겨 두면 알파 채널이 아무 의미가 없어진다. */
.ps-reward-photo--cutout {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* 표시 크기가 원본 픽셀을 넘어서면 그대로 뭉개져 보인다. 실측(2026-09-07)으로 상한을 잡았다.
   - 상품권: 원본 782px 폭을 무손실 확대해 만든 파일이라 실해상도가 782px 이다. 그런데
     `max-height` 만 두면 세로 320px × 가로세로비 2.45 = 가로 782px 로 펴져 1.7배 확대가 됐다.
     화면 배율 2배 기기에서는 1564px 을 요구해 더 심해진다. 그래서 가로 상한을 함께 둔다.
   - 스위치 2: 닌텐도 공식 2000px 원본이라 여유가 있지만, 같은 기준으로 맞춰 크기를 낮춘다.
   PC 는 여백이 넉넉해 더 작게 잡아도 카드가 비어 보이지 않는다(요청 사항). */
.ps-reward-photo--cutout img {
  max-width: min(100%, 420px);
  max-height: 280px;
  margin-inline: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .ps-reward-photo--cutout img {
    max-width: min(100%, 380px);
    max-height: 240px;
  }
}
.ps-reward-card--spotlight .ps-reward-photo {
  border-width: 4px;
  box-shadow: none;
}
.ps-prize-spotlight .ps-reward-photo { box-shadow: 8px 8px 0 var(--ps-pink); }
.ps-review-card > p::before { content: "— "; }

/* 리워드 안내와 이벤트 썸네일 */
.ps-reward-notice {
  margin-top: 18px;
  display: block;
  grid-column: 1 / -1;
  color: #40536d;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  word-break: keep-all;
}
.ps-event-card__thumbnail {
  display: block;
  width: 100%;
  max-width: 240px;
  height: 190px;
  margin-top: auto;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
}
.ps-kit-note__deadline { grid-column: 1 / -1; }
.ps-review-card h3 { font-size: var(--t-h3); line-height: var(--lh-h3); }
.ps-review-card__stars {
  color: #a54e00;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.3;
}
body[data-page="presale"] {
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

/* 수령 안내와 이벤트 이미지를 화면 크기에 맞게 정렬합니다. */
.ps-kit-note__deadline strong {
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.ps-kit-note__map {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.ps-kit-note__map:hover,
.ps-kit-note__map:focus-visible { text-decoration-thickness: 2px; }

@media (min-width: 768px) {
  .ps-kit-note {
    align-content: center;
    align-items: start;
    row-gap: 12px;
  }
  .ps-kit-note h3 { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .ps-kit-note dl { grid-column: 2; grid-row: 1; }
  .ps-kit-note__deadline { grid-column: 2; grid-row: 2; }
}
@media (min-width: 900px) {
  .ps-event-card__thumbnail { max-width: 300px; height: 240px; }
}

/* SNS 참여 태그 */
.ps-sns-tags {
  margin-block: 16px;
  padding: 18px;
  border: 2px solid var(--ps-ink);
  background: #fff;
  color: var(--ps-ink);
}
.ps-sns-tags p { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; line-height: 1.7; }
.ps-sns-tags p + p { margin-top: 12px; }
.ps-sns-tags span { flex-basis: 100%; font-size: var(--t-caption); color: #40536d; }
.ps-sns-tags strong { white-space: nowrap; }
.ps-event-card .ps-sns-notice { color: #40536d; font-size: var(--t-caption); }
/* 추첨 리워드 두 장(에어팟·상품권)은 가로 비율이 1.2 대 2.4 로 크게 달라, 각자 원본 비율대로
   두면 한쪽만 커 보이고 기준선도 어긋난다. 같은 크기의 상자 두 개를 나란히 두고 그 안에서
   가운데로 맞춰(contain) 두 상품이 한 덩어리로 읽히게 한다. 순서는 에어팟이 앞이다. */
.ps-event-prizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  /* 위쪽 auto 는 카드 아래에 붙여 두던 기존 배치를 그대로 유지한다. 좌우 auto 로 가운데 정렬만 더한다. */
  margin: auto auto 0;
}
.ps-event-prizes__caption {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--t-caption);
  line-height: var(--lh-small);
  font-weight: 600;
  color: #40536d;
}
.ps-event-prizes__detail {
  flex-basis: 100%;
  margin-top: 0;
  text-align: center;
  font-size: var(--t-small);
  line-height: var(--lh-small);
  font-weight: 700;
  color: var(--ps-ink);
}
.ps-event-prizes .ps-event-card__thumbnail {
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  max-width: min(148px, 46%);
  height: 104px;
  margin-top: 0;
  object-fit: contain;
  object-position: center;
}
/* 기본 리워드 3종: 같은 크기 상자를 중앙에 모으고 원본 비율을 유지합니다. */
.ps-event-drinks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  margin: auto auto 0;
}
.ps-event-drinks .ps-event-card__period {
  grid-column: 1 / -1;
  text-align: center;
}
.ps-event-drinks .ps-event-card__thumbnail {
  min-width: 0;
  max-width: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.05;
  margin: 0;
  object-fit: contain;
  object-position: center;
}
/* 상품권(가로세로비 2.4)과 에어팟(1.2)은 비율이 크게 달라, 폭을 퍼센트로 나눠 주면 상품권만
   커 보이고 두 장이 카드 양 끝으로 밀려 가운데가 빈다. 같은 크기의 상자 두 개를 가운데로 모으고
   상자 안에서 비율을 지킨 채 맞춘다(contain). 순서는 에어팟이 앞이다. */
.ps-reward-photo--sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
/* 높이를 기준으로 두고 폭은 비율대로 따라오게 한다. 상자가 그림 폭에 딱 맞아야 두 장이
   figure 한가운데로 모인다. 폭 상한은 figure 폭(46%)에도 함께 걸어 320px 기기에서 넘치지 않게 한다.
   상한을 걸어 두면 flex 가 줄일 일이 없어, 상자 폭이 그림 폭과 어긋나는 일도 생기지 않는다.
   (상한 없이 두면 picture 가 원본 비율만큼 벌어졌다가 flex-shrink 로 줄어들어,
    안의 그림보다 넓은 빈 상자가 남고 두 장이 오른쪽으로 밀린다.) */
.ps-reward-photo--sns {
  --sns-prize-height: 112px;
  --sns-voucher-width: 176px;
}
.ps-reward-photo--sns > * { flex: 0 1 auto; min-width: 0; }
.ps-reward-photo--sns .ps-airpods {
  width: auto;
  height: var(--sns-prize-height);
  max-width: 46%;
}
.ps-reward-photo--sns picture {
  display: block;
  width: min(var(--sns-voucher-width), 46%);
  height: var(--sns-prize-height);
}
.ps-reward-photo--sns img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin-inline: 0;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 768px) {
  .ps-reward-photo--sns {
    --sns-prize-height: 132px;
    --sns-voucher-width: 200px;
  }
}

/* 지정 로고를 원본 비율로 표시합니다: 주최 3·2 / 주관 2 / 후원 4.
   로고마다 가로세로비가 2.5 대 4.3 으로 달라, 높이만 맞추면 폭이 제각각이 되어 줄이 어긋나 보인다.
   모든 로고에 같은 크기의 상자를 주고 그 안에서 비율을 지킨 채 가운데로 맞춘다(contain). */
.ps-organizers { background: #fff; color: var(--ps-ink); }
.ps-organizer-list { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.ps-organizer-row { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; }
.ps-organizer-row dt { flex: 0 0 auto; font-size: var(--t-caption); font-weight: 800; white-space: nowrap; }
.ps-organizer-row dd { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.ps-organizer-row img {
  display: block;
  width: 92px;
  height: 24px;
  object-fit: contain;
  object-position: center;
}
.ps-organizers .ps-bottom-cta { border-color: #c4ceda; }

/* 네이티브 dialog의 포커스 제한·Escape 닫기를 사용하는 하단 인원 선택창 */
body.ps-sheet-open { overflow: hidden; }
.ps-purchase-sheet {
  position: fixed;
  inset: auto 0 0;
  box-sizing: border-box;
  width: min(100%, 560px);
  max-width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  margin: 0 auto;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  border: 2px solid var(--ps-ink);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: #fff;
  color: var(--ps-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 -8px 32px #14263b33;
}
.ps-purchase-sheet[open] { animation: ps-sheet-enter 180ms ease-out; }
.ps-purchase-sheet::backdrop { background: #10233b99; }
.ps-purchase-sheet__head { display: flex; align-items: start; gap: 16px; justify-content: space-between; }
.ps-purchase-sheet__head h2 { margin: 0; font-size: 1.4rem; line-height: 1.4; word-break: keep-all; }
.ps-purchase-sheet__close { flex: 0 0 44px; height: 44px; padding: 0; border: 1px solid #b6c4d3; background: #fff; color: var(--ps-ink); font-size: 28px; cursor: pointer; }
.ps-purchase-sheet > p { margin-top: 16px; }
.ps-purchase-sheet .ps-quantity { margin-block: 24px; }
.ps-purchase-sheet__total { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: baseline; }
.ps-purchase-sheet__total strong { font-size: 1.6rem; }
.ps-purchase-sheet__notice { color: #40536d; font-size: var(--t-caption); line-height: 1.65; }
.ps-purchase-sheet .ps-purchase-sheet__next { width: 100%; margin-top: 20px; }
.ps-purchase-sheet :focus-visible { outline: 3px solid #1960d8; outline-offset: 3px; }
@keyframes ps-sheet-enter { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ps-purchase-sheet[open] { animation: none; } }

.ps-faq-list > .ps-accordion + .ps-accordion { border-top: 0; }

@media (max-width: 767px) {
  .ps-organizer-list { gap: 10px 18px; }
}
/* 좁은 화면에서는 네 로고가 한 줄에 들어가지 않아 주최·주관·후원 묶음이 줄 사이에서 쪼개진다.
   묶음마다 한 줄을 주어 라벨과 로고가 세로로 줄 맞춰 보이게 한다. */
@media (max-width: 559px) {
  .ps-organizer-list { flex-direction: column; gap: 10px; }
  .ps-organizer-row { justify-content: center; }
  .ps-organizer-row dt { width: 30px; text-align: right; }
  .ps-organizer-row img { width: 84px; height: 22px; }
}
@media (min-width: 900px) {
  .ps-event-grid { grid-template-columns: minmax(0, 1fr); }
  .ps-event-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
    column-gap: 28px;
    align-items: start;
    min-height: 0;
  }
  .ps-event-card > * { grid-column: 1; }
  .ps-event-card > .ps-event-prizes,
  .ps-event-card > .ps-event-drinks,
  .ps-event-card > .ps-event-card__thumbnail {
    grid-column: 2;
    grid-row: 1 / span 7;
    align-self: center;
    margin-top: 0;
  }
  .ps-event-card:last-child > .ps-event-drinks { grid-row: 1 / span 4; }
}

/* 현장 사진은 섹션 전체 폭에서 3:2 원본 비율로 보여 줍니다. */
.ps-photo-roll {
  --photo-window: 100%;
  --photo-item: max(220px, 70vw);
  --photo-gap: 12px;
  width: var(--photo-window);
  min-width: 0;
}
.ps-photo-roll__track { gap: var(--photo-gap); }
.ps-photo-roll__item { width: var(--photo-item); }
.ps-photo-roll__item img { aspect-ratio: 3 / 2; }
.ps-photo-roll__caption {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  text-align: center;
  word-break: keep-all;
}
@media (min-width: 520px) { .ps-photo-roll { --photo-item: 300px; } }
@media (min-width: 900px) { .ps-photo-roll { --photo-item: 360px; --photo-gap: 16px; } }
@media (min-width: 1280px) { .ps-photo-roll { --photo-item: 420px; } }