:root{font-family:Arial,"Noto Sans KR",sans-serif;color:#102c3b;background:#edf4f7}
*{box-sizing:border-box}html,body{margin:0;width:100%;max-width:100%;overflow-x:hidden}body{min-height:100vh;background:#edf4f7}
button,select,input{font:inherit}.topbar{background:linear-gradient(120deg,#073f59,#007b83);color:#fff;padding:10px 12px 9px;box-shadow:0 2px 8px #0002}
.brand{display:flex;align-items:center;min-width:0}.brand-logo{display:block;width:58px;height:58px;object-fit:contain;flex:0 0 58px;margin-right:8px}.brand-copy{min-width:0}.brand h1{font-size:22px;line-height:1;margin:0;letter-spacing:.5px;white-space:nowrap}.brand h1 b{color:#32b7f2}.brand p{font-size:11px;margin:6px 0 0;white-space:nowrap;color:#e8f7f8}
.top-actions{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:8px}.connection{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;font-weight:800}.connection #dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:#f5b73d;box-shadow:0 0 0 4px #ffffff20}.connection.online #dot{background:#29e279}.connection.offline #dot{background:#ff514b}.push-button{border:0;border-radius:11px;background:#ffffff20;color:#fff;padding:9px 12px;font-size:12px;font-weight:900;white-space:nowrap}.push-button.enabled{background:#35db79;color:#073d45}.header-clock{font-size:10px;color:#d7edef;margin:5px 0 0 77px}
main{width:100%;max-width:520px;margin:0 auto;padding:10px}.sensor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.sensor-card{min-width:0;height:145px;border:1px solid #dbe5e9;border-radius:18px;background:#fff;padding:11px 9px;box-shadow:0 4px 12px #18384912;position:relative;overflow:hidden}.sensor-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-30px;bottom:-42px;background:currentColor;opacity:.08}.sensor-symbol{display:block;font-size:22px;font-weight:900;height:26px}.sensor-name{display:block;color:#264553;font-size:16px;font-weight:900;margin-top:3px}.sensor-card div{white-space:nowrap;margin-top:7px}.sensor-card strong{font-size:clamp(32px,10.8vw,47px);line-height:1;font-weight:900;letter-spacing:-2px}.sensor-card em{font-size:18px;font-style:normal;font-weight:800;margin-left:2px}.temperature{color:#df3533}.humidity{color:#1679c9}.voltage{color:#168b4f}
.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.status-card{min-width:0;background:#fff;border:1px solid #dce6ea;border-radius:18px;padding:12px;box-shadow:0 4px 12px #18384910}.status-card h2{font-size:16px;margin:0 0 10px}.status-body{display:flex;align-items:center;gap:9px;min-width:0}.status-icon{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;font-size:27px;background:#e1f8e9;color:#078049}.status-icon.radio{font-size:24px}.status-copy{min-width:0}.status-copy strong{display:inline-block;min-width:70px;text-align:center;border-radius:18px;padding:5px 9px;background:#dff7e8;color:#078049;font-size:16px}.status-copy p{font-size:10px;line-height:1.35;margin:6px 0 0;color:#415d69}.status-card.outage{background:#fff3f1;border:2px solid #ff4a43;animation:powerPulse 1.2s infinite}.status-card.outage .status-icon,.status-card.outage .status-copy strong{background:#ff3732;color:#fff}@keyframes powerPulse{50%{box-shadow:0 0 0 5px #ff39321b}}
.latest-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:8px;background:#fff;border-radius:17px;padding:10px 11px;margin-top:10px;box-shadow:0 4px 12px #18384910}.latest-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#137cf1;color:#fff;font-size:20px}.latest-copy b{display:block;font-size:14px}.latest-copy small{display:block;color:#6b7d85;font-size:10px;margin-top:2px}.latest-card>strong{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:18px;background:#e7eef2;padding:6px 10px;font-size:12px}.latest-card>strong.alert{background:#ffe0dc;color:#d12d28}
.event-panel{margin-top:10px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 12px #18384912}.event-toolbar{min-height:54px;padding:9px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;border-bottom:1px solid #e1eaee}.event-toolbar h2{font-size:14px;margin:0;white-space:nowrap}.event-toolbar label{font-size:10px;font-weight:800;white-space:nowrap}.event-toolbar input{width:16px;height:16px;vertical-align:middle}.event-toolbar button{border:0;border-radius:10px;background:#087a84;color:#fff;padding:8px 9px;font-size:10px;font-weight:900;white-space:nowrap}.event-head,.event{display:grid;grid-template-columns:68px 104px minmax(0,1fr);gap:5px;align-items:center}.event-head{padding:8px 9px;background:#edf3f6;font-size:10px;color:#526b76;font-weight:900}.event-list{max-height:390px;overflow:auto}.event{min-height:58px;padding:7px 9px;border-bottom:1px solid #e6edef;font-size:10px}.event.alert{background:#fff3f1}.event time{color:#5b707b;line-height:1.35}.event .badge{padding:6px 4px;border-radius:15px;background:#e5edf1;text-align:center;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event.alert .badge{background:#ffdeda;color:#c92a25}.event.power-recovery .badge{background:#dff7e8;color:#087e48}.event .detail{color:#36525e;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.empty{text-align:center;padding:50px 10px;color:#73838c}
footer{max-width:520px;margin:0 auto;display:flex;justify-content:space-between;padding:9px 13px 16px;color:#667a84;font-size:10px}
.chart-screen{position:fixed;inset:0;z-index:50;background:#edf4f7;overflow:auto}.chart-window{max-width:520px;min-height:100%;margin:auto;padding:0 10px 14px}.chart-header{margin:0 -10px 10px;padding:13px 12px;background:linear-gradient(120deg,#073f59,#007b83);color:#fff;display:flex;align-items:center;gap:10px}.chart-header .back{border:0;background:transparent;color:#fff;font-size:28px;padding:0}.chart-header h2{font-size:18px;margin:0}.chart-header p{font-size:10px;margin:3px 0 0;color:#d8eef0}.period-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-bottom:9px}.period-row select,.period-row button{height:38px;border:1px solid #cbd9df;border-radius:10px;background:#fff;padding:0 10px;font-size:12px;font-weight:800}.period-row button{border:0;background:#087a84;color:#fff}.chart-box{background:#fff;border-radius:16px;padding:10px;margin-bottom:9px;box-shadow:0 4px 12px #18384910;height:280px}.chart-box h3{font-size:15px;margin:0 0 5px}.chart-box canvas{display:block;width:100%;height:235px}.red{color:#d33b38}.blue{color:#1674c5}.green{color:#258651}
@media(min-width:600px){main,footer,.chart-window{max-width:760px}.sensor-card{height:175px}.sensor-card strong{font-size:56px}.event-head,.event{grid-template-columns:120px 180px minmax(0,1fr)}}
@media(max-width:360px){.brand-logo{width:50px;height:50px;flex-basis:50px}.brand h1{font-size:19px}.brand p{font-size:10px}.header-clock{margin-left:66px}.sensor-card{height:132px;padding:9px 7px}.sensor-card strong{font-size:32px}.sensor-card em{font-size:15px}.sensor-name{font-size:14px}.status-card{padding:10px}.status-icon{width:46px;height:46px;flex-basis:46px;font-size:23px}.status-copy strong{min-width:60px;font-size:14px}.event-toolbar h2{font-size:12px}.event-head,.event{grid-template-columns:62px 92px minmax(0,1fr)}}

/* v3: actual phone viewport tuning */
body{padding-bottom:74px}
.topbar{padding:8px 12px 7px}
.brand-logo{width:50px;height:50px;flex-basis:50px}
.brand h1{font-size:20px}.brand p{font-size:10px;margin-top:4px}
.header-clock{margin-left:66px}
main{padding:8px 10px}
.sensor-grid{gap:6px}
.sensor-card{height:128px;padding:9px 8px;border-radius:16px}
.sensor-symbol{font-size:19px;height:22px}.sensor-name{font-size:14px}
.sensor-card div{margin-top:5px}.sensor-card strong{font-size:clamp(29px,9.6vw,42px)}.sensor-card em{font-size:16px}
.status-grid{margin-top:8px;gap:7px}.status-card{padding:10px;border-radius:16px}.status-card h2{font-size:14px;margin-bottom:8px}
.status-icon{width:48px;height:48px;flex-basis:48px;font-size:24px}.status-copy strong{font-size:14px;min-width:62px}.status-copy p{font-size:9px}
.latest-card{margin-top:8px;padding:8px 10px}.latest-icon{width:36px;height:36px}.latest-copy b{font-size:13px}
.event-panel{margin-top:8px}.event-toolbar{min-height:48px}.event-list{max-height:none}
footer{padding-bottom:8px}
.bottom-nav{position:fixed;z-index:40;left:0;right:0;bottom:0;height:64px;background:linear-gradient(120deg,#073f59,#007b83);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -3px 12px #0002}
.nav-item{border:0;background:transparent;color:#dceef2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:800}
.nav-item span{font-size:23px;line-height:1}.nav-item.active{background:#0c91a7;color:#fff}.nav-item b{font-size:10px}
@media(min-width:600px){.bottom-nav{left:50%;right:auto;width:520px;transform:translateX(-50%)}}