/* FlameLauncher — 공용 스타일
 *
 * 색은 앱에서 그대로 가져온다 (iOS Theme.swift · Android Color.kt).
 * 사이트만 다른 팔레트를 쓰면 같은 제품으로 안 보인다 —
 * 예전에는 보라·주황이었는데 앱은 처음부터 블루 플레임이었다.
 */
:root{
  /* 배경 · 표면 */
  --bg:#05080F;          /* bgDark   가장 어두운 배경 (푸른 검정) */
  --surface:#0B1422;     /* bgSurface 카드 */
  --item:#08101B;        /* bgItem   리스트 아이템 */
  --line:#1C2E47;        /* bgBorder 테두리 */
  --line2:#27405F;       /* 테두리 강조 */

  /* 글자 */
  --fg:#E8F2FF;          /* textMain 쿨 화이트 */
  --dim:#8CA2C0;         /* textSub  쿨 그레이 */
  --dim2:#6D7F96;        /* tagOld   더 흐린 보조 */

  /* 포인트 */
  --primary:#2E9BFF;     /* 메인 플레임 (핫 블루) */
  --light:#7CC9FF;       /* 라이트 플레임 */
  --deep:#0B4A8F;        /* 다크 플레임 */
  --accent:#22E0FF;      /* 액센트 (시안 — 불꽃 심지) */

  --ok:#3DD68C;
  --no:#FF5F7E;
  --warn:#2A1424;

  --max:1080px;
  --ease:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR","Noto Sans JP",Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--light);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

/* ── nav ─────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);
    background:rgba(5,8,15,.82);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.01em;
  font-size:16px;margin-right:auto;color:var(--fg)}
.brand:hover{text-decoration:none}
.brand img{width:22px;height:22px}
.navlinks{display:flex;gap:18px;font-size:14px;color:var(--dim)}
.navlinks a{color:var(--dim)}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--fg);text-decoration:none}
.langs{display:flex;gap:6px}
.langs button{background:transparent;border:1px solid var(--line);color:var(--dim);
  padding:5px 11px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;
  transition:.2s var(--ease)}
.langs button:hover{color:var(--fg);border-color:var(--line2)}
.langs button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#03121F;font-weight:700}
#bar{position:fixed;top:0;left:0;height:2px;z-index:60;width:0;
  background:var(--primary);transition:width .1s linear}
@media(max-width:720px){.navlinks{display:none}}

/* ── sections ────────────────────────────────── */
/* ⚠️ 전체 화면 슬라이드(scroll-snap + 100vh)를 걷어냈다. 발표 자료처럼 보여서
 *    내용이 적어 보이고, 스크롤이 마디마다 걸려 읽기가 불편했다. */
.slide{position:relative;padding:86px 0;border-top:1px solid var(--line)}
.slide:first-of-type{border-top:none}
.slide > .wrap{width:100%}
.kicker{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary);padding:0;margin-bottom:14px;font-weight:700}
h1{font-size:clamp(38px,7vw,68px);margin:14px 0 0;letter-spacing:-.035em;font-weight:800;line-height:1.05}
h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.022em;margin:0 0 10px;line-height:1.2;font-weight:700}
h3{margin:0 0 6px;font-size:16px;font-weight:700}
.lead{color:var(--dim);margin:0 0 30px;max-width:640px;font-size:16px}

/* 오른쪽 점 네비 */
.dots{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:10px}
.dots a{width:6px;height:6px;border-radius:50%;background:var(--line2);transition:.25s var(--ease)}
.dots a:hover{background:var(--dim)}
.dots a.on{background:var(--primary);height:16px;border-radius:999px}
@media(max-width:980px){.dots{display:none}}

/* ── hero ────────────────────────────────────── */
/* ⚠️ 여기 있던 연출을 전부 뺐다 — 숨쉬는 글로우, 흔들리는 이모지, 떠오르는 불티,
 *    그라데이션이 흐르는 제목, 까딱이는 "스크롤 ↓". 전부 내용과 무관하고
 *    어느 랜딩 페이지에나 붙어 있는 장식이라 제품이 뭔지 가렸다. */
.hero{padding:132px 0 96px;text-align:left}
.logo{width:64px;height:64px}
/* ⚠️ 가운데 정렬 섹션에서 `text-align:center` 는 **블록 요소를 가운데로 옮기지 않는다**.
   전역 `img{display:block}` 때문에 로고가, `.cta{display:flex}` 때문에 버튼들이
   섹션은 가운데인데 저 혼자 왼쪽에 붙어 있었다. 둘 다 따로 가운데로 보낸다. */
#get .logo{margin-inline:auto}
#get .cta{justify-content:center}
.hero h1{max-width:12ch}
.tag{font-size:17px;color:var(--dim);margin:18px 0 0;max-width:620px}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.badge{border:1px solid var(--line);background:var(--item);color:var(--dim);padding:4px 11px;
  border-radius:7px;font-size:12.5px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.btn{padding:11px 22px;border-radius:9px;font-weight:650;font-size:14.5px;border:1px solid var(--line);
  transition:.2s var(--ease);display:inline-block}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--primary);color:#03121F;border-color:var(--primary)}
.btn.primary:hover{background:var(--light);border-color:var(--light)}
.btn.ghost{background:var(--item);color:var(--fg)}
.btn.ghost:hover{border-color:var(--line2)}

/* ── reveal ──────────────────────────────────── */
/* 남겨 두되 조용하게. 30px 이 아니라 10px, 0.75s 가 아니라 0.4s. */
.rv{opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rv.left,.rv.zoom{transform:translateY(10px)}

/* ── cards / grid ────────────────────────────── */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;
  transition:border-color .2s var(--ease)}
.card:hover{border-color:var(--line2)}
.card p{margin:0;color:var(--dim);font-size:14.5px}
.ico{font-size:22px;display:block;margin-bottom:10px}
.card .num{display:none}

/* stats */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px}
.stat b{display:block;font-size:32px;font-weight:750;letter-spacing:-.02em;color:var(--primary);line-height:1.1}
.stat span{color:var(--dim);font-size:13.5px}

/* flow */
ol.flow{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:7px}
ol.flow li{counter-increment:s;position:relative;padding:12px 16px 12px 50px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;font-size:14.5px}
ol.flow li::before{content:counter(s);position:absolute;left:14px;top:12px;width:24px;height:24px;
  display:grid;place-items:center;border-radius:7px;font-size:12.5px;font-weight:700;
  background:var(--item);border:1px solid var(--line2);color:var(--primary)}

/* table */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{background:var(--item);color:var(--dim);font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
.tbl tr:last-child td{border-bottom:none}

/* lists */
.list{margin:0;padding:0;list-style:none}
.list li{padding:8px 0 8px 24px;position:relative;color:var(--dim);font-size:14.5px;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:none}
.yes li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.no li::before{content:"✕";position:absolute;left:0;color:var(--no);font-weight:700}
.warn{background:var(--item);border:1px solid var(--line);border-left:2px solid var(--primary);
  border-radius:0 10px 10px 0;padding:15px 18px;color:var(--dim);font-size:14.5px;margin-top:20px}

/* ── mod marquee ─────────────────────────────── */
.marquee{position:relative;overflow:hidden;margin:6px 0 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee .track{display:flex;gap:12px;width:max-content;animation:mar 48s linear infinite}
.marquee.rev .track{animation-direction:reverse;animation-duration:58s}
.marquee:hover .track{animation-play-state:paused}
@keyframes mar{to{transform:translateX(-50%)}}
.chip{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px 8px 8px;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--fg)}
.chip:hover{text-decoration:none;border-color:var(--line2)}
.chip img{width:30px;height:30px;border-radius:6px;flex:none;background:var(--item)}

/* ── mods page ───────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.filters button{background:var(--item);border:1px solid var(--line);color:var(--dim);padding:7px 14px;
  border-radius:8px;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.2s var(--ease)}
.filters button:hover{color:var(--fg);border-color:var(--line2)}
.filters button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#03121F;font-weight:700}
.mods{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.mod{display:grid;grid-template-columns:46px 1fr;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:15px;transition:border-color .2s var(--ease);align-items:start}
.mod:hover{border-color:var(--line2)}
.mod.off{display:none}
.mod img{width:46px;height:46px;border-radius:9px;background:var(--item);object-fit:cover}
.mod h3{font-size:15px;margin:0 0 3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mod p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.55}
.mod .meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px;font-size:11.5px;color:var(--dim2)}
.mod .meta span{border:1px solid var(--line);border-radius:5px;padding:2px 7px}
.pill{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;flex:none}
.pill.must{background:rgba(46,155,255,.14);color:var(--light);border:1px solid rgba(46,155,255,.32)}
.pill.good{background:rgba(61,214,140,.12);color:var(--ok);border:1px solid rgba(61,214,140,.3)}
.pill.care{background:rgba(124,201,255,.12);color:var(--light);border:1px solid rgba(124,201,255,.3)}
.pill.bad{background:rgba(255,95,126,.12);color:var(--no);border:1px solid rgba(255,95,126,.3)}
.mod.blocked{opacity:.65}
.mod.blocked img{filter:grayscale(1)}
.sec{padding:64px 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none;padding-top:112px}

footer{padding:40px 0 60px;border-top:1px solid var(--line);color:var(--dim2);font-size:13px}
footer .wrap{display:grid;gap:8px}
footer a{color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}