/* Dekoy 랜딩 첫 화면(index.html 전용). 다른 페이지(방침 · 약관 · 로그인)는 style.css 를 그대로 쓴다.
   2026-11-02 새 판 — 승인 LP3 · LP4(STATUS.md). 색은 아래 토큰만, 움직임은 prefers-reduced-motion 이면 멈춘다. */
:root {
  --bg: #06070b;
  --bg2: #0a0c12;
  --panel: #10131a;
  --card: #12161e;
  --line: #1c212c;
  --line2: #2a3140;
  --fg: #eef2f8;
  --fg2: #b9c2cf;
  --fg3: #8792a3;
  --fg4: #626c7c;
  --ac: #4c8dff;
  --ac2: #8b6bff;
  --ac3: #35d6c6;
  --pos: #7ddcab;
  --glow: rgba(76, 141, 255, .35);
  --sans: 'SUIT Variable', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gut: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; word-break: keep-all; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }
::selection { background: rgba(76, 141, 255, .35); }

/* ── 바탕 효과 ─────────────────────────────────────────── */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--ac3), var(--ac), var(--ac2)); }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-3%) } 60% { transform: translate(-2%,-1%) } 80% { transform: translate(3%,3%) } }
.cursor-glow { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(76,141,255,.10), rgba(139,107,255,.05) 40%, transparent 70%); transform: translate3d(-999px,-999px,0); transition: opacity .4s; }

/* ── 약관 변경 알림 띠(2026-11-02 승인 N2) — 시행일까지만 ─────── */
.notice-bar { position: fixed; inset: 0 0 auto; z-index: 55; height: 38px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 var(--gut);
  font-size: 13.5px; color: var(--fg2); background: linear-gradient(90deg, rgba(61,123,255,.22), rgba(139,107,255,.22)); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .3s; }
.notice-bar:hover { background: linear-gradient(90deg, rgba(61,123,255,.32), rgba(139,107,255,.32)); color: var(--fg); }
.notice-bar b { color: var(--fg); font-weight: 700; }
.nb-dot { width: 7px; height: 7px; border-radius: 50%; background: #9fc0ff; box-shadow: 0 0 0 4px rgba(159,192,255,.2); flex: none; }
@media (max-width: 520px) { .nb-sub { display: none; } }
body.has-bar .nav { top: 52px; }
body.has-bar .progress { top: 38px; }

/* ── 머리띠 ───────────────────────────────────────────── */
.nav { position: fixed; top: 14px; left: 50%; z-index: 50; transform: translateX(-50%); width: min(1180px, calc(100% - 2 * var(--gut)));
  display: flex; align-items: center; gap: 24px; padding: 10px 12px 10px 18px; border-radius: 16px;
  background: rgba(10, 12, 18, .55); border: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: background .3s, border-color .3s, transform .5s var(--ease); }
.nav.scrolled { background: rgba(10, 12, 18, .82); border-color: rgba(255,255,255,.09); }
.nav.hide { transform: translate(-50%, -120%); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; color: var(--fg2); }
.nav-links a { position: relative; transition: color .2s; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; background: var(--fg); color: #0a0c12; transition: box-shadow .3s; }
.nav-cta:hover { box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 8px 30px rgba(76,141,255,.35); }
@media (max-width: 640px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }

main { position: relative; z-index: 2; }
section { position: relative; }

/* ── 단추 ─────────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 52px; padding: 10px 22px; border-radius: 14px; font-weight: 700; font-size: 16px; line-height: 1.2; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s; isolation: isolate; }
.btn-primary { color: #fff; background: linear-gradient(135deg, #3d7bff, #6d5bff 60%, #8b6bff); box-shadow: 0 10px 40px -10px rgba(91, 110, 255, .7), inset 0 1px 0 rgba(255,255,255,.25); overflow: hidden; }
.btn-primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 3.6s var(--ease) infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%) } 85%, 100% { transform: translateX(120%) } }
.btn-primary:hover { box-shadow: 0 16px 50px -10px rgba(91, 110, 255, .9), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { color: var(--fg); border: 1px solid var(--line2); background: rgba(255,255,255,.02); flex-direction: row; align-items: center; gap: 8px; }
.btn-ghost:hover { border-color: var(--fg4); background: rgba(255,255,255,.05); }
.btn-sub { font-size: 12px; font-weight: 500; opacity: .78; }
.btn-lg { min-height: 62px; padding: 12px 30px; font-size: 18px; border-radius: 16px; }

/* ── 등장 ─────────────────────────────────────────────── */
[data-rise] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); }
[data-rise].in { opacity: 1; transform: none; filter: none; }
[data-split] .line { display: block; overflow: hidden; padding-bottom: .06em; }
[data-split] .line > .w { display: inline-block; transform: translateY(105%) rotate(4deg); opacity: 0; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); transition-delay: var(--wd, 0s); }
[data-split].in .line > .w { transform: none; opacity: 1; }
.shine { font-style: normal; background: linear-gradient(100deg, #8fb6ff 0%, #ffffff 30%, #b9a6ff 55%, #6be3d6 80%, #8fb6ff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: -250% 0; } }

/* ── 히어로 ───────────────────────────────────────────── */
.hero { min-height: 100vh; padding: 150px var(--gut) 80px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.hero-aura { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-aura i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.hero-aura i:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: -12vw; background: radial-gradient(circle, rgba(61,123,255,.55), transparent 65%); }
.hero-aura i:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: 4vw; background: radial-gradient(circle, rgba(139,107,255,.45), transparent 65%); animation-delay: -6s; }
.hero-aura i:nth-child(3) { width: 36vw; height: 36vw; left: 30vw; top: 38vw; background: radial-gradient(circle, rgba(53,214,198,.25), transparent 65%); animation-delay: -11s; }
@keyframes drift { 0% { transform: translate(0,0) scale(1) } 50% { transform: translate(4vw, 3vw) scale(1.12) } 100% { transform: translate(-3vw, 5vw) scale(.95) } }
.hero-copy { max-width: 980px; position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); font-size: 13.5px; color: var(--fg2); backdrop-filter: blur(8px); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pos); }
.pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--pos); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.5); opacity: 1 } to { transform: scale(2); opacity: 0 } }
.hero-title { margin-top: 26px; font-size: clamp(42px, 7.2vw, 108px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; }
.lede { margin: 30px auto 0; max-width: 40em; font-size: clamp(16px, 1.45vw, 19.5px); color: var(--fg2); line-height: 1.75; }
.lede strong { color: var(--fg); font-weight: 700; }
.hero-actions { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fine { margin-top: 18px; font-size: 13px; color: var(--fg4); }
.fine a { color: var(--fg3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
.mobile-note { display: none; margin-top: 22px; font-size: 14.5px; color: var(--fg2); }
.is-mobile .mobile-note { display: block; }
.is-mobile [data-dl], .is-mobile .installer { display: none !important; }
@media (max-width: 760px) { .br-wide { display: none; } }

/* 히어로 무대 — 기운 창이 마우스를 따라 조금 돈다 */
.hero-stage { position: relative; z-index: 2; margin-top: 70px; width: min(1240px, 100%); perspective: 1800px; }
.window { position: relative; border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 50px 120px -30px rgba(0,0,0,.9), 0 30px 90px -40px rgba(76,141,255,.45); }
.window-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: linear-gradient(#171b24, #12151d); border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; color: var(--fg3); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a404d; }
.window-bar i:nth-child(1) { background: #ff5f57; } .window-bar i:nth-child(2) { background: #febc2e; } .window-bar i:nth-child(3) { background: #28c840; }
.window-bar span { margin-left: 10px; font-weight: 600; letter-spacing: .01em; }
.window-hero { transform: rotateX(18deg) scale(.94); transform-origin: 50% 0; transition: transform 1.6s var(--ease); will-change: transform; }
.hero-stage.in .window-hero { transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, 0deg)) scale(1); }
.window-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, var(--bg) 100%); }
.scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(110, 160, 255, .16) 48%, rgba(160, 200, 255, .32) 50%, rgba(110, 160, 255, .16) 52%, transparent); height: 40%; transform: translateY(-110%); animation: scan 5.5s var(--ease) infinite; mix-blend-mode: screen; }
@keyframes scan { 0% { transform: translateY(-110%) } 60%, 100% { transform: translateY(260%) } }
.float-card { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; text-align: left; font-size: 13px; color: var(--fg2);
  background: rgba(18, 22, 30, .72); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); animation: bob 6s ease-in-out infinite; opacity: 0; transition: opacity 1s var(--ease) 1.4s; }
.hero-stage.in .float-card { opacity: 1; }
.float-card b { color: var(--fg); font-size: 14.5px; }
.fc-1 { left: -3%; top: 26%; }
.fc-2 { right: -3%; top: 12%; animation-delay: -2s; }
.fc-3 { right: 6%; bottom: 18%; animation-delay: -4s; flex-direction: row; align-items: center; gap: 8px; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 4px rgba(125,220,171,.2); }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@media (max-width: 900px) { .float-card { display: none; } }

/* ── 낱말 띠 ──────────────────────────────────────────── */
.marquee { position: relative; z-index: 2; overflow: hidden; padding: 30px 0; border-block: 1px solid var(--line); background: var(--bg2);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 44px; width: max-content; animation: marquee 34s linear infinite; font-size: clamp(30px, 4.4vw, 64px); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.marquee-track span { color: transparent; -webkit-text-stroke: 1.2px rgba(238,242,248,.42); transition: color .4s; }
.marquee-track span:nth-child(4n+1) { color: var(--fg); -webkit-text-stroke: 0; }
.marquee-track i { font-style: normal; font-size: .45em; color: var(--ac); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── 질문 ─────────────────────────────────────────────── */
.ask { padding: clamp(110px, 16vw, 220px) var(--gut); display: flex; justify-content: center; }
.ask-text { max-width: 1040px; font-size: clamp(26px, 3.6vw, 52px); line-height: 1.32; font-weight: 750; letter-spacing: -.025em; }
.ask-text .w { color: rgba(238,242,248,.14); transition: color .5s; }
.ask-text .w.lit { color: var(--fg); }
.ask-text .dim .w.lit { color: var(--fg3); }
.ask-text em .w.lit { font-style: normal; color: #9fc0ff; }
.ask-text em { font-style: normal; }

/* ── 구획 머리 ────────────────────────────────────────── */
.section-head { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.section-head.center { text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); }
.kicker::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.section-head h2, .secret h2 { margin-top: 18px; font-size: clamp(34px, 5vw, 72px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; }
.section-sub { margin: 22px auto 0; max-width: 34em; font-size: 18px; color: var(--fg2); }

/* ── 하루 ─────────────────────────────────────────────── */
.day { padding: 40px 0 clamp(80px, 10vw, 140px); }
.day-grid { max-width: 1480px; margin: 40px auto 0; padding: 0 var(--gut); display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: clamp(30px, 4vw, 70px); }
.day-steps { list-style: none; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; opacity: .28; transition: opacity .6s var(--ease); }
.step.on { opacity: 1; }
.step-n { font-family: var(--mono); font-size: 14px; color: var(--ac); letter-spacing: .1em; }
.step h3 { margin-top: 14px; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; }
.step p { margin-top: 16px; font-size: 17px; color: var(--fg2); line-height: 1.75; }
.step-shot { display: none; }
.day-stage { position: sticky; top: max(90px, calc(50vh - (100vw - 520px) * 0.29)); height: fit-content; align-self: start; margin-top: 14vh; }
.window-sticky { transform: perspective(1600px) rotateY(-6deg) rotateX(3deg); transition: transform 1s var(--ease); }
.window-sticky:hover { transform: perspective(1600px) rotateY(0) rotateX(0); }
.stage-imgs { position: relative; aspect-ratio: 16 / 9; background: var(--panel); }
.stage-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); filter: blur(8px); transition: opacity .8s var(--ease), transform 1.4s var(--ease), filter .8s var(--ease); }
.stage-imgs img.on { opacity: 1; transform: scale(1); filter: none; }
.stage-dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.stage-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line2); transition: width .5s var(--ease), background .5s; }
.stage-dots i.on { width: 30px; background: linear-gradient(90deg, var(--ac), var(--ac2)); }
@media (max-width: 960px) {
  .day-grid { grid-template-columns: 1fr; }
  .day-stage { display: none; }
  .step { min-height: 0; opacity: 1; padding: 40px 0; }
  .step-shot { display: block; margin-top: 24px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 30px 70px -30px rgba(76,141,255,.4); }
}

/* ── 넓은 화면 ────────────────────────────────────────── */
.wide { padding: clamp(80px, 10vw, 140px) 0; overflow: hidden; }
.wide-frame { position: relative; max-width: 1320px; margin: 70px auto 0; padding: 0 var(--gut); }
.wide-frame .window { transform: scale(var(--z, .86)); transform-origin: 50% 30%; transition: transform .2s linear; will-change: transform; }
.wide-glow { position: absolute; left: 10%; right: 10%; bottom: -60px; height: 160px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(76,141,255,.45), rgba(139,107,255,.2) 45%, transparent 70%); filter: blur(40px); }

/* ── 숨긴 것 ──────────────────────────────────────────── */
.secret { padding: clamp(60px, 8vw, 120px) var(--gut); display: flex; justify-content: center; }
.secret-card { position: relative; width: min(860px, 100%); padding: clamp(40px, 6vw, 80px) clamp(22px, 5vw, 70px); text-align: center; border-radius: 28px; background: radial-gradient(120% 120% at 50% 0%, rgba(76,141,255,.12), transparent 60%), var(--card); overflow: hidden; isolation: isolate; }
.secret-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, var(--ac) 80%, var(--ac2) 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
.secret-lock { display: grid; margin-left: auto; margin-right: auto; place-items: center; width: 74px; height: 74px; border-radius: 22px; color: #cfe0ff; background: linear-gradient(145deg, rgba(76,141,255,.25), rgba(139,107,255,.15)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 60px rgba(76,141,255,.35); margin-bottom: 26px; animation: bob 5s ease-in-out infinite; }
.secret .kicker { justify-content: center; }
.secret-code { margin: 28px auto 0; max-width: 32em; font-size: clamp(14px, 1.6vw, 18px); color: #7fa6ff; letter-spacing: .06em; filter: blur(.4px); text-shadow: 0 0 18px rgba(76,141,255,.6); min-height: 1.6em; }
.secret-sub { margin: 24px 0 34px; font-size: 18px; color: var(--fg2); line-height: 1.7; }

/* ── 카드 ─────────────────────────────────────────────── */
.more { padding: clamp(80px, 10vw, 140px) 0; }
.bento { list-style: none; max-width: 1240px; margin: 60px auto 0; padding: 0 var(--gut); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { position: relative; padding: 30px 28px 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: border-color .3s, transform .5s var(--ease); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.card::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(76,141,255,.16), transparent 45%); }
.card:hover { border-color: var(--line2); transform: translateY(-4px); }
.card:hover::after { opacity: 1; }
.card h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 22px; }
.card p { margin-top: 10px; color: var(--fg2); font-size: 15.5px; line-height: 1.7; }
.card-phone { grid-row: span 2; }
.card-guard { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 26px; align-items: center; }
.card-guard .shield { grid-row: span 2; height: auto; }
.card-guard h3 { margin-top: 0; align-self: end; }
.card-guard p { align-self: start; }
.phone { align-self: center; width: 180px; height: 340px; margin: 10px auto 0; border-radius: 34px; padding: 10px; background: linear-gradient(160deg, #2a3140, #10131a); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 80px -20px rgba(76,141,255,.5); animation: bob 7s ease-in-out infinite; }
.phone-screen { height: 100%; border-radius: 26px; background: #0b0d13; padding: 26px 14px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.ph-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ph-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 10px var(--pos); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .3 } }
.ph-tile { height: 58px; border-radius: 10px; background: linear-gradient(110deg, #161b25 30%, #222a3a 50%, #161b25 70%); background-size: 220% 100%; animation: shimmer 2.2s linear infinite; }
.ph-tile.short { height: 40px; }
@keyframes shimmer { to { background-position: -220% 0 } }
.ph-btn { margin-top: auto; padding: 9px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 700; background: linear-gradient(135deg, #3d7bff, #8b6bff); animation: tap 3s ease-in-out infinite; }
@keyframes tap { 0%, 70%, 100% { transform: scale(1) } 78% { transform: scale(.94); filter: brightness(1.3) } }
.vault { display: flex; gap: 8px; align-items: flex-end; height: 120px; }
.vault span { flex: 1; border-radius: 10px; background: linear-gradient(180deg, rgba(76,141,255,.6), rgba(76,141,255,.08)); animation: stack 3.2s var(--ease) infinite; transform-origin: 50% 100%; }
.vault span:nth-child(2) { animation-delay: .3s; background: linear-gradient(180deg, rgba(139,107,255,.6), rgba(139,107,255,.08)); }
.vault span:nth-child(3) { animation-delay: .6s; background: linear-gradient(180deg, rgba(53,214,198,.55), rgba(53,214,198,.06)); }
@keyframes stack { 0% { transform: scaleY(.2) } 50% { transform: scaleY(1) } 100% { transform: scaleY(.2) } }
.lanes { display: grid; gap: 12px; height: 120px; align-content: center; }
.lanes i { position: relative; height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.lanes i::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--ac), var(--ac2)); animation: lane 2.4s linear infinite; }
.lanes i:nth-child(2)::after { animation-duration: 3.1s; animation-delay: -1s; }
.lanes i:nth-child(3)::after { animation-duration: 1.9s; animation-delay: -.6s; }
.lanes i:nth-child(4)::after { animation-duration: 2.7s; animation-delay: -1.6s; }
@keyframes lane { from { transform: translateX(-100%) } to { transform: translateX(260%) } }
.font-roll { height: 120px; display: flex; align-items: center; gap: 18px; font-size: 54px; font-weight: 800; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.font-roll span { animation: roll 6s linear infinite; color: var(--fg2); }
.font-roll span:nth-child(2) { font-family: Georgia, serif; font-style: italic; color: #9fc0ff; }
.font-roll span:nth-child(3) { font-weight: 300; }
.font-roll span:nth-child(4) { color: #b9a6ff; }
.font-roll span:nth-child(5) { font-family: var(--mono); }
@keyframes roll { 0% { transform: translateX(40px) } 100% { transform: translateX(-60px) } }
.card h3 b { font-weight: 800; }
.one { height: 120px; display: flex; align-items: center; }
.one b { font-size: 108px; line-height: 1; font-weight: 600; background: linear-gradient(160deg, #fff, #6d8dff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 60px rgba(76,141,255,.3); }
.shield { height: 120px; display: flex; align-items: center; color: var(--pos); }
.shield svg { filter: drop-shadow(0 0 18px rgba(125,220,171,.5)); animation: bob 5s ease-in-out infinite; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .card-phone { grid-row: auto; grid-column: span 2; } }
@media (max-width: 620px) { .card-guard { grid-template-columns: 1fr; } .card-guard .shield { grid-row: auto; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .card-phone { grid-column: auto; } }

/* ── 자주 묻는 것 ─────────────────────────────────────── */
.faq { padding: clamp(60px, 8vw, 120px) 0; }
.faq-list { max-width: 1240px; margin: 50px auto 0; padding: 0 var(--gut); display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color .3s, background .3s; }
.faq-list details[open] { border-color: var(--line2); background: #141922; }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; font-size: 17px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--fg3); transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list p { padding: 0 24px 22px; color: var(--fg2); font-size: 15.5px; line-height: 1.8; }
.faq-list a { color: #9fc0ff; text-decoration: underline; text-underline-offset: 3px; }
.faq-list code { font-size: 13px; padding: 1px 6px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line); color: var(--fg); word-break: break-all; }

/* ── 다운로드 ─────────────────────────────────────────── */
.cta { padding: clamp(110px, 14vw, 200px) var(--gut) clamp(90px, 10vw, 140px); text-align: center; overflow: hidden; }
.cta-ring { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), rgba(61,123,255,.0), rgba(61,123,255,.35), rgba(139,107,255,.35), rgba(53,214,198,.25), rgba(61,123,255,.0)); filter: blur(80px); opacity: .7; animation: spin 14s linear infinite; }
.cta h2 { font-size: clamp(44px, 7.6vw, 120px); line-height: 1.02; font-weight: 800; letter-spacing: -.04em; }
.cta-sub { margin-top: 22px; font-size: 19px; color: var(--fg2); }
.dl { margin-top: 40px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .fine { margin-top: 26px; }

/* 설치 안내(맥 한 줄 · 윈도 PC 보호) — 옛 판과 같은 내용 */
.installer { margin: 26px auto 0; padding: 14px 16px 12px; border: 1px solid var(--line2); border-radius: 14px; background: rgba(18,22,30,.8); text-align: left; max-width: 36em; backdrop-filter: blur(10px); }
.installer-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.installer-sub { font-weight: 400; color: var(--fg4); font-size: 12.5px; }
.installer-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.installer-row code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 9px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; color: var(--fg2); }
.copy { flex: none; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel); color: var(--fg); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.copy:hover { border-color: var(--fg4); }
.copy.done { border-color: var(--pos); color: var(--pos); }
.installer-note { margin-top: 9px; font-size: 12.5px; color: var(--fg4); }
.installer-note a { color: var(--fg3); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.winguard-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.winguard-steps p { margin: 6px 0 0; font-size: 12.5px; color: var(--fg3); }
.winguard-shot { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; height: 112px; padding: 10px 11px; border-radius: 8px; background: #1f5fb3; color: #fff; font-size: 11px; overflow: hidden; }
.winguard-shot b { font-size: 12.5px; font-weight: 600; }
.winguard-line { display: block; width: 92%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.winguard-line.short { width: 62%; }
.winguard-link { margin-top: 2px; text-decoration: underline; text-underline-offset: 2px; outline: 2px solid #ffd54a; outline-offset: 2px; border-radius: 3px; }
.winguard-btn { position: absolute; right: 10px; bottom: 9px; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .7); font-size: 10.5px; }
.winguard-btn.hit { right: 86px; background: #fff; color: #1f5fb3; font-weight: 600; outline: 2px solid #ffd54a; outline-offset: 2px; }
@media (max-width: 520px) { .winguard-steps { grid-template-columns: 1fr; } }

/* ── 바닥 ─────────────────────────────────────────────── */
.foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 34px var(--gut) 44px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg4); }
.foot a:hover { color: var(--fg2); }

/* 움직임을 줄인 사람에게는 멈춘 그림으로 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-rise], [data-split] .line > .w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ask-text .w { color: var(--fg) !important; }
  .grain, .cursor-glow { display: none; }
}