*{box-sizing:border-box;margin:0;padding:0}
html,body{-webkit-text-size-adjust:none;text-size-adjust:none}
body{font-family:"Segoe UI",Roboto,Arial,sans-serif;background:#eef1f5;color:#1e293b;min-height:100vh;padding-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,8px))}
.page{max-width:480px;margin:0 auto}
.ios-install-banner{background:#fef3c7;color:#92400e;font-size:12px;line-height:1.55;padding:10px 14px;margin:0 0 8px;border-bottom:1px solid #fcd34d}
.ios-install-banner b{color:#78350f}
.ios-push-banner{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.ios-push-dock{position:fixed;left:0;right:0;bottom:0;z-index:99999;background:#fffbeb;border-top:2px solid #f59e0b;padding:12px 14px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,.15);display:flex;align-items:center;gap:10px;max-width:480px;margin:0 auto}
.ios-push-dock-txt{flex:1;font-size:12px;line-height:1.45;color:#78350f}
.ios-push-dock-txt b{color:#92400e}
.ios-push-dock-btn{flex-shrink:0;padding:12px 16px;border:none;border-radius:10px;background:#1565C0;color:#fff;font-weight:800;font-size:14px;white-space:nowrap}
body.ios-push-dock-on{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.btn-push-enable{margin-left:8px;padding:4px 10px;border:none;border-radius:8px;background:#1565C0;color:#fff;font-size:12px;font-weight:700;vertical-align:middle}
.btn-push-enable.hidden{display:none}
.topbar{
  display:flex!important;align-items:center;justify-content:space-between;background:#12233b;
  padding:calc(12px + var(--safe-area-inset-top,env(safe-area-inset-top,0px))) 14px 12px;color:#fff;
  flex-shrink:0;visibility:visible!important;height:auto!important;max-height:none!important;
  overflow:visible!important;min-height:0
}
/* S10 등 Android 14 이하: safe-area 이중·하단 여백 중복 제거 (S25 Android 15는 미적용) */
body.legacy-android-safe{padding-bottom:0!important}
body.legacy-android-safe .topbar{padding:10px 14px 10px}
body.legacy-android-safe #atoView{padding-bottom:46px!important}
body.legacy-android-safe .ato-ver{bottom:42px!important}
body.legacy-android-safe .ato-bnav{padding-bottom:0!important}
body.legacy-android-safe .ato-bt{padding:5px 2px 5px}
.navmenu{display:flex;gap:6px;padding:8px 8px 0;flex-shrink:0}
.logo-row{display:flex;align-items:center;gap:8px;min-width:0}
.logo-brand{height:42px;width:auto;max-width:42px;object-fit:contain;flex-shrink:0;display:block;border-radius:4px}
.topbar .brand{font-size:20px;font-weight:800;color:#5eb3ff;line-height:1}
.topbar .sub{font-size:9px;color:#cbd5e1;margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.connbox{display:flex;align-items:center;gap:10px;flex-shrink:0}
.wifi-mark{height:38px;width:auto;display:block;object-fit:contain;flex-shrink:0}
.conn-divider{width:1px;height:38px;background:#94a3b8;opacity:.6;flex-shrink:0}
.conn-status{display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-width:78px}
.conn-status .on{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#4ade80;justify-content:flex-start;text-align:left;width:auto;line-height:1.15}
.conn-status .on.off{color:#f87171}
.conn-status .on b{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}
.conn-status .on.off b{background:#ef4444}
.conn-status .ip{font-size:9px;color:#cbd5e1;text-align:left;line-height:1.15;width:auto;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:13px}
.btn-settings{background:rgba(255,255,255,.12);border:none;border-radius:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.btn-settings svg{width:17px;height:17px;fill:#cbd5e1}
.connbox{display:flex!important;align-items:center;gap:8px;flex-shrink:0}
.wifi-mark{display:block!important;height:34px;width:auto;object-fit:contain;flex-shrink:0}
.conn-divider{display:block!important;width:1px;height:34px;background:#94a3b8;opacity:.6;flex-shrink:0}
.conn-status{display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-width:78px}
.empty-add{margin:16px 12px;padding:18px 16px;background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(15,76,129,.08)}
.empty-add .empty-title{font-size:16px;font-weight:800;color:#0F4C81;margin-bottom:8px}
.empty-add p{font-size:13px;color:#64748b;line-height:1.55;margin-bottom:14px}
#onboardOverlay.show{display:flex}
#onboardOverlay .modal label{display:block;font-size:12px;font-weight:700;color:#334155;margin:10px 0 4px}
#onboardOverlay .modal input{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;font-size:14px}
#obStepWifi .btn-onestop,#obStepConnect .btn-onestop,#obStepPick .btn-onestop{width:100%;margin-top:14px}
.navbtn{
  flex:1;display:flex;align-items:center;gap:6px;padding:9px 7px;border-radius:12px;
  text-decoration:none;color:#fff;min-height:48px;
  opacity:.34;filter:saturate(.55) brightness(.92);
  box-shadow:0 1px 4px rgba(0,0,0,.06);border:none;font:inherit;cursor:pointer;text-align:left;
  transition:opacity .2s ease,filter .2s ease,box-shadow .2s ease,transform .15s ease
}
.navbtn.on{
  opacity:1;filter:none;
  box-shadow:0 4px 12px rgba(0,0,0,.18);transform:translateY(-1px)
}
.navbtn.ato{background:linear-gradient(135deg,#2196F3,#1565C0)}
.navbtn.rodi{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
.navbtn .nico{width:28px;height:28px;flex-shrink:0;object-fit:contain}
.navbtn .nt{font-size:7px;font-weight:800;line-height:1.2;white-space:nowrap}
.navbtn .nt-main{font-size:12px}
.navbtn .nt-sub{font-size:7px;font-weight:700}
.body{padding:10px 8px 0}
.main{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
.col{display:flex;flex-direction:column;gap:0;min-width:0}
.panel{background:#fff;border-radius:14px;padding:8px 8px 8px 6px;box-shadow:0 2px 10px rgba(15,76,129,.08);margin-bottom:8px}
.panel:last-child{margin-bottom:0}
.phd{display:flex;align-items:center;gap:5px;margin-bottom:8px;min-height:18px}
.ptitle{font-size:10px;font-weight:800;color:#0F4C81;line-height:1.2;letter-spacing:.2px}
.ic15{width:14px;height:14px;flex-shrink:0;object-fit:contain;display:block}
.fill-wrap{display:flex;gap:5px;align-items:stretch}
.fill-ind{flex:0 0 34%;display:flex;flex-direction:column;gap:5px}
.fbox{flex:1;border-radius:12px;padding:8px 6px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;opacity:.12;filter:saturate(.6);transition:opacity .25s,filter .25s}
.fbox.on{opacity:1;filter:none;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.fbox.fill{background:#2196F3}
.fbox.stop{background:#ef4444}
.ficon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:2px;background:rgba(255,255,255,.22)}
.ficon svg{width:18px;height:18px;fill:#fff}
.fbox .ft{font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.3px}
.fbox .fk{font-size:9px;font-weight:600;opacity:.95;line-height:1.2}
.fill-stats{flex:1;display:flex;flex-direction:column;gap:2px;justify-content:stretch;min-width:0}
.dcard{border:1px solid #e5e7eb;border-radius:8px;padding:2px 3px;background:#fff;display:flex;align-items:center;gap:2px;flex:1;min-height:0}
.dico{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dico svg{width:9px;height:9px}
.dico.blue{background:#eff6ff;color:#2563eb}
.dico.grn{background:#ecfdf5;color:#16a34a}
.dico.drop{background:#eff6ff;color:#60a5fa}
.dinfo{flex:1;min-width:0}
.dlab{font-size:6px;font-weight:700;color:#64748b;line-height:1.15;white-space:normal;word-break:keep-all}
.dval{font-size:8px;font-weight:800;line-height:1.15;margin-top:1px;color:#1e293b}
.dval.grn{color:#16a34a}
.dval.blu{color:#1d4ed8}
.vcard,.scard{border:1px solid #e5e7eb;border-radius:12px;padding:8px;margin-bottom:8px;background:#fff}
.vcard:last-child,.scard:last-child{margin-bottom:0}
.vtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;gap:4px}
.vname{font-size:10px;font-weight:800;color:#0F4C81;line-height:1.25}
.badge{padding:3px 7px;border-radius:6px;font-size:8px;font-weight:800;color:#fff;white-space:nowrap}
.badge.open{background:#22c55e}.badge.closed{background:#ef4444}
.vimg{height:68px;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:8px;margin-bottom:5px;padding:4px}
.vphoto{max-width:100%;max-height:60px;object-fit:contain}
.vup{font-size:8px;color:#94a3b8;text-align:center}
.scard{padding:5px}
.scbody{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1.05fr);gap:4px;align-items:stretch}
.scimg{position:relative;min-width:0;min-height:0;border-radius:8px;overflow:hidden;background:#f8fafc}
.sphoto{position:absolute;inset:-2% -6%;width:112%;height:104%;object-fit:contain;object-position:center;display:block}
.scright{min-width:0;display:flex;flex-direction:column;border:1px solid #e8edf3;border-radius:8px;background:#fff;overflow:hidden;text-align:center}
.scright>*{padding:5px 3px}
.scright>*+*{border-top:1px solid #e8edf3}
.scid{display:flex;flex-direction:column;align-items:center;gap:3px}
.scname{font-size:10px;font-weight:800;color:#0F4C81;line-height:1.25;text-align:center;letter-spacing:-.03em}
.scnum{display:block;font-size:7px;color:#64748b;font-weight:600;margin-top:1px}
.scard .badge{padding:3px 7px;border-radius:6px;font-size:8px;align-self:center}
.sctext{text-align:center}
.sctext .ln{display:block}
.sctext .ko{font-size:13px;font-weight:800;color:#0F4C81;line-height:1.15;letter-spacing:-.02em}
.sctext .en{font-size:8px;font-weight:600;color:#94a3b8;margin-top:1px;line-height:1.2;letter-spacing:-.03em;white-space:nowrap}
.scup{font-size:8px;color:#94a3b8;line-height:1.25;font-weight:400;white-space:nowrap;letter-spacing:-.03em;text-align:center}
.scup .tm{display:inline;margin-left:2px;font-variant-numeric:tabular-nums}
.sig{font-weight:800;display:flex;align-items:center;gap:3px;font-size:8px;margin:0;align-self:stretch;justify-content:center}
.sigico{width:14px;height:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sigico img{width:14px;height:14px;object-fit:contain}
.sigtxt{line-height:1.15;white-space:nowrap}
.sig.good .sigtxt{color:#16a34a}
.sig.bad .sigtxt{color:#ef4444}
.ver{text-align:center;font-size:9px;color:#94a3b8;padding:0 8px 10px}
.emg-banner{display:none;background:linear-gradient(90deg,#dc2626,#b91c1c);color:#fff;text-align:center;padding:10px 12px;font-size:11px;font-weight:800}
.emg-banner.show{display:block;animation:pulse 1.2s infinite}
.upd-banner{display:none;align-items:center;gap:10px;background:linear-gradient(90deg,#0369a1,#0ea5e9);color:#fff;padding:10px 12px}
.upd-banner.show{display:flex}
.upd-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.upd-text b{font-size:12px;font-weight:800}
.upd-text span{font-size:10px;opacity:.92;line-height:1.35}
.upd-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.upd-btn{border:none;border-radius:8px;background:#fff;color:#0369a1;font-size:11px;font-weight:800;padding:8px 12px;cursor:pointer}
.upd-x{border:none;background:transparent;color:#fff;font-size:18px;line-height:1;padding:4px 6px;cursor:pointer;opacity:.9}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.75}}
.hidden{display:none!important}
.rodi-banner{margin:8px 8px 0;padding:8px 10px;border-radius:12px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 2px 10px rgba(15,76,129,.08);color:#64748b;font-size:11px;font-weight:600;line-height:1.4;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rodi-banner.ok{color:#0F4C81;border-color:#bfdbfe;background:#f8fbff}
.rodi-banner-text{min-width:0;flex:1}
.rodi-banner b{font-weight:800;color:#12233b}
.rodi-reload{flex-shrink:0;border:0;border-radius:8px;padding:8px 10px;background:linear-gradient(135deg,#2196F3,#1565C0);color:#fff;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 2px 6px rgba(33,150,243,.25)}
.rodi-frame{display:block;width:100%;min-height:0;height:100%;border:0;background:#eef1f5;margin:0;border-radius:0;padding:0}
/* RO/DI: 여백 이중 적용 제거(공중부양 방지). 시스템 바는 iframe 하단 바 padding만 */
body.rodi-mode{
  overflow:hidden;
  height:100%;
  height:100dvh;
  padding-bottom:0;
  background:#eef1f5;
}
body.rodi-mode .page{
  height:100%;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-sizing:border-box;
  padding-bottom:0;
  background:#eef1f5;
}
body.rodi-mode #dashboard{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.rodi-mode #atoView{display:none!important}
body.rodi-mode #rodiView{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;margin:0;padding:0}
body.rodi-mode #rodiReady{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;margin:0;padding:0}
body.rodi-mode #rodiReady .rodi-frame{flex:1;min-height:0;height:auto;width:100%;margin:0;border:0;padding:0;display:block}
body.rodi-mode .rodi-banner{flex-shrink:0;margin-top:6px}
body.rodi-mode .rodi-frame{flex:1;min-height:0;height:auto;margin:0}
body.rodi-mode .topbar{display:flex!important;flex-shrink:0}
body.rodi-mode .navmenu{flex-shrink:0;padding:6px 8px 4px;margin:0}
body.rodi-mode .topbar .connbox{opacity:.85}
body.rodi-mode .emg-banner{display:none}
body.rodi-mode .upd-banner{display:none!important}
.offline{padding:32px 16px;text-align:center}
.offline p{font-size:12px;color:#64748b;line-height:1.6;margin-bottom:14px}
.offline button{background:#2196F3;color:#fff;border:none;border-radius:10px;padding:12px 20px;font-size:13px;font-weight:700;cursor:pointer}
.overlay{position:fixed;inset:0;background:rgba(15,31,53,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:16px;padding:20px;width:100%;max-width:340px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.modal h2{font-size:16px;font-weight:800;color:#0F4C81;margin-bottom:6px}
.modal p{font-size:11px;color:#64748b;line-height:1.5;margin-bottom:14px}
.modal label{display:block;font-size:10px;font-weight:700;color:#475569;margin-bottom:6px}
.modal input{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:12px;font-size:14px;margin-bottom:10px}
.pass-wrap{display:flex;align-items:stretch;gap:8px;margin-bottom:10px}
.pass-wrap input{flex:1;margin-bottom:0;min-width:0}
.pass-toggle{flex:0 0 auto;border:1px solid #cbd5e1;background:#f1f5f9;color:#0F4C81;border-radius:10px;padding:0 14px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.pass-toggle:active{background:#e2e8f0}
.modal .hint{font-size:10px;color:#94a3b8;margin:-8px 0 14px;line-height:1.4}
.push-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;margin-bottom:14px}
.push-title{font-size:11px;font-weight:800;color:#0F4C81;margin-bottom:6px}
.push-row{font-size:10px;color:#64748b;line-height:1.5}
.push-row span{font-weight:700;color:#1e293b;word-break:break-all}
.modal-actions{display:flex;gap:8px}
.modal-actions button{flex:1;border:none;border-radius:10px;padding:12px;font-size:13px;font-weight:700;cursor:pointer}
.btn-save{background:#2196F3;color:#fff}
.btn-cancel{background:#e2e8f0;color:#475569}
.setup-guide .push-title{font-size:12px}
.setup-steps{margin:8px 0 0;padding-left:1.25em;font-size:11px;color:#334155;line-height:1.55}
.setup-steps li{margin-bottom:8px}
.setup-steps .setup-sub{display:block;font-size:10px;color:#94a3b8;margin-top:2px;font-weight:600}
.btn-onestop{width:100%;margin-top:12px;min-height:48px;font-size:16px;font-weight:700}
.setup-note{margin:8px 0 0;font-size:11px;color:#64748b;line-height:1.45}
.setup-more{margin-top:14px;font-size:13px;color:#475569}
.setup-more summary{cursor:pointer;font-weight:700}
.setup-more label{display:block;margin-top:10px}
.rodi-cloud{margin-top:6px;background:#fff;border-radius:14px;padding:12px 12px 14px;box-shadow:0 2px 10px rgba(15,76,129,.08)}
.rodi-cloud.hidden{display:none!important}
.rodi-cloud-note{font-size:11px;color:#64748b;margin-bottom:8px;line-height:1.4}
.rodi-cloud-state{font-size:18px;font-weight:800;color:#5b21b6;margin-bottom:8px}
.rodi-cloud-estop{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:800;margin-bottom:8px}
.rodi-cloud-estop.hidden{display:none!important}
.rodi-cloud-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rodi-cloud-grid div{background:#f8fafc;border-radius:10px;padding:10px}
.rodi-cloud-grid span{display:block;font-size:10px;color:#64748b;margin-bottom:4px}
.rodi-cloud-grid b{font-size:15px;color:#12233b;font-weight:800}
.rodi-cloud-meta{margin-top:10px;font-size:10px;color:#94a3b8}
/* 5G: 전체 RO/DI UI(iframe) 유지 · 구형 요약 패널은 숨김 */
body.rodi-mode.rodi-cloud-on .rodi-frame{display:block;flex:1;min-height:0}
body.rodi-mode.rodi-cloud-on #rodiCloudView{display:none!important}
body.cloud-readonly .act-primary,
body.cloud-readonly .chg-btn,
body.cloud-readonly #btnArm,
body.cloud-readonly #btnCancel{opacity:.45;pointer-events:none}

/* ATO bottom nav (RO/DI bnav와 동일 크기) */
#atoView{padding-bottom:calc(72px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}
.ato-pages{min-height:0}
.ato-pg{display:none}
.ato-pg.on{display:block}
.ato-ver{
  position:fixed;left:0;right:0;z-index:29;
  bottom:calc(56px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));
  max-width:480px;margin:0 auto;
  text-align:center;font-size:8px;font-weight:600;color:#94a3b8;
  line-height:1.2;padding:6px 8px;pointer-events:none;
  background:#eef2f7
}
body.rodi-mode .ato-ver{display:none}
.ato-bnav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:#fff;border-top:1px solid #e5eaf1;
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:480px;margin:0 auto;
  padding-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0));
  box-shadow:0 -2px 10px rgba(15,76,129,.06)
}
body.rodi-mode .ato-bnav{display:none}
.ato-bt{
  border:0;background:0;padding:8px 2px 10px;font-size:10px;font-weight:700;
  color:#94a3b8;cursor:pointer;line-height:1.15;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  -webkit-tap-highlight-color:transparent
}
.ato-bt.on{color:#1A6DB3}
.ato-bt .ic{display:flex;align-items:center;justify-content:center;width:25px;height:25px;margin:0}
.ato-bt .ic svg{width:23px;height:23px;fill:currentColor;display:block}

/* ATO 통계 = RO/DI 통계(생산량·급수횟수) 동일 레이아웃 */
#atoPgStats{
  padding:8px 10px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  max-height:calc(100dvh - 170px);
}
#atoPgStats .page-title{
  font-size:18px;font-weight:800;color:#0F4C81;margin:0 0 6px;
  display:flex;align-items:center;gap:8px;line-height:1
}
#atoPgStats .page-title svg{width:22px;height:22px;flex-shrink:0;fill:currentColor;display:block}
#atoPgStats .stab-row.ato-2tab{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:#cfd6e0;border:1px solid #cfd6e0;border-radius:8px;overflow:hidden;
  padding:0;margin:0 0 6px;
}
#atoPgStats .stab{
  appearance:none;-webkit-appearance:none;
  border:0!important;border-radius:0!important;margin:0!important;
  background:#fff!important;color:#0F4C81;padding:9px 2px;font-size:11px;font-weight:800;
  cursor:pointer;white-space:nowrap;min-width:0;text-align:center;line-height:1.2;box-shadow:none!important
}
#atoPgStats .stab.on{background:#1A6DB3!important;color:#fff!important}
#atoPgStats .stabp{display:none}
#atoPgStats .stabp.on{display:block}
#atoPgStats .banner.note{
  display:flex;align-items:center;gap:6px;margin:6px 0;padding:8px 10px;border-radius:12px;
  background:linear-gradient(90deg,#eaf1ff,#e4e0ff);color:#3b3f8c;font-size:12px;font-weight:600;line-height:1.4
}
#atoPgStats .banner.note .ban-ico{width:16px;height:16px;flex-shrink:0;color:#3b3f8c;display:block}
#atoPgStats .sgrid.stat-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 4px}
#atoPgStats .scard.stat{
  background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:12px 2px;
  text-align:center;min-width:0;box-shadow:0 1px 4px rgba(18,35,59,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start
}
#atoPgStats .scard.stat .hd{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 10px;width:100%}
#atoPgStats .scard.stat .n{font-size:9px;font-weight:700;color:#334155;line-height:1.15;text-align:center;word-break:keep-all}
#atoPgStats .scard.stat .v{
  font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:#1A6DB3;line-height:1;
  letter-spacing:-.8px;white-space:nowrap;display:flex;align-items:baseline;justify-content:center;margin:0 0 12px
}
#atoPgStats .scard.stat .v .u{font-size:12px;font-weight:800;color:#1A6DB3;margin-left:4px}
#atoPgStats .scard.stat .cmp{display:flex;align-items:flex-start;justify-content:center;gap:2px;font-size:8px;font-weight:600;color:#94a3b8;line-height:1.25;width:100%;text-align:center}
#atoPgStats .scard.stat .cmp .tri{font-size:7px;line-height:1.4}
#atoPgStats .scard.stat .cmp.flat .tri{display:none}
#atoPgStats .sc-ico-wrap{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:#1A6DB3;color:#fff
}
#atoPgStats .sc-ico{width:13px;height:13px;color:#fff;display:block}
#atoPgStats .scard.stat.c-day .sc-ico-wrap{background:#1A6DB3}
#atoPgStats .scard.stat.c-week .sc-ico-wrap{background:#16a34a}
#atoPgStats .scard.stat.c-month .sc-ico-wrap{background:#7c3aed}
#atoPgStats .scard.stat.c-total .sc-ico-wrap{background:#0d9488}
#atoPgStats .chart-box{background:#fff;border:1px solid #e5eaf1;border-radius:12px;padding:6px 10px 10px;margin-bottom:8px;position:relative}
#atoPgStats .chart-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
#atoPgStats .chart-head .ct{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:800;color:#0F4C81;min-width:0}
#atoPgStats .ct-ico{width:16px;height:16px;flex-shrink:0;color:#1A6DB3;display:block}
#atoPgStats .seg{
  display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));width:148px;gap:1px;
  background:#cfd6e0;border:1px solid #cfd6e0;border-radius:8px;overflow:hidden;flex-shrink:0;padding:0
}
#atoPgStats .seg>.rtog{
  appearance:none;border:0!important;border-radius:0!important;margin:0!important;padding:0!important;
  height:30px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
  color:#0F4C81;background:#fff!important;cursor:pointer
}
#atoPgStats .seg>.rtog.on{background:#1A6DB3!important;color:#fff!important}
#atoPgStats .chart-plot{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px;align-items:start}
#atoPgStats .y-col{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
#atoPgStats .y-col .yu{font-size:8px;font-weight:700;color:#94a3b8;height:12px;margin:0 0 2px;padding-right:1px}
#atoPgStats .y-ticks{height:110px;width:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
#atoPgStats .y-ticks span{font-size:9px;font-weight:700;color:#94a3b8;font-variant-numeric:tabular-nums}
#atoPgStats .y-col .y-spacer{height:18px;flex-shrink:0}
#atoPgStats .plot-body{min-width:0;padding-top:14px}
#atoPgStats .bars-wrap{position:relative;height:110px}
#atoPgStats .bars-grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:0}
#atoPgStats .bars-grid i{display:block;height:0;border-top:1px dashed #dbe3ee}
#atoPgStats .bars{display:flex;align-items:flex-end;gap:4px;height:100%;padding:0 2px;position:relative;z-index:1}
#atoPgStats .bars .b{flex:1;min-width:0;background:linear-gradient(180deg,#7c3aed,#2196F3);border-radius:5px 5px 2px 2px;opacity:.95;cursor:pointer}
#atoPgStats .bars .b.ph{background:linear-gradient(180deg,#c5cee0,#a8b4c8);opacity:.55}
#atoPgStats .bars-lbl{display:flex;gap:4px;margin-top:6px}
#atoPgStats .bars-lbl span{flex:1;text-align:center;font-size:9px;color:#64748b;font-weight:700;overflow:hidden;text-overflow:ellipsis}
#atoPgStats .mini-note{font-size:10px;color:#64748b;text-align:center;margin-top:4px}
#atoPgStats .foot-stat{font-size:13px;font-weight:600;color:#94a3b8;text-align:center;padding:8px 4px 2px}
#atoPgStats .foot-stat .fval{font-weight:800;color:#0F4C81}
@media (max-width:380px){
  #atoPgStats .sgrid.stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ATO 설정 = RO/DI 설정(센서교정·시스템·정보) */
#atoPgSet,#atoPgHomeScreen{
  padding:8px 10px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  max-height:calc(100dvh - 170px);
}
#atoPgSet .page-title{
  font-size:18px;font-weight:800;color:#0F4C81;margin:0 0 10px;
  display:flex;align-items:center;gap:8px;line-height:1
}
#atoPgSet .page-title svg{width:22px;height:22px;flex-shrink:0;fill:currentColor;display:block}
#atoPgSet .set-card{
  background:#fff;border-radius:16px;padding:4px 0 8px;margin-bottom:10px;
  box-shadow:0 2px 10px rgba(18,35,59,.06);border:1px solid #e5eaf1;overflow:hidden;
}
#atoPgSet .set-card-h{
  display:flex;align-items:center;gap:8px;
  padding:14px 14px 8px;font-size:15px;font-weight:800;line-height:1;
}
#atoPgSet .set-card-h>svg,#atoPgSet .set-card-h .set-ico{
  width:22px;height:22px;flex-shrink:0;margin:0;display:block;
  transform:translateY(-0.5px);
}
#atoPgSet .set-card-h .set-ico{fill:none;stroke:currentColor}
#atoPgSet .set-card-h .txt{flex:1;min-width:0;line-height:1.15}
#atoPgSet .set-card-h.purple{color:#6d28d9}
#atoPgSet .set-card-h.blue{color:#1A6DB3}
#atoPgSet .set-card-h.navy{color:#0F4C81}
#atoPgSet .set-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-top:1px solid #eef2f7;font-size:13px
}
#atoPgSet .set-row .k{font-weight:700;color:#1e293b;line-height:1.35;word-break:keep-all}
#atoPgSet .set-row .v{font-weight:800;color:#94a3b8;font-variant-numeric:tabular-nums;white-space:nowrap}
#atoPgSet .set-row .v.blu{color:#1A6DB3}
#atoPgSet .set-row.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
#atoPgSet .set-row.tap:active{background:#f8fafc}
#atoPgSet .set-row.tap .v::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:6px;
  border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;
  transform:rotate(-45deg) translateY(-1px);vertical-align:middle
}
#atoPgHomeScreen .ch-head{
  display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px
}
#atoPgHomeScreen .ch-head b{font-size:16px;color:#0F4C81}
#atoPgHomeScreen .ch-head .ico{
  width:40px;height:40px;border-radius:12px;border:1px solid #dbe3ee;background:#fff;
  color:#334155;font-size:28px;line-height:1;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 0 2px
}
#atoPgHomeScreen .ch-head .ico:active{background:#d6ebfa;border-color:#1A6DB3;color:#0F4C81}
#atoPgHomeScreen .home-lead{
  display:flex;align-items:flex-start;gap:8px;margin:8px 0 16px;padding:12px 14px;
  border-radius:12px;background:#f0f7ff;color:#334155;font-size:13px;line-height:1.45;font-weight:600
}
#atoPgHomeScreen .home-lead .ban-ico{flex:0 0 auto;width:18px;height:18px;margin-top:1px;color:#2563eb}
#atoPgHomeScreen .home-pick{display:flex;gap:12px}
#atoPgHomeScreen .home-pick .hp{
  flex:1;min-height:52px;border-radius:14px;border:2px solid #dbe3ee;background:#fff;
  color:#334155;font-size:16px;font-weight:800;cursor:pointer
}
#onboardOverlay .home-pick{display:flex;gap:8px;margin:12px 0}
#onboardOverlay .home-pick .hp{
  flex:1;min-height:52px;border-radius:12px;border:2px solid #dbe3ee;background:#fff;
  color:#334155;font-size:14px;font-weight:800;cursor:pointer
}
#onboardOverlay .home-pick .hp.on{
  border-color:#1565C0;background:#eff6ff;color:#0F4C81
}
#onboardOverlay .ob-modal{max-width:420px}
#onboardOverlay .ob-steps{
  display:flex;align-items:center;justify-content:space-between;gap:0;margin:0 0 16px;padding:0 2px
}
#onboardOverlay .ob-step{
  flex:1;min-width:0;appearance:none;border:2px solid #dbe3ee;background:#f8fafc;color:#94a3b8;
  border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:default;min-height:64px;justify-content:center
}
#onboardOverlay .ob-step .ob-num{
  width:26px;height:26px;border-radius:50%;background:#e2e8f0;color:#64748b;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1
}
#onboardOverlay .ob-step .ob-lab{font-size:11px;font-weight:800;letter-spacing:-.2px}
#onboardOverlay .ob-step.on{
  border-color:#1565C0;background:#eff6ff;color:#0F4C81;box-shadow:0 0 0 3px rgba(21,101,192,.12)
}
#onboardOverlay .ob-step.on .ob-num{background:#1565C0;color:#fff}
#onboardOverlay .ob-step.done{
  border-color:#86efac;background:#f0fdf4;color:#166534;cursor:pointer
}
#onboardOverlay .ob-step.done .ob-num{background:#16a34a;color:#fff}
#onboardOverlay .ob-step.done .ob-num::after{content:""; }
#onboardOverlay .ob-step:disabled{opacity:.55;cursor:not-allowed}
#onboardOverlay .ob-line{
  flex:0 0 10px;height:3px;background:#e2e8f0;border-radius:2px;margin:0 2px
}
#onboardOverlay .ob-line.on{background:#86efac}
#onboardOverlay .ob-cta{
  width:100%;min-height:52px;margin-top:14px;font-size:16px;border-radius:14px
}
#onboardOverlay .ob-cta-sec{
  width:100%;min-height:48px;margin-top:8px;font-size:13px;border-radius:12px
}
#onboardOverlay .ob-status{
  margin-top:12px;padding:12px 14px;border-radius:12px;background:#f0f7ff;border:1px solid #bfdbfe;
  color:#0F4C81;font-size:13px;font-weight:700;line-height:1.45;min-height:48px
}
#onboardOverlay .ob-status.wait{background:#fff7ed;border-color:#fdba74;color:#9a3412}
#onboardOverlay .ob-status.ok{background:#ecfdf5;border-color:#86efac;color:#166534}
#onboardOverlay .ob-status.err{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
#webMonitorOverlay .ob-status{
  margin-top:12px;padding:12px 14px;border-radius:12px;background:#f0f7ff;border:1px solid #bfdbfe;
  color:#0F4C81;font-size:13px;font-weight:700;line-height:1.45;min-height:48px
}
#webMonitorOverlay .ob-status.wait{background:#fff7ed;border-color:#fdba74;color:#9a3412}
#webMonitorOverlay .ob-status.ok{background:#ecfdf5;border-color:#86efac;color:#166534}
#webMonitorOverlay .ob-status.err{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
#webMonitorOverlay input{margin-bottom:8px}
#onboardOverlay .ob-manual{margin-top:10px;font-size:12px}
#onboardOverlay .ob-band-note{margin-top:6px;font-size:12px;color:#64748b}
#onboardOverlay .ob-band-note code{font-size:11px;background:#f1f5f9;padding:1px 5px;border-radius:4px}
#onboardOverlay .ob-ap-list{
  margin:10px 0 4px;max-height:220px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid #e2e8f0;border-radius:12px;background:#fff
}
#onboardOverlay .ob-ap-item{
  width:100%;appearance:none;border:0;border-bottom:1px solid #f1f5f9;background:#fff;
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-align:left;cursor:pointer;font:inherit;color:#0f172a
}
#onboardOverlay .ob-ap-item:last-child{border-bottom:0}
#onboardOverlay .ob-ap-item.on{background:#eff6ff}
#onboardOverlay .ob-ap-ssid{font-size:14px;font-weight:800;letter-spacing:-.2px}
#onboardOverlay .ob-ap-meta{font-size:11px;font-weight:700;color:#64748b;white-space:nowrap}
#onboardOverlay .ob-ap-empty{
  padding:18px 14px;font-size:13px;font-weight:700;color:#64748b;line-height:1.45;text-align:center
}
#onboardOverlay #obWifiStatus{margin-top:10px;min-height:0}
#onboardOverlay #obWifiStatus:empty{display:none;margin:0;padding:0;border:0;min-height:0}
#onboardOverlay #obManualSsidWrap{margin-top:8px}
#onboardOverlay .ob-search{display:flex;flex-direction:column;align-items:center;padding:6px 0 4px}
#onboardOverlay .ob-ring-wrap{width:100%;display:flex;justify-content:center;margin:4px 0 10px}
#onboardOverlay .ob-ring{width:148px;max-width:42vw;aspect-ratio:1;position:relative}
#onboardOverlay .ob-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
#onboardOverlay .ob-ring .bg{fill:none;stroke:#e5eaf1;stroke-width:10}
#onboardOverlay .ob-ring .fg{fill:none;stroke:#94a3b8;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .4s ease,stroke .25s}
#onboardOverlay .ob-ring .fg.blue{stroke:#2b7fd4}
#onboardOverlay .ob-ring .fg.green{stroke:#1fa97a}
#onboardOverlay .ob-ring .fg.orange{stroke:#f59e0b}
#onboardOverlay .ob-ring-txt{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none
}
#onboardOverlay .ob-ring-txt .pct{
  font-size:26px;font-weight:900;color:#0F4C81;font-variant-numeric:tabular-nums;line-height:1
}
#onboardOverlay .ob-ring-txt .st{font-size:11px;font-weight:700;color:#64748b;margin-top:4px}
#onboardOverlay .ob-ver{font-size:10px;font-weight:600;color:#94a3b8;margin-top:6px}
#onboardOverlay .ob-guide{
  margin:0 0 10px;padding:0 4px;text-align:center;font-size:14px;font-weight:800;color:#0F4C81;line-height:1.45
}
#onboardOverlay .ob-slot-reg{
  margin:0 0 8px;padding:6px 10px;text-align:center;font-size:12px;font-weight:700;color:#0d9488;
  background:#ecfdf5;border-radius:8px;line-height:1.4
}
#onboardOverlay #obStepConnect .ob-status{width:100%;margin-top:0}

/* ATO 장치테스트 */
#atoPgDeviceTest{
  padding:8px 10px 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  max-height:calc(100dvh - 170px);
}
#atoPgDeviceTest .ch-head{
  display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px
}
#atoPgDeviceTest .ch-head b{font-size:14px;color:#0F4C81;text-align:center;line-height:1.25;padding:0 4px}
#atoPgDeviceTest .ch-head .ico{
  width:40px;height:40px;border-radius:12px;border:1px solid #dbe3ee;background:#fff;
  color:#334155;font-size:28px;line-height:1;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 0 2px
}
#atoPgDeviceTest .ch-head .ico:active{background:#d6ebfa;border-color:#1A6DB3;color:#0F4C81}
#atoPgDeviceTest .dev-lead{
  display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:12px 14px;
  border-radius:12px;background:#f0f7ff;color:#334155;font-size:13px;line-height:1.45;font-weight:600
}
#atoPgDeviceTest .dev-lead.soft{background:#f8fafc;margin-top:4px}
#atoPgDeviceTest .dev-lead .ban-ico{flex:0 0 auto;width:18px;height:18px;margin-top:1px;color:#2563eb}
#atoPgDeviceTest .dev-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:#cfd6e0;border:1px solid #cfd6e0;border-radius:10px;overflow:hidden;margin:0 0 10px
}
#atoPgDeviceTest .dev-tab{
  appearance:none;-webkit-appearance:none;border:0;margin:0;border-radius:0;
  background:#fff;color:#0F4C81;padding:10px 4px;font-size:12px;font-weight:800;
  cursor:pointer;line-height:1.2
}
#atoPgDeviceTest .dev-tab.on{background:#1A6DB3;color:#fff}
#atoPgDeviceTest .dev-card{
  background:#fff;border:1px solid #e5eaf1;border-radius:14px;padding:12px 12px 14px;
  margin-bottom:10px;box-shadow:0 2px 8px rgba(18,35,59,.05)
}
#atoPgDeviceTest .dev-card-h{font-size:14px;font-weight:800;color:#0F4C81;margin:0 0 10px}
#atoPgDeviceTest .dev-state{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#atoPgDeviceTest .dev-pill{
  display:flex;align-items:center;justify-content:center;min-height:48px;
  border-radius:12px;border:2px solid #dbe3ee;background:#f8fafc;color:#94a3b8;
  font-size:14px;font-weight:800;text-align:center;padding:8px 6px;line-height:1.2
}
#atoPgDeviceTest .dev-pill.on{
  border-color:#1A6DB3;background:#eff6ff;color:#1A6DB3;
  box-shadow:0 0 0 3px rgba(26,109,179,.12)
}
#atoPgDeviceTest .dev-pill.wet-on{
  border-color:#0ea5e9;background:#e0f2fe;color:#0369a1;
  box-shadow:0 0 0 3px rgba(14,165,233,.15)
}
#atoPgDeviceTest .dev-pill.dry-on{
  border-color:#64748b;background:#f1f5f9;color:#334155;
  box-shadow:0 0 0 3px rgba(100,116,139,.12)
}
#atoPgDeviceTest .dev-pill.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
#atoPgDeviceTest .dev-pill.tap:active{transform:scale(.98)}
#atoPgDeviceTest .dev-sec-title{
  font-size:15px;font-weight:800;color:#0F4C81;margin:16px 0 8px
}
#atoPgDeviceTest .dev-note{
  margin:2px 0 8px;padding:10px 12px;border-radius:12px;background:#fff7ed;
  border:1px solid #fed7aa;color:#9a3412;font-size:12px;font-weight:600;line-height:1.45
}
#atoPgDeviceTest .dev-buzzer-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px;border-radius:14px;background:#fff;border:1px solid #e5eaf1;
  box-shadow:0 2px 8px rgba(18,35,59,.05);margin-bottom:8px;cursor:pointer
}
#atoPgDeviceTest .dev-buzzer-row .k{font-size:14px;font-weight:800;color:#1e293b}
#atoPgDeviceTest .dev-buzzer-row .v{font-weight:800;color:#94a3b8}
#atoPgDeviceTest .dev-buzzer-row .v::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:6px;
  border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;
  transform:rotate(-45deg) translateY(-1px);vertical-align:middle
}
#atoPgDeviceTest .dev-buzzer-row:active{background:#f8fafc}

.rodi-link-bar{flex-shrink:0;padding:10px 10px 6px;background:#12233b}
.rodi-link-bar.hidden,.rodi-softap-ok .rodi-link-bar{display:none!important;height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;border:0!important}
.rodi-link-bar button{width:100%;padding:13px 12px;border:none;border-radius:12px;background:linear-gradient(135deg,#2196F3,#1565C0);color:#fff;font-weight:800;font-size:14px;cursor:pointer}
.rodi-link-hint{margin-top:6px;font-size:11px;color:#94a3b8;line-height:1.45;text-align:center}
.rodi-link-hint b{color:#e2e8f0}
#rodiReady{display:flex;flex-direction:column;min-height:0;flex:1}
.rodi-link-bar .rodi-link-sec{margin-top:8px;background:#334155!important}
#dashboard.stale-data .scard,#dashboard.stale-data .dcard,#dashboard.stale-data .fbox{opacity:.52}
#atoStaleBanner.banner.warn{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45}
#atoStaleBanner.hidden{display:none!important}