:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #e2e4e9;
  --text: #1f2430;
  --text-sub: #6b7280;
  --primary: #1d4ed8;
  --primary-dark: #1e40af;
  --danger: #dc2626;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }

.loading-screen { display:flex; align-items:center; justify-content:center; height:100vh; color:var(--text-sub); }

/* ── 인증 화면 ─────────────────────────── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background: linear-gradient(160deg,#1e3a8a 0%, #1d4ed8 55%, #3b82f6 100%); }
.auth-card { background:var(--surface); border-radius:16px; padding:40px 36px; width:100%; max-width:420px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.auth-card .logo { font-size:40px; text-align:center; }
.auth-card h1 { font-size:20px; text-align:center; margin:8px 0 2px; }
.auth-card .sub { text-align:center; color:var(--text-sub); font-size:13px; margin-bottom:24px; }
.auth-card label { display:block; font-size:13px; font-weight:600; margin:14px 0 5px; }
.auth-card input { width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:8px; }
.auth-card input:focus { outline:2px solid var(--primary); border-color:transparent; }
.auth-card .btn-primary { width:100%; margin-top:22px; padding:12px; font-size:15px; }
.auth-toggle { text-align:center; margin-top:18px; font-size:13px; color:var(--text-sub); }
.auth-toggle a { color:var(--primary); cursor:pointer; font-weight:600; text-decoration:none; }
.auth-msg { margin-top:14px; padding:10px 12px; border-radius:8px; font-size:13px; display:none; }
.auth-msg.error { display:block; background:#fef2f2; color:#b91c1c; }
.auth-msg.info { display:block; background:#eff6ff; color:#1d4ed8; }

/* ── 레이아웃 ─────────────────────────── */
.topbar { background:#111c3d; color:#fff; padding:0 24px; height:56px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:50; }
.topbar .brand { font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; }
.topbar .brand small { font-weight:400; opacity:.65; font-size:12px; }
.topbar .spacer { flex:1; }
.topbar .user { font-size:13px; opacity:.85; }
.topbar .btn-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:6px; padding:5px 12px; font-size:12px; }
.topbar .btn-ghost:hover { background:rgba(255,255,255,.12); }

.navtabs { background:var(--surface); border-bottom:1px solid var(--border); padding:0 16px; display:flex; gap:2px; overflow-x:auto; position:sticky; top:56px; z-index:40; }
.navtabs button { background:none; border:none; padding:13px 14px; font-size:14px; color:var(--text-sub); border-bottom:2.5px solid transparent; white-space:nowrap; }
.navtabs button.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:700; }
.navtabs button:hover { color:var(--text); }

.main { max-width:1180px; margin:0 auto; padding:24px 20px 60px; }

/* ── 대시보드 ─────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.stat-card .k { font-size:12px; color:var(--text-sub); font-weight:600; }
.stat-card .v { font-size:26px; font-weight:800; margin-top:4px; }
.stat-card .v small { font-size:13px; font-weight:500; color:var(--text-sub); }
.stat-card.accent { background:#111c3d; border-color:#111c3d; color:#fff; }
.stat-card.accent .k { color:rgba(255,255,255,.7); }
.dash-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:820px){ .dash-cols { grid-template-columns:1fr; } }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.panel h3 { font-size:14px; padding:14px 16px; border-bottom:1px solid var(--border); }
.panel ul { list-style:none; }
.panel li { padding:11px 16px; border-bottom:1px solid #f1f2f5; display:flex; gap:10px; align-items:center; font-size:13px; }
.panel li:last-child { border-bottom:none; }
.panel li .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.panel li .d { color:var(--text-sub); font-size:12px; white-space:nowrap; }
.panel .empty { padding:20px 16px; color:var(--text-sub); font-size:13px; }

/* ── 모듈 화면 ─────────────────────────── */
.mod-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.mod-head h2 { font-size:19px; }
.mod-head .cnt { color:var(--text-sub); font-size:13px; }
.mod-head .spacer { flex:1; }
.btn-primary { background:var(--primary); color:#fff; border:none; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-sub { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 14px; font-size:13px; }
.btn-danger { background:#fff; color:var(--danger); border:1px solid #fca5a5; border-radius:8px; padding:8px 14px; font-size:13px; }
.btn-danger:hover { background:#fef2f2; }

.filters { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.filters select, .filters input { padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.filters input[type=search] { min-width:200px; }

.tbl-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:12px; color:var(--text-sub); padding:11px 14px; border-bottom:1px solid var(--border); background:#fafbfc; white-space:nowrap; }
td { padding:11px 14px; border-bottom:1px solid #f1f2f5; font-size:13px; vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:#f6f8fc; }
td.title-cell { font-weight:600; max-width:340px; }
.empty-row td { text-align:center; color:var(--text-sub); padding:34px; cursor:default; }

/* 태그 */
.tag { display:inline-block; padding:2.5px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.tag + .tag { margin-left:4px; }
.tag.gray   { background:#f1f2f4; color:#4b5563; }
.tag.blue   { background:#dbeafe; color:#1d4ed8; }
.tag.green  { background:#dcfce7; color:#15803d; }
.tag.yellow { background:#fef9c3; color:#a16207; }
.tag.orange { background:#ffedd5; color:#c2410c; }
.tag.red    { background:#fee2e2; color:#b91c1c; }
.tag.purple { background:#f3e8ff; color:#7e22ce; }
.tag.pink   { background:#fce7f3; color:#be185d; }
.tag.brown  { background:#efebe9; color:#6d4c41; }
.tag.navy   { background:#e0e7ff; color:#3730a3; }

.overdue { color:var(--danger); font-weight:700; }
.soon { color:#c2410c; font-weight:700; }

/* ── 모달 ─────────────────────────── */
.modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:100; overflow-y:auto; }
.modal { background:var(--surface); border-radius:14px; width:100%; max-width:640px; box-shadow:0 24px 60px rgba(0,0,0,.3); }
.modal header { display:flex; align-items:center; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal header h3 { font-size:16px; flex:1; }
.modal header .x { background:none; border:none; font-size:20px; color:var(--text-sub); line-height:1; }
.modal .body { padding:20px 22px; display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.modal .field { display:flex; flex-direction:column; gap:5px; }
.modal .field.wide { grid-column:1 / -1; }
.modal .field label { font-size:12.5px; font-weight:700; color:#374151; }
.modal .field label .req { color:var(--danger); }
.modal input[type=text], .modal input[type=date], .modal input[type=datetime-local], .modal input[type=url],
.modal select, .modal textarea { padding:9px 11px; border:1px solid var(--border); border-radius:8px; width:100%; }
.modal textarea { min-height:70px; resize:vertical; }
.modal input:focus, .modal select:focus, .modal textarea:focus { outline:2px solid var(--primary); border-color:transparent; }
.chk-group { display:flex; flex-wrap:wrap; gap:6px; }
.chk-group label.chk { display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:500; background:#f4f5f7; border:1px solid var(--border); border-radius:999px; padding:4px 10px; cursor:pointer; }
.chk-group label.chk:has(input:checked) { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; font-weight:700; }
.chk-group input { accent-color:var(--primary); }
.chk-single { display:flex; align-items:center; gap:7px; padding-top:6px; font-size:13.5px; }
.modal footer { display:flex; gap:8px; padding:16px 22px; border-top:1px solid var(--border); }
.modal footer .spacer { flex:1; }
.meta-line { grid-column:1/-1; font-size:12px; color:var(--text-sub); }
.form-err { grid-column:1/-1; color:var(--danger); font-size:13px; display:none; }

/* 첨부파일 */
.att-list { display:flex; flex-direction:column; gap:6px; }
.att-row { display:flex; align-items:center; gap:8px; background:#f8f9fb; border:1px solid var(--border); border-radius:8px; padding:7px 10px; }
.att-name { flex:1; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-meta { font-size:12px; color:var(--text-sub); white-space:nowrap; }
.att-row .btn-sub, .att-row .btn-danger { padding:4px 10px; font-size:12px; }
.att-add { display:flex; gap:8px; align-items:center; margin-top:8px; }
.att-add input[type=file] { flex:1; font-size:12.5px; }
.att-hint { font-size:12.5px; color:var(--text-sub); }
.att-badge { font-size:12px; color:var(--text-sub); font-weight:600; white-space:nowrap; }

/* 국감 칸반 */
.kanban { display:flex; gap:10px; overflow-x:auto; align-items:flex-start; padding-bottom:12px; }
.kcol { min-width:225px; width:225px; flex-shrink:0; background:#eef0f4; border-radius:10px; padding:8px; }
.kcol-head { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 8px; font-size:12px; color:var(--text-sub); }
.kcol-empty { text-align:center; color:#b8bcc4; padding:14px 0; font-size:13px; }
.kcard { background:#fff; border:1.5px solid var(--border); border-radius:8px; padding:10px 11px; margin-bottom:8px; cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.06); }
.kcard:hover { border-color:#93c5fd; }
.kcard.stale { border-color:#fca5a5; }
.kcard-title { font-size:13px; font-weight:700; line-height:1.35; margin-bottom:6px; }
.kcard-tags { margin-bottom:5px; display:flex; flex-wrap:wrap; gap:3px; }
.kcard-tags .tag, .kcard-meta .tag { font-size:11px; padding:1.5px 7px; margin-left:0; }
.kcard-meta { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:6px; }
.kcard-foot { display:flex; gap:8px; font-size:11.5px; color:var(--text-sub); align-items:center; }
.kcard-foot a { color:var(--primary); text-decoration:none; font-weight:600; }
.kcard-days { margin-left:auto; }

/* 협업 메모 */
.cmt-row { display:flex; align-items:center; gap:8px; background:#f8f9fb; border:1px solid var(--border); border-radius:8px; padding:7px 10px; }
.cmt-body { flex:1; font-size:13px; white-space:pre-wrap; }
.cmt-row .btn-danger { padding:3px 9px; font-size:11.5px; }
.att-add input[type=text] { flex:1; padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
a.btn-sub { text-decoration:none; color:var(--text); display:inline-flex; align-items:center; }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#111c3d; color:#fff; padding:11px 20px; border-radius:999px; font-size:13.5px; box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:200; animation:fadein .2s; }
@keyframes fadein { from { opacity:0; transform:translate(-50%,8px);} to { opacity:1; transform:translate(-50%,0);} }
@media (max-width:640px){ .modal .body { grid-template-columns:1fr; } .topbar .user { display:none; } }

/* 인쇄 (주간 보고) */
.print-only { display:none; }
@media print {
  .topbar, .navtabs, .no-print, .mod-head { display:none !important; }
  .print-only { display:block; }
  body { background:#fff; }
  .main { max-width:100%; padding:0; }
  .dash-cols { display:block; }
  .panel { border:1px solid #ccc; box-shadow:none; margin-bottom:12px; break-inside:avoid; }
}