:root {
  --bg: #f0f2f8;
  --bg-gradient: linear-gradient(135deg, #e8ecf4 0%, #f0f2f8 40%, #eef0f7 70%, #e6eaf5 100%);
  --card: #ffffff;
  --card-glass: rgba(255,255,255,0.85);
  --border: #e1e4ee;
  --primary: #2563eb;
  --primary-light: #dbeafe;
  --primary-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --text: #1e293b;
  --text-secondary: #64748b;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #22c55e;
  --hidden-bg: #f8f9fa;
  --hidden-text: #adb5bd;
  --depth0: #2563eb;
  --depth1: #7c3aed;
  --depth2: #0891b2;
  --depth3: #059669;
  --depth4: #d97706;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 16px rgba(37,99,235,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --radius: 10px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* Header */
.header {
  background: var(--card-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(225,228,238,0.6);
  padding: 10px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  gap: 16px;
}

.header-left {
  flex: 1;
  min-width: 0;
}

.project-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.project-title {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all var(--transition);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

.project-title:hover {
  background: var(--primary-light);
  border-color: #bfdbfe;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.project-desc {
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: all 0.15s;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-desc:hover {
  background: #f1f5f9;
  border-color: var(--border);
}

.project-desc.empty {
  color: #cbd5e1;
  font-style: italic;
}

.project-dates {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.project-dates input[type="date"] {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 11px;
  font-family: inherit;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  width: 110px;
}

.project-dates input[type="date"]:hover {
  border-color: var(--border);
  background: #f1f5f9;
}

.project-dates input[type="date"]:focus {
  border-color: var(--primary);
  outline: none;
  background: #fff;
  color: var(--text);
}

.project-dates .date-separator {
  color: #cbd5e1;
  font-size: 11px;
}

.project-dday {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
}

.project-dday.upcoming { background: #dbeafe; color: #2563eb; }
.project-dday.overdue { background: #fee2e2; color: #dc2626; }
.project-dday.today { background: #dcfce7; color: #16a34a; }

.project-elapsed {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: 2px;
}

.header-edit-input {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  border: 1px solid var(--primary);
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
  background: #fff;
  width: 100%;
  max-width: 400px;
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: flex-start;
  padding-top: 2px;
}

/* Tab navigation */
.tab-nav {
  background: var(--card-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(225,228,238,0.6);
  padding: 6px 24px 0;
  display: flex;
  gap: 4px;
}

.tab-btn {
  padding: 9px 22px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  border-radius: 8px 8px 0 0;
  transition: all var(--transition);
  position: relative;
}

.tab-btn:hover { color: var(--text); background: rgba(37,99,235,0.04); }
.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
  background: rgba(37,99,235,0.06);
}

/* Buttons */
.btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all var(--transition);
  white-space: nowrap;
  font-weight: 500;
}

.btn:hover { background: #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transform: translateY(-0.5px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--primary-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(37,99,235,0.3);
}

.btn-primary:hover { box-shadow: 0 3px 10px rgba(37,99,235,0.35); transform: translateY(-0.5px); }

.btn-danger {
  color: var(--danger);
  border-color: #fecaca;
}

.btn-danger:hover { background: #fef2f2; box-shadow: 0 1px 4px rgba(239,68,68,0.15); }

.btn-sm {
  padding: 3px 8px;
  font-size: 12px;
}

/* Toolbar */
.toolbar {
  background: var(--card-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(225,228,238,0.6);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.toolbar .separator {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
}

.toggle-hidden-label {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.search-box {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  width: 200px;
  transition: all var(--transition);
  background: rgba(255,255,255,0.7);
}
.search-box:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  outline: none;
  background: #fff;
}

/* Main content */
.main {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* Tree */
.tree-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition);
}

.tree-header {
  display: grid;
  grid-template-columns: 1fr 110px 130px 130px 100px 140px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-items: center;
}

.tree-header > span {
  position: relative;
  user-select: none;
  text-align: center;
  border-left: 1px dashed #e0e4e8;
}

.tree-header > span:first-child {
  border-left: none;
}

.col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
}

.col-resize-handle:hover,
.col-resize-handle.active {
  background: var(--primary);
  opacity: 0.3;
  border-radius: 2px;
}

.tree-body {
  min-height: 100px;
}

/* Tree Row */
.tree-row {
  display: grid;
  grid-template-columns: 1fr 110px 130px 130px 100px 140px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: all var(--transition);
  position: relative;
}

/* Column 2: 담당자 - left aligned */
.tree-row > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 42px;
  border-left: 1px dashed #e0e4e8;
}

/* Columns 3-4: 시작일/종료일 - center aligned */
.tree-row > div:nth-child(3),
.tree-row > div:nth-child(4) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-left: 1px dashed #e0e4e8;
}

/* Column 5: 상태 - center aligned */
.tree-row > div:nth-child(5) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-left: 1px dashed #e0e4e8;
}

/* Column 6: 액션 */
.tree-row > div:nth-child(6) {
  border-left: 1px dashed #e0e4e8;
}

.tree-row:hover {
  background: linear-gradient(90deg, rgba(37,99,235,0.02) 0%, rgba(37,99,235,0.04) 100%);
}

.tree-row.selected {
  background: linear-gradient(90deg, rgba(37,99,235,0.04) 0%, rgba(37,99,235,0.07) 100%);
  border-left: 3px solid var(--primary);
  padding-left: 13px;
}

.tree-row.dragging {
  opacity: 0.4;
  background: var(--primary-light);
}

.tree-row.drag-over-top::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  z-index: 5;
  border-radius: 2px;
}

.tree-row.drag-over-bottom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  z-index: 5;
  border-radius: 2px;
}

.tree-row.drag-over-child {
  background: var(--primary-light);
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

.tree-row.hidden-row {
  background: var(--hidden-bg);
  opacity: 0.55;
}

.tree-row.hidden-row .row-title,
.tree-row.hidden-row .row-detail {
  text-decoration: line-through;
  color: var(--hidden-text);
}

/* Row name cell */
.row-name-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  min-height: 42px;
  overflow: hidden;
}

.drag-handle {
  cursor: grab;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 2px;
  opacity: 0.4;
  flex-shrink: 0;
}

.drag-handle:hover { opacity: 1; }

.expand-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 11px;
  flex-shrink: 0;
  border-radius: 3px;
  transition: all 0.15s;
}

.expand-btn:hover { background: var(--border); }
.expand-btn.collapsed { transform: rotate(-90deg); }
.expand-spacer { width: 20px; flex-shrink: 0; }

.depth-indicator {
  width: 3px;
  height: 24px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: 6px;
  cursor: pointer;
  transition: width 0.15s, opacity 0.15s;
}
.depth-indicator:hover {
  width: 6px;
  opacity: 0.8;
}

.depth-color-picker {
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 10px;
  min-width: 130px;
}

.row-content {
  flex: 1;
  min-width: 0;
}

.row-title {
  font-size: 14px;
  font-weight: 500;
  cursor: text;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.row-title:hover { background: #f1f5f9; }

.row-title.is-category {
  font-weight: 700;
}

.row-detail {
  font-size: 12px;
  color: var(--text-secondary);
  cursor: text;
  padding: 1px 4px;
  border-radius: 3px;
  word-break: break-word;
  line-height: 1.5;
  position: relative;
}

.row-detail.collapsed-detail {
  max-height: 20px;
  overflow: hidden;
}

.row-detail:hover { background: #f1f5f9; }
.row-detail.empty { color: #cbd5e1; font-style: italic; }

.detail-expand-btn {
  display: inline-block;
  font-size: 10px;
  color: var(--primary);
  cursor: pointer;
  padding: 0 4px;
  margin-left: 2px;
  border: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.8), #fff 30%);
  font-family: inherit;
  line-height: 1.5;
}
.detail-expand-btn:hover {
  text-decoration: underline;
}

/* Markdown rendering in detail */
.row-detail strong { font-weight: 700; color: var(--text); }
.row-detail em { font-style: italic; }
.row-detail del { text-decoration: line-through; opacity: 0.6; }
.row-detail .md-code {
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: #e11d48;
}
.row-detail .md-code-block {
  background: #1e293b;
  color: #e2e8f0;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  display: block;
  margin: 2px 0;
  white-space: pre-wrap;
}
.row-detail .md-link {
  color: var(--primary);
  text-decoration: underline;
}
.row-detail .md-list {
  display: block;
  padding-left: 4px;
}
.row-detail .md-check {
  display: block;
  padding-left: 4px;
  color: var(--text-secondary);
}
.row-detail .md-check.done {
  color: var(--success);
}

/* Markdown editor wrapper */
.md-edit-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1.5px solid var(--primary);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.12);
  animation: mdEditIn 0.2s ease-out;
}

@keyframes mdEditIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.md-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.md-toolbar button {
  width: 24px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
  padding: 0;
}

.md-toolbar button:hover {
  background: #dbeafe;
  color: var(--primary);
}

.md-toolbar .md-help-btn {
  font-weight: 700;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
}

.md-toolbar .md-help-btn:hover {
  background: var(--primary);
  color: #fff;
}

.md-toolbar-sep {
  width: 1px;
  height: 14px;
  background: #e2e8f0;
  margin: 0 2px;
}

.md-toolbar-hint {
  font-size: 9px;
  color: #94a3b8;
  margin-left: auto;
  white-space: nowrap;
}

/* WYSIWYG 편집 영역 */
.md-edit-body {
  min-height: 60px;
  border-top: none;
}

.wysiwyg-editor {
  border: none;
  outline: none;
  padding: 8px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.6;
  min-height: 60px;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  color: var(--text);
  word-break: break-word;
  cursor: text;
}

.wysiwyg-editor:empty::before {
  content: '내용을 입력하세요. 텍스트를 선택하고 툴바 버튼으로 서식을 적용할 수 있습니다.';
  color: #cbd5e1;
  font-style: italic;
  pointer-events: none;
}

.wysiwyg-editor:focus {
  outline: none;
}

/* WYSIWYG 내부 요소 스타일 */
.wysiwyg-editor b, .wysiwyg-editor strong { font-weight: 700; color: var(--text); }
.wysiwyg-editor i, .wysiwyg-editor em { font-style: italic; }
.wysiwyg-editor s, .wysiwyg-editor strike, .wysiwyg-editor del { text-decoration: line-through; opacity: 0.6; }
.wysiwyg-editor code {
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: #e11d48;
}
.wysiwyg-editor a {
  color: var(--primary);
  text-decoration: underline;
}
.wysiwyg-editor ul {
  padding-left: 16px;
  margin: 2px 0;
}
.wysiwyg-editor ul li {
  list-style: disc;
  font-size: 12px;
}
.wysiwyg-editor ul li.checklist-item {
  list-style: none;
  margin-left: -16px;
}
.wysiwyg-editor ul li.checklist-item input[type="checkbox"] {
  margin-right: 4px;
  vertical-align: middle;
}

.md-guide {
  border-top: 1px solid #e2e8f0;
  background: #fefce8;
  padding: 8px 10px;
  animation: mdEditIn 0.2s ease-out;
}

.md-guide-title {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 6px;
}

.md-guide-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}

.md-guide-table td {
  padding: 2px 6px;
  vertical-align: middle;
}

.md-guide-table tr:nth-child(odd) {
  background: rgba(0,0,0,0.03);
}

.md-guide-table td:first-child {
  color: #64748b;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 10px;
  white-space: nowrap;
  width: 55%;
}

.md-guide-table td:last-child {
  color: var(--text);
}

.md-guide-table kbd {
  display: inline-block;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
  font-family: inherit;
  box-shadow: 0 1px 0 #d1d5db;
  line-height: 1.6;
  color: #374151;
}

/* Row links */
.row-links-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  min-height: 0;
}

.row-links-area.no-links {
  display: none;
}

.row-link-add {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.row-content:hover .row-link-add,
.row-links-area:hover .row-link-add {
  opacity: 1;
  pointer-events: auto;
}

/* + 링크 버튼을 title 옆에 표시 */
.row-title-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

.row-title-link-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0px 5px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 10px;
  color: #94a3b8;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
  line-height: 1.6;
}

.row-content:hover .row-title-link-btn {
  opacity: 1;
  pointer-events: auto;
}

.row-title-link-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #eff6ff;
}

.row-link-item-wrap {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  max-width: 220px;
  transition: all 0.15s;
}
.row-link-item-wrap:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.row-link-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  max-width: 160px;
  border: none;
  background: none;
}

.row-link-item img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 2px;
}

.row-link-item .link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-edit, .link-remove {
  font-size: 10px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  padding: 2px 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.row-link-item-wrap:hover .link-edit,
.row-link-item-wrap:hover .link-remove {
  opacity: 1;
  pointer-events: auto;
}

.link-edit:hover {
  color: var(--primary);
}
.link-remove:hover {
  color: var(--danger);
}
.link-remove {
  padding-right: 5px;
}

.row-link-add {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 10px;
  color: #94a3b8;
  cursor: pointer;
  background: transparent;
}

.row-link-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #eff6ff;
}

.link-input-form {
  width: 100%;
  margin-top: 2px;
}

.link-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.link-input-favicon {
  flex-shrink: 0;
  border-radius: 2px;
}

.link-url-input, .link-label-input {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
}

.link-url-input {
  flex: 2;
  min-width: 0;
}

.link-url-input:focus, .link-label-input:focus {
  border-color: var(--primary);
}

.link-label-input {
  flex: 1;
  min-width: 0;
}

.link-input-ok, .link-input-cancel {
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
}

.link-input-ok {
  background: var(--primary);
  color: white;
}

.link-input-ok:hover { opacity: 0.85; }

.link-input-cancel {
  background: #f1f5f9;
  color: var(--text-secondary);
}

.link-input-cancel:hover { background: #e2e8f0; }

/* Inline edit */
.inline-edit {
  border: 1px solid var(--primary);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: inherit;
  font-family: inherit;
  width: 100%;
  outline: none;
  background: #fff;
}

textarea.inline-edit {
  resize: vertical;
  min-height: 36px;
  line-height: 1.4;
}

/* Date inputs */
.row-date {
  position: relative;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.row-date input[type="date"] {
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  margin: 0;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  color: inherit;
  width: 100%;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
}

.row-date input[type="date"]::-webkit-datetime-edit {
  text-align: center;
  flex: 1;
}

.row-date input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.row-date input[type="date"].empty-date {
  color: transparent;
}

.row-date input[type="date"].empty-date:focus {
  color: var(--text);
}

.row-date .date-placeholder {
  position: absolute;
  top: calc(50% - 6px);
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: #cbd5e1;
  font-style: italic;
  pointer-events: none;
  white-space: nowrap;
}

/* Date navigation buttons */
.date-nav-btns {
  display: flex;
  justify-content: center;
  gap: 0;
  opacity: 0;
  transition: opacity 0.15s;
  width: 100%;
  height: 12px;
}

.row-date:hover .date-nav-btns {
  opacity: 1;
}

.date-nav-btns button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 6px;
  color: #94a3b8;
  padding: 0 2px;
  line-height: 12px;
  border-radius: 2px;
  transition: all 0.1s;
  flex: 1;
  text-align: center;
}

.date-nav-btns button:hover {
  color: var(--primary);
  background: #eef2ff;
}

.row-date input[type="date"]:focus + .date-placeholder {
  display: none;
}

.row-date input[type="date"]:hover {
  border-color: var(--border);
  background: #f1f5f9;
}

.row-date input[type="date"]:focus {
  border-color: var(--primary);
  outline: none;
  background: #fff;
}

/* Status */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

/* 상태 색상은 applyStatusStyles()에서 동적 생성 */

/* Overdue date warning */
.row-date.overdue input[type="date"] {
  color: #dc2626 !important;
  font-weight: 700;
}
.row-date.overdue input[type="date"]::-webkit-datetime-edit {
  color: #dc2626;
}
.row-date.overdue .date-placeholder {
  color: #dc2626;
}

/* Date inversion warning (시작일 > 종료일) */
@keyframes datePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.3); }
  50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); }
}

.row-date.date-inverted {
  border: 1.5px solid #dc2626 !important;
  border-radius: 6px;
  background: #fef2f2;
  animation: datePulse 2s ease-in-out infinite;
  position: relative;
}
.row-date.date-inverted input[type="date"] {
  color: #dc2626 !important;
  font-weight: 700;
}
.row-date.date-inverted input[type="date"]::-webkit-datetime-edit {
  color: #dc2626;
}

/* 날짜 역전 경고 배너 */
.date-invert-warn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  color: #b91c1c;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  animation: warnSlideIn 0.3s ease-out;
  line-height: 1.4;
}

@keyframes warnSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Overdue warning 배너 */
.date-overdue-warn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #fef2f2, #fecaca);
  color: #991b1b;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  animation: warnSlideIn 0.3s ease-out;
  line-height: 1.4;
}

@keyframes overdueShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

.row-date.overdue {
  animation: overdueShake 0.5s ease-in-out;
}

/* 프로젝트 일정 범위 벗어남 경고 */
.row-date.out-of-project {
  border: 1.5px solid #d97706 !important;
  border-radius: 6px;
  background: #fffbeb;
  position: relative;
}
.row-date.out-of-project input[type="date"] {
  color: #b45309 !important;
  font-weight: 600;
}
.row-date.out-of-project input[type="date"]::-webkit-datetime-edit {
  color: #b45309;
}

.date-out-project-warn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #92400e;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  animation: warnSlideIn 0.3s ease-out;
  line-height: 1.4;
}

/* Row actions */
.row-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.row-actions .btn-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  opacity: 0;
  transition: all 0.1s;
}

.tree-row:hover .row-actions .btn-icon { opacity: 1; }
.row-actions .btn-icon:hover { background: var(--border); color: var(--text); }
.row-actions .btn-icon.move-btn { font-size: 11px; }
.row-actions .btn-icon.move-btn:hover { background: var(--primary-light); color: var(--primary); }
.row-actions .btn-icon.move-btn.disabled { color: #d4d8dd; pointer-events: none; cursor: default; }
.tree-row:hover .row-actions .btn-icon.move-btn.disabled { opacity: 0.5; }
.row-actions .btn-icon.hide-text-btn {
  width: auto;
  padding: 0 4px;
  font-size: 10px;
  white-space: nowrap;
}
.row-actions .btn-icon.hide-btn:hover { color: var(--warning); }
.row-actions .btn-icon.delete-btn:hover { color: var(--danger); }

.row-actions .action-sep {
  width: 1px;
  height: 18px;
  background: #e8ecf0;
  margin: 0 1px;
  align-self: center;
}

/* Context menu */
.context-menu {
  position: fixed;
  background: var(--card-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(225,228,238,0.7);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 4px;
  z-index: 1000;
  min-width: 180px;
  animation: slideUp 0.12s ease-out;
}

.context-menu-item {
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.context-menu-item:hover { background: var(--primary-light); color: var(--primary); }
.context-menu-item.danger { color: var(--danger); }
.context-menu-item.danger:hover { background: #fef2f2; }
.context-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Stats bar */
.stats-bar {
  display: flex;
  gap: 16px;
  padding: 12px 24px;
  flex-wrap: wrap;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-width: 130px;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}
.stat-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.stat-card .stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
}

.stat-card .stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-secondary);
}

.empty-state p { font-size: 14px; margin-bottom: 12px; }

/* ═══════════════════════════════════════════
   GANTT CHART STYLES
   ═══════════════════════════════════════════ */
.gantt-wrapper {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.gantt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.gantt-toolbar label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.gantt-toolbar select, .gantt-toolbar input {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
}

.gantt-scroll-container {
  display: flex;
  overflow: hidden;
  position: relative;
  max-height: 70vh;
}

/* Left label panel */
.gantt-labels {
  min-width: 260px;
  max-width: 260px;
  border-right: 2px solid var(--border);
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--card);
  z-index: 2;
}

.gantt-labels-header {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gantt-label-row {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  transition: background 0.1s;
}

.gantt-label-row:hover { background: #f8fafc; }

.gantt-label-row .label-depth-bar {
  width: 3px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: 8px;
}

.gantt-label-row .label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.gantt-label-row.is-category .label-text {
  font-weight: 700;
}

.gantt-label-row .label-dates {
  font-size: 10px;
  color: var(--text-secondary);
  margin-left: 8px;
  flex-shrink: 0;
}

/* Right chart panel */
.gantt-chart-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
}

.gantt-chart-inner {
  position: relative;
  min-width: 100%;
}

/* Timeline header */
.gantt-timeline-header {
  height: 56px;
  position: sticky;
  top: 0;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.gantt-months-row {
  height: 26px;
  display: flex;
  position: relative;
}

.gantt-month-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid #e8ecf0;
  background: #f8fafc;
}

.gantt-days-row {
  height: 30px;
  display: flex;
  position: relative;
}

.gantt-day-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-secondary);
  border-right: 1px dashed #e2e5ea;
  flex-shrink: 0;
}

.gantt-day-cell.weekend {
  background: #f0f1f5;
  color: #b0b5c0;
}

.gantt-day-cell.saturday {
  background: #eef0f6;
  color: #7c8ab5;
}

.gantt-day-cell.sunday {
  background: #f5eef0;
  color: #b57c7c;
}

.gantt-day-cell.today {
  background: #eff6ff;
  color: var(--primary);
  font-weight: 700;
}

/* Chart rows area */
.gantt-rows-area {
  position: relative;
}

.gantt-row-bg {
  height: 40px;
  border-bottom: 1px solid #f1f5f9;
  pointer-events: none;
  z-index: 0;
}

/* Today line */
.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  z-index: 3;
  pointer-events: none;
  opacity: 0.6;
}

.gantt-today-line::before {
  content: '오늘';
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 9px;
  color: var(--danger);
  font-weight: 700;
  white-space: nowrap;
}

/* Vertical grid lines */
.gantt-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed #e8eaee;
  pointer-events: none;
  z-index: 0;
}

/* Weekend columns */
.gantt-weekend-col {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.gantt-weekend-col.saturday-col {
  background: rgba(100,120,180,0.06);
}

.gantt-weekend-col.sunday-col {
  background: rgba(180,100,100,0.06);
}

/* Gantt bars */
.gantt-bar {
  position: absolute;
  height: 22px;
  top: 9px;
  border-radius: 4px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  user-select: none;
  z-index: 4;
  transition: box-shadow 0.1s;
  min-width: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.gantt-bar:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 5;
}

.gantt-bar.dragging {
  opacity: 0.8;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 10;
  cursor: grabbing;
}

/* Resize handles */
.gantt-bar .resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 6;
}

.gantt-bar .resize-handle-left {
  left: 0;
  border-radius: 4px 0 0 4px;
}

.gantt-bar .resize-handle-right {
  right: 0;
  border-radius: 0 4px 4px 0;
}

.gantt-bar .resize-handle:hover {
  background: rgba(255,255,255,0.3);
}

/* Bar tooltip */
.gantt-tooltip {
  position: fixed;
  background: var(--text);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 1000;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  max-width: 250px;
  line-height: 1.5;
}

.gantt-tooltip .tt-title { font-weight: 700; margin-bottom: 2px; }
.gantt-tooltip .tt-dates { color: #94a3b8; font-size: 11px; }

/* No-date placeholder */
.gantt-no-bar {
  position: absolute;
  height: 22px;
  top: 9px;
  display: flex;
  align-items: center;
  font-size: 10px;
  color: #cbd5e1;
  font-style: italic;
  pointer-events: none;
}

/* Empty row clickable area for creating new bars */
.gantt-empty-row {
  position: absolute;
  height: 40px;
  left: 0;
  right: 0;
  cursor: crosshair;
  z-index: 1;
}

.gantt-empty-row:hover {
  background: rgba(37, 99, 235, 0.04);
}

.gantt-drag-preview {
  position: absolute;
  height: 22px;
  top: 9px;
  border-radius: 4px;
  background: var(--primary);
  opacity: 0.4;
  pointer-events: none;
  z-index: 5;
}

/* Gantt empty */
.gantt-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Assignee */
.assignee-cell {
  width: 100%;
}

.assignee-display {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  text-align: left;
  transition: all 0.15s;
  line-height: 1.3;
  width: 100%;
}

.assignee-display:hover {
  background: #f1f5f9;
  border-color: var(--border);
}

.assignee-display .assignee-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.assignee-display .assignee-name.assignee-all {
  color: var(--primary);
  font-weight: 700;
}

.assignee-display .assignee-team {
  font-size: 10px;
  color: var(--text-secondary);
}

.assignee-team-line {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.assignee-team-line + .assignee-team-line {
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px dashed #e2e8f0;
}

.assignee-team-line .assignee-names {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.assignee-team-line .assignee-team-label {
  font-size: 9px;
  color: var(--text-secondary);
}

.assignee-select {
  padding: 2px 14px 2px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  color: var(--text);
  width: 100%;
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%2364748b' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignee-select:hover {
  border-color: var(--border);
  background-color: #f1f5f9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%2364748b' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.assignee-select:focus {
  border-color: var(--primary);
  outline: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%232563eb' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

/* Member management modal */
.member-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}

.member-item:hover { background: #f8fafc; }

.member-item .member-team {
  color: var(--primary);
  font-weight: 600;
  min-width: 80px;
}

.member-item .member-name {
  flex: 1;
}

.member-item .member-delete {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.member-item .member-delete:hover {
  background: #fee2e2;
  color: var(--danger);
}

.member-add-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.member-add-form input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}

/* Member tree structure */
.member-team-group {
  border-bottom: 1px solid #f1f5f9;
}

.member-team-group.collapsed .member-team-children {
  display: none;
}

.member-team-group.collapsed .member-team-toggle {
  transform: rotate(-90deg);
}

.member-team-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px;
  cursor: pointer;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  transition: background 0.15s;
}

.member-team-header:hover {
  background: #eef2ff;
}

.member-team-toggle {
  font-size: 10px;
  transition: transform 0.2s;
  color: var(--text-secondary);
}

.member-team-name {
  flex: 1;
}

.member-team-count {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 400;
}

.member-team-children {
  padding-left: 20px;
}

.member-team-children .member-item {
  padding: 4px 8px;
}

.member-team-children .member-item .member-name {
  flex: 1;
}

/* Status management */
.status-manage-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.status-manage-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  transition: background 0.15s, box-shadow 0.15s;
}

.status-manage-item:hover { background: #f8fafc; }

.status-manage-item .status-drag-handle {
  cursor: grab;
  color: #cbd5e1;
  font-size: 14px;
  padding: 2px;
  user-select: none;
  line-height: 1;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}

.status-manage-item .status-drag-handle:hover {
  color: var(--primary);
  background: #eef2ff;
}

.status-manage-item .status-drag-handle:active {
  cursor: grabbing;
}

.status-manage-item.dragging {
  opacity: 0.4;
  background: #f1f5f9;
}

.status-manage-item.drag-over {
  box-shadow: 0 -2px 0 0 var(--primary);
}

.status-manage-item .status-preview {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.status-manage-item .status-key {
  font-size: 10px;
  color: var(--text-secondary);
  font-family: monospace;
  min-width: 70px;
}

.status-manage-item .status-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-manage-item .status-protected {
  font-size: 9px;
  color: #f59e0b;
  font-weight: 600;
  background: #fef3c7;
  padding: 1px 4px;
  border-radius: 3px;
}

.status-manage-item .status-actions {
  display: flex;
  gap: 4px;
}

.status-manage-item .status-actions button {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.status-manage-item .status-actions button:hover {
  background: #fee2e2;
  color: var(--danger);
}

.status-manage-item .status-actions button.edit-btn:hover {
  background: #dbeafe;
  color: var(--primary);
}

.status-add-form {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.status-add-form input[type="text"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  min-width: 60px;
}

/* Assignee multi-select dropdown */
.assignee-dropdown {
  position: fixed;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: 0;
  min-width: 180px;
  max-width: 260px;
  max-height: 320px;
  overflow-y: auto;
}

.assignee-dd-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid #f1f5f9;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.assignee-dd-team {
  padding: 4px 0;
  border-bottom: 1px solid #f8fafc;
}

.assignee-dd-all-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  background: #eef2ff;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
}

.assignee-dd-all-label:hover { background: #dbeafe; }

.assignee-dd-team-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--primary);
  background: #f8fafc;
}

.assignee-dd-team-label:hover { background: #eef2ff; }

.assignee-dd-member {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 28px;
  cursor: pointer;
  font-size: 12px;
}

.assignee-dd-member:hover { background: #f1f5f9; }

.assignee-dd-actions {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border-top: 1px solid #f1f5f9;
  gap: 6px;
}

.assignee-dd-actions button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  background: var(--card);
}

.assignee-dd-actions .assignee-dd-ok {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.assignee-dd-actions .assignee-dd-ok:hover { opacity: 0.9; }
.assignee-dd-actions .assignee-dd-clear:hover { background: #f1f5f9; }

/* Status dropdown (replacing cycle click) */
.status-dropdown {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: 4px;
  min-width: 120px;
}

.status-dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.1s;
  white-space: nowrap;
}

.status-dropdown-item:hover {
  background: #f1f5f9;
}

.status-dropdown-item.active {
  background: #dbeafe;
  font-weight: 700;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.modal {
  background: var(--card);
  border-radius: 14px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
  animation: slideUp 0.2s ease-out;
}

.modal h2 { font-size: 16px; margin-bottom: 16px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* Tree row tooltip */
.tree-tooltip {
  position: fixed;
  background: var(--text);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  z-index: 1000;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  max-width: 340px;
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.15s;
}

.tree-tooltip.visible { opacity: 1; }

.tree-tooltip .tt-row-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-tooltip .tt-row-detail {
  color: #cbd5e1;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow: hidden;
}

.tree-tooltip .tt-row-meta {
  margin-top: 6px;
  font-size: 10px;
  color: #94a3b8;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tree-tooltip .tt-row-meta span {
  background: rgba(255,255,255,0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Save / History bar */
.save-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}

.save-bar .save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.save-bar .save-indicator .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

.save-bar .save-indicator .dot.unsaved {
  background: var(--warning);
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.save-bar .history-dropdown {
  position: relative;
  display: inline-block;
}

.save-bar .history-list {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  min-width: 280px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}

.history-item {
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-item:hover { background: var(--primary-light); color: var(--primary); }

.history-item .hi-time {
  font-weight: 600;
  white-space: nowrap;
}

.history-item .hi-label {
  flex: 1;
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-item .hi-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
  .tree-header, .tree-row {
    grid-template-columns: 1fr 100px 80px;
  }
  .tree-header > :nth-child(3),
  .tree-header > :nth-child(4),
  .tree-header > :nth-child(5),
  .tree-row > :nth-child(3),
  .tree-row > :nth-child(4),
  .tree-row > :nth-child(5) {
    display: none;
  }
  .header { padding: 12px 16px; }
  .main { padding: 12px 16px; }
  .toolbar { padding: 8px 16px; }
  .gantt-labels { min-width: 160px; max-width: 160px; }
  .gantt-label-row .label-dates { display: none; }
}

/* ══════════════════════════════════════ */
/* BRAINSTORM TREE (요약보기)             */
/* ══════════════════════════════════════ */
.brain-wrapper {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
}

.brain-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.brain-toolbar .btn {
  font-size: 12px;
  padding: 4px 10px;
}
.brain-toolbar .separator {
  width: 1px; height: 20px; background: var(--border); margin: 0 4px;
}

.brain-tree-scroll {
  flex: 1;
  overflow: auto;
  padding: 20px 24px;
}

.brain-tree {
  font-size: 13px;
  line-height: 1.6;
}

.brain-node {
  position: relative;
  padding-left: 24px;
}

.brain-node::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--border);
}
.brain-node:last-child::before {
  bottom: calc(100% - 18px);
}

.brain-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: default;
  transition: background 0.15s;
}
.brain-item:hover {
  background: #f1f5f9;
}

.brain-item::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 12px;
  width: 14px;
  height: 1.5px;
  background: var(--border);
}

.brain-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.brain-title {
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.brain-detail {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: 18px;
  word-break: break-word;
  line-height: 1.4;
}

.brain-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 11px;
  flex-shrink: 0;
}

.brain-status {
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 10px;
  white-space: nowrap;
}

.brain-assignee {
  color: var(--text-secondary);
  font-size: 10px;
  white-space: nowrap;
}

.brain-dates {
  color: #94a3b8;
  font-size: 10px;
  white-space: nowrap;
}

.brain-root-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
  padding: 8px 0;
  border-bottom: 2px solid var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brain-root-title .brain-dot {
  width: 14px;
  height: 14px;
  margin-top: 0;
}

.brain-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary);
  font-size: 14px;
}

.brain-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 0 2px;
  margin-right: 2px;
  transition: transform 0.15s;
  flex-shrink: 0;
  margin-top: 3px;
}
.brain-toggle.collapsed {
  transform: rotate(-90deg);
}
.brain-toggle:hover {
  color: var(--primary);
}

.brain-children-count {
  font-size: 10px;
  color: #94a3b8;
  margin-left: 4px;
}

/* ══════════════════════════════════════ */
/* SUMMARY SPLIT & CHARTS                */
/* ══════════════════════════════════════ */
.summary-split {
  display: flex;
  gap: 12px;
  height: calc(100vh - 160px);
}
.summary-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.summary-left .brain-wrapper {
  height: 100%;
}
.summary-right {
  width: 340px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 12px;
}
.summary-chart-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.summary-chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all var(--transition);
}
.summary-chart-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}
.summary-chart-title {
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.summary-chart-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.summary-chart-body-bar {
  align-items: stretch;
}
.summary-chart-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.summary-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.summary-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.summary-legend-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.summary-legend-value {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: 600;
}
/* Bar chart for durations */
.summary-bar-chart {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.summary-bar-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.summary-bar-track {
  flex: 1;
  height: 18px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.summary-bar-fill {
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
  transition: width 0.3s;
  display: flex;
  align-items: center;
  padding-left: 6px;
}
.summary-bar-value {
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.summary-bar-value-outside {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 4px;
  flex-shrink: 0;
}
.summary-no-data {
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 20px 0;
}
/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
  .summary-split {
    flex-direction: column;
    height: auto;
  }
  .summary-left {
    min-height: 400px;
  }
  .summary-left .brain-wrapper {
    height: 400px;
  }
  .summary-right {
    width: 100%;
    overflow-y: visible;
  }
}

/* ══════════════════════════════════════ */
/* BUDGET (예산)                          */
/* ══════════════════════════════════════ */
.budget-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  transition: box-shadow var(--transition);
}
.budget-section:hover {
  box-shadow: var(--shadow-hover);
}

.budget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
}
.budget-header:hover {
  background: #f8fafc;
}
.budget-header.open {
  border-bottom-color: var(--border);
}

.budget-toggle-icon {
  font-size: 11px;
  color: var(--text-secondary);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.budget-header.open .budget-toggle-icon {
  transform: rotate(0deg);
}
.budget-header:not(.open) .budget-toggle-icon {
  transform: rotate(-90deg);
}

.budget-header-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.budget-header-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.budget-header-amount {
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
}

.budget-header-krw {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
}

.budget-body {
  padding: 12px 16px;
  display: none;
}
.budget-body.open {
  display: block;
}

.budget-main-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.budget-currency-select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  min-width: 65px;
}

.budget-amount-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  width: 200px;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}
.budget-amount-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.budget-krw-converted {
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: none;
  align-items: center;
  gap: 6px;
}
.budget-krw-converted.visible {
  display: flex;
}

.budget-rate-section {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  flex-wrap: wrap;
}
.budget-rate-section.visible {
  display: flex;
}

.budget-rate-label {
  color: var(--text-secondary);
  font-size: 11px;
}

.budget-rate-toggle {
  display: flex;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.budget-rate-toggle button {
  padding: 3px 10px;
  border: none;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.budget-rate-toggle button.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.budget-rate-input {
  width: 110px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}
.budget-rate-input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
}

.budget-rate-info {
  font-size: 10px;
  color: #94a3b8;
}

.budget-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

.budget-alloc-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.budget-alloc-mode {
  display: flex;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-left: 8px;
}
.budget-alloc-mode button {
  padding: 2px 10px;
  border: none;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.budget-alloc-mode button.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.budget-alloc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budget-alloc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #fafbfc;
  border: 1px solid #f1f5f9;
  font-size: 12px;
}
.budget-alloc-row:hover {
  background: #f1f5f9;
}

.budget-alloc-color {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0;
}

.budget-alloc-name-group {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
}
.budget-alloc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 1;
  min-width: 0;
}
.budget-alloc-name:hover {
  color: var(--primary);
  text-decoration: underline;
}

.budget-alloc-dates {
  font-size: 10px;
  color: #b0b8c4;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Drag handle */
.budget-alloc-drag {
  cursor: grab;
  color: #cbd5e1;
  font-size: 12px;
  padding: 0 2px;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}
.budget-alloc-drag:hover {
  color: #94a3b8;
}
.budget-alloc-row.dragging {
  opacity: 0.4;
  background: #e2e8f0;
}
.budget-alloc-row.drag-over {
  border-top: 2px solid var(--primary);
  margin-top: -2px;
}

/* Sort toolbar */
.budget-alloc-sort-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.budget-alloc-sort-bar span.sort-label {
  font-size: 11px;
  color: #94a3b8;
  margin-right: 2px;
  white-space: nowrap;
}
.budget-alloc-sort-btn {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.budget-alloc-sort-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.budget-alloc-sort-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.budget-alloc-sort-btn .sort-arrow {
  font-size: 9px;
  margin-left: 2px;
}

.budget-alloc-input {
  width: 100px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}
.budget-alloc-input.w-sm {
  width: 120px;
}

.budget-alloc-calc {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.budget-alloc-calc-label {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
}
.budget-alloc-qty {
  width: 50px;
}
.budget-alloc-subtotal {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  width: 150px;
  flex-shrink: 0;
  text-align: right;
  font-family: 'SF Mono', 'Consolas', monospace;
}

.budget-alloc-pct {
  width: 55px;
  color: var(--text-secondary);
  font-size: 11px;
  text-align: right;
  flex-shrink: 0;
}

.budget-alloc-bar-bg {
  width: 60px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.budget-alloc-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.budget-alloc-remove {
  background: none;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.budget-alloc-remove:hover {
  color: #ef4444;
}

.budget-alloc-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.budget-alloc-search {
  width: 120px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
}
.budget-alloc-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.budget-alloc-add select {
  width: 220px;
  max-width: 50%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.budget-alloc-add .btn {
  padding: 6px 16px !important;
  font-size: 13px !important;
  white-space: nowrap;
}

.budget-alloc-manual-input {
  width: 150px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.budget-alloc-manual-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.budget-alloc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.budget-alloc-total {
  font-weight: 700;
}
.budget-alloc-remaining {
  color: var(--text-secondary);
}
.budget-alloc-remaining.over {
  color: #ef4444;
  font-weight: 600;
}

/* ══════════════════════════════════════
   AUTH / LOGIN SCREEN
   ══════════════════════════════════════ */
.auth-overlay {
  position: fixed; inset: 0;
  background: var(--bg-gradient);
  background-attachment: fixed;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.4s ease;
}
.auth-overlay.hidden { opacity: 0; pointer-events: none; }

.auth-card {
  background: var(--card-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 48px 40px;
  width: 420px;
  max-width: 90vw;
  text-align: center;
  animation: slideUp 0.4s ease;
}
.auth-card h1 {
  font-size: 1.6rem;
  font-weight: 800;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.auth-card .auth-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 32px;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form input {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
  background: rgba(255,255,255,0.9);
}
.auth-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.auth-btn {
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}
.auth-btn-primary {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.auth-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37,99,235,0.4);
}
.auth-btn-primary:disabled {
  opacity: 0.6; cursor: not-allowed; transform: none;
}

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin: 8px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-social-btns { display: flex; flex-direction: column; gap: 10px; }
.auth-btn-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text);
}
.auth-btn-social:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.auth-btn-social svg { width: 20px; height: 20px; flex-shrink: 0; }

.auth-toggle {
  margin-top: 20px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.auth-toggle a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.auth-toggle a:hover { text-decoration: underline; }

.auth-error {
  background: #fef2f2;
  color: #dc2626;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  display: none;
}
.auth-error.show { display: block; }

.auth-loading {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* User menu in header */
.user-menu-wrap {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  cursor: pointer;
  transition: box-shadow var(--transition);
}
.user-avatar:hover { box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.user-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  background: var(--card-glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: 8px 0;
  display: none;
  z-index: 9999;
}
.user-dropdown.show { display: block; animation: slideUp 0.15s ease; }
.user-dropdown-item {
  padding: 10px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text);
}
.user-dropdown-item:hover { background: rgba(37,99,235,0.05); }
.user-dropdown-header {
  padding: 10px 16px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

/* ══════════════════════════════════════
   PROJECT SELECTOR SCREEN
   ══════════════════════════════════════ */
.project-selector-overlay {
  position: fixed; inset: 0;
  background: var(--bg-gradient);
  background-attachment: fixed;
  z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.4s ease;
}
.project-selector-overlay.hidden { opacity: 0; pointer-events: none; }

.project-selector-card {
  background: var(--card-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 40px;
  width: 520px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(37,99,235,0.08), 0 0 0 1px rgba(255,255,255,0.05);
}
.project-selector-card h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 4px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.project-selector-card .ps-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Setup wizard (company/team creation) */
.setup-section {
  margin-bottom: 16px;
}
.setup-section label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.setup-section input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.6);
  color: var(--text);
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.setup-section input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* Project list */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.project-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255,255,255,0.4);
}
.project-list-item:hover {
  border-color: var(--primary);
  background: rgba(37,99,235,0.04);
  transform: translateX(4px);
}
.project-list-item .pli-info {
  flex: 1;
  min-width: 0;
}
.project-list-item .pli-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-list-item .pli-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.project-list-item .pli-role {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: 8px;
}
.pli-role.owner { background: rgba(37,99,235,0.1); color: #2563eb; }
.pli-role.editor { background: rgba(34,197,94,0.1); color: #16a34a; }
.pli-role.viewer { background: rgba(148,163,184,0.15); color: #64748b; }

.project-list-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Buttons in selector */
.ps-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.ps-btn-primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: white;
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.ps-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}
.ps-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.ps-btn-secondary {
  background: rgba(255,255,255,0.6);
  color: var(--text);
  border: 1px solid var(--border);
  margin-top: 8px;
}
.ps-btn-secondary:hover {
  background: rgba(37,99,235,0.05);
  border-color: var(--primary);
}
.ps-btn-group {
  display: flex; gap: 8px; margin-top: 16px;
}
.ps-btn-group .ps-btn { flex: 1; }

.ps-divider {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 16px 0;
  position: relative;
}
.ps-divider::before, .ps-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}
.ps-divider::before { left: 0; }
.ps-divider::after { right: 0; }

/* Team/Company badge */
.ps-org-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(37,99,235,0.06);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text);
  margin-bottom: 16px;
}
.ps-org-badge strong { color: var(--primary); }

/* Autocomplete dropdown */
.autocomplete-wrapper {
  position: relative;
}
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.autocomplete-dropdown.hidden { display: none; }
.autocomplete-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.autocomplete-item:hover, .autocomplete-item.active {
  background: rgba(37,99,235,0.06);
}
.autocomplete-item .ac-icon {
  font-size: 0.75rem;
  opacity: 0.5;
}
.autocomplete-item .ac-name {
  flex: 1;
  font-weight: 600;
}
.autocomplete-item .ac-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.autocomplete-item.ac-new {
  border-top: 1px solid var(--border);
  color: var(--primary);
  font-weight: 600;
}
.autocomplete-item.ac-new .ac-icon { color: var(--primary); opacity: 1; }

/* Selected badge (company/team) */
.ps-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 6px;
}
.ps-selected-badge.hidden { display: none; }
.ps-badge-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0 2px;
  line-height: 1;
}
.ps-badge-clear:hover { color: var(--danger, #ef4444); }

/* Domain match banner */
.domain-match-banner {
  background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(16,185,129,0.08));
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
  animation: slideUp 0.3s ease-out;
}
.domain-match-banner h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.domain-match-banner p {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.domain-match-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.domain-match-actions button {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all 0.15s;
}
.domain-match-actions .dm-accept {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.domain-match-actions .dm-accept:hover { opacity: 0.9; }
.domain-match-actions .dm-dismiss {
  background: var(--card);
  color: var(--text-secondary);
}
.domain-match-actions .dm-dismiss:hover { background: var(--bg); }

/* Domain input field for new company */
.domain-input-section {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(37,99,235,0.04);
  border: 1px dashed rgba(37,99,235,0.2);
  border-radius: 8px;
  font-size: 0.8rem;
}
.domain-input-section label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
  display: block;
}
.domain-input-section input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  background: var(--card);
}

/* Project member modal */
.pm-modal { max-width: 520px; }
.pm-member-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.pm-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.pm-member-item:last-child { border-bottom: none; }
.pm-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.pm-member-info { flex: 1; min-width: 0; }
.pm-member-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-member-email {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-member-role-select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  background: var(--card);
  cursor: pointer;
}
.pm-member-role-select:disabled {
  opacity: 0.6;
  cursor: default;
}
.pm-member-remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.15s;
}
.pm-member-remove:hover { opacity: 1; color: var(--danger, #ef4444); }
.pm-add-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 8px;
}
.pm-add-section h3 {
  font-size: 0.85rem;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.pm-search-wrap {
  position: relative;
}
.pm-search-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--card);
}
.pm-search-results {
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
}
.pm-search-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.pm-search-item:hover { background: rgba(37,99,235,0.06); }
.pm-search-item .pm-member-avatar { width: 28px; height: 28px; font-size: 0.7rem; }
.pm-search-add-btn {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--primary);
  background: rgba(37,99,235,0.08);
  color: var(--primary);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.pm-search-add-btn:hover { background: var(--primary); color: #fff; }

/* 초대 UI */
.pm-invite-item { background: rgba(37,99,235,0.03); }
.pm-invite-avatar { background: var(--primary) !important; color: #fff !important; font-size: 0.75rem !important; }
.pm-invite-btn {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
.pm-invite-btn:hover { opacity: 0.85; }
.pm-pending-section { margin-top: 4px; }
.pm-pending-header {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 12px 0 6px;
  border-top: 1px solid var(--border);
}
.pm-pending-item { opacity: 0.7; }
.pm-pending-item:hover { opacity: 1; }
.pm-resend-btn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.pm-resend-btn:hover { background: var(--primary); color: #fff; }
.pm-resend-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pm-hint { padding: 8px; color: var(--text-secondary); font-size: 0.8rem; }

/* 이메일 태그 (멀티 초대) */
.pm-email-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  min-height: 0;
}
.pm-email-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 6px 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,0.2);
  white-space: nowrap;
}
.pm-tag-remove {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
}
.pm-tag-remove:hover { opacity: 1; }

.pm-batch-invite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 6px 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition);
}
.pm-batch-invite-btn:hover { opacity: 0.85; }

/* 자동완성 */
.pm-autocomplete-item { background: rgba(37,99,235,0.04); }
.pm-autocomplete-hint {
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.pm-role-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.pm-role-badge.owner { background: #fef3c7; color: #92400e; }
.pm-role-badge.editor { background: #dbeafe; color: #1e40af; }
.pm-role-badge.viewer { background: #f1f5f9; color: #64748b; }

/* ── 읽기 전용 배지 (save-bar 내) ── */
.readonly-badge {
  display: none;
  padding: 2px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  white-space: nowrap;
}
.readonly-badge.viewer-badge {
  display: inline-block;
  background: #f1f5f9; color: #64748b;
}
.readonly-badge.locked-badge {
  display: inline-block;
  background: #fef3c7; color: #92400e;
}

/* ── Viewer Mode (읽기 전용) ── */
/* 헤더: 저장/되돌리기/Import 숨김 */
body.viewer-mode #saveBtn,
body.viewer-mode #undoBtn,
body.viewer-mode .history-dropdown,
body.viewer-mode .header-actions > label.btn { display: none !important; }
/* 헤더: 프로젝트 제목/설명/날짜 편집 불가 */
body.viewer-mode .project-title,
body.viewer-mode .project-desc { pointer-events: none; cursor: default; }
body.viewer-mode .project-dates input[type="date"] { pointer-events: none; opacity: 0.7; }
/* save-bar: 저장/히스토리 숨기고 배지만 표시 */
body.viewer-mode .save-bar .save-indicator,
body.viewer-mode .save-bar #historyCountText { display: none !important; }
body.viewer-mode .save-bar > span[style] { display: none !important; }
/* 리스트 툴바: 편집 버튼 숨김, 검색/숨긴항목 유지 */
body.viewer-mode #listToolbar > .btn,
body.viewer-mode #listToolbar > .btn-primary,
body.viewer-mode #listToolbar > .btn-sm,
body.viewer-mode #listToolbar > .separator { display: none !important; }
/* 트리 행: 편집 컨트롤 숨김/비활성화 */
body.viewer-mode .row-actions { display: none !important; }
body.viewer-mode .drag-handle { display: none !important; }
body.viewer-mode .row-title,
body.viewer-mode .row-detail { pointer-events: none; cursor: default; }
body.viewer-mode .row-title-link-btn,
body.viewer-mode .row-link-add,
body.viewer-mode .link-edit,
body.viewer-mode .link-remove { display: none !important; }
body.viewer-mode .tree-row input[type="date"] { pointer-events: none; opacity: 0.7; }
body.viewer-mode .date-nav-btns { display: none !important; }
body.viewer-mode .assignee-display,
body.viewer-mode .assignee-cell { pointer-events: none; cursor: default; }
body.viewer-mode .status-badge { pointer-events: none; cursor: default; }
body.viewer-mode .depth-indicator { pointer-events: none; cursor: default; }
/* 예산: 편집 불가 */
body.viewer-mode .budget-amount-input,
body.viewer-mode .budget-rate-input,
body.viewer-mode .budget-currency-select { pointer-events: none; opacity: 0.7; }
body.viewer-mode .budget-rate-toggle button,
body.viewer-mode #budgetAllocMode button,
body.viewer-mode .budget-alloc-sort-btn { pointer-events: none; opacity: 0.7; }
body.viewer-mode .budget-alloc-add { display: none !important; }
body.viewer-mode .budget-alloc-input { pointer-events: none; opacity: 0.7; }
body.viewer-mode .budget-alloc-remove { display: none !important; }
body.viewer-mode .budget-alloc-drag { display: none !important; }
/* 간트: 드래그/리사이즈 비활성화 */
body.viewer-mode .gantt-bar { cursor: default; }
body.viewer-mode .resize-handle { display: none !important; }
/* 담당자 모달: 추가/삭제 숨김 */
body.viewer-mode .member-add-form { display: none !important; }
body.viewer-mode .member-delete { display: none !important; }
/* 상태 모달: 추가/편집/삭제 숨김 */
body.viewer-mode .status-add-form { display: none !important; }
body.viewer-mode .status-actions { display: none !important; }
body.viewer-mode .status-drag-handle { display: none !important; }
body.viewer-mode .status-manage-item { cursor: default; }

/* ══════════════════════════════════════
   COMPANY ADMIN DASHBOARD (.ca-*)
   ══════════════════════════════════════ */
.ca-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.5); display: flex;
  align-items: center; justify-content: center;
}
.ca-panel {
  background: var(--bg); border-radius: 16px;
  width: 90%; max-width: 700px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.ca-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.ca-header h2 { margin: 0; font-size: 1.15rem; }
.ca-close {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 14px; font-size: 0.8rem; color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
}
.ca-close:hover { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.ca-tabs {
  display: flex; gap: 4px; padding: 16px 24px 0;
  border-bottom: 1px solid var(--border);
}
.ca-tab {
  background: none; border: none; padding: 8px 16px;
  font-size: 0.82rem; color: var(--text-secondary);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.ca-tab:hover { color: var(--text-primary); }
.ca-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.ca-body { padding: 20px 24px 24px; overflow-y: auto; flex: 1; }
.ca-section { display: none; }
.ca-section.active { display: block; }
.ca-form-group { margin-bottom: 14px; }
.ca-form-group label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; }
.ca-form-group input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 0.85rem; box-sizing: border-box;
}
.ca-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.ca-list-item:last-child { border-bottom: none; }
.ca-item-name { font-weight: 500; font-size: 0.88rem; }
.ca-item-meta { font-size: 0.75rem; color: var(--text-secondary); }
.ca-item-actions { display: flex; gap: 6px; margin-left: auto; }
.ca-empty, .ca-error { text-align: center; padding: 24px; color: var(--text-secondary); font-size: 0.85rem; }
.ca-error { color: var(--danger, #ef4444); }
.ca-hint { font-size: 0.78rem; color: var(--text-secondary); padding: 12px 0 0; border-top: 1px solid var(--border); margin-top: 12px; }
.ca-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; background: #f1f5f9; color: #64748b;
}
.ca-project-card {
  padding: 14px; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px;
}
.ca-project-card h4 { margin: 0 0 4px; font-size: 0.9rem; }

/* ══════════════════════════════════════
   SITE ADMIN DASHBOARD (.sa-*)
   ══════════════════════════════════════ */
.sa-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.5); display: flex;
  align-items: center; justify-content: center;
}
.sa-panel {
  background: var(--bg); border-radius: 16px;
  width: 90%; max-width: 800px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.sa-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.sa-header h2 { margin: 0; font-size: 1.15rem; }
.sa-close {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 14px; font-size: 0.8rem; color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
}
.sa-close:hover { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.sa-tabs {
  display: flex; gap: 4px; padding: 16px 24px 0;
  border-bottom: 1px solid var(--border);
}
.sa-tab {
  background: none; border: none; padding: 8px 16px;
  font-size: 0.82rem; color: var(--text-secondary);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.sa-tab:hover { color: var(--text-primary); }
.sa-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.sa-body { padding: 20px 24px 24px; overflow-y: auto; flex: 1; }
.sa-section { display: none; }
.sa-section.active { display: block; }
.sa-stat-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.sa-stat-card {
  background: #f8fafc; border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 16px; text-align: center;
}
.sa-stat-value {
  font-size: 2rem; font-weight: 700; color: var(--primary);
  line-height: 1.2;
}
.sa-stat-label {
  font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px;
}
.sa-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; border-bottom: 1px solid var(--border);
}
.sa-list-item:last-child { border-bottom: none; }
.sa-item-name { font-weight: 500; font-size: 0.88rem; }
.sa-item-meta { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.sa-item-stats { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.sa-empty, .sa-error { text-align: center; padding: 24px; color: var(--text-secondary); font-size: 0.85rem; }
.sa-error { color: var(--danger, #ef4444); }
.sa-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; background: #f1f5f9; color: #64748b;
}
.sa-badge-admin {
  background: #dbeafe; color: #2563eb; margin-left: 6px;
}

/* ══════════════════════════════════════
   REALTIME LOCK (Phase 3: 동시 편집)
   ══════════════════════════════════════ */

/* Lock 상태 바 */
.lock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  animation: fadeIn 0.2s ease-out;
}
.lock-bar.lock-active {
  background: rgba(37, 99, 235, 0.04);
  border-bottom-color: rgba(37, 99, 235, 0.15);
}
.lock-bar.lock-blocked {
  background: rgba(245, 158, 11, 0.06);
  border-bottom-color: rgba(245, 158, 11, 0.2);
}

.lock-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lock-icon { display: none; }

.lock-holder-avatar { display: none; }

.lock-holder-name { font-weight: 600; color: var(--text); }
.lock-status-text { color: var(--text-secondary); }

.lock-actions {
  display: flex; gap: 6px;
}

.lock-separator {
  color: var(--border); font-size: 14px; line-height: 1;
}

.lock-btn {
  padding: 3px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1px solid; transition: all 0.15s;
}
.lock-btn-request {
  background: rgba(37, 99, 235, 0.08);
  border-color: var(--primary); color: var(--primary);
}
.lock-btn-request:hover { background: rgba(37, 99, 235, 0.15); }
.lock-btn-cancel {
  background: transparent; border-color: var(--border); color: var(--text-secondary);
}
.lock-btn-cancel:hover { background: #f1f5f9; }
.lock-btn-release {
  background: transparent; border-color: var(--border); color: var(--text-secondary);
}
.lock-btn-release:hover { background: #f1f5f9; }

/* Presence 아바타 */
.presence-avatars {
  display: flex; gap: 0; align-items: center;
}
.presence-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: #94a3b8; color: #fff;
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; border: 2px solid var(--card); margin-left: -6px;
  position: relative; cursor: default;
}
.presence-avatar[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: #1e293b; color: #fff; padding: 4px 10px;
  border-radius: 6px; font-size: 11px; font-weight: 400;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  z-index: 100; line-height: 1.4;
}
.presence-avatar[data-tooltip]:hover::after {
  opacity: 1;
}
.presence-avatar:first-child { margin-left: 0; }
.presence-avatar.viewing { background: #94a3b8; }
.presence-avatar.editing {
  background: var(--primary); border-color: rgba(37, 99, 235, 0.3);
  z-index: 1;
}
.presence-avatar.me {
  background: #22c55e; border-color: rgba(34, 197, 94, 0.3);
  z-index: 1;
}
.presence-avatar.me.editing {
  background: #16a34a; border-color: rgba(22, 163, 74, 0.4);
}
.presence-count {
  font-size: 10px; color: var(--text-secondary); margin-left: 6px; white-space: nowrap;
}

/* Lock 요청 모달 아바타 */
.lock-request-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: #fff;
  font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; margin-bottom: 12px;
}

/* Toast 알림 */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  padding: 10px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  animation: toastIn 0.3s ease-out;
  max-width: 340px; display: flex; align-items: center; gap: 8px;
  pointer-events: auto;
}
.toast-info {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.toast-success {
  background: #dcfce7; border: 1px solid #bbf7d0; color: #166534;
}
.toast-warning {
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

/* ── Locked-Out Mode (다른 사용자가 편집 중) ── */
body.locked-out-mode #saveBtn,
body.locked-out-mode #undoBtn,
body.locked-out-mode .history-dropdown,
body.locked-out-mode .header-actions > label.btn { display: none !important; }
body.locked-out-mode .project-title,
body.locked-out-mode .project-desc { pointer-events: none; cursor: default; }
body.locked-out-mode .project-dates input[type="date"] { pointer-events: none; opacity: 0.7; }
body.locked-out-mode .save-bar .save-indicator,
body.locked-out-mode .save-bar #historyCountText { display: none !important; }
body.locked-out-mode .save-bar > span[style] { display: none !important; }
body.locked-out-mode #listToolbar > .btn,
body.locked-out-mode #listToolbar > .btn-primary,
body.locked-out-mode #listToolbar > .btn-sm,
body.locked-out-mode #listToolbar > .separator { display: none !important; }
body.locked-out-mode .row-actions { display: none !important; }
body.locked-out-mode .drag-handle { display: none !important; }
body.locked-out-mode .row-title,
body.locked-out-mode .row-detail { pointer-events: none; cursor: default; }
body.locked-out-mode .row-title-link-btn,
body.locked-out-mode .row-link-add,
body.locked-out-mode .link-edit,
body.locked-out-mode .link-remove { display: none !important; }
body.locked-out-mode .tree-row input[type="date"] { pointer-events: none; opacity: 0.7; }
body.locked-out-mode .date-nav-btns { display: none !important; }
body.locked-out-mode .assignee-display,
body.locked-out-mode .assignee-cell { pointer-events: none; cursor: default; }
body.locked-out-mode .status-badge { pointer-events: none; cursor: default; }
body.locked-out-mode .depth-indicator { pointer-events: none; cursor: default; }
body.locked-out-mode .budget-amount-input,
body.locked-out-mode .budget-rate-input,
body.locked-out-mode .budget-currency-select { pointer-events: none; opacity: 0.7; }
body.locked-out-mode .budget-rate-toggle button,
body.locked-out-mode #budgetAllocMode button,
body.locked-out-mode .budget-alloc-sort-btn { pointer-events: none; opacity: 0.7; }
body.locked-out-mode .budget-alloc-add { display: none !important; }
body.locked-out-mode .budget-alloc-input { pointer-events: none; opacity: 0.7; }
body.locked-out-mode .budget-alloc-remove { display: none !important; }
body.locked-out-mode .budget-alloc-drag { display: none !important; }
body.locked-out-mode .gantt-bar { cursor: default; }
body.locked-out-mode .resize-handle { display: none !important; }
body.locked-out-mode .member-add-form { display: none !important; }
body.locked-out-mode .member-delete { display: none !important; }
body.locked-out-mode .status-add-form { display: none !important; }
body.locked-out-mode .status-actions { display: none !important; }
body.locked-out-mode .status-drag-handle { display: none !important; }
body.locked-out-mode .status-manage-item { cursor: default; }

/* ══════════════════════════════════════
   SPEC SHEET (사양정의서)
   ══════════════════════════════════════ */

.spec-sheet-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  transition: box-shadow var(--transition);
}
.spec-sheet-section:hover {
  box-shadow: var(--shadow-hover);
}

/* ── Spec tab container ── */
.spec-tab-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 0 32px;
}

/* ── Product row (name + image) ── */
.spec-product-row {
  display: flex;
  gap: 24px;
  padding: 16px 16px 0;
  align-items: flex-start;
  flex-wrap: wrap;
}
.spec-product-name-wrap {
  flex: 1;
  min-width: 180px;
}
.spec-image-wrap {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.spec-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.spec-field-hint {
  font-size: 10px;
  font-weight: 400;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
}
.spec-product-name-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: #f8fafc;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.spec-product-name-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  background: #fff;
}

/* ── Image area ── */
.spec-image-area {
  position: relative;
}
.spec-image-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 20px 12px;
  cursor: pointer;
  background: #f8fafc;
  transition: border-color var(--transition), background var(--transition);
  min-height: 100px;
  text-align: center;
}
.spec-image-upload-area:hover,
.spec-image-upload-area.drag-over {
  border-color: var(--primary);
  background: #eff6ff;
}
.spec-upload-icon { font-size: 22px; }
.spec-upload-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.spec-upload-hint {
  font-size: 10px;
  color: #94a3b8;
}
.spec-image-preview-wrap {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.spec-image-preview {
  width: 100%;
  max-width: 300px;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #f8fafc;
}
.spec-image-remove-btn {
  font-size: 11px;
  color: var(--danger);
  background: none;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 5px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background var(--transition);
}
.spec-image-remove-btn:hover {
  background: #fee2e2;
}

/* ── Add section bar ── */
.spec-add-section-bar {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-start;
}
.spec-add-section-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: 7px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.spec-add-section-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Section block ── */
.spec-section-block {
  margin: 12px 16px 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.spec-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f1f5ff 0%, #f8fafc 100%);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.spec-section-drag-handle {
  color: #94a3b8;
  cursor: grab;
  font-size: 14px;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background var(--transition);
}
.spec-section-drag-handle:hover { background: #e2e8f0; }
.spec-section-drag-handle:active { cursor: grabbing; }

.spec-section-toggle {
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  padding: 2px 4px;
  border-radius: 4px;
  user-select: none;
  transition: background var(--transition);
}
.spec-section-toggle:hover { background: #e2e8f0; }

.spec-section-title-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.spec-section-title-input {
  flex: 1;
  min-width: 120px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.spec-section-title-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.spec-section-title-input::placeholder {
  font-weight: 400;
  color: #94a3b8;
}

/* ── Section icon buttons ── */
.spec-icon-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
  white-space: nowrap;
}
.spec-add-row-btn {
  color: var(--primary);
  background: var(--primary-light);
  border-color: rgba(37,99,235,0.2);
}
.spec-add-row-btn:hover {
  background: var(--primary);
  color: #fff;
}
.spec-del-sec-btn {
  color: var(--danger);
  background: #fff;
  border-color: rgba(239,68,68,0.25);
}
.spec-del-sec-btn:hover {
  background: #fee2e2;
}

/* ── Section body ── */
.spec-section-body {
  overflow-x: auto;
}

/* ── Table ── */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--border);
}
.spec-header-row th {
  padding: 7px 10px;
  background: #f1f5f9;
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: center;
}
.spec-header-row th:last-child { border-right: none; }
.spec-row {
  border-bottom: 1px solid #e2e8f0;
  transition: background var(--transition);
}
.spec-row:hover { background: #f8fafc; }
.spec-row:last-child { border-bottom: none; }

.spec-cell {
  padding: 5px 6px;
  vertical-align: middle;
  border-right: 1px solid #e9ecf1;
}
.spec-cell:last-child { border-right: none; }
.spec-drag-col { width: 28px; border-right: none; }
.spec-actions-col { width: 32px; }
.spec-cat1 { width: 14%; }
.spec-cat2 { width: 14%; }
.spec-cat3 { width: 14%; }
.spec-val  { width: 14%; text-align: center; }
.spec-unit { width: 8%; text-align: center; }
.spec-note { width: auto; }

/* ── Row drag handle ── */
.spec-row-drag {
  display: inline-block;
  color: #94a3b8;
  cursor: grab;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background var(--transition);
}
.spec-row-drag:hover { background: #e2e8f0; }
.spec-row-drag:active { cursor: grabbing; }

/* ── Row inputs ── */
.spec-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  background: transparent;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.spec-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}
.spec-input::placeholder { color: #cbd5e1; }
.spec-input-value {
  font-weight: 500;
}

/* ── Delete row button ── */
.spec-del-row-btn {
  color: #94a3b8;
  background: none;
  border-color: transparent;
  font-size: 12px;
  padding: 3px 6px;
}
.spec-del-row-btn:hover {
  color: var(--danger);
  background: #fee2e2;
  border-color: rgba(239,68,68,0.2);
}

/* ── Empty states ── */
.spec-empty {
  padding: 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}
.spec-empty-rows {
  padding: 14px 16px;
  color: #94a3b8;
  font-size: 12px;
  font-style: italic;
}

/* ── Read-only row styling ── */
.spec-cell.spec-cat1,
.spec-cell.spec-cat2,
.spec-cell.spec-cat3 {
  color: var(--text-secondary);
  font-size: 12px;
}

/* ── Locked-out mode ── */
body.locked-out-mode .spec-add-section-btn { display: none !important; }
body.locked-out-mode .spec-add-row-btn { display: none !important; }
body.locked-out-mode .spec-del-sec-btn { display: none !important; }
body.locked-out-mode .spec-del-row-btn { display: none !important; }
body.locked-out-mode .spec-section-drag-handle { display: none !important; }
body.locked-out-mode .spec-row-drag { display: none !important; }
body.locked-out-mode .spec-input { pointer-events: none; }
body.locked-out-mode .spec-product-name-input { pointer-events: none; opacity: 0.7; }
body.locked-out-mode .spec-image-upload-area { pointer-events: none; opacity: 0.7; }
body.locked-out-mode .spec-image-remove-btn { display: none !important; }

/* ── Spec sheet: value + unit cells ── */
.spec-input-value {
  font-weight: 500;
  text-align: center;
}
.spec-input-unit {
  font-size: 11.5px;
  color: var(--text-secondary);
  text-align: center;
}
.spec-input-unit::placeholder { color: #d1d5db; }
.spec-cell.spec-unit {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}
.spec-cell.spec-val {
  font-weight: 500;
  font-size: 12.5px;
  text-align: center;
}
.spec-input-note {
  font-size: 11.5px;
  color: var(--text-secondary);
}
.spec-input-note::placeholder { color: #d1d5db; }
.spec-cell.spec-note {
  color: var(--text-secondary);
  font-size: 12px;
}

/* (read-only val/unit now in separate columns — old combined styles removed) */

/* ── Inline add-row button ── */
.spec-add-row-tr td {
  padding: 0;
  border-bottom: 1px dashed #e2e8f0;
}
.spec-add-row-bottom td {
  border-bottom: none;
  padding-bottom: 4px;
}
.spec-add-row-inline-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 12px 4px 36px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.spec-add-row-inline-btn:hover {
  color: var(--primary);
  background: #f0f7ff;
}

/* ── Read-only: cat1 grouping (rowspan) ── */
.spec-cell-cat1-group {
  vertical-align: middle;
  font-weight: 600;
  color: var(--text);
  background: #f0f4ff;
  border-right: 1px solid #e9ecf1;
}
.spec-cell-cat1-group.first-of-group {
  border-top: 2px solid #94a3b8;
}

/* ── Read-only: group boundary lines ── */
.spec-row.spec-ro-group-first {
  border-top: 2px solid #94a3b8;
}
.spec-row.spec-ro-cat2-first {
  border-top: 1px solid #cbd5e1;
}

/* ── Read-only: cat2 grouping (rowspan) ── */
.spec-cell.spec-cat2.spec-cell-cat2-group {
  vertical-align: middle;
  font-weight: 500;
  background: #f5f8ff;
}

/* ── Edit mode: cat1 group band — 같은 대분류 행은 연한 배경 ── */
.spec-row.spec-cat1-grouped {
  background: #f5f8ff;
}
.spec-row.spec-cat1-grouped:hover {
  background: #edf2ff;
}
.spec-row.spec-cat1-grouped .spec-cell.spec-cat1 {
  border-left: 3px solid var(--primary);
  background: #eef3ff;
}
/* 그룹 첫 행: 위에 두꺼운 구분선 */
.spec-row.spec-cat1-grouped.spec-cat1-group-first {
  border-top: 2px solid #94a3b8;
}
/* 대분류 반복(생략) 행: 흐리게 표시 */
.spec-cell.spec-cat1.spec-cat1-cont .spec-input-cat1-cont {
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.5;
}

/* ── Edit mode: cat2 grouping visual ── */
.spec-cell.spec-cat2.spec-cat2-cont .spec-input-cat2-cont,
.spec-cell.spec-cat2.spec-cat2-cont input {
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.5;
}
.spec-cell.spec-cat2.spec-cat2-cont,
.spec-cell.spec-cat2.spec-cat2-start {
  border-left: 2px solid rgba(37,99,235,0.3);
  background: #f0f5ff;
}
/* 중분류 그룹 첫 행: 연한 구분선 */
.spec-row.spec-cat2-group-first {
  border-top: 1px solid #cbd5e1;
}

/* ── Add-row bar (테이블 외부) ── */
.spec-add-row-bar {
  padding: 4px 8px 8px;
}
.spec-add-row-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px dashed rgba(37,99,235,0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.spec-add-row-bar-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  border-style: solid;
}

/* ── Text block ── */
.spec-text-block {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin: 6px 0;
  background: #fafbfc;
}
.spec-text-block-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 6px 6px 0 0;
}
.spec-text-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 1;
}
.spec-text-area {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: none;
  border-radius: 0 0 6px 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: transparent;
  resize: vertical;
  outline: none;
  font-family: inherit;
}
.spec-text-area:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(37,99,235,0.1);
}
.spec-text-area::placeholder { color: #cbd5e1; }
.spec-text-readonly {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  border: none;
  background: transparent;
  white-space: pre-wrap;
}
.spec-add-text-btn {
  color: #059669 !important;
  background: #ecfdf5 !important;
  border-color: rgba(5,150,105,0.35) !important;
}
.spec-add-text-btn:hover {
  background: #059669 !important;
  color: #fff !important;
  border-color: #059669 !important;
}
body.locked-out-mode .spec-text-area { pointer-events: none; opacity: 0.7; }
body.locked-out-mode .spec-add-text-btn { display: none !important; }