/* 큐록 디자인 시스템 — Atom + Molecule 컴포넌트.
   2026-05-25 시작 — Step 1 (P0 5종).
   참고: document-private/DESIGN_SYSTEM.md (계층/스펙/마이그레이션 계획).

   원칙:
     - inline style 5+ 인스턴스 = class 추출.
     - 동적 값은 CSS custom property 로만 (--ic-size, --ic-bg 등).
     - variant 는 .is-<name> modifier class.
*/

/* ── ATOM · btn-close ──────────────────────────────────
   ✕ 닫기 버튼. promo 카드 / 모달 / 패널 등 10+ 인스턴스. */
.btn-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: var(--text-base);
  cursor: pointer;
  padding: var(--space-1) var(--space-1h);
  margin: 0;
  line-height: 1;
  touch-action: manipulation;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.btn-close:hover { color: var(--text); }
.btn-close:active { background: rgba(255, 255, 255, 0.05); }
/* Variant — slightly bigger close (큰 모달용) */
.btn-close.is-lg {
  font-size: var(--text-lg);
  padding: var(--space-1h) var(--space-2h);
}

/* ── ATOM · btn-cta ────────────────────────────────────
   주 CTA 버튼. accent gradient, 흰 글씨. 15+ 인스턴스. */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1h);
  padding: var(--space-2) var(--space-3h);
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-grad);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-xs);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn-cta:active { transform: scale(0.97); }
.btn-cta:disabled { opacity: 0.4; cursor: not-allowed; }
/* Size variants */
.btn-cta.is-lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}
/* Color variants */
.btn-cta.is-purple { background: linear-gradient(135deg, #a855f7, #8b5cf6); }
.btn-cta.is-red    { background: linear-gradient(135deg, #ff4d4d, #b71c1c); }
.btn-cta.is-amber  { background: linear-gradient(135deg, #fbbf24, #d97706); color: #1a1310; }
/* Layout */
.btn-cta.is-block { width: 100%; }

/* Soft variant — 강조 부드러움 (tint bg + accent text + accent border).
   '운동 추가' / '+ 루틴 추가' 같이 카드 안의 inline-add 류. */
.btn-cta.is-soft {
  background: var(--accent-tint-2);
  color: var(--accent);
  border: 1px solid var(--accent-tint-3);
  font-weight: 700;
}
.btn-cta.is-soft:active { background: var(--accent-tint-3); transform: scale(0.97); }

/* ── ATOM · btn-fail ────────────────────────────────────
   실패 / 취소 토글 버튼 (루틴·할일 row 의 우측 액션).
   default = outline + dim. is-active (실패 누른 후) = red 강조. */
.btn-fail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2h);
  border-radius: var(--radius-md);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text3);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-fail:active { transform: scale(0.97); }
.btn-fail.is-active {
  border-color: var(--red);
  background: var(--red-bg);
  color: var(--red);
}

/* ── ATOM · btn-icon ────────────────────────────────────
   ✎ 수정 / ↻ 변환 / ✕ 삭제 같은 아이콘 단독 버튼.
   row 의 끝쪽 액션 영역에 다수 등장. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  touch-action: manipulation;
  font-size: var(--text-base);
  padding: var(--space-1h) var(--space-2);
  min-width: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.btn-icon:active { background: rgba(255, 255, 255, 0.05); }
.btn-icon:hover { color: var(--text); }
/* Size variants — sub-token micro padding 유지 (3-5px = atomic UI detail) */
.btn-icon.is-sm { font-size: var(--text-sm); padding: 3px; min-width: 0; }
.btn-icon.is-md { font-size: var(--text-md); padding: 3px 5px; min-width: 0; }
/* Color variants */
.btn-icon.is-accent { color: var(--accent); }
.btn-icon.is-accent:hover { color: var(--accent); filter: brightness(1.15); }
.btn-icon.is-danger { color: var(--red); }

/* ── ATOM · btn-ghost ───────────────────────────────────
   보조 CTA — surface2 bg + border + dim text. 모달 cancel 류 10+. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1h);
  padding: var(--space-2) var(--space-3h);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-md);
  color: var(--text2);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-ghost:active { background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-ghost.is-block { width: 100%; }
.btn-ghost.is-lg { padding: var(--space-3) var(--space-4); font-size: var(--text-md); border-radius: var(--radius-lg); }

/* ── ATOM · ic-circle ───────────────────────────────────
   원형 아이콘 박스. promo 카드 좌측 등 5+ 인스턴스. */
.ic-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ic-size, 36px);
  height: var(--ic-size, 36px);
  border-radius: var(--radius-lg);
  background: var(--ic-bg, var(--surface2));
  color: var(--ic-fg, var(--text));
  flex-shrink: 0;
  font-size: var(--text-xl);
  line-height: 1;
}
.ic-circle.is-sm { --ic-size: 28px; font-size: var(--text-md); }
.ic-circle.is-lg { --ic-size: 48px; font-size: var(--text-2xl); }
.ic-circle.is-accent { --ic-bg: var(--accent-tint-2); --ic-fg: var(--accent); }
.ic-circle.is-purple { --ic-bg: rgba(168, 85, 247, 0.18); --ic-fg: #c084fc; }
.ic-circle.is-amber  { --ic-bg: rgba(251, 191, 36, 0.15); --ic-fg: #fbbf24; }
.ic-circle.is-grad-accent {
  --ic-fg: #fff;
  background: linear-gradient(135deg, var(--accent-tint-3), rgba(255, 107, 53, 0.12));
}

/* ── MOLECULE · promo-card ──────────────────────────────
   홈 하단 안내 / 미션 / 친구초대 카드. 5+ 인스턴스 (yesterday-ribbon 제외).
   구조: [ic-circle] [eyebrow + title + body] [btn-cta] [btn-close] */
.promo-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-3h) var(--space-2h);
  padding: var(--space-3) var(--space-3h);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
}
.promo-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.promo-card-eyebrow {
  font-size: var(--text-2xs);
  color: var(--text3);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.promo-card-title {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.promo-card-body {
  font-size: var(--text-xs);
  color: var(--text3);
  line-height: 1.35;
}
/* Top-aligned variant — 큰 사이즈 (e.g. 첫 주 미션 진행 리스트 포함) */
.promo-card.is-stack {
  align-items: stretch;
  flex-direction: column;
  padding: var(--space-3h);
}
/* Child of .promo-card.is-stack — 헤더 행 (제목 + close) */
.promo-card.is-stack > .is-stack-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-3);
  margin-bottom: var(--space-2h);
}
/* Background tints */
.promo-card.is-accent  {
  background: linear-gradient(135deg, var(--accent-tint-2) 0%, rgba(255, 107, 53, 0.04) 100%);
  border-color: var(--accent-tint-3);
}
.promo-card.is-accent-strong {
  background: linear-gradient(135deg, var(--accent-tint-2) 0%, rgba(255, 107, 53, 0.05) 100%);
  border-color: var(--accent-tint-4);
  border-width: 1.5px;
}
.promo-card.is-purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(168, 85, 247, 0.04));
  border-color: rgba(168, 85, 247, 0.25);
}

/* ── ATOM · cube-deco ──────────────────────────────────
   장식용 입체 큐브 박스. auth 화면 cube row / onboarding / 가이드 등에 재사용.
   실제 점수/상태 representation 이 아니라 *비주얼 데코*. */
.cube-deco {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  box-sizing: border-box;
  border: 1px solid;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 3px rgba(0, 0, 0, 0.32),
    0 1px 2px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.cube-deco.is-sm { width: 14px; height: 14px; }
.cube-deco.is-md { width: 22px; height: 22px; }
.cube-deco.is-lg { width: 28px; height: 28px; border-radius: 3px; }
.cube-deco.is-gold {
  background: linear-gradient(135deg, #fff1a8 0%, #ffd54a 45%, #c48c1a 100%);
  border-color: rgba(255, 233, 128, 0.7);
}
.cube-deco.is-silver {
  background: linear-gradient(135deg, #f2f4f7 0%, #b5c0cc 45%, #6d7682 100%);
  border-color: rgba(210, 218, 228, 0.55);
}
.cube-deco.is-red {
  background: linear-gradient(135deg, #ff8080 0%, #ff4d4d 50%, #8b1515 100%);
  border-color: rgba(255, 77, 77, 0.7);
}
.cube-deco.is-empty {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
/* 행 wrapper */
.cube-deco-row {
  display: flex;
  gap: var(--space-1h);
  justify-content: center;
  margin-bottom: var(--space-3h);
}

/* ── ORGANISM · app-fullscreen-overlay ─────────────────
   풀-스크린 모달 overlay. 앱 프레임 (max-width:430px center) 안에서만 펼쳐짐.
   기존 position:fixed left:0 right:0 width:100% 는 viewport 전체로 펼쳐져
   데스크탑/dev 모드에서 어색. */
.app-fullscreen-overlay {
  display: none; /* JS toggle */
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 430px;
  background: var(--bg);
  z-index: 700;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* dev 모드: 앱 좌측 정렬 따라감 */
body.qrok-dev-on .app-fullscreen-overlay {
  left: 16px;
  transform: none;
  width: min(430px, calc(100vw - 388px - 16px));
}

/* ── MOLECULE · group-stats tab pill ────────────────────
   챌린지 룸의 그룹 통계 탭 (체중/식단/운동) — 통일된 segmented control */
.gs-tab {
  padding: var(--space-1h) var(--space-3h);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 0.5px solid var(--border2);
  background: transparent;
  color: var(--text3);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  white-space: nowrap;
}
.gs-tab.is-active {
  border-color: var(--accent-bd);
  background: var(--accent-bg);
  color: var(--accent);
}
.gs-tab-row { display: flex; gap: var(--space-1h); margin-bottom: var(--space-3); }

/* ── MOLECULE · diet stacked bar (식단 quality 100% 정규화) ──
   참여자별 한 줄. 좌 → 우 = clean (green) / normal / cheat / red (위반).
   길이 통일 → 한눈 비교. 우측 끝에 % + violation 카운트. */
.diet-row {
  display: flex;
  align-items: center;
  gap: var(--space-2h);
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border2);
}
.diet-row:last-child { border-bottom: none; }
.diet-row-name {
  flex: 0 0 64px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diet-row-name.is-me { color: var(--accent); }
.diet-stacked-bar {
  flex: 1;
  height: 14px;
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.diet-stacked-bar > * {
  height: 100%;
  transition: width 0.45s cubic-bezier(.32, 1, .42, 1);
}
.diet-stacked-bar .is-clean   { background: var(--green); }
.diet-stacked-bar .is-normal  { background: var(--text3); opacity: 0.5; }
.diet-stacked-bar .is-cheat   { background: var(--amber); opacity: 0.8; }
.diet-stacked-bar .is-violate { background: var(--red); }
.diet-row-stat {
  flex: 0 0 auto;
  font-family: 'DM Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text2);
  text-align: right;
  min-width: 36px;
}
.diet-row-stat.is-pct { color: var(--green); }
.diet-row-stat.is-red { color: var(--red); margin-left: var(--space-1); }

/* ── ATOM · streak-pill (클린 streak leaderboard) ────── */
.streak-pill-row {
  display: flex;
  gap: var(--space-1h);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--accent-tint-2);
  border: 1px solid var(--accent-tint-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--accent);
}
.streak-pill-rank {
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--text-2xs);
  letter-spacing: -0.02em;
}
.streak-pill-name {
  color: var(--text2);
  font-weight: 600;
}
.streak-pill-days {
  font-family: 'DM Mono', monospace;
  color: var(--accent);
}

/* 식단 패널 sub-section header */
.diet-section-label {
  font-size: var(--text-2xs);
  color: var(--text3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1h);
}
/* 색 dot legend */
.diet-legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2h);
}
.diet-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--text3);
}
.diet-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.diet-legend-dot.is-clean   { background: var(--green); }
.diet-legend-dot.is-normal  { background: var(--text3); opacity: 0.5; }
.diet-legend-dot.is-cheat   { background: var(--amber); opacity: 0.8; }
.diet-legend-dot.is-violate { background: var(--red); }

/* ── MOLECULE · gs-leaderboard ──────────────────────────
   목표 근접 순 ranking. 체중 / 운동 / 식단 panel 모두 사용 가능. */
.gs-leaderboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.gs-rank-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1h) var(--space-2);
  background: var(--surface2);
  border-radius: var(--radius-md);
}
.gs-rank-row.is-me {
  background: var(--accent-bg);
  border: 1px solid var(--accent-bd);
}
.gs-rank-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--text-xs);
  width: 22px;
  text-align: center;
  color: var(--text3);
  flex-shrink: 0;
}
.gs-rank-row.is-1 .gs-rank-num { color: #ffd54a; }
.gs-rank-row.is-2 .gs-rank-num { color: #b5c0cc; }
.gs-rank-row.is-3 .gs-rank-num { color: #c48c1a; }
.gs-rank-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-rank-row.is-me .gs-rank-name { color: var(--accent); }
.gs-rank-stat {
  font-family: 'DM Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text2);
  flex-shrink: 0;
}
.gs-rank-stat.is-positive { color: var(--green); }
.gs-rank-stat.is-reached { color: var(--green); }

/* ── MOLECULE · 운동 완료 일자 체크박스 grid ────────────
   v4 (2026-05-25): 빨간 dot → 체크박스 ✓ (긍정적 톤). */
.wo-dotgrid-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1h) 0;
  border-bottom: 1px solid var(--border2);
}
.wo-dotgrid-row:last-child { border-bottom: none; }
.wo-dotgrid-name {
  flex: 0 0 60px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wo-dotgrid-row.is-me .wo-dotgrid-name { color: var(--accent); }
.wo-dotgrid-dots {
  flex: 1;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.wo-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: transparent;
  font-weight: 800;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wo-dot.is-done {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.wo-dot.is-done::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.wo-dot.is-today {
  outline: 1.5px solid var(--accent);
  outline-offset: 1px;
}
.wo-dotgrid-count {
  flex: 0 0 auto;
  font-family: 'DM Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  min-width: 38px;
  text-align: right;
}

/* ── MOLECULE · weight bullet bar (목표 진척 시각화) ────
   v4 (2026-05-25): SVG 라인 6개 겹침 → 멤버별 1행 bullet bar.
   각 행 = 멤버 색 fill 비율 (0~100%+) + 현재/목표 텍스트 라벨. */
.wb-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border2);
}
.wb-row:last-child { border-bottom: none; }
.wb-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.wb-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-row.is-me .wb-name { color: var(--accent); }
.wb-stat {
  font-family: 'DM Mono', monospace;
  font-size: var(--text-2xs);
  color: var(--text3);
  flex-shrink: 0;
}
.wb-stat .pct {
  font-weight: 700;
  color: var(--text);
}
.wb-stat .pct.is-reached { color: var(--green); }
.wb-bar {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.wb-bar-fill {
  height: 100%;
  background: var(--wb-color, var(--accent));
  border-radius: inherit;
  transition: width 0.6s cubic-bezier(.32, 1, .42, 1);
  box-shadow: 0 0 4px var(--wb-color, var(--accent));
}
.wb-bar-fill.is-overshoot {
  background: var(--green);
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}
.wb-bar-goal {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: rgba(255, 255, 255, 0.4);
  /* 100% 위치 = goal marker */
  left: calc(100% - 1px);
}
.wb-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--text3);
  font-family: 'DM Mono', monospace;
}
.wb-meta .start { color: var(--text3); }
.wb-meta .goal { color: var(--green); font-weight: 600; }
.wb-direction {
  display: inline-block;
  font-size: 9px;
  color: var(--text3);
  margin-left: var(--space-1);
  font-family: 'DM Mono', monospace;
}

/* ── MOLECULE · 오늘 끼니 grid (식단 panel) ─────────────
   멤버별 row — 좌측 이름, 우측 3 meal slot (아침/점심/저녁) + 추가 슬롯. */
.diet-today-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border2);
}
.diet-today-row:last-child { border-bottom: none; }
.diet-today-name {
  flex: 0 0 60px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diet-today-row.is-me .diet-today-name { color: var(--accent); }
.diet-today-slots {
  flex: 1;
  display: flex;
  gap: var(--space-1h);
  flex-wrap: wrap;
}
.diet-slot {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--surface3);
  border: 2px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text3);
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.diet-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.diet-slot.is-empty { color: var(--text3); opacity: 0.4; }
.diet-slot.is-clean { border-color: var(--green); background: rgba(52, 211, 153, 0.12); color: var(--green); }
.diet-slot.is-normal { border-color: var(--text3); background: rgba(255, 255, 255, 0.04); color: var(--text2); }
.diet-slot.is-cheat { border-color: var(--amber); background: rgba(245, 158, 11, 0.14); color: var(--amber); }
.diet-slot.is-violate { border-color: var(--red); background: rgba(255, 77, 77, 0.14); color: var(--red); }
.diet-slot-label {
  position: absolute;
  bottom: 2px;
  font-size: 7px;
  letter-spacing: 0.05em;
}