/* =====================================================
   ART412 WORKSPACE — Design System
   Theme: Dark Notion / iOS — v6  (+Light Mode)
   ===================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* =====================================================
   VARIABLES
   ===================================================== */
:root {
  /* 다크 베이스 */
  --bg:          #0f0f0f;
  --bg-elevated: #1a1a1a;
  --bg-card:     #1e1e1e;
  --bg-hover:    #252525;
  --bg-active:   #2a2a2a;
  --bg-overlay:  rgba(0,0,0,0.7);

  /* 경계선 */
  --border:      rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);

  /* 텍스트 */
  --text-primary:   #f0f0f0;
  --text-secondary: #a0a0a0;
  --text-tertiary:  #666666;
  --text-placeholder: #4a4a4a;

  /* 액센트 — iOS/Notion 블루 & 인디고 */
  --accent:       #6b7cff;
  --accent-dim:   rgba(107,124,255,0.15);
  --accent-hover: #7d8dff;

  /* 시맨틱 컬러 */
  --red:         #ff5f57;
  --red-dim:     rgba(255,95,87,0.12);
  --green:       #30d158;
  --green-dim:   rgba(48,209,88,0.12);
  --amber:       #ffd60a;
  --amber-dim:   rgba(255,214,10,0.1);
  --blue:        #0a84ff;
  --blue-dim:    rgba(10,132,255,0.12);
  --purple:      #bf5af2;
  --purple-dim:  rgba(191,90,242,0.12);
  --orange:      #ff9f0a;
  --orange-dim:  rgba(255,159,10,0.12);
  --teal:        #40c8e0;
  --teal-dim:    rgba(64,200,224,0.12);

  /* 레거시 호환 */
  --black:       #0f0f0f;
  --white:       #f0f0f0;
  --gray-900:    #1a1a1a;
  --gray-800:    #2a2a2a;
  --gray-700:    #3a3a3a;
  --gray-600:    #555555;
  --gray-500:    #777777;
  --gray-400:    #999999;
  --gray-300:    #bbbbbb;
  --gray-200:    rgba(255,255,255,0.08);
  --gray-100:    rgba(255,255,255,0.05);
  --gray-50:     rgba(255,255,255,0.03);

  /* 폰트 */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 반경 — iOS처럼 넉넉하게 */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-full: 9999px;

  /* 그림자 */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.3);
  --shadow:     0 4px 16px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.5);

  /* 레이아웃 */
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --transition: .18s ease;
}

/* =====================================================
   BASE
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font); }
input, select, textarea { font-family: var(--font); }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

/* =====================================================
   SCROLLBAR
   ===================================================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* =====================================================
   LAYOUT
   ===================================================== */
.main-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: transform var(--transition);
  overflow-y: auto;
}

.sidebar-logo {
  padding: 24px 20px 18px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo h1 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-logo span {
  font-size: 11px;
  letter-spacing: .5px;
  color: var(--text-tertiary);
  font-weight: 400;
  margin-top: 3px;
  display: block;
}

.sidebar-user {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  border-radius: 0;
}
.sidebar-user:hover {
  background: var(--bg-hover);
}
.sidebar-user:hover .user-name {
  color: var(--accent);
}
.sidebar-user:hover .fas.fa-pencil-alt {
  opacity: 1 !important;
  color: var(--accent) !important;
}
.user-avatar {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-role {
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: .2px;
}

.sidebar-nav { padding: 10px 0; flex: 1; }
.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 20px 5px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  border-radius: 0;
  margin: 1px 8px;
  border-radius: var(--radius);
  border-left: none;
}
.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.nav-item.active {
  color: var(--text-primary);
  background: var(--bg-active);
  font-weight: 600;
}
.nav-item i { width: 18px; text-align: center; font-size: 13px; opacity: .8; }
.nav-item.active i { opacity: 1; }

.sidebar-footer { padding: 14px 20px; border-top: 1px solid var(--border); }

/* Main content */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

.top-bar {
  height: var(--topbar-h);
  background: rgba(15,15,15,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-bar-left { display: flex; align-items: center; gap: 12px; }
.top-bar-right { display: flex; align-items: center; gap: 10px; }
.top-bar h2 { font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--text-primary); }
.hamburger { display: none; background: none; border: none; font-size: 18px; color: var(--text-secondary); padding: 6px; }

.page-content {
  padding: 24px;
  flex: 1;
  max-width: 1400px;
  width: 100%;
  animation: fadeInUp .3s ease;
}

/* =====================================================
   SIDEBAR OVERLAY (mobile)
   ===================================================== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 199;
  backdrop-filter: blur(4px);
}
.sidebar-overlay.show { display: block; }

/* =====================================================
   CARDS
   ===================================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 14px;
  transition: border-color var(--transition);
}
.card:hover { border-color: var(--border-strong); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.card-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -.1px;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(107,124,255,0.35); }

.btn-secondary {
  background: var(--bg-active);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); }

.btn-danger {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(255,95,87,0.2);
}
.btn-danger:hover { background: rgba(255,95,87,0.2); }

/* 사이트 관리 버튼 */
.btn-cms {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  font-weight: 600;
}
.btn-cms:hover { opacity: 0.88; }
[data-theme="light"] .btn-cms { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; }

.btn-success {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(48,209,88,0.2);
}
.btn-success:hover { background: rgba(48,209,88,0.2); }

.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-xs { padding: 4px 9px; font-size: 11px; border-radius: var(--radius-sm); }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { padding: 7px 9px; }
.btn-icon.btn-sm { padding: 5px 7px; }
.mt-16 { margin-top: 16px; }

/* =====================================================
   FORMS
   ===================================================== */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: .1px;
}
.input {
  width: 100%;
  padding: 10px 13px;
  font-size: 13px;
  font-family: var(--font);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.input:hover { border-color: var(--border-strong); }
.input::placeholder { color: var(--text-placeholder); }
select.input {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-hover);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
textarea.input { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.mb-0 { margin-bottom: 0 !important; }
.input-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: .1px; }

/* =====================================================
   AUTH
   ===================================================== */
.auth-screen {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp .4s ease;
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--text-primary);
}
.auth-logo p {
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--text-tertiary);
  margin-top: 5px;
}
.auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; gap: 4px; }
.auth-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.auth-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.auth-tab:hover { color: var(--text-secondary); }
.auth-form { display: none; }
.auth-form.active { display: block; animation: fadeIn .2s ease; }
.alert { font-size: 13px; padding: 0; max-height: 0; overflow: hidden; border-radius: var(--radius); transition: all .3s; }
.alert.show { padding: 10px 14px; max-height: 80px; margin-bottom: 14px; }
.alert-error { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,95,87,0.25); }
.alert-success { background: var(--green-dim); color: var(--green); border: 1px solid rgba(48,209,88,0.25); }

/* =====================================================
   STATS GRID
   ===================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all var(--transition);
  animation: fadeInUp .35s ease both;
}
.stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
/* 이모지 아이콘이니 배경만 */
.stat-icon.black  { background: rgba(107,124,255,0.12); }
.stat-icon.gray   { background: rgba(255,255,255,0.06); }
.stat-icon.red    { background: var(--red-dim); }
.stat-icon.green  { background: var(--green-dim); }
.stat-icon.blue   { background: var(--blue-dim); }
.stat-icon.orange { background: var(--orange-dim); }
.stat-icon.purple { background: var(--purple-dim); }

.stat-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text-primary);
}
.stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 3px;
  font-weight: 500;
  letter-spacing: .1px;
}
.stat-info { flex: 1; }

/* =====================================================
   DASH GRID
   ===================================================== */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* =====================================================
   QUICK FORM
   ===================================================== */
.quick-form { display: flex; flex-direction: column; gap: 10px; }
.quick-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* =====================================================
   TODO LIST
   ===================================================== */
.todo-list { display: flex; flex-direction: column; }
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius);
  transition: background var(--transition);
  animation: slideInLeft .25s ease both;
}
.todo-item:hover { background: var(--bg-hover); }
.todo-checkbox { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.todo-main { flex: 1; min-width: 0; }
.todo-text { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.todo-text.done { text-decoration: line-through; color: var(--text-tertiary); }
.todo-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; align-items: center; }
.todo-actions { flex-shrink: 0; }
.project-tag {
  font-size: 11px;
  background: var(--accent-dim);
  color: var(--accent-hover);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 500;
}
.due-tag { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.due-tag.overdue { color: var(--red); font-weight: 600; }
.due-tag.today   { color: var(--green); font-weight: 600; }

/* =====================================================
   STATUS BADGES
   ===================================================== */
.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  letter-spacing: .1px;
}
.badge-pending    { background: rgba(255,255,255,0.07); color: var(--text-tertiary); }
.badge-inprogress { background: var(--blue-dim); color: var(--blue); }
.badge-done       { background: var(--green-dim); color: var(--green); }
.badge-hold       { background: var(--amber-dim); color: var(--amber); }

/* Project phase statuses */
.status-wait     { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.status-contract { background: var(--blue-dim); color: var(--blue); }
.status-design   { background: var(--purple-dim); color: var(--purple); }
.status-work     { background: var(--amber-dim); color: var(--amber); }
.status-done     { background: var(--green-dim); color: var(--green); }

/* =====================================================
   PROJECT GRID
   ===================================================== */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  animation: fadeInUp .3s ease both;
}
.project-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.project-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.project-card-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  flex: 1;
  margin-right: 10px;
  color: var(--text-primary);
}
.project-date { font-size: 11px; color: var(--text-tertiary); margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
.progress-bar-wrap {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  height: 4px;
  margin-bottom: 6px;
}
.progress-bar {
  background: var(--accent);
  border-radius: var(--radius-full);
  height: 100%;
  transition: width .5s ease;
}
.progress-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 12px; }
.project-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }
.project-cost { font-size: 12px; color: var(--text-tertiary); font-weight: 500; }

/* Project status stepper */
.project-status-stepper { display: flex; gap: 4px; margin-bottom: 12px; align-items: center; }
.step-btn {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  border: none;
  cursor: pointer;
  transition: background var(--transition);
}
.step-btn.active { background: var(--accent); }
.step-btn.passed { background: rgba(107,124,255,0.4); }

/* Phase status badge */
.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  cursor: pointer;
  letter-spacing: .1px;
}

/* =====================================================
   STATUS SELECTOR
   ===================================================== */
.status-selector {
  display: inline-flex;
  gap: 3px;
  background: rgba(255,255,255,0.05);
  padding: 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.status-opt {
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all var(--transition);
}
.status-opt.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* =====================================================
   PROJECT DETAIL
   ===================================================== */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: 20px;
  transition: color var(--transition);
  border-radius: var(--radius);
  padding: 5px 10px;
}
.back-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.project-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; }
.project-detail-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--text-primary); }
.project-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }

/* Phase timeline */
.phase-timeline { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.phase-item {
  flex: 1;
  min-width: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--bg-card);
  transition: .15s;
}
.phase-item.active {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.phase-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-tertiary); margin-bottom: 4px; }
.phase-dates { font-size: 12px; color: var(--text-secondary); }

/* =====================================================
   TABS
   ===================================================== */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tab-btn {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border-left: none; border-right: none; border-top: none;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn .2s ease; }

/* =====================================================
   TABLE
   ===================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { border-bottom: 1px solid var(--border-strong); }
th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-hover); color: var(--text-primary); }
tfoot td { background: var(--bg-elevated); font-weight: 700; font-size: 13px; border-top: 1px solid var(--border-strong); border-bottom: none; color: var(--text-primary); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.no-wrap     { white-space: nowrap; }
.font-bold   { font-weight: 700; }
.text-red    { color: var(--red) !important; }
.text-green  { color: var(--green) !important; }
.text-muted  { color: var(--text-tertiary) !important; }
.text-sm  { font-size: 12px; }
.text-xs  { font-size: 11px; }

/* =====================================================
   STATUS SELECT (table inline)
   ===================================================== */
.status-select {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 22px 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--bg-hover);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  transition: border-color var(--transition);
}
.status-select:hover { border-color: var(--border-strong); }

/* =====================================================
   CHIPS & TAGS
   ===================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
  letter-spacing: .1px;
}
.chip.blue   { background: var(--blue-dim);   color: var(--blue); }
.chip.green  { background: var(--green-dim);  color: var(--green); }
.chip.black  { background: var(--accent-dim); color: var(--accent-hover); }
.chip-black  { background: var(--accent-dim); color: var(--accent-hover); border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; }
.chip-black button { color: var(--accent-hover); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); }
.chip-sm { padding: 2px 8px; font-size: 11px; border-radius: var(--radius-full); }

/* Cost type tags */
.cost-type-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-full); }
.cost-material  { background: rgba(255,255,255,0.07); color: var(--text-secondary); }
.cost-labor     { background: var(--blue-dim);   color: var(--blue); }
.cost-logistics { background: var(--orange-dim); color: var(--orange); }
.cost-etc       { background: rgba(255,255,255,0.05); color: var(--text-tertiary); }

/* =====================================================
   MODAL
   ===================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-overlay.show { display: flex; animation: fadeIn .2s ease; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px;
  box-shadow: var(--shadow-lg);
  animation: fadeInUp .22s ease;
}
.modal-lg { max-width: 680px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-title { font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--text-primary); }
.modal-close {
  background: rgba(255,255,255,0.07);
  border: none;
  font-size: 15px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  transition: all .15s;
  line-height: 1;
}
.modal-close:hover { background: var(--red-dim); color: var(--red); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* =====================================================
   COST SUMMARY
   ===================================================== */
.cost-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.cost-summary-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: border-color .15s;
}
.cost-summary-item:hover { border-color: var(--border-strong); }
.cost-summary-item.danger  { border-left: 3px solid var(--red); }
.cost-summary-item.success { border-left: 3px solid var(--green); }
.cost-summary-item.orange  { border-left: 3px solid var(--orange); }
.cost-summary-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); letter-spacing: .3px; text-transform: uppercase; margin-bottom: 6px; }
.cost-summary-value { font-size: 18px; font-weight: 800; letter-spacing: -1px; color: var(--text-primary); }

/* =====================================================
   PAYROLL
   ===================================================== */
.payroll-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 14px;
}
.payroll-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.payroll-section-title.art { color: var(--text-primary); }
.payroll-list { display: flex; flex-direction: column; gap: 6px; }
.payroll-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
  transition: border-color .15s;
}
.payroll-row:hover { border-color: var(--border-strong); }
.payroll-row label { flex: 1; min-width: 120px; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.payroll-row input[type="number"].pr-qty,
.payroll-row input[type="number"].pr-hours,
.payroll-row input[type="number"].pr-tax-free {
  width: 90px; padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; text-align: right;
  background: var(--bg-card); color: var(--text-primary);
}
.payroll-row input[type="number"] {
  width: 80px; padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px; text-align: right;
  font-family: var(--font);
  background: var(--bg-card); color: var(--text-primary);
}
.payroll-row input:disabled { background: var(--bg-elevated); color: var(--text-tertiary); cursor: not-allowed; }
.payroll-result-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.payroll-result-table th, .payroll-result-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--border); }
.payroll-result-table th:first-child, .payroll-result-table td:first-child { text-align: left; }
.payroll-result-table thead th { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-tertiary); }
.payroll-result-table tfoot td { background: var(--bg-elevated); font-weight: 700; border-top: 1px solid var(--border-strong); color: var(--text-primary); }

/* =====================================================
   MEMBER (employee) section
   ===================================================== */
.emp-section { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.salary-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
  border: 1px solid rgba(107,124,255,0.25);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 4px 20px rgba(107,124,255,0.1);
}
.salary-card h3 { font-size: 12px; font-weight: 500; opacity: .65; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.salary-card .amount { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: #fff; }
.salary-card .sub { font-size: 11px; opacity: .45; margin-top: 5px; }

/* =====================================================
   EXPENSE ROW
   ===================================================== */
.expense-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  border-radius: var(--radius);
  transition: background .15s;
}
.expense-row:hover { background: var(--bg-hover); }
.expense-info { flex: 1; min-width: 0; }
.expense-info .title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.expense-info .meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.expense-amount { font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--text-primary); }
.expense-status { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); }
.expense-pending  { background: var(--amber-dim);  color: var(--amber); }
.expense-approved { background: var(--green-dim);  color: var(--green); }
.expense-rejected { background: var(--red-dim);    color: var(--red); }

/* =====================================================
   ACTION GROUP
   ===================================================== */
.action-group { display: flex; gap: 4px; align-items: center; }

/* =====================================================
   EMPTY STATE
   ===================================================== */
.empty-state { padding: 48px 20px; text-align: center; color: var(--text-tertiary); }
.empty-state i { font-size: 36px; margin-bottom: 12px; display: block; opacity: .6; }
.empty-state p { font-size: 13px; line-height: 1.7; }

/* =====================================================
   CALENDAR
   ===================================================== */
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calendar-title { font-size: 16px; font-weight: 700; letter-spacing: -.3px; color: var(--text-primary); }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cal-day-name {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  text-align: center;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.cal-day { background: var(--bg-card); min-height: 100px; padding: 6px; }
.cal-day.other-month { background: var(--bg-elevated); opacity: .6; }
.cal-day.today { background: rgba(107,124,255,0.06); }
.cal-day.today .cal-day-num {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 3px;
  display: flex; align-items: center;
}
.cal-event {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event.work         { background: var(--accent-dim); color: var(--accent-hover); }
.cal-event.todo         { background: rgba(255,255,255,0.07); color: var(--text-secondary); }
.cal-event.phase-pre    { background: var(--blue-dim);   color: var(--blue); }
.cal-event.phase-site   { background: var(--amber-dim);  color: var(--amber); }
.cal-event.phase-remove { background: var(--red-dim);    color: var(--red); }

/* =====================================================
   CLIENT / LOCATION PAGES
   ===================================================== */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.client-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all var(--transition);
}
.client-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.client-name { font-size: 16px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 6px; color: var(--text-primary); }
.client-meta { font-size: 12px; color: var(--text-tertiary); display: flex; flex-direction: column; gap: 3px; }
.client-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.client-stat {
  text-align: center;
  padding: 10px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.client-stat-val { font-size: 16px; font-weight: 800; letter-spacing: -.5px; color: var(--text-primary); }
.client-stat-label { font-size: 10px; color: var(--text-tertiary); font-weight: 500; margin-top: 2px; }

.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.location-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all var(--transition);
}
.location-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.location-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.location-addr { font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
.location-projects-count { font-size: 22px; font-weight: 800; color: var(--text-primary); }

/* =====================================================
   DIVIDER
   ===================================================== */
.divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
hr.divider { border-color: var(--border); }

/* =====================================================
   EXPENSE MODAL — amount type toggle
   ===================================================== */
.amount-type-toggle {
  display: flex;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.05);
  padding: 3px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  gap: 3px;
}
.amount-type-btn {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
  border-radius: var(--radius-sm);
}
.amount-type-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }

/* =====================================================
   PROJECT STATUS QUICK CHANGER
   ===================================================== */
.proj-status-bar { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.proj-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
}
.proj-status-btn:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.proj-status-btn.active { border-color: transparent; color: #fff; font-weight: 700; }
.proj-status-btn[data-s="wait"].active     { background: var(--bg-active); color: var(--text-secondary); }
.proj-status-btn[data-s="contract"].active { background: var(--blue); }
.proj-status-btn[data-s="design"].active   { background: var(--purple); }
.proj-status-btn[data-s="work"].active     { background: var(--amber); color: #111; }
.proj-status-btn[data-s="done"].active     { background: var(--green); color: #111; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) { .dash-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-240px); width: 240px; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .hamburger { display: flex; }
  .page-content { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .cost-summary-grid { grid-template-columns: 1fr 1fr; }
  .emp-section { grid-template-columns: 1fr; }
  .modal { padding: 20px; }
  .quick-form-row { grid-template-columns: 1fr; }
  .table-wrap { font-size: 12px; }
  th, td { padding: 8px 8px; }
  .phase-timeline { flex-direction: column; }
  .project-detail-header { flex-direction: column; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .client-grid, .location-grid { grid-template-columns: 1fr; }
  .calendar-grid { font-size: 10px; }
  .cal-day { min-height: 50px; }
}

/* =====================================================
   ADDITIONAL v4/v5 compatibility
   ===================================================== */
.schedule-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.search-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  color: var(--text-secondary);
}
.search-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.contact-row-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.file-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-hover); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 12px; color: var(--text-secondary); }
.back-btn { margin-bottom: 20px; }
.stat-info { flex: 1; }

/* =====================================================
   MEMBER TEAM TABS & CARDS — v5
   ===================================================== */
.member-team-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.member-team-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-tertiary);
  transition: all var(--transition);
  cursor: pointer;
}
.member-team-tab:hover { color: var(--text-secondary); }
.member-team-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.member-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: rgba(255,255,255,0.08); color: var(--text-secondary);
  border-radius: var(--radius-full); font-size: 11px; font-weight: 700;
}
.member-team-tab.active .member-count-badge { background: var(--accent-dim); color: var(--accent-hover); }

.member-team-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; border-radius: var(--radius-lg); margin-bottom: 18px;
  border: 1px solid var(--border);
}
.member-team-header.art {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-color: rgba(107,124,255,0.2);
}
.member-team-header.construction {
  background: linear-gradient(135deg, #1a2030 0%, #1e2840 100%);
  border-color: rgba(10,132,255,0.2);
}
.member-team-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; color: #fff; }
.member-team-desc { font-size: 12px; opacity: 0.55; color: #fff; }

.member-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.member-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.member-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-strong); }
.art-card  { border-top: 3px solid var(--accent); }
.cons-card { border-top: 3px solid var(--blue); }

.member-card-header { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.member-avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; flex-shrink: 0;
}
.art-avatar  { background: linear-gradient(135deg, var(--accent), var(--purple)); color: #fff; }
.cons-avatar { background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; }

.member-card-info { flex: 1; min-width: 0; }
.member-card-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; color: var(--text-primary); }
.member-card-role { font-size: 12px; color: var(--text-tertiary); }
.member-card-actions { display: flex; gap: 4px; flex-shrink: 0; }

.member-card-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.member-detail-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.member-detail-row i { width: 14px; color: var(--text-tertiary); }
.member-active-projects { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.member-proj-chip { background: var(--bg-elevated); padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.member-proj-chip.cons { background: var(--blue-dim); color: var(--blue); }
.member-memo { font-size: 11px; color: var(--text-tertiary); font-style: italic; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }

/* =====================================================
   NOTION-STYLE PROJECT PAGE — v5
   ===================================================== */
.notion-page-header { margin-bottom: 28px; }
.notion-page-cover {
  height: 120px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #1a2030 100%);
  border-radius: var(--radius-lg);
  margin-bottom: -20px;
  border: 1px solid var(--border);
}
.notion-page-title-wrap { display: flex; align-items: flex-start; gap: 16px; padding: 0 8px; position: relative; z-index: 1; }
.notion-page-icon {
  width: 52px; height: 52px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; box-shadow: var(--shadow); flex-shrink: 0;
}
.notion-page-title { font-size: 26px; font-weight: 800; margin-top: 20px; margin-bottom: 8px; line-height: 1.2; letter-spacing: -.5px; color: var(--text-primary); }
.notion-page-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.notion-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 14px; gap: 8px; flex-wrap: wrap;
}
.notion-toolbar-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.notion-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.notion-add-btn:hover { background: var(--accent-dim); color: var(--accent-hover); border-color: rgba(107,124,255,0.3); }
.notion-add-btn i { font-size: 10px; }

.notion-sections { display: flex; flex-direction: column; gap: 4px; }
.notion-section {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 0; border-radius: var(--radius-md); transition: background var(--transition);
}
.notion-section:hover { background: var(--bg-hover); }
.notion-section:hover .section-actions { opacity: 1; }

.section-actions { display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity var(--transition); flex-shrink: 0; padding-top: 2px; }
.section-action-btn {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-tertiary); cursor: pointer; font-size: 10px; transition: all var(--transition);
}
.section-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.section-action-btn.danger:hover { background: var(--red-dim); color: var(--red); border-color: rgba(255,95,87,0.3); }

.notion-section-content { flex: 1; min-width: 0; padding: 4px 8px; }
.notion-heading-wrap { display: flex; align-items: center; gap: 8px; }
.notion-heading-level {
  padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elevated); font-size: 10px; font-weight: 700; color: var(--text-tertiary); cursor: pointer; flex-shrink: 0;
}
.notion-h1 { font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1.3; padding: 4px 0; min-height: 36px; flex: 1; outline: none; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 4px; letter-spacing: -.3px; }
.notion-h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); line-height: 1.3; padding: 4px 0; min-height: 28px; flex: 1; outline: none; }
.notion-h3 { font-size: 14px; font-weight: 700; color: var(--text-secondary); padding: 4px 0; min-height: 24px; flex: 1; outline: none; }
[contenteditable]:empty:before { content: attr(placeholder); color: var(--text-placeholder); pointer-events: none; }
.notion-text { font-size: 14px; line-height: 1.7; color: var(--text-secondary); min-height: 28px; outline: none; padding: 4px 0; white-space: pre-wrap; word-break: break-word; }
.notion-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; }

.notion-callout {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 14px 16px; border-left: 3px solid var(--accent);
}
.callout-emoji { font-size: 20px; cursor: text; outline: none; flex-shrink: 0; line-height: 1.5; }
.callout-text { flex: 1; outline: none; font-size: 14px; line-height: 1.6; color: var(--text-secondary); min-height: 24px; }

.notion-checklist { display: flex; flex-direction: column; gap: 6px; }
.checklist-item { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.checklist-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; accent-color: var(--accent); }
.checklist-text { flex: 1; outline: none; font-size: 14px; color: var(--text-secondary); min-height: 22px; }
.checklist-text.done { text-decoration: line-through; color: var(--text-tertiary); }
.notion-add-item-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: none; border: 1px dashed var(--border-strong);
  border-radius: var(--radius); color: var(--text-tertiary); font-size: 12px;
  cursor: pointer; margin-top: 4px; transition: all var(--transition);
}
.notion-add-item-btn:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-dim); }

.notion-table-wrap { overflow-x: auto; }
.notion-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.notion-table th { background: var(--bg-elevated); border: 1px solid var(--border); padding: 0; font-weight: 700; color: var(--text-secondary); }
.notion-table td { border: 1px solid var(--border); padding: 0; }
.table-cell-edit { padding: 8px 12px; outline: none; min-height: 36px; word-break: break-word; color: var(--text-secondary); }
.table-cell-edit:focus { background: rgba(107,124,255,0.06); }

.notion-image-block { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.notion-link-input { flex: 1; border: none; background: transparent; outline: none; font-size: 13px; color: var(--text-secondary); font-family: var(--font); }
.notion-empty {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 40px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  color: var(--text-tertiary); cursor: pointer; font-size: 14px; transition: all var(--transition);
}
.notion-empty:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-dim); }

/* =====================================================
   PROJECT CALENDAR — CLICKABLE DAY CELLS
   ===================================================== */
.proj-cal-day { cursor: pointer; position: relative; transition: background var(--transition); border-radius: var(--radius-sm); }
.proj-cal-day:hover { background: rgba(107,124,255,0.06); box-shadow: inset 0 0 0 1px rgba(107,124,255,0.2); }
.proj-cal-day:hover .cal-add-hint { opacity: 1; }
.cal-add-hint { opacity: 0; font-size: 9px; color: var(--text-tertiary); margin-left: 3px; transition: opacity var(--transition); }
.proj-cal-day.has-items { background: rgba(107,124,255,0.04); }
.cal-more { font-size: 9px; color: var(--text-tertiary); padding: 1px 4px; cursor: pointer; }
.cal-more:hover { color: var(--accent-hover); }

/* =====================================================
   SIDEBAR — 서브메뉴
   ===================================================== */
.nav-group-header { position: relative; cursor: pointer; }
.nav-chevron { position: absolute; right: 14px; font-size: 10px; color: var(--text-tertiary); transition: transform var(--transition); }
.nav-sub-group { overflow: hidden; }
.nav-item.nav-sub { padding-left: 36px; font-size: 12px; color: var(--text-tertiary); }
.nav-item.nav-sub:hover, .nav-item.nav-sub.active { color: var(--text-primary); background: var(--bg-hover); }
.nav-item.nav-sub i { font-size: 11px; min-width: 16px; }

/* =====================================================
   STAT CARD MINI
   ===================================================== */
.stat-card-mini {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 100px;
}

/* =====================================================
   WORKLOG / PAYROLL PAGES
   ===================================================== */
.wl-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.wl-section-title { font-size: 13px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }

/* =====================================================
   STAGGER ANIMATIONS
   ===================================================== */
.stat-card:nth-child(1) { animation-delay: .04s; }
.stat-card:nth-child(2) { animation-delay: .08s; }
.stat-card:nth-child(3) { animation-delay: .12s; }
.stat-card:nth-child(4) { animation-delay: .16s; }
.stat-card:nth-child(5) { animation-delay: .20s; }

.project-card:nth-child(1) { animation-delay: .04s; }
.project-card:nth-child(2) { animation-delay: .08s; }
.project-card:nth-child(3) { animation-delay: .12s; }
.project-card:nth-child(4) { animation-delay: .16s; }
.project-card:nth-child(5) { animation-delay: .20s; }
.project-card:nth-child(6) { animation-delay: .24s; }

.todo-item:nth-child(1) { animation-delay: .04s; }
.todo-item:nth-child(2) { animation-delay: .08s; }
.todo-item:nth-child(3) { animation-delay: .12s; }
.todo-item:nth-child(4) { animation-delay: .16s; }
.todo-item:nth-child(5) { animation-delay: .20s; }

/* =====================================================
   RESPONSIVE NOTION
   ===================================================== */
@media (max-width: 768px) {
  .member-cards-grid { grid-template-columns: 1fr; }
  .notion-page-title { font-size: 20px; }
  .notion-toolbar { flex-direction: column; align-items: flex-start; }
  .notion-toolbar-left { gap: 4px; }
  .notion-add-btn { font-size: 11px; padding: 4px 8px; }
  .notion-h1 { font-size: 19px; }
  .notion-h2 { font-size: 15px; }
  .section-actions { opacity: 1; }
}

/* =====================================================
   LIGHT MODE — [data-theme="light"]
   ===================================================== */

[data-theme="light"] {
  /* 배경 */
  --bg:          #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-card:     #ffffff;
  --bg-hover:    #f0f0f5;
  --bg-active:   #e8e8f0;
  --bg-overlay:  rgba(0,0,0,0.4);

  /* 경계선 */
  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);

  /* 텍스트 */
  --text-primary:     #1a1a1a;
  --text-secondary:   #555555;
  --text-tertiary:    #999999;
  --text-placeholder: #bbbbbb;

  /* 액센트 — 라이트에선 조금 더 진하게 */
  --accent:       #4f5fd4;
  --accent-dim:   rgba(79,95,212,0.1);
  --accent-hover: #3d4cbf;

  /* 시맨틱 */
  --red:         #e53935;
  --red-dim:     rgba(229,57,53,0.08);
  --green:       #2e7d32;
  --green-dim:   rgba(46,125,50,0.1);
  --amber:       #f57f17;
  --amber-dim:   rgba(245,127,23,0.1);
  --blue:        #1565c0;
  --blue-dim:    rgba(21,101,192,0.1);
  --purple:      #6a1b9a;
  --purple-dim:  rgba(106,27,154,0.1);
  --orange:      #e65100;
  --orange-dim:  rgba(230,81,0,0.1);
  --teal:        #00838f;
  --teal-dim:    rgba(0,131,143,0.1);

  /* 레거시 호환 */
  --black:    #1a1a1a;
  --white:    #ffffff;
  --gray-900: #ffffff;
  --gray-800: #f5f5f7;
  --gray-700: #ebebf0;
  --gray-600: #999999;
  --gray-500: #777777;
  --gray-400: #555555;
  --gray-300: #333333;
  --gray-200: rgba(0,0,0,0.08);
  --gray-100: rgba(0,0,0,0.04);
  --gray-50:  rgba(0,0,0,0.02);

  /* 그림자 — 라이트는 좀 더 선명하게 */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow:    0 4px 16px rgba(0,0,0,0.1);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.15);
}

/* 라이트 모드 body */
[data-theme="light"] body,
[data-theme="light"] {
  background: var(--bg);
  color: var(--text-primary);
}

/* 사이드바 */
[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right-color: var(--border);
}
[data-theme="light"] .sidebar-logo h1 { color: var(--text-primary); }
[data-theme="light"] .sidebar-logo span { color: var(--text-tertiary); }
[data-theme="light"] .nav-section-label { color: var(--text-tertiary); }
[data-theme="light"] .nav-item { color: var(--text-secondary); }
[data-theme="light"] .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
[data-theme="light"] .nav-item.active { background: var(--accent-dim); color: var(--accent); }
[data-theme="light"] .nav-item.active i { color: var(--accent); }
[data-theme="light"] .sidebar-footer { border-top-color: var(--border); }
[data-theme="light"] .sidebar-user:hover { background: var(--bg-hover); }

/* 탑바 */
[data-theme="light"] .top-bar {
  background: rgba(245,245,247,0.9);
  border-bottom-color: var(--border);
}
[data-theme="light"] .top-bar h2 { color: var(--text-primary); }

/* 카드 */
[data-theme="light"] .card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .card:hover { border-color: var(--border-strong); }
[data-theme="light"] .card-title { color: var(--text-primary); }

/* 스크롤바 */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }

/* 인풋 */
[data-theme="light"] .input {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
  color: var(--text-primary);
}
[data-theme="light"] .input:hover { border-color: rgba(0,0,0,0.25); }
[data-theme="light"] .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
[data-theme="light"] .input::placeholder { color: var(--text-placeholder); }
[data-theme="light"] select.input {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
[data-theme="light"] select { color-scheme: light; }

/* 버튼 */
[data-theme="light"] .btn-secondary {
  background: #f0f0f5;
  color: var(--text-primary);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .btn-secondary:hover { background: #e4e4ec; }
[data-theme="light"] .btn-outline {
  color: var(--text-secondary);
  border-color: rgba(0,0,0,0.14);
}
[data-theme="light"] .btn-outline:hover { background: #f0f0f5; color: var(--text-primary); }

/* 테이블 */
[data-theme="light"] table { color: var(--text-secondary); }
[data-theme="light"] th { color: var(--text-tertiary); }
[data-theme="light"] td { border-bottom-color: rgba(0,0,0,0.06); color: var(--text-secondary); }
[data-theme="light"] tr:hover td { background: var(--bg-hover); color: var(--text-primary); }
[data-theme="light"] thead tr { border-bottom-color: rgba(0,0,0,0.1); }
[data-theme="light"] tfoot td { background: #f5f5f7; color: var(--text-primary); border-top-color: rgba(0,0,0,0.1); }

/* 모달 */
[data-theme="light"] .modal {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .modal-title { color: var(--text-primary); }
[data-theme="light"] .modal-footer { border-top-color: var(--border); }
[data-theme="light"] .modal-close { background: rgba(0,0,0,0.05); color: var(--text-tertiary); }
[data-theme="light"] .modal-close:hover { background: var(--red-dim); color: var(--red); }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.45); }

/* 프로젝트 카드 */
[data-theme="light"] .project-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .project-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
[data-theme="light"] .project-card-name { color: var(--text-primary); }
[data-theme="light"] .progress-bar-wrap { background: rgba(0,0,0,0.07); }

/* stat 카드 */
[data-theme="light"] .stat-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .stat-value { color: var(--text-primary); }
[data-theme="light"] .stat-label { color: var(--text-tertiary); }
[data-theme="light"] .stat-icon.black  { background: rgba(79,95,212,0.1); }
[data-theme="light"] .stat-icon.gray   { background: rgba(0,0,0,0.05); }

/* 캘린더 */
[data-theme="light"] .calendar-grid { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .cal-day-name { background: #f5f5f7; color: var(--text-tertiary); }
[data-theme="light"] .cal-day { background: #ffffff; }
[data-theme="light"] .cal-day.other-month { background: #f9f9fb; }
[data-theme="light"] .cal-day.today { background: rgba(79,95,212,0.05); }
[data-theme="light"] .cal-day-num { color: var(--text-secondary); }
[data-theme="light"] .cal-event.work { background: var(--accent-dim); color: var(--accent); }
[data-theme="light"] .cal-event.todo { background: rgba(0,0,0,0.06); color: var(--text-secondary); }

/* 멤버 카드 */
[data-theme="light"] .member-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .member-card-header { border-bottom-color: var(--border); }
[data-theme="light"] .member-card-name { color: var(--text-primary); }
[data-theme="light"] .member-team-header.art { background: linear-gradient(135deg, #3d4cbf 0%, #4f5fd4 100%); }
[data-theme="light"] .member-team-header.construction { background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%); }

/* 급여 카드 */
[data-theme="light"] .salary-card {
  background: linear-gradient(135deg, #3d4cbf 0%, #4f5fd4 100%);
  border-color: transparent;
}

/* 코스트 서머리 */
[data-theme="light"] .cost-summary-item { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .cost-summary-value { color: var(--text-primary); }

/* 페이롤 */
[data-theme="light"] .payroll-section { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .payroll-row { background: #f9f9fb; border-color: var(--border); }
[data-theme="light"] .payroll-row input[type="number"] { background: #ffffff; color: var(--text-primary); border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .payroll-row label { color: var(--text-primary); }

/* auth */
[data-theme="light"] .auth-screen { background: #f5f5f7; }
[data-theme="light"] .auth-box { background: #ffffff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .auth-logo h1 { color: var(--text-primary); }
[data-theme="light"] .auth-logo p { color: var(--text-tertiary); }
[data-theme="light"] .auth-tab { color: var(--text-tertiary); }
[data-theme="light"] .auth-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
[data-theme="light"] .auth-tabs { border-bottom-color: var(--border); }

/* notion 페이지 */
[data-theme="light"] .notion-page-cover { background: linear-gradient(135deg, #e8eaff 0%, #dde1fa 60%, #e8f0fe 100%); border-color: var(--border); }
[data-theme="light"] .notion-page-icon { background: #ffffff; border-color: var(--border-strong); }
[data-theme="light"] .notion-page-title { color: var(--text-primary); }
[data-theme="light"] .notion-toolbar { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .notion-add-btn { background: #f5f5f7; border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .notion-add-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: rgba(79,95,212,0.3); }
[data-theme="light"] .notion-section:hover { background: var(--bg-hover); }
[data-theme="light"] .notion-h1 { color: var(--text-primary); border-bottom-color: var(--border); }
[data-theme="light"] .notion-h2 { color: var(--text-primary); }
[data-theme="light"] .notion-h3 { color: var(--text-secondary); }
[data-theme="light"] .notion-text { color: var(--text-secondary); }
[data-theme="light"] .notion-callout { background: rgba(79,95,212,0.05); border-color: rgba(79,95,212,0.2); border-left-color: var(--accent); }
[data-theme="light"] .callout-text { color: var(--text-secondary); }
[data-theme="light"] .checklist-text { color: var(--text-secondary); }
[data-theme="light"] .notion-table th { background: #f5f5f7; border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .notion-table td { border-color: var(--border); }
[data-theme="light"] .table-cell-edit { color: var(--text-secondary); }
[data-theme="light"] .table-cell-edit:focus { background: rgba(79,95,212,0.04); }
[data-theme="light"] .notion-image-block { background: #f5f5f7; border-color: var(--border); }
[data-theme="light"] .notion-empty { border-color: rgba(0,0,0,0.12); color: var(--text-tertiary); }
[data-theme="light"] .notion-empty:hover { background: var(--accent-dim); color: var(--accent); border-color: rgba(79,95,212,0.3); }
[data-theme="light"] .section-action-btn { background: #ffffff; border-color: var(--border); color: var(--text-tertiary); }
[data-theme="light"] .section-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
[data-theme="light"] .notion-heading-level { background: #f5f5f7; border-color: var(--border); color: var(--text-tertiary); }
[data-theme="light"] .notion-add-item-btn { border-color: rgba(0,0,0,0.15); color: var(--text-tertiary); }
[data-theme="light"] .notion-add-item-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* 클라이언트/현장 카드 */
[data-theme="light"] .client-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .client-name { color: var(--text-primary); }
[data-theme="light"] .client-stat { background: #f5f5f7; border-color: var(--border); }
[data-theme="light"] .client-stat-val { color: var(--text-primary); }
[data-theme="light"] .location-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .location-name { color: var(--text-primary); }

/* wl / payroll section */
[data-theme="light"] .wl-section { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .payroll-result-table td,
[data-theme="light"] .payroll-result-table th { border-bottom-color: var(--border); }
[data-theme="light"] .payroll-result-table tfoot td { background: #f5f5f7; border-top-color: rgba(0,0,0,0.1); color: var(--text-primary); }

/* 칩 / 태그 */
[data-theme="light"] .chip { background: rgba(0,0,0,0.06); color: var(--text-secondary); }
[data-theme="light"] .project-tag { background: var(--accent-dim); color: var(--accent); }
[data-theme="light"] .member-proj-chip { background: #f0f0f5; color: var(--text-secondary); }
[data-theme="light"] .cost-type-tag.cost-material { background: rgba(0,0,0,0.05); color: var(--text-secondary); }
[data-theme="light"] .status-select { background-color: #ffffff; color: var(--text-primary); border-color: rgba(0,0,0,0.14); }

/* 탭 */
[data-theme="light"] .tabs { border-bottom-color: var(--border); }
[data-theme="light"] .tab-btn { color: var(--text-tertiary); }
[data-theme="light"] .tab-btn:hover { color: var(--text-secondary); }
[data-theme="light"] .tab-btn.active { color: var(--text-primary); border-bottom-color: var(--accent); }
[data-theme="light"] .member-team-tabs { border-bottom-color: var(--border); }
[data-theme="light"] .member-team-tab { color: var(--text-tertiary); }
[data-theme="light"] .member-team-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
[data-theme="light"] .member-count-badge { background: rgba(0,0,0,0.07); color: var(--text-secondary); }
[data-theme="light"] .member-team-tab.active .member-count-badge { background: var(--accent-dim); color: var(--accent); }
[data-theme="light"] .status-selector { background: rgba(0,0,0,0.04); border-color: var(--border); }
[data-theme="light"] .status-opt.active { background: #ffffff; color: var(--text-primary); }
[data-theme="light"] .amount-type-toggle { background: rgba(0,0,0,0.04); border-color: var(--border); }
[data-theme="light"] .amount-type-btn { color: var(--text-tertiary); }
[data-theme="light"] .amount-type-btn.active { background: #ffffff; color: var(--text-primary); }

/* 프로젝트 디테일 */
[data-theme="light"] .phase-item { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .phase-item.active { background: var(--accent-dim); border-color: rgba(79,95,212,0.4); }
[data-theme="light"] .phase-dates { color: var(--text-secondary); }
[data-theme="light"] .proj-status-btn { background: #ffffff; border-color: rgba(0,0,0,0.12); color: var(--text-tertiary); }
[data-theme="light"] .proj-status-btn:hover { border-color: rgba(0,0,0,0.25); color: var(--text-secondary); }
[data-theme="light"] .back-btn { color: var(--text-secondary); }
[data-theme="light"] .back-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
[data-theme="light"] .project-detail-title { color: var(--text-primary); }

/* 투두 */
[data-theme="light"] .todo-item:hover { background: var(--bg-hover); }
[data-theme="light"] .todo-text { color: var(--text-primary); }
[data-theme="light"] .todo-text.done { color: var(--text-tertiary); }
[data-theme="light"] .due-tag { color: var(--text-tertiary); }

/* 분리선 */
[data-theme="light"] .divider,
[data-theme="light"] hr.divider { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .modal-footer { border-top-color: rgba(0,0,0,0.08); }

/* 사이드바 서브메뉴 */
[data-theme="light"] .nav-item.nav-sub { color: var(--text-tertiary); }
[data-theme="light"] .nav-item.nav-sub:hover,
[data-theme="light"] .nav-item.nav-sub.active { background: var(--accent-dim); color: var(--accent); }
[data-theme="light"] .nav-section-label::before { content: ''; }

/* 검색 드롭다운 */
[data-theme="light"] .search-item { color: var(--text-secondary); border-bottom-color: var(--border); }
[data-theme="light"] .search-item:hover { background: var(--bg-hover); color: var(--text-primary); }

/* stat-card-mini */
[data-theme="light"] .stat-card-mini { background: #ffffff; border-color: var(--border); }

/* =====================================================
   THEME TOGGLE SWITCH
   ===================================================== */
/* ── 테마 토글 스위치 ── */
/* 외부 래퍼 */
.theme-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.theme-toggle-wrap .tt-icon {
  font-size: 13px;
  transition: color var(--transition);
  line-height: 1;
}
.theme-toggle-wrap .tt-icon.moon { color: var(--text-tertiary); }
.theme-toggle-wrap .tt-icon.sun  { color: var(--amber); }

/* 토글 버튼 — 슬라이드 트랙 */
.theme-toggle-btn {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: var(--bg-active);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, border-color .25s;
  flex-shrink: 0;
  padding: 0;
  outline: none;
}
/* 슬라이더 thumb */
.theme-toggle-btn::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* 라이트 모드 활성 상태 */
[data-theme="light"] .theme-toggle-btn {
  background: var(--accent);
  border-color: var(--accent);
}
[data-theme="light"] .theme-toggle-btn::after {
  transform: translateX(20px);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
/* 다크 모드 아이콘 색상 */
[data-theme="dark"] .theme-toggle-wrap .tt-icon.moon,
.theme-toggle-wrap .tt-icon.moon { color: var(--text-secondary); }
[data-theme="light"] .theme-toggle-wrap .tt-icon.moon { color: var(--text-tertiary); }
[data-theme="light"] .theme-toggle-wrap .tt-icon.sun  { color: var(--accent); }

/* hover 효과 */
.theme-toggle-btn:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
[data-theme="light"] .theme-toggle-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* =====================================================
   CMS — SITE MANAGEMENT UI
   ===================================================== */

/* 로딩 */
.cms-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:60px; color:var(--text-tertiary); font-size:14px; }

/* 페이지 헤더 */
.cms-header { margin-bottom:20px; }
.cms-page-title { font-size:20px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.cms-page-desc  { font-size:13px; color:var(--text-tertiary); }

/* 빠른 메뉴 그리드 */
.cms-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cms-quick-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
}
.cms-quick-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.cms-quick-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  font-size: 18px;
}
.cms-quick-label { font-weight: 700; font-size: 13px; color: var(--text-primary); margin-bottom: 2px; }
.cms-quick-desc  { font-size: 11px; color: var(--text-tertiary); }

/* 통계 */
.cms-stats-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }

/* 바 차트 */
.cms-bar-chart { display:flex; align-items:flex-end; gap:6px; height:120px; padding:8px 0; }
.cms-bar-item  { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.cms-bar-wrap  { flex:1; width:100%; display:flex; align-items:flex-end; }
.cms-bar {
  width: 100%; min-height: 4px;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  opacity: .85;
  transition: height .4s ease;
}
.cms-bar:hover { opacity:1; }
.cms-bar-label { font-size:10px; color:var(--text-tertiary); white-space:nowrap; }

/* WYSIWYG 에디터 */
.cms-wysiwyg-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 6px 8px;
}
.cms-wysiwyg-toolbar button {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: 4px 7px;
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 28px;
}
.cms-wysiwyg-toolbar button:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.cms-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  margin: 2px 3px;
  align-self: center;
}
.cms-editor {
  min-height: 240px;
  max-height: 480px;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.7;
  outline: none;
}
.cms-editor:focus { border-color: var(--accent); background: var(--bg-card); }
.cms-editor h1, .cms-editor h2, .cms-editor h3 { color:var(--text-primary); margin:.5em 0; font-weight:700; }
.cms-editor h1 { font-size:1.6em; }
.cms-editor h2 { font-size:1.3em; }
.cms-editor h3 { font-size:1.1em; }
.cms-editor p  { margin:.4em 0; }
.cms-editor a  { color:var(--accent); text-decoration:underline; }
.cms-editor img{ max-width:100%; border-radius:6px; }
.cms-editor ul, .cms-editor ol { padding-left:1.5em; margin:.4em 0; }
.cms-editor blockquote { border-left:3px solid var(--accent); padding-left:12px; color:var(--text-secondary); margin:.5em 0; }

/* 미디어 그리드 */
.cms-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.cms-media-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}
.cms-media-item:hover { border-color: var(--border-strong); }
.cms-media-thumb {
  position: relative;
  width: 100%; height: 110px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.cms-media-thumb img { width:100%; height:100%; object-fit:cover; }
.cms-media-icon { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cms-media-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; flex-direction:column;
  align-items: center; justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--transition);
}
.cms-media-thumb:hover .cms-media-overlay { opacity:1; }
.cms-media-info { padding: 8px 10px; }
.cms-media-name { font-size:11px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cms-media-meta { font-size:10px; color:var(--text-tertiary); margin-top:2px; }

/* 뱃지 추가 */
.badge-amber  { background:rgba(245,127,23,.15); color:#f57f17; }
.badge-blue   { background:rgba(107,124,255,.15); color:var(--accent); }
.badge-green  { background:rgba(45,106,79,.15); color:var(--green); }
.badge-gray   { background:var(--bg-active); color:var(--text-tertiary); }
.badge-red    { background:rgba(229,57,53,.15); color:var(--red); }

/* 알림박스 */
.notice-box {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245,127,23,.08);
  border: 1px solid rgba(245,127,23,.25);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 탭바 */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  gap: 2px;
  overflow-x: auto;
}
.tab-bar .tab-btn {
  padding: 12px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  margin-bottom: -1px;
}
.tab-bar .tab-btn:hover  { color: var(--text-primary); }
.tab-bar .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* 라이트 모드 CMS 보정 */
[data-theme="light"] .cms-editor { background:#ffffff; }
[data-theme="light"] .cms-wysiwyg-toolbar { background:#f5f5f7; }
[data-theme="light"] .cms-quick-card { background:#ffffff; }
[data-theme="light"] .cms-media-item { background:#ffffff; }

/* ─ 라이트 모드 뱃지 보정 ─ */
[data-theme="light"] .badge-pending    { background: rgba(0,0,0,0.06); color: var(--text-tertiary); }
[data-theme="light"] .badge-inprogress { background: rgba(21,101,192,0.1); color: var(--blue); }
[data-theme="light"] .badge-done       { background: rgba(46,125,50,0.1); color: var(--green); }
[data-theme="light"] .badge-hold       { background: rgba(245,127,23,0.1); color: var(--amber); }
[data-theme="light"] .badge-amber      { background: rgba(245,127,23,0.12); color: #c66900; }
[data-theme="light"] .badge-blue       { background: rgba(79,95,212,0.12); color: var(--accent); }
[data-theme="light"] .badge-green      { background: rgba(46,125,50,0.12); color: var(--green); }
[data-theme="light"] .badge-gray       { background: rgba(0,0,0,0.07); color: var(--text-tertiary); }
[data-theme="light"] .badge-red        { background: rgba(229,57,53,0.1); color: var(--red); }
[data-theme="light"] .badge-orange     { background: rgba(230,81,0,0.1); color: var(--orange); }

/* ─ 라이트 모드 거래처 관리 보정 ─ */
[data-theme="light"] .notice-box { background: rgba(245,127,23,0.06); border-color: rgba(245,127,23,0.2); color: var(--text-secondary); }
[data-theme="light"] .tab-bar { border-bottom-color: var(--border); }
[data-theme="light"] .tab-bar .tab-btn { color: var(--text-tertiary); }
[data-theme="light"] .tab-bar .tab-btn:hover { color: var(--text-secondary); }
[data-theme="light"] .tab-bar .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ─ 라이트 모드 cost-summary 보정 ─ */
[data-theme="light"] .cost-summary-item.danger { background: rgba(229,57,53,0.06); border-color: rgba(229,57,53,0.2); }
[data-theme="light"] .cost-summary-item.success { background: rgba(46,125,50,0.06); border-color: rgba(46,125,50,0.2); }

/* ─ 라이트 모드 empty-state ─ */
[data-theme="light"] .empty-state { color: var(--text-tertiary); }
[data-theme="light"] .empty-state i { color: rgba(0,0,0,0.15); }

/* ─ 라이트 모드 action-group ─ */
[data-theme="light"] .action-group .btn-outline { color: var(--text-tertiary); }
[data-theme="light"] .action-group .btn-outline:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ─ 라이트 모드 top-bar right ─ */
[data-theme="light"] .top-bar-right .chip { background: rgba(0,0,0,0.06); color: var(--text-secondary); border-color: rgba(0,0,0,0.1); }

/* 반응형 */
@media (max-width: 600px) {
  .cms-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .cms-media-grid { grid-template-columns: repeat(2, 1fr); }
  .cms-bar-chart  { height:80px; }
}

/* ═══════════════════════════════════════════════════════════
   공지사항 새 디자인 (ann-board)
═══════════════════════════════════════════════════════════ */
.ann-board { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.ann-pinned-row { display: flex; flex-direction: column; gap: 8px; }
.ann-pin-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08));
  border: 1px solid rgba(99,102,241,0.25);
  border-left: 4px solid #6366f1;
  border-radius: 12px; padding: 14px 16px;
  position: relative; transition: box-shadow 0.2s;
}
.ann-pin-card:hover { box-shadow: 0 4px 20px rgba(99,102,241,0.15); }
.ann-pin-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.ann-pin-body { flex: 1; min-width: 0; }
.ann-pin-title { font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 4px; }
.ann-pin-content { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.ann-pin-exp { font-size: 11px; color: #6366f1; margin-top: 4px; font-weight: 600; }
.ann-close-btn {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; color: var(--text-tertiary);
  cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px;
}
.ann-close-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.ann-scroll-row { display: flex; flex-direction: column; gap: 4px; }
.ann-scroll-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px;
  font-size: 13px; position: relative;
}
.ann-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px; flex-shrink: 0;
}
.ann-scroll-title { flex: 1; color: var(--text-primary); font-weight: 500; }
.ann-scroll-exp { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; }
.ann-close-btn-sm {
  background: none; border: none; color: var(--text-tertiary);
  cursor: pointer; font-size: 12px; padding: 2px 5px; border-radius: 4px; margin-left: 4px;
}
.ann-close-btn-sm:hover { background: var(--bg-hover); }

/* ═══════════════════════════════════════════════════════════
   메모 위젯 (대시보드)
═══════════════════════════════════════════════════════════ */
.memo-widget-card {}
.memo-widget-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 0 -16px; padding: 0 16px; }
.memo-tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-size: 13px; color: var(--text-tertiary);
  cursor: pointer; margin-bottom: -1px; transition: all 0.15s;
  display: flex; align-items: center; gap: 6px;
}
.memo-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.memo-tab-count {
  background: var(--bg-tertiary); color: var(--text-tertiary);
  font-size: 10px; padding: 1px 5px; border-radius: 8px;
}
.memo-tab-pane { padding: 8px 0; }
.memo-empty { text-align: center; padding: 20px; color: var(--text-tertiary); font-size: 13px; }
.memo-empty i { display: block; font-size: 24px; margin-bottom: 6px; opacity: 0.3; }
.memo-widget-item {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); margin-bottom: 6px;
  transition: all 0.15s; background: var(--bg-secondary);
}
.memo-widget-item:hover { border-color: var(--accent); background: var(--bg-hover); }
.memo-item-title { font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 3px; }
.memo-item-preview { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.memo-proj-tag {
  display: inline-block; font-size: 10px; font-weight: 600;
  background: rgba(99,102,241,0.12); color: #6366f1;
  padding: 1px 6px; border-radius: 6px; margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   메모 페이지
═══════════════════════════════════════════════════════════ */
.memo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.memo-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; cursor: pointer;
  transition: all 0.2s; display: flex; flex-direction: column; gap: 8px;
}
.memo-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(99,102,241,0.1); transform: translateY(-1px); }
.memo-card.memo-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.25); }
.memo-personal { border-left: 3px solid #6366f1; }
.memo-shared { border-left: 3px solid #10b981; }
.memo-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.memo-card-title { font-weight: 700; font-size: 14px; color: var(--text-primary); flex: 1; }
.memo-card-preview { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.memo-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.memo-editor-panel {
  width: 360px; flex-shrink: 0; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  position: sticky; top: 80px; max-height: calc(100vh - 120px);
}
.memo-editor-empty {
  justify-content: center; align-items: center; padding: 40px;
}
.memo-editor-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-secondary);
}
.memo-editor-title-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  font-family: inherit;
}
.memo-editor-body {
  flex: 1; padding: 16px; border: none; outline: none;
  resize: none; background: none; color: var(--text-primary);
  font-size: 14px; line-height: 1.7; font-family: inherit;
  overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════
   AI 챗봇 FAB
═══════════════════════════════════════════════════════════ */
.ai-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
  transition: all 0.3s; user-select: none;
}
.ai-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(99,102,241,0.5); }
.ai-fab.active { background: linear-gradient(135deg, #ef4444, #f97316); }
.ai-fab-icon { font-size: 22px; color: #fff; z-index: 1; }
.ai-fab-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: aiPulse 2s ease-out infinite;
}
@keyframes aiPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}
.ai-chat-window {
  position: fixed; bottom: 96px; right: 28px; z-index: 9998;
  width: 360px; max-height: 560px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; overflow: hidden;
  animation: slideUpIn 0.3s ease-out;
}
@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-chat-header {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  padding: 14px 16px; display: flex; align-items: center;
  justify-content: space-between; flex-shrink: 0;
}
.ai-chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
}
.ai-chat-header-btn {
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 8px;
  cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ai-chat-header-btn:hover { background: rgba(255,255,255,0.25); }
.ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; scroll-behavior: smooth;
}
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot { justify-content: flex-start; }
.ai-msg-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 16px;
  font-size: 13px; line-height: 1.5;
}
.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-bottom-right-radius: 4px;
}
.ai-msg-bot .ai-msg-bubble {
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.ai-typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.ai-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-tertiary);
  animation: aiTyping 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping { 0%,60%,100%{transform:scale(1);opacity:0.5} 30%{transform:scale(1.2);opacity:1} }
.ai-chat-quick-btns {
  padding: 8px 12px; display: flex; gap: 6px; flex-wrap: wrap;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.ai-quick-btn {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 11px; padding: 5px 10px;
  border-radius: 20px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.ai-quick-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ai-chat-input-row {
  padding: 12px 16px; display: flex; gap: 8px; align-items: center;
  border-top: 1px solid var(--border); flex-shrink: 0;
  background: var(--bg-secondary);
}
.ai-chat-input {
  flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 20px; padding: 8px 16px; font-size: 13px;
  color: var(--text-primary); outline: none; font-family: inherit;
}
.ai-chat-input:focus { border-color: var(--accent); }
.ai-send-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none; color: #fff; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
}
.ai-send-btn:hover { transform: scale(1.1); }
.ai-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 반응형 - 모바일 챗봇 */
@media (max-width: 480px) {
  .ai-chat-window { right: 8px; bottom: 80px; width: calc(100vw - 16px); }
  .ai-fab { bottom: 16px; right: 16px; }
  .memo-editor-panel { display: none; }
  .memo-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   라이트 모드 보정 - 메모/AI
═══════════════════════════════════════════════════════════ */
[data-theme="light"] .memo-card { background: #fff; }
[data-theme="light"] .memo-editor-panel { background: #fff; }
[data-theme="light"] .ann-pin-card { background: linear-gradient(135px, rgba(99,102,241,0.06), rgba(139,92,246,0.04)); }
[data-theme="light"] .ann-scroll-item { background: #f8f9fa; }
[data-theme="light"] .ai-chat-window { background: #fff; }
[data-theme="light"] .ai-msg-bot .ai-msg-bubble { background: #f3f4f6; border-color: #e5e7eb; }
[data-theme="light"] .ai-chat-input { background: #f3f4f6; border-color: #e5e7eb; }
[data-theme="light"] .ai-quick-btn { background: #f3f4f6; border-color: #e5e7eb; }

/* 공유 링크 토큰 아이템 */
.share-token-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; margin-bottom: 8px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 10px; flex-wrap: wrap;
}
[data-theme="light"] .share-token-item { background: #f8f9fa; }

/* ═══════════════════════════════════════════════════════════
   채팅 네비게이션 버튼
═══════════════════════════════════════════════════════════ */
.chat-nav-btn {
  position: relative; background: none; border: none;
  color: var(--text-tertiary); font-size: 18px; cursor: pointer;
  padding: 6px 10px; border-radius: 8px; transition: all 0.15s;
  display: flex; align-items: center;
}
.chat-nav-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.chat-nav-btn.active { color: #6366f1; }
.chat-unread-badge {
  position: absolute; top: 2px; right: 2px;
  background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   채팅 패널
═══════════════════════════════════════════════════════════ */
.chat-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px;
  background: var(--bg-secondary); border-left: 1px solid var(--border);
  z-index: 1200; flex-direction: column; box-shadow: -4px 0 20px rgba(0,0,0,.2);
  animation: chatSlideIn 0.25s ease-out;
}
@keyframes chatSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.chat-panel-header {
  padding: 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; background: var(--bg-secondary);
}
.chat-panel-close {
  background: none; border: none; color: var(--text-tertiary);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.chat-panel-close:hover { background: var(--bg-hover); }
.chat-presence-row {
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  flex-shrink: 0;
}
.presence-item { position: relative; }
.presence-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-primary);
}
.presence-dot {
  position: absolute; bottom: 0; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}
.presence-dot.online { background: #10b981; }
.presence-dot.offline { background: #6b7280; }
.chat-rooms-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.chat-room-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; transition: background .12s;
}
.chat-room-item:hover { background: var(--bg-hover); }
.chat-room-icon { font-size: 20px; flex-shrink: 0; }
.chat-room-info { flex: 1; min-width: 0; }
.chat-room-name { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.chat-room-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   채팅 메시지 뷰
═══════════════════════════════════════════════════════════ */
.chat-msg-view {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.chat-msg-header {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: var(--bg-secondary);
}
.chat-messages {
  flex: 1; overflow-y: auto; padding: 12px; display: flex;
  flex-direction: column; gap: 8px; scroll-behavior: smooth;
}
.chat-msg-item { display: flex; gap: 8px; align-items: flex-start; }
.chat-msg-me { justify-content: flex-end; }
.chat-msg-other { justify-content: flex-start; }
.chat-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.chat-msg-sender { font-size: 10px; color: var(--text-tertiary); margin-bottom: 3px; }
.chat-bubble {
  max-width: 220px; padding: 8px 12px; border-radius: 14px;
  font-size: 13px; line-height: 1.4; word-break: break-word;
}
.chat-bubble-me {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border-bottom-right-radius: 4px;
}
.chat-bubble-other {
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.chat-msg-time { font-size: 10px; color: var(--text-tertiary); margin-top: 3px; }
.chat-input-row {
  padding: 10px 12px; display: flex; gap: 8px; align-items: center;
  border-top: 1px solid var(--border); flex-shrink: 0;
  background: var(--bg-secondary);
}
.chat-input {
  flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 20px; padding: 7px 14px; font-size: 13px;
  color: var(--text-primary); outline: none; font-family: inherit;
}
.chat-input:focus { border-color: #6366f1; }
.chat-send-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none; color: #fff; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.chat-send-btn:hover { transform: scale(1.1); }

/* 라이트모드 */
[data-theme="light"] .chat-panel { background: #fff; }
[data-theme="light"] .chat-panel-header { background: #fff; }
[data-theme="light"] .chat-msg-header { background: #fff; }
[data-theme="light"] .chat-input-row { background: #fff; }
[data-theme="light"] .chat-input { background: #f3f4f6; border-color: #e5e7eb; }
[data-theme="light"] .chat-bubble-other { background: #f3f4f6; border-color: #e5e7eb; }

/* ═══════════════════════════════════════════════════════════
   회원가입 - 직원 추가 정보 섹션
═══════════════════════════════════════════════════════════ */
.reg-extra-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 14px; color: var(--text-tertiary); font-size: 12px;
}
.reg-extra-divider::before,
.reg-extra-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border);
}
.reg-extra-divider span {
  white-space: nowrap; font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 0 4px;
}