:root { --blue:#1F5BFF; --ink:#191f28; --sub:#6b7684; --bg:#f4f6f9; --card:#fff; --line:#e5e8eb; --red:#e5484d; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#f2f4f6; --sub:#9aa4b2; --bg:#0f1115; --card:#1a1d23; --line:#2a2e36; }
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",sans-serif; }
main { width:100%; max-width:440px; padding:24px 16px; }
.card { background:var(--card); border-radius:24px; padding:28px 22px; box-shadow:0 8px 30px rgba(0,0,0,.06); }
h1 { font-size:22px; line-height:1.35; margin:0 0 10px; letter-spacing:-.3px; }
p { margin:6px 0; color:var(--sub); font-size:15px; line-height:1.55; }
.center { text-align:center; }
.btn { display:block; width:100%; margin-top:16px; padding:18px 0; border:0; border-radius:16px; background:var(--blue); color:#fff; font-size:19px; font-weight:800; text-align:center; text-decoration:none; }
.btn.ghost { background:transparent; color:var(--blue); border:1.5px solid var(--blue); }
.btn[aria-disabled="true"] { background:var(--line); color:var(--sub); pointer-events:none; }
.rows { margin:18px 0 4px; border-top:1px solid var(--line); }
.row { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.row b { flex:0 0 76px; color:var(--sub); font-weight:600; font-size:14px; }
.row span { flex:1; font-size:16px; line-height:1.5; word-break:break-all; }
.tag { display:inline-block; padding:3px 10px; border-radius:999px; background:var(--red); color:#fff; font-size:13px; font-weight:800; margin-bottom:10px; }
.demo { margin:14px 0 0; padding:12px 14px; border-radius:12px; background:rgba(31,91,255,.1); color:var(--blue); font-size:14px; font-weight:700; line-height:1.5; text-align:left; }
.hide { display:none; }
.note { font-size:12.5px; margin-top:18px; }

section h2 { margin:22px 0 8px; font-size:15px; color:var(--sub); font-weight:700; }
audio { width:100%; }
.line { display:flex; gap:10px; padding:9px 12px; margin:6px 0; border-radius:12px; font-size:15px; line-height:1.5; }
.line b { flex:0 0 46px; font-size:12.5px; color:var(--sub); font-weight:700; padding-top:2px; }
.line span { flex:1; word-break:keep-all; }
.line.cust { background:rgba(31,91,255,.08); }
.line.ai { background:rgba(0,0,0,.04); }

button.link { margin-left:8px; padding:2px 8px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--blue); font-size:12.5px; font-weight:700; cursor:pointer; }
.sub { margin:0 0 8px; font-size:12.5px; color:var(--sub); }

.row a, .row a:visited { color:#7fa2ff; font-weight:700; text-decoration:underline; }
.steps { margin:16px 0 4px; padding:0; list-style:none; text-align:left; counter-reset:s; }
.steps li { counter-increment:s; display:flex; gap:10px; padding:9px 0; font-size:15px; line-height:1.5; }
.steps li::before { content:counter(s); flex:0 0 24px; height:24px; border-radius:50%; background:rgba(31,91,255,.18); color:#7fa2ff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.steps q { color:#fff; font-weight:700; quotes:"“" "”"; }
.numline { margin:10px 0 0; font-size:13px; color:var(--sub); }
.numline b { color:#fff; letter-spacing:.3px; }