/* ============================================================
   v29 — Design Rules (RULE #42~#46)
   2차메뉴·버튼·카드 동일높이·타이틀 여백·날짜 포맷
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   RULE #42 — 2차메뉴: 헤더 바로 밑 + 전폽 배경
   ═══════════════════════════════════════════════════════════ */
/* topbar 하단 border 제거 (2차메뉴와 이어지도록) */
.topbar {
  border-bottom: none !important;
}
/* 2차메뉴가 없을 때는 topbar에 미세한 라인 복원 */
.topbar:not(:has(+ .sub-nav-strip.show)) {
  border-bottom: 1px solid var(--c-line-soft) !important;
}
/* :has 미지원 브라우저 폴백 — JS로 class 토글 */
.topbar.has-subnav {
  border-bottom: none !important;
}


/* ═══════════════════════════════════════════════════════════
   RULE #43 — 기본 버트: 투명 + 라임 테두리 + 라임 텍스트
   ═══════════════════════════════════════════════════════════ */
.btn {
  background: transparent !important;
  border: 1px solid var(--c-primary) !important;
  color: var(--c-primary) !important;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn:hover {
  background: var(--c-primary-soft) !important;
  color: var(--c-primary-strong) !important;
  border-color: var(--c-primary-strong) !important;
}
[data-theme="dark"] .btn {
  border-color: var(--lime-400) !important;
  color: var(--lime-400) !important;
}
[data-theme="dark"] .btn:hover {
  background: rgba(136,199,20,0.15) !important;
}

/* ─── 신규 입력 버튼: 라임 배경 + 흰 텍스트 + "+ 동작명" ─── */
/* RULE #44: .btn.primary, .btn-primary, .btn-add 클래스 */
.btn.primary,
.btn-primary,
.btn-add {
  background: var(--c-primary) !important;
  color: #ffffff !important;
  border-color: var(--c-primary) !important;
  font-weight: 700;
}
.btn.primary:hover,
.btn-primary:hover,
.btn-add:hover {
  background: var(--c-primary-strong) !important;
  border-color: var(--c-primary-strong) !important;
  color: #ffffff !important;
}
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-add {
  background: var(--lime-600) !important;
  border-color: var(--lime-600) !important;
  color: #ffffff !important;
}

/* ─── 위험/삭제 버튼 (RULE #48): 휴지통 아이콘 + "삭제" 텍스트,
       붉은색 아이콘·텍스트·1px 테두리, 투명 배경 ─── */
.btn.danger {
  background: transparent !important;
  border: 1px solid var(--c-bad) !important;
  color: var(--c-bad) !important;
  font-weight: 600;
  gap: 6px;
  display: inline-flex !important;
  align-items: center;
}
.btn.danger svg,
.btn.danger [data-lucide] {
  color: var(--c-bad) !important;
  width: 16px;
  height: 16px;
}
.btn.danger:hover {
  background: rgba(226,85,85,0.08) !important;
  border-color: #c53030 !important;
  color: #c53030 !important;
}
.btn.danger:hover svg,
.btn.danger:hover [data-lucide] {
  color: #c53030 !important;
}
/* 다크모드: 색상계열 유지, 바탕색 대비 가시성 확보 */
[data-theme="dark"] .btn.danger {
  border-color: #f87171 !important;
  color: #f87171 !important;
}
[data-theme="dark"] .btn.danger svg,
[data-theme="dark"] .btn.danger [data-lucide] {
  color: #f87171 !important;
}
[data-theme="dark"] .btn.danger:hover {
  background: rgba(248,113,113,0.15) !important;
  border-color: #fca5a5 !important;
  color: #fca5a5 !important;
}

/* ─── ghost 버튼 예외 (테두리 없이 텍스트만) ─── */
.btn.ghost {
  border-color: transparent !important;
  background: transparent !important;
}
.btn.ghost:hover {
  background: var(--c-primary-soft) !important;
  border-color: transparent !important;
}

/* ─── small 버트 보정 ─── */
.btn.small {
  padding: 4px 10px !important;
  font-size: var(--t-sm);
}

/* ─── chip/pill은 버튼 규칙에서 제외 (자체 스타일 유지) ─── */
.chip { border-color: var(--c-line) !important; }

/* ─── itab(탭 버튼)은 버튼 규칙에서 제외 ─── */
.itab .btn,
.itab button,
.owner-tabs button,
.tab-pills button,
.sub-nav-item {
  background: var(--c-surface-2) !important;
  border-color: var(--c-line) !important;
  color: var(--c-text) !important;
}
.itab .btn.active,
.itab button.active,
.owner-tabs button.active,
.tab-pills button.active {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════
   RULE #45 — 타이틀 상단 여백 (2차메뉴 아래)
   ═══════════════════════════════════════════════════════════ */
.view-root > .section-head:first-child,
.view-root > div > .section-head:first-child,
.view-root > section > .section-head:first-child {
  margin-top: 20px;
}
/* sub-nav가 있을 때 view-root 상단 여백 보강 */
.sub-nav-strip.show + .view-root {
  padding-top: 20px;
}


/* ═══════════════════════════════════════════════════════════
   RULE #46 — 카드 그리드 같은 행 동일 높이
   ═══════════════════════════════════════════════════════════ */
/* 12-column grid 내 카드는 stretch로 동일 높이 */
.grid {
  align-items: stretch;
}
.grid > [class*="span-"] {
  display: flex;
  flex-direction: column;
}
.grid > [class*="span-"] > .card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.grid > [class*="span-"] > .card > .card-body {
  flex: 1;
}

/* Flexbox row 기반 카드 그리드도 동일 높이 */
.row.wrap > .card,
.card-row > .card,
.kpi-grid > .card,
.kpi-grid > .kpi {
  flex: 1;
  min-width: 0;
}

/* 2단/3단 카드 그리드 — display:grid로 자동 동일높이 */
.card-grid-2,
.card-grid-3 {
  display: grid;
  gap: var(--sp-4);
  align-items: stretch;
}
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .card-grid-2, .card-grid-3 { grid-template-columns: 1fr; }
}

/* KPI 그리드 동일높이 (flex 기반) */
.kpi-row, .stat-row {
  display: flex;
  gap: var(--sp-4);
}
.kpi-row > *, .stat-row > * {
  flex: 1;
  min-width: 0;
}


/* ═══════════════════════════════════════════════════════════
   RULE #49 — 통계 범주 컬러: Circle 점 (네모 바 대신)
   ═══════════════════════════════════════════════════════════ */
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--c-text-soft);
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
/* Chart.js 기본 범례의 사각형 → 원형 override */
.chart-legend-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 8px 0;
}


/* ═══════════════════════════════════════════════════════════
   RULE #50 — 타임라인 vertical line UI (일대기 스타일)
   ═══════════════════════════════════════════════════════════ */
.vt-timeline {
  position: relative;
  padding-left: 32px;
}
/* 메인 vertical line */
.vt-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-line) 100%);
  border-radius: 2px;
}

/* 연도/날짜 그룹 헤더 */
.vt-timeline .vt-year {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary);
  margin: 24px 0 12px -32px;
  padding-left: 40px;
}
.vt-timeline .vt-year::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-primary);
  border: 3px solid var(--c-surface);
  box-shadow: 0 0 0 2px var(--c-primary);
  z-index: 1;
}

.vt-timeline .vt-date-label {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-soft);
  margin: 16px 0 8px 0;
  padding-left: 6px;
}
.vt-timeline .vt-date-label::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-primary);
  z-index: 1;
}

/* 타임라인 아이템 */
.vt-item {
  position: relative;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--c-surface-2);
  border-radius: 0 8px 8px 0;
  border-left: 3px solid var(--c-line);
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.vt-item:hover {
  background: var(--c-surface-3);
  border-left-color: var(--c-primary);
}
/* 아이템 왼쪽 불릿 점 */
.vt-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-line);
  z-index: 1;
  transition: background 0.15s;
}
.vt-item:hover::before {
  background: var(--c-primary);
}

/* 카테고리별 액센트 컬러 */
.vt-item[data-type="health"]    { border-left-color: #ef4444; }
.vt-item[data-type="meal"]      { border-left-color: #f97316; }
.vt-item[data-type="finance"]   { border-left-color: #3b82f6; }
.vt-item[data-type="education"] { border-left-color: #8b5cf6; }
.vt-item[data-type="travel"]    { border-left-color: #06b6d4; }
.vt-item[data-type="family"]    { border-left-color: #ec4899; }
.vt-item[data-type="work"]      { border-left-color: #6366f1; }
.vt-item[data-type="milestone"] { border-left-color: var(--c-primary); }
.vt-item[data-type="default"]   { border-left-color: var(--c-line); }

.vt-item[data-type="health"]::before    { background: #ef4444; }
.vt-item[data-type="meal"]::before      { background: #f97316; }
.vt-item[data-type="finance"]::before   { background: #3b82f6; }
.vt-item[data-type="education"]::before { background: #8b5cf6; }
.vt-item[data-type="travel"]::before    { background: #06b6d4; }
.vt-item[data-type="family"]::before    { background: #ec4899; }
.vt-item[data-type="work"]::before      { background: #6366f1; }
.vt-item[data-type="milestone"]::before { background: var(--c-primary); }

/* 타임라인 아이템 내부 */
.vt-item .vt-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--c-text);
  margin-bottom: 4px;
}
.vt-item .vt-meta {
  font-size: 12px;
  color: var(--c-text-mute);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vt-item .vt-meta svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.vt-item .vt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  color: #fff;
}
.vt-item .vt-notes {
  margin-top: 6px;
  font-size: 13px;
  color: var(--c-text-soft);
  line-height: 1.5;
}

/* 다크모드 타임라인 */
[data-theme="dark"] .vt-timeline::before {
  background: linear-gradient(180deg, var(--lime-400) 0%, rgba(255,255,255,0.1) 100%);
}
[data-theme="dark"] .vt-item {
  background: var(--c-surface-2);
}
[data-theme="dark"] .vt-item:hover {
  background: var(--c-surface-3);
}
[data-theme="dark"] .vt-year {
  color: var(--lime-400);
}
[data-theme="dark"] .vt-year::before {
  background: var(--lime-400);
  box-shadow: 0 0 0 2px var(--lime-400);
}
[data-theme="dark"] .vt-date-label::before {
  border-color: var(--lime-400);
}
[data-theme="dark"] .vt-item::before {
  background: rgba(255,255,255,0.2);
}
[data-theme="dark"] .vt-item:hover::before {
  background: var(--lime-400);
}

/* 모바일 타임라인 */
@media (max-width: 599px) {
  .vt-timeline {
    padding-left: 24px;
  }
  .vt-timeline::before {
    left: 10px;
  }
  .vt-timeline .vt-year {
    margin-left: -24px;
    padding-left: 32px;
  }
  .vt-timeline .vt-year::before {
    left: 4px;
    width: 12px;
    height: 12px;
  }
  .vt-timeline .vt-date-label::before {
    left: -20px;
    width: 8px;
    height: 8px;
  }
  .vt-item::before {
    left: -20px;
    width: 6px;
    height: 6px;
  }
}