/* 화면 3안 — 주소에 ?ui=a|b|c. 기능(app.js)은 같고 보이는 방식·흐름만 다르다 */

/* ── 공통: 비교용 전환 버튼 ── */
.ui-switch{position:fixed;right:14px;bottom:14px;z-index:20;display:flex;gap:4px;background:rgba(16,24,40,.88);padding:5px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ui-switch a{font:700 12px Pretendard,sans-serif;color:#cbd5e1;text-decoration:none;padding:7px 11px;border-radius:999px}
.ui-switch a.on{background:#fff;color:#101828}
.ui-switch span{font:600 11px Pretendard,sans-serif;color:#98a2b3;align-self:center;padding:0 6px 0 8px}

/* ── A. 심플 카드형: 지금 화면을 조금 다듬는다 ── */
.ui-a header h1{letter-spacing:-.03em}
.ui-a .card{border-radius:22px}
.ui-a .step b{background:linear-gradient(135deg,#155eef,#6172f3)}

/* ── B. 실시간 미리보기형: 왼쪽 입력 / 오른쪽 배너 고정, 어두운 프리미엄 ── */
.ui-b{--ink:#e7ecf5;--muted:#98a2b3;--line:#24304a;--bg:#070d1a;--card:#0f172a;--pri:#4f7cff;--pri2:#3b63e0}
.ui-b body,body.ui-b{background:radial-gradient(1200px 600px at 80% -10%,#1b2a55 0,transparent 60%),#070d1a;color:var(--ink)}
.ui-b .wrap{max-width:1320px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
.ui-b header{grid-column:1/-1;text-align:left;margin:0 0 6px}
.ui-b header h1{font-size:34px}
.ui-b header .badge{background:rgba(79,124,255,.15);color:#9db4ff}
.ui-b footer{grid-column:1/-1}
.ui-b .wrap>section.card:first-of-type,.ui-b #stepTag{grid-column:1}
.ui-b #stepDraft,.ui-b #stepApply{grid-column:2}
.ui-b #stepApply{grid-row:2}
.ui-b #stepDraft{grid-row:3}
.ui-b .wrap>section.card:first-of-type{grid-row:2}
.ui-b #stepTag{grid-row:3}
.ui-b .card{background:rgba(15,23,42,.85);border-color:var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ui-b .step b{background:#4f7cff}
.ui-b input[type=text],.ui-b textarea,.ui-b select{background:#0b1324;color:#e7ecf5;border-color:#2b3754}
.ui-b .chip,.ui-b .tag,.ui-b .more,.ui-b .file label,.ui-b .info,.ui-b .btn.sec{background:#101a30;color:#e7ecf5;border-color:#2b3754}
.ui-b .chip.on{background:rgba(79,124,255,.18);border-color:#4f7cff;color:#fff}
.ui-b .tag.on{background:#4f7cff;border-color:#4f7cff}
.ui-b .draft{background:#0b1324}
.ui-b .draft.on{border-color:#4f7cff;box-shadow:0 0 0 4px rgba(79,124,255,.25)}
.ui-b .result.info{background:#0f2447;color:#b8cdff;border-color:#23427a}
.ui-b .guess{background:#2a2110;color:#fcd9a6;border-color:#5c4412}
.ui-b .rename{background:#0f2447;border-color:#23427a}.ui-b .rename p,.ui-b .rename small{color:#b8cdff}
.ui-b .drafts{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.ui-b .wrap{grid-template-columns:1fr}.ui-b .wrap>*{grid-column:1!important;grid-row:auto!important}.ui-b #stepApply{position:static}}

/* ── C. 한 단계씩 마법사형: 한 화면에 질문 하나, 큰 버튼, 따뜻한 색 ── */
.ui-c{--ink:#2b2118;--muted:#7a6a5a;--line:#eadfce;--bg:#fbf6ee;--card:#fff;--pri:#e8590c;--pri2:#c94b09}
body.ui-c{background:#fbf6ee}
.ui-c .wrap{max-width:720px}
.ui-c header h1{font-size:clamp(26px,5vw,34px)}
.ui-c header .badge{background:#ffe8d6;color:#c94b09}
.ui-c .card{border-radius:26px;padding:28px;box-shadow:0 12px 30px rgba(120,80,30,.08)}
.ui-c .step h2{font-size:22px}
.ui-c .step b{background:#e8590c}
.ui-c input[type=text]{font-size:20px;padding:18px}
.ui-c .chips{grid-template-columns:repeat(3,1fr)}
.ui-c .chip{padding:18px 8px;font-size:16px}.ui-c .chip span{font-size:30px}
.ui-c .chip.on{background:#fff1e6;border-color:#e8590c;color:#c94b09}
.ui-c .tag.on{background:#e8590c;border-color:#e8590c}
.ui-c .drafts{grid-template-columns:1fr}
.ui-c .btn{font-size:18px;padding:18px}
.wz-hide{display:none!important}
.wz-progress{position:sticky;top:0;z-index:5;background:#fbf6ee;padding:10px 0 14px}
.wz-progress .bar{height:10px;border-radius:999px;background:#f0e4d3;overflow:hidden}
.wz-progress .bar i{display:block;height:100%;background:linear-gradient(90deg,#f08c00,#e8590c);transition:width .3s}
.wz-progress .lbl{display:flex;justify-content:space-between;font:700 13px Pretendard,sans-serif;color:#7a6a5a;margin-top:8px}
.wz-nav{display:flex;gap:10px;margin-top:20px}
.wz-nav button{flex:1;font:800 18px Pretendard,sans-serif;border-radius:16px;padding:17px;cursor:pointer;border:0}
.wz-nav .prev{background:#f3e9dc;color:#5b4a3a;flex:0 0 32%}
.wz-nav .next{background:#e8590c;color:#fff}
.wz-nav .next:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:720px){.ui-c .chips{grid-template-columns:repeat(2,1fr)}}