/* No Generation
   설계 원칙: 숫자가 주인공이다. 테두리를 지우고 여백으로 나눈다.
   색은 검정·흰색·초록 하나. 움직임은 절제한다. */
:root{
  --bg:#000; --bg2:#0b0b0d; --surface:#111114;
  --fg:#fff; --fg2:#8e8e93; --fg3:#5a5a60;
  --line:rgba(255,255,255,.08);
  --accent:#32d74b; --amber:#ffb340; --red:#ff453a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);overflow-x:hidden}
body{color:var(--fg);
  font:400 16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Apple SD Gothic Neo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.014em}
.mono{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-feature-settings:"tnum";letter-spacing:-.02em}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.04}
a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
a:hover{border-color:var(--fg)}

/* ── 상단 ─────────────────────────────── */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:16px 40px;background:rgba(0,0,0,.6);backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid var(--line)}
header h1{font-size:15px;letter-spacing:-.02em}
header .sub{font-size:13px;color:var(--fg3)}
.sp{flex:1}
.meta{font-size:11.5px;color:var(--fg3);font-family:"SF Mono",ui-monospace,Menlo,monospace}

/* ── 히어로 ───────────────────────────── */
.hero{min-height:88vh;display:flex;flex-direction:column;justify-content:center;
  padding:130px 40px 70px;max-width:1240px;margin:0 auto}
.hero h2{font-size:clamp(40px,7.2vw,104px);letter-spacing:-.045em;max-width:16ch}
.hero h2 em{font-style:normal;color:var(--fg3)}
.hero .lead{margin-top:34px;max-width:52ch;font-size:clamp(16px,1.5vw,20px);line-height:1.62;color:var(--fg2)}
.hero .lead b{color:var(--fg);font-weight:500}
.scroll{margin-top:56px;font-size:12px;color:var(--fg3);letter-spacing:.14em;text-transform:uppercase}

/* ── 제원표 ───────────────────────────── */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec div{background:var(--bg);padding:34px 40px;display:flex;flex-direction:column;justify-content:flex-start}
.spec .n{font-size:clamp(24px,2.7vw,38px);font-weight:600;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.spec .n small{font-size:.45em;color:var(--fg3);font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.spec .l{margin-top:12px;font-size:12.5px;color:var(--fg3);line-height:1.45;max-width:26ch}
@media(max-width:900px){.spec{grid-template-columns:repeat(2,1fr)}.spec div{padding:24px}}

/* ── 구역 ─────────────────────────────── */
section{max-width:1240px;margin:0 auto;padding:96px 40px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);margin-bottom:18px}
section h3{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.04em;max-width:20ch}
section .body{margin-top:22px;max-width:56ch;font-size:16.5px;line-height:1.68;color:var(--fg2)}
section .body b{color:var(--fg);font-weight:500}
section .body p{margin:0 0 15px}

/* ── 두 실물 ──────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:50px}
@media(max-width:940px){.duo{grid-template-columns:1fr}}
.cell{background:var(--bg2);padding:34px}
.cell .top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.cell .top h4{margin:0;font-size:21px;font-weight:600;letter-spacing:-.03em}
.cell .top .tag{font-size:12px;color:var(--fg3);font-family:"SF Mono",ui-monospace,Menlo,monospace}
.cell .sub{font-size:13.5px;color:var(--fg3);line-height:1.55;margin-bottom:22px}

button{font:inherit;cursor:pointer;transition:background .16s,border-color .16s,opacity .16s}
.cta{width:100%;background:var(--fg);color:#000;border:0;font-weight:600;font-size:15px;
  padding:14px 18px;border-radius:12px;letter-spacing:-.01em}
.cta:hover{background:#e8e8ea}
.cta:disabled{opacity:.4;cursor:default}
.plain{background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--fg);
  font-size:13.5px;padding:10px 15px;border-radius:11px}
.plain:hover{background:rgba(255,255,255,.1)}
.plain:disabled{opacity:.35;cursor:default}
.row{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}

.k{display:block;font-size:11px;color:var(--fg3);margin:20px 0 7px;text-transform:uppercase;letter-spacing:.12em}
textarea{width:100%;background:#000;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;color:var(--fg);font:14.5px/1.55 inherit;outline:none;resize:vertical}
textarea:focus{border-color:rgba(255,255,255,.28)}

.bars{margin-top:26px;display:grid;gap:11px}
.bar{display:grid;grid-template-columns:1fr 78px;align-items:center;gap:14px;font-size:14px}
.bar .nm{color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-bottom:7px;border-bottom:2px solid rgba(255,255,255,.07);position:relative}
.bar .nm i{position:absolute;left:0;bottom:-2px;height:2px;background:var(--fg3);
  transition:width .35s cubic-bezier(.2,.8,.2,1)}
.bar.win .nm{color:var(--fg)}
.bar.win .nm i{background:var(--accent);height:2px}
.bar .pc{text-align:right;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13px;color:var(--fg2)}
.bar.win .pc{color:var(--accent)}

.readout{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.65;color:var(--fg3);min-height:22px}
.readout b{color:var(--fg);font-weight:600}
.readout .win{color:var(--accent);font-weight:600}
.readout .slow{color:var(--amber)}
.readout .big{display:block;font-size:34px;font-weight:600;letter-spacing:-.04em;color:var(--fg);
  margin-bottom:8px;line-height:1}

.eye{margin-top:22px;background:#000;border:1px solid var(--line);border-radius:14px;
  aspect-ratio:16/10;overflow:hidden}
.eye canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.gauge{display:grid;grid-template-columns:96px 1fr 64px;align-items:center;gap:14px;margin-top:16px}
.gauge .g{font-size:12px;color:var(--fg3);text-transform:uppercase;letter-spacing:.1em}
.gauge .t{height:3px;background:rgba(255,255,255,.08);position:relative;border-radius:99px}
.gauge .t i{position:absolute;top:0;bottom:0;background:var(--fg2);border-radius:99px;transition:.18s}
.gauge .v{text-align:right;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:14px;color:var(--fg)}

/* ── 비교표 ───────────────────────────── */
.cmp{width:100%;border-collapse:collapse;margin-top:44px;font-size:15px}
.cmp th{text-align:left;font-weight:400;color:var(--fg3);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;padding:0 18px 14px 0;border-bottom:1px solid var(--line)}
.cmp td{padding:17px 18px 17px 0;border-bottom:1px solid var(--line);color:var(--fg2)}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child{color:var(--fg3);font-size:14px}
.cmp .ok{color:var(--accent)}
.cmp .no{color:var(--fg3)}

.fine{margin-top:40px;font-size:14px;line-height:1.72;color:var(--fg3);max-width:62ch}
.fine b{color:var(--fg2);font-weight:600}

footer{border-top:1px solid var(--line);padding:40px;color:var(--fg3);font-size:12.5px;line-height:1.8;
  max-width:1240px;margin:0 auto}

@media(max-width:700px){
  header{padding:13px 20px}header .sub,header .meta{display:none}
  .hero{padding:110px 20px 60px;min-height:auto}
  section{padding:64px 20px}.cell{padding:24px}
  .spec div{padding:22px 20px}
  .gauge{grid-template-columns:78px 1fr 58px}
}

/* ── 스크롤 진입 ─────────────────────────
   과하면 싸구려가 된다. 한 번, 짧게, 위로만. */
.rise{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}