/* ===== EASY CCP base styles ===== */
:root{
  --blue:#2c5dc7; --ink:#1f2a3a; --muted:#7385a0; --line:#e7edf5;
  --bg:#eef2f8; --card:#fff; --ok:#16a34a; --bad:#dc2626;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Pretendard',-apple-system,'Malgun Gothic',sans-serif;background:var(--bg);color:var(--ink);}
a{text-decoration:none;color:inherit;}
.muted{color:var(--muted);}
code{background:#f1f5f9;padding:1px 6px;border-radius:6px;font-size:.92em;}

/* ===== Topbar ===== */
.topbar{height:56px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:20;}
.topbar .brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--blue);}
.topbar .brand .logo{font-size:20px;}
.topbar .sp{flex:1;}
.topbar .lang select{height:32px;border:1px solid #cdd8e6;border-radius:8px;padding:0 8px;background:#fff;font-size:13px;}
.topbar .user{display:flex;align-items:center;gap:10px;}
.topbar .uname{font-size:13px;font-weight:700;color:#43506a;}
.btn-logout{height:32px;padding:0 12px;border:1px solid #cdd8e6;background:#fff;border-radius:8px;font-size:12.5px;font-weight:700;color:#43506a;cursor:pointer;}
.btn-logout:hover{background:#f4f7fb;}

/* ===== Shell / Side / Content ===== */
.shell{display:flex;min-height:calc(100vh - 56px);}
.side{width:230px;flex:0 0 230px;background:var(--card);border-right:1px solid var(--line);padding:12px 10px;}
.side-h{font-size:12px;font-weight:800;color:var(--muted);padding:6px 10px;letter-spacing:.3px;}
.menu{list-style:none;}
.menu li{margin:2px 0;}
.menu a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;font-size:14px;font-weight:600;color:#42506a;}
.menu a:hover{background:#f4f7fb;}
.menu a.active{background:#eaf0fb;color:var(--blue);}
.menu .ic{width:20px;text-align:center;}
.menu .muted{padding:9px 11px;font-size:13px;}
.menu .folder{font-size:11.5px;font-weight:800;color:var(--muted);padding:10px 11px 4px;}
.content{flex:1;padding:18px 22px;min-width:0;}

/* ===== Page bits ===== */
.page-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.page-h h1{font-size:20px;font-weight:800;}
.badge{font-size:11px;font-weight:800;color:#b45309;background:#fffbeb;border:1px solid #fde3b3;border-radius:999px;padding:3px 9px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(20,45,90,.05);margin-bottom:14px;}
.panel-h{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:800;font-size:14px;}
.panel-b{padding:16px;}
.panel-b.empty{padding:34px;text-align:center;color:var(--muted);}

.kpi-row{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.kpi{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;display:flex;flex-direction:column;gap:4px;}
.kpi .kl{font-size:12px;color:var(--muted);font-weight:700;}
.kpi .kv{font-size:24px;font-weight:800;}

.cards{display:flex;gap:14px;flex-wrap:wrap;}
.card-link{display:block;}
.card{width:240px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(20,45,90,.05);transition:transform .12s;}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,45,90,.12);}
.card-ic{font-size:26px;}
.card-ti{font-size:16px;font-weight:800;margin-top:8px;}
.card-de{font-size:12.5px;color:var(--muted);margin-top:4px;}

/* ===== Login ===== */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dbe6fb,#eef2f8);}
.login-card{width:360px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(20,45,90,.15);padding:30px 28px;}
.login-logo{font-size:22px;font-weight:800;color:var(--blue);text-align:center;}
.login-sub{text-align:center;color:var(--muted);font-size:13px;margin:4px 0 18px;}
.login-card label{display:block;font-size:12.5px;font-weight:700;color:#46556e;margin:10px 0 5px;}
.login-card input{width:100%;height:40px;border:1px solid #cdd8e6;border-radius:9px;padding:0 12px;font-size:14px;}
.btn-login{width:100%;height:42px;margin-top:18px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:15px;font-weight:800;cursor:pointer;}
.btn-login:hover{filter:brightness(1.07);}
.login-err{background:#fef2f2;color:#b4232a;border:1px solid #fecaca;border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:8px;}
.login-ok{background:#ecfdf5;color:#15803d;border:1px solid #bbf0db;border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:8px;}
.login-hint{text-align:center;font-size:12px;color:var(--muted);margin-top:14px;}

/* ===== 공통 그리드(.tbl) 가독성 — 전 화면 일괄 적용 (템플릿 인라인 스타일 덮어쓰기) ===== */
.tbl th{ color:var(--grid-head-fg,#0f1830) !important; background:var(--grid-head,#a9b8d4) !important; font-weight:800 !important; border-bottom:1px solid var(--grid-head-bd,#8c9cbd) !important; }
.tbl tr:hover td{ background:var(--grid-hover,#bccdee) !important; }
/* 상태 색이 있는 행(데이터 로그 등)은 호버 시에도 해당 색 유지 */
.tbl tr.ralarm:hover td{ background:#f3bcc4 !important; }
.tbl tr.rdoor:hover td{ background:#f7d2a6 !important; }
.tbl tr.rdefrost:hover td{ background:#bfd2f1 !important; }
.tbl tr.rnormal:hover td{ background:#bccdee !important; }