/* Swapback 소개 사이트 — 검은 바탕, 넓은 여백, 짧은 글 */
:root{
  --bg:#09090d; --bg-2:#111118; --line:rgba(255,255,255,.08);
  --ink:#f4f4f7; --ink-soft:#a0a0ad; --ink-dim:#6b6b78;
  --accent:#6366f1; --accent-2:#8b5cf6;
  --r-lg:22px; --r-md:16px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* 상단 */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.4) blur(16px); -webkit-backdrop-filter:saturate(1.4) blur(16px);
  background:rgba(9,9,13,.72); border-bottom:1px solid var(--line); }
.nav__in{ height:60px; display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:-.01em; }
.brand img{ width:28px; height:28px; border-radius:7px; }
.nav__links{ display:flex; gap:22px; margin-left:auto; font-size:14px; color:var(--ink-soft); }
.nav__links a{ text-decoration:none; }
.nav__links a:hover{ color:var(--ink); }
.lang{ white-space:nowrap; background:none; border:1px solid var(--line); color:var(--ink-soft); border-radius:999px; padding:5px 11px;
  font:600 12px/1 inherit; cursor:pointer; }
.lang:hover{ color:var(--ink); border-color:rgba(255,255,255,.2); }
.btn{ white-space:nowrap; display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:12px 20px; font-weight:700; font-size:15px;
  text-decoration:none; border:1px solid transparent; transition:transform .15s, background .15s; }
.btn:hover{ transform:translateY(-1px); }
.btn--light{ background:#fff; color:#0b0b10; }
.btn--ghost{ background:rgba(255,255,255,.06); border-color:var(--line); color:var(--ink); }
.btn--sm{ padding:8px 14px; font-size:13px; }
.btn svg{ width:18px; height:18px; }

/* 첫 화면 */
.hero{ text-align:center; padding:96px 20px 40px; position:relative; }
.hero::before{ content:""; position:absolute; inset:-120px 0 auto; height:520px; z-index:-1;
  background:radial-gradient(600px 300px at 50% 30%, rgba(99,102,241,.28), transparent 70%); }
.hero h1{ font-size:clamp(36px,6.4vw,64px); line-height:1.12; letter-spacing:-.035em; margin:0 0 18px; font-weight:800; }
.hero p.sub{ font-size:clamp(16px,2vw,19px); color:var(--ink-soft); max-width:600px; margin:0 auto 30px; }
.hero__btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero small{ display:block; margin-top:16px; color:var(--ink-dim); font-size:13px; }

/* 데모 */
.demo-sec{ padding:30px 20px 90px; }
.mac{ position:relative; max-width:1000px; margin:0 auto; aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 120px -40px rgba(99,102,241,.45), 0 20px 60px rgba(0,0,0,.6);
  background:radial-gradient(700px 400px at 20% 20%, #2b2560, transparent 60%), radial-gradient(600px 400px at 85% 90%, #4a1f3f, transparent 60%), #14131c;
  font-size:clamp(9px,1.25vw,13px); user-select:none; }
.mac__bar{ position:absolute; inset:0 0 auto; height:2.1em; display:flex; align-items:center; gap:1.4em; padding:0 1.2em;
  background:rgba(20,20,28,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#e8e8ee; font-weight:600; z-index:30; }
.mac__bar .apple{ width:1.1em; height:1.1em; }
.mac__bar .right{ margin-left:auto; display:flex; gap:1.2em; align-items:center; font-weight:500; }
.sb-pill{ display:flex; align-items:center; gap:.4em; background:rgba(99,102,241,.35); border:1px solid rgba(139,140,255,.5);
  padding:.15em .6em; border-radius:.5em; font-weight:700; }
.sb-pill img{ width:1.2em; height:1.2em; border-radius:.25em; }

.win{ position:absolute; border-radius:.9em; background:#1d1d26; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 1.5em 4em rgba(0,0,0,.55); overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s, filter .35s; }
.win.back{ transform:scale(.94) translateY(1.2em); filter:brightness(.55); }
.win__bar{ height:2.3em; display:flex; align-items:center; gap:.45em; padding:0 .9em; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.06); font-size:.95em; color:#c9c9d3; }
.dot{ width:.8em; height:.8em; border-radius:50%; }
.dot.r{ background:#ff5f57; } .dot.y{ background:#febc2e; } .dot.g{ background:#28c840; }
.win__title{ margin-left:.6em; font-weight:600; }
.win__body{ padding:1.4em; }
.line{ height:.7em; border-radius:.35em; background:rgba(255,255,255,.1); margin:0 0 .9em; }
.typed{ font-size:1.15em; color:#e9e9f0; min-height:1.6em; }
.caret{ display:inline-block; width:2px; height:1.1em; background:#8b8cff; vertical-align:-.15em; margin-left:2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.tabs{ display:flex; gap:.5em; margin-bottom:1em; }
.tab{ flex:1; height:1.9em; border-radius:.5em; background:rgba(255,255,255,.07); display:flex; align-items:center; padding:0 .7em;
  font-size:.9em; color:#b9b9c6; white-space:nowrap; overflow:hidden; }
.tab.on{ background:rgba(99,102,241,.45); color:#fff; }
.page{ height:9em; border-radius:.6em; background:rgba(255,255,255,.05); }

/* ⌥ 다이얼 */
.dial{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%) scale(.92); opacity:0; pointer-events:none; z-index:40;
  width:26em; padding:1.4em; border-radius:1.6em; background:rgba(28,28,38,.82); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.14); transition:opacity .18s, transform .18s; }
.dial.show{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.dial__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6em; }
.cell{ border-radius:1em; padding:.9em .4em .7em; text-align:center; color:#dcdce6; cursor:pointer; font-size:.95em; border:0; background:none; font-family:inherit; }
.cell:hover,.cell.sel{ background:rgba(99,102,241,.32); }
.cell .ico{ width:3.2em; height:3.2em; border-radius:.8em; margin:0 auto .45em; display:grid; place-items:center; font-size:1.6em; }
.cell .ico span{ font-size:.85em; }
.cell kbd{ display:block; font:600 .8em/1.2 inherit; color:#9b9bab; margin-top:.15em; }
.dial__hint{ text-align:center; color:#9b9bab; font-size:.85em; margin-top:.9em; }

/* ⌥0 검색 */
.palette{ position:absolute; left:50%; top:30%; width:30em; transform:translateX(-50%) translateY(-.6em); opacity:0; pointer-events:none; z-index:40;
  transition:opacity .18s, transform .18s; }
.palette.show{ opacity:1; transform:translateX(-50%); pointer-events:auto; }
.palette__in{ background:rgba(230,230,240,.92); color:#1a1a22; border-radius:1.4em; height:3.2em; display:flex; align-items:center; padding:0 1.2em; font-size:1.15em; font-weight:600; }
.palette__list{ margin-top:.6em; background:rgba(30,30,40,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12); border-radius:1em; padding:.4em; }
.row{ display:flex; align-items:center; gap:.7em; padding:.6em .8em; border-radius:.6em; color:#dcdce6; font-size:.95em; }
.row.sel{ background:var(--accent); color:#fff; }
.row .fav{ width:1.4em; height:1.4em; border-radius:.35em; display:grid; place-items:center; font-size:.75em; font-weight:800; color:#fff; }
.row .url{ margin-left:auto; color:#9b9bab; font-size:.9em; }
.row.sel .url{ color:#e5e5ff; }

/* 키 안내 */
.keytoast{ position:absolute; left:50%; bottom:1.6em; transform:translateX(-50%) translateY(.6em); opacity:0; z-index:45;
  background:rgba(99,102,241,.92); color:#fff; font-weight:800; padding:.5em 1em; border-radius:.8em; font-size:1.2em; transition:opacity .2s, transform .2s; }
.keytoast.show{ opacity:1; transform:translateX(-50%); }
.tries{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:22px auto 0; max-width:1000px; }
.try{ background:var(--bg-2); border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:10px 16px; font:600 14px/1 inherit;
  cursor:pointer; display:flex; gap:8px; align-items:center; touch-action:none; -webkit-user-select:none; user-select:none; }
.try kbd{ background:rgba(99,102,241,.25); border:1px solid rgba(139,140,255,.4); border-radius:6px; padding:3px 7px; font:700 13px/1 inherit; }
.try:hover{ border-color:rgba(139,140,255,.5); }
.try.on{ border-color:var(--accent); background:rgba(99,102,241,.15); }
.demo-note{ text-align:center; color:var(--ink-dim); font-size:13px; margin-top:12px; }

/* 기능 */
.sec{ padding:90px 0; border-top:1px solid var(--line); }
.sec__head{ text-align:center; max-width:640px; margin:0 auto 54px; }
.sec__head h2{ font-size:clamp(28px,4.4vw,42px); letter-spacing:-.03em; line-height:1.2; margin:0 0 12px; }
.sec__head p{ color:var(--ink-soft); margin:0; font-size:17px; }
.feat{ display:grid; grid-template-columns:1fr 1.35fr; gap:48px; align-items:center; margin:0 0 72px; }
.feat:nth-child(even){ grid-template-columns:1.35fr 1fr; }
.feat:nth-child(even) .feat__txt{ order:2; }
.feat__txt h3{ font-size:clamp(22px,3vw,28px); letter-spacing:-.02em; margin:0 0 10px; line-height:1.3; }
.feat__txt p{ color:var(--ink-soft); margin:0; font-size:16px; }
.feat__txt kbd{ background:rgba(99,102,241,.2); border:1px solid rgba(139,140,255,.35); border-radius:6px; padding:1px 6px; font:600 .9em/1.4 inherit; color:#d7d7ff; }
.feat__img{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }

/* 신뢰 */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.stat{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:28px 24px; }
.stat b{ display:block; font-size:clamp(28px,4vw,40px); letter-spacing:-.03em; line-height:1.1; margin-bottom:8px;
  background:linear-gradient(90deg,#fff,#b9b9ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ color:var(--ink-soft); font-size:15px; }

/* 질문 */
.faq{ max-width:760px; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--line); padding:18px 4px; }
.faq summary{ cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--ink-dim); font-weight:400; font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--ink-soft); margin:12px 0 0; }

/* 마무리 */
.cta{ text-align:center; padding:110px 20px; border-top:1px solid var(--line); position:relative; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(500px 240px at 50% 60%, rgba(139,92,246,.22), transparent 70%); }
.cta img{ width:84px; height:84px; border-radius:20px; margin:0 auto 22px; }
.cta h2{ font-size:clamp(28px,4.4vw,44px); letter-spacing:-.03em; margin:0 0 24px; }
.foot{ border-top:1px solid var(--line); padding:34px 0 44px; color:var(--ink-dim); font-size:13px; }
.foot__in{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.foot__in a{ text-decoration:none; color:var(--ink-soft); }
.foot__in .copy{ margin-left:auto; }

@media (max-width:760px){
  .nav__links a.hide-m{ display:none; }
  .nav__in{ gap:10px; }
  .nav .btn--sm{ display:none; }
  .hero__btns .badge img{ height:44px; }
  .hero{ padding-top:64px; }
  .feat, .feat:nth-child(even){ grid-template-columns:1fr; gap:22px; margin-bottom:56px; }
  .feat:nth-child(even) .feat__txt{ order:0; }
  .stats{ grid-template-columns:1fr; }
  .foot__in .copy{ margin-left:0; width:100%; }
  .mac{ border-radius:12px; }
}

.badge{ display:inline-flex; transition:transform .15s; }
.badge:hover{ transform:translateY(-1px); }
.badge img{ height:48px; width:auto; }
.prompt{ text-align:center; color:#c7c7ff; font-weight:700; font-size:16px; margin:0 0 16px; min-height:1.6em; transition:opacity .2s; }
.foot__in .tm{ width:100%; color:var(--ink-dim); font-size:12px; }

/* ⌥⇧S 스크린샷 장면 */
.shot{ position:absolute; inset:2.1em 0 0; z-index:40; opacity:0; pointer-events:none; transition:opacity .2s; }
.shot.show{ opacity:1; pointer-events:auto; }
.shot__sel{ position:absolute; left:20%; top:28%; width:0; height:0; border:1.5px solid #fff; box-shadow:0 0 0 999em rgba(0,0,0,.45);
  transition:width .7s cubic-bezier(.2,.8,.2,1), height .7s cubic-bezier(.2,.8,.2,1); }
.shot.drag .shot__sel{ width:42%; height:42%; }
.shot__size{ position:absolute; left:0; top:-2em; background:rgba(0,0,0,.75); color:#fff; font-size:.85em; padding:.15em .5em; border-radius:.35em; white-space:nowrap; }
.shot__arrow{ position:absolute; inset:15% 10%; width:80%; height:70%; stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset .8s ease .1s; }
.shot.mark .shot__arrow{ stroke-dashoffset:0; }
.shot__bar{ position:absolute; left:63.5%; top:28%; display:flex; flex-direction:column; gap:.35em; padding:.6em .45em; background:#1c1c22;
  border-radius:1.2em; border:1px solid rgba(255,255,255,.12); opacity:0; transform:translateX(-.5em); transition:opacity .2s .5s, transform .2s .5s; }
.shot.drag .shot__bar{ opacity:1; transform:none; }
.shot__bar i{ font-style:normal; width:1.7em; height:1.7em; display:grid; place-items:center; color:#ddd; border-radius:.45em; font-size:.9em; }
.shot__bar i.on{ background:var(--accent); color:#fff; }
.shot__bar i.c{ width:1em; height:1em; border-radius:50%; margin:.15em auto; }