/* ============================================================================
 * DESIGN: Bento Dashboard
 *
 * Notion / Apple Health dashboard mood. Uneven grid with mixed card sizes.
 *
 * Font:    Inter / Pretendard (sans, crisp)
 * Layout:  uneven CSS Grid — large/small/wide boxes
 * Corners: 12–16px
 * Shadow:  soft ambient
 * ============================================================================ */

html[data-design="bento"] {
  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px -6px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px -10px rgba(0,0,0,0.18);
  --sans: 'Inter', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
  --serif: 'Inter', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
}

html[data-design="bento"] body {
  font-family: var(--sans);
}

html[data-design="bento"] body::before {
  opacity: 0 !important;
}
html[data-design="bento"] .drift-orb {
  opacity: 0.22 !important;
}

/* ----- Cards: rounded, soft ambient shadow ----- */
html[data-design="bento"] .day,
html[data-design="bento"] .today-card,
html[data-design="bento"] .modal,
html[data-design="bento"] .drawer,
html[data-design="bento"] .palette-card,
html[data-design="bento"] .task-breakdown {
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 22px -10px rgba(0,0,0,0.10) !important;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent) !important;
}

html[data-design="bento"][data-theme="dark"] .day,
html[data-design="bento"][data-theme="dark"] .today-card,
html[data-design="bento"][data-theme="dark"] .modal {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px -10px rgba(0,0,0,0.55) !important;
}

/* ----- Uneven 7-day grid: today card spans wide, others compact ----- */
html[data-design="bento"] .days-grid:not(.layout-row) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: minmax(140px, auto) !important;
  gap: 14px !important;
}
html[data-design="bento"] .days-grid:not(.layout-row) .day {
  grid-column: span 1;
  grid-row: span 1;
}
html[data-design="bento"] .days-grid:not(.layout-row) .day.is-today {
  grid-column: span 2;
  grid-row: span 2;
}

/* ----- Buttons: pill-ish rounded ----- */
html[data-design="bento"] button:not(.task-del):not(.weight-badge):not(.task-kr-dot) {
  border-radius: 10px !important;
}
html[data-design="bento"] .task-input,
html[data-design="bento"] .add-task-input,
html[data-design="bento"] textarea,
html[data-design="bento"] input[type="text"],
html[data-design="bento"] input[type="date"],
html[data-design="bento"] input[type="number"] {
  border-radius: 8px !important;
}

/* ----- Section labels: chip-style ----- */
html[data-design="bento"] .section-label {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}