/* 바코드클래스 멤버십 랜딩 — Figma "Frame 19" (1920 × 7275) 구현
   좌표/치수는 피그마 값을 그대로 쓰고, 화면 폭에 맞춰 .page 전체를 스케일한다.

   --design-w: 화면 폭에 대응시킬 디자인 폭. 1920이면 피그마 원본 크기,
   그보다 크게 잡을수록 콘텐츠가 화면에서 작게 보인다(2400 = 80% 크기).
   섹션 배경은 이 폭을 꽉 채우므로 좌우 여백은 생기지 않는다. */

:root {
  --orange: #f14502;
  --ink: #121212;
  --cream: #fcf8ed;
  --design-w: 2400px;
  --page-h: 7275px;
  /* JS 없이도 동작하도록 브레이크포인트별 기본 스케일을 둔다. JS가 있으면 더 정밀하게 덮어쓴다. */
  --sc: 0.8;
}
@media (max-width: 1919px) { :root { --sc: 0.667; } }  /* ~1600 */
@media (max-width: 1599px) { :root { --sc: 0.6; } }    /* ~1440 */
@media (max-width: 1439px) { :root { --sc: 0.533; } }  /* ~1280 */
@media (max-width: 1279px) { :root { --sc: 0.467; } }  /* ~1120 */
@media (max-width: 1119px) { :root { --sc: 0.4; } }    /* ~960  */
@media (max-width: 959px)  { :root { --sc: 0.32; } }   /* ~768  */
@media (max-width: 767px)  { :root { --sc: 0.24; } }   /* ~576  */
@media (max-width: 575px)  { :root { --sc: 0.156; } }  /* ~375  */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  overflow: hidden;
  height: calc(var(--page-h) * var(--sc));
}

.page {
  width: var(--design-w);
  height: var(--page-h);
  transform-origin: top left;
  transform: scale(var(--sc));
}

.sec {
  position: relative;
  width: var(--design-w);
  overflow: hidden;
}

img { display: block; max-width: none; }

/* ── 공통: 섹션 헤드 ─────────────────────────────── */
.sec-head {
  position: absolute;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  letter-spacing: -1px;
  white-space: nowrap;
  z-index: 3;
}
.sec-head h2 { margin: 0; font-size: 64px; font-weight: 700; line-height: normal; }
.sec-head p  { margin: 0; font-size: 28px; font-weight: 500; line-height: normal; }
.sec-head--white h2 { color: #fff; }
.sec-head--white p  { color: #e7e7e7; }
.sec-head--dark h2, .sec-head--dark p { color: var(--ink); }

/* ── 공통: CTA 버튼 ─────────────────────────────── */
.cta {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 562px;
  padding: 33px 40px;
  border-radius: 999px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 4;
}
.cta:hover { transform: translate(-50%, -50%) scale(1.02); }
.cta--white  { background: #fff; color: #000; }
.cta--orange { background: var(--orange); color: #fff; }

/* ── 1. HERO ────────────────────────────────────── */
.sec-hero { height: 1080px; background: #000; }

.hero-bg {
  position: absolute;
  left: calc(50% - 85.57px);
  top: calc(50% - 327.56px);
  width: 1444.869px;
  height: 1128.883px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bg img {
  width: 1336.854px;
  height: 974.377px;
  object-fit: cover;
  opacity: 0.45;
  transform: rotate(-6.95deg);
}
.hero-bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(183.55deg, rgba(0,0,0,0) 82.738%, #000 96.081%);
}

.hero-title {
  position: absolute;
  left: calc(50% + 0.5px);
  top: calc(50% - 142.5px);
  width: 919px;
  height: 919px;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.hero-title img { width: 100%; height: 100%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero-badge {
  position: absolute;
  left: calc(50% - 355px);
  top: calc(50% - 328.32px);
  transform: translate(-50%, -50%) rotate(-15deg);
  width: 121px;
  height: 67px;
  z-index: 3;
}
.hero-badge-pill {
  position: absolute;
  inset: 0;
  background: var(--orange);
  border-radius: 99px;
}
.hero-badge-img {
  position: absolute;
  left: 15.5px;
  top: 7px;
  width: 90px;
  height: 53px;
  object-fit: cover;
}

.hero-sub {
  position: absolute;
  left: calc(50% + 0.5px);
  top: calc(50% + 193px);
  transform: translateX(-50%);
  margin: 0;
  font-size: 37px;
  font-weight: 600;
  color: #e7e7e7;
  letter-spacing: -1px;
  white-space: nowrap;
  z-index: 3;
}

.hero-cta { top: calc(50% + 369px); }

/* ── 2. 가격 / 영수증 ───────────────────────────── */
.sec-price { height: 1095px; background: var(--orange); }
.sec-price .sec-head { top: 70px; }
.sec-price .sec-head h2 { font-size: 64px; }
.sec-price .sec-head p { color: #fff; }

/* 찢어진 종이 + 텍스처 + 로고는 하나의 PNG로 미리 합성했다(assets 굽기 스크립트). */
.paper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 209px;
  width: 752px;
  height: 845.469px;
}
.paper-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.receipt {
  position: absolute;
  left: 96px;
  top: 366px;
  width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
}
.receipt-rows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 32px;
  letter-spacing: -1px;
}
.receipt-prices {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
  color: var(--ink);
  width: 100%;
}
.receipt-prices > div { display: flex; align-items: center; justify-content: space-between; }
.receipt-prices dt { width: 111px; font-weight: 500; }
.receipt-prices dd { width: 190px; margin: 0; font-weight: 700; text-align: right; }
.receipt .is-muted { color: rgba(18,18,18,0.6); }
.receipt-divider { width: 560px; height: 2px; }
.receipt-total {
  display: flex;
  align-items: center;
  gap: 87px;
  letter-spacing: -1px;
  white-space: nowrap;
}
.receipt-total-label { font-size: 32px; font-weight: 500; color: var(--ink); }
.receipt-total-price { font-size: 73px; font-weight: 800; color: var(--orange); }
.receipt-total-price em { font-size: 48px; font-style: normal; }

.discount-star {
  position: absolute;
  left: calc(50% + 321.1px);
  top: calc(50% - 253.4px);
  width: 187px;
  height: 187px;
  transform: translate(-50%, -50%) rotate(-8.36deg);
  z-index: 3;
}
.discount-star img { width: 100%; height: 100%; }
.discount-star-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--orange);
  letter-spacing: -1px;
}
.discount-star-text b { font-size: 52px; font-weight: 800; line-height: 1; }
.discount-star-text i { font-size: 32px; font-weight: 800; font-style: normal; line-height: 1; }

/* ── 3. AI 프로그램 ─────────────────────────────── */
.sec-program { height: 1178px; background: #000; }
.imac {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 284px;
  width: 958px;
  height: 639px;
  border-radius: 18px;
  overflow: hidden;
}
.imac img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program-cta { top: 1059px; }

/* ── 4. 가격 비교 차트 ──────────────────────────── */
.sec-chart { height: 1080px; background: var(--cream); }
.chart-wrap {
  position: absolute;
  left: calc(50% - 0.5px);
  top: 280px;
  transform: translateX(-50%);
  width: 847px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
}
.chart {
  position: relative;
  margin: 0;
  width: 847px;
  height: 637px;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
}
.chart-line { position: absolute; left: 81px; width: 660px; height: 3px; }
.chart-bar {
  position: absolute;
  width: 164px;
  border-radius: 18px 18px 0 0;
}
.chart-bar--gray   { left: 201px; top: 123px; height: 391px; background: #e8e8e8; }
.chart-bar--orange { left: 482px; top: 418px; height: 96px;  background: var(--orange); }
.chart-value, .chart-label {
  position: absolute;
  transform: translateX(-50%);
  letter-spacing: -1px;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
}
.chart-value--gray   { left: 283.5px; top: 65px;  font-size: 32px; }
.chart-value--orange { left: 564.5px; top: 360px; font-size: 34px; }
.chart-label { font-size: 28px; font-weight: 500; color: rgba(18,18,18,0.6); top: 539px; }
.chart-label--gray   { left: 283.5px; }
.chart-label--orange { left: 564px; }
.chart-arrow { position: absolute; left: 418px; top: 98px; width: 166px; height: 231px; }
.chart-badge {
  margin: 0;
  padding: 16px 31px;
  background: var(--orange);
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  white-space: nowrap;
}

/* ── 5. 자료 제공 ───────────────────────────────── */
.sec-gift { height: 1095px; background: var(--cream); }
.gift-bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -189px;
  width: var(--design-w);   /* 화면을 꽉 채우도록 디자인 폭에 맞춰 늘린다 */
  height: 1500px;
  object-fit: cover;
}
.gift-title {
  position: absolute;
  left: calc(50% - 0.5px);
  top: 70px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1px;
  text-align: center;
  color: var(--ink);
  white-space: nowrap;
  z-index: 3;
}
.gift-img {
  position: absolute;
  left: calc(50% - 14.5px);
  top: calc(50% + 27px);
  transform: translate(-50%, -50%) rotate(-10.35deg);
  width: 657.537px;
  height: 657.537px;
  z-index: 2;
}
.gift-img img { width: 100%; height: 100%; object-fit: cover; }
.sparkle { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
.sparkle--1 { left: calc(50% + 226.5px); top: calc(50% + 191.16px); width: 111px; height: 143px; }
.sparkle--2 { left: calc(50% - 263.5px); top: calc(50% - 151.84px); width: 111px; height: 143px; }
.sparkle--3 { left: calc(50% + 162px);   top: calc(50% + 119.16px); width: 64px;  height: 83px; }
.sparkle--4 { left: calc(50% + 138.5px); top: calc(50% + 202.16px); width: 49px;  height: 63px; }
.gift-cta { top: calc(50% + 428.5px); color: #333; }

/* ── 6. 무제한 오픈 ─────────────────────────────── */
.sec-open { height: 1080px; background: #000; }
.light-beam {
  position: absolute;
  left: calc(50% + 1.25px);
  top: calc(50% + 419.5px);
  width: 1120px;
  height: 283px;
  transform: translate(-50%, -50%);
}
.door {
  position: absolute;
  left: calc(50% + 0.5px);
  top: calc(50% + 45.02px);
  width: 297px;
  height: 509.951px;
  transform: translate(-50%, -50%);
  background: #000;
  border-radius: 11px;
  box-shadow: 0 0 60.7px 0 var(--orange), 0 4px 177.8px 0 var(--orange);
}
.door img {
  position: absolute;
  left: 122.5px;
  top: 216.6px;
  width: 51.108px;
  height: 77.981px;
}
.textures {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--design-w);
  height: 1200px;
  transform: translate(-50%, -50%);
  opacity: 0.42;
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

/* ── 7. NOTICE ──────────────────────────────────── */
.sec-notice { height: 667px; background: #000; }
.notice {
  position: absolute;
  left: calc(50% - 430px);
  top: 84px;
  color: #d4d4d8;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
}
.notice h2, .notice h3 { margin: 0; color: inherit; font: inherit; line-height: 22px; white-space: pre; }
.notice h3 { margin-top: 22px; }
.notice ul { list-style: none; margin: 0; padding: 0; }
.notice li { line-height: 22px; white-space: pre; }
.notice li::before { content: "· "; }