@font-face{font-family:"Pretendard";font-weight:100 499;font-display:swap;src:url("fonts/Pretendard-Regular.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:500 649;font-display:swap;src:url("fonts/Pretendard-SemiBold.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:650 900;font-display:swap;src:url("fonts/Pretendard-Bold.subset.woff2") format("woff2")}
/* 우리사무기 공통 스타일 (프린터 설치 관리자 UI 스타일 계승) ⓒ 2026 우리사무기 */
:root{--app-bg:#F1F3F5;--surface:#F7F8F9;--surface-2:#EEF0F2;--border:#E0E3E6;--border-soft:#E8EBEE;--text:#3A4149;--text-strong:#2C333A;--muted:#7A8490;--muted-2:#9AA3AD;--input-bg:#EEF0F2;--accent:#2563EB;--accent-dark:#1D4ED8;--accent-soft:#E8F1FC;--brand-red:#C8102E}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--app-bg);color:var(--text);font-family:"Pretendard","Malgun Gothic","맑은 고딕","Segoe UI",system-ui,sans-serif;font-size:14px;display:flex;overflow:hidden;-webkit-font-smoothing:antialiased;user-select:none}
input,select,button,textarea{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#C5CBD1;border-radius:4px}
.hidden{display:none!important}
.side{width:232px;min-width:232px;background:#F3F5F8;border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:6px 0 28px rgba(0,0,0,.06);z-index:5}
.side-head{padding:18px 16px 14px;border-bottom:1px solid var(--border)}
.side-brand-kicker{font-size:.65rem;font-weight:700;letter-spacing:.22em;color:var(--brand-red);text-transform:uppercase}
.side-brand-title{margin:2px 0 0;font-size:1.5rem;font-weight:700;letter-spacing:-.04em;line-height:1.15;color:#0B1B33}
.brand-row{display:flex;align-items:center;gap:10px}
.logo-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,#1D4ED8 0%,#0EA5E9 100%);color:#fff;font-weight:700;font-size:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(37,99,235,.28);flex-shrink:0}
.side-brand-sub{margin:4px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#3B82F6}
.side-brand-ver{margin:8px 0 0;font-size:.68rem;font-weight:600;color:var(--muted-2)}
.side-body{flex:1;overflow-y:auto;padding:10px 12px}
.menu-item{padding:.55rem .85rem;border-radius:.85rem;color:#3A4149;font-weight:600;font-size:.86rem;cursor:pointer;transition:all .18s ease;display:flex;align-items:center;justify-content:center;gap:.4rem;margin:.32rem 0;background:linear-gradient(165deg,#FFFFFF 0%,#EEF2F7 100%);border:1px solid #D5DEE8;box-shadow:0 2px 6px rgba(44,51,58,.08)}
.menu-item:hover{background:linear-gradient(165deg,#FFFFFF 0%,#E7EEF8 100%);border-color:#C5D0DC;transform:translateY(-1px)}
.menu-item.active{background:linear-gradient(165deg,#DCEAFB 0%,#C9DFF8 100%);color:#1D4ED8;border-color:#93C5FD;font-weight:700}
.menu-item.primary{background:linear-gradient(165deg,#3B82F6 0%,#2563EB 100%);color:#fff;border-color:#1D4ED8;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.menu-item.danger{background:linear-gradient(165deg,#FFF1F2,#FFE4E6);color:#B91C1C;border-color:#FECDD3}
.menu-item.disabled{opacity:.5;pointer-events:none}
.menu-section{font-size:.7rem;font-weight:700;color:var(--muted-2);margin:.9rem 0 .2rem;padding:0 .5rem;letter-spacing:.04em}
.side-foot{padding:12px;border-top:1px solid var(--border);background:var(--surface-2);font-size:.72rem;color:var(--muted);text-align:center;line-height:1.55}
.side-foot b{color:var(--text-strong)}
.side-foot .copyright{margin-top:10px;padding-top:9px;border-top:1px dashed var(--border);font-size:.64rem;color:var(--muted-2);line-height:1.5}
main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.shell{flex:1;overflow:auto;padding:24px 28px}
.kicker{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--brand-red);text-transform:uppercase;margin-bottom:4px}
.title{margin:0 0 16px;font-size:1.8rem;font-weight:700;letter-spacing:-.035em;background:linear-gradient(120deg,#0B1B33 0%,#1D4ED8 55%,#0EA5E9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel{background:rgba(255,255,255,.88);border:1px solid var(--border);border-radius:18px;box-shadow:0 2px 8px rgba(44,51,58,.04);overflow:hidden;margin-bottom:16px}
.panel-head{padding:12px 16px;border-bottom:1px solid var(--border-soft);background:linear-gradient(180deg,#FFFFFF,#F8FAFC);font-weight:700;color:var(--text-strong)}
.panel-body{padding:16px}
.btn{border:1px solid var(--border);background:linear-gradient(165deg,#FFFFFF 0%,#F2F5F9 100%);color:var(--text);border-radius:.75rem;padding:.55rem 1rem;font-size:.84rem;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap}
.btn:hover{border-color:#C5D0DC;transform:translateY(-1px)}.btn:disabled{opacity:.45;pointer-events:none}
.btn-primary{background:#2563EB;border-color:#1D4ED8;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25)}.btn-primary:hover{background:#1D4ED8}
.btn-danger{color:#B91C1C}.btn-lg{padding:.72rem 1.4rem;font-size:.92rem;border-radius:.85rem}
.input-field{width:100%;padding:.6rem .8rem;border:1px solid var(--border);background:var(--input-bg);border-radius:.75rem;font-size:.9rem;outline:none}
.input-field:focus{background:#fff;border-color:#93C5FD;box-shadow:0 0 0 3px #DBEAFE}
.code{font-size:3rem;font-weight:700;letter-spacing:.18em;color:#1D4ED8;text-align:center;font-variant-numeric:tabular-nums}
.status{padding:10px 14px;border-radius:12px;background:var(--accent-soft);color:#1D4ED8;font-weight:700;font-size:.85rem}
.status.err{background:#FFF1F2;color:#B91C1C}.status.ok{background:#ECFDF5;color:#047857}
.chat{display:flex;flex-direction:column;height:100%}.chat-log{flex:1;overflow:auto;padding:10px;font-size:.84rem;user-select:text}
.msg{margin:4px 0;padding:6px 10px;border-radius:10px;background:#fff;border:1px solid var(--border-soft);max-width:90%;word-break:break-all}
.msg.me{background:#DBEAFE;border-color:#BFDBFE;margin-left:auto}.msg.sys{background:transparent;border:none;color:var(--muted);font-size:.75rem;text-align:center;max-width:100%}
.xfer{font-size:.78rem;margin:6px 0}.bar{height:6px;background:#E5E7EB;border-radius:3px;overflow:hidden;margin-top:3px}.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3B82F6,#0EA5E9);transition:width .1s}
.drop{border:2px dashed #93C5FD;border-radius:14px;padding:14px;text-align:center;color:#3B82F6;font-weight:700;font-size:.8rem;cursor:pointer;background:#F8FBFF}
.drop.over{background:#DBEAFE}
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.35);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:18px;padding:22px;width:380px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.modal h3{margin:0 0 10px;color:var(--text-strong)}.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}