/*
 * ------------------------------------
 * wifi입력후 연결구간 — 온보딩 UI만
 * ------------------------------------
 * 로직: www/js/rodi-onboard.js
 * 여기: SoftAP 온보딩 모달·단계 표시 CSS만.
 *
 * 금지: .app-header / .bnav / --safe-t / --safe-b / 상·하단 여백
 *      → 그 구간은 css/app.css (U) 만.
 */

/* 기기추가 · RODI SoftAP 온보딩 */
.overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(15, 31, 53, 0.55);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.overlay.show { display: flex; }
.overlay .ob-modal {
  width: 100%; max-width: 420px; max-height: 92%;
  overflow: auto; background: #fff; border-radius: 18px;
  padding: 16px 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.22);
}
.overlay .ob-modal h2 { font-size: 18px; font-weight: 800; color: var(--navy); margin: 0 0 12px; }
.ob-steps { display: flex; align-items: center; gap: 3px; margin-bottom: 14px; flex-wrap: nowrap; }
.ob-step {
  flex: 1; border: 1px solid var(--line); background: #f8fafc; border-radius: 12px;
  padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; color: var(--muted);
}
.ob-step .ob-num {
  width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: #64748b;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.ob-step .ob-lab { font-size: 10px; font-weight: 800; }
.ob-step.on { border-color: #93c5fd; background: #eff6ff; color: #0b3a6e; }
.ob-step.on .ob-num { background: #1565C0; color: #fff; }
.ob-step.done .ob-num { background: #16a34a; color: #fff; }
.ob-line { width: 6px; height: 2px; background: #cbd5e1; flex-shrink: 0; }
.setup-note { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0 0 10px; }
.ob-modal label { display: block; font-size: 12px; font-weight: 700; color: #334155; margin: 8px 0 4px; }
.ob-modal input[type="text"], .ob-modal input[type="password"] {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 12px; font: inherit; font-size: 15px; font-weight: 600;
}
.pass-wrap { display: flex; gap: 8px; align-items: center; }
.pass-wrap input { flex: 1; }
.pass-toggle {
  border: 0; background: #e8edf5; color: var(--navy); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn-onestop {
  width: 100%; border: 0; border-radius: 12px; padding: 14px; margin-top: 12px;
  background: #0b3a6e; color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.btn-onestop.sec { background: #e8edf5; color: var(--navy); }
.ob-search { text-align: center; padding: 8px 0 4px; }
.ob-ring-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.ob-ring { position: relative; width: 120px; height: 120px; }
.ob-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ob-ring circle.bg { fill: none; stroke: #e2e8f0; stroke-width: 8; }
.ob-ring circle.fg { fill: none; stroke: #1565C0; stroke-width: 8; stroke-linecap: round; }
.ob-ring-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; transform: none;
}
.ob-ring-txt .pct { font-size: 22px; font-weight: 900; color: var(--navy); }
.ob-ring-txt .st { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.ob-guide { font-size: 13px; font-weight: 600; color: #334155; line-height: 1.4; margin: 0 0 8px; }
.ob-status {
  font-size: 12px; font-weight: 700; border-radius: 10px; padding: 10px 12px; margin: 8px 0;
  background: #f1f5f9; color: #475569;
}
.ob-status.wait { background: #eff6ff; color: #1d4ed8; }
.ob-status.ok { background: #ecfdf5; color: #047857; }
.ob-status.err { background: #fef2f2; color: #b91c1c; }
.ob-ap-list {
  max-height: 180px; overflow: auto; border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 8px;
}
.ob-ap-item {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: #fff;
  padding: 12px 14px; display: flex; justify-content: space-between; gap: 8px;
  font: inherit; text-align: left; cursor: pointer;
}
.ob-ap-item:last-child { border-bottom: 0; }
.ob-ap-item.on { background: #eff6ff; }
.ob-ap-ssid { font-size: 14px; font-weight: 800; }
.ob-ap-meta { font-size: 11px; font-weight: 700; color: #64748b; }
.ob-ap-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; }
.hidden { display: none !important; }