/* ===== 스테이코드 랜딩 (흰 배경 · 스티커 스타일) ===== */
:root {
  --brand: #D42A22;
  --brand-dark: #B5211A;
  --brand-50: #FFF0EE;
  --brand-on-dark: #FF5A4E;
  --yellow: #FFD43B;
  --marker: #FFE36E;
  --blue: #2F6BFF;
  --ink: #111111;
  --text: #222222;
  --muted: #666666;
  --faint: #6E6E6E;
  --line: #ECECEC;
  --paper: #F7F6F3;
  --white: #FFFFFF;
  --sab: env(safe-area-inset-bottom, 0px);
  --hdr-h: 64px;
  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 62px); }
body {
  margin: 0; overflow-x: clip;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--text); background: var(--white);
  font-size: 16px; line-height: 1.6; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
b, strong { font-weight: 800; }
p, h1, h2, h3, figure, blockquote, ol, ul { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.band-red :focus-visible, .sec-price :focus-visible, .sticky :focus-visible { outline-color: #fff; }
.ch summary:focus-visible { outline-offset: -4px; }
.pv-thumb:focus-visible { outline-offset: -3px; }
#pvMain:focus-visible { outline-offset: -4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-n { max-width: 840px; }
.center { text-align: center; }

/* ===== 버튼 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.25;
  border-radius: 14px; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .72; cursor: default; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; white-space: nowrap; }
.btn-xl { min-height: 68px; padding: 12px 36px; font-size: 21px; border-radius: 18px; }
.btn-block { display: flex; width: 100%; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .22); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); }
.btn-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #DDDDDD; }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ===== 맨 위 마감 띠 ===== */
.topbar { background: #0C0C0C; color: #fff; display: flex; justify-content: center; align-items: center; padding: 9px 16px; }
.topbar-pill {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 20px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
}
.tb-bar { width: 1px; height: 12px; background: #CFCFCF; }
.tb-cdwrap { display: none; align-items: center; gap: 12px; }
html.has-deadline .tb-cdwrap { display: inline-flex; }
html.has-deadline .tb-note { display: none; }
.cd { display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.cd b { font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.cd i { font-style: normal; font-weight: 800; color: #9A9A9A; padding: 0 1px; }
.cd small { font-size: 13px; font-weight: 700; color: #9A9A9A; min-width: 2ch; }
.cd .cd-d { display: inline-flex; align-items: baseline; margin-right: 6px; }
.cd .cd-d i { color: var(--ink); font-size: 13px; padding-left: 1px; }

/* ===== 헤더 ===== */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.6) blur(10px); backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.hdr.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .05); }
.hdr-in { height: var(--hdr-h); display: flex; align-items: center; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -0.03em; white-space: nowrap; }
.logo img { width: 26px; height: auto; }
.logo em { font-style: normal; color: var(--brand); }
.hdr-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ===== 강의 상세 레이아웃 (월부형) — 왼쪽 본문 757 + 오른쪽 결제 383, 사이 40 (월부 1180 그대로) ===== */
.pd-layout { max-width: 1228px; margin: 0 auto; padding: 32px 24px 0; display: grid; grid-template-columns: minmax(0, 757px) 383px; column-gap: 40px; justify-content: center; }
.pd-main, .pd-side { min-width: 0; }
@media (min-width: 1024px) { .hdr .wrap { max-width: 1228px; } } /* 헤더 로고·버튼을 본문 양 끝에 맞춤 */

/* 첫 화면 미디어 — 16:9, 손가락으로 밀기·화살표 */
.hero { position: relative; background: #fff; }
.pd-media { min-width: 0; }
.pd-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #111; }
.pd-slides { position: relative; display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pd-slides::-webkit-scrollbar { display: none; }
.pd-slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; overflow: hidden; scroll-snap-align: start; background: #111; }
.pd-slide--video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.pd-slide--video.is-playing video { object-fit: contain; }
.pd-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 10px;
  border: 0; border-radius: 999px; background: rgba(17, 17, 17, .82); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s;
}
.pd-play:hover { transform: translate(-50%, -50%) scale(1.03); }
.pd-play::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") center / 22px 22px no-repeat; }
.pd-slide--video.is-playing .pd-play { display: none; }
.pd-slide--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.pd-half { position: relative; overflow: hidden; }
.pd-half img { width: 100%; height: 100%; object-fit: cover; }
.pd-half i { position: absolute; top: 12px; left: 12px; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(17, 17, 17, .82); padding: 5px 11px; border-radius: 999px; }
.pd-half i.is-after { background: var(--brand); }
.pd-slide--photo .pd-blur { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; filter: blur(26px) brightness(.5); }
.pd-slide--photo .pd-fit { position: relative; width: 100%; height: 100%; object-fit: contain; }
.pd-cap { position: absolute; left: 14px; bottom: 14px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(17, 17, 17, .72); padding: 6px 12px; border-radius: 999px; }
.pd-count { position: absolute; right: 14px; top: 14px; z-index: 2; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(17, 17, 17, .62); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; pointer-events: none; }
.pd-arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink); font-family: inherit; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); opacity: 0; transition: opacity .2s; }
.pd-stage:hover .pd-arrow, .pd-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .pd-arrow { opacity: 1; } }
.pd-arrow--prev { left: 12px; }
.pd-arrow--next { right: 12px; }
.pd-stage.is-single .pd-arrow, .pd-stage.is-single .pd-count { display: none; }

/* 섹션 탭 — 회색 바 안에 흰 버튼(지금 보는 섹션), 스크롤하면 헤더 밑에 붙음 */
.pd-tabs { position: sticky; top: var(--hdr-h); z-index: 30; margin-top: 32px; background: #fff; }
.pd-tabs-in { display: flex; padding: 4px; background: #F2F2F2; border-radius: 8px; overflow-x: auto; scrollbar-width: none; }
.pd-tabs-in::-webkit-scrollbar { display: none; }
.pd-tabs a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 14px; border-radius: 6px; font-size: 16px; font-weight: 600; color: #091227; text-decoration: none; white-space: nowrap; letter-spacing: -0.02em; }
.pd-tabs a:hover { color: #000; }
.pd-tabs a.is-on { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, .07); }

/* 수강 정보 */
.pd-info { padding-top: 40px; }
.pd-info-title { font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.pd-rows { margin: 0; display: flex; flex-direction: column; }
.pd-row { display: grid; grid-template-columns: 151px minmax(0, 1fr); font-size: 16px; line-height: 24px; }
.pd-row dt { color: #666; font-weight: 400; }
.pd-row dd { margin: 0; color: var(--ink); font-weight: 400; }

/* 오른쪽 결제 영역 — 상자 없이 페이지 위에 그대로. [수강 옵션]부터 버튼까지는 스크롤을 따라옴 */
.pd-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pd-badge { display: inline-block; font-size: 11px; font-weight: 600; line-height: 11px; padding: 4px 5px 3px; border-radius: 2px; letter-spacing: 0; }
.pd-badge--solid { background: var(--ink); color: #fff; }
.pd-badge--soft { background: var(--brand-50); color: var(--brand); }
.pd-title { font-size: 26px; font-weight: 700; line-height: 32px; letter-spacing: -0.03em; color: var(--ink); }
.pd-title em { font-style: normal; }
.pd-creators { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pd-avs { display: inline-flex; flex: none; }
.pd-av { display: block; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #EEE; box-shadow: 0 0 0 2px #fff; }
.pd-av + .pd-av { margin-left: -6px; }
.pd-av img { width: 100%; height: 100%; object-fit: cover; }
.pd-av:has(img[data-sc-hidden]) { display: none; }
.pd-av:has(img[data-sc-hidden]) + .pd-av { margin-left: 0; }
.pd-creator-names { font-size: 14px; font-weight: 500; color: #666; letter-spacing: -0.02em; }
.pd-price { margin-top: 12px; }
.pd-price-top { display: flex; align-items: baseline; gap: 4px; font-size: 16px; line-height: 24px; }
.pd-off { font-size: 16px; font-weight: 700; color: #788194; }
.pd-was { font-size: 16px; font-weight: 400; color: #788194; }
.pd-final { margin-top: 4px; font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pd-month { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #788194; }
.pd-buy { position: sticky; top: calc(var(--hdr-h) + 16px); margin-top: 32px; }
.pd-opt-title { font-size: 18px; font-weight: 700; line-height: 24px; color: var(--ink); margin-bottom: 18px; }
.pd-opt { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--ink); }
.pd-opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-opt-txt b { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--ink); }
.pd-opt-txt span { font-size: 12px; line-height: 16px; color: #6B7280; }
.pd-opt-price { flex: none; font-size: 14px; font-weight: 700; line-height: 20px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.pd-total > span { font-size: 16px; font-weight: 600; color: var(--ink); }
.pd-total > b { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-btns { display: flex; gap: 8px; margin-top: 16px; }
.pd-share { flex: none; width: 60px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border: 1px solid #D5D8DE; border-radius: 4px; background: #fff; color: #656F85; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: border-color .15s; }
.pd-share:hover { border-color: #9AA1AE; color: var(--ink); }
.pd-share svg { width: 20px; height: 20px; }
.btn.pd-cta { flex: 1; min-width: 0; height: 60px; padding: 0 16px; border-radius: 4px; font-size: 16px; font-weight: 700; background: var(--brand); color: #fff; }
.btn.pd-cta:hover { background: var(--brand-dark); }
.pd-terms { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--faint); text-align: center; }
.pd-terms a { display: inline-block; padding: 6px 2px; margin: -6px 2px; color: #555; }

/* 넓은 화면(1024 이상) 첫 화면 — 글자 사이 여유 (10/9 대표님 '오밀조밀 붙어 있음 → 여유 있게 많이 띄워'), 휴대폰은 아래 1023 블록 그대로 */
@media (min-width: 1024px) {
  .pd-badges { margin-bottom: 16px; }
  .pd-title { line-height: 38px; letter-spacing: -0.02em; }
  .pd-creators { margin-top: 18px; }
  .pd-price { margin-top: 26px; }
  .pd-final { margin-top: 8px; }
  .pd-month { margin-top: 10px; }
  .pd-buy { margin-top: 44px; }
  .pd-opt { padding: 26px; gap: 20px; }
  .pd-opt-txt { gap: 8px; }
  .pd-opt-txt b { line-height: 22px; }
  .pd-opt-txt span { font-size: 12.5px; line-height: 18px; }
  .pd-total { margin-top: 30px; padding-top: 28px; }
  .pd-btns { margin-top: 24px; }
  .pd-terms { margin-top: 16px; }
  .pd-info { padding-top: 52px; }
  .pd-info-title { margin-bottom: 18px; }
  .pd-rows { gap: 12px; }
  .pd-row { line-height: 26px; }
  .pd-opt-txt span { text-wrap: pretty; } /* 줄이 바뀌어도 한 단어만 다음 줄에 남지 않게 */
}

/* 높이가 낮은 PC 창(흔한 노트북 1536x730·1280x720 등)에선 첫 화면에 [바로 수강하기]가 보이게 여유를 조금만 줄임 */
@media (min-width: 1024px) and (max-height: 820px) {
  .pd-badges { margin-bottom: 12px; }
  .pd-title { line-height: 36px; }
  .pd-creators { margin-top: 14px; }
  .pd-price { margin-top: 20px; }
  .pd-buy { margin-top: 32px; }
  .pd-opt { padding: 20px 26px; }
  .pd-total { margin-top: 22px; padding-top: 22px; }
  .pd-btns { margin-top: 18px; }
}
/* 아주 낮은 창(700 이하)은 바꾸기 전 간격 그대로 (그 전에도 버튼이 보이던 높이 기준 유지) */
@media (min-width: 1024px) and (max-height: 700px) {
  .pd-badges { margin-bottom: 8px; }
  .pd-title { line-height: 32px; }
  .pd-creators { margin-top: 12px; }
  .pd-price { margin-top: 12px; }
  .pd-final { margin-top: 4px; }
  .pd-month { margin-top: 4px; }
  .pd-opt { padding: 22px 24px; gap: 16px; }
  .pd-opt-txt { gap: 2px; }
  .pd-total { margin-top: 24px; padding-top: 24px; }
  .pd-btns { margin-top: 16px; }
  .pd-terms { margin-top: 10px; }
}

/* 할인 없음(정가 ≤ 판매가 또는 정가 숨김) — 할인율·정가 취소선·리본을 한 번에 숨김 */
.no-off .pd-off, .no-off .pd-was, .no-off .pc-ribbon, .no-off .sticky-tag > b, .no-off .sticky-price > s { display: none; }

/* 오른쪽 결제 영역이 좁아지는 폭 */
@media (min-width: 1024px) and (max-width: 1180px) {
  .pd-layout { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; }
  .pd-title { font-size: 23px; line-height: 34px; }
  .pd-opt { padding: 22px 18px; gap: 14px; }
}

/* 1023px 이하 — 한 줄로: 미디어(화면 폭 가득) → 제목·가격 → 수강 정보 → 탭 → 본문, 결제는 하단 고정바 */
@media (max-width: 374px) {
  .pd-tabs .pd-tabs-in a { padding: 0 3px; font-size: 13.5px; } /* 아래 1023 블록보다 앞이라 선택자를 더 구체적으로 */
}
@media (max-width: 1023px) {
  .pd-layout { display: flex; flex-direction: column; max-width: none; padding: 0; }
  .pd-main { display: contents; }
  .pd-main > * { order: 1; }
  .pd-main > .hero { order: 2; }
  .pd-side { order: 3; padding: 16px 24px 0; }
  .pd-main > .hero ~ .pd-info { order: 4; }
  .pd-main > .hero ~ :not(.pd-info) { order: 5; }
  .pd-stage { border-radius: 0; }
  .pd-arrow { display: none; }
  .pd-buy { position: static; margin-top: 8px; }
  .pd-buy > :not(.pd-terms) { display: none; }
  .pd-terms { margin-top: 0; text-align: left; }
  #proof.sec-proof { padding-top: 28px; }
  #proof .eyebrow { display: none; }
  #proof .h2 { font-size: 24px; }
  .pd-info { padding: 14px 24px 20px; }
  .pd-info-title { display: none; }
  .pd-row { grid-template-columns: 84px minmax(0, 1fr); font-size: 13.5px; line-height: 21px; }
  .pd-row dt { color: #788194; }
  .pd-tabs { margin-top: 0; border-bottom: 1px solid #F1F2F4; }
  .pd-tabs-in { padding: 0 8px; background: #fff; border-radius: 0; }
  .pd-tabs a { flex: 1 1 auto; height: 49px; padding: 0 5px; border-radius: 0; font-size: 14.5px; font-weight: 700; color: #656F85; box-shadow: inset 0 -2px 0 transparent; }
  .pd-tabs a.is-on { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
}

@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
@keyframes ctaGlow { 0%, 100% { box-shadow: 0 12px 28px rgba(17, 17, 17, .22); } 50% { box-shadow: 0 14px 34px rgba(232, 51, 43, .38); } }

/* ===== 섹션 공통 ===== */
.sec { padding: 120px 0; position: relative; }
.bg-paper { background: var(--paper); }
.eyebrow {
  display: table; margin: 0 auto 18px; padding: 7px 15px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand); font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
}
.eyebrow--on { background: #fff; color: var(--brand); }
.h2 { text-align: center; font-size: 46px; line-height: 1.28; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); margin: 0 0 18px; }
.h2--on { color: #fff; }
.hl { background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%); padding: 0 .06em; }
.lead { text-align: center; font-size: 19px; color: #555; line-height: 1.65; margin: 0 auto 48px; max-width: 640px; }
.lead--on { color: #fff; }
.caption { text-align: center; font-size: 14px; color: var(--faint); margin-top: 20px; }

html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ===== 매출 인증 — 검은 매출판: 숫자가 슬롯처럼 굴러 멈추고 막대가 차오름, 내역 사진은 눌러서 크게 ===== */
.pf-board { position: relative; overflow: hidden; isolation: isolate; max-width: 760px; margin: 0 auto; background: #0E0E10; color: #fff; border-radius: 24px; padding: 26px 32px 30px; box-shadow: 0 26px 60px rgba(0, 0, 0, .24); }
.pf-board::before { content: ""; position: absolute; z-index: -1; top: -45%; right: -25%; width: 75%; height: 100%; background: radial-gradient(closest-side, rgba(212, 42, 34, .38), rgba(212, 42, 34, 0)); pointer-events: none; }
.pf-board::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: -45%; width: 32%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .13), rgba(255, 255, 255, 0)); transform: translateX(0) skewX(-18deg); opacity: 0; pointer-events: none; will-change: transform; }
.pf-board.is-done::after { animation: pfShine 1.3s ease-out 1 forwards; }
@keyframes pfShine { 0% { transform: translateX(0) skewX(-18deg); opacity: 1; } 100% { transform: translateX(530%) skewX(-18deg); opacity: 1; } } /* left 대신 transform — 프레임마다 다시 배치하지 않음 */
.pf-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pf-live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .88); letter-spacing: -0.02em; }
.pf-live::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF4D42; box-shadow: 0 0 10px rgba(255, 77, 66, .6); }
.pf-note { font-size: 12px; color: rgba(255, 255, 255, .5); }
.pf-row { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: center; margin: 0; padding: 22px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pf-main { min-width: 0; }
.pf-row:has(> .pf-shot[data-sc-hidden]) { grid-template-columns: minmax(0, 1fr); }
.pf-label { display: block; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .62); letter-spacing: -0.02em; }
.pf-amount { position: relative; margin-top: 4px; font-size: 42px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 0 50%; }
.pf-amount b { font-weight: 800; }
.pf-amount.has-odo > b { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.pf-amount.is-landed { animation: pfLand .55s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pfLand { 40% { transform: scale(1.07); filter: drop-shadow(0 0 16px rgba(255, 90, 78, .8)); } 100% { transform: none; filter: none; } } /* 글자 그림자는 숫자 칸에 잘려 네모가 보여서 drop-shadow 로 */
.pf-bar { margin-top: 14px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pf-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #B5211A, #FF5A4E 62%, #FF9466); box-shadow: 0 0 18px rgba(255, 90, 78, .6); transform-origin: 0 50%; transform: scaleX(var(--pf, 1)); }
.pf-shot { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; background: #1E1E22; cursor: zoom-in; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.pf-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .45s ease; }
.pf-shot:hover img { transform: scale(1.06); }
.pf-zoom { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #111; background: rgba(255, 255, 255, .94); padding: 5px 9px 5px 7px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.pf-zoom::before { content: ""; flex: none; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / contain no-repeat; }
.pf-sum { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 6px 16px; padding-top: 22px; }
.pf-sum-label { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .82); letter-spacing: -0.02em; padding-bottom: 6px; }
.pf-amount--sum { margin: 0; font-size: 48px; color: #FF5A4E; }
.pf-amount--sum .odo { filter: drop-shadow(0 0 18px rgba(255, 90, 78, .35)); }
/* 등장 — 줄마다 화면에 들어오면(pf-go) 나타나며 막대가 차고 사진이 선명해짐. 들어오기 전엔 0 과 빈 막대 */
.pf-board.pf-armed .pf-row:not(.pf-go), .pf-board.pf-armed .pf-sum:not(.pf-go) { opacity: 0; transform: translateY(18px); }
.pf-board.pf-armed .pf-row:not(.pf-go) .pf-bar i { transform: scaleX(0); }
.pf-board.pf-armed .pf-row:not(.pf-go) .pf-shot { transform: scale(.88) rotate(-3deg); filter: blur(6px); opacity: .4; }
.pf-row.pf-go, .pf-sum.pf-go { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.pf-row.pf-go .pf-bar i { transition: transform 1.7s cubic-bezier(.16, .84, .24, 1) .15s; }
.pf-row.pf-go .pf-shot { transition: transform .8s cubic-bezier(.2, .9, .25, 1.25) .3s, filter .6s ease .3s, opacity .5s ease .3s; }
/* 숫자 굴림판 — 칸마다 0~9 띠가 내려가다 멈춤 (왼쪽부터 차례로 잠김) */
.odo { display: inline-flex; align-items: flex-end; -webkit-user-select: none; user-select: none; }
.odo-d { position: relative; display: inline-block; height: 1.1em; overflow: hidden; }
.odo-s { display: block; will-change: transform; }
.odo-s::before { content: attr(data-s); display: block; white-space: pre; line-height: 1.1em; text-align: center; }
.odo-c { display: inline-block; height: 1.1em; line-height: 1.1em; }
.odo-u { display: inline-block; margin-left: .1em; padding-bottom: .16em; font-size: .52em; font-weight: 700; line-height: 1; letter-spacing: 0; opacity: .82; }
.odo-d.spin .odo-s { transition: transform var(--t, 1.4s) cubic-bezier(.12, .72, .18, 1.02); animation: odoBlur var(--t, 1.4s) ease-out 1; }
@keyframes odoBlur { 0% { filter: blur(0); } 12% { filter: blur(1.4px); } 72% { filter: blur(.7px); } 100% { filter: blur(0); } }

/* 내역 사진 크게 보기 */
.lb { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 64px 64px calc(56px + var(--sab)); background: rgba(8, 8, 9, .9); opacity: 0; transition: opacity .2s ease; }
.lb.show { opacity: 1; }
.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(1100px, 100%); }
.lb-pan { max-width: 100%; }
.lb img { max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; object-fit: contain; border-radius: 10px; background: #fff; transform: scale(.96); transition: transform .25s ease; }
.lb.show img { transform: none; }
.lb figcaption { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; text-align: center; }
.lb-x, .lb-nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-family: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.lb-x:hover, .lb-nav:hover { background: rgba(255, 255, 255, .24); }
.lb-x { top: 12px; right: 12px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb.is-single .lb-nav { display: none; }
html.lb-open { overflow: hidden; }

/* ===== 후기 (빨간 띠) ===== */
.band-red { background: var(--brand); color: #fff; overflow: hidden; }
.band-red::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .13) 1.6px, transparent 1.6px); background-size: 22px 22px; pointer-events: none; }
.band-red > * { position: relative; }
.rv-rail { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 8px 0 26px; overscroll-behavior-x: contain; cursor: grab; }
.rv-rail.is-drag { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.rv-rail img { -webkit-user-drag: none; user-select: none; }
.rv-rail::-webkit-scrollbar { display: none; }
.rv-track { display: flex; gap: 20px; width: max-content; padding: 0 max(24px, calc((100vw - 1120px) / 2 + 24px)); }
.rv-card { flex: 0 0 304px; background: #fff; color: var(--ink); border-radius: var(--radius); padding: 14px 14px 18px; box-shadow: 0 16px 36px rgba(0, 0, 0, .16); }
.rv-img { aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; background: #F3F3F3; }
.rv-img img { width: 100%; height: 100%; object-fit: contain; }
.rv-quote { font-size: 17.5px; font-weight: 800; line-height: 1.45; letter-spacing: -0.03em; margin: 16px 4px 10px; min-height: 3em; }
.rv-who { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin: 0 4px; font-size: 14px; color: var(--muted); font-weight: 600; }
.rv-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #F3F3F3; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(0, 0, 0, .12); }
.rv-tags { margin: 10px 4px 0; }
.rv-tags > span { display: inline-block; font-size: 12px; font-weight: 700; color: #555; background: #F3F3F3; padding: 4px 10px; border-radius: 999px; }
.rv-nav { display: flex; justify-content: flex-end; gap: 10px; }
.rv-btn { width: 50px; height: 50px; border-radius: 50%; border: 0; background: #fff; color: var(--brand); font-size: 28px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, .14); transition: transform .15s; }
.rv-btn:hover { transform: translateY(-2px); }
.best-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.best { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 28px 28px 24px; position: relative; }
.best::before { content: "“"; position: absolute; top: 4px; right: 22px; font-size: 76px; font-weight: 900; line-height: 1; color: var(--brand-50); }
.best-body { position: relative; font-size: 16.5px; line-height: 1.75; color: #333; }
.best-who { margin-top: 16px; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.best-who b { font-size: 15px; }
.best-who > span { font-size: 13px; color: var(--faint); font-weight: 600; }

/* ===== 이야기 ===== */
.worry { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 8px auto 64px; }
.wb { max-width: 82%; padding: 15px 20px; border-radius: 22px; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em; }
.wb-l { align-self: flex-start; background: #F2F3F5; color: #333; border-bottom-left-radius: 6px; }
.wb-r { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.timeline { list-style: none; padding: 0; margin: 64px auto 0; max-width: 980px; display: flex; flex-direction: column; gap: 64px; }
.tl { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tl:nth-child(even) .tl-img { order: 2; }
.tl-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 16px 34px rgba(0, 0, 0, .10); }
.tl-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tl-ba figure { position: relative; }
.tl-ba img { aspect-ratio: 3 / 4; }
.tl-ba figcaption { position: absolute; top: 10px; left: 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(17, 17, 17, .85); padding: 4px 10px; border-radius: 999px; }
.tl-ba figcaption.after { background: var(--brand); }
.tl-step { display: inline-block; font-size: 13px; font-weight: 800; color: var(--brand); background: var(--brand-50); padding: 5px 12px; border-radius: 999px; }
.tl-txt h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.35; margin: 12px 0 10px; color: var(--ink); }
.tl-txt p { font-size: 17px; color: #555; line-height: 1.75; }
.tl--now .tl-txt h3 { color: var(--brand); }
.pledge { display: flex; align-items: center; gap: 22px; max-width: 720px; margin: 72px auto 0; padding: 26px 30px; background: var(--paper); border-radius: 22px; }
.pledge-av { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0, 0, 0, .12); }
.pledge figcaption { min-width: 0; }
.pledge p { font-size: 20px; font-weight: 600; line-height: 1.6; letter-spacing: -0.03em; color: #333; }
.pledge p b { color: var(--ink); font-weight: 800; box-shadow: inset 0 -.42em 0 var(--marker); }
.pledge cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--faint); }

/* ===== 강사 ===== */
.inst-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 44px; }
.inst { background: #fff; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .05); }
.inst-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #EFEDE8; }
.inst-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.inst-photo--white { background: #fff; }
.inst-body { padding: 26px 26px 28px; }
.inst-role { font-size: 14px; font-weight: 800; color: var(--brand); }
.inst-name { display: flex; align-items: center; gap: 8px; font-size: 27px; font-weight: 800; letter-spacing: -0.04em; margin: 4px 0 10px; color: var(--ink); }
.sns { display: inline-flex; align-items: center; padding: 10px; margin: -10px -4px; }
.inst-bio { font-size: 16px; color: #555; line-height: 1.7; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chips > span { font-size: 13px; font-weight: 700; color: #333; background: #F3F3F1; padding: 6px 11px; border-radius: 999px; }
.inst-total { margin-top: 28px; background: var(--ink); color: #fff; border-radius: 26px; padding: 34px 24px; text-align: center; }
.inst-total p { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; }
.inst-total p b { color: var(--yellow); font-size: 40px; font-weight: 900; }
.inst-total .inst-total-sub { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .7); margin-top: 6px; letter-spacing: -0.01em; }

/* ===== 가져가실 것 ===== */
.learn { display: flex; flex-direction: column; gap: 80px; margin-top: 56px; }
.lr { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.lr--rev .lr-img { order: 2; }
.lr--rev { grid-template-columns: 1fr 1.05fr; }
.lr-img img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(0, 0, 0, .08); }
.lr-img--phone img { max-width: 300px; margin: 0 auto; }
.lr-no { display: block; font-size: 58px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 2px var(--brand); }
.lr-txt h3 { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.35; margin: 14px 0 14px; color: var(--ink); }
.lr-txt p { font-size: 17.5px; color: #555; line-height: 1.8; }

/* ===== 커리큘럼 ===== */
.curri-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 40px; }
.curri-meta > span { font-size: 15px; font-weight: 700; color: #333; background: #fff; border: 1px solid #E3E3E0; padding: 8px 16px; border-radius: 999px; }
.preview { max-width: 900px; margin: 0 auto 48px; }
.pv-stage { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 20px 44px rgba(0, 0, 0, .18); }
.pv-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pv-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.pv-thumb { display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 16px; background: #fff; cursor: pointer; text-align: left; box-shadow: inset 0 0 0 1.5px #E6E6E3; transition: box-shadow .15s; }
.pv-thumb img { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.pv-thumb > span { font-size: 15px; font-weight: 800; color: var(--ink); }
.pv-thumb.is-on { box-shadow: inset 0 0 0 2.5px var(--brand); }
.pv-thumb.is-on span { color: var(--brand); }
.chapters { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ch { background: #fff; border-radius: 20px; border: 1px solid #E8E7E3; overflow: hidden; }
.ch summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto 24px; align-items: center; gap: 16px; padding: 22px 24px; }
.ch summary::-webkit-details-marker { display: none; }
.ch summary::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid #999; border-bottom: 2.5px solid #999; transform: rotate(45deg); justify-self: center; margin-top: -4px; transition: transform .2s; }
.ch[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.ch-no { font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--brand); }
.ch-title { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.ch-meta { font-size: 14px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.ch-desc { padding: 0 24px; margin: -8px 0 12px; font-size: 15px; color: var(--muted); }
.ch-list { list-style: none; padding: 0 14px 14px; }
.ch-list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 12px 10px; border-top: 1px solid #F1F1EF; font-size: 15.5px; }
.ln { font-size: 13px; font-weight: 800; color: #767676; }
.lt { color: #222; font-weight: 600; }
.ld { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ===== 수강생 혜택 ===== */
.bn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; align-items: stretch; }
.bn { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 26px 24px 24px; box-shadow: 0 12px 30px rgba(0, 0, 0, .05); }
.bn-icon { width: 84px; height: 84px; object-fit: contain; margin-bottom: 14px; }
.bn-no { align-self: flex-start; font-size: 13px; font-weight: 800; color: var(--brand); background: var(--brand-50); padding: 5px 11px; border-radius: 999px; }
.bn h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; margin: 12px 0 8px; color: var(--ink); }
.bn > p { font-size: 15.5px; color: #555; line-height: 1.7; }
.bn-shot { position: relative; margin-top: auto; padding-top: 18px; }
.bn-shot img { width: 100%; height: 190px; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid #EEE; }
.bn-shot--tall img { height: 220px; }
.bn-shot--lock::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; border-radius: 0 0 14px 14px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 70%); }
.bn-shot--lock > span { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1; white-space: nowrap; font-size: 13px; font-weight: 800; color: #fff; background: var(--ink); padding: 7px 14px; border-radius: 999px; }
.bn--vip { background: var(--ink); border-color: var(--ink); }
.bn--vip h3 { color: #fff; }
.bn--vip > p { color: rgba(255, 255, 255, .72); }
.bn--vip .bn-no { background: rgba(255, 255, 255, .12); color: #fff; }
.chat { margin-top: auto; background: #B2C7DA; border-radius: 16px; padding: 12px; color: var(--ink); position: relative; overflow: hidden; }
.bn--vip .chat { margin-top: 18px; }
.chat-top { font-size: 12px; font-weight: 700; text-align: center; color: rgba(0, 0, 0, .55); margin-bottom: 6px; }
.msg { display: flex; gap: 8px; margin: 9px 0; align-items: flex-start; }
.msg img { width: 30px; height: 30px; border-radius: 11px; object-fit: cover; flex-shrink: 0; background: #fff; }
.msg b { font-size: 12px; font-weight: 700; color: #333; }
.msg p { background: #fff; border-radius: 4px 14px 14px 14px; padding: 8px 11px; font-size: 13px; line-height: 1.5; margin-top: 3px; max-width: 230px; }
.msg--me { justify-content: flex-end; }
.msg--me p { background: #FEE500; border-radius: 14px 4px 14px 14px; }
.chat-lock { margin: 10px auto 2px; display: table; font-size: 12px; font-weight: 800; color: #333; background: rgba(255, 255, 255, .78); padding: 6px 12px; border-radius: 999px; }

/* ===== 비교 ===== */
.cmp { margin-top: 44px; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid #E5E4E0; }
.cmp-row { display: grid; grid-template-columns: 120px 1fr 1fr; border-top: 1px solid #F0EFEC; }
.cmp-row:first-child { border-top: 0; }
.cmp-row > span { padding: 18px 18px; font-size: 15.5px; line-height: 1.5; display: flex; align-items: center; }
.cmp-row > span:nth-child(1) { font-weight: 800; color: #333; background: #FAFAF8; }
.cmp-row > span:nth-child(2) { color: var(--faint); }
.cmp-row > span.us { font-weight: 800; color: var(--ink); background: #FFF6F5; }
.cmp-head > span { font-size: 15px; font-weight: 800; color: #555; padding-top: 16px; padding-bottom: 16px; }
.cmp-head > span.us { background: var(--brand); color: #fff; }

/* ===== 수강 신청 (검은 띠) ===== */
.sec-price { background: var(--ink); color: #fff; }
.price-card { position: relative; max-width: 560px; margin: 52px auto 0; background: #fff; color: var(--ink); border-radius: 30px; padding: 46px 34px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.pc-ribbon { position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; background: var(--brand); color: #fff; font-size: 15px; font-weight: 800; padding: 9px 20px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }
.pc-title { text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.4; margin-bottom: 22px; }
.pc-rows { list-style: none; padding: 0; border-top: 1px solid #EEE; }
.pc-rows li { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px; border-bottom: 1px solid #F2F2F2; font-size: 15.5px; color: #555; font-weight: 600; }
.pc-rows s { color: #9A9A9A; }
.pc-off b { color: var(--brand); font-weight: 800; }
.pc-off i { font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--brand); padding: 3px 7px; border-radius: 6px; margin-left: 6px; vertical-align: 1px; }
.pc-final { text-align: center; padding: 22px 0 6px; }
.pc-final-label { font-size: 14px; font-weight: 700; color: var(--faint); }
.pc-price { font-size: 66px; font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; margin: 4px 0 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-price small { font-size: 26px; font-weight: 800; margin-left: 4px; letter-spacing: -0.02em; }
.pc-month { font-size: 15px; color: var(--muted); }
.pc-month b { color: var(--ink); }
.pc-feats { list-style: none; margin: 20px 0 22px; padding: 18px 20px; background: #F6F6F4; border-radius: 16px; }
.pc-feats li { position: relative; padding-left: 30px; font-size: 15px; font-weight: 600; line-height: 1.55; margin: 7px 0; color: #222; }
.pc-feats li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
#buyBtn { animation: ctaGlow 2.6s ease-in-out infinite; }
.ab-msg { margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.55; text-align: center; color: #333; }
.ab-msg:empty { display: none; }
.ab-msg.is-err { color: #D92D20; }
.pc-note { margin-top: 14px; text-align: center; font-size: 14.5px; font-weight: 700; color: #222; }
.pc-sub { margin-top: 6px; text-align: center; font-size: 13px; color: var(--faint); }
.pc-terms { margin-top: 10px; text-align: center; font-size: 12.5px; color: #666; }
.pc-terms a { color: #555; margin: -10px 3px; display: inline-block; padding: 10px 2px; }
.pc-room { display: block; text-align: center; margin-top: 6px; padding: 10px 0; font-size: 14px; font-weight: 700; color: var(--ink); }

/* 가격 카드 안 가격 인상 시계 (마감일이 있을 때만) */
.pc-cd { display: none; margin: 0 0 22px; padding: 16px 16px 18px; border-radius: 18px; background: var(--brand-50); box-shadow: inset 0 0 0 1px #FFD9D4; text-align: center; }
html.has-deadline .pc-cd { display: block; }
.pc-cd-title { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.4; }
.pc-cd-title .js-left { color: var(--brand); }
.pc-cd-nums { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.pc-cd-nums > span { flex: 1; max-width: 86px; display: flex; flex-direction: column; align-items: center; padding: 10px 0 7px; background: var(--ink); border-radius: 12px; }
.pc-cd-nums b { font-size: 30px; font-weight: 900; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pc-cd-nums i { font-style: normal; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .62); margin-top: 2px; }

/* 시간제 혜택 알림 — 스크롤하면 헤더 아래에 한 번 (8초 줄) */
.promo-toast { position: fixed; top: calc(var(--hdr-h) + 70px); /* 헤더 밑에 붙는 섹션 탭(약 58px) 아래 — 탭을 가리지 않게 */ left: 50%; transform: translateX(-50%); z-index: 70; width: min(560px, calc(100% - 28px)); background: rgba(23, 24, 26, .92); color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); overflow: hidden; opacity: 0; transition: opacity .4s; pointer-events: none; }
.promo-toast.show { opacity: 1; pointer-events: auto; }
.pt-in { display: flex; align-items: center; gap: 10px; padding: 13px 12px 13px 18px; cursor: pointer; }
.pt-in p { flex: 1; font-size: 14.5px; font-weight: 600; line-height: 1.55; text-align: center; letter-spacing: -0.02em; text-wrap: balance; }
.pt-in b { color: #FF7A6E; font-weight: 800; }
.pt-in button { flex: none; min-width: 36px; min-height: 36px; padding: 0; border: 0; background: none; color: #FF7A6E; font-family: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.pt-bar { display: block; height: 3px; background: #FF5A4E; transform-origin: left; }
.promo-toast.show .pt-bar { animation: ptBar 8s linear forwards; }
@keyframes ptBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ===== 움직임 (10/9 대표님 "애니메이션 다 넣어줘" — 삐딱 홈페이지 방식) =====
   스크롤 등장: 화면에 들어올 때 작은 제목 → 제목 → 설명 → 카드가 차례로 (처음 화면에 보이는 것은 그대로 = 깜빡임 없음) */
html.anim-on .a-x:not(.a-in) { opacity: 0; }
.a-in.a-up { animation: aUp .85s cubic-bezier(.2, .7, .2, 1) var(--ad, 0s) backwards; }
.a-in.a-left { animation: aLeft .8s cubic-bezier(.2, .7, .2, 1) var(--ad, 0s) backwards; }
.a-in.a-right { animation: aRight .9s cubic-bezier(.2, .7, .2, 1) var(--ad, 0s) backwards; }
.a-in.a-pop { animation: aPop .75s cubic-bezier(.34, 1.4, .64, 1) var(--ad, 0s) backwards; }
.last-mascot.a-in.a-pop { animation: aPop .75s cubic-bezier(.34, 1.4, .64, 1) var(--ad, 0s) backwards, floaty 5s ease-in-out .9s infinite; }
@keyframes aUp { from { opacity: 0; transform: translateY(32px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes aLeft { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes aRight { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes aPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
/* 제목 속 노란 형광펜 — 제목이 올라온 뒤 왼쪽부터 그어짐 */
.sec .hl { background-repeat: no-repeat; background-size: 100% 100%; }
html.anim-on .a-x:not(.a-in) .hl { background-size: 0% 100%; }
.a-in .hl { transition: background-size .9s cubic-bezier(.2, .7, .2, 1) calc(var(--ad, 0s) + .45s); }
/* 마우스를 올리면 카드가 살짝 떠오르고 사진이 조금 커짐 */
@media (hover: hover) {
  .best, .inst, .bn, .num, .rv-card, .press figure { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
  .best:hover, .inst:hover, .bn:hover, .num:hover, .press figure:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0, 0, 0, .12); }
  .rv-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px rgba(0, 0, 0, .22); }
  .inst-photo img, .rv-img img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .inst:hover .inst-photo img, .rv-card:hover .rv-img img { transform: scale(1.05); }
  .qa, .ch { transition: box-shadow .25s ease, border-color .25s ease; }
  .qa:hover, .ch:hover { border-color: #D6D4CE; box-shadow: 0 10px 24px rgba(0, 0, 0, .06); }
}
/* 결제 버튼에 빛이 지나감 */
.btn.pd-cta, #buyBtn, #lastPayBtn, .sticky .btn { position: relative; overflow: hidden; isolation: isolate; }
.btn.pd-cta::after, #buyBtn::after, #lastPayBtn::after, .sticky .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); transform: translateX(0) skewX(-18deg); animation: btnShine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes btnShine { 0%, 62% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }
/* 가격 카드 띠는 둥실, 후기 띠 점 무늬는 천천히 흐름 */
.pc-ribbon { animation: ribbonBob 2.8s ease-in-out infinite; }
@keyframes ribbonBob { 0%, 100% { transform: translateX(-50%) rotate(-2deg); } 50% { transform: translateX(-50%) translateY(-4px) rotate(-3deg); } }
.band-red::before { inset: -22px 0 0 -22px; animation: dotDrift 16s linear infinite; }
@keyframes dotDrift { to { transform: translate(22px, 22px); } }
/* 가격 인상 시계 — 초가 바뀔 때마다 위에서 툭 */
.pc-cd-nums b.tick { animation: cdTick .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes cdTick { from { transform: translateY(-35%); opacity: .35; } to { transform: none; opacity: 1; } }
.pt-in .js-cd { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ===== 숫자 ===== */
.num-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; margin-top: 44px; }
.num { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 172px; padding: 24px 22px; background: var(--paper); border-radius: var(--radius); }
.num > span { font-size: 15px; font-weight: 700; color: var(--muted); position: relative; }
.num b { font-size: 34px; font-weight: 900; letter-spacing: -0.04em; color: var(--ink); position: relative; line-height: 1.1; }
.num--big { background: var(--brand); }
.num--big > span { color: rgba(255, 255, 255, .88); }
.num--big b { color: #fff; font-size: 58px; }
.num--big img { position: absolute; right: -6px; bottom: -10px; width: 128px; height: auto; transform: rotate(8deg); }
.press-lead { text-align: center; font-size: 17px; color: #555; margin: 64px 0 22px; font-weight: 600; }
.press { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.press img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.press figcaption { font-size: 15px; font-weight: 700; margin-top: 10px; color: #333; letter-spacing: -0.02em; }

/* ===== 자주 묻는 질문 ===== */
.faq { display: flex; flex-direction: column; gap: 12px; margin-top: 44px; }
.qa { background: #fff; border: 1px solid #E5E4E0; border-radius: 18px; }
.qa summary { list-style: none; cursor: pointer; position: relative; padding: 21px 60px 21px 24px; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "Q"; color: var(--brand); margin-right: 10px; font-weight: 900; }
.qa summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(#999, #999) center / 14px 2.5px no-repeat, linear-gradient(#999, #999) center / 2.5px 14px no-repeat; transition: transform .2s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 24px 22px 49px; font-size: 15.5px; color: #555; line-height: 1.75; }
.qa p a { color: var(--brand); font-weight: 700; }

/* ===== 마지막 권유 ===== */
.sec-last { background: radial-gradient(ellipse at 50% 100%, var(--brand-50), #fff 64%); }
.last-mascot { width: 168px; height: auto; margin: 0 auto 18px; --r: -4deg; animation: floaty 5s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .14)); }
#lastPayBtn { margin-top: 18px; min-width: min(100%, 420px); }

/* ===== 유의사항 · 하단 ===== */
.notice { background: #F4F4F2; padding: 44px 0 40px; }
.notice h2 { font-size: 15px; font-weight: 800; color: #333; margin-bottom: 10px; }
.notice ul { padding-left: 18px; }
.notice li { font-size: 13.5px; color: #777; line-height: 1.8; }
.foot { background: #fff; border-top: 1px solid var(--line); padding: 40px 0 calc(120px + var(--sab)); }
.logo--foot { font-size: 17px; margin-bottom: 14px; }
.logo--foot img { width: 22px; }
.foot p { font-size: 12.5px; color: #888; line-height: 1.85; }
.foot-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-links a { color: #555; text-decoration: none; font-weight: 600; display: inline-block; padding: 10px 2px; margin: -10px 0; }
.foot-links a:hover { text-decoration: underline; }
.foot-links b { color: var(--ink); }
.foot .copy { margin-top: 10px; color: #767676; font-size: 12px; }

/* ===== 하단 고정바 (1023px 이하) — 흰 바, 월부 모바일처럼 처음부터 보임 ===== */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; transform: translateY(110%); transition: transform .3s ease; pointer-events: none; }
.sticky.show { transform: none; }
.sticky-in { pointer-events: auto; display: flex; align-items: center; gap: 14px; background: #fff; color: var(--ink); padding: 12px 16px calc(12px + var(--sab)); box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(0, 0, 0, .06); }
.sticky-txt { display: flex; flex-direction: column; flex: none; min-width: 0; max-width: 48%; }
.sticky-tag { font-size: 12px; font-weight: 600; color: #788194; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-tag b { color: var(--brand); font-weight: 700; }
.sticky-price { font-size: 12px; white-space: nowrap; color: #788194; }
.sticky-price s { color: #9AA1AE; }
.sticky-price b { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.sticky .btn { flex: 1; min-width: 0; height: 48px; padding: 0 16px; font-size: 16px; font-weight: 700; border-radius: 6px; white-space: nowrap; }
@media (min-width: 1024px) { .sticky { display: none; } }

/* 결제는 끝났는데 권한을 못 받고 나갔던 사람에게 */
.resume-bar { position: fixed; left: 50%; bottom: calc(96px + var(--sab)); transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px); background: #fff; color: var(--ink); border: 2px solid var(--brand); border-radius: 999px; padding: 8px 8px 8px 20px; font-size: 14.5px; font-weight: 700; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }

/* 가격 카드를 숨겼을 때 결제 안내를 띄우는 알림 */
.lp-toast { position: fixed; left: 50%; bottom: calc(100px + var(--sab)); transform: translate(-50%, 20px); z-index: 60; width: max-content; max-width: calc(100% - 32px); background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; padding: 12px 18px; border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.lp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== 결제 확인 화면 ===== */
.pay-overlay { display: none; }
html.is-paying, html.is-paying body { overflow: hidden; }
html.is-paying .pay-overlay { display: flex; position: fixed; inset: 0; z-index: 1000; background: #fff; align-items: center; justify-content: center; padding: 24px 20px calc(24px + var(--sab)); }
html.is-paying .sticky, html.is-paying .resume-bar { display: none; }
.po-box { width: 100%; max-width: 400px; text-align: center; }
.po-box .logo { margin-bottom: 30px; }
.po-spin { width: 46px; height: 46px; margin: 0 auto 22px; border-radius: 50%; border: 4px solid #EEE; border-top-color: var(--brand); animation: spin .9s linear infinite; }
.pay-overlay[data-state="ok"] .po-spin { animation: none; border-color: #12B76A; background: #12B76A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat; }
.pay-overlay[data-state="fail"] .po-spin { display: none; }
.po-title { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.po-desc { font-size: 15.5px; color: #555; margin: 10px 0 24px; line-height: 1.65; }
.po-home { display: block; margin-top: 14px; font-size: 14px; color: #666; }
.po-help { margin-top: 20px; font-size: 13px; color: var(--faint); line-height: 1.65; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 881px) and (max-width: 1180px) {
  .num-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 1024px 이상 — 본문 섹션은 왼쪽 칸(757px) 안에서 ===== */
@media (min-width: 1024px) {
  .pd-main .wrap { max-width: none; padding: 0; }
  .pd-main .sec { padding: 72px 0; }
  .pd-main .sec-proof { padding-top: 56px; }
  .pd-main .band-red, .pd-main .bg-paper, .pd-main .sec-price { border-radius: 20px; margin: 12px 0; }
  .pd-main .band-red .wrap, .pd-main .bg-paper .wrap, .pd-main .sec-price .wrap { padding: 0 36px; }
  .pd-main .eyebrow { font-size: 14px; padding: 6px 13px; margin-bottom: 14px; }
  .pd-main .h2 { font-size: 34px; line-height: 1.3; margin-bottom: 14px; }
  .pd-main .lead { font-size: 17px; margin-bottom: 36px; }
  .pd-main .rv-track { padding: 0 36px; }
  .pd-main .rv-card { flex-basis: 286px; }
  .pd-main .best-grid { gap: 14px; margin-top: 32px; }
  .pd-main .best { padding: 24px 22px 20px; }
  .pd-main .best-body { font-size: 15.5px; }
  .pd-main .worry { margin-bottom: 48px; }
  .pd-main .timeline { margin-top: 48px; gap: 48px; }
  .pd-main .tl { gap: 28px; }
  .pd-main .tl-txt h3 { font-size: 22px; }
  .pd-main .tl-txt p { font-size: 16px; }
  .pd-main .pledge { margin-top: 56px; padding: 24px 26px; }
  .pd-main .pledge p { font-size: 18px; }
  .pd-main .inst-grid { gap: 18px; margin-top: 32px; }
  .pd-main .inst-body { padding: 22px 22px 24px; }
  .pd-main .inst-name { font-size: 23px; }
  .pd-main .inst-bio { font-size: 15px; }
  .pd-main .inst-total p { font-size: 22px; }
  .pd-main .inst-total p b { font-size: 32px; }
  .pd-main .learn { gap: 56px; margin-top: 40px; }
  .pd-main .lr, .pd-main .lr--rev { gap: 28px; }
  .pd-main .lr-no { font-size: 44px; }
  .pd-main .lr-txt h3 { font-size: 23px; margin: 10px 0; }
  .pd-main .lr-txt p { font-size: 16px; }
  .pd-main .bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
  .pd-main .bn--vip { grid-column: 1 / -1; }
  .pd-main .bn h3 { font-size: 20px; }
  .pd-main .bn > p { font-size: 15px; }
  .pd-main .cmp-row { grid-template-columns: 104px 1fr 1fr; }
  .pd-main .cmp-row > span { padding: 15px 14px; font-size: 14.5px; }
  .pd-main .price-card { margin-top: 44px; padding: 42px 28px 26px; }
  .pd-main .pc-price { font-size: 54px; }
  .pd-main .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
  .pd-main .num--big b { font-size: 48px; }
  .pd-main .press { grid-template-columns: 1fr; gap: 18px; max-width: 640px; margin: 0 auto; }
  .pd-main .faq { margin-top: 32px; }
  .pd-main .qa summary { font-size: 16px; }
  .pd-main .sec-last { padding-bottom: 96px; }
}


/* ===== 모바일 ===== */
@media (max-width: 880px) {
  :root { --hdr-h: 56px; --radius: 18px; }
  html, body { max-width: 100vw; }
  .wrap { padding: 0 16px; }

  .topbar { padding: 7px 10px; }
  .topbar-pill { gap: 8px; padding: 5px 14px; font-size: 12px; }
  .cd b { font-size: 14.5px; }
  .cd small { font-size: 11.5px; }
  .cd .cd-d i { font-size: 12px; }

  .hdr-in { gap: 8px; }
  .logo { font-size: 18px; }
  .logo img { width: 23px; }
  .hdr-cta { margin-left: auto; gap: 6px; }
  .hdr-cta .btn-sm { height: 44px; padding: 0 12px; font-size: 13px; border-radius: 11px; }

  .sec { padding: 72px 0; }
  .eyebrow { font-size: 13.5px; padding: 6px 13px; margin-bottom: 14px; }
  .h2 { font-size: 29px; line-height: 1.32; margin-bottom: 14px; }
  .lead { font-size: 15.5px; margin-bottom: 32px; }

  .pd-side { padding: 16px 16px 0; }
  .pd-info { padding: 12px 16px 18px; }
  .pd-row { grid-template-columns: 76px minmax(0, 1fr); font-size: 13px; line-height: 20px; }
  .pd-title { font-size: 20px; line-height: 28px; }
  .pd-price { margin-top: 10px; }
  .pd-price-top, .pd-off, .pd-was { font-size: 14px; line-height: 20px; }
  .pd-final { margin-top: 2px; font-size: 21px; line-height: 28px; }
  .pd-play { font-size: 14.5px; padding: 8px 16px 8px 8px; }
  .pd-play::before { width: 30px; height: 30px; background-size: 18px 18px; }

  .pf-board { padding: 18px 18px 22px; border-radius: 20px; }
  .pf-head { padding-bottom: 12px; }
  .pf-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .pf-label { font-size: 13.5px; }
  .pf-amount { font-size: clamp(24px, 7.4vw, 31px); }
  .pf-bar { height: 8px; margin-top: 11px; }
  .pf-shot { aspect-ratio: 16 / 6; border-radius: 10px; }
  .pf-shot img { object-position: center bottom; }
  .pf-zoom { right: 6px; bottom: 6px; }
  .pf-sum { padding-top: 18px; }
  .pf-sum-label { font-size: 13.5px; padding-bottom: 4px; }
  .pf-amount--sum { font-size: clamp(30px, 9vw, 38px); }
  .lb { padding: 64px 10px calc(64px + var(--sab)); }
  .lb figure { width: 100%; }
  .lb-pan { width: 100%; max-height: calc(100vh - 190px); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 10px; background: #fff; }
  .lb-pan img { max-width: none; max-height: none; width: max(800px, 100%); transform: none !important; border-radius: 0; }
  .lb-nav { top: auto; bottom: calc(10px + var(--sab)); transform: none; }
  .lb-prev { left: calc(50% - 58px); }
  .lb-next { right: calc(50% - 58px); }

  .rv-track { gap: 12px; padding: 0 16px; }
  .rv-card { flex-basis: 78vw; max-width: 320px; }
  .rv-quote { font-size: 16px; }
  .rv-nav { display: none; }
  .best-grid { grid-template-columns: 1fr !important; gap: 12px; margin-top: 28px; }
  .best { padding: 22px 20px 20px; }
  .best-body { font-size: 15.5px; }

  .worry { margin-bottom: 44px; }
  .wb { font-size: 15.5px; padding: 13px 16px; max-width: 88%; }
  .timeline { margin-top: 44px; gap: 44px; }
  .tl { grid-template-columns: 1fr !important; gap: 18px; }
  .tl:nth-child(even) .tl-img { order: 0; }
  .tl-txt h3 { font-size: 22px; }
  .tl-txt p { font-size: 15.5px; }
  .pledge { flex-direction: column; text-align: center; gap: 14px; margin-top: 48px; padding: 24px 20px 22px; }
  .pledge-av { width: 64px; height: 64px; }
  .pledge p { font-size: 17px; }

  .inst-grid { grid-template-columns: 1fr !important; gap: 18px; margin-top: 32px; }
  .inst-body { padding: 20px 20px 22px; }
  .inst-name { font-size: 23px; }
  .inst-bio { font-size: 15px; }
  .inst-total { padding: 26px 18px; margin-top: 18px; }
  .inst-total p { font-size: 20px; }
  .inst-total p b { font-size: 30px; }
  .inst-total .inst-total-sub { font-size: 13.5px; }

  .learn { gap: 52px; margin-top: 36px; }
  .lr, .lr--rev { grid-template-columns: 1fr !important; gap: 18px; }
  .lr--rev .lr-img { order: 0; }
  .lr-no { font-size: 44px; }
  .lr-txt h3 { font-size: 22px; margin: 10px 0; }
  .lr-txt p { font-size: 15.5px; }
  .lr-img--phone img { max-width: 240px; }

  .curri-meta { gap: 6px; margin-bottom: 28px; }
  .curri-meta > span { font-size: 13px; padding: 6px 12px; }
  .preview { margin-bottom: 32px; }
  .pv-thumbs { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 2px; }
  .pv-thumbs::-webkit-scrollbar { display: none; }
  .pv-thumb { flex: 0 0 auto; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 13px; }
  .pv-thumb img { width: 64px; border-radius: 7px; }
  .pv-thumb > span { font-size: 13.5px; }
  .ch summary { grid-template-columns: 1fr auto 20px; grid-template-areas: "no meta arrow" "title title arrow"; gap: 4px 10px; padding: 18px 16px 18px 18px; }
  .ch-no { grid-area: no; font-size: 12px; }
  .ch-meta { grid-area: meta; font-size: 12.5px; }
  .ch-title { grid-area: title; font-size: 17px; }
  .ch summary::after { grid-area: arrow; }
  .ch-desc { padding: 0 18px; font-size: 14px; margin-top: -6px; }
  .ch-list { padding: 0 8px 10px; }
  .ch-list li { grid-template-columns: 34px 1fr auto; font-size: 14.5px; padding: 11px 8px; }

  .bn-grid { grid-template-columns: 1fr !important; gap: 16px; margin-top: 32px; }
  .bn { padding: 22px 20px 20px; }
  .bn-icon { width: 72px; height: 72px; }
  .bn h3 { font-size: 20px; }
  .bn > p { font-size: 15px; }

  .cmp { margin-top: 30px; }
  .cmp-head { display: none !important; }
  .cmp-row { grid-template-columns: 1fr !important; gap: 6px; padding: 16px 16px 15px; }
  .cmp-row > span { display: block; padding: 0; font-size: 14.5px; background: none !important; }
  .cmp-row > span:nth-child(1) { font-size: 13px; color: var(--brand); background: none; }
  .cmp-row > span[data-label]::before { content: attr(data-label); display: inline-block; min-width: 76px; margin-right: 8px; font-size: 12.5px; font-weight: 800; color: var(--faint); }
  .cmp-row > span.us[data-label]::before { color: var(--brand); }

  .price-card { margin-top: 44px; padding: 40px 20px 24px; border-radius: 24px; }
  .pc-ribbon { font-size: 13.5px; padding: 8px 16px; }
  .pc-title { font-size: 19px; }
  .pc-price { font-size: 52px; }
  .pc-price small { font-size: 22px; }
  .pc-feats { padding: 16px; }
  .pc-feats li { font-size: 14.5px; }
  .pc-cd { margin-bottom: 18px; padding: 14px 12px 16px; }
  .pc-cd-title { font-size: 16.5px; }
  .pc-cd-nums { gap: 6px; }
  .pc-cd-nums b { font-size: 26px; }
  .pt-in p { font-size: 13.5px; }
  .pt-in button { min-width: 44px; min-height: 44px; margin: -4px -6px -4px 0; }

  .num-grid { grid-template-columns: 1fr !important; gap: 10px; margin-top: 30px; }
  .num { min-height: 0; gap: 6px; padding: 20px; }
  .num b { font-size: 32px; }
  .num--big { min-height: 150px; }
  .num--big b { font-size: 46px; }
  .num--big img { width: 104px; }
  .press-lead { font-size: 15px; margin-top: 44px; }
  .press { grid-template-columns: 1fr !important; gap: 18px; }

  .faq { margin-top: 30px; gap: 10px; }
  .qa summary { padding: 18px 50px 18px 18px; font-size: 15.5px; }
  .qa summary::after { right: 18px; }
  .qa p { padding: 0 18px 18px 40px; font-size: 14.5px; }

  .sec-last { padding: 64px 0 80px; }
  .last-mascot { width: 128px; }
  #lastPayBtn { width: 100%; }

  .foot { padding-bottom: calc(110px + var(--sab)); }

  .resume-bar { bottom: calc(86px + var(--sab)); font-size: 13.5px; padding-left: 16px; }
}

@media (max-width: 340px) {
  .hdr-cta .btn-sm { padding: 0 10px; }
  .topbar-pill .tb-label { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  .sticky-price s { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; }
}

/* ===== 휴대폰 다듬기 (10/10 대표님 "모바일도 이쁘게 최적화 쭉") — 전부 1023px 이하, PC 1024 이상은 그대로 ===== */
@keyframes pfShineM { 0% { transform: translateX(0) skewX(-18deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(700%) skewX(-18deg); opacity: 0; } }
@media (max-width: 1023px) {
  /* 가격 밑: 할부·약관 한 묶음 / 가는 선 / 수강 정보 3줄 (줄 사이 4px) */
  .pd-info { margin: 12px 24px 0; padding: 12px 0 16px; border-top: 1px solid #F1F2F4; }
  .pd-rows { gap: 4px; }
  /* 약관 링크 누르는 높이 44px (글자 위치는 그대로) */
  .pd-terms a { padding: 12.4px 4px; margin: -12.4px 0; }
  /* 매출판 빛줄기가 지나간 뒤 구석에 남지 않게 */
  .pf-board.is-done::after { animation-name: pfShineM; }
  /* 한 단어만 다음 줄로 떨어지지 않게 */
  .qa p, .notice li, .press figcaption, .press-lead { text-wrap: pretty; }
  /* 결제 확인 화면 */
  .po-home { padding: 11px 0; margin-top: 3px; }
  .po-actions:not([hidden]) + .po-help { margin-top: 9px; }
  .po-desc, .po-help { text-wrap: balance; }
}
@media (max-width: 880px) {
  .pd-info { margin: 12px 16px 0; padding: 12px 0 14px; }
  /* 헤더 로그인 버튼: 보이는 상자 34px, 누르는 곳은 44px 그대로 */
  .hdr-cta .btn-sm { position: relative; height: 34px; border-radius: 9px; }
  .hdr-cta .btn-sm::before { content: ""; position: absolute; left: -2px; right: -2px; top: -5px; bottom: -5px; }
  /* 이야기: 본문 끝 한 단어 방지, 천장 사진은 위쪽(손·조명)이 보이게, '지금' 사진은 16:9 로 전체 */
  .tl-txt p { text-wrap: pretty; }
  .tl-img > img { object-position: 50% 15%; }
  .tl--now .tl-img > img { aspect-ratio: 16 / 9; }
  /* 원장 소개·가져가실 것·혜택·커리큘럼 설명 끝 한 단어 방지 */
  .inst-bio, .lr-txt p, .bn > p, .ch-desc { text-wrap: pretty; }
  /* 원장 SNS 아이콘 누르는 곳 44px */
  .sns { padding: 13px 11px; margin: -13px -5px; }
  /* 커리큘럼 맛보기 썸네일 3개가 잘리지 않게 세 칸 */
  .pv-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-bottom: 0; }
  .pv-thumb { min-width: 0; }
  /* 가격 카드: 약관 안내 한 줄 + 이용약관·환불약관 다음 줄에 나란히, 누르는 칸 44px */
  .pc-terms { margin-top: 12px; line-height: 20px; }
  .pc-terms > span:first-child { display: block; margin-bottom: 2px; }
  .pc-terms a { padding: 12px 8px; margin: -12px 2px; }
  .pc-room { margin-top: 12px; padding: 12px 0; }
  /* 푸터 링크 누르는 칸 44px */
  .foot-links a { padding: 12px 7px; margin: -12px -5px; }
}
@media (max-width: 560px) {
  .pv-thumb { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 9px; border-radius: 12px; text-align: center; }
  .pv-thumb img { width: 100%; border-radius: 8px; }
  .pv-thumb > span { font-size: 13px; line-height: 1.35; }
}
/* 태블릿 세로(600~880): 휴대폰 배치가 그대로 늘어나 휑하지 않게 */
@media (min-width: 600px) and (max-width: 880px) {
  .pf-board, .timeline, .pledge { max-width: 560px; }
  #lastPayBtn { width: auto; min-width: 420px; }
  .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .press { max-width: 560px; margin: 0 auto; }
  .cmp-row.cmp-head { display: grid !important; }
  .cmp-row { grid-template-columns: 112px 1fr 1fr !important; gap: 0; padding: 0; }
  .cmp-row > span { display: flex; padding: 15px 14px; }
  .cmp-row > span:nth-child(1) { font-size: 14.5px; color: #333; background: #FAFAF8 !important; }
  .cmp-row > span.us { background: #FFF6F5 !important; }
  .cmp-head > span { font-size: 14.5px; }
  .cmp-head > span.us { background: var(--brand) !important; }
  .cmp-row > span[data-label]::before { content: none; }
}
/* 태블릿 740~880: 매출 사진 크게 보기에 쓸모없는 가로 스크롤 없음 */
@media (min-width: 740px) and (max-width: 880px) {
  .lb-pan img { width: 100%; }
}

/* ===== 휴대폰 여유 간격 (10/12 대표님 "모바일 줄간격 너무 가까움 — 글·이미지·문단마다 여유 훨씬 더, 삐딱 참고") — 880px 이하만, PC 그대로
   삐딱 실측: 블록 사이 보통 36px · 섹션 여백 60~70px → 줄 간격 1.8배대 + 블록 사이 30~40px + 섹션 96px */
@media (max-width: 880px) {
  /* 섹션 위아래 · 머리(작은 제목 → 제목 → 설명) */
  .sec { padding: 96px 0; }
  #proof.sec-proof { padding-top: 40px; }
  .sec-last { padding: 88px 0 104px; }
  .eyebrow { margin-bottom: 18px; }
  .h2 { line-height: 1.4; margin-bottom: 20px; }
  .lead { line-height: 1.8; margin-bottom: 48px; }
  /* 매출판 */
  .pf-row { padding: 26px 0; gap: 14px; }
  .pf-bar { margin-top: 14px; }
  /* 후기 */
  .rv-quote { line-height: 1.6; margin: 18px 4px 14px; }
  .best-grid { gap: 16px; margin-top: 40px; }
  .best { padding: 26px 22px 22px; }
  .best-body { line-height: 1.85; }
  .best-who { margin-top: 22px; }
  /* 이야기 */
  .worry { gap: 16px; margin-bottom: 64px; }
  .wb { line-height: 1.65; }
  .timeline { margin-top: 56px; gap: 64px; }
  .tl { gap: 24px; }
  .tl-txt h3 { margin: 14px 0 18px; line-height: 1.4; }
  .tl-txt p { line-height: 1.85; }
  .pledge { margin-top: 64px; padding: 28px 22px 26px; gap: 20px; }
  .pledge p { line-height: 1.75; }
  .pledge cite { margin-top: 12px; }
  /* 원장 소개 */
  .inst-grid { gap: 24px; margin-top: 40px; }
  .inst-body { padding: 24px 22px 26px; }
  .inst-name { margin: 10px 0 18px; }
  .inst-bio { line-height: 1.85; }
  .chips { margin-top: 20px; gap: 8px; }
  .inst-total { margin-top: 24px; padding: 30px 20px; }
  .inst-total .inst-total-sub { margin-top: 14px; line-height: 1.7; }
  /* 가져가실 것 */
  .learn { gap: 72px; margin-top: 44px; }
  .lr, .lr--rev { gap: 24px; }
  .lr-txt h3 { margin: 12px 0 18px; line-height: 1.4; }
  .lr-txt p { line-height: 1.85; }
  /* 커리큘럼 */
  .curri-meta { margin-bottom: 32px; }
  .pv-thumbs { margin-top: 20px; }
  .preview { margin-bottom: 44px; }
  .chapters { gap: 14px; }
  .ch-desc { line-height: 1.75; margin: -4px 0 18px; }
  .ch-list li { padding: 13px 8px; line-height: 1.7; }
  /* 혜택 */
  .bn-grid { gap: 24px; margin-top: 40px; }
  .bn { padding: 26px 22px 24px; }
  .bn h3 { margin: 14px 0 16px; line-height: 1.4; }
  .bn > p { line-height: 1.8; }
  .bn-shot { padding-top: 32px; }
  .bn--vip .chat { margin-top: 28px; }
  /* 비교 · 가격 카드 */
  .cmp { margin-top: 40px; }
  .price-card { margin-top: 52px; }
  .pc-title { margin-bottom: 26px; line-height: 1.45; }
  .pc-rows li { padding: 15px 2px; line-height: 1.7; }
  .pc-final { padding: 26px 0 8px; }
  .pc-month { margin-top: 10px; }
  .pc-feats { margin: 24px 0 26px; padding: 20px 18px; }
  .pc-feats li { margin: 10px 0; line-height: 1.7; }
  .pc-note { margin-top: 18px; }
  .pc-sub { margin-top: 12px; line-height: 1.7; }
  .pc-terms { margin-top: 16px; }
  /* 숫자 · 기사 */
  .num-grid { gap: 14px; margin-top: 40px; }
  .num { gap: 10px; padding: 22px; }
  .press-lead { margin: 56px 0 32px; line-height: 1.75; }
  .press { gap: 28px; }
  .press figcaption { margin-top: 14px; line-height: 1.7; }
  /* 자주 묻는 질문 */
  .faq { gap: 12px; margin-top: 40px; }
  .qa summary { padding: 20px 50px 20px 18px; line-height: 1.5; }
  .qa p { line-height: 1.85; padding-bottom: 22px; }
  /* 마지막 권유 · 유의사항 · 푸터 */
  .last-mascot { margin-bottom: 28px; }
  #lastPayBtn { margin-top: 26px; }
  .notice { padding: 56px 0 52px; }
  .notice h2 { margin-bottom: 18px; }
  .notice li { line-height: 1.85; margin-bottom: 8px; }
  .foot { padding-top: 48px; }
  .foot p { line-height: 1.9; }
}
/* 첫 화면은 세로가 넉넉한 폰(801px 이상)에서만 조금 벌림 — 작은 폰은 탭이 하단 결제바에 가리지 않게 그대로 */
@media (max-width: 880px) and (min-height: 801px) {
  .pd-badges { margin-bottom: 10px; }
  .pd-title { line-height: 30px; }
  .pd-creators { margin-top: 14px; }
  .pd-price { margin-top: 14px; }
  .pd-month { margin-top: 6px; }
  .pd-rows { gap: 6px; }
  /* 첫 화면 아래 매출 인증 제목 두 줄이 하단 결제바 위에 다 보이게 */
  #proof.sec-proof { padding-top: 20px; }
}
/* 휴대폰 비교표(한 칸씩 쌓인 모양) — 태블릿 표 모양(600~880)은 그대로 */
@media (max-width: 599px) {
  .cmp-row { gap: 10px; padding: 20px 18px; }
  .cmp-row > span { line-height: 1.65; }
}