/* IZIXX ERP 공통 스타일 — 테마: izixx(기본, 이직스 고유 테마) / warm / dark */
/* izixx: 사내 IZIXX 프로그램(유지보수 테스트 툴·KPM862 점검 도구) 공통 색상 — 남색 항공 헤더 + 연한 회청색 작업영역 + 파란 주색 */
:root{--bg:#e9eef4;--panel:#fff;--ink:#173a5e;--sub:#526c86;--mut:#7d91a6;--line:#d3deea;--line2:#eef3f9;--acc:#0b57d0;--acc-ink:#fff;--acc2:#e4eefd;--acc3:#1469e8;
 --nav:#0a1d3a;--nav2:#13305c;--nav-ink:#d6e2f3;--nav-mut:#7f97bd;--tile1:#0d2a57;--tile2:#1557c0;
 --ok:#198a55;--okbg:#e3f4eb;--warn:#c56a00;--warnbg:#fff2df;--bad:#d84b5b;--badbg:#fce9eb;--info:#0b57d0;--infobg:#e7f0fd;
 --hdr1:#061630;--hdr2:#0b2a5a;
 --r:10px;--shadow:0 1px 2px rgba(16,42,80,.07),0 4px 14px rgba(16,42,80,.06);--font:"Pretendard","Malgun Gothic","맑은 고딕","Noto Sans KR","Noto Sans CJK KR",system-ui,sans-serif}
[data-theme=warm]{--bg:#f6f1ea;--ink:#2b2118;--sub:#7a6a5c;--mut:#a3958a;--line:#ece2d7;--line2:#f3ece4;--acc:#8b5a2b;--acc2:#f5e9dc;--acc3:#c08552;--nav:#2f2119;--nav2:#3d2b20;--nav-ink:#e9dccf;--nav-mut:#a8927f;--tile1:#5a3c29;--tile2:#9a6a44;--hdr1:#2f2119;--hdr2:#5a3c29;--info:#2f6fbf;--infobg:#e7f0fb;--shadow:0 1px 2px rgba(60,40,20,.06),0 4px 14px rgba(60,40,20,.05)}
[data-theme=dark]{--bg:#10151d;--panel:#18202b;--ink:#e3e9f1;--sub:#a3b1c2;--mut:#7a889a;--line:#283445;--line2:#1f2935;--acc:#4f8ff7;--acc-ink:#fff;--acc2:#1c2c45;--acc3:#6aa3ff;--nav:#0b1018;--nav2:#16202d;--nav-ink:#d6dde8;--nav-mut:#7d8898;--tile1:#13233d;--tile2:#1d3f78;--hdr1:#060b14;--hdr2:#0e1d36;
 --okbg:#173326;--warnbg:#3a2e1c;--badbg:#3d2026;--infobg:#172a44;--shadow:none}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;-webkit-text-size-adjust:100%}
a{color:var(--acc);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg.ic{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ---------- 레이아웃 ---------- */
#app{display:flex;height:100vh;height:100dvh}
#side{width:224px;background:var(--nav);color:var(--nav-ink);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s}
#side .brand{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer}
#side .brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--acc3),var(--acc));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex-shrink:0}
#side .brand b{display:block;font-size:15px;color:#fff;white-space:nowrap}
#side .brand small{display:block;font-size:11px;color:var(--nav-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
#side nav{flex:1;overflow-y:auto;padding:6px 0 10px}
#side nav{scrollbar-width:auto;scrollbar-color:rgba(255,255,255,.5) rgba(255,255,255,.07);position:relative}
#side nav::-webkit-scrollbar{width:10px}#side nav::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
#side nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.42);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
#side nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.65);background-clip:padding-box}
#side .navmore{position:sticky;bottom:0;display:none;justify-content:center;align-items:center;gap:4px;height:28px;cursor:pointer;font-size:11.5px;color:#fff;background:var(--nav2);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -8px 14px rgba(0,0,0,.25)}
#side .navmore:hover{background:#1b3f78}
#side nav.more .navmore{display:flex}
#side .grp{--gc:#5aa0ff;margin:5px 9px;padding:6px 8px 6px 6px;border-radius:11px;font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.2px;white-space:nowrap;cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);transition:background .15s,border-color .15s,transform .1s}
#side .grp:hover{background:color-mix(in srgb,var(--gc) 26%,transparent);border-color:color-mix(in srgb,var(--gc) 55%,transparent)}
#side .grp:active{transform:scale(.98)}
#side .grp:not(.shut){background:color-mix(in srgb,var(--gc) 20%,transparent);border-color:color-mix(in srgb,var(--gc) 45%,transparent);box-shadow:inset 3px 0 0 var(--gc)}
#side .grp .gt{display:flex;align-items:center;min-width:0}
#side .grp .gi{width:32px;height:32px;border-radius:10px;margin-right:10px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;background:linear-gradient(145deg,color-mix(in srgb,var(--gc) 45%,rgba(255,255,255,.10)),color-mix(in srgb,var(--gc) 18%,transparent));box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);flex:none}
#side .grp .gi img{width:27px;height:27px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));transition:transform .15s}
#side .grp:hover .gi img{transform:scale(1.1) rotate(-4deg)}
#side .grp .chev{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.10);color:#fff;transition:transform .15s,background .15s}
#side .grp.shut .chev{transform:rotate(-90deg)}
#side .grp:hover .chev{background:color-mix(in srgb,var(--gc) 60%,transparent)}
#side .grp .gb{margin-left:auto;margin-right:6px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e5484d;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(229,72,77,.25)}
#side .grp .gn{font-style:normal;font-size:10.5px;font-weight:800;background:var(--gc);color:#0b1830;border-radius:9px;padding:1px 7px;margin-left:7px}
#side a.mi{display:flex;align-items:center;gap:11px;padding:7px 18px;color:var(--nav-ink);font-size:13.5px;border-left:3px solid transparent;white-space:nowrap;position:relative}
#side a.mi:hover{background:var(--nav2);color:#fff}
#side a.mi.on{background:var(--nav2);color:#fff;border-left-color:var(--acc3)}
#side a.mi .bd{margin-left:auto}
#side .foot{padding:10px 16px;font-size:11px;color:var(--nav-mut);border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center}
body.rail #side{width:64px}body.rail #side .brand b,body.rail #side .brand small,body.rail #side .grp,body.rail #side a.mi span,body.rail #side .foot span{display:none}
body.rail #side a.mi{justify-content:center;padding:10px 0}body.rail #side a.mi .bd{position:absolute;top:3px;right:8px}
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#top{height:56px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:10px;flex-shrink:0}
#top .ttl{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
#top .sp{flex:1}
.srch{display:flex;align-items:center;gap:6px;background:var(--line2);border-radius:20px;padding:0 12px;height:34px;width:260px;color:var(--sub)}
.srch input{border:0;background:transparent;outline:0;flex:1;min-width:0}
.ib{width:36px;height:36px;border-radius:50%;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--sub)}
.ib:hover{background:var(--line2);color:var(--ink)}
.ib .bd{position:absolute;top:2px;right:0}
.globe small{position:absolute;bottom:2px;right:-2px;background:var(--acc);color:var(--acc-ink);font-size:8.5px;border-radius:5px;padding:0 3px;font-weight:700;line-height:13px}
.me{display:flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border-radius:20px;cursor:pointer;border:1px solid var(--line);background:var(--panel)}
.me:hover{background:var(--line2)}
.me .nm{font-size:13px;font-weight:600;white-space:nowrap}.me .st{font-size:11px;color:var(--sub)}
#view{flex:1;overflow:auto;padding:18px 22px 60px;-webkit-overflow-scrolling:touch}
#tabbar{display:none}
.bd{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.bd.blue{background:var(--info)}
/* ---------- 공통 컴포넌트 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.card>h3,.card .hd{margin:0 0 12px;font-size:15px;display:flex;align-items:center;gap:8px;font-weight:700}
.card .hd .r,.card>h3 .r{margin-left:auto;display:flex;gap:6px;align-items:center;font-weight:400}
.card.flat{box-shadow:none}
.pagehd{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pagehd h2{margin:0;font-size:19px}
.pagehd .r{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.banner{background:linear-gradient(110deg,var(--tile1),var(--tile2));color:#fff;border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.banner h2{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.banner .r{margin-left:auto;display:flex;gap:6px}
.banner .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 13px;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:13px;white-space:nowrap;color:var(--ink);line-height:1.3}
.btn:hover{border-color:var(--acc3)}
.btn.p{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.p:hover{filter:brightness(1.08)}
.btn.g{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.r{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:7px}
.btn.lg{padding:10px 18px;font-size:15px}
.btn:disabled{opacity:.45;cursor:default}
.btn .ic{width:16px;height:16px}
.tag{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:10px;font-size:11.5px;background:var(--line2);color:var(--sub);white-space:nowrap;line-height:18px}
.tag.ok{background:var(--okbg);color:var(--ok)}.tag.warn{background:var(--warnbg);color:var(--warn)}.tag.bad{background:var(--badbg);color:var(--bad)}.tag.info{background:var(--infobg);color:var(--info)}.tag.acc{background:var(--acc2);color:var(--acc)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:9px 14px;cursor:pointer;color:var(--sub);border-bottom:2px solid transparent;margin-bottom:-1px;font-size:13.5px;white-space:nowrap;display:flex;gap:5px;align-items:center}
.tabs a.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:700}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips a{padding:5px 12px;border-radius:16px;background:var(--panel);border:1px solid var(--line);cursor:pointer;font-size:12.5px;color:var(--sub);white-space:nowrap}
.chips a.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{background:var(--line2);color:var(--sub);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
table.t td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums}
table.t td.c,table.t th.c{text-align:center}
table.t tr.clk{cursor:pointer}table.t tr.clk:hover td{background:var(--acc2)}
table.t tr.hl td{background:var(--warnbg)}
table.t tr.sum td{font-weight:700;background:var(--line2)}
table.t tr.unread td{font-weight:700}
.tw{overflow:auto;-webkit-overflow-scrolling:touch}
/* 넓은 표: 표 영역 안에서 스크롤 → 아래 좌우 스크롤바가 항상 화면 안에 보이고, 제목 줄은 위에 고정 */
@media (min-width:900px){.mdl .tw{max-height:calc(100vh - 260px)}}
.t.nw td,.t.nw th{white-space:nowrap}
@media print{.tw{max-height:none!important;overflow:visible!important}}
.empty{padding:34px 10px;text-align:center;color:var(--mut);font-size:13px}
.muted{color:var(--mut);font-size:12px}.sub{color:var(--sub)}
.row{display:flex;gap:14px;flex-wrap:wrap}.flex{display:flex;align-items:center;gap:8px}.between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.split>*,.split-r>*,.split-l>*,.grid2>*,.grid3>*,.grid4>*,.home>*{min-width:0}
.split{display:grid;grid-template-columns:2fr 1fr;gap:14px}.split-r{display:grid;grid-template-columns:1fr 2fr;gap:14px}.split-l{display:grid;grid-template-columns:280px 1fr;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;cursor:pointer;box-shadow:var(--shadow)}
.kpi .l{font-size:12px;color:var(--sub)}.kpi .v{font-size:22px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}.kpi .v small{font-size:12px;font-weight:600;margin-left:2px}.kpi .s{font-size:11.5px;color:var(--mut);margin-top:2px}
.kpi.bad .v{color:var(--bad)}.kpi.warn .v{color:var(--warn)}.kpi.ok .v{color:var(--ok)}.kpi.acc .v{color:var(--acc)}
.bar{height:8px;background:var(--line2);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--acc);border-radius:4px}
.alert{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:9px;margin-bottom:8px;font-size:13px}
.alert.bad{background:var(--badbg)}.alert.warn{background:var(--warnbg)}.alert.info{background:var(--infobg)}.alert.ok{background:var(--okbg)}
.alert b{white-space:nowrap}
.list .it{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line2);cursor:pointer}
.list .it:last-child{border-bottom:0}
.list .it:hover{background:var(--acc2)}
.list .it .tx{flex:1;min-width:0}.list .it .tx>b,.list .it .tx>.t1{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.list .it .tx>span,.list .it .tx>.t2{display:block;font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .it .tm{font-size:11.5px;color:var(--mut);white-space:nowrap}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--acc3),var(--acc));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;position:relative}
.av.sm{width:26px;height:26px;font-size:11.5px}.av.lg{width:64px;height:64px;font-size:24px}
.av .dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--panel);background:#aaa}
.dot.on{background:#2ecc71}.dot.away{background:#f1c40f}.dot.busy{background:#e74c3c}.dot.off{background:#9aa}
/* 폼 */
.fm{display:grid;grid-template-columns:120px 1fr;gap:10px 12px;align-items:center}
.fm>label{font-size:13px;color:var(--sub)}
.fm .full{grid-column:1/-1}
input.in,select.in,textarea.in,.fm input:not([type=checkbox]):not([type=radio]):not([type=file]),.fm select,.fm textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:14px;outline:0}
.fm input:focus,.fm select:focus,.fm textarea:focus,input.in:focus,select.in:focus,textarea.in:focus{border-color:var(--acc3);box-shadow:0 0 0 3px var(--acc2)}
.fm textarea,textarea.in{min-height:90px;resize:vertical;line-height:1.5}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.check{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:13px}
.picks{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:36px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer}
.picks .tag{background:var(--acc2);color:var(--acc)}
/* 모달 */
#mask{position:fixed;inset:0;background:rgba(20,14,10,.45);display:none;align-items:center;justify-content:center;z-index:80;padding:16px}
#mask.on{display:flex}
.mdl{background:var(--panel);border-radius:14px;width:560px;max-width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.mdl.wide{width:860px}.mdl.xl{width:1100px}
.mdl .mh{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.mdl .mh .x{margin-left:auto}
.mdl .mb{padding:16px 18px;overflow:auto;flex:1}
.mdl .mf{padding:11px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
#toast{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:90;max-width:min(420px,calc(100vw - 30px))}
.ts{background:#2b2118;color:#fff;padding:11px 15px;border-radius:10px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.2);animation:tin .25s;cursor:pointer}
.ts.err{background:#a83a2e}.ts.ok{background:#2e7d4f}
@keyframes tin{from{transform:translateY(10px);opacity:0}}
/* 드롭다운 패널 */
.pop{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:70;display:none;flex-direction:column;max-height:70vh}
.pop.on{display:flex}
.pop .ph{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;font-weight:700}
.pop .pb{overflow:auto;flex:1}
.menu a{display:flex;align-items:center;gap:9px;padding:9px 14px;color:var(--ink);cursor:pointer;font-size:13.5px}
.menu a:hover{background:var(--acc2)}
/* 홈 */
.home{display:grid;grid-template-columns:250px 1fr 300px;gap:14px;align-items:start}
.prof{background:linear-gradient(160deg,var(--tile1),var(--tile2));color:#fff;border-radius:var(--r);padding:20px 16px;text-align:center}
.prof .av{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.5)}
.prof .nm{font-size:16px;font-weight:700;margin-top:10px}.prof .dp{font-size:12px;opacity:.8;margin-top:2px}
.prof .stt{display:inline-block;margin-top:10px;padding:2px 12px;border:1px solid rgba(255,255,255,.5);border-radius:12px;font-size:12px}
.prof .btn{width:100%;margin-top:12px;background:#fff;color:var(--tile1);border:0;font-weight:700;padding:9px}
.quick a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--ink);cursor:pointer;background:var(--line2);margin-bottom:6px;font-size:13px}
.quick a:hover{background:var(--acc2)}
.quick a .qi{width:28px;height:28px;border-radius:8px;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--acc)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border-radius:var(--r);overflow:hidden;background:var(--tile1)}
.tile{position:relative;padding:14px 14px 40px;color:#fff;min-height:200px;cursor:pointer;overflow:hidden}
.tile:nth-child(odd){background:color-mix(in srgb,var(--tile1) 90%,#000)}.tile:nth-child(even){background:color-mix(in srgb,var(--tile2) 75%,var(--tile1))}
.tile:hover{filter:brightness(1.08)}
.tile .th{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;opacity:.95}.tile .th b{font-size:22px}
.tile .ti{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border-radius:8px;padding:6px 8px;margin-top:7px;font-size:12px}
.tile .ti .av{width:22px;height:22px;font-size:10px;background:#fff;color:var(--tile1)}
.tile .ti .tt{flex:1;min-width:0}.tile .ti .tt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.tile .ti .tt span{display:block;font-size:10.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .ti .tm{font-size:10px;opacity:.7}
.tile .bgi{position:absolute;right:10px;bottom:8px;opacity:.22}.tile .bgi svg{width:44px;height:44px;stroke:#fff}
/* 모바일 아이콘 그리드 (더보기) */
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px 8px}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;font-size:12.5px;position:relative}
.app .ai{width:58px;height:58px;border-radius:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.35);position:relative}
.app .ai svg{width:28px;height:28px;stroke:#fff;stroke-width:1.9}
.app .ai .bd{position:absolute;top:-6px;right:-8px;box-shadow:0 0 0 2px var(--bg)}
/* 캘린더 공용 */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal .hd{text-align:center;font-size:12px;color:var(--sub);padding:4px}
.cal .d{background:var(--panel);border:1px solid var(--line);border-radius:7px;min-height:86px;padding:3px 5px;font-size:11.5px;cursor:pointer;overflow:hidden}
.cal .d .n{color:var(--sub);font-weight:700;font-size:12px}
.cal .d.today{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.cal .d.out{opacity:.45}.cal .d.sun .n{color:var(--bad)}.cal .d.sat .n{color:var(--info)}
.cal .ev{border-radius:4px;padding:0 4px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;background:var(--acc);font-size:11px;line-height:17px}
/* 채팅 */
.chat{display:flex;flex-direction:column;height:100%}
.msgs{flex:1;overflow:auto;padding:12px;background:var(--line2);border-radius:10px}
.msg{display:flex;gap:8px;margin-bottom:10px;align-items:flex-end}
.msg .bub{max-width:70%;background:var(--panel);border:1px solid var(--line);padding:8px 11px;border-radius:12px;white-space:pre-wrap;word-break:break-word;font-size:13.5px}
.msg.me{flex-direction:row-reverse}.msg.me .bub{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.msg .who{font-size:11.5px;color:var(--sub);margin-bottom:2px}.msg .tm{font-size:10.5px;color:var(--mut);white-space:nowrap}
/* 결재 문서 (인쇄 양식) */
.doc{border:1px solid #444;padding:22px 26px;font-size:13.5px;background:#fff;color:#111}
.doc .dhead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.doc .dtitle{font-size:24px;font-weight:800;letter-spacing:8px;padding-top:18px}
.doc table{border-collapse:collapse;width:100%;margin-bottom:12px}
.doc td,.doc th{border:1px solid #888;padding:6px 9px;font-size:13px;color:#111;background:#fff}
.doc th{background:#f2f2f2;width:110px;text-align:center;font-weight:600}
.doc td.pre{white-space:pre-wrap}
.sign{width:auto!important;margin:0!important}
.sign td,.sign th{text-align:center;padding:2px 4px!important;font-size:11.5px!important;min-width:66px;width:auto!important}
.sign th.v{min-width:22px!important;width:22px!important;line-height:1.3}
.sign .stp{height:48px;position:relative}
.stamp{display:inline-flex;width:42px;height:42px;border:2px solid #d22;border-radius:50%;color:#d22;font-size:11px;font-weight:800;align-items:center;justify-content:center;line-height:1.1;transform:rotate(-8deg)}
.stamp.no{border-color:#444;color:#444}.jeon{position:absolute;top:1px;left:2px;font-size:9.5px;color:#d22;font-weight:800}
.seal{display:inline-block;border:2px solid #d22;color:#d22;padding:5px 7px;font-weight:800;transform:rotate(-4deg);margin-left:8px;font-size:12px;line-height:1.2}
.line{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.step{border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:11.5px;background:var(--panel);white-space:nowrap}
.step.ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:var(--okbg);color:var(--ok)}
.step.no{border-color:color-mix(in srgb,var(--bad) 50%,transparent);background:var(--badbg);color:var(--bad)}
.step.cur{border-color:var(--acc3);background:var(--acc2);color:var(--acc);font-weight:700}
.step.agr{border-style:dashed}
.logbox{font-family:Consolas,"D2Coding",monospace;font-size:12px;background:#15110d;color:#e8dccf;border-radius:9px;padding:10px 12px;max-height:300px;overflow:auto;white-space:pre-wrap;line-height:1.5}
.logbox .E{color:#ff8a7a}.logbox .W{color:#ffc65c}.logbox .O{color:#7fe0a8}
.drop{border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--sub);background:var(--line2)}
.drop.on{border-color:var(--acc);background:var(--acc2)}
.kanban{display:grid;grid-auto-columns:minmax(220px,1fr);grid-auto-flow:column;gap:10px;overflow-x:auto;padding-bottom:6px}
.kcol{background:var(--line2);border-radius:10px;padding:8px;min-height:260px}
.kcol h4{margin:2px 4px 8px;font-size:12.5px;color:var(--sub);display:flex;justify-content:space-between}
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:7px;cursor:pointer;font-size:12.5px}
.kcard b{display:block;font-size:13px;margin-bottom:3px}
/* 로그인 */
.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--tile1),var(--tile2));padding:20px}
.login .box{background:var(--panel);border-radius:18px;padding:30px 28px;width:380px;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login h1{margin:0 0 4px;font-size:22px}.login .fm{grid-template-columns:1fr}
/* 인쇄 */
@media print{body *{visibility:hidden}#mask,#mask *{visibility:visible}#mask{position:absolute;inset:0;background:none;display:block;padding:0}.mdl{box-shadow:none;max-height:none;width:100%!important;border-radius:0}.mdl .mh,.mdl .mf{display:none}.mdl .mb{overflow:visible}}
/* ---------- 휴대폰 ---------- */
@media (max-width:899px){
 body{font-size:15px}
 #side{display:none}
 body.drawer #side{display:flex;position:fixed;inset:0 auto 0 0;z-index:75;width:260px;box-shadow:0 0 40px rgba(0,0,0,.4)}
 body.drawer #side .brand b,body.drawer #side .brand small,body.drawer #side .grp,body.drawer #side a.mi span{display:block}
 #top{height:52px;padding:0 6px 0 10px}#top .ttl{font-size:16px}
 .srch,.me .nm,.me .st,.hide-m{display:none!important}
 .me{border:0;padding:0}
 #view{padding:12px 12px calc(76px + env(safe-area-inset-bottom))}
 #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);z-index:60;padding-bottom:env(safe-area-inset-bottom)}
 #tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;font-size:11px;color:var(--mut);position:relative}
 #tabbar a.on{color:var(--acc);font-weight:700}
 #tabbar a .ic{width:22px;height:22px}
 #tabbar a .bd{position:absolute;top:2px;left:calc(50% + 4px);min-width:16px;height:16px;line-height:16px;font-size:10px}
 .grid2,.grid3,.split,.split-r,.split-l,.home{grid-template-columns:1fr}
 .grid4{grid-template-columns:1fr 1fr}
 .fm{grid-template-columns:1fr;gap:4px 0}.fm>label{margin-top:8px}
 .card{padding:13px 13px;border-radius:12px}
 .mdl{max-height:94dvh;border-radius:16px}
 #mask{align-items:flex-end;padding:0}.mdl{width:100%!important;border-radius:16px 16px 0 0}
 table.t{font-size:12.5px}table.t th,table.t td{padding:7px 6px}
 .hide-col{display:none}
 .pagehd h2{font-size:17px}
 .banner{padding:10px 12px}
 .kpis{grid-template-columns:1fr 1fr;gap:8px}.kpi{padding:10px 12px}.kpi .v{font-size:18px}
 .cal .d{min-height:54px;padding:2px 3px}.cal .ev{font-size:9.5px;line-height:14px;padding:0 2px}
 .msg .bub{max-width:82%}
 /* 휴대폰 홈: 스크롤 없이 한 화면 */
 .mhome{display:flex;flex-direction:column;gap:10px;height:calc(100dvh - 52px - 76px - env(safe-area-inset-bottom) - 12px)}
 .mhome .prof{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px}
 .mhome .prof .nm{margin:0;font-size:15px}.mhome .prof .btn{width:auto;margin:0 0 0 auto;padding:8px 14px}
 .mhome .tiles{flex:1;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;min-height:0}
 .mhome .tile{min-height:0;padding:10px 10px 8px}
 .mhome .tile .ti{margin-top:5px;padding:4px 6px}
 .mhome .tile .ti:nth-of-type(n+3){display:none}
 .mhome .tile .bgi svg{width:32px;height:32px}
}
@media (max-width:899px) and (max-height:700px){.mhome .tile .ti:nth-of-type(n+2){display:none}}

/* ================= IZIXX 고유 테마 (사내 IZIXX 프로그램과 같은 모양) ================= */
/* 사이드바: 남색 + 상단 izixx 로고 */
#side{background:linear-gradient(180deg,var(--hdr1),var(--nav) 120px)}
#side .brand{padding:12px 14px 11px;flex-direction:column;align-items:flex-start;gap:4px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
#side .brand .izlogo{height:64px;width:auto;max-width:100%;display:block;margin:0 0 0 -6px}
#side .brand b{font-size:13.5px}
#side .brand .mk{display:none;width:34px;height:auto}
body.rail #side .brand{align-items:center;padding:14px 0}body.rail #side .brand .izlogo{display:none}body.rail #side .brand .mk{display:block}
#side a.mi.on{background:linear-gradient(90deg,rgba(20,105,232,.35),rgba(20,105,232,.08));border-left-color:#3d8bff}
/* 상단 머리띠: 남색 + 항공 배경 (테스트 툴과 같은 헤더) */
#top{background:var(--hdr1) url(/img/header-bg.jpg) right center/auto 100% no-repeat;border-bottom:0;color:#fff;box-shadow:0 2px 0 var(--acc) inset,0 -3px 0 rgba(0,0,0,.25) inset}
#top{background-image:linear-gradient(90deg,var(--hdr1) 30%,rgba(6,22,48,.35) 62%,rgba(6,22,48,.05)),url(/img/header-bg.jpg);background-size:auto,auto 160%;background-position:0 0,right 40%}
#top .me{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}#top .me:hover{background:rgba(255,255,255,.18)}
#top .ttl{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
#top .ib{color:#c9d7ec}#top .ib:hover{background:rgba(255,255,255,.12);color:#fff}
#top .srch{background:rgba(255,255,255,.12);color:#c9d7ec;border:1px solid rgba(255,255,255,.14)}#top .srch input{color:#fff}#top .srch input::placeholder{color:#a9bcd8}
#top .me .nm{color:#fff}#top .me .st{color:#a9bcd8}
#top #demoSw{background:rgba(255,255,255,.95);color:#173a5e;border-color:transparent}
/* 지구 아이콘 (실제 지구 이미지) */
.ib.globe{width:40px;height:40px}
.ib.globe img.earth{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.35);display:block}
.globe small{background:#fff;color:var(--acc);box-shadow:0 1px 2px rgba(0,0,0,.3)}
/* 카드: 상단 파란 강조선 (설정창·카드 공통) */
.card{border-color:#d3deea;border-top:3px solid var(--acc)}
.card.flat,.card.nt,.kpis .card,.mhome .card{border-top-width:1px;border-top-color:var(--line)}
[data-theme=warm] .card,[data-theme=dark] .card{border-top:1px solid var(--line)}
/* 배너: 남색 그라데이션 + 광택 */
.banner{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%),linear-gradient(100deg,var(--tile1),var(--tile2));box-shadow:0 2px 6px rgba(11,40,90,.18),inset 0 1px 0 rgba(255,255,255,.18)}
/* 3D 버튼 (IZIXX 점검 도구의 광택 버튼) */
.btn{background:linear-gradient(180deg,#fff,#f1f5fa);border-color:#c7d5e5;box-shadow:0 1px 1px rgba(16,42,80,.06),inset 0 1px 0 #fff}
.btn:hover{border-color:var(--acc3);background:linear-gradient(180deg,#fff,#e8f0fb)}
.btn.p{background:linear-gradient(180deg,#3a86ff 0%,#1469e8 45%,#0b57d0 55%,#0a4bb4 100%);border-color:#0a47ab;color:#fff;box-shadow:0 2px 4px rgba(11,87,208,.3),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 -1px 0 rgba(0,0,0,.2)}
.btn.g{background:linear-gradient(180deg,#34b878 0%,#1f9a5f 45%,#198a55 55%,#137447 100%);border-color:#126c42;box-shadow:0 2px 4px rgba(25,138,85,.28),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.r{background:linear-gradient(180deg,#fff,#fdf1f2)}
.btn.danger,.btn.rr{background:linear-gradient(180deg,#f06272 0%,#e04757 45%,#d33a4b 55%,#b92e3e 100%);border-color:#a92837;color:#fff;box-shadow:0 2px 4px rgba(216,75,91,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:transparent;box-shadow:none}
.banner .btn{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border-color:rgba(255,255,255,.35);box-shadow:none}
[data-theme=dark] .btn{background:var(--panel);box-shadow:none;border-color:var(--line)}[data-theme=dark] .btn.p{background:var(--acc);border-color:var(--acc)}
[data-theme=warm] .btn{background:var(--panel);box-shadow:none;border-color:var(--line)}[data-theme=warm] .btn.p{background:var(--acc);border-color:var(--acc);text-shadow:none}[data-theme=warm] .btn.g{background:var(--ok)}
/* 홈 타일: 남색·파랑 (헤더와 같은 계열) */
.tiles{background:var(--tile1);box-shadow:0 3px 10px rgba(11,40,90,.18)}
.tile:nth-child(odd){background:linear-gradient(160deg,#0f3368,#0b2650)}.tile:nth-child(even){background:linear-gradient(160deg,#1a5fc8,#1149a3)}
[data-theme=warm] .tile:nth-child(odd){background:color-mix(in srgb,var(--tile1) 90%,#000)}[data-theme=warm] .tile:nth-child(even){background:color-mix(in srgb,var(--tile2) 75%,var(--tile1))}
/* 앱 아이콘: 3D 광택 */
.app .ai{box-shadow:0 4px 10px rgba(16,42,80,.22),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px 12px rgba(0,0,0,.12)}
.app .ai::after{content:"";position:absolute;left:4px;right:4px;top:3px;height:45%;border-radius:14px 14px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));pointer-events:none}
/* 로그인: 항공 배경 + 로고 */
.login{background:linear-gradient(160deg,rgba(6,22,48,.86),rgba(11,42,90,.55)),url(/img/header-bg.jpg) 70% center/cover}
.login .box{border-top:4px solid var(--acc)}
.login .izlogo{height:64px;width:auto;display:block}
.login .tag2{font-size:12px;color:var(--sub);margin-top:2px}
/* 상태 표시줄 (PC 하단: 사이트 주소) */
#izfoot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);padding:3px 14px;border-top:1px solid var(--line);background:var(--panel);flex-shrink:0}
@media (max-width:899px){
 #izfoot{display:none}
 #top{background-image:linear-gradient(90deg,var(--hdr1) 40%,rgba(6,22,48,.6)),url(/img/header-bg.jpg);background-size:auto 100%;background-position:right center}
 #tabbar{background:linear-gradient(180deg,#fff,#f3f7fc);box-shadow:0 -2px 8px rgba(16,42,80,.08)}
 #tabbar a.on{color:var(--acc)}
 #tabbar a.on .ic{filter:drop-shadow(0 1px 2px rgba(11,87,208,.35))}
 .ib.globe img.earth{width:28px;height:28px}
 .card{border-top-width:2px}
}
[data-theme=dark] #tabbar{background:var(--panel)}
/* ---------- 3D 아이콘 ---------- */
img.i3d{display:inline-block;flex-shrink:0;object-fit:contain;-webkit-user-drag:none;user-select:none}
#side a.mi img.i3d{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
#side a.mi{gap:10px;padding:6px 16px}
.banner h2 img.i3d{margin:-4px 2px -4px -2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.tile .bgi{opacity:.95;right:8px;bottom:6px}.tile .bgi img.i3d{filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.ai3{position:relative;display:flex;align-items:center;justify-content:center;border-radius:28%;background:linear-gradient(180deg,#f4f8fd,#dce6f4);border:1px solid #cfdcec;box-shadow:0 4px 10px rgba(16,42,80,.10),inset 0 1px 0 #fff}.ai3 img{width:92%;height:92%;object-fit:contain;-webkit-user-drag:none;filter:drop-shadow(0 3px 4px rgba(16,42,80,.22))}
[data-theme=dark] .ai3{background:linear-gradient(180deg,#223044,#18202b);border-color:#2c3a4e}
#tabbar a img.i3d{transition:transform .15s}#tabbar a.on img.i3d{transform:translateY(-2px) scale(1.08);filter:drop-shadow(0 3px 4px rgba(11,87,208,.35))}
#tabbar a:not(.on) img.i3d{filter:saturate(.7) opacity(.85)}
@media (max-width:899px){.mhome .tile .bgi img.i3d{width:34px!important;height:34px!important}}

#side a.mi small.hint{display:block;font-size:10.5px;color:var(--nav-mut);line-height:1.15;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
#side a.mi.on small.hint,#side a.mi:hover small.hint{color:#b9cbe6}
.wguide{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap;position:relative}
.wguide a{flex:1;min-width:170px;display:flex;gap:9px;align-items:center;background:var(--panel,#fff);border:1px solid var(--line);border-radius:10px;padding:8px 11px;color:var(--ink);text-decoration:none}
.wguide a:hover{border-color:var(--acc)}.wguide a.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:var(--acc2)}
.wguide b{display:block;font-size:13px}.wguide span{font-size:11.5px;color:var(--sub)}
.wguide .x{position:absolute;top:-8px;right:-6px;border:0;background:var(--line);color:var(--sub);border-radius:50%;width:20px;height:20px;font-size:11px;cursor:pointer;line-height:20px;padding:0}

/* ---- 스크롤바: 어디서나 잘 보이게 (얇은 자동 숨김 대신 늘 보이는 막대) ---- */
:root{--sb-thumb:#8796ad;--sb-thumb-h:#5f7090;--sb-track:#e2e8f0}
[data-theme=warm]{--sb-thumb:#b39c86;--sb-thumb-h:#8b735c;--sb-track:#efe6db}
[data-theme=dark]{--sb-thumb:#5d6d86;--sb-thumb-h:#7d8ea8;--sb-track:#1b2431}
html{scrollbar-color:var(--sb-thumb) var(--sb-track)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--sb-track);border-radius:6px}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:6px;border:2px solid var(--sb-track)}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)}
::-webkit-scrollbar-corner{background:var(--sb-track)}
.tw{scrollbar-color:var(--sb-thumb) var(--sb-track)}

/* 우클릭 메뉴 */
.ctxm{position:fixed;z-index:10000;min-width:150px;background:var(--panel,#fff);border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 28px rgba(10,30,60,.22);padding:5px;font-size:13px}
.ctxm a{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:6px;color:var(--ink);cursor:pointer;white-space:nowrap}
.ctxm a:hover{background:var(--acc2)}.ctxm a.del{color:var(--bad)}.ctxm a.del:hover{background:rgba(198,40,40,.1)}
.ctxm .sep{height:1px;background:var(--line);margin:4px 2px}
.ctx-on{outline:2px solid var(--acc);outline-offset:-2px;background:var(--acc2)!important}

tr.sel-on td{background:var(--acc2)}

/* 저장 버튼 상단 고정 띠 */
#izSaveBar{position:sticky;top:-18px;z-index:30;display:none;align-items:center;gap:6px;flex-wrap:wrap;margin:-18px -22px 12px;padding:8px 22px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.06)}
#izSaveBar.on{display:flex}
#izSaveBar .sbl{font-size:12px;font-weight:700;color:var(--acc);margin-right:4px;display:inline-flex;align-items:center;gap:3px}
.card .hd.hdonly{margin-bottom:8px}.card .hd .hdsave{margin-left:auto;display:inline-flex;gap:6px;align-items:center;font-weight:400;flex-wrap:wrap}.card .hd .r+.hdsave{margin-left:6px}.card .hd .hdsave .btn{padding:5px 12px;font-size:12.5px}
@media (max-width:760px){#izSaveBar{margin:-12px -12px 10px;padding:6px 12px;top:-12px}}

/* 표 제목 정렬 */
table.t th.ts{cursor:pointer;user-select:none;white-space:nowrap}
table.t th.ts:hover{color:var(--acc)}
table.t th.ts::after{content:attr(data-dir);font-size:10px;margin-left:3px;color:var(--acc)}
table.t th.ts:not(.ts-on):hover::after{content:'⇅';color:var(--mut)}
.tsbar{display:flex;justify-content:flex-end;padding:4px 6px 4px 0}.tsbar select{width:auto;font-size:12px;padding:3px 8px;height:auto}

/* 결재 요청 알림 카드 */
#apNotiBox{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;flex-direction:column;gap:8px;width:min(340px,calc(100vw - 24px))}
.apnoti{background:var(--panel);border:1px solid var(--line);border-left:5px solid #e53935;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:10px 12px;animation:apin .25s ease-out}
.apnoti .h{display:flex;align-items:center;gap:6px;font-size:13.5px}.apnoti .h .x{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--mut);font-size:14px}
.apnoti .b{font-size:12.5px;margin:4px 0 8px;color:var(--ink);word-break:break-all}.apnoti .f{display:flex;gap:6px;justify-content:flex-end}
@keyframes apin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:760px){#apNotiBox{bottom:calc(76px + env(safe-area-inset-bottom));right:12px}}

/* ================= 홈 화면 (대시보드) ================= */
.hm{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start;max-width:1500px;margin:0 auto}
.hm-main{display:flex;flex-direction:column;gap:16px;min-width:0}.hm-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.hm-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 10px rgba(20,40,90,.05);padding:16px 18px;min-width:0}
.hm-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:16px}.hm-h b{font-weight:800}
.hm-h .hm-more{margin-left:auto;font-size:12.5px;color:var(--mut);cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:3px}
.hm-h .hm-more:hover{color:var(--acc)}
.hm-bar{border-left:3px solid var(--acc);padding-left:8px}
/* 배너 */
.hm-hero{position:relative;border-radius:18px;min-height:300px;padding:30px 34px;color:#fff;background-size:cover;background-position:center right;display:flex;justify-content:space-between;gap:20px;overflow:hidden;box-shadow:0 8px 24px rgba(10,25,60,.18)}
.hm-greet{font-size:27px;line-height:1.35;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.25)}.hm-greet b{font-weight:800}
.hm-sub{font-size:15px;opacity:.9;margin-top:6px}
.hm-date{margin-top:22px;font-size:18px;font-weight:600;opacity:.95}
.hm-big{font-size:82px;font-weight:900;letter-spacing:-2px;line-height:1;margin-top:6px;text-shadow:0 4px 14px rgba(0,0,0,.3)}.hm-big small{font-size:24px;font-weight:700;letter-spacing:0;margin-left:12px}
.hm-hr{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right}
.hm-wx{display:flex;gap:10px;align-items:center}.hm-wx div{display:flex;flex-direction:column;align-items:flex-end}.hm-wx b{font-size:30px;font-weight:800}.hm-wx span{font-size:13px;opacity:.9}
.hm-quote{font-size:19px;font-weight:700;line-height:1.6;text-shadow:0 2px 8px rgba(0,0,0,.35);white-space:nowrap}
/* 2단 */
.hm-row2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
/* 일정 타임라인 */
.hm-tl{display:flex;flex-direction:column;position:relative}
.hm-tl:before{content:'';position:absolute;left:79px;top:16px;bottom:16px;border-left:2px solid #e3e8f2}
.hm-ev{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:12px;color:inherit;text-decoration:none;border-bottom:1px solid #f0f2f7;position:relative}
.hm-ev:last-child{border-bottom:0}.hm-ev:hover{background:#f6f8fd}.hm-ev.now{background:#eef3ff}
.hm-evt{width:52px;display:flex;flex-direction:column}.hm-evt b{font-size:15px}.hm-evt small{color:#8a93a6;font-size:12.5px}
.hm-evd{width:12px;height:12px;border-radius:50%;border:3px solid var(--c);background:#fff;flex:none;z-index:1;margin-left:5px}
.hm-ev.now .hm-evd{background:var(--c)}
.hm-evx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.hm-evx b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-evx small{color:#7a8396;font-size:12.5px;display:flex;align-items:center;gap:3px}
.hm-chip{font-size:12px;font-weight:700;border-radius:99px;padding:5px 12px;white-space:nowrap;flex:none}
.hm-chip.on{background:#3d5bd9;color:#fff}.hm-chip.ghost{background:#eef0f4;color:#6b7486}.hm-chip.done{background:#f2f3f6;color:#a3aab8}
.hm-chip.red{background:#fde8ea;color:#d64550}.hm-chip.blue{background:#e6efff;color:#2f62d8}.hm-chip.green{background:#e3f6ea;color:#1f9a55}
/* 빠른 메뉴 */
.hm-qm{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hm-qi{position:relative;border:0;border-radius:14px;padding:16px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;font-weight:600;color:#3b4556;transition:transform .12s,box-shadow .12s;min-height:96px;justify-content:center}
.hm-qi:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(20,40,90,.10)}
.hm-bd{position:absolute;top:8px;right:16px;min-width:20px;height:20px;border-radius:10px;background:#e53935;color:#fff;font-size:11.5px;font-style:normal;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 0 0 2px #fff}
.hm-qmset{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
/* 업무 현황 */
.hm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.hm-st{display:flex;align-items:center;gap:14px;border-radius:14px;padding:16px 18px;color:inherit;text-decoration:none;cursor:pointer}
.hm-st:hover{filter:brightness(.98)}.hm-sti{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;flex:none}
.hm-st small{display:block;font-size:13.5px;color:#5b6577}.hm-st b{font-size:26px;font-weight:800;margin-right:6px}.hm-sts{display:block;font-style:normal;font-size:11.5px;color:#7a8396;white-space:nowrap}
/* 근무 정보 */
.hm-work{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}
.hm-work>div{display:flex;align-items:center;gap:10px}.hm-work>div+div{border-left:1px solid var(--line);padding-left:14px}
.hm-wi{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.hm-wi.g{background:#e3f6ea;color:#1f9a55}.hm-wi.dot{background:#e3f6ea}.hm-wi.dot i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.hm-work small{display:block;color:#8a93a6;font-size:12.5px}.hm-work b{font-size:20px;font-weight:800}
.hm .btn.hm-out{width:100%;height:52px;border:2px solid var(--acc)!important;color:var(--acc)!important;background:#fff!important;display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;border-radius:10px;margin-bottom:10px;justify-content:center}
.hm .btn.hm-attd{display:flex;align-items:center;width:100%;height:52px;font-weight:700;font-size:15px;border-radius:10px;justify-content:center}
/* 공지 */
.hm-nl a{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #f0f2f7;color:inherit;text-decoration:none;font-size:14px}
.hm-nl a:last-child{border-bottom:0}.hm-nl a:hover span{color:var(--acc)}
.hm-nl i{width:6px;height:6px;border-radius:50%;flex:none;background:transparent}.hm-nl i.on{background:#e53935}
.hm-nl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hm-nl small{color:#8a93a6;font-size:12.5px}
/* 전자결재 */
.hm-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.hm-tabs button{border:1px solid var(--line);background:#f4f6fa;border-radius:99px;padding:8px 6px;font-weight:700;font-size:13.5px;color:#4a5466;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.hm .hm-tabs button.on{background:#fff;border:2px solid var(--acc);color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.hm-tabs i{font-style:normal;min-width:19px;height:19px;border-radius:10px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;color:#fff;padding:0 4px}
.hm-tabs i.r{background:#e53935}.hm-tabs i.g{background:#9aa3b2}
.hm-apl a{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid #f0f2f7;color:inherit;text-decoration:none}
.hm-apl a:last-child{border-bottom:0}.hm-apl a:hover{background:#f8f9fc}
.hm-api{width:38px;height:38px;border-radius:10px;background:#f0f3fa;color:#4a5aa8;display:flex;align-items:center;justify-content:center;flex:none}
.hm-apx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.hm-apx b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hm-apx small{color:#7a8396;font-size:12.5px}
.hm-chev{color:#a3aab8;font-size:20px;line-height:1}
.hm-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:#8a93a6;padding:24px 10px;font-size:13.5px}.hm-empty.sm{padding:16px}
/* 화면 크기별 */
@media (max-width:1280px){.hm{grid-template-columns:minmax(0,1fr) 320px}.hm-big{font-size:66px}.hm-quote{font-size:16px}}
@media (max-width:1050px){.hm{grid-template-columns:1fr}.hm-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
@media (max-width:760px){
 .hm{gap:10px}.hm-main,.hm-side{gap:10px}.hm-side{display:flex}
 .hm-hero{min-height:0;padding:16px 18px;border-radius:14px;flex-direction:row}
 .hm-greet{font-size:18px}.hm-sub{display:none}.hm-date{margin-top:8px;font-size:13px}.hm-big{font-size:40px}.hm-big small{font-size:15px;margin-left:6px}
 .hm-quote{display:none}.hm-wx svg{width:38px;height:38px}.hm-wx b{font-size:20px}
 .hm-row2{grid-template-columns:1fr;gap:10px}.hm-card{padding:12px 14px;border-radius:14px}.hm-h{margin-bottom:8px;font-size:15px}
 .hm-qm{gap:8px}.hm-qi{min-height:72px;padding:10px 4px 8px;font-size:12.5px}.hm-qi img{width:36px!important;height:36px!important}
 .hm-stats{grid-template-columns:repeat(5,1fr);gap:6px}.hm-sts{display:none!important}.hm-st{flex-direction:column;gap:4px;padding:10px 4px;text-align:center}.hm-sti{width:36px;height:36px}.hm-sti img{width:22px!important;height:22px!important}.hm-st b{font-size:18px}.hm-st small{font-size:11.5px}
 .hm-work b{font-size:17px}.hm .btn.hm-out,.hm .btn.hm-attd{height:44px}
 .hm{display:flex;flex-direction:column}.hm-main,.hm-side,.hm-row2{display:contents}
 .hm-hero{order:1}.hm-o-work{order:2}.hm-o-qm{order:3}.hm-o-ap{order:4}.hm-o-stat{order:5}.hm-o-sch{order:6}.hm-o-notice{order:7}
 .hm-o-work .hm-work{margin-bottom:10px}.hm .hm-o-work .btn.hm-attd{display:none}
 .hm-main>*,.hm-side>*,.hm-row2>*,.hm>section{width:100%;box-sizing:border-box}
}

.hm-stx{min-width:0}.hm-nums{display:flex;gap:12px;align-items:flex-end;margin-top:2px}
.hm-new,.hm-tot{display:flex;flex-direction:column;line-height:1.1}
.hm-new b{font-size:26px;font-weight:800;color:#9aa3b2}.hm-new.on b{color:#e53935}
.hm-tot b{font-size:18px;font-weight:700;color:#3b4556}
.hm-new i,.hm-tot i{font-style:normal;font-size:11px;color:#7a8396;margin-top:2px}
@media (max-width:760px){.hm-nums{justify-content:center;gap:6px}.hm-new b{font-size:18px}.hm-tot b{font-size:13px}.hm-new i,.hm-tot i{font-size:9.5px}}
.hm-stats{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}
.hm-st{padding:12px 12px!important;gap:10px!important;align-items:flex-start!important}
.hm-sti{width:42px!important;height:42px!important}
.hm-new i,.hm-tot i{white-space:nowrap}
.hm-sts{white-space:normal!important;font-size:11px;line-height:1.35;margin-top:4px;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1280px){.hm-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:760px){.hm-stats{grid-template-columns:repeat(5,1fr)!important;gap:6px!important}.hm-st{padding:8px 2px!important;align-items:center!important}.hm-sti{width:32px!important;height:32px!important}.hm-sts{display:none!important}}
/* 빠른 메뉴 칸 건수 (빨간 = 신규, 회색 = 전체) */
.hm-qt{display:block;font-size:11.5px;font-weight:600;color:#7a8396;margin-top:-4px;min-height:14px}
.hm-qi .hm-bd{top:6px;right:10px}
/* 홈 — 회사 줄·월간 일정 버튼·내 정보 줄·일정 범위 */
.hm-co{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.85);margin-bottom:10px;text-transform:uppercase}.hm-co i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25)}
.hm-calbtn{display:none;position:absolute;top:18px;right:18px;padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff!important;font-weight:700;font-size:13px;text-decoration:none;backdrop-filter:blur(6px)}.hm-calbtn span{margin-left:6px}
.hm-wbtn{display:flex;flex-direction:column;gap:8px}
.hm-me{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:inherit;text-decoration:none}.hm-me b{display:block;font-size:16px}.hm-me small{color:#7a8396;font-size:12.5px}
.hm-schsc{display:flex;gap:6px;margin:-2px 0 10px;flex-wrap:wrap}.hm-schsc button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:#5b6577;cursor:pointer}.hm-schsc button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.hm-schd{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:0 4px}.hm-schd b{font-size:17px}.hm-schd span{color:#7a8396;font-size:13px}.hm-schd i{font-style:normal;font-size:11px;font-weight:800;color:var(--acc);background:#eaf0ff;border-radius:999px;padding:3px 9px;letter-spacing:.04em}.hm-schd small{margin-left:auto;color:#8a93a6;font-size:12px}
@media (max-width:760px){
 .hm-hero{flex-direction:column;padding:20px 20px 22px;border-radius:18px}.hm-calbtn{display:block;top:16px;right:16px;font-size:12px;padding:7px 10px}
 .hm-co{font-size:11px;max-width:58%;line-height:1.35}.hm-greet{font-size:21px}.hm-sub{display:block;font-size:12.5px;opacity:.85}.hm-big{font-size:48px}.hm-hr{display:none}
 .hm-o-work .hm-work{grid-template-columns:1fr 1fr;gap:8px}.hm-o-work .hm-work>div{background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:10px 12px;border-left:1px solid var(--line)!important}
 .hm-wbtn{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hm .hm-o-work .btn.hm-attd{display:flex}.hm .btn.hm-out{margin:0!important}
 .hm-o-work .btn.hm-out{background:var(--acc)!important;color:#fff!important;border-color:var(--acc)!important;justify-content:center}.hm-o-work .btn.hm-attd{background:#fff!important;color:#3b4560!important;border:1px solid var(--line)!important}
 .hm-hero{order:1}.hm-o-work{order:2}.hm-o-sch{order:4}.hm-o-qm{order:5}.hm-o-ap{order:6}.hm-o-notice{order:7}
 .hm.qm-first .hm-o-qm{order:3} /* 새 알림이 있으면 빠른 메뉴를 일정 위로 */
 .hm-schd small{display:none}
}
/* 결재 일별 내역 표 */
.ap-ite td{padding:3px 4px!important}.ap-ite input,.ap-ite select{width:100%;box-sizing:border-box;padding:5px 6px;font-size:13px}
.ap-itv td,.ap-itv th{font-size:12.5px}

.rowops{display:inline-flex;gap:1px;white-space:nowrap}.rowops .ib{width:22px;height:24px;padding:0;font-size:12px;line-height:1;border-radius:4px}.rowops .ib:hover{background:var(--acc2)}.rowops .ib:disabled{opacity:.3}
@media (max-width:899px){.rowops .ib[data-rop=up],.rowops .ib[data-rop=down]{display:none}}

@media (min-width:900px){.mdl .mh{cursor:move;user-select:none}.mdl .mh button{cursor:pointer}.mdl.dragging{box-shadow:0 28px 80px rgba(0,0,0,.4);opacity:.97}.mdl.dragging .mb{pointer-events:none}}
@media print{.mdl{transform:none!important}}
.hd .hdr-r,.hd>.hdr-r{margin-left:auto}

/* PC 왼쪽 메뉴 3D 아이콘 조금 크게 */
/* PC 웹 — 화면 폭에 맞춰 메뉴 폭·로고·아이콘·글자가 자동으로 커지고 작아짐 (창을 줄이면 같이 작아지고 · 1840px 이상에서 최대) */
@media (min-width:900px){body:not(.rail) #side{width:clamp(176px,14.5vw,268px)}#side a.mi{padding:7px 16px;gap:13px;font-size:clamp(12.5px,.95vw,16px);min-height:clamp(34px,2.9vw,50px)}#side a.mi .i3d{width:clamp(20px,2.1vw,36px)!important;height:clamp(20px,2.1vw,36px)!important}#side .grp .gi{width:clamp(28px,2.75vw,48px);height:clamp(28px,2.75vw,48px)}#side .grp .gi img{width:clamp(22px,2.3vw,40px);height:clamp(22px,2.3vw,40px)}#side .grp{font-size:clamp(12.5px,.95vw,16px)}#side .brand .izlogo{height:clamp(44px,5.2vw,96px)}#side .brand b{font-size:clamp(12.5px,1.05vw,19px)}#side .brand small{max-width:none;font-size:clamp(10px,.72vw,13.5px)}body.rail #side a.mi .i3d{width:34px!important;height:34px!important}.hm-qi img.i3d{width:clamp(30px,2.9vw,52px)!important;height:clamp(30px,2.9vw,52px)!important}.hm-h img.i3d{width:clamp(20px,1.6vw,28px)!important;height:clamp(20px,1.6vw,28px)!important}}

body.izdrop #mask>*:last-child,body.izdrop:not(:has(#mask>*)) #view{outline:3px dashed var(--acc);outline-offset:-6px}

/* 메일 읽기: 위 [메일] 띠 + 목록·답장·전달·삭제 줄은 본문을 내려도 화면 위에 고정 */
.ml-stick{position:sticky;top:-18px;z-index:25;margin:-18px -22px 10px;padding:18px 22px 8px;background:var(--bg);box-shadow:0 6px 10px -8px rgba(10,30,70,.25)}
.ml-stick .banner{margin-bottom:8px}
.ml-tb{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;box-shadow:var(--shadow)}
@media (max-width:760px){.ml-stick{top:-12px;margin:-12px -12px 8px;padding:8px 12px 6px}.ml-stick .banner{display:none}.ml-tb{padding:6px 8px;gap:6px}.ml-tb .btn{padding:6px 10px}}