/* ===== 모바일 전용 레이아웃 ===== */
header.app-head{background:linear-gradient(135deg,var(--bg-grad-a),var(--bg-grad-b));color:#fff;padding:18px 18px 16px;position:relative}
header.app-head h1{margin:0;font-size:19px;font-weight:900;letter-spacing:-.3px}
header.app-head p{margin:5px 0 0;font-size:12px;opacity:.93;line-height:1.45}
.device-switch{position:absolute;top:16px;right:16px;font-size:11px}
.device-switch a{color:#fff;opacity:.9;text-decoration:underline}

.app-main{padding:14px 14px 96px;max-width:560px;margin:0 auto}

/* 컴팩트 스텝 진행 표시 (점 + 라벨) */
.stepper{display:flex;align-items:center;gap:6px;margin-bottom:16px;justify-content:center}
.stepper .dot{width:9px;height:9px;border-radius:50%;background:#cbd5e1;transition:.2s}
.stepper .dot.active{background:var(--brand);transform:scale(1.35)}
.stepper .dot.done{background:var(--ok)}
.step-caption{text-align:center;font-size:13px;font-weight:800;color:var(--brand);margin:-6px 0 14px}
.step-caption .small{color:var(--muted);font-weight:600}

/* 패널 — 모바일 풀폭, 큰 터치 타깃 */
.panel{padding:18px 16px;border-radius:16px}
.panel h2{font-size:17px}
.btn{padding:13px 16px;font-size:14px}
.choice{padding:14px;font-size:14.5px}
select,input[type=number],input[type=text]{font-size:16px;padding:13px 12px} /* 16px: iOS 줌 방지 */
input[type=color]{width:54px;height:46px}

.wizard-step{display:none}
.wizard-step.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.stage{min-height:260px;padding:16px}

/* 하단 고정 네비게이션 바 */
.nav-bar{
  position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;padding:12px 14px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(15,23,42,.08);z-index:50;
}
.nav-bar .btn{flex:1;padding:15px;font-size:15px;border-radius:12px}

.actions{display:flex;gap:10px;margin-top:14px;flex-direction:column}
.actions .btn{width:100%;padding:14px}