/* ============================================================
   Promotion / product landing pages
   /adaptive-learning · /mock-test-pack · /course-pack

   기획팀 목업(apps.edmedu.com/.../promotion.html)은 자체 CSS 로 만들어진
   문서용 시안이라 그대로 옮기지 않는다. 여기서는 같은 **내용 구조**를
   GIO 디자인 토큰(tokens.css)으로 다시 세운다 — 색·간격·타이포를
   사이트 나머지와 공유해야 다크모드와 반응형이 따라온다.
   ============================================================ */

.promo {
  --promo-gutter: var(--gio-space-6);
}

.promo__container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: var(--promo-gutter);
}

/* ── 전역 프로모션 바 (기간 한정) ─────────────────────────────
   메인의 런치 바(`.lh-blast`, screens/home-launch.css)를 한 줄 높이로 줄인 판이다.
   같은 행사가 메인에서는 큰 배너로, 나머지 페이지에서는 이 띠로 나타나므로
   배경 그라디언트 · 플래시 배지 · 세일 칩을 그대로 가져와 크기만 줄였다 — 페이지를
   옮길 때 "다른 프로모션인가" 로 읽히지 않게 한다. (260922)

   토큰을 쓰지 않고 런치 바의 값을 그대로 복사한 이유: 이 띠는 메인 배너와 **같은 그림**
   이어야 한다. 사이트 토큰을 타면 메인만 기획팀 팔레트로 남아 둘이 다시 갈라진다.
   그래서 다크 테마 분기도 없다 — 원래 어두운 판 위 흰 글씨라 반전할 것이 없다. */
.promo-blast {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 215, 92, 0.25), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(44, 82, 255, 0.18), transparent 18%),
    linear-gradient(110deg, #081125 0%, #142655 45%, #1f4dff 100%);
}

/* 런치 바의 광원 두 개. 띠 높이에 맞춰 반지름만 줄였다. */
.promo-blast::before,
.promo-blast::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  opacity: 0.12;
  pointer-events: none;
  filter: blur(18px);
}
.promo-blast::before {
  width: 220px;
  height: 220px;
  background: #fff;
  top: -150px;
  left: -60px;
}
.promo-blast::after {
  width: 300px;
  height: 300px;
  background: #4c6bff;
  right: -120px;
  bottom: -220px;
}

.promo-blast__row {
  /* 폭은 메인 런치 바의 `.lh-wrap` 과 같은 값을 쓴다. `.promo__container` 를 빌려 쓰면
     안 된다 — 그 규칙의 `--promo-gutter` 는 `.promo` 안에서만 정의되어, 이 띠처럼
     프로모션 페이지 밖에 있는 자리에서는 좌우 여백이 통째로 0 이 된다. */
  width: min(100% - 24px, 1120px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-block: 9px;
}

/* 넓은 화면에서는 한 줄로 못박는다 — 배지·헤드라인·칩이 두 줄로 접히면 "축소판" 이
   아니라 또 하나의 배너가 된다. 줄일 수 있는 건 헤드라인뿐이라 그것만 줄어들게 두고,
   끝내 모자라면 말줄임으로 흘린다. */
@media (min-width: 1200px) {
  .promo-blast__row {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .promo-blast__title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.promo-blast__flash {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font: 700 11px ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.promo-blast__flash i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd75c;
  box-shadow: 0 0 0 3px rgba(255, 215, 92, 0.18);
}

/* 메인 배너의 헤드라인. 띠 안에서는 가격 칩이 우선이라 좁아지면 먼저 내린다. */
.promo-blast__title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--gio-w-extrabold, 800);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* 메인 세일 카드(.lh-sale)를 한 줄 칩으로 접은 것.
   카드가 쥐고 있던 정보(할인율 · 상품/가격 · 마감)를 순서 그대로 가로로 눕혔다. */
.promo-blast__sale {
  display: inline-flex;
  align-items: center;
  /* 칩은 한 줄로 못박는다. 안에서 접히면 띠 높이가 두 배가 된다. */
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #2e5bff, #173be0);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  text-decoration: none;
  transition: 0.18s;
}
.promo-blast__sale:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.promo-blast__off {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.promo-blast__off em {
  font-style: normal;
  color: #ffd75c;
}

.promo-blast__price {
  font-size: 13px;
  line-height: 1.35;
  color: #d7e1ff;
}
.promo-blast__price s {
  opacity: 0.65;
  margin-right: 2px;
}
.promo-blast__price b {
  color: #fff;
  font-weight: 800;
}

.promo-blast__go {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.promo-blast__deadline {
  font: 700 11px ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffd75c;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .promo-blast__row { width: min(100% - 40px, 1120px); }
}

/* 칩(할인율·가격·마감)은 끝까지 남긴다 — 이 띠가 존재하는 이유가 그 셋이다.
   자리가 모자라면 헤드라인부터 내린다. */
@media (max-width: 1199px) {
  .promo-blast__title { display: none; }
}
@media (max-width: 720px) {
  .promo-blast__row { gap: 6px 10px; padding-block: 8px; }
  .promo-blast__off { font-size: 16px; }
  .promo-blast__price { font-size: 12px; }
  /* 좁은 화면에서는 칩을 한 줄로 못박지 않는다 — 못박으면 넘쳐 잘린다(가격이 화면
     밖으로 나간다). 대신 상품명을 내려 한 줄에 들어갈 확률을 높이고, 그래도 모자라면
     접히게 둔다. */
  .promo-blast__sale {
    flex-wrap: wrap;
    white-space: normal;
    justify-content: center;
    gap: 2px 8px;
    padding: 5px 12px;
    box-shadow: none;
    max-width: 100%;
  }
  .promo-blast__product { display: none; }
}

/* ── Hero ──────────────────────────────────────────────────── */
.promo-hero {
  padding-block: var(--gio-space-10) var(--gio-space-9);
  background:
    radial-gradient(120% 100% at 85% 0%, var(--gio-color-action-soft) 0%, transparent 60%),
    var(--gio-color-bg);
  border-bottom: 1px solid var(--gio-color-border);
}
.promo-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--gio-space-9);
  align-items: start;
}
.promo-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--gio-space-3);
  padding: 3px var(--gio-space-3);
  border-radius: var(--gio-radius-pill);
  background: var(--gio-color-action-soft);
  color: var(--gio-color-action);
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-bold);
  letter-spacing: var(--gio-tracking-wide);
  text-transform: uppercase;
}
.promo-hero__title {
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-5xl);
  line-height: 1.08;
  font-weight: var(--gio-w-extrabold);
  letter-spacing: var(--gio-tracking-tight);
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-4);
}
.promo-hero__title em {
  font-style: normal;
  color: var(--gio-color-action);
}
.promo-hero__lede {
  font-size: var(--gio-text-lg);
  line-height: 1.65;
  color: var(--gio-color-text-muted);
  margin: 0 0 var(--gio-space-6);
  max-width: 56ch;
}

/* 가격 블록 — 두 단으로 나눈다 (260915).
   정가·할인율은 작은 글씨로 한 줄에 묶고, 실구매가만 큰 글씨로 아래에 둔다.
   이전엔 14/24/60/16px 네 가지를 한 줄에 baseline 정렬해, 배지와 정가가
   큰 숫자 밑동에 매달린 채 크기가 들쭉날쭉해 보였다.
   크기 단계도 3개(12 / 16 / 48px)로 줄여 정가와 기간 표기를 같은 급으로 맞췄다. */
.promo-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gio-space-2);
  margin-bottom: var(--gio-space-5);
}
/* 보조 단 — 정가 + 할인 배지 */
.promo-price__was {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gio-space-2);
}
.promo-price__strike {
  font-size: var(--gio-text-base);
  line-height: 1.4;
  color: var(--gio-color-text-faint);
  text-decoration: line-through;
}
.promo-price__off {
  padding: 2px var(--gio-space-2);
  border-radius: var(--gio-radius-pill);
  background: var(--gio-color-danger);
  color: #fff;
  font-size: var(--gio-text-xs);
  line-height: 1.5;
  font-weight: var(--gio-w-bold);
  letter-spacing: var(--gio-tracking-wide);
}
/* 주 단 — 실구매가 + 기간 */
.promo-price__main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gio-space-2);
}
.promo-price__now {
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-5xl);
  line-height: 1;
  font-weight: var(--gio-w-extrabold);
  letter-spacing: var(--gio-tracking-tight);
  color: var(--gio-color-text-strong);
}
.promo-price__per {
  font-size: var(--gio-text-base);
  line-height: 1.4;
  font-weight: var(--gio-w-medium);
  color: var(--gio-color-text-muted);
}
.promo-price__note {
  font-size: var(--gio-text-sm);
  line-height: 1.6;
  color: var(--gio-color-text-muted);
  margin: 0 0 var(--gio-space-6);
}
.promo-price__note b { color: var(--gio-color-text-strong); }

.promo-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gio-space-3);
  margin-bottom: var(--gio-space-3);
}
.promo-hero__cta-sub {
  display: block;
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
}

/* Hero 우측 카드 */
.promo-card {
  padding: var(--gio-space-6);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-2xl);
  background: var(--gio-color-surface);
  box-shadow: var(--gio-shadow-lg);
}
.promo-card__tag {
  display: inline-block;
  margin-bottom: var(--gio-space-3);
  padding: 2px var(--gio-space-3);
  border-radius: var(--gio-radius-pill);
  background: var(--gio-color-accent-soft);
  color: var(--gio-color-accent-strong);
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-bold);
  letter-spacing: var(--gio-tracking-wide);
  text-transform: uppercase;
}
.promo-card__title {
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-xl);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-1);
}
.promo-card__sub {
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
  margin: 0 0 var(--gio-space-5);
}
.promo-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gio-space-2);
  padding: var(--gio-space-4) 0;
  border-block: 1px solid var(--gio-color-border-muted);
  margin-bottom: var(--gio-space-4);
  text-align: center;
}
.promo-card__stat b {
  display: block;
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-2xl);
  line-height: 1.1;
  font-weight: var(--gio-w-extrabold);
  color: var(--gio-color-text-strong);
}
.promo-card__stat span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: var(--gio-tracking-wide);
  text-transform: uppercase;
  color: var(--gio-color-text-muted);
}
.promo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gio-space-2);
  margin-bottom: var(--gio-space-4);
}
.promo-chips span {
  padding: 3px var(--gio-space-3);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-pill);
  font-size: var(--gio-text-xs);
  color: var(--gio-color-text-muted);
}
.promo-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gio-space-2);
}
.promo-ticks li {
  position: relative;
  padding-left: var(--gio-space-6);
  font-size: var(--gio-text-sm);
  line-height: 1.55;
  color: var(--gio-color-text);
}
.promo-ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gio-color-success);
  font-weight: var(--gio-w-bold);
}

/* ── Sections ──────────────────────────────────────────────── */
.promo-section { padding-block: var(--gio-space-10); }
.promo-section--tinted {
  background: var(--gio-color-bg-subtle);
  border-block: 1px solid var(--gio-color-border);
}
.promo-section__num {
  display: block;
  margin-bottom: var(--gio-space-2);
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-bold);
  letter-spacing: var(--gio-tracking-wide);
  text-transform: uppercase;
  color: var(--gio-color-action);
}
.promo-section__title {
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-3xl);
  line-height: 1.2;
  font-weight: var(--gio-w-extrabold);
  letter-spacing: var(--gio-tracking-tight);
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-3);
}
.promo-section__lede {
  font-size: var(--gio-text-base);
  line-height: 1.7;
  color: var(--gio-color-text-muted);
  margin: 0 0 var(--gio-space-7);
  max-width: 72ch;
}

/* 3열 카드 */
.promo-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gio-space-5);
}
.promo-col {
  padding: var(--gio-space-6);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-xl);
  background: var(--gio-color-surface);
}
.promo-col__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--gio-space-4);
  border-radius: var(--gio-radius-pill);
  background: var(--gio-color-action-soft);
  color: var(--gio-color-action);
  font-weight: var(--gio-w-bold);
  font-size: var(--gio-text-sm);
}
.promo-col__step--x {
  background: var(--gio-color-danger-soft);
  color: var(--gio-color-danger);
}
.promo-col__title {
  font-size: var(--gio-text-lg);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-2);
}
.promo-col__body {
  font-size: var(--gio-text-sm);
  line-height: 1.65;
  color: var(--gio-color-text-muted);
  margin: 0;
}

/* 콜아웃 */
.promo-callout {
  margin-top: var(--gio-space-6);
  padding: var(--gio-space-5) var(--gio-space-6);
  border-left: 3px solid var(--gio-color-action);
  border-radius: var(--gio-radius-md);
  background: var(--gio-color-action-soft);
}
.promo-callout--grey {
  border-left-color: var(--gio-color-border-strong);
  background: var(--gio-color-bg-subtle);
}
.promo-callout--green {
  border-left-color: var(--gio-color-success);
  background: var(--gio-color-success-soft);
}
.promo-callout p {
  margin: 0;
  font-size: var(--gio-text-sm);
  line-height: 1.7;
  color: var(--gio-color-text);
}
.promo-callout p + p { margin-top: var(--gio-space-3); }

/* 가중치 바 */
.promo-weights {
  display: grid;
  gap: var(--gio-space-3);
  margin-bottom: var(--gio-space-7);
  max-width: 640px;
}
.promo-weight {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 48px;
  align-items: center;
  gap: var(--gio-space-4);
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-strong);
}
.promo-weight__bar {
  height: 10px;
  border-radius: var(--gio-radius-pill);
  background: var(--gio-color-border-muted);
  overflow: hidden;
}
.promo-weight__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gio-color-action);
}
.promo-weight b { text-align: right; font-weight: var(--gio-w-bold); }

/* 표 — 좁은 화면에서 가로 스크롤 */
.promo-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-xl);
  background: var(--gio-color-surface);
}
.promo-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--gio-text-sm);
}
.promo-table th,
.promo-table td {
  padding: var(--gio-space-4) var(--gio-space-5);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid var(--gio-color-border-muted);
}
.promo-table thead th {
  background: var(--gio-color-bg-subtle);
  color: var(--gio-color-text-strong);
  font-weight: var(--gio-w-bold);
  white-space: nowrap;
}
.promo-table tbody tr:last-child td { border-bottom: 0; }
.promo-table td { color: var(--gio-color-text-muted); }
.promo-table td b,
.promo-table td strong { color: var(--gio-color-text-strong); }
.promo-table .is-hit {
  background: var(--gio-color-action-soft);
  color: var(--gio-color-text-strong);
}
.promo-table th small {
  display: block;
  font-weight: var(--gio-w-medium);
  font-size: var(--gio-text-xs);
  color: var(--gio-color-text-muted);
}

/* 타임라인 */
.promo-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--gio-space-6);
  border-left: 2px solid var(--gio-color-border);
  display: grid;
  gap: var(--gio-space-5);
}
.promo-timeline li { position: relative; }
.promo-timeline li::before {
  content: "";
  position: absolute;
  left: calc(var(--gio-space-6) * -1 - 5px);
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gio-color-action);
}
.promo-timeline b {
  display: block;
  font-size: var(--gio-text-base);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
  margin-bottom: 2px;
}
.promo-timeline span {
  font-size: var(--gio-text-sm);
  line-height: 1.65;
  color: var(--gio-color-text-muted);
}

/* FAQ */
.promo-faq { display: grid; gap: var(--gio-space-3); }
.promo-faq details {
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-lg);
  background: var(--gio-color-surface);
  overflow: hidden;
}
.promo-faq summary {
  padding: var(--gio-space-4) var(--gio-space-5);
  font-size: var(--gio-text-base);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-strong);
  cursor: pointer;
  list-style: none;
}
.promo-faq summary::-webkit-details-marker { display: none; }
.promo-faq summary::after {
  content: "+";
  float: right;
  color: var(--gio-color-text-muted);
  font-weight: var(--gio-w-bold);
}
.promo-faq details[open] summary::after { content: "−"; }
.promo-faq__body {
  padding: 0 var(--gio-space-5) var(--gio-space-5);
  font-size: var(--gio-text-sm);
  line-height: 1.7;
  color: var(--gio-color-text-muted);
}
.promo-faq__body p { margin: 0 0 var(--gio-space-3); }
.promo-faq__body p:last-child { margin-bottom: 0; }
.promo-faq__body ul { margin: 0 0 var(--gio-space-3) var(--gio-space-5); padding: 0; }

/* 상품(모듈) 선택 카드 — mock test pack 의 Academic / General */
.promo-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gio-space-5);
}
.promo-pick {
  display: flex;
  flex-direction: column;
  gap: var(--gio-space-3);
  padding: var(--gio-space-6);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-xl);
  background: var(--gio-color-surface);
}
.promo-pick__module {
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-bold);
  letter-spacing: var(--gio-tracking-wide);
  text-transform: uppercase;
  color: var(--gio-color-action);
}
.promo-pick__title {
  font-size: var(--gio-text-lg);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
  margin: 0;
}
.promo-pick__price {
  display: flex;
  align-items: baseline;
  gap: var(--gio-space-2);
}
.promo-pick__price b {
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-3xl);
  font-weight: var(--gio-w-extrabold);
  color: var(--gio-color-text-strong);
}
/* 일당 단가 — 기간이 다른 SKU(Adaptive 30일/60일)를 비교할 수 있게 하는 줄.
   총액만 나란히 두면 긴 쪽이 무조건 비싸 보인다. */
.promo-pick__perday {
  margin: var(--gio-space-1) 0 0;
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-muted);
}
.promo-pick__note {
  margin: var(--gio-space-4) 0 0;
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
}
.promo-pick__price span {
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
}
.promo-pick__cta { margin-top: auto; }

/* 강의 목록 */
.promo-lessons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gio-space-4);
}
.promo-lesson {
  padding: var(--gio-space-5);
  border: 1px solid var(--gio-color-border);
  border-radius: var(--gio-radius-lg);
  background: var(--gio-color-surface);
}
.promo-lesson__name {
  font-size: var(--gio-text-base);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-text-strong);
  margin: 0 0 var(--gio-space-1);
}
.promo-lesson__meta {
  font-size: var(--gio-text-xs);
  color: var(--gio-color-text-muted);
}

/* 마무리 CTA */
.promo-final {
  padding-block: var(--gio-space-10);
  background: var(--gio-color-surface-inverse);
  color: var(--gio-color-text-inverse);
  text-align: center;
}
.promo-final__title {
  /* typography.css 의 `h1..h6 { color: var(--gio-color-text-strong) }` 가 요소 선택자라
     .promo-final 의 color 만으로는 이기지 못한다 — 어두운 배경 위에서 제목이 통째로
     안 보였다 (260915 발견, 세 프로모션 페이지 공통). 색을 여기서 못박는다. */
  color: var(--gio-color-text-inverse);
  font-family: var(--gio-font-display);
  font-size: var(--gio-text-4xl);
  line-height: 1.15;
  font-weight: var(--gio-w-extrabold);
  letter-spacing: var(--gio-tracking-tight);
  margin: 0 0 var(--gio-space-3);
}
.promo-final__sub {
  font-size: var(--gio-text-base);
  opacity: 0.8;
  margin: 0 0 var(--gio-space-6);
}
.promo-final__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gio-space-3);
}
/* ghost 버튼은 밝은 배경을 전제로 만들어졌다 — 반전 배경인 최종 CTA 안에서는
   테두리도 글자도 배경에 묻히므로 이 자리에서만 뒤집는다.
   button.css 는 색을 `--_btn-*` 변수로 받으므로 color/background 를 직접 쓰면
   `.btn { color: var(--_btn-fg) }` 에 덮인다 — 변수를 갈아끼운다.

   흰색을 박지 않는다 — `.promo-final` 의 배경은 **페이지의 반대색**이라 다크 테마에서는
   흰 바탕이 된다. rgba(255,255,255,…) 로 테두리를 그리면 그때 테두리가 사라진다.
   전경색에서 파생시키면 두 테마 모두에서 같은 굵기로 보인다. */
.promo-final .btn--ghost {
  --_btn-fg: var(--gio-color-text-inverse);
  --_btn-border: color-mix(in srgb, var(--gio-color-text-inverse) 40%, transparent);
  --_btn-bg: transparent;
}
.promo-final .btn--ghost:hover {
  --_btn-bg: color-mix(in srgb, var(--gio-color-text-inverse) 12%, transparent);
  --_btn-border: color-mix(in srgb, var(--gio-color-text-inverse) 65%, transparent);
}

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .promo-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--gio-space-7); }
  .promo-hero__title { font-size: var(--gio-text-4xl); }
  .promo-price__now { font-size: var(--gio-text-4xl); }
  .promo-section__title { font-size: var(--gio-text-2xl); }
}

@media (max-width: 600px) {
  .promo { --promo-gutter: var(--gio-space-4); }
  .promo-section { padding-block: var(--gio-space-8); }
  .promo-hero { padding-block: var(--gio-space-8) var(--gio-space-7); }
  .promo-weight { grid-template-columns: 96px minmax(0, 1fr) 42px; gap: var(--gio-space-3); }
  .promo-final__title { font-size: var(--gio-text-3xl); }
}

/* ── 번들 안내 (260917) ─────────────────────────────────────
 * "이 팩을 사면 저것도 열린다" 를 가격 바로 아래에서 말한다. 이 블록이 없으면 팩에
 * 끼워 준 상품($87 어치)이 화면 어디에도 드러나지 않는다.
 */
.promo-bundle {
  margin: var(--gio-space-4) 0 var(--gio-space-5);
  padding: var(--gio-space-4);
  border: 1px dashed var(--gio-color-accent);
  border-radius: var(--gio-radius-lg);
  background: var(--gio-color-accent-soft);
}
.promo-bundle__tag {
  display: inline-block;
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gio-color-accent-strong);
  margin-bottom: var(--gio-space-2);
}
.promo-bundle__list { list-style: none; margin: 0; padding: 0; }
.promo-bundle__list li + li { margin-top: var(--gio-space-3); }
.promo-bundle__list strong { display: block; color: var(--gio-color-text-strong); }
.promo-bundle__list span {
  display: block;
  font-size: var(--gio-text-sm);
  color: var(--gio-color-text-muted);
}
.promo-bundle__list em {
  display: block;
  font-style: normal;
  font-size: var(--gio-text-sm);
  font-weight: var(--gio-w-semibold);
  color: var(--gio-color-accent-strong);
}