/* 디자인 시안 전환 (A: 기본 styles.css / B: 토스·플렉스 / C: 다크 업무툴) */
.theme-bar { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: -10px 0 14px; flex-wrap: wrap; }
.theme-label { font-size: 12px; color: var(--sub); margin-right: 4px; }
.theme-bar button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--sub); }
.theme-bar button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.bottomnav { display: none; }
.modal-bg.center { align-items: center; padding: 16px; z-index: 80; }
.modal.confirm { min-height: 0; border-radius: 18px; }
.modal.confirm .modal-f { position: static; border-radius: 0 0 18px 18px; }
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.stat .v { white-space: nowrap; font-size: clamp(20px, 2.1vw, 28px); }
[data-theme="b"] .stat .v { font-size: clamp(22px, 2.3vw, 32px); }
[data-theme="c"] .stat .v { font-size: clamp(18px, 1.7vw, 22px); }

/* ================= B: 토스·플렉스 스타일 ================= */
html[data-theme="b"] {
  --bg: #f2f4f6; --line: #eceef1; --line2: #f2f4f6; --text: #191f28; --sub: #6b7684; --mute: #8b95a1;
  --primary: #3182f6; --primary-soft: #e8f3ff; --blue-soft: #e8f3ff; --radius: 22px;
  --green: #03b26c; --green-soft: #e5f8ef; --red: #f04452; --red-soft: #ffeeee; --amber: #e67700; --amber-soft: #fff4e5;
}
[data-theme="b"] body { font-size: 15px; }
[data-theme="b"] .sidebar { border-right: 0; padding: 22px 14px; }
[data-theme="b"] .logo { background: var(--primary); border-radius: 12px; }
[data-theme="b"] .brand { font-size: 20px; }
[data-theme="b"] .nav-group { color: #b0b8c1; }
[data-theme="b"] .nav-item { border-radius: 12px; padding: 11px 14px; color: #4e5968; }
[data-theme="b"] .nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
[data-theme="b"] .main { padding: 32px 40px 80px; }
[data-theme="b"] .page-head h1 { font-size: 30px; font-weight: 800; }
[data-theme="b"] .crumb { color: var(--primary); font-weight: 700; }
[data-theme="b"] .card, [data-theme="b"] .stat, [data-theme="b"] .tbl-wrap, [data-theme="b"] .sheet, [data-theme="b"] .gantt-wrap, [data-theme="b"] .report {
  border: 0; box-shadow: 0 2px 10px rgba(0, 27, 55, .05);
}
[data-theme="b"] .card { padding: 24px; }
[data-theme="b"] .stats { gap: 16px; }
[data-theme="b"] .stat { padding: 22px 24px; transition: transform .15s; }
[data-theme="b"] .stat.click:hover { transform: translateY(-2px); }
[data-theme="b"] .btn { border: 0; background: #f2f4f6; border-radius: 14px; padding: 11px 18px; color: #333d4b; }
[data-theme="b"] .btn:hover { background: #e5e8eb; }
[data-theme="b"] .btn.primary { background: var(--primary); color: #fff; }
[data-theme="b"] .btn.primary:hover { background: #1b64da; }
[data-theme="b"] .btn.green { background: var(--green); color: #fff; }
[data-theme="b"] .btn.danger { background: var(--red-soft); color: var(--red); }
[data-theme="b"] .btn.sm { padding: 7px 12px; border-radius: 10px; }
[data-theme="b"] .tabs { border: 0; gap: 6px; margin-bottom: 16px; }
[data-theme="b"] .tab { border: 0; border-radius: 99px; padding: 9px 16px; background: #fff; color: #4e5968; }
[data-theme="b"] .tab.active { background: var(--text); color: #fff; }
[data-theme="b"] .tab.active .n { background: rgba(255,255,255,.2); }
[data-theme="b"] .chip { border: 0; background: #fff; padding: 8px 14px; }
[data-theme="b"] .chip.active { background: var(--primary); color: #fff; }
[data-theme="b"] .inp { background: #f2f4f6; border-color: transparent; border-radius: 12px; padding: 12px 14px; }
[data-theme="b"] .inp:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
[data-theme="b"] .tbl th { background: #fff; color: var(--mute); border-bottom-color: var(--line2); padding: 14px 18px; }
[data-theme="b"] .tbl td { padding: 16px 18px; }
[data-theme="b"] .tbl tr.click:hover td { background: #f9fafb; }
[data-theme="b"] .badge { border-radius: 8px; padding: 4px 10px; }
[data-theme="b"] .modal { border-radius: 26px; }
[data-theme="b"] .modal-h { border-bottom: 0; padding: 22px 26px 6px; }
[data-theme="b"] .modal-h h2 { font-size: 22px; }
[data-theme="b"] .modal-f { border-top: 0; background: #fff; border-radius: 0 0 26px 26px; padding: 16px 26px 22px; }
[data-theme="b"] .type-card { border: 2px solid transparent; background: #f2f4f6; border-radius: 16px; padding: 16px; }
[data-theme="b"] .type-card.on { border-color: var(--primary); background: var(--primary-soft); }
[data-theme="b"] .money-grid .m { background: #f9fafb; border-radius: 16px; }
[data-theme="b"] .avatar { background: var(--primary); }
[data-theme="b"] .side-foot { border-top-color: var(--line2); }
[data-theme="b"] .theme-bar button { border: 0; }

/* ================= C: 다크 업무툴 스타일 ================= */
html[data-theme="c"] {
  --bg: #f7f7f8; --line: #e4e4e7; --line2: #efeff1; --text: #18181b; --sub: #71717a; --mute: #a1a1aa;
  --primary: #5b5bd6; --primary-soft: #eef0ff; --blue-soft: #eef0ff; --radius: 8px;
}
[data-theme="c"] body { font-size: 13px; }
[data-theme="c"] .sidebar { background: #16171b; border-right: 0; width: 220px; }
[data-theme="c"] .brand { color: #fff; font-size: 15px; }
[data-theme="c"] .logo { background: var(--primary); border-radius: 6px; width: 26px; height: 26px; font-size: 13px; }
[data-theme="c"] .nav-group { color: #5f6170; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
[data-theme="c"] .nav-item { color: #b4b6c0; border-radius: 6px; padding: 7px 10px; font-size: 13px; }
[data-theme="c"] .nav-item:hover { background: #22242a; color: #fff; }
[data-theme="c"] .nav-item.active { background: #26282f; color: #fff; box-shadow: inset 3px 0 0 var(--primary); }
[data-theme="c"] .side-foot { border-top-color: #26282f; }
[data-theme="c"] .side-foot label, [data-theme="c"] .proto-note { color: #6b6e7a; }
[data-theme="c"] .side-foot .inp { background: #22242a; border-color: #2e3038; color: #e4e4e7; }
[data-theme="c"] .main { padding: 22px 28px 80px; }
[data-theme="c"] .page-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
[data-theme="c"] .page-head h1 { font-size: 21px; font-weight: 700; }
[data-theme="c"] .page-head p { font-size: 13px; }
[data-theme="c"] .crumb { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
[data-theme="c"] .card { padding: 16px; }
[data-theme="c"] .stats { gap: 10px; }
[data-theme="c"] .stat { padding: 14px 16px; border-left: 3px solid var(--primary); }
[data-theme="c"] .stat .k { font-size: 12px; text-transform: none; }
[data-theme="c"] .stat .v { font-weight: 700; margin: 6px 0 2px; }
[data-theme="c"] .btn { border-radius: 6px; padding: 7px 12px; font-size: 13px; }
[data-theme="c"] .btn.primary { background: var(--primary); border-color: var(--primary); }
[data-theme="c"] .btn.primary:hover { background: #4747c2; }
[data-theme="c"] .btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 5px; }
[data-theme="c"] .tab { padding: 8px 12px; font-size: 13px; }
[data-theme="c"] .tab.active { color: var(--primary); border-color: var(--primary); }
[data-theme="c"] .chip { border-radius: 6px; padding: 4px 10px; font-size: 12px; }
[data-theme="c"] .chip.active { background: var(--primary); border-color: var(--primary); }
[data-theme="c"] .inp { border-radius: 6px; padding: 8px 10px; }
[data-theme="c"] .inp:focus { box-shadow: 0 0 0 3px var(--primary-soft); }
[data-theme="c"] .tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 9px 12px; background: #fafafa; }
[data-theme="c"] .tbl td { padding: 9px 12px; font-size: 13px; }
[data-theme="c"] .tbl tbody tr:nth-child(even) td { background: #fcfcfd; }
[data-theme="c"] .tbl tr.click:hover td { background: var(--primary-soft); }
[data-theme="c"] .badge { border-radius: 4px; font-size: 11px; padding: 2px 7px; }
[data-theme="c"] .modal { border-radius: 10px; }
[data-theme="c"] .modal-f { border-radius: 0 0 10px 10px; }
[data-theme="c"] .modal-h h2 { font-size: 16px; }
[data-theme="c"] .type-card { border-radius: 8px; }
[data-theme="c"] .avatar { background: var(--primary); border-radius: 6px; }
[data-theme="c"] .topbar { background: #16171b; color: #fff; border-bottom: 0; }
[data-theme="c"] .topbar button { color: #fff; }
[data-theme="c"] .theme-bar button { border-radius: 6px; }

/* ============ B·C 모바일: 하단 탭바 (앱처럼 엄지로 이동) ============ */
@media (max-width: 860px) {
  [data-theme="b"] .bottomnav, [data-theme="c"] .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: #fff;
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--mute); font-weight: 600; cursor: pointer; }
  .bottomnav a.active { color: var(--primary); }
  .bottomnav .bi { font-size: 20px; position: relative; }
  .bottomnav .bdot { position: absolute; top: -4px; right: -10px; background: var(--red); color: #fff; font-size: 10px; border-radius: 99px; padding: 0 5px; line-height: 16px; }
  [data-theme="c"] .bottomnav { background: #16171b; border-top-color: #26282f; }
  [data-theme="c"] .bottomnav a.active { color: #fff; }
  [data-theme="b"] .main, [data-theme="c"] .main { padding-bottom: 100px; }
  [data-theme="b"] .main { padding-left: 16px; padding-right: 16px; }
  [data-theme="b"] .page-head h1 { font-size: 24px; }
  [data-theme="b"] .topbar { border-bottom: 0; background: var(--bg); }
  [data-theme="b"] .modal, [data-theme="c"] .modal { border-radius: 0; }
  .theme-bar { justify-content: flex-start; margin-top: 0; }
}

/* ===== 로그인 · 회원가입 화면 ===== */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: #16171b; }
.auth-card { width: 100%; max-width: 400px; background: #fff; border-radius: 12px; padding: 28px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.auth-form { display: grid; gap: 12px; }
.auth-title { margin: 0 0 8px; font-size: 19px; }
.auth-err { margin: 0; background: var(--red-soft); color: #991b1b; border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.auth-btn { width: 100%; justify-content: center; padding: 11px; margin-top: 4px; }
.auth-card .seg { width: 100%; }
.auth-card .seg button { flex: 1; }
.me-box { display: flex; align-items: center; gap: 10px; color: #e4e4e7; font-size: 13px; }
.me-role { font-size: 11px; color: #8b8f98; margin-top: 2px; }
[data-theme="c"] .side-btn { background: #22242a; border-color: #2e3038; color: #c9cbd1; flex: 1; justify-content: center; }
[data-theme="c"] .side-btn:hover { background: #2a2c33; color: #fff; }
[data-theme="c"] .auth-card .brand { color: var(--text); }
.show-m { display: none; }
@media (max-width: 860px) { .show-m { display: inline; } }

/* 검색 목록 (협력업체·공종) */
.combo { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; }
.combo-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.combo-list li span { color: var(--sub); font-size: 12px; white-space: nowrap; }
.combo-list li:hover, .combo-list li.hi { background: var(--primary-soft); }
.combo-list li.on { font-weight: 700; }