:root{font-family:"Noto Sans KR","Malgun Gothic",Arial,sans-serif;font-size:16px;color:#152d45;background:#f2f5f9;--blue:#1767d6;--line:#dae3ed}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#fff;border:1px solid #cbd8e6;border-radius:7px;padding:.65rem .7rem;min-height:44px;font-weight:700}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #75b0ff;outline-offset:2px}.primary{background:var(--blue);color:#fff;border-color:var(--blue)}input,select{border:1px solid #c5d4e2;border-radius:7px;padding:.6rem;min-width:0;width:100%;background:#fff;color:inherit}input[type=number]{font-variant-numeric:tabular-nums}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}.top{background:#102d4b;color:#fff;padding:8px 12px 6px;padding-top:max(8px,env(safe-area-inset-top))}.top>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}.top strong{font-size:1.15rem;letter-spacing:.02em}.text-button{background:transparent;border:0;color:#fff;font-size:.75rem;min-height:32px;padding:4px 0}.site-label{display:block;margin:3px 0}.site-label select{color:#152d45;padding:5px 9px;min-height:34px;font-weight:700;font-size:.9rem}.connection-line{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.68rem;min-height:20px}.connection-line span{min-width:0;overflow-wrap:anywhere}#connectionBadge{color:#d7ebff}#connectionBadge.online{color:#8df2bd}main{max-width:780px;margin:0 auto;padding:0 10px calc(64px + env(safe-area-inset-bottom))}.list-tools{display:flex;gap:7px;align-items:center;padding:8px 0}.list-tools input{height:36px;font-size:1rem;flex:1}.list-tools button{font-size:.75rem;min-height:36px;padding:5px 8px;white-space:nowrap}.list-tools button[aria-pressed=true]{background:#ffe4e4;border-color:#d04b4b}.list-tools>span{font-size:.7rem;white-space:nowrap}.device-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;height:auto;min-height:64px;margin:0 0 4px;padding:7px 9px;text-align:left;background:#fff;border:1px solid var(--line);border-left:3px solid #1b9a69;border-radius:7px}.device-row .number{display:grid;place-items:center;background:#e9f0f8;border-radius:5px;height:32px;font-size:.9rem}.row-copy{min-width:0}.row-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}.row-copy small{display:block;margin-top:4px;font-size:.65rem;color:#567084;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-temperature{font-size:1.6rem;font-weight:800;letter-spacing:-.04em;white-space:nowrap;color:#115cbe;font-variant-numeric:tabular-nums}.device-row.fault{border-left-color:#cc4141}.device-row.defrost{border-left-color:#db4b37}.device-row.offline{border-left-color:#8b9bad;background:#f0f2f5}.device-row.offline .row-temperature{color:#647789}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;gap:0;background:#fff;border-top:1px solid #d4dfeb;padding-bottom:env(safe-area-inset-bottom);z-index:10}.bottom-nav button{flex:1;min-height:52px;padding:8px 2px;border:0;border-radius:0;font-size:.75rem;min-width:0}.bottom-nav button.active{color:#1263cc;background:#f0f6ff}.notice{padding:10px 12px;margin:0;background:#fff1ce;color:#6b4917;overflow-wrap:anywhere;font-size:.85rem}.empty{text-align:center;padding:40px 8px;color:#687f91}.page-heading{display:flex;align-items:center;gap:10px;margin:10px 0}.page-heading h1{font-size:1.05rem;min-width:0;overflow-wrap:anywhere;margin:0}.back{font-size:.75rem;white-space:nowrap;padding:7px;min-height:38px}.temperature-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:12px;padding:20px 14px;background:#fff;border-radius:10px;border:1px solid var(--line)}.temperature-card span{display:block;font-size:.75rem;color:#5f768c;margin-bottom:8px}.temperature-card strong{font-size:2.5rem;line-height:1.15;letter-spacing:-.06em;color:#145bb7;white-space:nowrap}.temperature-card b{font-size:1.4rem;white-space:nowrap}.detail-state{font-size:.8rem;color:#536f85}.sensors{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.sensors>div{flex:1;min-width:min(100%,9rem);padding:12px;background:#e8f1fb;font-size:.75rem}.sensors b{display:block;font-size:1.1rem;margin-top:5px}.outputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr));gap:6px}.output{padding:9px 4px;text-align:center;background:#e6eaf0;border:1px solid #9ca9b8;border-radius:7px;font-size:.7rem}.output b{display:block;margin-top:4px;font-size:.9rem}.output.running{background:#e9f7ee;border-color:#2c9460;color:#17613b}.output.defrost{background:#fff0ed;border-color:#cc4f3c;color:#a42b1d}.control-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin:12px 0}.action-pair{display:flex;gap:8px;margin:10px 0}.action-pair>*{flex:1;min-width:0}.setpoint-label{display:block;font-size:.85rem;font-weight:700}.setpoint-label>span{display:flex;gap:8px;align-items:center;margin-top:8px}.setpoint-label input{flex:1;width:80px}#actionMessage{white-space:pre-line;font-size:.85rem;overflow-wrap:anywhere}.muted{color:#62798d;font-size:.75rem;line-height:1.6}.setting-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:13px;margin:9px 0}.setting-card h2{font-size:.95rem;margin:0 0 8px;overflow-wrap:anywhere}.setting-card .current{font-size:.8rem;color:#5b7285}.setting-card .setting-edit{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}.setting-card .setting-edit>input,.setting-card .setting-edit>select{flex:1;width:80px}.setting-card .time-edit label{display:flex;gap:4px;align-items:center;flex:1;min-width:0}.setting-card .time-edit input{width:50px;flex:1}.setting-card .setting-edit button{font-size:.85rem}.setting-card .readonly-value{font-size:.8rem;color:#6a7c8a}.periods{display:flex;gap:6px}.periods button{flex:1;font-size:.8rem}.range-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin:12px 0}.range-form label{font-size:.7rem;min-width:0}.range-form input{font-size:1rem;padding:7px 4px;margin-top:5px;min-width:0;max-width:100%}.range-form button{grid-column:1/-1}.chart-card{background:#fff;padding:8px;border:1px solid var(--line);border-radius:8px}canvas{display:block;width:100%;height:220px;touch-action:pan-y}.legend{display:flex;justify-content:center;gap:10px;font-size:.65rem}.legend span:nth-child(1){color:#1e6fd9}.legend span:nth-child(2){color:#d77628}.legend span:nth-child(3){color:#24344a}.record-table{width:100%;overflow:hidden;background:#fff}.record-table table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.68rem;font-variant-numeric:tabular-nums}.record-table th,.record-table td{padding:8px 2px;text-align:center;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.record-table th:first-child{width:38%}.login-page{min-height:100svh;display:grid;place-items:center;padding:22px}.login-card{width:min(100%,380px);background:#fff;padding:26px;border:1px solid var(--line);border-radius:14px}.login-card .brand{color:#165cba;font-size:1.3rem;font-weight:800}.login-card h1{font-size:1.35rem}.login-card p{font-size:.85rem;color:#60778d}.login-card label{display:block;font-size:.85rem;margin:18px 0}.login-card input{display:block;margin-top:7px}.login-card button{width:100%}dialog{max-width:min(420px,calc(100% - 28px));border:0;border-radius:12px;padding:22px;color:inherit}dialog::backdrop{background:#112a43aa}dialog h2{font-size:1.1rem}dialog p{overflow-wrap:anywhere;line-height:1.6}@media(min-width:650px){main{padding-top:5px}.device-row{height:auto;min-height:70px}.row-temperature{font-size:1.9rem}.row-copy strong{font-size:1rem}.row-copy small{font-size:.75rem}.temperature-card strong{font-size:3rem}.top>div,.top>.site-label,.connection-line{max-width:760px;margin-left:auto;margin-right:auto}}@media(max-width:350px){.row-temperature{font-size:1.4rem}.device-row{grid-template-columns:26px minmax(0,1fr) auto;gap:5px;padding:6px}.temperature-card{padding:16px 10px;gap:6px}.temperature-card strong{font-size:2rem}.temperature-card b{font-size:1.2rem}}