/* ===== 변수 ===== */
:root {
  --primary: #F87171;
  --primary-dark: #EF4444;
  --primary-light: #FECACA;
  --accent: #5EEAD4;
  --accent-dark: #14B8A6;
  --bg: #FFFAF5;
  --card: #FFFFFF;
  --text: #1F2937;
  --text-muted: #6B7280;
  --border: #E5E7EB;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.08);
  --radius: 14px;
  --radius-sm: 10px;
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

/* ===== 리셋 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; font-size: inherit; }
input, select, textarea { font-family: inherit; font-size: 16px; color: var(--text); }
a { color: inherit; text-decoration: none; }

/* ===== 헤더 ===== */
.app-header {
  position: sticky; top: 0; z-index: 100;
  padding: calc(var(--safe-top) + 12px) 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.header-info h1 { font-size: 20px; font-weight: 700; }
.date-display { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sync-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow);
  transition: transform 0.2s;
}
.sync-btn:active { transform: scale(0.95); }
.sync-btn.syncing #sync-icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 메인 ===== */
.app-main {
  padding: 12px 16px calc(80px + var(--safe-bottom));
  max-width: 600px; margin: 0 auto;
}
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.2s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== 진행률 카드 ===== */
.cl-date-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.cl-date-nav {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border: none; border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 20px; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.cl-date-nav:disabled { opacity: 0.35; cursor: default; }
.cl-date-input {
  flex: 1; min-width: 0;
  height: 38px;
  border: none; border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 15px; font-weight: 600;
  text-align: center;
  padding: 0 8px;
  box-shadow: var(--shadow);
}
.cl-date-today {
  flex-shrink: 0;
  height: 38px; padding: 0 14px;
  border: none; border-radius: 10px;
  background: var(--primary);
  color: white;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.progress-card {
  background: linear-gradient(135deg, var(--primary) 0%, #FB7185 100%);
  color: white;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-lg);
}
.progress-label { font-size: 13px; opacity: 0.9; margin-bottom: 8px; }
.progress-bar-wrap {
  height: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: white;
  border-radius: 4px;
  width: 0%;
  transition: width 0.3s;
}
.progress-stats {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ===== 체크리스트 ===== */
.checklist {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.check-item {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  user-select: none;
}
.check-item:active { transform: scale(0.99); }
.check-item.checked {
  background: linear-gradient(135deg, #FEF3F2 0%, #FFE4E6 100%);
}
.check-item.checked .check-label { text-decoration: line-through; opacity: 0.55; }
.check-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: transparent;
  transition: all 0.2s;
}
.check-item.checked .check-icon {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.check-content { flex: 1; min-width: 0; }
.check-label { font-weight: 600; font-size: 14px; }
.check-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.check-emoji { font-size: 22px; flex-shrink: 0; }

.cat-식사 { border-left: 4px solid #FBA740; }
.cat-운동 { border-left: 4px solid #5EEAD4; }
.cat-수면 { border-left: 4px solid #93C5FD; }
.cat-주의 { border-left: 4px solid #F87171; }

/* ===== 통계 카드 ===== */
.quick-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  text-align: center;
}
.stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; color: var(--primary); }

/* ===== 폼 카드 ===== */
.form-card, .logs-card, .info-card, .chart-card, .settings-card, .about-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.form-card h2, .form-card h3, .logs-card h3, .chart-card h3, .settings-card h3 {
  font-size: 16px; font-weight: 700; margin-bottom: 12px;
}
.form-row { margin-bottom: 12px; }
.form-row label {
  display: block; font-size: 12px; color: var(--text-muted);
  margin-bottom: 4px; font-weight: 500;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FAFAFA;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
}
.form-row textarea { resize: vertical; }
.form-row-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.form-row-split > div { margin-bottom: 0; }

.btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s;
}
.btn-primary:active { background: var(--primary-dark); }

/* ===== 최근 기록 ===== */
.empty-msg { text-align: center; color: var(--text-muted); padding: 20px; font-size: 13px; }
.log-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.log-item:last-child { border-bottom: none; }
.log-time { color: var(--text-muted); font-size: 11px; }
.log-detail { margin-top: 2px; }

/* ===== 정보 카드 (성장) ===== */
.info-row {
  display: flex; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label { width: 80px; font-size: 13px; color: var(--text-muted); }
.info-value { flex: 1; font-size: 18px; font-weight: 700; }
.info-pct {
  font-size: 12px;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.chart-card canvas { max-height: 280px; }

/* ===== 더보기 ===== */
.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.more-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.1s;
}
.more-card:active { transform: scale(0.97); }
.more-icon { font-size: 32px; margin-bottom: 6px; }
.more-title { font-size: 12px; font-weight: 600; color: var(--text); }

.setting-row { margin-bottom: 12px; }
.setting-row label {
  display: block; font-size: 12px; color: var(--text-muted);
  margin-bottom: 4px; font-weight: 500;
}
.setting-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #FAFAFA;
  font-size: 13px;
}
.hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

.about-card { text-align: center; }
.about-text { font-size: 12px; color: var(--text-muted); }

/* ===== 하단 네비 ===== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + var(--safe-bottom));
  display: flex;
  z-index: 100;
}
.nav-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px;
  color: var(--text-muted);
  transition: color 0.15s;
}
.nav-btn.active { color: var(--primary); }
.nav-icon { font-size: 22px; line-height: 1; }
.nav-label { font-size: 10px; margin-top: 3px; font-weight: 600; }

/* ===== 토스트 ===== */
.toast {
  position: fixed;
  bottom: calc(80px + var(--safe-bottom));
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(31, 41, 55, 0.95);
  color: white;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  max-width: 80%;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== 체크리스트 탭 (오늘 입력 전용) ===== */
.cl-list {
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px 0;
}
.cl-item {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, transform 0.1s;
  border-left: 4px solid transparent;
}
.cl-item.cat-식사 { border-left-color: #FBA740; }
.cl-item.cat-운동 { border-left-color: #5EEAD4; }
.cl-item.cat-수면 { border-left-color: #93C5FD; }
.cl-item.cat-주의 { border-left-color: #F87171; }
.cl-item:active { transform: scale(0.99); }
.cl-item.checked {
  background: linear-gradient(135deg, #FEF3F2 0%, #FFE4E6 100%);
}
.cl-item.checked .cl-label { text-decoration: line-through; opacity: 0.55; }
.cl-check-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: transparent;
  transition: all 0.2s;
}
.cl-item.checked .cl-check-icon {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.cl-emoji { font-size: 22px; flex-shrink: 0; }
.cl-content { flex: 1; min-width: 0; }
.cl-label { font-weight: 600; font-size: 14px; }
.cl-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cl-save {
  position: sticky;
  bottom: 12px;
  margin-top: 8px;
  z-index: 5;
}

/* 수면 시간 입력 */
.cl-sleep-item { cursor: default; }
.cl-sleep-item:active { transform: none; }
.cl-sleep-item.checked .cl-label { text-decoration: none; opacity: 1; }
.cl-sleep-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.cl-sleep-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
}
.cl-sleep-lbl {
  font-size: 12px;
  color: var(--text-muted);
  width: 48px;
  flex-shrink: 0;
}
.cl-time-input {
  flex: 1;
  padding: 5px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: #FAFAFA !important;
  font-size: 15px !important;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  min-width: 0;
}
.cl-time-input:focus {
  outline: none;
  border-color: var(--primary) !important;
  background: white !important;
}
.cl-item.checked .cl-time-input {
  border-color: var(--primary) !important;
  background: rgba(248,113,113,0.06) !important;
}

/* ===== 캘린더 detail 삭제 가능 이벤트 ===== */
.detail-hint {
  background: #EFF6FF;
  color: #1E40AF;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.detail-hint strong { font-weight: 700; }
.empty-line {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px;
  font-style: italic;
}
.day-collapsible {
  margin: 6px 0 10px;
}
.day-collapsible summary {
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}
.day-event {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.day-event .event-text { flex: 1; min-width: 0; }
.check-event {
  padding: 8px 10px;
  background: linear-gradient(135deg, #FEF3F2, #FFE4E6);
  border-radius: 8px;
  font-size: 12px;
}
.check-event.undone { background: var(--bg); }
.check-event .event-emoji { font-size: 16px; }
.del-btn {
  background: transparent;
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 14px;
  opacity: 0.5;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.del-btn:hover, .del-btn:active {
  opacity: 1;
  background: #FEE2E2;
}

/* ===== 식단 탭 ===== */
.diet-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.card-head h2, .card-head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.diet-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.btn-mini {
  padding: 6px 14px;
  background: var(--primary);
  color: white;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 600;
}
.btn-mini:active { background: var(--primary-dark); }
.btn-mini:disabled { opacity: 0.6; cursor: wait; }

.ai-card {
  background: linear-gradient(135deg, #FFE4E6 0%, #FFF7ED 100%);
}
.photo-card {
  background: linear-gradient(135deg, #ECFEFF 0%, #F0FDFA 100%);
}

.ai-result {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ai-result h3, .ai-result h4 { margin: 8px 0 6px; font-weight: 700; font-size: 14px; }
.ai-result strong { color: var(--primary-dark); }
.ai-result-actions {
  display: flex; gap: 8px;
  margin-top: 10px;
}
.ai-loading {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px;
}
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.photo-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.photo-input-box { cursor: pointer; }
.photo-thumb {
  aspect-ratio: 1;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  background-size: cover;
  background-position: center;
  transition: border-color 0.15s, transform 0.1s;
  position: relative;
  overflow: hidden;
}
.photo-thumb.has-photo {
  border-color: var(--primary);
  border-style: solid;
}
.photo-thumb.has-photo span:not(.photo-icon) {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.55);
  color: white;
  padding: 4px;
  font-size: 11px;
}
.photo-thumb.has-photo .photo-icon { display: none; }
.photo-input-box:active .photo-thumb { transform: scale(0.97); }
.photo-icon { font-size: 28px; margin-bottom: 4px; }

.fav-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
  min-height: 30px;
}
.fav-list:empty::before {
  content: "아직 등록된 메뉴 없음";
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px 0;
}
.fav-tag {
  background: linear-gradient(135deg, #FECACA, #FEF3F2);
  color: #B91C1C;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.fav-tag .remove-x { opacity: 0.5; font-size: 11px; }
.fav-tag:active { transform: scale(0.97); }
.fav-tag.dis-tag {
  background: linear-gradient(135deg, #DDD6FE, #EDE9FE);
  color: #6B21A8;
}

/* ===== 영양 충족도 ===== */
.nutri-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 4px 10px;
  border-radius: 12px;
}
.nutrition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
/* 그래프형 카드 — 배경이 % 만큼 차오름 */
.nutri-card {
  position: relative;
  border-radius: 12px;
  padding: 0;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  overflow: hidden;
  color: #1F2937 !important;
  min-height: 86px;
}
.nutri-card.nutri-low   { border-color: #FCA5A5; }
.nutri-card.nutri-mid   { border-color: #FCD34D; }
.nutri-card.nutri-good  { border-color: #6EE7B7; }
.nutri-card.nutri-over  { border-color: #FDBA74; }

.nutri-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.nutri-card.nutri-low  .nutri-fill { background: linear-gradient(to top, #FCA5A5, #FECACA); }
.nutri-card.nutri-mid  .nutri-fill { background: linear-gradient(to top, #FCD34D, #FDE68A); }
.nutri-card.nutri-good .nutri-fill { background: linear-gradient(to top, #6EE7B7, #A7F3D0); }
.nutri-card.nutri-over .nutri-fill { background: linear-gradient(to top, #FDBA74, #FED7AA); }

.nutri-content {
  position: relative;
  z-index: 1;
  padding: 10px 12px;
}
.nutri-head {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  margin-bottom: 4px;
  color: #1F2937 !important;
}
.nutri-icon { font-size: 16px; }
.nutri-label { flex: 1; color: #1F2937 !important; }
.nutri-pct {
  font-weight: 800; font-size: 20px;
  line-height: 1.1;
  margin-bottom: 2px;
}
.nutri-card.nutri-low  .nutri-pct { color: #B91C1C !important; }
.nutri-card.nutri-mid  .nutri-pct { color: #92400E !important; }
.nutri-card.nutri-good .nutri-pct { color: #065F46 !important; }
.nutri-card.nutri-over .nutri-pct { color: #9A3412 !important; }
.nutri-num { font-size: 11px; color: #374151 !important; font-weight: 600; }

/* ===== 3단계 활동 게이지 (휴식·보통·활발) ===== */
.nutri-activity-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.nag-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  padding: 3px 2px;
  border-radius: 6px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(0,0,0,0.06);
  opacity: 0.45;
  transition: all .2s;
}
.nag-step.on {
  opacity: 1;
  background: rgba(255,255,255,0.85);
  border-color: rgba(16,185,129,0.5);
  box-shadow: 0 1px 2px rgba(16,185,129,0.18);
}
.nag-emoji { font-size: 11px; line-height: 1; }
.nag-val { font-size: 9px; font-weight: 700; color: #4B5563 !important; line-height: 1.1; }
.nag-step.on .nag-val { color: #065F46 !important; }
.nutri-card.nutri-good .nag-step.on { border-color: rgba(16,185,129,0.7); }
.nutri-card.nutri-over .nag-step.on { border-color: rgba(245,158,11,0.6); }

/* ===== 활동 단계 범례 (식단 탭 상단) ===== */
.activity-legend {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #FEF3C7 0%, #DBEAFE 100%);
  border-radius: 10px;
  font-size: 11px;
  color: #1F2937 !important;
}
.al-item { display: inline-flex; align-items: center; gap: 3px; }
.al-emoji { font-size: 14px; }
.al-label { font-weight: 700; color: #1F2937 !important; }
.al-arrow { color: #6B7280 !important; font-weight: 700; }
.al-note {
  flex-basis: 100%; text-align: center;
  font-size: 10px; color: #6B7280 !important;
  margin-top: 2px;
}

/* 캘린더 detail용 미니 영양 카드 — 그래프형 */
.nutri-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
.nutri-mini {
  position: relative;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1.5px solid #E5E7EB;
  overflow: hidden;
  color: #1F2937 !important;
  min-height: 72px;
}
.nutri-mini.nutri-low  { border-color: #FCA5A5; }
.nutri-mini.nutri-mid  { border-color: #FCD34D; }
.nutri-mini.nutri-good { border-color: #6EE7B7; }
.nutri-mini.nutri-over { border-color: #FDBA74; }
.nutri-mini-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.nutri-mini.nutri-low  .nutri-mini-fill { background: linear-gradient(to top, #FCA5A5, #FECACA); }
.nutri-mini.nutri-mid  .nutri-mini-fill { background: linear-gradient(to top, #FCD34D, #FDE68A); }
.nutri-mini.nutri-good .nutri-mini-fill { background: linear-gradient(to top, #6EE7B7, #A7F3D0); }
.nutri-mini.nutri-over .nutri-mini-fill { background: linear-gradient(to top, #FDBA74, #FED7AA); }
.nutri-mini-content {
  position: relative; z-index: 1;
  padding: 6px 4px;
  text-align: center;
}
.nutri-mini-head {
  font-weight: 700; font-size: 10px;
  margin-bottom: 2px;
  color: #1F2937 !important;
  line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.nutri-mini-emoji { font-size: 16px; }
.nutri-mini-label { font-size: 10px; }
.nutri-mini-pct {
  font-weight: 800; font-size: 15px;
  line-height: 1.1;
}
.nutri-mini.nutri-low  .nutri-mini-pct { color: #B91C1C !important; }
.nutri-mini.nutri-mid  .nutri-mini-pct { color: #92400E !important; }
.nutri-mini.nutri-good .nutri-mini-pct { color: #065F46 !important; }
.nutri-mini.nutri-over .nutri-mini-pct { color: #9A3412 !important; }
.nutri-mini-num { font-size: 9px; color: #374151 !important; margin-top: 1px; font-weight: 600; }
.fav-add-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.fav-add-row input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #FAFAFA;
}

.meal-history { display: flex; flex-direction: column; gap: 6px; }
.meal-history:empty::before {
  content: "기록 없음";
  color: var(--text-muted);
  font-size: 12px;
  padding: 12px 0;
  text-align: center;
  display: block;
}
.meal-day-group {
  margin-bottom: 8px;
}
.meal-day-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  padding: 4px 0;
}
.meal-item {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  font-size: 13px;
  display: flex; align-items: flex-start; gap: 8px;
}
.meal-item-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary-dark);
  flex-shrink: 0;
  margin-top: 1px;
}
.meal-item-content { flex: 1; min-width: 0; }
.meal-item-foods { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.meal-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.meal-nutri-ok { color: #047857; font-size: 12px; font-weight: 700; }
.meal-nutri-miss { font-size: 12px; }

.recalc-banner {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  color: #92400E;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.recalc-banner .btn-mini {
  background: #92400E;
  color: white;
  flex-shrink: 0;
}

/* ===== 건강 이력 보강 ===== */
.filter-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 12px;
  color: var(--text);
}
.health-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.health-stat {
  background: var(--bg);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.health-stat-label { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.health-stat-value { font-size: 16px; font-weight: 700; color: var(--primary-dark); }
.log-day-group { margin-bottom: 10px; }
.log-day-header {
  font-size: 12px; font-weight: 700;
  color: var(--primary-dark);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.log-item {
  padding: 8px 0;
  font-size: 12px;
}
.log-item-time {
  display: inline-block;
  font-size: 11px;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  margin-right: 6px;
}
.log-item-temp.fever { color: #DC2626; font-weight: 700; }

/* ===== 캘린더 ===== */
.cal-header {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.cal-header h2 { font-size: 17px; font-weight: 700; }
.cal-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--primary);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.cal-nav-btn:active { background: var(--primary-light); }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 0;
  margin-bottom: 4px;
}
.cal-weekdays .weekend { color: var(--primary); }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.cal-day {
  aspect-ratio: 1;
  background: var(--card);
  border-radius: 10px;
  padding: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: transform 0.1s;
}
.cal-day:active { transform: scale(0.95); }
.cal-day.cal-empty { background: transparent; cursor: default; pointer-events: none; }
.cal-day-num { font-weight: 700; font-size: 13px; color: var(--text); }
.cal-day-pct { font-size: 10px; font-weight: 600; margin-top: 1px; }
.cal-day.cal-none { background: var(--card); }
.cal-day.cal-low { background: #FECACA; }
.cal-day.cal-low .cal-day-pct { color: #B91C1C; }
.cal-day.cal-mid { background: #FEF3C7; }
.cal-day.cal-mid .cal-day-pct { color: #92400E; }
.cal-day.cal-high { background: #BBF7D0; }
.cal-day.cal-high .cal-day-pct { color: #15803D; }
.cal-day.cal-perfect { background: linear-gradient(135deg, #86EFAC, #34D399); }
.cal-day.cal-perfect .cal-day-num,
.cal-day.cal-perfect .cal-day-pct { color: white; font-weight: 800; }
.cal-day.cal-today {
  border-color: var(--primary);
  font-weight: 800;
}
.cal-day.cal-future { opacity: 0.4; cursor: default; pointer-events: none; }
.cal-day.cal-selected { border-color: #2563EB; border-width: 2px; }

/* 캘린더 이벤트 인디케이터 */
.cal-day-indicators {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}
.dot-ind {
  width: 5px; height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.dot-fever { background: #DC2626; box-shadow: 0 0 0 1px white; }
.dot-health { background: #F59E0B; box-shadow: 0 0 0 1px white; }
.dot-meal { background: #10B981; box-shadow: 0 0 0 1px white; }

/* 캘린더 detail 섹션 */
.day-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.day-events { display: flex; flex-direction: column; gap: 4px; }
.day-event {
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.day-event .event-time {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  margin-right: 6px;
  font-size: 11px;
}
.day-event .fever { color: #DC2626; font-weight: 700; }
.day-event .meal-tag {
  display: inline-block;
  background: #ECFEFF;
  color: #0E7490;
  padding: 1px 7px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 10px;
  margin-right: 4px;
}
.day-event .nutrition { font-size: 11px; color: var(--text-muted); }

/* AI 자동 계산 버튼 */
.ai-calc-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  background: linear-gradient(135deg, #FEF3C7, #FECACA);
  color: #92400E;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
}
.ai-calc-btn:disabled { opacity: 0.7; cursor: wait; }
.ai-calc-btn:active { transform: scale(0.98); }

.cal-summary-card {
  background: linear-gradient(135deg, var(--primary) 0%, #FB7185 100%);
  color: white;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
  box-shadow: var(--shadow-lg);
}
.cal-summary-card strong { font-size: 22px; display: block; margin-top: 4px; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px;
  margin-bottom: 12px;
}
.cal-legend .dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.dot-high { background: #BBF7D0; }
.dot-mid { background: #FEF3C7; }
.dot-low { background: #FECACA; }
.dot-none { background: var(--border); }

.cal-detail {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.cal-detail-empty {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px;
}
.day-detail-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.day-detail-header h3 { font-size: 16px; font-weight: 700; }
.day-detail-pct {
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 16px;
}
.day-progress-wrap {
  height: 6px; background: var(--border);
  border-radius: 3px; overflow: hidden;
  margin-bottom: 12px;
}
.day-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #FB7185);
  transition: width 0.3s;
}
.future-msg {
  background: #FEF3C7;
  color: #92400E;
  font-size: 11px;
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.day-items { display: flex; flex-direction: column; gap: 6px; }
.day-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, transform 0.1s;
  border-left: 4px solid transparent;
}
.day-item:active { transform: scale(0.99); }
.day-item.done { background: linear-gradient(135deg, #FEF3F2, #FFE4E6); }
.day-item.done .day-label-main { text-decoration: line-through; opacity: 0.6; }
.day-item.cat-식사 { border-left-color: #FBA740; }
.day-item.cat-운동 { border-left-color: #5EEAD4; }
.day-item.cat-수면 { border-left-color: #93C5FD; }
.day-item.cat-주의 { border-left-color: #F87171; }
.day-check-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: transparent;
  transition: all 0.2s;
}
.day-item.done .day-check-icon {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.day-emoji { font-size: 20px; flex-shrink: 0; }
.day-label { flex: 1; min-width: 0; }
.day-label-main { font-weight: 600; font-size: 13px; }
.day-label-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.day-detail-actions {
  display: grid; grid-template-columns: 1fr 2fr; gap: 8px;
  margin-top: 14px;
}
.btn-secondary {
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}
.btn-secondary:active { background: var(--border); }
#day-save:disabled { opacity: 0.6; cursor: wait; }

/* ===== 로그인 오버레이 ===== */
.login-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(135deg, #FFE4E6 0%, #FFFAF5 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  transition: opacity 0.3s;
}
.login-overlay.hidden { opacity: 0; pointer-events: none; }
.login-card {
  background: white;
  border-radius: 24px;
  padding: 32px 24px;
  max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.login-icon { font-size: 56px; margin-bottom: 8px; }
.login-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.login-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }
.login-btn {
  background: #4285F4 !important;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px;
  font-size: 15px;
}
.login-btn:active { background: #3367D6 !important; }
.login-error {
  margin-top: 14px;
  padding: 10px;
  font-size: 12px;
  color: #B91C1C;
  background: #FEE2E2;
  border-radius: 8px;
  white-space: pre-line;
  display: none;
}
.login-error:not(:empty) { display: block; }
.login-foot { font-size: 11px; color: var(--text-muted); margin-top: 24px; line-height: 1.6; }
.setup-needed {
  background: #FEF3C7;
  padding: 14px; border-radius: 12px;
  margin-bottom: 14px;
  text-align: left;
}
.setup-msg { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #92400E; }
.setup-needed input {
  width: 100%; padding: 10px;
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 8px; font-size: 13px;
}
.setup-help {
  display: block; text-align: center;
  margin-top: 8px; font-size: 12px;
  color: #2563EB;
}
.header-actions { display: flex; gap: 8px; }

/* 모든 입력 필드 — 다크 모드에서도 어두운 글씨 강제 (가시성) */
input, select, textarea {
  color: #1F2937 !important;
  background: #FAFAFA !important;
}
input::placeholder, textarea::placeholder {
  color: #9CA3AF !important;
}

/* ============================================================
   서브 페이지 공통 — 다크 모드에서도 라이트 테마 강제 (가시성)
   ============================================================ */
/* 새 서브 페이지들의 카드·텍스트는 OS 다크 모드 무시하고 라이트 테마 사용 */
#nutrition-weekly, #guide-diet, #guide-exercise,
#guide-practice, #guide-monitor, #guide-checklist {
  color: #1F2937;
}
#nutrition-weekly *, #guide-diet *, #guide-exercise *,
#guide-practice *, #guide-monitor *, #guide-checklist * {
  /* 색이 명시되지 않은 모든 자식은 어두운 글씨 — !important로 다크모드 변수 차단 */
}

.back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #FFFFFF !important; color: #1F2937 !important;
  border: 1px solid #E5E7EB;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: all .15s;
}
.back-btn:hover, .back-btn:active { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); }

/* ============================================================
   주간 영양 충족도
   ============================================================ */
.weekly-head-card {
  background: linear-gradient(135deg, #FEF3C7 0%, #FCE7F3 100%);
  border-radius: var(--radius);
  padding: 18px 16px; margin-bottom: 14px;
  box-shadow: var(--shadow);
  color: #1F2937;
}
.weekly-head-card h2 { font-size: 19px; font-weight: 700; color: #1F2937; }
.weekly-head-card p { color: #4B5563; }
.weekly-range {
  display: inline-block; margin-top: 8px;
  background: rgba(255,255,255,0.7); color: #374151;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

.weekly-card {
  background: #FFFFFF;
  border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
  box-shadow: var(--shadow);
  color: #1F2937;
}
.weekly-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: #1F2937; }
.weekly-card .card-hint { font-size: 12px; color: #6B7280; margin-bottom: 14px; }

/* 일별 막대 차트 */
.weekly-daily-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 180px;
  align-items: end;
}
.day-bar-col { display: flex; flex-direction: column; align-items: center; height: 100%; }
.day-bar-wrap {
  flex: 1; width: 100%; min-height: 4px;
  display: flex; align-items: end;
  border-bottom: 1px dashed var(--border);
}
.day-bar {
  width: 100%; border-radius: 6px 6px 0 0;
  display: flex; justify-content: center; align-items: start;
  padding-top: 4px;
  transition: height .3s ease;
  position: relative;
  min-height: 2px;
}
.day-bar-pct {
  font-size: 10px; font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.bar-good { background: linear-gradient(180deg, #34D399 0%, #10B981 100%); }
.bar-mid  { background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 100%); }
.bar-low  { background: linear-gradient(180deg, #FCA5A5 0%, #EF4444 100%); }
.bar-none { background: #E5E7EB; }
.bar-none .day-bar-pct { color: #9CA3AF; text-shadow: none; }
.day-bar-label { margin-top: 6px; text-align: center; }
.day-bar-dow { font-size: 11px; color: #6B7280; font-weight: 600; }
.day-bar-num { font-size: 13px; color: #1F2937; font-weight: 700; margin-top: 1px; }
.day-bar-col.today .day-bar-dow,
.day-bar-col.today .day-bar-num { color: var(--primary); }
.day-bar-col.today .day-bar-num { background: var(--primary); color: #FFFFFF; border-radius: 6px; padding: 1px 6px; }

/* 영양소별 주간 평균 행 */
.weekly-nutrient-list { display: flex; flex-direction: column; gap: 10px; }
.weekly-nutrient-row {
  padding: 10px 12px; border-radius: 10px;
  background: #F9FAFB; border: 1px solid var(--border);
}
.wnr-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  color: #1F2937 !important;
}
.wnr-icon { font-size: 16px; }
.wnr-label { font-size: 13px; font-weight: 600; flex: 1; color: #1F2937 !important; }
.wnr-pct { font-size: 14px; font-weight: 800; color: #1F2937 !important; }
.wnr-bar-wrap {
  height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden;
  margin-bottom: 4px;
}
.wnr-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
.weekly-nutrient-row.nutri-good .wnr-bar { background: linear-gradient(90deg, #34D399, #10B981); }
.weekly-nutrient-row.nutri-mid .wnr-bar { background: linear-gradient(90deg, #FCD34D, #F59E0B); }
.weekly-nutrient-row.nutri-low .wnr-bar { background: linear-gradient(90deg, #FCA5A5, #EF4444); }
.weekly-nutrient-row.nutri-over .wnr-bar { background: linear-gradient(90deg, #F472B6, #DB2777); }
.wnr-num { font-size: 11px; color: #1F2937 !important; font-weight: 600; }

/* ===== 측정 이력 테이블 — 다크 모드에서도 라이트 강제 ===== */
.measurement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border-radius: 8px;
  overflow: hidden;
}
.measurement-table th {
  background: #F3F4F6 !important;
  color: #4B5563 !important;
  font-weight: 700;
  text-align: center;
  padding: 8px 4px;
  font-size: 11px;
  border-bottom: 2px solid #E5E7EB;
}
.measurement-table td {
  background: #FFFFFF;
  padding: 10px 4px;
  text-align: center;
  border-bottom: 1px solid #F3F4F6;
  color: #1F2937 !important;
  vertical-align: middle;
}
.measurement-table tr:last-child td { border-bottom: none; }
.measurement-table tr.mt-latest td {
  background: linear-gradient(90deg, #DBEAFE 0%, #EFF6FF 100%) !important;
  font-weight: 600;
  color: #1E3A8A !important;
}
.measurement-table b {
  display: block;
  font-size: 14px;
  color: #1F2937 !important;
}
.measurement-table tr.mt-latest b {
  color: #1E3A8A !important;
}
.measurement-table .mt-pct {
  display: block;
  font-size: 10px;
  color: #6B7280 !important;
  font-weight: 500;
  margin-top: 1px;
}
.measurement-table .mt-badge {
  display: inline-block;
  background: #2563EB;
  color: #FFFFFF !important;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: middle;
}

/* 차트 카드 hint */
.chart-card .card-hint {
  font-size: 11px;
  color: #6B7280 !important;
  margin-top: -4px;
  margin-bottom: 8px;
}

/* ===== KDCA 표준치 표 — 다크 모드에서도 라이트 강제 ===== */
.kdca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border-radius: 8px;
  overflow: hidden;
}
.kdca-table th {
  background: #DBEAFE !important;
  color: #1E40AF !important;
  font-weight: 700;
  text-align: center;
  padding: 8px 4px;
  font-size: 11px;
  border-bottom: 2px solid #93C5FD;
}
.kdca-table td {
  background: #FFFFFF;
  padding: 7px 4px;
  text-align: center;
  border-bottom: 1px solid #F3F4F6;
  color: #1F2937 !important;
}
.kdca-table tr:last-child td { border-bottom: none; }
.kdca-table tr.kdca-current td {
  background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%) !important;
  font-weight: 700;
  color: #78350F !important;
}
.kdca-table b {
  display: inline-block;
  font-size: 13px;
  color: #1F2937 !important;
  font-weight: 700;
}
.kdca-table tr.kdca-current b {
  color: #78350F !important;
}
.wnr-num .wnr-avg {
  display: inline-block;
  margin-left: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: #6B7280 !important;
}

/* 주간 분석 요약 */
.weekly-summary-card { background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%); }
.weekly-summary { color: #1F2937; }
.ws-trend {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: rgba(255,255,255,0.7); border-radius: 10px;
  font-size: 13px; margin-bottom: 12px;
}
.ws-trend-icon { font-size: 18px; }
.ws-trend.trend-up { background: rgba(209,250,229,0.7); }
.ws-trend.trend-down { background: rgba(254,226,226,0.7); }
.ws-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ws-col { background: rgba(255,255,255,0.7); border-radius: 10px; padding: 10px 12px; }
.ws-col h4 { font-size: 12px; font-weight: 700; color: #4B5563; margin-bottom: 6px; }
.ws-list { list-style: none; padding: 0; margin: 0; }
.ws-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 13px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ws-list li:last-child { border-bottom: none; }
.ws-list li span { font-weight: 500; color: #374151; }
.ws-best li b { color: #059669; }
.ws-worst li b { color: #DC2626; }
.weekly-warn {
  margin-top: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: #FEE2E2; color: #991B1B;
  font-size: 12px; font-weight: 600;
}
.weekly-warn-mild { background: #FEF3C7; color: #92400E; }
.ws-meta {
  margin-top: 8px; font-size: 11px; color: #6B7280; text-align: right;
}

/* ============================================================
   가이드 페이지 공통
   ============================================================ */
.guide-content { color: #1F2937; padding-bottom: 20px; }

.guide-hero {
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 14px;
  color: #1F2937;
  box-shadow: var(--shadow);
}
.guide-hero h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; color: #1F2937; }
.guide-hero .hero-sub { font-size: 13px; font-weight: 500; color: #4B5563; margin-bottom: 4px; }
.guide-hero .hero-note { font-size: 11px; color: #6B7280; font-style: italic; }

.hero-diet     { background: linear-gradient(135deg, #FEE7C2 0%, #FED7AA 100%); }
.hero-exercise { background: linear-gradient(135deg, #BAE6FD 0%, #93C5FD 100%); }
.hero-practice { background: linear-gradient(135deg, #C7F5DA 0%, #86EFAC 100%); }
.hero-monitor  { background: linear-gradient(135deg, #FBCFE8 0%, #F9A8D4 100%); }
.hero-checklist{ background: linear-gradient(135deg, #DDD6FE 0%, #C4B5FD 100%); }

.guide-section {
  background: #FFFFFF;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  color: #1F2937;
}
.guide-section h3 {
  font-size: 16px; font-weight: 700;
  margin-bottom: 4px;
  color: #1F2937;
}
.guide-section .section-sub {
  font-size: 12px; color: #6B7280; margin-bottom: 12px;
}
.callout-warning-inline {
  display: inline-block;
  background: #FEE2E2; color: #991B1B !important;
  padding: 2px 10px; border-radius: 999px;
  font-weight: 600; font-size: 11px !important;
}

/* 가이드용 테이블 */
.guide-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  color: #1F2937;
}
.guide-table th {
  background: #F9FAFB;
  color: #4B5563;
  font-weight: 700; text-align: left;
  padding: 10px 8px;
  border-bottom: 2px solid #E5E7EB;
  font-size: 12px;
}
.guide-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #E5E7EB;
  vertical-align: top;
  color: #1F2937;
}
.guide-table tr:last-child td { border-bottom: none; }
.guide-table .row-priority { background: linear-gradient(90deg, #FEF3C7 0%, rgba(254,243,199,0.3) 100%); }
.guide-table .row-priority td { font-weight: 600; }
.guide-table .cell-note {
  display: block; font-size: 11px; color: #6B7280; margin-top: 4px; font-weight: 400;
}
.guide-table.compact th, .guide-table.compact td { padding: 8px 6px; font-size: 12px; }

/* 콜아웃 박스 */
.callout {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  border-left: 4px solid #9CA3AF;
  background: #F9FAFB;
  color: #1F2937;
}
.callout-info    { background: #DBEAFE; border-color: #3B82F6; color: #1E40AF; }
.callout-success { background: #D1FAE5; border-color: #10B981; color: #065F46; }
.callout-warning { background: #FEF3C7; border-color: #F59E0B; color: #78350F; }

/* 큰 리스트 */
.big-list {
  list-style: none; padding: 0; margin: 0;
  counter-reset: bl;
}
.big-list li {
  position: relative;
  padding: 10px 12px 10px 42px;
  margin-bottom: 6px;
  background: #F9FAFB;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #1F2937;
  counter-increment: bl;
}
.big-list li::before {
  content: counter(bl);
  position: absolute;
  left: 10px; top: 10px;
  width: 22px; height: 22px;
  background: var(--primary);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.big-list li b { color: #1F2937; }
.q-list li::before { background: #3B82F6; }

/* 경고 리스트 */
.warn-list { list-style: none; padding: 0; margin: 0; }
.warn-list li {
  position: relative;
  padding: 8px 10px 8px 32px;
  margin-bottom: 6px;
  background: #FEF3C7;
  border-left: 3px solid #F59E0B;
  border-radius: 6px;
  font-size: 12.5px;
  color: #78350F;
  line-height: 1.5;
}
.warn-list li::before {
  content: "⚠️"; position: absolute; left: 8px; top: 8px; font-size: 13px;
}

/* 팁 리스트 */
.tip-list { list-style: none; padding: 0; margin: 0; }
.tip-list li {
  position: relative;
  padding: 8px 10px 8px 32px;
  margin-bottom: 6px;
  background: #DBEAFE;
  border-radius: 8px;
  font-size: 12.5px;
  color: #1E3A8A;
  line-height: 1.5;
}
.tip-list li::before {
  content: "💡"; position: absolute; left: 8px; top: 8px; font-size: 13px;
}
.tip-list li b { color: #1E3A8A; font-weight: 700; }

/* 주간 식단 그리드 (식단표) */
.meal-week-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.meal-day {
  background: #F9FAFB;
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 4px solid #3B82F6;
}
.meal-day.meal-weekend { border-left-color: #F59E0B; background: #FFFBEB; }
.md-head {
  font-size: 14px; font-weight: 700; margin-bottom: 6px;
  color: #1F2937;
}
.md-row {
  font-size: 12.5px; line-height: 1.5; color: #1F2937;
  padding: 3px 0;
}
.md-row b {
  display: inline-block; min-width: 50px;
  font-weight: 700; color: var(--primary-dark);
  font-size: 11px;
}

/* 피해야 할 음식 그리드 */
.avoid-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
}
.avoid-card {
  background: #FFF1F2;
  border-radius: 10px;
  padding: 10px;
  border-top: 3px solid #F87171;
}
.ac-head { font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #991B1B; }
.ac-body { font-size: 12px; color: #1F2937; line-height: 1.4; }
.ac-why { display: block; font-size: 11px; color: #DC2626; margin-top: 4px; font-style: italic; }
.ac-alt { font-size: 11px; color: #065F46; margin-top: 6px; font-weight: 600; }

/* 운동 주간 그리드 */
.ex-week-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
.ex-day {
  background: #EFF6FF;
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 4px solid #3B82F6;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 8px; align-items: center;
}
.ex-day.ex-weekend { background: #FEF3C7; border-left-color: #F59E0B; }
.ed-head { font-size: 14px; font-weight: 700; color: #1F2937; }
.ed-main { font-size: 13px; font-weight: 600; color: #1F2937; }
.ed-time { font-size: 11px; color: #6B7280; text-align: right; white-space: nowrap; }
.ed-sub { grid-column: 1 / -1; font-size: 11px; color: #6B7280; padding-left: 38px; }

/* 실천 가이드 카드들 */
.practice-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
.practice-card {
  background: #F0FDF4;
  border-radius: 12px;
  padding: 12px;
  border-left: 4px solid #10B981;
}
.pc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.pc-icon { font-size: 18px; }
.pc-head h4 { font-size: 14px; font-weight: 700; color: #1F2937; margin: 0; }
.pc-meta {
  display: inline-block;
  background: #FFFFFF; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; color: #047857; font-weight: 600; margin-bottom: 6px;
}
.pc-body { font-size: 12.5px; color: #1F2937; line-height: 1.5; }
.pc-body b { color: #1F2937; font-weight: 700; }

.principle-list { display: flex; flex-direction: column; gap: 10px; }
.principle-item {
  display: flex; gap: 12px; align-items: start;
  background: #F9FAFB; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; color: #1F2937; line-height: 1.5;
}
.principle-item b { color: #1F2937; }
.pi-num {
  flex-shrink: 0; width: 26px; height: 26px;
  background: linear-gradient(135deg, #FB923C, #F97316);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}

/* 치료 모니터링 — 타임라인 */
.timeline { padding-left: 18px; border-left: 2px solid #F87171; }
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 4px;
}
.timeline-item::before {
  content: ""; position: absolute;
  left: -25px; top: 14px;
  width: 12px; height: 12px;
  background: #F87171; border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #F87171;
}
.timeline-item.ti-success::before { background: #10B981; box-shadow: 0 0 0 1px #10B981; }
.ti-date {
  font-size: 11px; font-weight: 700; color: #991B1B;
  background: #FEE2E2; padding: 4px 8px; border-radius: 6px;
  text-align: center; align-self: start;
  line-height: 1.3;
}
.ti-date span { font-size: 10px; font-weight: 400; }
.timeline-item.ti-success .ti-date { color: #065F46; background: #D1FAE5; }
.ti-body { padding: 2px 0; }
.ti-title { font-size: 13px; font-weight: 600; color: #1F2937; margin-bottom: 2px; }
.ti-title b { color: #1F2937; }
.ti-note { font-size: 11.5px; color: #6B7280; line-height: 1.4; }

/* 영양제 가이드 카드 */
.supplement-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
.supp-card {
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 4px solid #9CA3AF;
}
.supp-card.supp-bad { background: #FEE2E2; border-left-color: #DC2626; }
.supp-card.supp-warn { background: #FEF3C7; border-left-color: #F59E0B; }
.sc-head { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; color: #1F2937; }
.sc-body { font-size: 12px; color: #1F2937; line-height: 1.5; margin-bottom: 6px; }
.sc-alt { font-size: 11.5px; color: #065F46; font-weight: 600; }

/* 체크리스트 상세 — 카드 */
.cl-detail-list { display: flex; flex-direction: column; gap: 8px; }
.cld-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  background: #F9FAFB;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 4px solid #9CA3AF;
}
.cld-item.cat-식사 { border-left-color: #F87171; background: #FEF2F2; }
.cld-item.cat-운동 { border-left-color: #10B981; background: #F0FDF4; }
.cld-item.cat-수면 { border-left-color: #6366F1; background: #EEF2FF; }
.cld-item.cat-주의 { border-left-color: #F59E0B; background: #FFFBEB; }
.cld-num {
  width: 32px; height: 32px;
  background: #FFFFFF; color: #1F2937;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow);
}
.cld-title { font-size: 13.5px; font-weight: 700; color: #1F2937; margin-bottom: 2px; }
.cld-meta {
  display: inline-block;
  font-size: 10.5px; color: #6B7280;
  background: #FFFFFF; padding: 2px 8px; border-radius: 999px;
  margin-bottom: 4px;
}
.cld-why { font-size: 11.5px; color: #4B5563; line-height: 1.45; }
.cld-why b { color: #1F2937; }

.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cat-card {
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  background: #F9FAFB;
  border-top: 3px solid #9CA3AF;
}
.cat-card.cat-식사 { border-top-color: #F87171; background: #FEF2F2; }
.cat-card.cat-운동 { border-top-color: #10B981; background: #F0FDF4; }
.cat-card.cat-수면 { border-top-color: #6366F1; background: #EEF2FF; }
.cat-card.cat-주의 { border-top-color: #F59E0B; background: #FFFBEB; }
.cc-icon { font-size: 24px; margin-bottom: 4px; }
.cc-title { font-size: 12.5px; font-weight: 700; color: #1F2937; }
.cc-count { font-size: 11px; color: #6B7280; margin-top: 2px; }

/* 반응형 — 모바일 화면 작을 때 */
@media (max-width: 380px) {
  .avoid-grid { grid-template-columns: 1fr; }
  .ws-cols { grid-template-columns: 1fr; }
  .day-bar-dow, .day-bar-num { font-size: 10px; }
}

/* ===== 다크 모드 (선택) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18181B;
    --card: #27272A;
    --text: #F4F4F5;
    --text-muted: #A1A1AA;
    --border: #3F3F46;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.5);
  }
  .check-item.checked {
    background: linear-gradient(135deg, #3F1F1F 0%, #4A2424 100%);
  }
  /* 신규 가이드/주간 영양 페이지: 라이트 테마 카드를 유지하기 위해 다크 변수 무력화 */
  #nutrition-weekly, #guide-diet, #guide-exercise,
  #guide-practice, #guide-monitor, #guide-checklist {
    color: #1F2937;
  }
  /* 자식들도 다크 텍스트 강제 (var(--text) 의도치 않은 white 방지) */
  #nutrition-weekly .weekly-card, #nutrition-weekly .weekly-head-card,
  #guide-diet .guide-section, #guide-exercise .guide-section,
  #guide-practice .guide-section, #guide-monitor .guide-section,
  #guide-checklist .guide-section {
    background: #FFFFFF !important;
    color: #1F2937 !important;
  }
  /* h3, p, table, li, td 등 모든 내부 텍스트는 어둡게 */
  #nutrition-weekly h3, #nutrition-weekly h4, #nutrition-weekly p, #nutrition-weekly li,
  #nutrition-weekly td, #nutrition-weekly th, #nutrition-weekly b, #nutrition-weekly span:not([class*="trend-icon"]):not([class*="-icon"]),
  #guide-diet h3, #guide-diet h4, #guide-diet p, #guide-diet li, #guide-diet td, #guide-diet b,
  #guide-exercise h3, #guide-exercise h4, #guide-exercise p, #guide-exercise li, #guide-exercise td, #guide-exercise b,
  #guide-practice h3, #guide-practice h4, #guide-practice p, #guide-practice li, #guide-practice td, #guide-practice b,
  #guide-monitor h3, #guide-monitor h4, #guide-monitor p, #guide-monitor li, #guide-monitor td, #guide-monitor b,
  #guide-checklist h3, #guide-checklist h4, #guide-checklist p, #guide-checklist li, #guide-checklist td, #guide-checklist b {
    color: #1F2937 !important;
  }
  /* 단, 명시적으로 색이 지정된 강조 텍스트는 보존 */
  .ws-best li b { color: #059669 !important; }
  .ws-worst li b { color: #DC2626 !important; }
  .weekly-warn { color: #991B1B !important; }
  .weekly-warn-mild { color: #92400E !important; }
  .callout-info { color: #1E40AF !important; }
  .callout-success { color: #065F46 !important; }
  .callout-warning { color: #78350F !important; }
  .warn-list li { color: #78350F !important; }
  .tip-list li { color: #1E3A8A !important; }
  .tip-list li b { color: #1E3A8A !important; }
  .avoid-card .ac-head { color: #991B1B !important; }
  .avoid-card .ac-why { color: #DC2626 !important; }
  .avoid-card .ac-alt { color: #065F46 !important; }
  .ti-date { color: #991B1B !important; }
  .ti-success .ti-date { color: #065F46 !important; }
  .sc-alt { color: #065F46 !important; }
  .cld-meta { color: #6B7280 !important; }
  .cld-why { color: #4B5563 !important; }
  .cld-num { color: #1F2937 !important; }
  .md-row b { color: #DC2626 !important; }
  .ed-time, .ed-sub { color: #6B7280 !important; }
  .pc-meta { color: #047857 !important; }
  .day-bar-pct { color: #FFFFFF !important; }
  .bar-none .day-bar-pct { color: #9CA3AF !important; }
  .day-bar-col.today .day-bar-num { color: #FFFFFF !important; }
  .guide-table th { color: #4B5563 !important; background: #F9FAFB; }
}