/* ============================================================
   02. Layout — 로그인 · 헤더 · 사이드바 · 본문 · 설정 서브메뉴
   대웅그룹 민원 통합관리 시스템 (Daewoong VOC / FM Service Desk)
   ============================================================ */

/* ================= 로그인 ================= */
#loginScreen{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#101a3c 0%,#1B2A5E 45%,#26408F 100%);
}
.login-wrap{width:400px;background:#fff;border-radius:10px;padding:38px 36px 32px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-brand{text-align:center;margin-bottom:26px}
.login-brand .mark{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:18px;font-weight:800;letter-spacing:-.5px;color:var(--nav-800);flex-wrap:wrap;line-height:1.3}
.login-brand .mark img{width:26px;height:26px;border-radius:6px;object-fit:cover;flex:none}
.login-brand .sub{margin-top:7px;font-size:12px;color:var(--ink-500)}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--ink-700);margin-bottom:5px}
.fld input{width:100%;height:38px;padding:0 11px;border:1px solid var(--ink-300);border-radius:var(--r);outline:none}
.fld input:focus{border-color:var(--pri-600);box-shadow:0 0 0 3px var(--pri-100)}
.btn-login{width:100%;height:40px;margin-top:9px;background:var(--nav-800);color:#fff;font-size:13.5px;font-weight:700;border-radius:var(--r)}
.btn-login:hover{background:var(--nav-700)}
.login-hint{margin-top:16px;padding:10px 12px;background:var(--pri-050);border-left:3px solid var(--pri-600);border-radius:0 var(--r) var(--r) 0;font-size:11.5px;color:var(--ink-700);line-height:1.65}


/* ================= 앱 셸 ================= */
#app{display:none;min-height:100vh}
#app.on{display:block}
.hdr{
  position:fixed;top:0;left:0;right:0;height:var(--hd-h);z-index:100;background:#fff;
  border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 16px 0 0;
}
.hdr-logo{width:var(--sb-w);height:100%;display:flex;align-items:center;gap:8px;padding-left:17px;background:var(--nav-900);color:#fff;flex:none}
.hdr-logo img{width:26px;height:26px;border-radius:6px;object-fit:cover;flex:none}
.hdr-logo .nm{font-size:14px;font-weight:800;letter-spacing:-.3px}
.hdr-logo .vc{font-size:9.5px;font-weight:700;color:#8FA8E8;letter-spacing:1px;margin-left:1px}
.hdr-home{margin-left:14px;width:27px;height:27px;border:1px solid var(--line);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--ink-500);font-size:13px}
.hdr-home:hover{background:var(--bg-head)}
.hdr-path{margin-left:13px;font-size:11.5px;color:var(--ink-400)}
.hdr-path b{color:var(--ink-700);font-weight:600}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.ic-btn{width:27px;height:27px;border:1px solid var(--line);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--ink-500);font-size:12.5px;position:relative}
.ic-btn:hover{background:var(--bg-head)}
.ic-btn .bdg{position:absolute;top:-4px;right:-4px;min-width:14px;height:14px;padding:0 3px;background:#DC2626;color:#fff;font-size:9px;font-weight:700;border-radius:8px;display:flex;align-items:center;justify-content:center}
.hdr-user{display:flex;align-items:center;gap:7px;padding-left:11px;margin-left:5px;border-left:1px solid var(--line);cursor:pointer}
.hdr-user .av{width:25px;height:25px;border-radius:50%;background:var(--pri-100);color:var(--pri-700);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hdr-user .tx{font-size:11.5px;line-height:1.3}
.hdr-user .tx b{display:block;font-size:12px;font-weight:700}
.hdr-user .tx span{color:var(--ink-400);font-size:10.5px}
.btn-out{height:26px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:11.5px;color:var(--ink-500)}
.btn-out:hover{background:var(--bg-head)}

/* --- 사이드바 --- */
.sb{position:fixed;top:var(--hd-h);bottom:0;left:0;width:var(--sb-w);background:var(--nav-800);z-index:99;display:flex;flex-direction:column;overflow-y:auto}
.sb::-webkit-scrollbar-thumb{background:#3B4E8F}
.sb-grp{padding:15px 15px 5px;font-size:10.5px;font-weight:700;color:#8697C9;letter-spacing:.8px}
#sbNavSet{display:none!important}
#app.aff-hq #sbNavSet{display:contents!important}
.sb a.itm{display:flex;align-items:center;gap:9px;padding:8.5px 15px;font-size:12.5px;color:#C7D0EA;border-left:3px solid transparent}
.sb a.itm:hover{background:var(--nav-700);color:#fff}
.sb a.itm.on{background:var(--nav-600);color:#fff;font-weight:700;border-left-color:#7EA6F5}
.sb a.itm .i{width:15px;text-align:center;font-size:12.5px;opacity:.95}
.sb a.itm .cnt{margin-left:auto;min-width:18px;height:16px;padding:0 5px;background:rgba(255,255,255,.15);border-radius:9px;font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.sb a.itm.on .cnt{background:rgba(255,255,255,.28)}
.sb .sub a.itm{padding-left:38px;font-size:12px;color:#A9B6DD}
.sb-sec{margin-top:2px}
.sb-sec>.hd{display:flex;align-items:center;gap:9px;padding:8.5px 15px;font-size:12.5px;color:#C7D0EA;cursor:pointer;border-left:3px solid transparent}
.sb-sec>.hd:hover{background:var(--nav-700);color:#fff}
.sb-sec>.hd .ar{margin-left:auto;font-size:9px;transition:transform .18s}
.sb-sec.open>.hd{color:#fff}
.sb-sec.open>.hd .ar{transform:rotate(90deg)}
.sb-sec>.sub{display:none}
.sb-sec.open>.sub{display:block;background:rgba(0,0,0,.16);padding:2px 0}
.sb-me{margin-top:auto;padding:11px 15px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px;cursor:pointer}
.sb-me .av{width:26px;height:26px;border-radius:50%;background:#3E5AA8;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.sb-me .tx{font-size:11px;color:#C7D0EA;line-height:1.35;overflow:hidden}
.sb-me .tx b{display:block;color:#fff;font-size:11.5px;font-weight:700}
.sb-me .tx span{font-size:10px;color:#8697C9;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- 본문 --- */
.main{margin-left:var(--sb-w);padding:var(--hd-h) 0 0;min-height:100vh;display:flex;flex-direction:column}
.page{padding:18px 22px 12px;flex:1}
.pg-hd{display:flex;align-items:flex-start;margin-bottom:14px}
.pg-hd h2{font-size:18px;font-weight:800;letter-spacing:-.4px}
.pg-hd .sub{font-size:11.5px;color:var(--ink-500);margin-top:3px}
.pg-hd .acts{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ftr{border-top:1px solid var(--line);background:#fff;padding:11px 22px;font-size:11px;color:var(--ink-400);display:flex;align-items:center;gap:10px}
.ftr .rg{margin-left:auto;font-weight:700;color:var(--ink-500)}


/* --- 설정 좌측 서브메뉴 --- */
.set-wrap{display:grid;grid-template-columns:172px 1fr;gap:12px}
.set-nav{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:7px;box-shadow:var(--sh-card);align-self:start}
.set-nav button{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:var(--r);font-size:12.5px;color:var(--ink-700);font-weight:600}
.set-nav button:hover{background:var(--bg-head)}
.set-nav button.on{background:var(--pri-700);color:#fff;font-weight:700}