/* 플레이팟 랜딩 v2 — 피그마 "플레이팟 랜딩 v2 · M3 키트"(442940:74 PC, 442947:503 모바일) 그대로.
   글자 크기는 랜딩만 토스 수치(사장 확정 11/08). 강조 1색 = 보라. */
@font-face{font-family:"Pretendard Variable";src:url(pretendard-sub.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ink:#191f28; --ink-2:#4e5968; --line:#d1d6db; --accent:#7c3aed; --accent-ink:#6d28d9;
  --lav:#f3eeff; --flow:#f5f5f5; --dark:#141218; --dark-2:#1d1b22; --on-dark:#e6e0e9; --on-dark-2:#cac4d0;
  --pad:16px; --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);background:#fff;word-break:keep-all;text-wrap:pretty;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:96px 0}
.h2{font-size:28px;line-height:1.35;font-weight:700}
.lead{margin-top:12px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;
  font:inherit;font-size:17px;font-weight:700;line-height:1.3;text-decoration:none;border:0;cursor:pointer;
  transition:transform .12s ease-out,background-color .2s ease-out}
.btn:active{transform:scale(.97)}
.btn--fill{background:var(--accent);color:#fff}
.btn--fill:hover{background:var(--accent-ink)}
.btn--line{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--white{background:#fff;color:var(--accent-ink)}
@media (hover:none){.btn--fill:hover{background:var(--accent)}}

/* 상단 메뉴 */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:64px;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,0));transition:background-color .2s ease-out,box-shadow .2s ease-out}
.top .wrap{height:100%;display:flex;align-items:center;gap:8px}
.top .logo{display:flex;align-items:center;height:44px;margin-right:auto}
.top .logo img{height:22px;width:auto}
.top .logo .on-light{display:none}
.top nav{display:none;gap:4px}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:16px;font-weight:700;text-decoration:none;color:#fff}
.top .btn{min-height:44px;padding:0 16px;font-size:16px}
.top .login{line-height:1.3;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:16px;font-weight:700;color:#fff;text-decoration:none}
.top.solid{background:#fff;border-bottom:1px solid var(--line)}
.top.solid .logo .on-dark{display:none}
.top.solid .logo .on-light{display:block}
.top.solid nav a,.top.solid .login{color:var(--ink)}

/* 1 첫 화면 */
.hero{position:relative;height:100svh;min-height:560px;color:#fff;overflow:hidden;background:#111}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 40%,rgba(0,0,0,0) 65%)}
.hero-in{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:0 16px 48px;max-width:1200px;margin:0 auto}
.hero h1{font-size:32px;line-height:1.3;font-weight:700}
.hero p{margin-top:12px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.85);max-width:560px}
.hero .btn{margin-top:24px}
.hero small{display:block;margin-top:12px;font-size:13px;color:rgba(255,255,255,.75)}
@media (max-width:1023px){
  .hero{background:#121014}
  .hero img{inset:0 0 auto 0;height:auto;aspect-ratio:2/3}
  .hero::after{background:linear-gradient(to top,#121014 0%,#121014 24%,rgba(18,16,20,.6) 40%,rgba(18,16,20,0) 58%)}
}

/* 2 이용 흐름 — 스크롤 고정 */
.flow{position:relative;height:500vh;background:var(--flow)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;padding-top:64px}
.stage-box{position:relative;width:100%;flex:none}
.stage canvas{display:block;width:100%;height:100%;
  -webkit-mask:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 16px),transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent),linear-gradient(to bottom,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-composite:intersect}
.copy{position:relative;flex:1;padding:24px 16px 0}
.kicker{display:block;font-size:16px;line-height:1.5;font-weight:700;color:var(--accent-ink);margin-bottom:8px}
.dots{display:flex;gap:8px;margin-bottom:16px}
.dots i{width:8px;height:8px;border-radius:999px;background:var(--line);transition:background-color .2s ease-out,width .2s ease-out}
.dots i.on{background:var(--accent);width:24px}
.steps{position:relative}
.step{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(8px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:none}
.step.on{opacity:1;transform:none}
.step h3{font-size:24px;line-height:1.35;font-weight:700}
.step p{margin-top:8px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.flow-still{display:none;background:var(--flow);padding:48px 16px}
.flow-still figure{max-width:960px;margin:0 auto 48px}
.flow-still h3{font-size:24px;line-height:1.35;margin-top:16px}
.flow-still p{font-size:17px;line-height:1.5;color:var(--ink-2);margin-top:8px}
@media (prefers-reduced-motion:reduce){.flow{display:none}.flow-still{display:block}}

/* 3 DJ (어두운 구간) */
.dark{background:var(--dark);color:var(--on-dark)}
.dark .lead{color:var(--on-dark-2)}
.dj-grid{display:grid;gap:32px}
.dj-screen{border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#000}
.dj-screen img{width:100%;height:100%;object-fit:cover}
.voices{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.voices button{min-height:44px;padding:0 16px;border-radius:8px;border:1px solid #938f99;background:transparent;color:var(--on-dark);font:inherit;font-size:16px;font-weight:700;line-height:1.3;cursor:pointer}
.voices button[aria-pressed="true"]{background:#4a4458;border-color:#4a4458;color:#e8def8}
.voices button[aria-pressed="true"]::before{content:"✓ "}
.story{margin-top:24px;border:1px solid #49454f;border-radius:16px;padding:20px;background:var(--dark-2)}
.story-who{line-height:1.4;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700}
.story-who b{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:#4f378a;color:#eaddff;font-size:16px;font-weight:700}
.story h3{margin-top:16px;font-size:18px;line-height:1.4;font-weight:700;color:#fff}
.story .song{margin-top:4px;font-size:16px;color:var(--on-dark-2)}
.story .what{margin-top:16px;font-size:16px;line-height:1.5;color:var(--on-dark-2)}
.story .btn{margin-top:20px;background:#d0bcff;color:#381e72}
.story .btn[aria-pressed="true"]{background:#fff}
.story .btn svg{width:18px;height:18px}

/* 카드 공통 (연보라 색면) */
.cards{display:grid;gap:16px;margin-top:40px}
.card{background:var(--lav);border-radius:16px;overflow:hidden}
.card .pic{display:grid;place-items:center;aspect-ratio:16/10}
.card .pic img{width:42%;max-width:180px;height:auto;filter:drop-shadow(0 12px 18px rgba(90,60,150,.18))}
.card .txt{padding:0 20px 24px}
.card h3{font-size:20px;line-height:1.4;font-weight:700}
.card p{margin-top:8px;font-size:16px;line-height:1.5;color:var(--ink-2)}

/* 4 이득 숫자 카드 */
.stat{background:var(--lav);border-radius:16px;padding:24px}
.stat img{width:72px;height:72px}
.stat .num{margin-top:16px;font-size:40px;line-height:1.2;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.stat h3{margin-top:8px;font-size:17px;line-height:1.5;font-weight:700}
.stat small{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* 7 동산 */
.store{margin-top:32px;border-radius:16px;overflow:hidden}
.store img{width:100%;height:auto}
.loc{margin-top:12px;font-size:16px;color:var(--ink-2)}

/* 8 요금 */
.seg{display:inline-flex;margin-top:32px;border:1px solid var(--line);border-radius:999px;padding:0;overflow:hidden}
.seg button{min-height:44px;line-height:1.3;min-width:88px;padding:0 16px;border:0;background:transparent;font:inherit;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:#e8def8;color:#4a3d6b}
.plans{display:grid;gap:16px;margin-top:24px}
.plan{border-radius:16px;padding:24px;border:1px solid var(--line);background:#fff}
.plan--rec{background:var(--lav);border-color:transparent}
.plan .name{font-size:16px;font-weight:700}
.plan .sub{margin-top:4px;font-size:13px;color:var(--ink-2)}
.plan .price{margin-top:20px;font-size:32px;line-height:1.25;font-weight:700;font-variant-numeric:tabular-nums}
.plan .once{margin-top:4px;font-size:16px;color:var(--ink-2);min-height:22px}
.plan ul{list-style:none;margin-top:16px;display:grid;gap:8px;font-size:16px}
.plan li::before{content:"✓";color:var(--accent-ink);font-weight:700;margin-right:8px}
.plan .btn{margin-top:24px;width:100%}
.fine{margin-top:16px;font-size:13px;color:var(--ink-2)}

/* 9 기기 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:8px;border:1px solid #79747e;font-size:16px}
.dev-pic{margin-top:32px;border-radius:16px;overflow:hidden}
.dev-pic img{width:100%;height:auto}

/* 10 자주 묻는 질문 */
.faq{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;font-size:17px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .2s ease-out;flex:none;margin-right:4px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 0 20px;font-size:16px;line-height:1.6;color:var(--ink-2)}

/* 11 마지막 상담 */
.final{background:var(--accent);color:#fff;text-align:center}
.final .h2{font-size:28px}
.final .btn{margin-top:24px}
.final .wrap{display:flex;flex-direction:column;align-items:center}
.final .mail{line-height:1.4;display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:16px;color:rgba(255,255,255,.9)}

/* 12 푸터 */
.foot{background:#f4f4f5;padding:40px 0 120px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}

/* 하단 상담 바 */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;
  border-top:1px solid var(--line);display:flex;gap:8px;transform:translateY(110%);transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.bar.show{transform:none}
.bar .btn{flex:1;min-height:48px}
.bar .btn--chat{flex:0 0 auto;background:#f2f4f6;color:var(--ink)}
.bar .msg{display:none}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* PC */
@media (min-width:1024px){
  :root{--pad:40px}
  .sec{padding:160px 0}
  .h2{font-size:36px;line-height:1.3}
  .lead{font-size:20px}
  .top nav{display:flex}
  .top .login{display:none}
  .hero-in{padding:0 40px 80px}
  .hero h1{font-size:56px}
  .hero p{font-size:20px}
  .hero .btn{min-height:56px;padding:0 32px;font-size:18px}
  .hero small{font-size:16px}
  .stage{flex-direction:row;align-items:center;max-width:1280px;margin:0 auto;padding:64px 40px 0;gap:48px}
  .copy{flex:0 0 360px;padding:0}
  .stage-box{flex:1;height:auto;aspect-ratio:3/2;max-height:80svh}
  .step h3{font-size:36px;line-height:1.3}
  .step p{font-size:20px}
  .dj-grid{grid-template-columns:420px 1fr;align-items:center;gap:56px}
  .dj-grid .dj-screen{order:2}
  .cards{grid-template-columns:repeat(2,1fr);gap:24px}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .card h3{font-size:22px}
  .stat .num{font-size:48px}
  .stat h3{font-size:20px}
  .plans{grid-template-columns:repeat(2,minmax(0,488px))}
  .plan .price{font-size:40px}
  .dev{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center}
  .dev-pic{margin-top:0}
  .final .h2{font-size:48px}
  .faq{max-width:800px}
  .bar{left:50%;right:auto;bottom:24px;width:560px;margin-left:-280px;border-radius:999px;padding:8px 8px 8px 28px;align-items:center;
    box-shadow:0 8px 24px rgba(25,31,40,.14);transform:translateY(160%)}
  .bar .msg{display:block;flex:1;font-size:18px;font-weight:700}
  .bar .btn{flex:0 0 auto}
  .bar .btn--chat{display:none}
}