/* ==========================================================================
   하루 10분 투자 매매기법 — 리드 수집 랜딩페이지
   Palette : Deep Navy + Gold + Cream (책 표지 톤 기반)
   ========================================================================== */

:root{
  --navy-900:#070d18;
  --navy-800:#0b1526;
  --navy-700:#122036;

  --gold-400:#f2cf6b;
  --gold-500:#d8ad3f;
  --gold-600:#b78d24;
  --red-500:#c62828;

  --cream:#f7f4ec;
  --paper:#ffffff;
  --soft:#f1f0ea;

  --ink-900:#12161f;
  --ink-700:#3b4250;
  --ink-500:#6b7383;
  --line:#e3e1d9;

  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;

  --shadow-s:0 2px 10px rgba(7,13,24,.06);
  --shadow-m:0 14px 40px rgba(7,13,24,.10);
  --shadow-l:0 30px 80px rgba(7,13,24,.30);

  --wrap:1100px;
  --pad:20px;

  --font:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
         'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display:'Black Han Sans', var(--font);

  --topbar-h:38px;
  --header-h:58px;
}
@media (min-width:768px){ :root{ --pad:32px; } }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink-900);
  line-height:1.68;
  letter-spacing:-.015em;
  word-break:keep-all;
  overflow-wrap:anywhere;
  width:100%;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ list-style:none; }
em{ font-style:normal; }
h1,h2,h3{ font-weight:900; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}
.wrap--narrow{ max-width:780px; }

.br-m{ display:none; }
@media (max-width:640px){
  .br-m{ display:block; }
  .br-d{ display:none; }
}

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   1. Topbar / Header
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:60;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg,#c62828,#8e1c1c);
  color:#fff;
  font-size:12px;
  letter-spacing:0;
  padding:0 12px;
}
@media (min-width:480px){ .topbar{ font-size:13.5px; } }
.topbar__inner{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.topbar__dot{
  width:7px; height:7px; border-radius:50%; background:#ffd9d9;
  animation:blink 1.2s infinite;
}
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.topbar__time{
  font-variant-numeric:tabular-nums; font-weight:800;
  background:rgba(0,0,0,.25); padding:2px 9px; border-radius:999px;
}

.header{
  position:sticky; top:var(--topbar-h); z-index:55;
  height:var(--header-h);
  background:rgba(7,13,24,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(216,173,63,.16);
}
.header__inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{ display:flex; align-items:center; gap:9px; color:#fff; }
.brand__mark{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,var(--gold-400),var(--gold-600));
  color:var(--navy-900); font-size:14px;
}
.brand__text{ font-weight:800; font-size:17px; letter-spacing:-.03em; }

.nav{ display:flex; align-items:center; gap:20px; font-size:14px; }
.nav a{ color:#b9c2d1; font-weight:600; transition:color .2s; }
.nav a:hover{ color:var(--gold-400); }
.nav__cta{
  background:linear-gradient(140deg,var(--gold-400),var(--gold-600));
  color:var(--navy-900) !important;
  padding:8px 16px; border-radius:999px; font-weight:800;
  white-space:nowrap;
}
@media (max-width:720px){
  .nav a:not(.nav__cta){ display:none; }
  .nav__cta{ padding:8px 15px; font-size:13.5px; }
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
.hero{
  position:relative;
  background:linear-gradient(180deg, #070d18 0%, #0b1526 45%, #0e1a2c 100%);
  color:#fff;
  padding-top:32px;
  padding-bottom:56px;
}
@media (min-width:768px){ .hero{ padding-top:56px; padding-bottom:84px; } }

/* 배경 레이어만 잘라내는 전용 래퍼 — 본문 요소는 절대 잘리지 않음 */
.hero__bg{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.hero__glow{
  position:absolute;
  top:-160px; left:50%;
  width:760px; height:760px;
  max-width:130vw;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(216,173,63,.20) 0%, rgba(216,173,63,0) 62%);
}
.hero__lines{
  position:absolute; top:0; left:0; right:0; bottom:0;
  opacity:.3;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  mask-image:linear-gradient(180deg,#000,transparent 78%);
}

.hero__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.pill{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(216,173,63,.12);
  border:1px solid rgba(216,173,63,.4);
  color:var(--gold-400);
  padding:7px 16px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:0;
}
@media (min-width:480px){ .pill{ font-size:13.5px; } }
.pill i{ font-size:11px; }

.hero__title{
  margin-top:18px;
  font-size:clamp(27px, 7.2vw, 48px);
  line-height:1.26;
  letter-spacing:-.04em;
}
.hero__title em{
  font-family:var(--font-display);
  color:var(--gold-400);
  font-size:1.14em;
  letter-spacing:0;
  text-shadow:0 0 34px rgba(216,173,63,.4);
}
.hero__title-sub{
  display:block;
  margin-top:12px;
  font-size:.6em;
  font-weight:700;
  color:#dfe6f0;
  letter-spacing:-.03em;
  line-height:1.45;
}
.hero__desc{
  margin-top:16px;
  max-width:620px;
  font-size:clamp(13.5px, 3.6vw, 17px);
  color:#9fadc2;
  line-height:1.75;
}
.hero__desc b{ color:#fff; font-weight:700; }

.hero__tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:20px;
}
.hero__tags li{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  padding:7px 14px; border-radius:999px;
  font-size:12px; color:#d5dded; font-weight:600;
  white-space:nowrap;
}
@media (min-width:480px){ .hero__tags li{ font-size:13.5px; } }
.hero__tags i{ color:var(--gold-400); font-size:12px; }

/* ---------- 책 ---------- */
.book{
  position:relative;
  z-index:1;
  width:100%;
  max-width:320px;
  margin-top:32px;
  padding:6px 6px 0;
}
@media (min-width:480px){ .book{ max-width:380px; } }

.book__halo{
  position:absolute;
  top:46%; left:50%;
  width:118%; height:78%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(216,173,63,.30) 0%, rgba(216,173,63,0) 100%);
  pointer-events:none;
  z-index:0;
}
.book__img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
  animation:float 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@media (prefers-reduced-motion:reduce){ .book__img{ animation:none; } }

.book__spec{
  position:relative;
  z-index:1;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px;
  margin-top:18px;
}
.book__spec span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--gold-400);
  background:rgba(216,173,63,.1);
  border:1px solid rgba(216,173,63,.28);
  padding:5px 11px; border-radius:8px;
  white-space:nowrap;
}

/* ==========================================================================
   3. 신청 폼 카드
   ========================================================================== */
.form-card{
  width:100%;
  max-width:520px;
  margin-top:32px;
  background:var(--paper);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);
  color:var(--ink-900);
  overflow:hidden;
  text-align:left;
  scroll-margin-top:112px;
}
.form-card__head{
  padding:26px 22px 0;
  text-align:center;
}
@media (min-width:480px){ .form-card__head{ padding:28px 30px 0; } }

.form-card__head h2{
  font-size:clamp(20px, 5vw, 25px);
  letter-spacing:-.04em;
}
.form-card__head h2::after{
  content:'';
  display:block; width:34px; height:3px;
  margin:11px auto 0;
  background:linear-gradient(90deg,var(--gold-400),var(--gold-600));
  border-radius:2px;
}
.form-card__head > p{
  margin-top:11px;
  font-size:13.5px; color:var(--ink-500); line-height:1.6;
}
.form-card__head > p b{ color:var(--ink-900); font-weight:800; }

.stock{ margin-top:16px; }
.stock__bar{
  height:7px; border-radius:999px;
  background:#eceae3; overflow:hidden;
}
.stock__bar i{
  display:block; height:100%; width:78%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold-500),var(--red-500));
  transition:width .8s cubic-bezier(.16,1,.3,1);
}
.stock p{ margin-top:7px; font-size:12.5px; color:var(--ink-500); }
.stock p b{ color:var(--red-500); font-weight:900; font-size:14px; }

#applyForm{ padding:20px 22px 26px; }
@media (min-width:480px){ #applyForm{ padding:24px 30px 30px; } }

.field{ margin-bottom:15px; }
.field label{
  display:flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:800; letter-spacing:-.02em;
  margin-bottom:7px;
}
.req{
  background:#fde8e8; color:var(--red-500);
  font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:5px;
}
.opt{
  background:#eef0f3; color:var(--ink-500);
  font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:5px;
}

.input-wrap{ position:relative; }
.input-wrap > i{
  position:absolute; left:15px; top:50%;
  transform:translateY(-50%);
  color:#b3b8c2; font-size:14px;
  pointer-events:none;
  transition:color .2s;
  z-index:1;
}
.input-wrap input,
.input-wrap select{
  width:100%;
  height:52px;
  padding:0 15px 0 42px;
  background:#fafaf8;
  border:1.6px solid var(--line);
  border-radius:var(--radius-s);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.02em;
  transition:border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance:none;
  appearance:none;
}
.input-wrap select{
  padding-right:38px;
  color:var(--ink-900);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.input-wrap input::placeholder{ color:#b3b8c2; font-weight:500; }
.input-wrap input:focus,
.input-wrap select:focus{
  outline:none;
  background:#fff;
  border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(216,173,63,.16);
}
.input-wrap:focus-within > i{ color:var(--gold-600); }

.field.is-error .input-wrap input,
.field.is-error .input-wrap select{
  border-color:var(--red-500);
  background:#fff7f7;
}
.error{
  display:none;
  margin-top:6px;
  font-size:12.5px; font-weight:700; color:var(--red-500);
}
.error.is-show{ display:block; }

/* ---------- 동의 ---------- */
.consent{
  margin:20px 0 14px;
  padding:16px;
  background:#faf9f5;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
}
.consent h3{ font-size:13.5px; font-weight:800; margin-bottom:10px; }
.consent__box{
  max-height:132px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  padding:13px 14px;
  font-size:12.5px; line-height:1.75; color:var(--ink-700);
}
.consent__box::-webkit-scrollbar{ width:5px; }
.consent__box::-webkit-scrollbar-thumb{ background:#d6d3c9; border-radius:99px; }
.consent__box p + p{ margin-top:9px; }
.consent__box b{ color:var(--ink-900); }

.check{
  display:flex; align-items:flex-start; gap:10px;
  position:relative;
  margin-top:12px;
  cursor:pointer;
  font-size:13.5px; font-weight:600; line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
.check input{
  position:absolute; opacity:0; width:1px; height:1px;
}
.check__box{
  flex:0 0 auto;
  width:22px; height:22px; margin-top:1px;
  border:1.8px solid #cfccc2;
  border-radius:6px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, border-color .18s, box-shadow .18s;
}
.check__box i{
  font-size:11px; color:#fff; opacity:0;
  transform:scale(.5);
  transition:opacity .18s, transform .18s;
}
.check input:checked + .check__box{
  background:var(--navy-800);
  border-color:var(--navy-800);
}
.check input:checked + .check__box i{ opacity:1; transform:scale(1); }
.check input:focus-visible + .check__box{ box-shadow:0 0 0 4px rgba(216,173,63,.3); }
.check__text b{ color:var(--red-500); font-weight:800; }

.consent.is-error .check__box{ border-color:var(--red-500); }

.notice{
  display:flex; gap:9px; align-items:flex-start;
  background:#fff8ea;
  border-left:3px solid var(--gold-500);
  border-radius:8px;
  padding:11px 13px;
  font-size:12px; line-height:1.6; color:#6b5218;
}
.notice i{ flex:0 0 auto; color:var(--gold-600); margin-top:3px; }

/* ---------- 제출 버튼 ---------- */
.btn-submit{
  position:relative;
  display:block;
  width:100%;
  height:60px;
  margin-top:16px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
  color:#fff;
  font-size:17px;
  font-weight:900;
  letter-spacing:-.03em;
  box-shadow:0 12px 26px rgba(11,21,38,.28);
  overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:480px){ .btn-submit{ font-size:18px; } }
.btn-submit::after{
  content:'';
  position:absolute; top:0; bottom:0; left:-60%;
  width:45%;
  background:linear-gradient(90deg,rgba(242,207,107,0),rgba(242,207,107,.35),rgba(242,207,107,0));
  transform:skewX(-20deg);
  animation:sheen 3.4s infinite;
}
@keyframes sheen{ 0%{ left:-60% } 55%,100%{ left:130% } }
.btn-submit:hover{ transform:translateY(-2px); box-shadow:0 18px 34px rgba(11,21,38,.36); }
.btn-submit:active{ transform:translateY(0); }
.btn-submit i{ margin-right:8px; color:var(--gold-400); }
.btn-submit__spin{ display:none; }
.btn-submit.is-loading{ pointer-events:none; opacity:.85; }
.btn-submit.is-loading .btn-submit__label{ display:none; }
.btn-submit.is-loading .btn-submit__spin{ display:inline; }

.secure{
  margin-top:11px;
  text-align:center;
  font-size:11.5px; color:var(--ink-500);
}
.secure i{ color:#7ba05b; margin-right:5px; }

/* ---------- 완료 ---------- */
.done{ padding:34px 22px 40px; text-align:center; }
@media (min-width:480px){ .done{ padding:44px 30px; } }
.done__icon{
  width:66px; height:66px;
  margin:0 auto 16px;
  border-radius:50%;
  background:linear-gradient(140deg,#4c9a5b,#2f7040);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:27px;
  box-shadow:0 12px 28px rgba(47,112,64,.32);
  animation:pop .45s cubic-bezier(.16,1.5,.4,1);
}
@keyframes pop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }
.done h3{ font-size:21px; letter-spacing:-.04em; }
.done > p{ margin-top:10px; font-size:14px; color:var(--ink-700); line-height:1.7; }
.done__steps{
  margin-top:22px;
  text-align:left;
  display:grid; gap:9px;
  background:#faf9f5;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:16px;
}
.done__steps li{
  display:flex; align-items:center; gap:11px;
  font-size:13.5px; font-weight:700; color:var(--ink-700);
}
.done__steps span{
  flex:0 0 auto;
  width:24px; height:24px; border-radius:50%;
  background:var(--navy-800); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
}

/* ---------- 신뢰 지표 ---------- */
.proof{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  width:100%;
  max-width:520px;
  margin-top:26px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-m);
  overflow:hidden;
}
.proof li{ padding:16px 6px; text-align:center; }
.proof li + li{ border-left:1px solid rgba(255,255,255,.1); }
.proof strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(19px, 5vw, 26px);
  color:var(--gold-400);
  letter-spacing:0;
  line-height:1.3;
}
.proof span{ font-size:11.5px; color:#93a1b6; font-weight:600; }

/* ==========================================================================
   4. Sections
   ========================================================================== */
.section{ padding:56px 0; }
@media (min-width:768px){ .section{ padding:92px 0; } }
.section--light{ background:var(--cream); }
.section--soft{ background:var(--soft); }
.section--dark{
  background:linear-gradient(180deg,#0b1526,#101d31);
  color:#e8edf5;
}

.eyebrow{
  text-align:center;
  margin-bottom:12px;
  font-size:11.5px; font-weight:900; letter-spacing:.22em;
  color:var(--gold-600);
}
.eyebrow--gold{ color:var(--gold-400); }

.section__title{
  text-align:center;
  font-size:clamp(23px, 5.6vw, 36px);
  letter-spacing:-.045em;
  line-height:1.34;
}
.section__title em{ color:var(--gold-600); }
.section__title--light{ color:#fff; }
.section__title--light em{ color:var(--gold-400); }

.section__sub{
  text-align:center;
  margin-top:12px;
  font-size:clamp(13.5px, 3.5vw, 16px);
  color:#93a1b6;
  line-height:1.7;
}
.section__sub b{ color:var(--gold-400); font-weight:800; }

/* ---------- 이런 분들께 ---------- */
.pain-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  margin-top:32px;
}
@media (min-width:680px){
  .pain-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:44px; }
}
.pain{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:22px;
  box-shadow:var(--shadow-s);
  transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s;
}
@media (min-width:768px){ .pain{ padding:26px; } }
.pain:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--gold-500); }
.pain > i{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--navy-800);
  color:var(--gold-400);
  font-size:17px;
  margin-bottom:14px;
}
.pain h3{ font-size:clamp(16px, 4vw, 18px); font-weight:800; letter-spacing:-.035em; }
.pain p{ margin-top:8px; font-size:13.8px; color:var(--ink-500); line-height:1.7; }

/* ---------- 목차 ---------- */
.toc{ margin-top:32px; display:grid; gap:10px; }
@media (min-width:768px){ .toc{ margin-top:44px; } }
.toc li{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-m);
  padding:18px;
  transition:background .25s, border-color .25s, transform .25s;
}
@media (min-width:768px){ .toc li{ padding:22px; gap:18px; } }
.toc li:hover{
  background:rgba(216,173,63,.07);
  border-color:rgba(216,173,63,.35);
  transform:translateX(4px);
}
.toc__no{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:clamp(20px, 5vw, 26px);
  line-height:1.1;
  color:var(--gold-500);
  opacity:.85;
}
.toc h3{ font-size:clamp(15.5px, 4vw, 18px); font-weight:800; color:#fff; letter-spacing:-.035em; }
.toc p{ margin-top:6px; font-size:13.5px; color:#8fa0b8; line-height:1.65; }

.bonus{
  margin-top:24px;
  padding:22px;
  border-radius:var(--radius-m);
  background:linear-gradient(135deg, rgba(216,173,63,.14), rgba(216,173,63,.04));
  border:1px dashed rgba(216,173,63,.5);
}
.bonus h3{ font-size:16px; font-weight:900; color:var(--gold-400); letter-spacing:-.03em; }
.bonus ul{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; }
.bonus li{ font-size:13.5px; font-weight:600; color:#dbe3ef; }
.bonus li i{ color:var(--gold-400); margin-right:7px; font-size:11px; }

/* ---------- 후기 ---------- */
.reviews{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  margin-top:32px;
}
@media (min-width:900px){
  .reviews{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:44px; }
}
.review{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:22px;
  box-shadow:var(--shadow-s);
  overflow:hidden;
}
@media (min-width:768px){ .review{ padding:26px; } }
.review::before{
  content:'\201C';
  position:absolute; top:2px; right:18px;
  font-size:64px; line-height:1;
  color:var(--gold-500); opacity:.18;
  font-family:Georgia, serif;
}
.stars{ color:var(--gold-500); font-size:12.5px; letter-spacing:1px; }
.review blockquote{
  position:relative;
  margin-top:11px;
  font-size:14.5px; line-height:1.75; color:var(--ink-700); font-weight:500;
}
.review figcaption{ margin-top:14px; font-size:12.5px; font-weight:700; color:var(--ink-500); }

/* ---------- FAQ ---------- */
.faq{ margin-top:30px; display:grid; gap:10px; }
@media (min-width:768px){ .faq{ margin-top:40px; } }
.faq details{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
.faq details[open]{ border-color:var(--gold-500); box-shadow:var(--shadow-s); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:17px 18px;
  cursor:pointer;
  font-size:15px; font-weight:800; letter-spacing:-.03em;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:768px){ .faq summary{ padding:18px 22px; font-size:16px; } }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:''; }
.faq summary i{
  flex:0 0 auto;
  width:26px; height:26px; border-radius:50%;
  background:#f2f0e9; color:var(--ink-700);
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  transition:transform .25s, background .25s, color .25s;
}
.faq details[open] summary i{
  transform:rotate(45deg);
  background:var(--navy-800);
  color:var(--gold-400);
}
.faq details > div{ padding:0 18px 19px; }
@media (min-width:768px){ .faq details > div{ padding:0 22px 20px; } }
.faq details p{ font-size:13.8px; line-height:1.75; color:var(--ink-500); }
.faq details p b{ color:var(--ink-900); }

/* ---------- 마지막 CTA ---------- */
.last-cta{
  position:relative;
  background:linear-gradient(180deg,#0b1526 0%, #16273f 100%);
  color:#fff;
  padding:56px 0;
  text-align:center;
}
@media (min-width:768px){ .last-cta{ padding:86px 0; } }
.last-cta__bg{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.last-cta__bg span{
  position:absolute;
  bottom:-40%; left:50%;
  width:700px; height:700px;
  max-width:140vw;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(216,173,63,.18), rgba(216,173,63,0) 62%);
}
.last-cta__inner{ position:relative; z-index:1; }
.last-cta__eyebrow{ font-size:11.5px; font-weight:900; letter-spacing:.24em; color:var(--gold-400); }
.last-cta h2{
  margin-top:12px;
  font-size:clamp(24px, 6.2vw, 40px);
  letter-spacing:-.045em;
  line-height:1.3;
}
.last-cta__desc{ margin-top:14px; font-size:clamp(13.5px, 3.5vw, 15.5px); color:#9fadc2; }
.last-cta__desc b{ color:var(--gold-400); font-weight:900; font-variant-numeric:tabular-nums; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:26px;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--navy-900);
  font-weight:900;
  font-size:clamp(15px, 4vw, 17px);
  padding:16px 30px;
  border-radius:999px;
  box-shadow:0 14px 34px rgba(216,173,63,.3);
  transition:transform .22s, box-shadow .22s;
}
.btn-ghost:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(216,173,63,.42); }

/* ==========================================================================
   5. Footer
   ========================================================================== */
.footer{
  background:var(--navy-900);
  color:#7b8598;
  padding:40px 0 120px;
  font-size:13px;
  line-height:1.85;
}
@media (min-width:901px){ .footer{ padding:56px 0 44px; } }
.footer__brand{ display:flex; align-items:center; gap:9px; color:#fff; margin-bottom:16px; }
.footer__brand strong{ font-size:16px; font-weight:800; }
.footer__disclaimer p + p{ margin-top:5px; }
.footer__disclaimer b{ color:#c3cbd8; }
.footer hr{ border:none; border-top:1px solid rgba(255,255,255,.08); margin:20px 0; }
.footer__info{ display:grid; gap:3px; font-size:12.5px; }
.footer__info span{
  display:inline-block;
  min-width:96px;
  color:#a8b1c0;
  font-weight:700;
}
.footer__copy{ margin-top:20px; font-size:12px; color:#4d5768; }

/* ==========================================================================
   6. 모바일 하단 고정 CTA
   ========================================================================== */
.mobile-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:70;
  display:flex; align-items:center; gap:12px;
  padding:11px 16px;
  padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px));
  background:rgba(7,13,24,.96);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(216,173,63,.22);
  transform:translateY(120%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.mobile-cta.is-show{ transform:translateY(0); }
.mobile-cta__text{ flex:1 1 auto; min-width:0; line-height:1.3; }
.mobile-cta__text strong{ display:block; font-size:13px; color:#fff; font-weight:800; }
.mobile-cta__text span{ font-size:11.5px; color:#93a1b6; }
.mobile-cta__text b{ color:var(--gold-400); font-weight:900; }
.mobile-cta__btn{
  flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--navy-900);
  font-weight:900; font-size:14.5px;
  padding:13px 22px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(216,173,63,.3);
}
@media (min-width:901px){ .mobile-cta{ display:none; } }

/* ==========================================================================
   7. 실시간 신청 알림 토스트
   ========================================================================== */
.toast{
  position:fixed;
  left:16px;
  bottom:calc(90px + env(safe-area-inset-bottom, 0px));
  z-index:65;
  display:flex; align-items:center; gap:10px;
  max-width:min(300px, calc(100vw - 32px));
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px 9px 9px;
  box-shadow:var(--shadow-m);
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .4s, transform .4s;
}
.toast.is-show{ opacity:1; transform:translateY(0); }
.toast__avatar{
  flex:0 0 auto;
  width:30px; height:30px; border-radius:50%;
  background:var(--navy-800); color:var(--gold-400);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
}
.toast p{ font-size:12.5px; color:var(--ink-700); line-height:1.4; }
.toast b{ color:var(--ink-900); font-weight:800; }
.toast span{ color:var(--ink-500); }
@media (min-width:901px){ .toast{ left:24px; bottom:24px; } }

/* ==========================================================================
   8. 데스크톱 히어로 2단 레이아웃
   ========================================================================== */
@media (min-width:1000px){
  .hero__inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) 460px;
    grid-template-areas:
      "copy  book"
      "proof form";
    align-items:center;
    column-gap:56px;
    row-gap:32px;
    text-align:left;
  }
  .hero__copy{ grid-area:copy; }
  .book{ grid-area:book; margin-top:0; max-width:380px; justify-self:center; }
  .form-card{ grid-area:form; margin-top:0; max-width:460px; justify-self:center; }
  .proof{ grid-area:proof; margin-top:0; max-width:560px; }
  .hero__tags{ justify-content:flex-start; }
  .hero__desc{ margin-left:0; margin-right:0; }
}