:root {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --ink: #1c2331;
  --muted: #687184;
  --line: #e1e5ed;
  --blue: #2775d1;
  --red: #d94040;
  --red-deep: #a02828;
  --red-light: #f4a8a8;
  --green: #159c6b;
  --yellow: #e0a21a;
  --indigo: #6366f1;
  --indigo-deep: #4338ca;
  --pink: #ec407a;
  --pink-deep: #c2185b;
  --teal: #0891b2;
  --teal-deep: #085041;
  --purple: #7f77dd;
  --purple-deep: #3c3489;
  --coral: #d85a30;
  --coral-deep: #993c1d;
  --amber: #e0a21a;
  --amber-deep: #854f0b;
  --soft-blue: #e8f1ff;
  --lavender: #8b7fd1;
  --lavender-deep: #4d3a99;
  --soft-lavender: #efedf9;
  --soft-red: #ffeded;
  --soft-pink: #fbeaf0;
  --soft-amber: #fef9e6;
  --soft-green: #eaf3de;
  --soft-purple: #eeedfe;
  --soft-coral: #faece7;
  --soft-teal: #e1f5ee;
  --shadow: 0 18px 50px rgba(31, 41, 55, 0.08);
  font-family: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11";
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(21, 156, 107, 0.05), transparent 28%),
    linear-gradient(315deg, rgba(217, 64, 64, 0.05), transparent 28%),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; }
h2 { margin-bottom: 0; font-size: 18px; font-weight: 600; }
h3 { margin-bottom: 0; font-size: 15px; font-weight: 600; }

.is-hidden { display: none !important; }
.inline-icon { vertical-align: -2px; }

.section-label {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section-label.gender-label { color: var(--pink-deep); }
.section-label.activity-label { color: var(--teal-deep); }
.section-label.health-label { color: var(--amber-deep); }
.section-label.calendar-label { color: var(--indigo-deep); }
.section-label.applied-label { color: var(--red-deep); }
.section-label.coach-label { color: var(--teal-deep); }
.section-label.macros-label { color: var(--purple-deep); }
.section-label.nutrients-label { color: var(--pink-deep); }
.section-label.byfood-label, .section-label.meals-label { color: #444441; }
.section-label.analysis-label { color: var(--amber-deep); }

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.section-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  flex-shrink: 0;
}
.section-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.section-hint.pink { color: var(--pink-deep); font-size: 10px; }
.section-hint.amber { color: var(--amber-deep); font-size: 11px; margin: 0 0 12px; }

/* ── AUTH ────────────────────────────────────────────── */
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f0eae4;
}
.auth-panel {
  width: min(720px, 100%);
  display: grid;
  gap: 24px;
}
.auth-brand { display: grid; gap: 12px; justify-items: center; text-align: center; }
.auth-wordmark { width: min(240px, 70%); height: auto; display: block; border-radius: 24px; }
.auth-brand .eyebrow { color: #a89a88; letter-spacing: 2px; }
.auth-brand p:last-child {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.6;
}
.auth-grid { display: grid; gap: 16px; }
.auth-grid.social-only { grid-template-columns: minmax(280px, 420px); }
.auth-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.auth-card h2 { font-size: 22px; font-weight: 700; }
.kakao-button, .google-button {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.kakao-button {
  background: #fee500;
  color: #191600;
  border-color: #fee500;
}
.google-button {
  background: #fff;
  color: var(--ink);
}
.form-message {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ── APP SHELL ───────────────────────────────────────── */
.app-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 14px max(48px, env(safe-area-inset-bottom));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  display: grid;
  gap: 12px;
  width: 100%;
}

.topbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  align-self: flex-start;
}
.brand-icon { width: 32px; height: 32px; }
.brand-wordmark {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 10px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.user-pill {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  max-width: 120px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-button {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 0;
  cursor: pointer;
}
.text-button.outlined {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 6px;
}
.text-button.outlined:hover { background: var(--bg); }

/* ── MONTH NAV ───────────────────────────────────────── */
.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.nav-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.nav-arrow:hover { background: var(--bg); }
.month-period {
  font-weight: 600;
  font-size: 15px;
}

/* ── PANELS (shared) ─────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
}
.panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.panel-header-row h2 { font-size: 16px; }
.muted-pill {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  color: var(--muted);
}
.muted-pill.ai-pill {
  background: var(--soft-amber);
  border-color: transparent;
  color: var(--amber-deep);
  font-weight: 600;
}

/* ── ONBOARDING VIEW ─────────────────────────────────── */
.onboarding-view { display: grid; gap: 14px; }
.onboarding-intro h2 { font-size: 22px; font-weight: 700; margin: 4px 0 6px; }
.onboarding-desc {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.onboarding-desc strong { color: var(--ink); font-weight: 600; }
.onboarding-form { display: grid; gap: 14px; }

.section-basic { border-top: 3px solid var(--ink); }
.section-gender { border-top: 3px solid var(--pink); }
.section-activity { border-top: 3px solid var(--green); }
.section-health { border-top: 3px solid var(--amber); }

.panel h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }

.onboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}
.onboard-grid label,
.cycle-box label,
.condition-item label {
  display: grid;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
  min-width: 0;
}
.onboard-grid input,
.cycle-box input,
.cycle-box select,
.condition-item input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 16px;
  color: var(--ink);
  background: var(--panel);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.onboard-grid input:focus,
.cycle-box input:focus,
.cycle-box select:focus,
.condition-item input:focus {
  outline: 2px solid var(--blue);
  outline-offset: -1px;
}

.toggle-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.toggle-option {
  padding: 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.toggle-option.is-active {
  border: 2px solid var(--pink);
  background: #fce4ec;
  color: var(--pink-deep);
  font-weight: 600;
  padding: 10px;
}

.cycle-box {
  background: #fef5f8;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.cycle-arrow {
  margin: 0;
  font-size: 11px;
  color: var(--pink-deep);
  font-weight: 600;
}

.activity-pair {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 6px;
}
.activity-option {
  padding: 14px 0;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  min-width: 0;
}
.activity-option.is-active {
  border: 2px solid var(--green);
  background: var(--soft-teal);
  color: var(--teal-deep);
  font-weight: 700;
  padding: 13px 0;
}
.activity-labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.3;
  min-width: 0;
}
.activity-labels span.active { color: var(--teal-deep); font-weight: 600; }

.conditions-list { display: grid; gap: 8px; }
.condition-item {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.condition-item.is-checked {
  background: var(--soft-amber);
}
.condition-item .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
}
.condition-item.is-checked .checkbox-row {
  color: var(--amber-deep);
  font-weight: 600;
}
.condition-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--amber);
}
.condition-values {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.condition-values.two-col { grid-template-columns: 1fr 1fr; }
.condition-values label { font-size: 10px; }
.condition-values input {
  padding: 7px 9px;
  font-size: 16px;
  border-color: #f0e0a8;
}

.primary-button {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.primary-button:hover { background: var(--red-deep); }
.primary-button:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

/* ── WEEKLY: CALENDAR ────────────────────────────────── */
.weekly-view { display: grid; gap: 14px; }
.calendar-panel { border-top: 3px solid var(--indigo); }
.applied-goal-panel { border-top: 3px solid var(--red); }
.coach-panel { border-top: 3px solid var(--teal); }

.weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  margin: 6px 0 6px;
  font-weight: 600;
}
.weekday-grid .sun { color: var(--red); }

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-day {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}
.cal-day.empty {
  background: transparent;
  border: none;
  cursor: default;
}
.cal-day.met {
  background: var(--blue);
  color: #fff;
  border: none;
  font-weight: 600;
}
.cal-day.miss {
  background: var(--red);
  color: #fff;
  border: none;
  font-weight: 600;
}
.cal-day.today {
  border: 2px solid var(--ink);
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
}
.cal-day.future {
  background: #f0f1f5;
  border: none;
  color: #b4b2a9;
  cursor: default;
}

.cal-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  font-size: 10px;
  color: var(--muted);
}
.cal-legend span { display: flex; align-items: center; gap: 4px; }
.leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.leg-dot.met { background: var(--blue); }
.leg-dot.miss { background: var(--red); }
.leg-dot.today {
  background: var(--panel);
  border: 1.5px solid var(--ink);
  box-sizing: border-box;
}

/* ── APPLIED GOAL ────────────────────────────────────── */
.applied-goal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.applied-stat {
  background: var(--soft-red);
  border-radius: 8px;
  padding: 8px 10px;
}
.applied-stat p {
  margin: 0;
  font-size: 10px;
  color: var(--red-deep);
  font-weight: 600;
}
.applied-stat strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.applied-mode {
  background: var(--soft-amber);
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px;
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--amber-deep);
  line-height: 1.5;
}
.applied-mode strong { color: var(--amber-deep); font-weight: 700; }
.applied-cta {
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
}
.applied-empty {
  background: var(--bg);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── COACH ───────────────────────────────────────────── */
.weekly-table {
  background: var(--soft-teal);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  display: grid;
  gap: 5px;
}
.weekly-table .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.weekly-table .row + .row {
  border-top: 1px solid #b3e0d0;
  padding-top: 5px;
}
.weekly-table .label { color: var(--teal-deep); }
.weekly-table strong { color: var(--teal-deep); font-weight: 700; }
.coach-message {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
}

/* ── DAILY: DAY NAV ──────────────────────────────────── */
.daily-view { display: grid; gap: 14px; }
.back-button {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  align-self: start;
}
.mini-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.mini-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mini-day:hover:not(:disabled):not(.selected) { background: var(--bg); }
.mini-day .mw-dow {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.mini-day .mw-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.mini-day.met { border-color: var(--blue); }
.mini-day.met .mw-date { color: var(--blue); }
.mini-day.miss { border-color: var(--red); }
.mini-day.miss .mw-date { color: var(--red); }
.mini-day.today { border-color: var(--ink); border-width: 1.5px; }
.mini-day.future {
  cursor: not-allowed;
  background: var(--bg);
}
.mini-day.future .mw-dow,
.mini-day.future .mw-date { color: var(--line); }
.mini-day.selected {
  background: var(--ink);
  border-color: var(--ink);
}
.mini-day.selected .mw-dow,
.mini-day.selected .mw-date { color: #fff; }

.day-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── NET CALORIES CARD ───────────────────────────────── */
.net-calories-card {
  background: var(--ink);
  border-radius: 14px;
  padding: 16px;
  color: #fff;
}
.net-cal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.net-cal-header i { font-size: 14px; color: #fbbf24; }
.net-cal-header span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fbbf24;
  text-transform: uppercase;
}
.net-cal-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}
.net-cal-main strong {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.net-cal-unit { font-size: 13px; color: #94a3b8; }
.net-cal-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.net-cal-badge.good {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}
.net-cal-badge.over {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
}
.net-cal-breakdown {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0f172a;
  border-radius: 10px;
  padding: 10px 8px;
}
.nc-block {
  flex: 1;
  text-align: center;
  display: grid;
  gap: 2px;
}
.nc-block i { font-size: 14px; margin: 0 auto; }
.nc-icon-intake { color: #fb7185; }
.nc-icon-burn { color: #34d399; }
.nc-block strong {
  font-size: 14px;
  color: #fff;
}
.nc-block span {
  font-size: 9px;
  color: #94a3b8;
}
.nc-result {
  background: #fbbf24;
  border-radius: 8px;
  padding: 4px 0;
  color: var(--ink);
}
.nc-result strong { color: var(--ink); }
.nc-result span { color: var(--ink); font-weight: 600; }
.nc-result i { color: var(--ink); }
.nc-op {
  font-size: 14px;
  color: #64748b;
  font-weight: 300;
}

/* ── SCORE ROW ───────────────────────────────────────── */
.score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.score-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.score-cal { border-top: 3px solid var(--coral); }
.score-water { border-top: 3px solid #378add; }
.score-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}
.score-card-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  min-width: 0;
}
.score-card-label span { white-space: nowrap; }
.score-card-label i { font-size: 13px; }
.score-cal .score-card-label { color: var(--coral-deep); }
.score-cal .score-card-label i { color: var(--coral); }
.score-water .score-card-label { color: #185fa5; }
.score-water .score-card-label i { color: #378add; }
.score-card strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  word-break: break-all;
}
.score-card strong .unit {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}
.score-card small {
  font-size: 10px;
  display: block;
  line-height: 1.3;
}
.score-card small.warn { color: var(--red); }
.score-card small.good { color: var(--teal-deep); }

.food-add-button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 4px 10px 4px 7px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}
.food-add-button:hover { background: var(--red-deep); }
.food-add-button .plus {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.compact-actions {
  display: flex;
  gap: 3px;
}
.icon-button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.icon-button.primary {
  background: var(--ink);
  color: #fff;
  border: none;
}
.water-plus-btn { background: #378add !important; }

/* ── EXERCISE PANEL ──────────────────────────────────── */
.exercise-panel { border-top: 3px solid var(--ink); }

/* ── SAVE RECORD PANEL ───────────────────────────────── */
.save-record-panel {
  border-top: 3px solid var(--ink);
  text-align: center;
  padding: 18px 14px;
}
.save-record-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.save-record-button:hover:not(:disabled) {
  transform: translateY(-1px);
  opacity: 0.92;
}
.save-record-button:active:not(:disabled) {
  transform: translateY(0);
}
.save-record-button:disabled {
  cursor: progress;
  opacity: 0.85;
}
.save-record-button .ti {
  font-size: 18px;
}
.save-record-button.is-loading {
  background: #6b6b6b;
  border-color: #6b6b6b;
}
.save-record-button.is-loading .save-record-label::after {
  content: "...";
  display: inline-block;
  margin-left: 2px;
}
.save-record-button.is-success {
  background: #2e9e6b;
  border-color: #2e9e6b;
}
.save-record-button.is-success .save-record-label::before {
  content: "✓ ";
}
.save-record-button.is-error {
  background: #d04545;
  border-color: #d04545;
}
.save-record-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.exercise-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
  min-width: 0;
}
.exercise-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  min-width: 0;
}
.exercise-label i { font-size: 14px; }
.exercise-totals {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}
.exercise-totals strong {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.exercise-totals span {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.exercise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.exercise-cell {
  border-radius: 8px;
  padding: 8px;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.exercise-cell.color-green {
  background: var(--soft-green);
}
.exercise-cell.color-coral {
  background: var(--soft-coral);
}
.exercise-cell.color-purple {
  background: var(--soft-purple);
}
.exercise-cell.color-teal {
  background: var(--soft-teal);
}
.exercise-cell.color-pink {
  background: var(--soft-pink);
}
.exercise-cell.color-amber {
  background: var(--soft-amber);
}
.exercise-cell.color-blue {
  background: var(--soft-blue);
}
.exercise-cell.color-lavender {
  background: var(--soft-lavender);
}
.ex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
.ex-label-block {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ex-label-block i { font-size: 13px; flex-shrink: 0; }
.ex-label-block span {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-minutes {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.ex-kcal {
  font-size: 10px;
  white-space: nowrap;
}
.color-green .ex-label-block,
.color-green .ex-label-block i,
.color-green .ex-kcal { color: #3b6d11; }
.color-coral .ex-label-block,
.color-coral .ex-label-block i,
.color-coral .ex-kcal { color: var(--coral-deep); }
.color-purple .ex-label-block,
.color-purple .ex-label-block i,
.color-purple .ex-kcal { color: var(--purple-deep); }
.color-teal .ex-label-block,
.color-teal .ex-label-block i,
.color-teal .ex-kcal { color: var(--teal-deep); }
.color-pink .ex-label-block,
.color-pink .ex-label-block i,
.color-pink .ex-kcal { color: var(--pink-deep); }
.color-amber .ex-label-block,
.color-amber .ex-label-block i,
.color-amber .ex-kcal { color: var(--amber-deep); }
.color-blue .ex-label-block,
.color-blue .ex-label-block i,
.color-blue .ex-kcal { color: var(--blue); }
.color-lavender .ex-label-block,
.color-lavender .ex-label-block i,
.color-lavender .ex-kcal { color: var(--lavender-deep); }

.ex-steppers {
  display: flex;
  gap: 6px;
}
.ex-stepper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid;
  background: var(--panel);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, opacity 0.15s ease;
}
.ex-stepper:active { transform: scale(0.9); opacity: 0.85; }
.ex-stepper.plus { color: #fff; border: none; }
/* + 버튼 글자색 강제 — color-X .ex-stepper 규칙이 덮어쓰는 것 방지 */
.ex-steppers .ex-stepper.plus { color: #fff; }
.color-green .ex-stepper { border-color: #c0dd97; color: #3b6d11; }
.color-green .ex-stepper.plus { background: #639922; }
.color-coral .ex-stepper { border-color: #f5c4b3; color: var(--coral-deep); }
.color-coral .ex-stepper.plus { background: var(--coral); }
.color-purple .ex-stepper { border-color: #cecbf6; color: var(--purple-deep); }
.color-purple .ex-stepper.plus { background: #534ab7; }
.color-teal .ex-stepper { border-color: #9fe1cb; color: var(--teal-deep); }
.color-teal .ex-stepper.plus { background: #1d9e75; }
.color-pink .ex-stepper { border-color: #f4c6d5; color: var(--pink-deep); }
.color-pink .ex-stepper.plus { background: var(--pink); }
.color-amber .ex-stepper { border-color: #f0d589; color: var(--amber-deep); }
.color-amber .ex-stepper.plus { background: var(--amber); }
.color-blue .ex-stepper { border-color: #b6d3f3; color: var(--blue); }
.color-blue .ex-stepper.plus { background: var(--blue); }
.color-lavender .ex-stepper { border-color: #cfc8ea; color: var(--lavender-deep); }
.color-lavender .ex-stepper.plus { background: var(--lavender); }

/* ── MEALS ───────────────────────────────────────────── */
.meals-panel { border-top: 3px solid #444441; }
.meal-list { display: grid; gap: 6px; }
.meal-list .meal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 12px;
  gap: 8px;
}
.meal-list .meal-row.warn { color: var(--red); }
.meal-list .meal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-list .meal-kcal { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.meal-list .meal-row.warn .meal-kcal { color: var(--red); }
.meal-list .meal-remove {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid #d8d6cc;
  background: #fff;
  color: #b34;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.08s ease;
}
.meal-list .meal-remove:active {
  background: #fde8e8;
  transform: scale(0.9);
}
.meal-empty {
  padding: 20px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  border-radius: 8px;
}

/* ── ANALYSIS ────────────────────────────────────────── */
.analysis-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 4px 2px;
  border-top: 1px dashed var(--line);
}
.analysis-section-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 0;
}
.analysis-section-header .inline-icon { font-size: 15px; color: var(--amber); margin-right: 4px; }
.analysis-section-header .ai-pill { flex-shrink: 0; }

.macros-panel { border-top: 3px solid var(--purple); }
.nutrients-panel { border-top: 3px solid #d4537e; }
.byfood-panel { border-top: 3px solid #444441; }

.macros-row { display: grid; gap: 4px; margin-bottom: 10px; }
.macros-row:last-child { margin-bottom: 0; }
.macros-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.macros-row-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.macros-row-label i { font-size: 13px; }
.macros-row.protein .macros-row-label { color: var(--pink-deep); }
.macros-row.protein .macros-row-label i { color: #d4537e; }
.macros-row.carbs .macros-row-label { color: var(--amber-deep); }
.macros-row.carbs .macros-row-label i { color: #ef9f27; }
.macros-row.fat .macros-row-label { color: var(--teal-deep); }
.macros-row.fat .macros-row-label i { color: #1d9e75; }
.macros-row-stats { color: var(--muted); font-size: 11px; }
.macros-row-stats strong { color: var(--ink); }
.macros-row-stats strong.over { color: var(--red); }
.macros-bar-track {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.macros-bar-fill {
  height: 100%;
  border-radius: 4px;
}
.macros-row.protein .macros-bar-track { background: var(--soft-pink); }
.macros-row.protein .macros-bar-fill { background: #d4537e; }
.macros-row.carbs .macros-bar-track { background: #faeeda; }
.macros-row.carbs .macros-bar-fill { background: #ef9f27; }
.macros-row.fat .macros-bar-track { background: var(--soft-teal); }
.macros-row.fat .macros-bar-fill { background: #1d9e75; }
.macros-target-line {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--amber-deep);
}
.macros-row-hint {
  margin: 0;
  font-size: 10px;
  color: var(--red-deep);
}

.nutrients-sub {
  margin: 0 0 10px;
  font-size: 10px;
  color: var(--muted);
}
.nutrients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.nutrient-cell {
  border-radius: 8px;
  padding: 9px 10px;
}
.nutrient-cell.sugar { background: var(--soft-pink); }
.nutrient-cell.sodium { background: var(--soft-purple); }
.nutrient-cell.cholesterol { background: var(--soft-coral); }
.nutrient-cell.satfat { background: #f1efe8; }
.nutrient-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}
.nutrient-top i { font-size: 13px; }
.nutrient-top span.label {
  font-size: 10px;
  font-weight: 600;
}
.nutrient-cell.sugar .nutrient-top i { color: #d4537e; }
.nutrient-cell.sugar .nutrient-top span.label { color: var(--pink-deep); }
.nutrient-cell.sodium .nutrient-top i { color: var(--purple); }
.nutrient-cell.sodium .nutrient-top span.label { color: var(--purple-deep); }
.nutrient-cell.cholesterol .nutrient-top i { color: var(--coral); }
.nutrient-cell.cholesterol .nutrient-top span.label { color: var(--coral-deep); }
.nutrient-cell.satfat .nutrient-top i { color: #5f5e5a; }
.nutrient-cell.satfat .nutrient-top span.label { color: #444441; }
.nutrient-status {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
}
.nutrient-status.over { background: var(--red); }
.nutrient-status.warn { background: var(--amber); }
.nutrient-status.ok { background: var(--green); }
.nutrient-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  display: block;
}
.nutrient-value .unit {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
}
.nutrient-bar {
  height: 5px;
  background: var(--panel);
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}
.nutrient-bar-fill { height: 100%; }
.nutrient-cell.sugar .nutrient-bar-fill { background: #d4537e; }
.nutrient-cell.sodium .nutrient-bar-fill { background: var(--purple); }
.nutrient-cell.cholesterol .nutrient-bar-fill { background: var(--coral); }
.nutrient-cell.satfat .nutrient-bar-fill { background: #5f5e5a; }
.nutrient-cap {
  display: block;
  margin-top: 3px;
  font-size: 9px;
}
.nutrient-cell.sugar .nutrient-cap { color: var(--pink-deep); }
.nutrient-cell.sodium .nutrient-cap { color: var(--purple-deep); }
.nutrient-cell.cholesterol .nutrient-cap { color: var(--coral-deep); }
.nutrient-cell.satfat .nutrient-cap { color: #444441; }

.byfood-list { display: grid; gap: 8px; }
.byfood-item {
  background: var(--bg);
  border-radius: 8px;
  padding: 9px 10px;
}
.byfood-item.warn {
  background: var(--soft-red);
  border-left: 3px solid var(--red);
}
.byfood-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.byfood-name {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.byfood-kcal {
  font-size: 11px;
  color: var(--muted);
}
.byfood-remove {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid #d8d6cc;
  background: #fff;
  color: #b34;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.08s ease;
}
.byfood-remove:active {
  background: #fde8e8;
  transform: scale(0.9);
}
.byfood-item.warn .byfood-kcal {
  color: var(--red);
  font-weight: 600;
}
.byfood-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 9px;
}
.byfood-chip {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
}
.byfood-chip.protein { background: var(--soft-pink); color: var(--pink-deep); border: none; }
.byfood-chip.carbs { background: #faeeda; color: var(--amber-deep); border: none; }
.byfood-chip.fat { background: var(--soft-teal); color: var(--teal-deep); border: none; }
.byfood-chip.sugar-alert { background: #d4537e; color: #fff; border: none; font-weight: 600; }
.byfood-chip.sodium-alert { background: var(--soft-purple); color: var(--purple-deep); border: none; font-weight: 600; }
.byfood-chip.satfat-alert { background: #5f5e5a; color: #fff; border: none; font-weight: 600; }

/* ── EDITABLE NUMBERS (영양 기여도 인라인 편집) ────────── */
.editable-number {
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  padding: 0 1px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.editable-number:hover {
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
}
.editable-number:focus {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 3px;
}
.editable-number-input {
  width: 60px;
  padding: 2px 4px;
  border: 1.5px solid var(--amber);
  border-radius: 4px;
  background: #fffbed;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  text-align: center;
  -moz-appearance: textfield;
  -webkit-appearance: none;
}
.editable-number-input::-webkit-outer-spin-button,
.editable-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.byfood-save-bar {
  position: sticky;
  bottom: 0;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--amber);
  color: var(--ink);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  animation: slideUp 0.25s ease;
}
@keyframes slideUp {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.byfood-save-hint {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.byfood-save-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.byfood-cancel,
.byfood-save {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.08s ease;
}
.byfood-cancel {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.byfood-save {
  background: var(--ink);
  border: 1.5px solid var(--ink);
  color: #fff;
}
.byfood-save:active,
.byfood-cancel:active { transform: scale(0.96); opacity: 0.85; }

/* 알림 없는 영양 칩 (편집 가능하도록 항상 표시) */
.byfood-chip.sugar-neutral,
.byfood-chip.sodium-neutral,
.byfood-chip.satfat-neutral {
  background: #f3f1e3;
  color: var(--muted);
  border: 1px solid #ddd9c4;
  font-weight: 500;
}

/* ── MY FOODS BUTTON + MODAL ─────────────────────────── */
/* ── 음식 입력 빠른 버튼 2×2 그리드 ─────────────────── */
.meal-quick-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.meal-quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  border: 2px solid var(--ink);
  background: var(--panel);
  color: var(--ink);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.08s ease;
}
.meal-quick-btn:active { transform: scale(0.97); opacity: 0.82; }
.meal-quick-btn .ti { font-size: 16px; }
.meal-quick-btn--ai {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.meal-quick-btn--ai:active { background: #333; }

/* ── 최근/자주 먹는 음식 공통 리스트 ───────────────── */
.quick-foods-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quick-food-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f6f5ec;
  border-radius: 10px;
}
.quick-food-info {
  flex: 1;
  min-width: 0;
}
.quick-food-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-food-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.quick-food-add-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-food-add-btn:active { transform: scale(0.9); opacity: 0.85; }
.quick-food-rank {
  font-size: 12px;
  font-weight: 800;
  color: var(--amber-deep);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

/* 공유 버튼 */
.share-button {
  color: var(--ink);
  font-weight: 700;
}


.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: fadeIn 0.15s ease;
}
.modal-overlay.is-hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--panel);
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
  border-bottom: 1px solid #e8e7e0;
}
.modal-header h2 {
  font-size: 18px;
  margin: 0;
  color: var(--ink);
}
.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.modal-close:hover { background: #f0eee5; color: var(--ink); }
.modal-hint {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 20px 12px;
  margin: 0;
  line-height: 1.4;
}

.my-foods-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.my-foods-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 32px 16px;
  line-height: 1.6;
}
.my-foods-empty .ti { vertical-align: middle; font-size: 16px; }

.my-food-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px;
  background: #f6f5ec;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.my-food-item:active { transform: scale(0.98); background: #ece9d8; }
.my-food-info { flex: 1; min-width: 0; }
.my-food-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-food-stats {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.my-food-delete {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.my-food-delete:hover { background: #fae9e9; color: #b73333; border-color: #f0c4c4; }

/* meal-card에 추가할 즐겨찾기 별 버튼 */
.meal-star {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease;
}
.meal-star:hover { color: var(--amber-deep); border-color: var(--amber); }
.meal-star.is-saved { background: var(--soft-amber); color: var(--amber-deep); border-color: var(--amber); }

/* ── OCR (사진 분석) 모달 ───────────────────────────── */
.ocr-form {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ocr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.ocr-field > span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.ocr-field input[type="text"],
.ocr-field input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.ocr-field input[type="number"]::-webkit-outer-spin-button,
.ocr-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ocr-field input:focus {
  outline: none;
  border-color: var(--ink);
}
.ocr-field-row {
  display: flex;
  gap: 8px;
}
.ocr-with-unit {
  position: relative;
}
.ocr-with-unit input {
  padding-right: 36px !important;
}
.ocr-unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}
.ocr-actions {
  display: flex;
  gap: 6px;
  padding: 12px 20px 16px;
  border-top: 1px solid #e8e7e0;
}
.ocr-cancel,
.ocr-add-meal,
.ocr-save-favorite {
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, transform 0.08s;
  border: 1.5px solid var(--ink);
}
.ocr-cancel {
  background: transparent;
  color: var(--ink);
}
.ocr-add-meal {
  background: var(--ink);
  color: #fff;
}
.ocr-save-favorite {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
.ocr-cancel:active,
.ocr-add-meal:active,
.ocr-save-favorite:active {
  transform: scale(0.96);
  opacity: 0.85;
}
.ocr-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* OCR 로딩 상태 (분석 중) */
.ocr-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
}
.ocr-loading::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid #ddd;
  border-top-color: var(--ink);
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: ocr-spin 0.8s linear infinite;
}
@keyframes ocr-spin {
  to { transform: rotate(360deg); }
}

.ocr-error {
  background: #fae9e9;
  border: 1px solid #f0c4c4;
  color: #b73333;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin: 12px 20px;
}

/* ── 배틀 모드 ────────────────────────────────────── */
.battle-section {
  padding: 12px 20px;
  border-top: 1px solid #e8e7e0;
}
.battle-section:first-of-type { border-top: none; }
.battle-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}
.battle-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
  margin: 0;
}
.battle-ranking {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.battle-rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f6f5ec;
  border-radius: 10px;
  font-size: 14px;
}
.battle-rank-item.is-me { background: #fdf3d9; border: 1.5px solid var(--amber); }
.battle-rank-medal {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.battle-rank-name {
  flex: 1;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-rank-streak {
  font-weight: 700;
  color: var(--amber-deep);
  font-size: 14px;
  white-space: nowrap;
}
.battle-rank-streak .days { font-size: 13px; color: var(--ink); }

.battle-search-wrap {
  display: flex;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
  padding: 8px 0;
}
.battle-search-wrap input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
.battle-search-wrap input:focus {
  outline: none;
  border-color: var(--ink);
}
.battle-search-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.battle-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: #f6f5ec;
  border-radius: 8px;
  font-size: 13px;
}
.battle-search-info {
  flex: 1;
  min-width: 0;
}
.battle-search-name {
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-search-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.battle-search-add-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.battle-search-add-btn:active { transform: scale(0.92); opacity: 0.85; }
.battle-search-add-btn:disabled { background: #ccc; cursor: not-allowed; }
.battle-search-empty {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 12px 0;
}

.battle-add-form {
  display: flex;
  gap: 6px;
}
.battle-add-form input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.battle-add-form input:focus {
  outline: none;
  border-color: var(--ink);
}
.battle-add-button {
  padding: 9px 14px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.battle-add-button:active { transform: scale(0.96); opacity: 0.85; }
.battle-add-hint {
  font-size: 12px;
  margin: 6px 0 0;
  min-height: 16px;
}
.battle-add-hint.error { color: #b73333; }
.battle-add-hint.success { color: #2d7036; }

.battle-friends {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 10px;
  padding-top: 4px;
  border-top: 1px solid #eceadf;
}
.battle-friend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f6f5ec;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}
.battle-friend-item:active { background: #ece9d8; transform: scale(0.99); }
.battle-friend-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.battle-friend-name { font-weight: 700; color: var(--ink); }
.battle-friend-email { color: var(--muted); font-size: 11px; }
.battle-friend-remove { color: #b73333; font-weight: 700; flex-shrink: 0; }

/* ── DISEASE CARD ──────────────────────────────────── */
.disease-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.disease-container.is-hidden { display: none; }
.disease-card {
  background: var(--ink);
  border-radius: 14px;
  padding: 16px;
  color: #fff;
}
.disease-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.disease-header i { font-size: 14px; color: #fbbf24; }
.disease-header span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fbbf24;
  text-transform: uppercase;
}
.disease-card .panel-header-row h2 {
  color: #fff;
  font-size: 15px;
}
.disease-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  color: #fff;
}
.disease-badge.warn { background: #f87171; }
.disease-badge.ok { background: #10b981; }
.disease-badge.attention { background: var(--amber); }
.disease-metrics {
  background: #0f172a;
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 11px;
}
.disease-metrics .row {
  display: flex;
  justify-content: space-between;
}
.disease-metrics .row + .row {
  border-top: 1px solid #334155;
  padding-top: 7px;
}
.disease-metrics .label { color: #94a3b8; }
.disease-metrics strong.bad { color: #f87171; }
.disease-metrics strong.warn { color: #fbbf24; }
.disease-metrics strong.good { color: #34d399; }
.disease-message {
  margin: 0;
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.6;
}
.disease-message strong { color: #fbbf24; }

/* ── CHAT DIALOG ─────────────────────────────────────── */
/* ── INLINE MEAL ENTRY PANEL ─────────────────────────── */
.meal-entry-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.meal-entry-header {
  display: grid;
  gap: 0;
}
.meal-entry-header h3 { font-size: 14px; font-weight: 700; margin: 2px 0 0; }
.meal-entry-guide {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: 8px 0 12px;
  letter-spacing: -0.2px;
}
.meal-entry-guide strong { color: var(--ink); font-weight: 700; }
.meal-entry-log {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 6px;
}
.meal-entry-log:empty { display: none; }
.meal-entry-form {
  display: grid;
  gap: 8px;
}
.meal-entry-form.is-hidden { display: none; }
.meal-entry-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
  min-height: 64px;
  max-height: 140px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  box-sizing: border-box;
}
.analysis-result {
  display: grid;
  gap: 6px;
  color: var(--ink);
}
.analysis-result h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.analysis-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.analysis-grid span {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.analysis-result > p {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.analysis-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.apply-meal-button {
  flex: 1;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cancel-meal-button {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.wide-button {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

/* ── DESKTOP ─────────────────────────────────────────── */
@media (min-width: 720px) {
  .app-shell { padding: 24px 24px 80px; gap: 18px; }
  .brand-icon { width: 38px; height: 38px; }
  .brand-wordmark { width: 50px; height: 50px; }
  .topbar { padding: 0 4px; align-items: flex-start; }
  .month-period { font-size: 17px; }
  .cal-day { font-size: 14px; }
  .panel { padding: 18px 20px; }
  h2 { font-size: 20px; }
  .onboard-grid input, .cycle-box input, .cycle-box select { font-size: 14px; }
  .score-card strong { font-size: 22px; }
  .net-cal-main strong { font-size: 38px; }
  .exercise-grid { grid-template-columns: repeat(4, 1fr); }
  .nutrients-grid { grid-template-columns: repeat(4, 1fr); }
  .applied-goal-body { grid-template-columns: repeat(3, 1fr); }
}

/* ── 토스트 메시지 ─────────────────────────────────── */
#toast-msg {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 28, 20, 0.88);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}
#toast-msg.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── AI 목표 분석 모달 ─────────────────────────────── */
.goals-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 20px;
  color: var(--muted);
  font-size: 14px;
}
.goals-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e0dfd6;
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 맞춤 목표 분석 모달 — 세련된 디자인 ──────────── */
#goals-modal .modal-card {
  max-width: 340px;
  max-height: 88vh;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}
#goals-modal .modal-header {
  padding: 18px 20px 14px;
  border-bottom: none;
}
#goals-modal .modal-header h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
}
#goals-modal .modal-close {
  font-size: 22px;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.goals-reasoning {
  margin: 0 20px 14px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(135deg, #f9f7ed 0%, #f5f2e1 100%);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: #4a4a45;
  letter-spacing: -0.2px;
}

.goals-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px;
}
.goals-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fafaf6;
  border-radius: 10px;
  transition: background 0.15s ease;
}
.goals-field:hover { background: #f5f4ec; }
.goals-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
  flex: 1;
  min-width: 0;
}
.goals-field input {
  width: 78px;
  padding: 8px 10px;
  border: 1.5px solid #e0dfd6;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  text-align: center;
  background: #fff;
  letter-spacing: -0.3px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -moz-appearance: textfield;
}
.goals-field input::-webkit-outer-spin-button,
.goals-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.goals-field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(30, 28, 20, 0.08);
}

.goals-edit-hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin: 14px 20px 4px;
  letter-spacing: -0.1px;
}

.goals-actions {
  display: flex;
  gap: 8px;
  padding: 8px 20px 20px;
}
.goals-back-btn {
  flex: 1;
  padding: 12px 8px;
  border: 1.5px solid #d8d6cb;
  background: transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  color: var(--ink);
  letter-spacing: -0.2px;
  transition: background 0.15s ease;
}
.goals-back-btn:active {
  background: #f0eee4;
  transform: scale(0.98);
}
.goals-apply-btn {
  flex: 1.7;
  padding: 12px 8px;
  border: none;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  letter-spacing: -0.2px;
  box-shadow: 0 2px 8px rgba(30, 28, 20, 0.15);
  transition: opacity 0.15s ease, transform 0.08s ease;
}
.goals-apply-btn:active { opacity: 0.88; transform: scale(0.98); }

.goals-result { padding: 0; }

.goals-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
}
.goals-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e8e7e0;
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.goals-error {
  padding: 32px 24px;
  text-align: center;
  color: #b73333;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* 경고 배지 (감량 속도 너무 빠를 때) */
.goals-warning {
  margin: 0 20px 12px;
  padding: 11px 14px 11px 14px;
  background: #fef0eb;
  border-left: 3px solid #d94a2e;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: #8a2e1a;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.goals-warning strong { color: #6a4310; }

/* ── 배틀 초대 버튼 ─────────────────────────────────── */
.battle-invite-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.2px;
  box-shadow: 0 2px 10px rgba(30, 28, 20, 0.18);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.08s ease;
}
.battle-invite-btn:active { opacity: 0.88; transform: scale(0.98); }
.battle-invite-btn .ti { font-size: 18px; }
.battle-invite-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 8px 2px 0;
  letter-spacing: -0.2px;
}
.battle-invite-hint strong { color: var(--ink); font-weight: 700; }

/* 검색은 접이식(details)으로 — 보조 기능 */
.battle-search-details summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.battle-search-details summary::-webkit-details-marker { display: none; }
.battle-search-details summary::before {
  content: "▸ ";
  color: var(--muted);
}
.battle-search-details[open] summary::before { content: "▾ "; }

/* ── 배틀 VS 카드 ───────────────────────────────────── */
.bvs-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #f6f5ec;
  border-radius: 14px;
  padding: 14px 8px;
  margin-bottom: 10px;
}
.bvs-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border-radius: 10px;
  transition: background 0.2s ease;
  min-width: 0;
}
.bvs-side.is-winning {
  background: linear-gradient(180deg, #fdf3d9 0%, #fbeec0 100%);
}
.bvs-trophy {
  height: 24px;
  font-size: 20px;
  line-height: 1;
}
.bvs-avatar {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.bvs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bvs-avatar-initial {
  color: #fff;
  font-weight: 800;
  font-size: 22px;
}
.bvs-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.bvs-me-tag {
  font-size: 10px;
  background: var(--ink);
  color: #fff;
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 700;
}
.bvs-days {
  font-size: 13px;
  font-weight: 800;
  color: var(--amber-deep);
}
.bvs-medals {
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  word-break: break-all;
}
.bvs-medal-more {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}
.bvs-medals-empty {
  font-size: 10px;
  color: var(--muted);
}
.bvs-divider {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #c0392b;
  padding: 0 4px;
  letter-spacing: -0.5px;
}

/* ── 응원 코멘트 ────────────────────────────────────── */
.battle-comment-form {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.battle-comment-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  min-width: 0;
}
.battle-comment-form input:focus { outline: none; border-color: var(--ink); }
.battle-comment-send {
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.battle-comment-send:active { opacity: 0.85; transform: scale(0.97); }
.battle-comment-send:disabled { background: #ccc; }

.battle-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 2px;
}
.bchat-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.bchat-row.is-mine {
  flex-direction: row-reverse;
}
.bchat-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  min-width: 0;
}
.bchat-row.is-mine .bchat-bubble-wrap { align-items: flex-end; }
.bchat-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 2px;
  padding-left: 4px;
}
.bchat-bubble {
  padding: 9px 13px;
  background: #f0eee4;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  word-break: break-word;
}
.bchat-row.is-mine .bchat-bubble {
  background: var(--ink);
  color: #fff;
}
.bchat-time {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  padding: 0 4px;
}

/* ── 배틀 모달 스크롤 수정 ──────────────────────────── */
/* 카드 전체를 스크롤 가능하게, 헤더는 상단 고정 */
#battle-modal .modal-card {
  max-height: 88vh;
  overflow-y: auto;
}
#battle-modal .modal-header {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 10;
}

/* ── 코멘트 수정/삭제 버튼 ──────────────────────────── */
.bchat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  padding: 0 4px;
}
.bchat-row.is-mine .bchat-meta {
  flex-direction: row-reverse;
}
.bchat-actions {
  display: flex;
  gap: 6px;
}
.bchat-edit, .bchat-delete {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
}
.bchat-edit:active { color: var(--ink); }
.bchat-delete:active { color: #c0392b; }

/* ── 유저 메뉴 드롭다운 ─────────────────────────────── */
.user-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.user-menu-wrap .user-pill {
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 130px;
  z-index: 100;
  overflow: hidden;
}
.user-menu.is-hidden { display: none; }
.user-menu-item {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.user-menu-item:active { background: #f5f4ef; }
.user-menu-item + .user-menu-item { border-top: 1px solid #f0efe8; }
.user-menu-item.danger { color: #c0392b; font-size: 12px; }