/* ============================================================
   IT Ops Hub — 컴포넌트 스타일 (목업 이식 + 서버렌더 적응).
   tokens.css 이후 로드된다.
   ============================================================ */
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:13px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.muted { color:var(--muted); }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.app { display:flex; flex-direction:column; min-height:100vh; }

/* ── 헤더 ── */
header { display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; letter-spacing:.3px; }
.hex { width:22px; height:22px; background:linear-gradient(135deg,#000,var(--accent)); clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); }
.eyebrow { color:var(--muted); font-size:10px; letter-spacing:2px; text-transform:uppercase; }
.tabs { display:flex; gap:4px; margin-left:14px; }
.tab { padding:6px 14px; border-radius:6px; color:var(--muted); font-weight:600; }
.tab:hover { color:var(--text); }
.tab.active { background:var(--panel2); color:var(--text); }
.spacer { flex:1; }
.rolechip { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:5px 10px; }
.rdot { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.user { width:30px; height:30px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; }
.btn-sm { padding:5px 10px; border:1px solid var(--line); border-radius:6px; font-size:11px; color:var(--text); background:transparent; cursor:pointer; }
.btn-sm:hover { border-color:var(--accent); }

/* 옵저버 배너 / 플래시 / 힌트 */
.robar { background:#2a2233; color:#c9b8ff; text-align:center; padding:6px; font-size:11px; border-bottom:1px solid var(--line); }
.flash { margin:12px 20px 0; padding:10px 14px; border-radius:8px; font-size:12px; background:#12313a; border:1px solid #244; }
.flash.err { background:#3a1512; border-color:#5a2118; color:#ff9a8a; }
.flash code { background:rgba(255,255,255,.1); padding:1px 6px; border-radius:4px; }
.hint { color:var(--muted); font-size:11px; margin:8px 0 4px; }

/* ── 요약 스트립 ── */
.summary { display:flex; gap:14px; padding:14px 20px 0; flex-wrap:wrap; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; min-width:150px; }
.stat .n { font-size:24px; font-weight:800; }
.stat .l { color:var(--muted); font-size:11px; margin-top:2px; }
.stat.alert { border-color:var(--new); }
.stat.alert .n { color:var(--new); }

/* ── 필터 바 ── */
.filters { display:flex; align-items:center; gap:8px; padding:14px 20px; flex-wrap:wrap; }
.flabel { color:var(--muted); font-size:11px; }
.chip { padding:5px 11px; border:1px solid var(--line); border-radius:20px; color:var(--muted); font-size:12px; background:var(--panel); cursor:pointer; }
.chip:hover { color:var(--text); }
.chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.fdiv { width:1px; height:20px; background:var(--line); margin:0 4px; }
.addbtn { padding:8px 14px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-weight:700; cursor:pointer; font-size:12px; }
.addbtn:hover { background:var(--accent2); }
.addbtn.ghost { background:transparent; border:1px solid var(--accent); color:var(--accent2); }

/* ── 칸반 보드 ── */
.board { display:flex; gap:14px; padding:0 20px 24px; overflow-x:auto; flex:1; align-items:flex-start; }
.col { background:var(--panel); border:1px solid var(--line); border-radius:12px; width:270px; min-width:270px; display:flex; flex-direction:column; }
.colhead { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; }
.cdot { width:8px; height:8px; border-radius:50%; }
.count { margin-left:auto; color:var(--muted); font-weight:600; }
.cards { padding:10px; display:flex; flex-direction:column; gap:10px; }
.empty { color:var(--muted); text-align:center; padding:14px 0; font-size:12px; }
.more { display:block; text-align:center; padding:9px 0 3px; font-size:12px; color:var(--muted); border-top:1px dashed var(--line); }
.more:hover { color:var(--accent2); }

.card { background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:11px; transition:border-color .15s; }
.card:hover { border-color:var(--accent); }
.card.dim { opacity:.65; }
.cardbody { display:block; }
.top { display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; color:#fff; letter-spacing:.3px; }
.b-helpdesk { background:var(--helpdesk); } .b-slack { background:var(--slack); }
.b-email { background:var(--email); } .b-verbal { background:var(--verbal); }
.type { font-size:10px; padding:2px 6px; border-radius:5px; border:1px solid var(--line); color:var(--muted); }
.pri { margin-left:auto; font-size:10px; font-weight:800; padding:2px 6px; border-radius:4px; }
.pri.p1 { background:#3a1512; color:#ff8a7a; } .pri.p2 { background:#3a2f12; color:#ffcf6b; }
.pri.p3 { background:#12313a; color:#7fd6e6; } .pri.p4 { background:#222; color:#9aa; }
.card h4 { font-size:13px; font-weight:600; margin-bottom:6px; line-height:1.35; }
.meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; flex-wrap:wrap; }
.aging { color:var(--new); font-weight:700; }
.aging.warn { color:var(--acked); }
.cardfoot { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.inlineform { display:inline-flex; flex:1; }
.btn { flex:1; width:100%; text-align:center; padding:5px 8px; border-radius:6px; border:1px solid var(--line); color:var(--text); background:transparent; cursor:pointer; font-size:11px; font-weight:600; }
.btn:hover { border-color:var(--accent); }
.btn.src { color:var(--accent2); border-color:#244; flex:1; }
.btn.src:hover { background:#12313a; }
.btn.ack:hover { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── 상세 드로어 ── */
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:15; }
.drawer { position:fixed; top:0; right:0; width:390px; max-width:92vw; height:100vh; background:var(--panel); border-left:1px solid var(--line); padding:20px; overflow-y:auto; z-index:20; }
.drawer h3 { font-size:16px; margin-bottom:8px; padding-right:24px; }
.drawer .close { position:absolute; top:14px; right:16px; color:var(--muted); font-size:22px; cursor:pointer; }
.drawer-badges { display:flex; gap:6px; margin-bottom:10px; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12px; }
.kv .k { color:var(--muted); }
.section-t { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:16px 0 6px; }
.srcbox { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px; }
.srcbox a { color:var(--accent2); word-break:break-all; }
.descbox { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:10px; font-size:12px; }
textarea { width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:8px; font-family:inherit; font-size:12px; resize:vertical; min-height:60px; }
.primary { width:100%; margin-top:10px; padding:9px; background:var(--accent); border:none; border-radius:8px; color:#fff; font-weight:700; cursor:pointer; }
.primary:hover { background:var(--accent2); }
.roadmap-note { font-size:10px; color:var(--muted); margin-top:6px; font-style:italic; }
.hist { list-style:none; font-size:11px; }
.hist li { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line); }

/* ── 주간 계획 ── */
.planwrap, .recurwrap, .userswrap, .reportwrap { padding:16px 20px 24px; flex:1; }
.legend { display:flex; gap:16px; margin-bottom:12px; font-size:11px; color:var(--muted); align-items:center; }
.lg { display:flex; align-items:center; gap:6px; }
.sw { width:12px; height:12px; border-radius:3px; }
.week { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.week.wk5 { grid-template-columns:repeat(5,1fr); }
.wknote { margin-top:10px; font-size:12px; }
.day { background:var(--panel); border:1px solid var(--line); border-radius:10px; min-height:220px; max-height:60vh; overflow-y:auto; padding:8px; }
.day h5 { font-size:11px; color:var(--muted); margin-bottom:8px; text-align:center; }
.day.today { border-color:var(--accent); }
.day.today h5 { color:var(--accent2); }
.ev { display:block; font-size:10px; padding:5px 6px; border-radius:6px; margin-bottom:5px; border-left:3px solid; overflow-wrap:anywhere; }
.ev.per { background:#12313a; border-color:var(--prog); }
.ev.sup { background:#2a2233; border-color:var(--wait); }
.ev.done { background:#14251c; border-color:var(--done); color:var(--muted); text-decoration:line-through; }

/* 계획 › 월 보기 (날짜 격자) */
.mhead { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.mhead div { text-align:center; font-size:11px; color:var(--muted); }
.month { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.mday { background:var(--panel); border:1px solid var(--line); border-radius:8px; min-height:104px; padding:6px; }
.mday.off { opacity:.45; }
.mday.today { border-color:var(--accent); }
.mday h6 { font-size:11px; color:var(--muted); margin-bottom:5px; }
.mday.today h6 { color:var(--accent2); }
.mday .ev { font-size:9px; padding:3px 5px; margin-bottom:3px; }
.mday .more { display:block; font-size:9px; color:var(--accent2); padding:2px 5px; }
.mday h6 a:hover, .day h5 a:hover { color:var(--accent2); text-decoration:underline; }
.dwrap { margin-top:4px; }
.dwrap .rtable td .tid { margin-right:4px; }
.dwrap .rtable a:hover { color:var(--accent2); text-decoration:underline; }

/* ── 표 (주기/사용자) ── */
.rtable { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.rtable th { text-align:left; padding:11px 14px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--line); font-weight:600; }
.rtable td { padding:12px 14px; border-bottom:1px solid var(--line); font-size:12px; vertical-align:middle; }
.rtable tr:last-child td { border-bottom:none; }
.rtable tr:hover td { background:var(--panel2); }
.rule { color:var(--accent2); font-family:ui-monospace,Consolas,monospace; font-size:11px; }
.toggle { display:inline-block; width:34px; height:18px; border-radius:10px; background:var(--accent); position:relative; cursor:pointer; border:none; padding:0; }
.toggle.off { background:var(--line); }
.toggle::after { content:""; position:absolute; top:2px; left:18px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; }
.toggle.off::after { left:2px; }
.pill { font-size:10px; font-weight:700; padding:2px 8px; border-radius:5px; }
.p-ok { background:#12313a; color:#7fd6e6; } .p-mut { background:#222; color:#9aa; }

/* ── 모달 ── */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:flex-start; justify-content:center; z-index:30; padding:40px 16px; overflow-y:auto; }
.overlay.open { display:flex; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:14px; width:520px; max-width:100%; padding:22px; }
.modal h3 { font-size:16px; margin-bottom:2px; }
.modal .sub { color:var(--muted); font-size:11px; margin-bottom:16px; }
.field { margin-bottom:14px; }
.field label { display:block; color:var(--muted); font-size:11px; margin-bottom:5px; font-weight:600; }
.field input, .field select, .field textarea { width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:8px 10px; font-family:inherit; font-size:12px; }
.row { display:flex; gap:10px; } .row > .field { flex:1; }
.days { display:flex; gap:5px; }
.day-btn { flex:1; text-align:center; padding:7px 0; border:1px solid var(--line); border-radius:6px; cursor:pointer; color:var(--muted); font-size:12px; background:var(--panel2); user-select:none; }
.day-btn input { display:none; }
.day-btn:has(input:checked) { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.preview { background:#12313a; border:1px solid #244; border-radius:8px; padding:10px 12px; margin-top:6px; }
.preview .pt { color:var(--accent2); font-size:10px; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; font-weight:700; }
.preview .pd { font-size:12px; padding:2px 0; }
.modal-foot { display:flex; gap:10px; margin-top:18px; }
.modal-foot button, .modal-foot .btncancel { flex:1; padding:10px; border-radius:8px; font-weight:700; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--text); text-align:center; }
.modal-foot .save { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── 사용자 관리 ── */
.inviteform { display:flex; gap:8px; margin-bottom:16px; align-items:flex-end; flex-wrap:wrap; }
.inviteform .grow { flex:1; min-width:180px; }
.inviteform input, .inviteform select { background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 10px; font-size:12px; width:100%; }
.rolepill { font-size:10px; font-weight:700; padding:2px 8px; border-radius:5px; }
.r-admin { background:#3a1512; color:#ff9a8a; } .r-mgr { background:#12313a; color:#7fd6e6; } .r-obs { background:#2a2233; color:#c9b8ff; }

/* ── 보고서 ── */
.periods { display:flex; gap:8px; margin-bottom:16px; align-items:center; }
.kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; }
.kpi .n { font-size:22px; font-weight:800; }
.kpi .l { color:var(--muted); font-size:10px; margin-top:3px; }
.chart { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.chart h4 { font-size:13px; margin-bottom:14px; }
.hbar { display:flex; align-items:center; gap:10px; margin-bottom:11px; font-size:12px; }
.hbar .lab { width:78px; color:var(--muted); text-align:right; flex-shrink:0; }
.hbar .track { flex:1; background:var(--panel2); border-radius:5px; height:22px; overflow:hidden; }
.hbar .fill { height:100%; border-radius:5px; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; font-size:11px; font-weight:700; color:#fff; min-width:24px; }
.fill.b-helpdesk { background:var(--helpdesk); } .fill.b-slack { background:var(--slack); }
.fill.b-email { background:var(--email); } .fill.b-verbal { background:var(--verbal); }

/* ── 로그인 / 설정 ── */
.login { position:fixed; inset:0; background:linear-gradient(135deg,#0b0f14,#12232a); display:flex; align-items:center; justify-content:center; padding:16px; }
.loginbox { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:40px; width:360px; max-width:100%; text-align:center; }
.loginbox .hex { width:40px; height:40px; margin:0 auto 14px; }
.loginbox h2 { font-size:20px; margin-bottom:4px; }
.loginbox p { color:var(--muted); font-size:12px; margin-bottom:22px; }
.msbtn { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; background:#fff; color:#5e5e5e; border:none; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; }
.msbtn:hover { background:#f3f3f3; }
.mslogo { display:grid; grid-template-columns:9px 9px; grid-template-rows:9px 9px; gap:2px; }
.mslogo i { display:block; }
.mslogo i:nth-child(1) { background:#f25022; } .mslogo i:nth-child(2) { background:#7fba00; }
.mslogo i:nth-child(3) { background:#00a4ef; } .mslogo i:nth-child(4) { background:#ffb900; }
.or { color:var(--muted); font-size:11px; margin:14px 0; }
.authform { display:flex; flex-direction:column; gap:10px; text-align:left; }
.authform input { background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:10px 12px; font-size:13px; }
.loginnote { margin-top:18px; font-size:10px; color:var(--muted); line-height:1.6; }

/* ── 반응형 ── */
@media (max-width:900px) { .kpis { grid-template-columns:repeat(3,1fr); } .week, .week.wk5 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .kpis { grid-template-columns:repeat(2,1fr); } .tabs { margin-left:0; } header { gap:10px; } }

/* ── 주기 업무 관리: 목록 작업 버튼 · 삭제 강조 · 배지 옆 실행 버튼 ── */
.rtable td.acts { white-space:nowrap; }
.rtable td.acts .inlineform { flex:none; margin-left:6px; }
.btn-sm.danger { color:#ff9a8a; border-color:#5a2118; }
.btn-sm.danger:hover { background:#3a1512; border-color:#5a2118; }
.flash .inlineform { flex:none; margin-left:10px; vertical-align:middle; }
.flash .inlineform .btn-sm { padding:3px 9px; }

/* 보고서 › 주간 결산 */
.periods a.chip { text-decoration:none; }
.wknav { display:inline-flex; align-items:center; gap:8px; margin-left:12px; font-size:12px; }
.wknav a.btn-sm { text-decoration:none; }
.periods .sendnow { flex:none; margin-left:auto; }
.wgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.fill.b-gen { background:var(--accent); }
.mini { width:100%; border-collapse:collapse; font-size:12px; }
.mini th { text-align:left; color:var(--muted); font-size:11px; font-weight:600; padding:4px 6px; border-bottom:1px solid var(--line); }
.mini td { padding:5px 6px; border-bottom:1px solid var(--line); }
.mini tr:last-child td { border-bottom:none; } .mini tr.cur td { font-weight:700; }
.wsec { margin-top:16px; } .wsec h4 { font-size:13px; margin-bottom:8px; }
.wsec .warn { color:#ff9a8a; font-weight:700; }
.p-bad { background:#3a1512; color:#ff9a8a; }
/* 주간 결산 신규 접수 — 유형 그룹 머리 행 */
.rtable tr.grp th { background:var(--panel2); text-transform:none; font-size:11px; letter-spacing:0; color:var(--text); padding:7px 14px; }
.rtable tr.grp:hover th { background:var(--panel2); }

/* 업무 번호 · 드로어 수정/삭제 */
.tid { color:var(--muted); font-family:ui-monospace,Consolas,monospace; font-size:10px; }
.drawer h3 .tid { font-size:12px; }
.editbox { margin-top:16px; border-top:1px solid var(--line); padding-top:10px; }
.editbox > summary { cursor:pointer; font-size:12px; color:var(--muted); list-style:none; }
.editbox > summary::-webkit-details-marker { display:none; }
.editbox > summary:hover { color:var(--text); }
.editbox > summary::before { content:'▸ '; }
.editbox[open] > summary::before { content:'▾ '; }
.editbox .field { margin-top:8px; }
.attlist { display:flex; flex-direction:column; gap:8px; }
.att { background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px; }
.att img { display:block; width:100%; max-height:220px; object-fit:contain; border-radius:6px; background:#0b0f13; margin-bottom:6px; }
.attrow { display:flex; align-items:center; gap:8px; font-size:11px; flex-wrap:wrap; }
.attrow > a { color:var(--accent2); word-break:break-all; }
.attrow .inlineform { flex:none; margin-left:auto; }
.attform { margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.attform input[type=file] { flex:1; min-width:180px; font-size:11px; color:var(--muted); }
.attform .muted { flex-basis:100%; font-size:10px; }
.warnnote { margin-top:8px; padding:8px 10px; border-radius:8px; font-size:11px; line-height:1.6; background:#2a2233; border:1px solid var(--wait); color:var(--text); }