/* panel.css — Notion-style 패널 (보더 없이 구분선만) */

.panel {
  background: var(--c-bg);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
}

.panel-head {
  height: var(--panel-head-h);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--panel-head-px);
  border-bottom: 1px solid var(--c-border);
  gap: var(--sp-3);
}
.panel-head--wrap {
  height: auto;
  min-height: var(--panel-head-h);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--panel-head-px);
}

/* ─── panel-head 표준 규격 ───
  아이콘(14px, muted) + 타이틀(12px bold) + 서브(11px muted)
  gap: 아이콘-타이틀 6px, 타이틀-서브 8px, 액션버튼 6px
*/
.panel-head > div:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.panel-head > div:first-child > i,
.panel-head > div:first-child > .ph,
.panel-head > div:first-child > [class^="ph-"],
.panel-head > div:first-child > [class*=" ph-"] {
  font-size: var(--icon-sm);
  color: var(--c-text-muted);
  line-height: 1;
  flex-shrink: 0;
}
.panel-title {
  font-size: var(--font-size-md);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.panel-title i,
.panel-title .ph,
.panel-title [class^="ph-"],
.panel-title [class*=" ph-"] {
  font-size: var(--icon-sm) !important;
  line-height: 1;
  margin-right: 6px;
  color: var(--c-text-muted);
}
.panel-subtitle {
  font-size: var(--font-size-sm);
  color: var(--c-text-muted);
  margin-left: 8px;
  letter-spacing: -0.01em;
  font-weight: var(--fw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

.panel-foot {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-2);
  padding: 0 var(--panel-head-px);
  height: var(--panel-head-h);
  border-top: 1px solid var(--c-border);
}

.panel-body { flex: 1; min-height: 0; overflow: auto; }
.panel-body.is-pad { padding: var(--panel-body-pad); }

/* 대시보드 카드 */
.dash-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  transition: background var(--t-fast);
}
.dash-card[onclick] { cursor: pointer; }
.dash-card[onclick]:hover { background: var(--c-bg-hover); }
.dash-card__label { font-size: var(--font-size-sm); color: var(--c-text-muted); }
.dash-card__value { font-size: var(--font-size-lg); font-weight: var(--fw-heavy); margin-top: 2px; }
.dash-card__sub { font-size: var(--font-size-xs); color: var(--c-text-muted); margin-top: 2px; }

/* ── 대시보드 KPI 행 ─────────────────── */
.dash-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.dash-kpi:hover { background: var(--c-bg-hover); border-color: var(--c-border-strong); }
.dash-kpi-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dash-kpi-icon i { font-size: 18px; }
.dash-kpi-body { flex: 1; min-width: 0; }
.dash-kpi-label { font-size: var(--font-size-sm); color: var(--c-text-muted); }
.dash-kpi-value { font-size: 16px; font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.dash-kpi-sub { font-size: var(--font-size-xs); color: var(--c-text-muted); margin-top: 1px; }

/* ── 미결업무 ─────────────────── */
.dash-todo {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
  transition: background var(--t-fast);
}
.dash-todo:hover { background: var(--c-bg-hover); }
.dash-todo-body { flex: 1; min-width: 0; }
.dash-todo-label { font-size: var(--font-size-sm); font-weight: var(--fw-medium); }
.dash-todo-count {
  min-width: 28px; text-align: right;
  font-size: 15px; font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
}
.dash-todo-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 28px;
  cursor: pointer;
}
.dash-todo-item:hover { background: var(--c-bg-hover); }
.dash-todo-item-title {
  font-size: var(--font-size-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-todo-item-sub {
  font-size: var(--font-size-xs);
  color: var(--c-text-muted);
  margin-top: 1px;
}

/* 섹션 소제목 */
.section-label {
  font-size: var(--font-size);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}