/* ─────────────────────────────────────────────────────────
   전자책 랜딩 (pages/landing/*.php 전용)
   app.css 위에 얹힌다. 어두운 시네마틱 톤 + 금색.
   ───────────────────────────────────────────────────────── */
.lp{
  --ink:#0e1116; --paper:#fff; --gold:#d4a017; --gold-lt:#f0c14b;
  --crim:#7B1C1C; --dim:#6b7280; --line:#e7e5e4;
  margin:-28px 0 0;                       /* .page 상단 여백 상쇄 */
}
.page:has(.lp){max-width:none;padding-left:0;padding-right:0;}
.lp *{box-sizing:border-box;}
.lp img{max-width:100%;display:block;}

.lp-w{max-width:1080px;margin:0 auto;padding:0 22px;}
.lp-w.narrow{max-width:780px;}

/* ── 등장 애니메이션 ─────────────────────────── */
/* JS 가 살아 있을 때만 숨긴다. 스크립트가 죽어도 본문은 반드시 보여야 한다. */
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);}
.js .reveal.on{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
}

/* ── HERO ────────────────────────────────────── */
.lp-hero{position:relative;min-height:min(88vh,760px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow:hidden;
  padding:90px 22px 74px;background:#0a0d12;}
.lp-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 62%;
  opacity:.62;transform:scale(1.04);}
.lp-hero::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 55%,rgba(10,13,18,.34) 0%,rgba(10,13,18,.86) 62%,#0a0d12 100%);}
.lp-hero-in{position:relative;z-index:2;max-width:860px;}

.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;
  letter-spacing:.02em;color:#e8d9b0;background:rgba(212,160,23,.13);
  border:1px solid rgba(212,160,23,.4);padding:7px 15px;border-radius:22px;margin-bottom:26px;}
.lp-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-lt);
  box-shadow:0 0 0 0 rgba(240,193,75,.7);animation:lpPulse 2.4s infinite;}
@keyframes lpPulse{70%{box-shadow:0 0 0 9px rgba(240,193,75,0);}100%{box-shadow:0 0 0 0 rgba(240,193,75,0);}}

.lp-h1{font-size:clamp(1.9rem,5.6vw,3.5rem);font-weight:900;line-height:1.28;color:#fff;
  letter-spacing:-.03em;margin:0 0 22px;text-shadow:0 2px 30px rgba(0,0,0,.6);}
.lp-num{background:linear-gradient(180deg,#ffe9a8,var(--gold));-webkit-background-clip:text;
  background-clip:text;color:transparent;font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 0 26px rgba(212,160,23,.45));}
.lp-won{color:var(--gold-lt);font-size:.62em;margin-left:2px;}

.lp-sub{font-size:clamp(.92rem,2.1vw,1.08rem);line-height:1.85;color:#cfd4dc;margin:0 auto 32px;max-width:640px;}
.lp-sub b{color:#fff;font-weight:700;}

.lp-cta-row{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-bottom:30px;}
.lp-cta-row.center{justify-content:center;}

.lp-btn{display:inline-flex;align-items:center;justify-content:center;
  font-size:.94rem;font-weight:800;padding:15px 30px;border-radius:12px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;white-space:nowrap;}
.lp-btn.primary{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#1a1206;
  box-shadow:0 8px 26px rgba(212,160,23,.36);position:relative;overflow:hidden;}
.lp-btn.primary::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:lpShine 3.6s ease-in-out infinite;}
@keyframes lpShine{0%,62%{left:-120%;}88%,100%{left:130%;}}
.lp-btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(212,160,23,.5);}
.lp-btn.ghost{background:rgba(255,255,255,.07);color:#f3f4f6;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(4px);}
.lp-btn.ghost:hover{background:rgba(255,255,255,.15);transform:translateY(-2px);}
.lp-btn.big{width:100%;padding:17px 28px;font-size:1rem;}

.lp-trust{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
  font-size:.8rem;color:#9ca3af;}
.lp-trust b{color:var(--gold-lt);font-weight:800;}

.lp-scroll{position:absolute;bottom:20px;left:0;right:0;z-index:2;text-align:center;
  font-size:.74rem;color:#9ca3af;animation:lpBob 2.6s ease-in-out infinite;}
@keyframes lpBob{0%,100%{transform:translateY(0);opacity:.65;}50%{transform:translateY(6px);opacity:1;}}

/* ── 일반 섹션 ───────────────────────────────── */
.lp-sec{padding:78px 0;background:var(--paper);}
.lp-sec.tint{background:#fbfaf8;}
.lp-sec.dark{background:linear-gradient(180deg,#0e1116,#161b23);color:#e5e7eb;}
.lp-sec.dark .lp-h2{color:#fff;}

.lp-kicker{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold);background:rgba(212,160,23,.11);
  padding:5px 12px;border-radius:6px;margin-bottom:15px;}
.lp-kicker.warn{color:var(--crim);background:rgba(123,28,28,.09);}

.lp-h2{font-size:clamp(1.35rem,3.4vw,2.05rem);font-weight:900;line-height:1.42;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 18px;}
.lp-h2.center{text-align:center;}
.lp-lead{font-size:.96rem;line-height:1.9;color:#4b5563;max-width:660px;}
.lp-note{font-size:.86rem;line-height:1.85;color:var(--dim);margin-top:24px;}
.lp-note.center{text-align:center;}
.lp-note b{color:#374151;}

/* ── 매출 막대 ───────────────────────────────── */
/* 위쪽(금액·막대)을 기준으로 맞춘다. 아래쪽 기준으로 맞추면 '7일부터' 한 줄 때문에 5월만 들린다. */
.lp-chart{display:flex;align-items:flex-start;gap:clamp(14px,4vw,44px);
  margin:38px 0 8px;padding:26px 4px 0;justify-content:center;}
.lp-chart .lp-bar{flex:1;max-width:180px;text-align:center;}
.lp-chart .lp-v{font-size:clamp(.82rem,2vw,1.02rem);font-weight:900;color:var(--ink);
  margin-bottom:9px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.lp-chart .lp-v small{font-size:.68em;font-weight:700;color:var(--dim);margin-left:1px;}
.lp-chart .lp-col{height:clamp(130px,26vw,210px);display:flex;align-items:flex-end;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.035));border-radius:11px;}
.lp-chart .lp-col i{display:block;width:100%;height:0;border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  box-shadow:0 -3px 18px rgba(212,160,23,.35);
  transition:height 1.15s cubic-bezier(.2,.75,.25,1) .15s;}
.lp-chart .lp-col i{height:var(--h);}
.js .reveal .lp-chart .lp-col i{height:0;}
.js .reveal.on .lp-chart .lp-col i{height:var(--h);}
.lp-chart .lp-m{margin-top:11px;font-size:.86rem;font-weight:800;color:#374151;}
.lp-chart .lp-m em{display:block;font-size:.68rem;font-weight:500;color:var(--dim);font-style:normal;margin-top:2px;}

/* ── 이미지 + 글 2단 ─────────────────────────── */
.lp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,64px);align-items:center;
  max-width:1140px;margin:0 auto;padding:74px 22px;}
.lp-split.rev .lp-split-img{order:2;}
.lp-split-img img{border-radius:16px;box-shadow:0 22px 60px -22px rgba(14,17,22,.55);width:100%;}
.lp-split-txt p{font-size:.94rem;line-height:1.92;color:#4b5563;margin:0 0 15px;}
.lp-split-txt p b{color:var(--ink);font-weight:700;}
.lp-strong{font-size:1.02rem!important;color:var(--ink)!important;font-weight:700;line-height:1.75!important;
  padding-top:6px;border-top:2px solid var(--line);margin-top:22px!important;}
.lp-strong b{color:var(--crim);}

.lp-facts{list-style:none;margin:20px 0;padding:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;}
.lp-facts li{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 17px;border-bottom:1px solid var(--line);background:#fff;}
.lp-facts li:last-child{border-bottom:none;}
.lp-facts li:nth-child(1){background:linear-gradient(90deg,rgba(212,160,23,.09),transparent);}
.lp-facts .lp-fk{font-size:.86rem;color:#4b5563;}
.lp-facts .lp-fv{font-size:1.14rem;font-weight:900;color:var(--ink);white-space:nowrap;letter-spacing:-.02em;}
.lp-facts li:nth-child(1) .lp-fv{color:var(--gold);}
.lp-facts li:nth-child(2) .lp-fv,.lp-facts li:nth-child(3) .lp-fv{color:var(--crim);}

.lp-bullets{list-style:none;margin:18px 0;padding:0;}
.lp-bullets li{position:relative;padding:8px 0 8px 26px;font-size:.9rem;line-height:1.75;color:#4b5563;}
.lp-bullets li::before{content:'';position:absolute;left:6px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);}
.lp-bullets li b{color:var(--ink);}

.lp-quote{margin-top:22px;padding:17px 20px;background:#fbfaf8;border-left:3px solid var(--gold);
  border-radius:0 11px 11px 0;font-size:.9rem;line-height:1.85;color:#374151;}
.lp-quote b{color:var(--ink);}
.lp-quote cite{display:block;margin-top:8px;font-size:.74rem;color:var(--dim);font-style:normal;}

/* ── CTA 밴드 ────────────────────────────────── */
.lp-cta-band{padding:66px 0;text-align:center;
  background:linear-gradient(135deg,#0e1116,#1c2430 55%,#0e1116);color:#fff;}
.lp-cta-band.tight{padding:42px 0;background:#0e1116;}
.lp-cta-band h2{font-size:clamp(1.25rem,3vw,1.75rem);font-weight:900;margin:0 0 10px;letter-spacing:-.02em;}
.lp-cta-band p{font-size:.9rem;color:#b6bcc6;margin:0 0 26px;}
.lp-cta-band p.mini{font-size:.88rem;color:#cbd1da;margin-bottom:20px;}

/* ── 목차 ────────────────────────────────────── */
.lp-toc{margin-top:30px;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;}
.lp-part{border-bottom:1px solid var(--line);}
.lp-part:last-child{border-bottom:none;}
.lp-part>summary{display:flex;align-items:center;gap:12px;padding:16px 19px;cursor:pointer;
  list-style:none;transition:background .14s;}
.lp-part>summary::-webkit-details-marker{display:none;}
.lp-part>summary:hover{background:#fbfaf8;}
.lp-part[open]>summary{background:#fbfaf8;border-bottom:1px solid var(--line);}
.lp-part .pn{flex-shrink:0;min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--gold-lt);font-size:.72rem;font-weight:900;border-radius:9px;}
.lp-part .pt{flex:1;font-size:.94rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.lp-part .pm{font-size:.74rem;color:var(--dim);white-space:nowrap;}
.lp-part .pf{font-size:.68rem;font-weight:800;color:#047857;background:#ecfdf5;
  padding:3px 8px;border-radius:5px;white-space:nowrap;}
.lp-part .pc{color:#9ca3af;font-size:.8rem;transition:transform .2s;}
.lp-part[open] .pc{transform:rotate(180deg);}
.lp-part-body{padding:6px 0;}

.lp-toc-row{display:flex;align-items:center;gap:12px;padding:9px 19px 9px 24px;font-size:.87rem;}
.lp-toc-row:hover{background:#fbfaf8;}
.lp-toc-row .lp-no{min-width:32px;font-size:.7rem;font-weight:800;color:#9ca3af;font-variant-numeric:tabular-nums;}
.lp-toc-row .lp-tt{flex:1;color:#374151;line-height:1.6;}
.lp-toc-row.free .lp-tt{color:var(--ink);font-weight:600;}
.lp-toc-row .lp-badge{font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:5px;white-space:nowrap;}
.lp-toc-row .lp-badge.free{background:#ecfdf5;color:#047857;}
.lp-toc-row .lp-badge.free:hover{background:#047857;color:#fff;}
.lp-toc-row .lp-badge.lock{opacity:.4;}

.lp-toc-all{text-align:center;margin-top:18px;}
.lp-toc-all button{font-size:.82rem;font-weight:700;color:#4b5563;background:#fff;
  border:1px solid var(--line);border-radius:22px;padding:9px 22px;cursor:pointer;}
.lp-toc-all button:hover{background:#fbfaf8;border-color:#d6d3d1;}

/* ── 사고 카드 ───────────────────────────────── */
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:15px;margin-top:32px;}
.lp-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  border-radius:14px;padding:20px 19px;transition:transform .18s,border-color .18s;}
.lp-card:hover{transform:translateY(-3px);border-color:rgba(212,160,23,.45);}
.lp-card .lp-i{font-size:1.3rem;display:block;margin-bottom:10px;}
.lp-card b{display:block;font-size:.94rem;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.01em;}
.lp-card p{font-size:.83rem;line-height:1.75;color:#a8b0bb;margin:0;}

/* ── 대상 2단 ────────────────────────────────── */
.lp-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.lp-box{border-radius:15px;padding:26px 24px;border:1px solid var(--line);background:#fff;}
.lp-box.yes{border-color:rgba(212,160,23,.42);background:linear-gradient(180deg,rgba(212,160,23,.06),transparent);}
.lp-box h3{font-size:1.02rem;font-weight:900;margin:0 0 15px;color:var(--ink);}
.lp-box.yes h3::before{content:'○ ';color:var(--gold);}
.lp-box.no h3::before{content:'× ';color:var(--crim);}
.lp-box ul{list-style:none;margin:0;padding:0;}
.lp-box li{position:relative;padding:8px 0 8px 19px;font-size:.88rem;line-height:1.75;color:#4b5563;}
.lp-box li::before{content:'';position:absolute;left:2px;top:16px;width:5px;height:5px;
  border-radius:50%;background:#d6d3d1;}
.lp-box.yes li::before{background:var(--gold);}
.lp-box li b{color:var(--ink);}

/* ── 인용 ────────────────────────────────────── */
.lp-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:15px;margin-top:30px;}
.lp-quotes blockquote{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 18px;font-size:.93rem;line-height:1.85;color:#374151;position:relative;}
.lp-quotes blockquote::before{content:'"';position:absolute;top:2px;left:14px;
  font-size:2.6rem;color:rgba(212,160,23,.24);font-weight:900;line-height:1;}
.lp-quotes blockquote b{color:var(--ink);font-weight:800;}
.lp-quotes cite{display:block;margin-top:11px;font-size:.72rem;color:var(--dim);font-style:normal;}

/* ── FAQ ─────────────────────────────────────── */
.lp-faq{margin-top:28px;border-top:1px solid var(--line);}
.lp-faq details{border-bottom:1px solid var(--line);}
.lp-faq summary{padding:17px 34px 17px 4px;font-size:.94rem;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;position:relative;}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:'+';position:absolute;right:6px;top:15px;font-size:1.2rem;
  color:var(--gold);font-weight:400;transition:transform .2s;}
.lp-faq details[open] summary::after{transform:rotate(45deg);}
.lp-faq p{margin:0;padding:0 4px 20px;font-size:.89rem;line-height:1.9;color:#4b5563;}
.lp-faq p b{color:var(--ink);}

/* ── 최종 CTA ────────────────────────────────── */
.lp-final{position:relative;padding:96px 22px 104px;overflow:hidden;background:#0a0d12;text-align:center;}
.lp-final-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5;}
.lp-final::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,#0a0d12 0%,rgba(10,13,18,.72) 40%,rgba(10,13,18,.94) 100%);}
.lp-final-in{position:relative;z-index:2;max-width:470px;margin:0 auto;}
.lp-final h2{font-size:clamp(1.5rem,4vw,2.3rem);font-weight:900;color:#fff;line-height:1.4;
  letter-spacing:-.03em;margin:0 0 14px;}
.lp-final>.lp-final-in>p{font-size:.92rem;color:#b6bcc6;margin:0 0 32px;}

.lp-pricebox{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);
  border-radius:19px;padding:28px 24px;backdrop-filter:blur(9px);text-align:center;}
.lp-pricebox .orig{font-size:.9rem;color:#8b929c;text-decoration:line-through;margin-bottom:3px;}
.lp-pricebox .price{font-size:2.7rem;font-weight:900;color:#fff;letter-spacing:-.04em;line-height:1.1;
  font-variant-numeric:tabular-nums;}
.lp-pricebox .price span{font-size:.42em;font-weight:700;color:var(--gold-lt);margin-left:3px;}
.lp-pricebox ul{list-style:none;margin:19px 0 22px;padding:17px 0;
  border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);}
.lp-pricebox li{font-size:.85rem;color:#cbd1da;padding:4px 0;}
.lp-pricebox li::before{content:'✓ ';color:var(--gold-lt);font-weight:800;}
.lp-pricebox .lp-btn+.lp-btn{margin-top:9px;}
.lp-pricebox .own{font-size:.9rem;font-weight:800;color:var(--gold-lt);margin-bottom:16px;}
.lp-pricebox .expired-note{font-size:.78rem;color:#fca5a5;background:rgba(153,27,27,.24);
  border-radius:8px;padding:9px 12px;margin-bottom:14px;}
.lp-pricebox .fine{font-size:.72rem;color:#8b929c;margin-top:14px;line-height:1.7;}

/* ── 하단 고정 바 ────────────────────────────── */
.lp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:11px 20px;
  background:rgba(14,17,22,.95);backdrop-filter:blur(11px);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.7,.3,1);}
.lp-sticky.on{transform:none;}
.lp-sticky .s-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.lp-sticky .s-info b{font-size:.86rem;color:#fff;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-sticky .s-info span{font-size:.72rem;color:#9ca3af;}
.lp-sticky .s-act{display:flex;align-items:center;gap:13px;flex-shrink:0;}
.lp-sticky .s-price{font-size:1.02rem;font-weight:900;color:var(--gold-lt);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.lp-sticky .lp-btn{padding:11px 22px;font-size:.86rem;}
.lp-sticky .lp-btn.primary::after{animation:none;}

/* ── 좁은 화면 ───────────────────────────────── */
@media (max-width:860px){
  .lp-split{grid-template-columns:1fr;padding:56px 22px;}
  .lp-split.rev .lp-split-img{order:0;}
  .lp-two{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .lp-hero{min-height:auto;padding:64px 20px 58px;}
  .lp-sec{padding:56px 0;}
  .lp-cta-row .lp-btn{width:100%;}
  .lp-trust{gap:8px 16px;font-size:.74rem;}
  .lp-part>summary{flex-wrap:wrap;gap:8px 10px;padding:14px 15px;}
  .lp-part .pt{flex:1 1 100%;order:3;}
  .lp-part .pm,.lp-part .pf{order:4;}
  .lp-toc-row{padding-left:15px;}
  .lp-final{padding:70px 20px 100px;}
  .lp-sticky{padding:9px 14px;}
  .lp-sticky .s-info span{display:none;}
  .lp-sticky .s-act{gap:9px;}
  .lp-sticky .lp-btn{padding:11px 17px;}
}

/* ── 할인 표시 ────────────────────────────── */
.lp-saletag{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  background:rgba(212,160,23,.14);border:1px solid rgba(212,160,23,.42);
  border-radius:11px;padding:9px 16px;margin-bottom:22px;font-size:.8rem;color:#e8d9b0;}
.lp-saletag b{font-size:.92rem;font-weight:900;color:var(--gold-lt);letter-spacing:-.01em;}
.lp-saletag em{font-style:normal;font-weight:800;color:#fff;background:var(--crim);
  padding:3px 10px;border-radius:14px;font-size:.72rem;}
.lp-btn s{opacity:.55;font-weight:600;text-decoration-thickness:1.5px;margin-right:7px;}
.lp-btn b{font-weight:900;}
.lp-pricebox .off{display:inline-block;font-size:.74rem;font-weight:800;color:#1a1206;
  background:linear-gradient(135deg,#f0c14b,var(--gold));padding:3px 11px;border-radius:14px;
  margin-bottom:7px;}
.lp-pricebox .until{font-size:.78rem;font-weight:800;color:#fca5a5;margin-top:7px;}
.lp-sticky .s-price s{font-size:.76rem;font-weight:500;color:#8b929c;margin-right:5px;}
@media (max-width:560px){
  .lp-saletag{gap:6px;padding:8px 13px;font-size:.74rem;}
  .lp-btn s{display:none;}      /* 좁은 화면에서는 할인가만 */
}