/* =====================================================================
 * 세진인포 정보통신설비 유지보수·관리 시스템 — 화면 스타일
 * 글꼴 : Noto Sans KR (없으면 맑은 고딕으로 자동 대체)
 * ===================================================================== */
:root{
  /* 색상 */
  --blue:#1b5fa8; --blue-d:#123f72; --blue-l:#e9f1fb; --blue-s:#2b7bd0;
  --line:#dfe5ec; --line-s:#eef1f5; --bg:#f1f4f8; --card:#ffffff;
  --txt:#151b23; --txt-2:#4a5561; --muted:#7a8694;
  --ok:#0f7a3d; --ok-bg:#e6f6ec; --ng:#c8252b; --ng-bg:#fdecec;
  --warn:#a96a05; --warn-bg:#fff6e5;

  /* 글자 크기 단계 */
  --fs-xs:11.5px;   /* 라벨 보조·캡션 */
  --fs-sm:12.5px;   /* 설명문 */
  --fs-td:13.5px;   /* 표 본문 */
  --fs-base:14.5px; /* 기본 */
  --fs-lg:16px;     /* 카드 제목 */
  --fs-xl:19px;     /* 섹션 제목 */
  --fs-2xl:24px;    /* 페이지 제목 */
  --fs-num:26px;    /* 통계 숫자 */

  --r:10px;         /* 모서리 */
  --r-sm:7px;
  --sh:0 1px 2px rgba(16,32,52,.05), 0 2px 10px rgba(16,32,52,.05);
  --sh-h:0 2px 6px rgba(16,32,52,.09), 0 8px 24px rgba(16,32,52,.08);

  --font:"Noto Sans KR","Malgun Gothic","맑은 고딕",-apple-system,
         "Apple SD Gothic Neo","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);
  font-size:var(--fs-base); font-weight:400; line-height:1.6;
  color:var(--txt); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
a{color:var(--blue);text-underline-offset:2px}
::selection{background:#cfe2f8}

/* ---------- 로그인 ---------- */
.login-wrap{height:100%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 20% 0%,#2b7bd0 0%,#1b5fa8 45%,#0d2c52 100%)}
.login-box{background:var(--card);padding:38px 34px 32px;border-radius:16px;width:370px;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-box .logo{font-size:26px;font-weight:900;color:var(--blue);letter-spacing:-.6px;
  margin-bottom:14px;padding-bottom:14px;border-bottom:2px solid var(--line-s)}
.login-box h1{font-size:20px;font-weight:700;margin:0 0 6px;line-height:1.45;color:var(--blue-d);letter-spacing:-.3px}
.login-box .sub{margin:0 0 24px;color:var(--muted);font-size:var(--fs-sm);font-weight:400}
.login-box label{display:block;margin-bottom:14px;font-size:var(--fs-xs);font-weight:700;color:var(--txt-2)}
.login-box input{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:15px;font-weight:500;font-family:inherit}
.login-box .hint{margin:16px 0 0;font-size:var(--fs-xs);color:var(--muted);text-align:center}
.err{color:var(--ng);font-size:var(--fs-sm);font-weight:500;margin-top:12px;min-height:18px}

/* ---------- 상단 바 ---------- */
.topbar{height:58px;background:linear-gradient(180deg,#17538f,#123f72);color:#fff;
  display:flex;align-items:center;gap:12px;padding:0 18px;
  box-shadow:0 2px 10px rgba(9,29,54,.25);position:relative;z-index:5}
.topbar .brand{font-size:16.5px;font-weight:900;cursor:pointer;white-space:nowrap;letter-spacing:-.3px}
.topbar .brand span{font-weight:400;opacity:.82;font-size:14px;margin-left:4px;letter-spacing:0}
.topbar .ctx{background:rgba(255,255,255,.16);padding:6px 13px;border-radius:16px;
  font-size:var(--fs-sm);font-weight:700;max-width:34vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .who{font-size:var(--fs-sm);font-weight:500;opacity:.92;margin-right:4px}

/* ---------- 레이아웃 ---------- */
.body{display:flex;height:calc(100% - 58px)}
.side{width:224px;background:var(--card);border-right:1px solid var(--line);
  overflow:auto;flex:none;padding:14px 0 30px}
.side .grp{font-size:var(--fs-xs);font-weight:700;color:var(--muted);
  padding:16px 18px 6px;letter-spacing:.6px}
.side a{display:block;padding:10px 18px;color:var(--txt-2);text-decoration:none;
  font-size:var(--fs-base);font-weight:500;border-left:3px solid transparent;
  transition:background .12s,color .12s}
.side a:hover{background:var(--line-s);color:var(--txt)}
.side a.on{background:var(--blue-l);border-left-color:var(--blue);color:var(--blue-d);font-weight:700}
main{flex:1;overflow:auto;padding:24px 28px 70px}

/* ---------- 제목 ---------- */
h2.page{margin:0 0 6px;font-size:var(--fs-2xl);font-weight:900;letter-spacing:-.6px;color:var(--txt)}
p.desc{margin:0 0 20px;color:var(--muted);font-size:var(--fs-sm);font-weight:400}
.card > h3{margin:0 0 14px;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.3px;
  border-left:4px solid var(--blue);padding-left:10px;line-height:1.3}
.card > h3 + .desc{margin-top:-8px}

/* ---------- 카드 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 20px 18px;margin-bottom:18px;box-shadow:var(--sh)}

/* ---------- 폼 ---------- */
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.row:last-child{margin-bottom:0}
.f{display:flex;flex-direction:column;gap:5px}
.f > span{font-size:var(--fs-xs);font-weight:700;color:var(--txt-2);letter-spacing:-.1px}
.f.w1{width:118px}.f.w2{width:168px}.f.w3{width:230px}.f.w4{width:310px}
.f.grow{flex:1;min-width:190px}
input,select,textarea{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-td);font-weight:500;font-family:inherit;background:#fff;color:var(--txt);width:100%;
  transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:#aab3bd;font-weight:400}
input:hover,select:hover,textarea:hover{border-color:#c3ccd7}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue-s);
  box-shadow:0 0 0 3px rgba(43,123,208,.16)}
input[readonly]{background:#f4f6f9;color:var(--txt-2);font-weight:700}
textarea{resize:vertical;min-height:70px;line-height:1.7}

/* ---------- 버튼 ---------- */
.btn{border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:9px 16px;
  font-size:var(--fs-td);font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;
  color:var(--txt-2);transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.btn:hover{background:var(--blue-l);border-color:#bfd6ef;color:var(--blue-d)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 1px 3px rgba(27,95,168,.35)}
.btn.primary:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.btn.danger{color:var(--ng);border-color:#eccccc;background:#fff}
.btn.danger:hover{background:var(--ng-bg);border-color:#e2b3b3;color:var(--ng)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);font-weight:500}
.btn.ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.6)}
.btn.sm{padding:6px 11px;font-size:var(--fs-sm);font-weight:500}
.btn.block{width:100%;padding:13px;margin-top:10px;font-size:15px;font-weight:700}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:flex-end}
.toolbar .spacer{flex:1}

/* ---------- 표 ---------- */
table.grid{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  font-size:var(--fs-td);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
table.grid th,table.grid td{border-bottom:1px solid var(--line-s);border-right:1px solid var(--line-s);
  padding:9px 11px;text-align:left;vertical-align:middle}
table.grid th:last-child,table.grid td:last-child{border-right:0}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid th{background:#f3f6fa;font-weight:700;font-size:var(--fs-sm);color:var(--txt-2);
  white-space:nowrap;letter-spacing:-.1px;border-bottom:1px solid var(--line)}
table.grid td.c,table.grid th.c{text-align:center}
table.grid td.r,table.grid th.r{text-align:right}
table.grid tbody tr:hover{background:#f8fbfe}
table.grid input,table.grid select{padding:5px 8px;font-size:var(--fs-sm);font-weight:400;border-radius:5px}
table.grid td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
table.grid tfoot th,table.grid tr th.r{font-size:var(--fs-td)}

/* ---------- 배지 ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:11px;font-size:var(--fs-xs);
  font-weight:700;background:var(--line-s);color:var(--txt-2)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.ng{background:var(--ng-bg);color:var(--ng)}
.badge.na{background:#eef0f3;color:var(--muted)}

/* ---------- 안내 ---------- */
.empty{padding:52px 20px;text-align:center;color:var(--muted);font-size:var(--fs-td);
  background:#fff;border:1px dashed #ccd5df;border-radius:var(--r)}
.note{background:var(--warn-bg);border:1px solid #f0dcae;color:#7a5410;
  padding:13px 15px;border-radius:var(--r-sm);font-size:var(--fs-td);font-weight:500;
  line-height:1.7;margin-bottom:16px}
.note b{font-weight:700}

/* ---------- 점검 결과 3버튼 ---------- */
.res{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.res button{border:0;background:#fff;padding:6px 13px;cursor:pointer;
  font-size:var(--fs-sm);font-weight:700;font-family:inherit;color:var(--muted);
  border-left:1px solid var(--line);transition:background .1s,color .1s}
.res button:first-child{border-left:0}
.res button:hover{background:var(--line-s)}
.res button.on[data-v="O"]{background:var(--ok);color:#fff}
.res button.on[data-v="X"]{background:var(--ng);color:#fff}
.res button.on[data-v="-"]{background:#8b95a1;color:#fff}

/* ---------- 사진 ---------- */
.photos{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.photo{width:162px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:#fff;box-shadow:var(--sh)}
.photo img{width:100%;height:112px;object-fit:cover;display:block;background:#eef1f5;cursor:zoom-in}
.photo .cap{width:100%;border:0;border-top:1px solid var(--line-s);border-radius:0;
  font-size:var(--fs-xs);font-weight:400;padding:7px 8px}
.photo .cap:focus{box-shadow:none}
.photo .rm{width:100%;border:0;border-top:1px solid var(--line-s);background:#fdf6f6;color:var(--ng);
  font-size:var(--fs-xs);font-weight:700;padding:6px;cursor:pointer;font-family:inherit}
.photo .rm:hover{background:var(--ng-bg)}
.dropzone{border:2px dashed #ccd5df;border-radius:var(--r);padding:20px;text-align:center;
  color:var(--muted);font-size:var(--fs-td);font-weight:500;cursor:pointer;background:#fafcfe;
  transition:border-color .12s,background .12s}
.dropzone:hover,.dropzone.hot{border-color:var(--blue-s);background:var(--blue-l);color:var(--blue-d)}

/* ---------- 접기 패널 ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;
  background:#fff;overflow:hidden;box-shadow:var(--sh)}
.acc > .hd{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;
  background:#f7fafd;font-weight:700;font-size:var(--fs-base);color:var(--txt);
  border-bottom:1px solid transparent}
.acc > .hd:hover{background:var(--blue-l)}
.acc > .hd .cnt{font-weight:500;color:var(--muted);font-size:var(--fs-sm)}
.acc > .hd .allbtns{display:flex;gap:6px}
.acc > .bd{padding:16px;border-top:1px solid var(--line)}
.acc.closed > .bd{display:none}

/* ---------- 통계 박스 ---------- */
.sum{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.sum .box{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 20px;min-width:142px;box-shadow:var(--sh);transition:box-shadow .15s}
.sum .box:hover{box-shadow:var(--sh-h)}
.sum .box span{font-size:var(--fs-xs);font-weight:700;color:var(--muted);letter-spacing:-.1px}
.sum .box b{display:block;font-size:var(--fs-num);font-weight:900;margin-top:4px;
  color:var(--blue-d);line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.tot{font-size:22px;font-weight:900;color:var(--blue-d);font-variant-numeric:tabular-nums;letter-spacing:-.6px}

/* ---------- 알림 ---------- */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:#1b2430;color:#fff;
  padding:13px 24px;border-radius:24px;font-size:var(--fs-td);font-weight:500;z-index:9999;
  box-shadow:0 8px 28px rgba(0,0,0,.35);max-width:80vw;text-align:center}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .side{width:64px}
  .side a{font-size:0;padding:14px 0;text-align:center;border-left-width:0;border-top:1px solid transparent}
  .side a::first-letter{font-size:16px;font-weight:700}
  .side .grp{display:none}
  main{padding:16px 14px 60px}
  .topbar{padding:0 12px;gap:8px}
  .topbar .brand span{display:none}
  .topbar .ctx{max-width:38vw}
  h2.page{font-size:20px}
  .sum .box{min-width:110px;padding:12px 14px}
  .sum .box b{font-size:21px}
}
@media print{ body{background:#fff} }