/* ============================================================
   WRAPLY 랩리 — 모바일웹 → Google Play 하이브리드(WebView) 앱
   제안용 데모 · 정적

   [A. 도메인 레퍼런스] 실측 (2026.08)
     Median.co  — 웹→앱 컨버터(직접 경쟁) · 배경 #0c0c0c · DM Sans
                  히어로 96px w400 ls −6.72px(−0.07em) lh1.0 · IA: App Store
                  Approval · One Codebase in Sync · Secure by Design · Push
     Firebase   — FCM/HTTP v1 콘솔 문서 (도메인 실무)
   [B. 디자인 레퍼런스] 실측 (제품 벤치마크 · 수상 미확인 → 갤러리로 표기)
     Linear.app — 배경 #08090a · Inter 510 · h1 64px ls −1.408px(−0.022em)
                  보조 #8a8f98 · 버튼 pill(9999) 화이트 h32
     Vercel.com — Geist · h1 64px w400 ls −3.84px(−0.06em) · radius 4px · 정밀 기하
   → 다크 개발자툴 시스템: 근-흑 배경, 큰 음자간 디스플레이, 뮤트 그레이 보조,
     단일 그린 액센트(안드로이드 연상, 로고색 미사용) + 시안(푸시)
   ============================================================ */

:root{
  --bg:#0A0C0E;
  --bg-2:#0E1116;
  --surface:#12161C;
  --surface-2:#171C24;
  --ink:#F3F5F6;
  --ink-2:#AEB4BC;
  --muted:#7E858F;            /* Linear #8a8f98 계열 */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.055);
  --grn:#3DDC84;              /* 액센트 그린(안드로이드 연상·로고 아님) */
  --grn-2:#2BBE6E;
  --grn-soft:rgba(61,220,132,.12);
  --cyan:#4CC9F0;            /* 푸시 */
  --cyan-soft:rgba(76,201,240,.12);
  --amber:#FFB454;
  --red:#FF6B6B;
  --red-soft:rgba(255,107,107,.12);
  --r-6:6px; --r-10:10px; --r-14:14px; --r-20:20px; --r-99:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1200px;
  --font:'Pretendard Variable',Pretendard,Inter,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  --mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 78% -8%,rgba(61,220,132,.07),transparent 60%),
                   radial-gradient(900px 500px at 12% 4%,rgba(76,201,240,.05),transparent 55%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--grn);color:#04140b}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* 리빌 · 텍스트 애니 */
.g-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.g-reveal.is-visible{opacity:1;transform:none}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(112%);transition:transform .95s var(--ease)}
.mask.is-visible>span{transform:none}
.mask.d1>span{transition-delay:.08s}.mask.d2>span{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.g-reveal,.mask>span{opacity:1;transform:none;transition:none}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grn)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--grn);opacity:.7}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-99);font-size:14.5px;font-weight:700;transition:.16s var(--ease);white-space:nowrap}
.btn-p{background:var(--grn);color:#04140b}
.btn-p:hover{background:#57e895;transform:translateY(-1px)}
.btn-g{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-g:hover{border-color:var(--grn);color:var(--grn)}
.btn-sm{height:36px;padding:0 14px;font-size:13px}

/* ============================================================ 헤더 */
.hd{position:sticky;top:0;z-index:80;background:rgba(10,12,14,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.hd-in{display:flex;align-items:center;gap:20px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:18px}
.logo .mk{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--grn),var(--cyan));color:#04140b;font-size:15px;font-weight:900}
.logo small{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.hd-nav{display:flex;gap:4px;margin-left:8px}
.hd-nav a{padding:8px 12px;border-radius:var(--r-10);font-size:14px;color:var(--ink-2);transition:.15s}
.hd-nav a:hover{color:var(--ink);background:var(--surface)}
.hd-r{margin-left:auto;display:flex;gap:10px;align-items:center}
@media (max-width:820px){.hd-nav{display:none}}

/* ============================================================ 히어로 */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(36px,5vw,64px);position:relative}
.hero-grid{display:grid;grid-template-columns:1fr minmax(300px,384px);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin:20px 0 0}
.hero h1 .accent{color:var(--grn)}
.hero-sub{margin-top:22px;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.7;color:var(--ink-2);max-width:46ch}
.hero-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.hero-meta b{color:var(--ink);font-weight:700}
.hero-meta .mono{color:var(--grn)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-phone{margin:0 auto}}

/* ============================================================ 폰 프레임 (핵심 인터랙티브) */
.phone{width:300px;max-width:100%;border-radius:38px;background:#05070a;border:1px solid var(--line);padding:10px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03) inset;position:relative}
.phone-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:110px;height:22px;background:#05070a;border-radius:99px;z-index:6}
.phone-scr{position:relative;border-radius:29px;overflow:hidden;background:#0b0f14;aspect-ratio:9/19;display:flex;flex-direction:column}
/* 앱 상태바 */
.app-bar{display:flex;align-items:center;gap:8px;padding:9px 14px 8px;background:var(--surface);border-bottom:1px solid var(--line-2);font-size:11px;color:var(--muted);flex-shrink:0;position:relative;z-index:4}
.app-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn)}
.app-bar .url{flex:1;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-bar .lock{color:var(--grn)}
/* 웹 콘텐츠(모바일웹 시뮬) */
.webview{flex:1;overflow:hidden auto;position:relative;background:#0b0f14}
.web-page{padding:16px 14px 78px;transition:opacity .3s}
.wp-hd{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:3px}
.wp-sub{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.wp-card{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:12px;margin-bottom:10px}
.wp-card h4{font-size:13px;font-weight:700;margin-bottom:4px}
.wp-card p{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.wp-row{display:flex;gap:8px;margin-bottom:10px}
.wp-btn{flex:1;height:40px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.wp-btn:hover{border-color:var(--grn);color:var(--grn)}
.wp-btn.g{background:var(--grn);color:#04140b;border-color:var(--grn)}
.wp-login{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:9px 11px;border-radius:10px;background:var(--grn-soft);border:1px solid rgba(61,220,132,.25);color:var(--grn);font-weight:600}
.wp-login.out{background:var(--red-soft);border-color:rgba(255,107,107,.25);color:var(--red)}
.wp-file{margin-top:8px;font-size:11px;color:var(--muted);font-family:var(--mono)}
/* 하단 탭바(네이티브 셸) */
.app-tabbar{position:absolute;bottom:0;left:0;right:0;height:58px;background:rgba(18,22,28,.95);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;z-index:5}
.app-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9.5px;color:var(--muted);transition:.15s}
.app-tab .i{font-size:17px;line-height:1}
.app-tab.on{color:var(--grn)}
/* 오프라인/로딩 오버레이 */
.app-overlay{position:absolute;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;background:#0b0f14}
.app-overlay.show{display:flex}
.app-overlay .ico{font-size:36px}
.app-overlay h4{font-size:15px;font-weight:700}
.app-overlay p{font-size:12px;color:var(--muted);max-width:22ch;line-height:1.6}
.app-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--grn);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 푸시 배너 (폰 상단 슬라이드인) */
.push-banner{position:absolute;top:10px;left:10px;right:10px;z-index:9;background:rgba(23,28,36,.98);border:1px solid var(--line);border-radius:14px;padding:11px 12px;display:flex;gap:10px;align-items:flex-start;transform:translateY(-140%);opacity:0;transition:transform .5s var(--ease),opacity .5s;box-shadow:0 20px 40px -12px rgba(0,0,0,.7);cursor:pointer}
.push-banner.show{transform:none;opacity:1}
.push-banner .pi{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--grn),var(--cyan));display:grid;place-items:center;font-size:15px;flex-shrink:0}
.push-banner .pt{flex:1;min-width:0}
.push-banner .pt b{font-size:12px;display:block}
.push-banner .pt span{font-size:11px;color:var(--ink-2);display:block;line-height:1.45;margin-top:1px}
.push-banner .pw{font-size:9px;color:var(--muted);font-family:var(--mono);white-space:nowrap}
/* 파일 시트 */
.app-sheet{position:absolute;left:0;right:0;bottom:0;z-index:10;background:var(--surface-2);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:16px 16px 20px;transform:translateY(110%);transition:transform .4s var(--ease)}
.app-sheet.show{transform:none}
.app-sheet h5{font-size:13px;font-weight:700;margin-bottom:12px;text-align:center}
.sheet-opt{display:flex;align-items:center;gap:11px;padding:12px;border-radius:11px;background:var(--surface);border:1px solid var(--line-2);margin-bottom:8px;font-size:13px;font-weight:600;transition:.15s}
.sheet-opt:hover{border-color:var(--grn)}
.sheet-opt .si{font-size:18px}
.sheet-cancel{width:100%;height:40px;margin-top:4px;border-radius:11px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}

/* 폰 외부 컨트롤 패널 */
.phone-ctl{margin-top:18px;display:grid;gap:8px}
.ctl-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ctl{height:34px;padding:0 13px;border-radius:var(--r-99);border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.15s;display:inline-flex;align-items:center;gap:6px}
.ctl:hover{border-color:var(--grn);color:var(--grn)}
.ctl.on{background:var(--grn-soft);border-color:rgba(61,220,132,.4);color:var(--grn)}
.ctl.warn:hover{border-color:var(--red);color:var(--red)}

/* ============================================================ 섹션 공통 */
.sec{padding:clamp(56px,8vw,110px) 0;position:relative}
.sec-head{max-width:720px;margin-bottom:clamp(30px,4vw,52px)}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:14px}
.sec-head p{margin-top:16px;font-size:clamp(1rem,1.3vw,1.1rem);color:var(--ink-2);line-height:1.7}

/* ② 풀블리드 이미지 statement */
.gbleed{width:100vw;margin-left:calc(50% - 50vw)}
.statement{position:relative;min-height:66vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#05080b}
.statement-bg{position:absolute;inset:-14% 0;z-index:0}
.statement-bg img{width:100%;height:100%;object-fit:cover;opacity:.72;will-change:transform}
.statement-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,12,14,.96) 3%,rgba(10,12,14,.5) 46%,rgba(10,12,14,.7))}
.statement-in{position:relative;z-index:2;padding-block:clamp(56px,9vh,120px)}
.statement h2{font-size:clamp(2rem,5.2vw,3.7rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;max-width:19ch}
.statement h2 .accent{color:var(--grn)}
.statement p{margin-top:20px;max-width:52ch;font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.75;color:var(--ink-2)}

/* ① 마우스 반응 카드 */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px);perspective:1200px}
.pillar{position:relative;aspect-ratio:3/4.1;border-radius:var(--r-20);overflow:hidden;background:#05080b;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);transform-style:preserve-3d}
.pillar.tilting{transition:transform .08s linear}
.pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transform:scale(1.05);transition:transform .6s var(--ease),opacity .4s}
.pillar:hover img{transform:scale(1.12);opacity:.78}
.pillar::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,11,.95) 5%,rgba(5,8,11,.15) 58%,transparent);z-index:1}
.pillar-spot{position:absolute;inset:0;z-index:2;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(61,220,132,.28),transparent 60%);opacity:0;transition:opacity .3s;mix-blend-mode:screen;pointer-events:none}
.pillar:hover .pillar-spot{opacity:1}
.pillar-body{position:absolute;inset:auto 0 0 0;z-index:3;padding:clamp(15px,1.7vw,22px);transform:translateZ(38px)}
.pillar-body .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--grn);letter-spacing:.04em}
.pillar-body h3{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:800;margin:7px 0 6px;letter-spacing:-.01em}
.pillar-body p{font-size:12px;color:var(--ink-2);line-height:1.6;opacity:0;max-height:0;overflow:hidden;transition:opacity .35s,max-height .35s}
.pillar:hover .pillar-body p{opacity:1;max-height:120px}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pillars{grid-template-columns:1fr}}

/* ============================================================ 진단 도구 공통 */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-20);padding:clamp(20px,2.6vw,30px)}
.tool-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(16px,2vw,26px);align-items:start}
@media (max-width:860px){.tool-grid{grid-template-columns:1fr}}
.chk{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:var(--r-14);border:1px solid var(--line-2);background:var(--bg-2);margin-bottom:9px;cursor:pointer;transition:.16s}
.chk:hover{border-color:var(--line)}
.chk .box{flex-shrink:0;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--muted);display:grid;place-items:center;font-size:13px;color:transparent;transition:.15s;margin-top:1px}
.chk.on .box{background:var(--grn);border-color:var(--grn);color:#04140b}
.chk .txt b{font-size:13.5px;font-weight:700;display:block}
.chk .txt span{font-size:12px;color:var(--muted);line-height:1.55;display:block;margin-top:2px}
.chk.req .tag{display:inline-block;font-size:9.5px;font-weight:800;font-family:var(--mono);color:var(--amber);background:rgba(255,180,84,.12);padding:1px 6px;border-radius:5px;margin-left:6px;vertical-align:1px}
/* 게이지 */
.gauge{text-align:center;padding:10px 0 4px}
.gauge-ring{--v:0;width:150px;height:150px;margin:0 auto;border-radius:50%;background:conic-gradient(var(--gc,var(--grn)) calc(var(--v)*1%),var(--line-2) 0);display:grid;place-items:center;position:relative;transition:--v .6s var(--ease)}
.gauge-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--surface)}
.gauge-val{position:relative;font-family:var(--mono);font-size:34px;font-weight:800;line-height:1}
.gauge-val small{font-size:14px;color:var(--muted)}
.gauge-label{position:relative;font-size:11px;color:var(--muted);margin-top:3px}
.verdict{margin-top:16px;padding:13px 15px;border-radius:var(--r-14);font-size:13px;line-height:1.6;border:1px solid var(--line)}
.verdict.pass{background:var(--grn-soft);border-color:rgba(61,220,132,.3);color:#a7f0c8}
.verdict.risk{background:rgba(255,180,84,.1);border-color:rgba(255,180,84,.3);color:#ffce90}
.verdict.fail{background:var(--red-soft);border-color:rgba(255,107,107,.3);color:#ffb0b0}
.verdict b{font-weight:800}

/* FCM 진단 세그먼트 */
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-99);padding:3px;margin-bottom:16px}
.seg button{padding:8px 16px;border-radius:var(--r-99);font-size:13px;font-weight:700;color:var(--ink-2);transition:.15s}
.seg button.on{background:var(--surface-2);color:var(--ink)}
.fcm-panel{display:none}.fcm-panel.on{display:block}
.codebox{background:#05070a;border:1px solid var(--line);border-radius:var(--r-14);padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.75;overflow-x:auto;color:var(--ink-2)}
.codebox .k{color:var(--cyan)}.codebox .s{color:var(--grn)}.codebox .c{color:var(--muted)}.codebox .del{color:var(--red);text-decoration:line-through}
.steps{counter-reset:s;margin-top:8px}
.step{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:0}
.step .sn{counter-increment:s;flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--grn-soft);color:var(--grn);font-family:var(--mono);font-size:12px;font-weight:800;display:grid;place-items:center}
.step .sn::before{content:counter(s)}
.step p{font-size:13px;color:var(--ink-2);line-height:1.6}
.step p b{color:var(--ink)}

/* ============================================================ 리스크 검토 */
.risks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:820px){.risks{grid-template-columns:1fr}}
.risk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-20);padding:22px;position:relative;overflow:hidden;transition:.2s}
.risk:hover{border-color:var(--line);transform:translateY(-2px)}
.risk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lvc,var(--grn))}
.risk .lv{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--lvc,var(--grn))}
.risk h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:10px 0 8px;line-height:1.35}
.risk .d{font-size:13px;color:var(--ink-2);line-height:1.7}
.risk .d b{color:var(--ink);font-weight:700}
.risk .fix{margin-top:12px;padding:11px 13px;border-radius:var(--r-10);background:var(--grn-soft);border:1px solid rgba(61,220,132,.2);font-size:12.5px;color:#a7f0c8;line-height:1.65}
.risk .fix b{color:var(--grn);font-weight:800}
.risk .src{margin-top:9px;font-size:11px;color:var(--muted);font-family:var(--mono);line-height:1.5;word-break:break-all}
.risk[data-lv=high]{--lvc:var(--red)}
.risk[data-lv=mid]{--lvc:var(--amber)}
.risk[data-lv=ok]{--lvc:var(--grn)}

/* ============================================================ 견적 */
.quote{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(16px,2vw,28px);align-items:start}
@media (max-width:860px){.quote{grid-template-columns:1fr}}
.q-table{width:100%;border-collapse:collapse;font-size:13.5px}
.q-table th,.q-table td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line-2)}
.q-table th{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.q-table td.d{text-align:right;font-family:var(--mono);color:var(--ink-2)}
.q-table tr.tot td{border-top:1px solid var(--line);border-bottom:0;font-weight:800;color:var(--ink);padding-top:14px}
.q-table tr.tot td.d{color:var(--grn);font-size:16px}
.q-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-20);padding:24px}
.q-card .big{font-family:var(--mono);font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--grn)}
.q-card .big small{font-size:15px;color:var(--muted);font-weight:600}
.q-card ul{list-style:none;margin:16px 0 0;display:grid;gap:9px}
.q-card li{font-size:12.5px;color:var(--ink-2);line-height:1.55;padding-left:20px;position:relative}
.q-card li::before{content:"→";position:absolute;left:0;color:var(--grn)}
.q-note{margin-top:14px;font-size:11.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line-2);padding-top:12px}

/* 토스트 */
.toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:grid;gap:8px;width:min(440px,calc(100vw - 32px))}
.toast{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-14);padding:12px 15px;font-size:13px;line-height:1.55;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);animation:tin .3s var(--ease)}
.toast b{color:var(--grn)}
.toast.warn{border-color:rgba(255,180,84,.4)}.toast.warn b{color:var(--amber)}
.toast.err{border-color:rgba(255,107,107,.4)}.toast.err b{color:var(--red)}
@keyframes tin{from{opacity:0;transform:translateY(12px)}}

/* 푸터 */
.ft{border-top:1px solid var(--line);padding:44px 0 60px;margin-top:40px}
.ft-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.ft p{font-size:12.5px;color:var(--muted);line-height:1.7;max-width:44ch}
.ft .demo-tag{display:inline-block;margin-bottom:10px;font-family:var(--mono);font-size:11px;color:var(--grn);border:1px solid rgba(61,220,132,.3);border-radius:var(--r-99);padding:4px 11px}

/* 유틸 */
.stat-row{display:flex;gap:clamp(16px,3vw,44px);flex-wrap:wrap;margin-top:8px}
.stat .v{font-family:var(--mono);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em}
.stat .v .u{font-size:.5em;color:var(--muted);margin-left:2px}
.stat .l{font-size:12px;color:var(--muted);margin-top:2px}
.stat .v.grn{color:var(--grn)}.stat .v.cyan{color:var(--cyan)}.stat .v.red{color:var(--red)}

/* 기능형 피처 그리드 (이미지·틸트 없는 플랫폼형 섹션) */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-14);padding:20px;transition:.18s var(--ease)}
.feat:hover{border-color:rgba(61,220,132,.4);transform:translateY(-2px)}
.feat .fi{font-size:22px;line-height:1}
.feat .fn{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--grn);margin:12px 0 6px}
.feat h3{font-size:16px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px}
.feat p{font-size:12.5px;color:var(--ink-2);line-height:1.65}
@media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}