@charset "UTF-8";
/* 한번에 다본다 화면 스타일
   1. 토큰: 색·글자·간격(4px 격자)·모서리·컨트롤 높이는 :root 한 곳에서만 정한다 (AI_Rules 080).
   2. 아래 규칙은 토큰만 참조한다. 값을 바꿀 때는 토큰을 고친다. */

:root{
 /* 바탕·글자·선 */
 --c-bg:#f3f5f8;--c-surface:#fff;--c-surface-2:#f7f9fb;--c-surface-3:#edf1f5;
 --c-ink:#152232;--c-ink-2:#3a4859;--c-muted:#687789;--c-faint:#98a4b3;
 --c-line:#e2e7ee;--c-line-strong:#cdd5df;--c-grid:#edf1f5;
 /* 브랜드·동작 */
 --c-brand:#079b96;--c-primary:#2457d6;--c-primary-hover:#1c47b4;--c-primary-soft:#ebf1fd;--c-primary-line:#c3d4f7;
 --c-focus:#2457d640;--c-chart:#326be6;
 /* 관리자 메뉴·고객 머리 영역 (어두운 바탕) */
 --c-nav:#0f1c2d;--c-nav-2:#1b2c42;--c-nav-3:#24405f;--c-nav-line:#2a3d55;--c-nav-ink:#b3c1d3;--c-nav-soft:#c9d5e3;
 /* 상태 */
 --c-ok:#0a7f63;--c-ok-soft:#e1f4ec;
 --c-warn:#8a5208;--c-warn-soft:#fff3db;--c-warn-line:#f1dcae;
 --c-bad:#c2333d;--c-bad-soft:#fdeaea;
 --c-info:#2c54a2;--c-info-soft:#eef3ff;--c-info-line:#d3e0fb;
 /* 현재값 색 (10-21 고객 지정값 그대로) */
 --lv-blue:#3caaf0;--lv-green:#41b4aa;--lv-orange:#fab43c;--lv-red:#ff0000;--lv-neutral:#8794a5;--c-over-limit:#ff0000;
 /* 글자 */
 --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI","Malgun Gothic",sans-serif;
 --fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-input:15px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:22px;--fs-3xl:28px;
 --fs-logo:22px;--fs-hero:48px;--fs-reading:26px;--fs-reading-lg:40px;
 /* 간격 */
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;
 /* 모서리·그림자 */
 --r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
 --sh-sm:0 1px 2px #0f1c2d0d;--sh-md:0 8px 24px #0f1c2d14;--sh-lg:0 24px 64px #0f1c2d38;
 /* 컨트롤 높이: 버튼·입력칸·선택칸이 같은 값을 쓴다 */
 --control-h:40px;--control-h-sm:32px;
 /* 배치 */
 --aside-w:240px;--content-max:1200px;--gutter:32px;
 /* CSS 배경 아이콘 */
 --i-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687789' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
 --i-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687789' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
 --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a4b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
 --i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687789' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
/* 손가락으로 누르는 기기는 컨트롤을 키우고, iOS 입력 확대를 막으려고 입력 글자를 16px로 둔다. */
@media (pointer:coarse){:root{--control-h:44px;--control-h-sm:36px;--fs-input:16px}}
@media (max-width:768px){:root{--gutter:16px;--fs-3xl:24px;--fs-hero:32px;--fs-reading-lg:34px}}

/* ---------- 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--c-bg);color:var(--c-ink);font-family:var(--font);font-size:var(--fs-md);line-height:1.55;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,p{margin:0}
h1{font-size:var(--fs-3xl);line-height:1.3;font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--fs-xl);line-height:1.4;font-weight:700;letter-spacing:-.01em}
h3{font-size:var(--fs-lg);line-height:1.45;font-weight:700}
a{color:var(--c-primary);text-decoration:none}
a:hover{color:var(--c-primary-hover)}
small{font-size:var(--fs-xs)}
[hidden]{display:none!important}
.muted{color:var(--c-muted)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}

/* ---------- 버튼 ---------- */
button,.button-link{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--control-h);margin:0;padding:0 var(--s4);border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-ink);font:inherit;font-size:var(--fs-md);font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
button:hover,.button-link:hover{background:var(--c-surface-2);border-color:var(--c-faint);color:var(--c-ink)}
button:active,.button-link:active{background:var(--c-surface-3)}
button:disabled{opacity:.5;cursor:not-allowed}
.button-link[aria-disabled=true]{opacity:.45;pointer-events:none}
.primary,.button-link.primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.primary:hover,.button-link.primary:hover{background:var(--c-primary-hover);border-color:var(--c-primary-hover);color:#fff}
.quiet{border-color:transparent;background:transparent;color:var(--c-ink-2)}
.quiet:hover{border-color:transparent;background:var(--c-surface-3)}
.small{min-height:var(--control-h-sm);padding:0 var(--s3);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.icon-button{width:var(--control-h);padding:0}

/* ---------- 입력 ---------- */
label{display:block;margin-top:var(--s4);color:var(--c-ink-2);font-size:var(--fs-sm);font-weight:600}
label .muted{font-size:var(--fs-xs);font-weight:400}
input,select,textarea{display:block;width:100%;min-width:0;min-height:var(--control-h);margin:var(--s2) 0 0;padding:0 var(--s3);border:1px solid var(--c-line-strong);border-radius:var(--r-md);background-color:var(--c-surface);color:var(--c-ink);font:inherit;font-size:var(--fs-input);font-weight:400;line-height:1.4;transition:border-color .15s,box-shadow .15s}
textarea{min-height:96px;padding:var(--s2) var(--s3);resize:vertical}
input::placeholder,textarea::placeholder{color:var(--c-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-focus)}
input:disabled,select:disabled,textarea:disabled,input[readonly]{background-color:var(--c-surface-2);color:var(--c-muted)}
select{-webkit-appearance:none;appearance:none;padding-right:var(--s10);background-image:var(--i-chevron-down);background-repeat:no-repeat;background-position:right var(--s3) center;background-size:16px}
input[type=search]{-webkit-appearance:none;appearance:none;padding-left:var(--s10);background-image:var(--i-search);background-repeat:no-repeat;background-position:var(--s3) center;background-size:16px}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input[type=checkbox]{width:18px;height:18px;min-height:0;margin:0;flex:none;accent-color:var(--c-primary)}
fieldset{min-width:0;margin:0;padding:0;border:0}
fieldset:disabled{opacity:.45}
/* iOS Safari: 기본 날짜칸은 칸 폭을 무시하고 옆 칸에 붙는다. 기본 모양을 끄고 폭을 따르게 한다. */
@supports (-webkit-touch-callout:none){
 input[type=date]{-webkit-appearance:none;appearance:none;line-height:calc(var(--control-h) - 2px);padding-right:var(--s10);background-image:var(--i-calendar);background-repeat:no-repeat;background-position:right var(--s3) center;background-size:16px}
 input[type=date]::-webkit-date-and-time-value{margin:0;text-align:left}
}

/* ---------- 공통 상자 ---------- */
.panel{min-width:0;margin-bottom:var(--s6);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);padding:var(--s4) var(--s6);border-bottom:1px solid var(--c-line)}
.panel-head h2,.panel-head h3{font-size:var(--fs-lg)}
.panel-head small{color:var(--c-muted);font-size:var(--fs-sm)}
.card{min-width:0;padding:var(--s5);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.empty{padding:var(--s12) var(--s6);color:var(--c-muted);text-align:center;line-height:1.8}
td.empty{padding:var(--s10) var(--s4);white-space:normal}
.badge{display:inline-flex;align-items:center;gap:var(--s2);height:24px;padding:0 var(--s3) 0 var(--s2);border-radius:var(--r-pill);background:var(--c-surface-3);color:var(--c-muted);font-size:var(--fs-xs);font-weight:600;line-height:1;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.online{background:var(--c-ok-soft);color:var(--c-ok)}
.badge.offline,.badge.dead{background:var(--c-bad-soft);color:var(--c-bad)}
.badge.stale,.badge.gap{background:var(--c-warn-soft);color:var(--c-warn)}
.demo-banner,#notice{margin-bottom:var(--s5);padding:var(--s3) var(--s4);border:1px solid;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.6}
.demo-banner{background:var(--c-info-soft);border-color:var(--c-info-line);color:var(--c-info)}
#notice{background:var(--c-warn-soft);border-color:var(--c-warn-line);color:var(--c-warn)}
.local-warning{margin-top:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--c-warn-soft);color:var(--c-warn);font-size:var(--fs-sm);line-height:1.6}
.error{margin-top:var(--s3);color:var(--c-bad);font-size:var(--fs-sm);line-height:1.6}
.error:empty{display:none}

/* 표 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}
th{padding:var(--s3) var(--s4);border-bottom:1px solid var(--c-line);background:var(--c-surface-2);color:var(--c-muted);font-size:var(--fs-xs);font-weight:600}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--c-line);font-size:var(--fs-md);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td small{display:block;margin-top:var(--s1);color:var(--c-muted);font-size:var(--fs-xs)}
td button,td .button-link{min-height:var(--control-h-sm);padding:0 var(--s3);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.over-limit{color:var(--c-over-limit);font-weight:700}

/* 구간 선택 (기간 버튼·업체 보기 탭) */
.segmented,.workspace-tabs{display:inline-flex;flex-wrap:nowrap;gap:var(--s1);max-width:100%;padding:var(--s1);background:var(--c-surface-3);border-radius:var(--r-md)}
.segmented button,.workspace-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--control-h) - var(--s2));padding:0 var(--s4);border:0;border-radius:var(--r-sm);background:transparent;color:var(--c-ink-2);font-size:var(--fs-md);font-weight:600;white-space:nowrap}
.segmented button:hover,.workspace-tabs a:hover{background:#ffffffa6;color:var(--c-ink)}
.segmented button[aria-pressed=true],.workspace-tabs a[aria-current=page]{background:var(--c-surface);color:var(--c-primary);box-shadow:var(--sh-sm)}
.workspace-tabs{margin-bottom:var(--s6)}

/* 펼침 상자 */
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details.panel>summary{display:flex;align-items:center;gap:var(--s2);min-height:56px;padding:0 var(--s6);font-weight:600}
details.panel>summary::before{content:"";width:16px;height:16px;flex:none;background:var(--i-chevron-right) center/16px no-repeat;transition:transform .2s}
details.panel[open]>summary::before{transform:rotate(90deg)}
details.panel>summary>span{margin-left:auto;color:var(--c-muted);font-size:var(--fs-sm);font-weight:400}

/* 대화상자 */
dialog{width:min(520px,calc(100vw - 32px));max-height:88vh;max-height:88dvh;padding:var(--s6);border:0;border-radius:var(--r-xl);background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh-lg);overflow:auto}
dialog::backdrop{background:#0f1c2d80}
dialog p{margin-top:var(--s3);line-height:1.65}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.dialog-head h2{font-size:var(--fs-xl)}
.dialog-head button{width:36px;min-height:36px;padding:0;border:0;background:transparent;color:var(--c-muted);font-size:24px;font-weight:400}
.dialog-head button:hover{background:var(--c-surface-3);color:var(--c-ink)}
.form-actions{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s6)}
#workflow-dialog{width:min(620px,calc(100vw - 32px))}
#workflow-dialog form>button[type=submit],#workflow-dialog>button.primary{width:100%;margin-top:var(--s5)}
#receipt-text{font-family:Consolas,"Malgun Gothic",monospace;font-size:var(--fs-sm)}
#copy-result:empty{display:none}

/* ---------- 로그인 ---------- */
.logo{display:inline-flex;align-items:center;height:44px;padding:0 var(--s4);border-radius:var(--r-lg);background:var(--c-brand);color:#fff;font-size:var(--fs-logo);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.logo:hover{color:#fff}
.login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--c-surface)}
.login-story{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s10);padding:var(--s12) 10%;background:linear-gradient(150deg,var(--c-nav) 0%,#18324f 100%);color:#fff}
.login-copy{margin:auto 0}
.login-copy h1{font-size:var(--fs-hero);line-height:1.25;letter-spacing:-.03em}
.login-copy p{margin-top:var(--s5);color:var(--c-nav-ink);font-size:var(--fs-lg);line-height:1.8}
.login-panel{display:grid;place-items:center;padding:var(--s10) var(--s6)}
.login-panel form{width:min(380px,100%)}
.login-panel h2{font-size:var(--fs-3xl)}
.login-panel h2+.muted{margin-top:var(--s2)}
.login-panel form>label:first-of-type{margin-top:var(--s8)}
.login-panel .primary{width:100%;min-height:48px;margin-top:var(--s6);font-size:var(--fs-lg)}
.help{margin-top:var(--s8);color:var(--c-muted);font-size:var(--fs-sm);line-height:1.7}

/* ---------- 틀: 관리자 왼쪽 메뉴 ---------- */
aside{position:fixed;top:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;width:var(--aside-w);padding:var(--s6) var(--s4);overflow-y:auto;background:var(--c-nav);color:var(--c-nav-ink)}
.nav-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s8)}
.nav-top .logo{height:40px;padding:0 var(--s3);font-size:var(--fs-xl)}
#menu-toggle{display:none;border-color:var(--c-nav-line);background:var(--c-nav-2);color:#fff}
.brand-message,.brand-phone{display:none}
#nav{display:flex;flex-direction:column;gap:var(--s1)}
#nav a{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:0 var(--s3);border-radius:var(--r-md);color:var(--c-nav-ink);font-weight:600}
#nav a:hover{background:var(--c-nav-2);color:#fff}
#nav a.active{background:var(--c-nav-3);color:#fff}
.account{position:relative;margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--c-nav-line)}
.account summary{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:var(--s2);border-radius:var(--r-md);color:#fff}
.account summary:hover{background:var(--c-nav-2)}
.avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--c-nav-3);color:var(--c-nav-soft)}
.account-text{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.35}
#account-name{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
#account-role{color:var(--c-nav-ink);font-size:var(--fs-xs)}
.account-caret{color:var(--c-nav-ink);transition:transform .2s}
.account[open] .account-caret{transform:rotate(180deg)}
.account-actions{display:grid;gap:var(--s1);padding-top:var(--s2)}
.account-actions button{justify-content:flex-start;min-height:40px;border:0;background:transparent;color:var(--c-nav-ink);font-weight:500}
.account-actions button:hover{background:var(--c-nav-2);color:#fff}
main{min-width:0;margin-left:var(--aside-w);padding:var(--s8) var(--gutter) var(--s6)}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s6)}
.page-title{min-width:0}
.back-link{display:inline-flex;align-items:center;gap:var(--s1);margin-bottom:var(--s2);color:var(--c-muted);font-size:var(--fs-sm);font-weight:600}
.back-link:hover{color:var(--c-primary)}
.header-right{display:flex;flex:none;align-items:center;gap:var(--s3);color:var(--c-muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
footer{display:flex;justify-content:flex-end;margin-top:var(--s10);padding-top:var(--s4);border-top:1px solid var(--c-line);color:var(--c-faint);font-size:var(--fs-xs)}

/* ---------- 틀: 고객 머리 영역 ---------- */
.customer-view aside{position:relative;top:auto;bottom:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s6);width:auto;padding:var(--s3) max(var(--gutter),calc((100% - var(--content-max)) / 2));overflow:visible}
.customer-view .nav-top{margin:0}
.customer-view #nav,.customer-view #menu-toggle,.customer-view #account-role{display:none}
.customer-view .brand-message{display:block;color:var(--c-nav-soft);font-size:var(--fs-md)}
/* 상단 전화번호 (10-27 고객 요청으로 다시 넣음) */
.customer-view .brand-phone{display:block;margin-left:auto;color:var(--c-nav-soft);font-size:var(--fs-md);font-weight:600;font-variant-numeric:tabular-nums}
.customer-view .brand-phone:hover{color:#fff}
.customer-view .account{margin:0;padding:0;border:0}
.customer-view .account summary{min-height:40px;padding:var(--s1) var(--s3) var(--s1) var(--s1);border:1px solid var(--c-nav-line);border-radius:var(--r-pill)}
.customer-view .account-actions{position:absolute;top:calc(100% + var(--s2));right:0;z-index:30;min-width:184px;padding:var(--s2);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-md)}
.customer-view .account-actions button{color:var(--c-ink)}
.customer-view .account-actions button:hover{background:var(--c-surface-3);color:var(--c-ink)}
.customer-view main{max-width:calc(var(--content-max) + 2 * var(--gutter));margin:0 auto;padding:var(--s8) var(--gutter) var(--s6)}

/* ---------- 장비 목록 ---------- */
.customer-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);max-width:720px;margin-bottom:var(--s5)}
.customer-stats>div{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s4) var(--s5);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.customer-stats span{color:var(--c-muted);font-size:var(--fs-sm)}
.customer-stats strong{font-size:var(--fs-3xl);line-height:1.15;font-variant-numeric:tabular-nums}
.customer-stats .has-issue strong{color:var(--c-bad)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.toolbar>p{max-width:640px}
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-left:auto}
.filters input,.filters select{width:auto;margin:0}
.filters input{min-width:240px}
.filters select{min-width:144px}
.server-status{margin-bottom:var(--s4);color:var(--c-muted);font-size:var(--fs-sm)}
.server-status b{color:var(--c-ink)}
.sensor-list{overflow:hidden;container-type:inline-size}
.sensor-list table{table-layout:fixed;white-space:normal}
.sensor-list th:nth-child(1){width:15%}
.sensor-list th:nth-child(2){width:25%}
.sensor-list th:nth-child(3){width:15%;text-align:center}
.sensor-list th:nth-child(4){width:9%}
.sensor-list th:nth-child(5){width:12%}
.sensor-list th:nth-child(6){width:24%;text-align:right}
.sensor-list td{padding:var(--s4)}
/* 센서종류는 크게 (10-27 고객 요청) */
.sensor-label{color:var(--c-ink);font-size:var(--fs-lg);font-weight:700}
.sensor-name a{color:var(--c-ink);font-size:var(--fs-lg);font-weight:700}
.sensor-name a:hover{color:var(--c-primary)}
.sensor-name small{line-height:1.5}
.sensor-name .device-owner a{color:var(--c-primary);font-size:var(--fs-xs);font-weight:500}
.sensor-reading{text-align:center}
.sensor-unit{color:var(--c-muted);font-size:var(--fs-sm)}
.sensor-actions{text-align:right;white-space:nowrap}
.sensor-actions>*+*{margin-left:var(--s2)}
.reading-chip{display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:48px;padding:0 var(--s4);border-radius:var(--r-lg);color:#fff;font-size:var(--fs-reading);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #00000030}
.level-blue{background:var(--lv-blue)}
.level-green{background:var(--lv-green)}
.level-orange{background:var(--lv-orange)}
.level-red{background:var(--lv-red)}
.level-neutral{background:var(--lv-neutral)}
.unit-inline{display:none}
.monitoring-guide>p{padding:0 var(--s6);color:var(--c-muted);font-size:var(--fs-sm);line-height:1.7}
.monitoring-guide .table-wrap{margin:var(--s4) var(--s6) var(--s6);border:1px solid var(--c-line);border-radius:var(--r-md)}

/* ---------- 장비 상세 ---------- */
.detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:calc(-1 * var(--s3)) 0 var(--s5);color:var(--c-muted);font-size:var(--fs-sm)}
.detail-meta .quiet{margin-left:auto}
.reading-cards{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s4);margin-bottom:var(--s6)}
.reading-cards.admin{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-label{color:var(--c-muted);font-size:var(--fs-sm)}
.card-value{margin-top:var(--s3);font-size:var(--fs-2xl);font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.card-sub{margin-top:var(--s1);color:var(--c-muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.sensor-title{margin-top:var(--s1);font-size:var(--fs-2xl);font-weight:700}
.reading-now{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s3)}
.reading-now .reading-chip{min-width:128px;height:64px;font-size:var(--fs-reading-lg)}
.reading-unit{display:flex;flex-direction:column;color:var(--c-ink-2);font-size:var(--fs-lg);font-weight:600}
.reading-unit small{margin-top:var(--s1);color:var(--c-muted);font-size:var(--fs-sm);font-weight:500}
.history-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s4) var(--s6) 0}
.date-range{display:flex;align-items:center;gap:var(--s2)}
.date-range label{margin:0}
.date-range input{width:168px;margin:0}
.range-sep{color:var(--c-faint)}
.downloads{display:flex;gap:var(--s2);margin-left:auto}
.download-hint{padding:var(--s2) var(--s6) 0;color:var(--c-muted);font-size:var(--fs-xs);text-align:right}
.chart-wrap{position:relative;padding:var(--s4) var(--s6) 0}
.chart-wrap svg{display:block;max-width:100%;height:auto;overflow:visible;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.chart-wrap .empty{padding:var(--s10) 0}
.grid-line{stroke:var(--c-grid);stroke-width:1}
.axis-line{stroke:var(--c-line-strong);stroke-width:1}
.chart-text{fill:var(--c-muted);font-family:var(--font);font-size:12px}
.chart-line{fill:none;stroke:var(--c-chart);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart-cursor{stroke:var(--c-ink-2);stroke-width:1;stroke-dasharray:3 3}
.chart-dot{fill:var(--c-surface);stroke:var(--c-chart);stroke-width:2}
.chart-tip{position:absolute;top:0;padding:var(--s1) var(--s2);border-radius:var(--r-sm);background:var(--c-ink);color:#fff;font-size:var(--fs-xs);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;transform:translateX(-50%)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);padding:var(--s3) var(--s6) var(--s5);color:var(--c-muted);font-size:var(--fs-xs)}
.legend-key{display:inline-flex;align-items:center;gap:var(--s2);color:var(--c-ink-2);font-weight:600}
.legend-key::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--c-chart)}
#history-table th:first-child,#history-table td:first-child{padding-left:var(--s6)}
#history-table th:last-child,#history-table td:last-child{padding-right:var(--s6)}

/* ---------- 관리자 화면 ---------- */
.admin-list-heading{margin-bottom:var(--s5)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.workspace-description{margin-bottom:var(--s5);line-height:1.7}
.list-search{max-width:520px;margin:0 0 var(--s4)}
.company-search{flex:1;max-width:520px;margin:0}
.company-list{display:grid;gap:var(--s3)}
.company-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(120px,.8fr) minmax(180px,1fr) auto;align-items:center;gap:var(--s6);padding:var(--s5) var(--s6);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);color:var(--c-ink);transition:border-color .15s,box-shadow .15s}
.company-row:hover{border-color:var(--c-primary-line);box-shadow:var(--sh-md);color:var(--c-ink)}
.company-identity strong{font-size:var(--fs-xl)}
.company-row small{display:block;margin-top:var(--s1);color:var(--c-muted);font-size:var(--fs-xs);line-height:1.5}
.company-count b{font-size:var(--fs-2xl);font-variant-numeric:tabular-nums}
.company-period{font-size:var(--fs-sm)}
.company-open{color:var(--c-primary);font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.stats-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5)}
.stats-row .customer-stats{flex:1;margin:0}
.settings-body{padding:0 var(--s6) var(--s6);border-top:1px solid var(--c-line)}
.settings-body .toolbar{margin:var(--s4) 0}
.settings-body .table-wrap{border:1px solid var(--c-line);border-radius:var(--r-md)}
.settings-body h3{margin-top:var(--s2)}
#profile-form>button{margin-top:var(--s4)}
.form-section{padding:var(--s6)}
.form-section h3{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.form-section p{margin-top:var(--s2)}
.form-section .toolbar{margin-bottom:var(--s2)}
.form-section .toolbar p{margin-top:var(--s1)}
#display-edit{margin-top:var(--s4)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.step{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-primary-soft);color:var(--c-primary);font-size:var(--fs-sm)}
#delivery-devices{display:grid;gap:var(--s3)}
.delivery-device{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--c-line)}
.delivery-device label{margin:0}
.check-label{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3)}
/* 추가등록: 이미 설치된 장비와 기존 고객 정보 */
.existing-list{margin-bottom:var(--s4);padding:var(--s3) var(--s4);background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:var(--r-md)}
.form-section .existing-title{margin:0 0 var(--s2);font-weight:600}
.existing-title .muted{margin-left:var(--s2);font-size:var(--fs-sm);font-weight:400}
.existing-list ul{margin:0;padding-left:var(--s5)}
.existing-list li{margin:var(--s1) 0}
.existing-list .table-wrap{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-sm)}
#delivery-form .primary{margin-top:var(--s4)}

/* ---------- 좁은 화면 ---------- */
/* 표가 좁아 두 버튼이 한 줄에 안 들어가면 위아래로 놓는다. 창 폭이 아니라 표 폭으로 본다 (10-27: 관리자 약 1100~1370px·고객 약 770~1130px 창에서 「기록·다운로드」가 잘렸다) */
@container (max-width:1100px){
 .sensor-actions{white-space:normal}
 .sensor-actions>*{width:100%}
 .sensor-actions>*+*{margin:var(--s2) 0 0}
}
@media (max-width:1100px){
 .reading-cards.admin{grid-template-columns:repeat(2,minmax(0,1fr))}
 .company-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s4)}
 .company-count,.company-open{justify-self:end;text-align:right}
 .downloads{margin-left:0}
 .download-hint{text-align:left}
}
@media (max-width:768px){
 /* 관리자: 위쪽 막대 + 메뉴 버튼 */
 aside{position:sticky;bottom:auto;width:auto;padding:var(--s3) var(--gutter);overflow:visible}
 .nav-top{margin:0}
 #menu-toggle{display:inline-flex}
 #shell:not(.customer-view) #nav,#shell:not(.customer-view) .account{display:none}
 #shell.menu-open #nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s3)}
 #shell.menu-open .account{display:block;margin-top:var(--s3)}
 main{margin-left:0;padding:var(--s6) var(--gutter) var(--s5)}
 .page-header{align-items:flex-start;margin-bottom:var(--s5)}
 #clock,.label-wide{display:none}
 #refresh{width:var(--control-h);padding:0}
 .logo{height:40px;font-size:var(--fs-xl)}

 /* 고객 머리 영역: 1줄 로고·계정, 2줄 문구·전화 */
 .customer-view aside{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3);padding:var(--s3) var(--gutter)}
 .customer-view .nav-top{grid-column:1;grid-row:1}
 .customer-view .account{grid-column:2;grid-row:1;align-self:center;margin:0}
 .customer-view .brand-message{grid-column:1;grid-row:2;font-size:var(--fs-xs)}
 .customer-view .brand-phone{grid-column:2;grid-row:2;margin:0;font-size:var(--fs-xs);text-align:right}
 .customer-view main{padding:var(--s6) var(--gutter) var(--s5)}

 .customer-stats{gap:var(--s2)}
 .customer-stats>div{padding:var(--s3) var(--s4)}
 .customer-stats strong{font-size:var(--fs-2xl)}
 .toolbar{align-items:stretch}
 .filters{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;margin-left:0}
 .filters input{min-width:0}
 .filters select{min-width:120px}
 #shell:not(.customer-view) .filters{grid-template-columns:1fr}

 /* 장비 목록: 표 대신 카드 */
 .sensor-list table,.sensor-list tbody{display:block}
 .sensor-list thead{display:none}
 .sensor-list tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s4);padding:var(--s4);border-bottom:1px solid var(--c-line)}
 .sensor-list tr:last-child{border-bottom:0}
 .sensor-list td{padding:0;border:0}
 .sensor-list .sensor-label{grid-column:1;grid-row:1;color:var(--c-ink-2);font-size:var(--fs-lg);font-weight:700}
 .sensor-list .sensor-name{grid-column:1;grid-row:2}
 .sensor-list .sensor-state{grid-column:1;grid-row:3;padding-top:var(--s1)}
 .sensor-list .sensor-reading{grid-column:2;grid-row:1/3;align-self:center}
 .sensor-list .sensor-unit{grid-column:2;grid-row:3;text-align:center;font-size:var(--fs-xs)}
 .sensor-list .sensor-actions{grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s3);white-space:normal}
 .sensor-list .sensor-actions>*{width:auto;min-height:var(--control-h);margin:0}
 .sensor-list .reading-chip{min-width:96px;height:44px;font-size:var(--fs-2xl)}
 .sensor-list .unit-inline{display:inline}
 .sensor-list .sensor-unit{display:none}
 .stats-row{flex-direction:column;align-items:stretch}
 .monitoring-guide>p{padding:0 var(--s4)}
 .monitoring-guide .table-wrap{margin:var(--s4)}
 details.panel>summary{padding:0 var(--s4)}

 /* 상세: 기간 버튼 → 날짜 → 조회 → 다운로드 순서로 위에서 아래 */
 .detail-meta{display:grid;grid-template-columns:auto 1fr;margin-top:calc(-1 * var(--s2))}
 .detail-meta>.badge{justify-self:start}
 .detail-meta>span:not(.badge){grid-column:1/-1;grid-row:2}
 .detail-meta .quiet{grid-column:2;grid-row:1;justify-self:end;margin:0}
 /* 현재값 카드 아래의 정보 카드는 관리자·고객 모두 한 줄씩 묶은 목록으로 */
 .reading-cards,.reading-cards.admin{grid-template-columns:1fr;gap:0}
 .reading-card{margin-bottom:var(--s3)}
 .card{padding:var(--s4)}
 .reading-cards>.card:not(.reading-card){display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);border-top-width:0;border-radius:0;box-shadow:none}
 .reading-cards>.reading-card+.card{border-top-width:1px;border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
 .reading-cards>.card:not(.reading-card):last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg);box-shadow:var(--sh-sm)}
 .reading-cards>.card:not(.reading-card) .card-value{margin:0;font-size:var(--fs-lg)}
 .reading-cards>.card:not(.reading-card) .card-sub{margin:0}
 .panel-head{padding:var(--s4)}
 .history-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s4) var(--s4) 0}
 .segmented{display:flex;width:100%}
 .segmented button{flex:1;padding:0 var(--s2)}
 .date-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 .date-range input{width:100%}
 .date-range button{grid-column:1/-1}
 .downloads{display:grid;grid-template-columns:1fr 1fr}
 .downloads .button-link{padding:0 var(--s2)}
 .download-hint{padding:var(--s2) var(--s4) 0}
 .chart-wrap{padding:var(--s3) var(--s4) 0}
 .legend{padding:var(--s3) var(--s4) var(--s4)}
 .year{display:none}
 #history-table th,#history-table td{padding:var(--s3) var(--s2)}
 #history-table th:first-child,#history-table td:first-child{padding-left:var(--s4)}
 #history-table th:last-child,#history-table td:last-child{padding-right:var(--s4)}

 /* 관리자 화면 */
 .workspace-tabs{display:flex;width:100%}
 .workspace-tabs a{flex:1;padding:0 var(--s2)}
 .admin-list-heading .actions{width:100%}
 .admin-list-heading .actions>*{flex:1}
 .company-row{padding:var(--s4)}
 .company-identity strong{font-size:var(--fs-lg)}
 .settings-body{padding:0 var(--s4) var(--s4)}
 .form-section{padding:var(--s4)}
 .form-grid{grid-template-columns:1fr}
 .delivery-device{grid-template-columns:1fr 1fr}
 .delivery-device label:first-child{grid-column:1/-1}
 .delivery-device button{grid-column:1/-1;justify-self:end}

 /* 로그인 */
 .login-layout{display:flex;flex-direction:column}
 .login-story{gap:var(--s5);padding:var(--s6) var(--gutter) var(--s8)}
 .login-copy{margin:0}
 .login-copy p{display:none}
 .login-panel{display:block;padding:var(--s8) var(--gutter)}
 .login-panel form{width:100%;max-width:440px;margin:0 auto}
 .login-panel form>label:first-of-type{margin-top:var(--s6)}

 dialog{padding:var(--s5)}
 .form-actions>*{flex:1}
 footer{justify-content:flex-start}
}
@media (max-width:480px){
 /* 일반 폰: 날짜 칸 끝 숫자가 잘리지 않게 시작일·종료일을 한 줄씩 (10-27 고객 요청) */
 .date-range{grid-template-columns:minmax(0,1fr)}
 .range-sep{justify-self:center;line-height:1}
}
@media (max-width:420px){
 .reading-now .reading-chip{min-width:112px;height:56px}
 .segmented button{font-size:var(--fs-sm)}
}