/* ReNH 영양사 메뉴 관리 프로그램 - 디자인 시스템 */
/* 메인 그린 팔레트: #1a4731 → #166534 → #16a34a → #22c55e */

:root {
  --green-950: #1a4731;
  --green-800: #166534;
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-100: #dcfce7;
  --green-50:  #f0fdf4;
  
  --sidebar-w: 240px;
  --header-h:  56px;
  --radius:    8px;
  --shadow:    0 1px 3px rgba(0,0,0,.12);
  --shadow-md: 0 4px 12px rgba(0,0,0,.15);
}

* { box-sizing: border-box; }

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #1e293b;
  background: #f8fafc;
  margin: 0;
  padding: 0;
}

/* ══════════════════════════════════════════
   레이아웃
══════════════════════════════════════════ */
#app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--green-950);
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-logo {
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.sidebar-logo h1 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}
.sidebar-logo small {
  font-size: 11px;
  color: rgba(255,255,255,.5);
}

.sidebar-menu { padding: 8px 0; flex: 1; }

.sidebar-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  padding: 12px 16px 4px;
  text-transform: uppercase;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  color: rgba(255,255,255,.7);
  border-radius: 0;
  transition: all .15s;
  font-size: 13px;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.sidebar-item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.sidebar-item.active {
  background: rgba(34,197,94,.15);
  color: #fff;
  border-left-color: var(--green-500);
  font-weight: 600;
}
.sidebar-item .fa, .sidebar-item .fas, .sidebar-item .far {
  width: 16px;
  text-align: center;
  font-size: 13px;
}

/* ── 메인 콘텐츠 ── */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}
.topbar h2 {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  flex: 1;
}
.topbar .badge-today {
  font-size: 12px;
  background: var(--green-100);
  color: var(--green-800);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ══════════════════════════════════════════
   카드 & 패널
══════════════════════════════════════════ */
.card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  flex: 1;
}
.card-body { padding: 16px 18px; }

/* ══════════════════════════════════════════
   버튼
══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--green-600);
  color: #fff;
}
.btn-primary:hover { background: var(--green-800); }

.btn-secondary {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.btn-secondary:hover { background: #e2e8f0; }

.btn-danger {
  background: #fee2e2;
  color: #dc2626;
}
.btn-danger:hover { background: #fecaca; }

.btn-warning {
  background: #fef9c3;
  color: #854d0e;
}
.btn-warning:hover { background: #fef08a; }

.btn-info {
  background: #dbeafe;
  color: #1d4ed8;
}
.btn-info:hover { background: #bfdbfe; }

.btn-success {
  background: #166534;
  color: #fff;
}
.btn-success:hover { background: #15803d; }

.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 15px; }
.btn-icon { padding: 6px 8px; }

/* ══════════════════════════════════════════
   폼 요소
══════════════════════════════════════════ */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
}
.form-label .required { color: #ef4444; margin-left: 2px; }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  color: #1e293b;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
.form-textarea { resize: vertical; min-height: 80px; }

.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check input { width: 15px; height: 15px; }

/* ══════════════════════════════════════════
   테이블
══════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data-table th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
table.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
table.data-table tr:hover td { background: #f8fafc; }
table.data-table tr.selected td { background: var(--green-50); }

/* ══════════════════════════════════════════
   배지 / 태그
══════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green  { background: var(--green-100); color: var(--green-800); }
.badge-red    { background: #fee2e2; color: #dc2626; }
.badge-orange { background: #ffedd5; color: #c2410c; }
.badge-blue   { background: #dbeafe; color: #1d4ed8; }
.badge-purple { background: #ede9fe; color: #6d28d9; }
.badge-gray   { background: #f1f5f9; color: #475569; }
.badge-yellow { background: #fef9c3; color: #854d0e; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.tag-exclude { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.tag-allergy { background: #fef9c3; color: #92400e; border: 1px solid #fde047; }
.tag-spice   { background: #fff1f2; color: #be123c; border: 1px solid #fda4af; }
.tag-custom  { background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; cursor: pointer; }
.tag-custom:hover { background: #ddd6fe; }
.exclude-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* ══════════════════════════════════════════
   메뉴 카드 (메뉴 DB 뷰)
══════════════════════════════════════════ */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.menu-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.menu-card:hover {
  border-color: var(--green-500);
  box-shadow: 0 0 0 2px rgba(34,197,94,.2);
  transform: translateY(-1px);
}
.menu-card.selected {
  border-color: var(--green-600);
  background: var(--green-50);
  box-shadow: 0 0 0 2px rgba(22,163,74,.3);
}
.menu-card .name {
  font-weight: 700;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 6px;
}
.menu-card .meta {
  font-size: 12px;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.menu-card .flags {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.menu-card .add-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-600);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.menu-card .add-btn:hover { background: var(--green-800); }

/* ── 메뉴 카드 인라인 편집 패널 ── */
.menu-card-editable { cursor: default !important; }
.menu-card-editable:hover {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,.18);
  transform: translateY(-1px);
}
.mc-quick-edit select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 16px !important;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mc-quick-edit select:hover { filter: brightness(.95); }
.mc-quick-edit select:focus { outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,.3); }

/* ══════════════════════════════════════════
   주간 메뉴 그리드
══════════════════════════════════════════ */
.week-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 12px;
}
.week-grid .cell {
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 8px;
  min-height: 80px;
  position: relative;
}
.week-grid .cell:last-child { border-right: none; }
.week-grid .header-cell {
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
  font-size: 12px;
  min-height: auto;
  padding: 8px;
  text-align: center;
  border-bottom: 2px solid #e2e8f0;
}
.week-grid .time-cell {
  background: var(--green-950);
  color: rgba(255,255,255,.8);
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.week-grid .menu-slot {
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  color: var(--green-800);
  margin-bottom: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.week-grid .menu-slot.conflict {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.week-grid .menu-slot .remove-slot {
  color: #94a3b8;
  font-size: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.week-grid .menu-slot .remove-slot:hover { color: #ef4444; }
.week-grid .cell .slot-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.week-grid .cell .add-slot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 4px;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  margin-top: 2px;
}
.week-grid .cell .add-slot-btn:hover {
  background: var(--green-50);
  border-color: var(--green-500);
  color: var(--green-600);
}

/* ══════════════════════════════════════════
   검색 & 필터
══════════════════════════════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.search-input-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
}
.search-input-wrap .form-input {
  padding-left: 32px;
}

/* ══════════════════════════════════════════
   환자 카드
══════════════════════════════════════════ */
.patient-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: all .15s;
}
.patient-card:hover {
  border-color: var(--green-500);
  box-shadow: var(--shadow-md);
}
.patient-card .patient-name {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}
.patient-card .patient-info {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}
.exclude-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* ══════════════════════════════════════════
   법적 서류 섹션
══════════════════════════════════════════ */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.legal-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all .15s;
}
.legal-card:hover { box-shadow: var(--shadow-md); border-color: var(--green-500); }
.legal-card .card-top {
  background: linear-gradient(135deg, var(--green-950), var(--green-800));
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.legal-card .icon { font-size: 22px; opacity: .9; }
.legal-card .card-top h4 { margin: 0; font-size: 14px; font-weight: 700; }
.legal-card .card-top small { font-size: 11px; opacity: .7; margin-top: 2px; display: block; }
.legal-card .card-bot {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.legal-card .status-ok { color: var(--green-600); font-size: 12px; font-weight: 600; }
.legal-card .status-warn { color: #ea580c; font-size: 12px; font-weight: 600; }

/* ══════════════════════════════════════════
   모달
══════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-box.modal-lg { max-width: 900px; }
.modal-box.modal-xl { max-width: 1200px; }
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--green-950), var(--green-800));
  color: #fff;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s;
}
.modal-close:hover { background: rgba(255,255,255,.15); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   대시보드 통계 카드
══════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-card .icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.stat-card.green .icon-box { background: var(--green-100); color: var(--green-800); }
.stat-card.blue .icon-box { background: #dbeafe; color: #1d4ed8; }
.stat-card.orange .icon-box { background: #ffedd5; color: #c2410c; }
.stat-card.purple .icon-box { background: #ede9fe; color: #6d28d9; }
.stat-card .val { font-size: 26px; font-weight: 800; color: #1e293b; line-height: 1; }
.stat-card .lbl { font-size: 12px; color: #64748b; margin-top: 3px; }

/* ══════════════════════════════════════════
   탭
══════════════════════════════════════════ */
.tabs {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 16px;
  gap: 2px;
}
.tab {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
  border-radius: 6px 6px 0 0;
}
.tab:hover { color: var(--green-600); background: var(--green-50); }
.tab.active { color: var(--green-700); border-bottom-color: var(--green-600); background: var(--green-50); }

/* ══════════════════════════════════════════
   알림 / 토스트
══════════════════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: #1e293b;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: slideIn .2s ease;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.success { background: var(--green-800); }
.toast.error { background: #dc2626; }
.toast.warning { background: #d97706; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ══════════════════════════════════════════
   충돌 경고
══════════════════════════════════════════ */
.conflict-box {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: #92400e;
}
.conflict-box .conflict-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: #c2410c;
}
.conflict-box ul { margin: 0; padding-left: 16px; }
.conflict-box li { margin-bottom: 3px; }

/* ══════════════════════════════════════════
   인쇄용
══════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .btn, .search-bar { display: none !important; }
  .main-area { overflow: visible; }
  .content-area { overflow: visible; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  body { background: #fff; }
}

/* ══════════════════════════════════════════
   반응형
══════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { position: fixed; width: 240px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .content-area { padding: 12px; }
}

/* ══════════════════════════════════════════
   유틸리티
══════════════════════════════════════════ */
.text-green  { color: var(--green-600); }
.text-red    { color: #dc2626; }
.text-muted  { color: #64748b; }
.fw-bold     { font-weight: 700; }
.mt-4        { margin-top: 4px; }
.mb-12       { margin-bottom: 12px; }
.gap-8       { gap: 8px; }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.w-full      { width: 100%; }
.hidden      { display: none !important; }

/* 스크롤바 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 스피너 */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--green-600);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  z-index: 10;
}

/* 메뉴 상세 팝오버 */
.recipe-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
}

/* 상태 인디케이터 */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.green  { background: var(--green-500); }
.status-dot.red    { background: #ef4444; }
.status-dot.orange { background: #f97316; }
.status-dot.gray   { background: #94a3b8; }

/* ══════════════════════════════════════════
   치료식 판정 UI 스타일
   ══════════════════════════════════════════ */

/* 판정 배지 */
.treat-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
}
.treat-pass    { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.treat-caution { background: #fef9c3; color: #a16207; border: 1px solid #fde047; }
.treat-exclude { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

/* 제외/주의 슬롯 테두리 강조 */
.menu-slot.slot-exclude {
  border-color: #fca5a5 !important;
  background: #fff5f5 !important;
}
.menu-slot.slot-caution {
  border-color: #fde68a !important;
  background: #fffbeb !important;
}

/* 대체 미니 버튼 */
.btn-sub-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #dc2626;
  color: #dc2626;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn-sub-mini:hover {
  background: #dc2626;
  color: #fff;
}

/* 토글 스위치 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 22px;
  transition: .3s;
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: .3s;
}
.toggle-switch input:checked + .toggle-slider { background: #0ea5e9; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

/* 치료식 패널 애니메이션 */
#treatment-panel {
  transition: background .3s, border-color .3s;
}

/* ── 슬롯 치료식 하이라이트 ──────────────────────────────── */
.slot-exclude {
  border-left: 3px solid #dc2626 !important;
}
.slot-caution {
  border-left: 3px solid #f59e0b !important;
}

/* ── 대체메뉴 관리 테이블 ───────────────────────────────── */
.sub-table thead th {
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 2px solid #e2e8f0;
}
.sub-table tbody tr:hover {
  background: #f8fafc;
}

/* ── 판정 도구 결과 rows ────────────────────────────────── */
.eval-row-pass   { border-left: 3px solid #22c55e; background: #f0fdf4; }
.eval-row-caution{ border-left: 3px solid #f59e0b; background: #fffbeb; }
.eval-row-exclude{ border-left: 3px solid #ef4444; background: #fff5f5; }

/* ── 단계 배지 ──────────────────────────────────────────── */
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

/* ── 반자동 플로우 단계 표시기 ──────────────────────────── */
.flow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.flow-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  border-bottom: 3px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}
.flow-step.active {
  color: #0369a1;
  border-bottom-color: #0ea5e9;
}
.flow-step.done {
  color: #16a34a;
  border-bottom-color: #22c55e;
}
.flow-step-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 800;
  background: #e2e8f0;
  color: #64748b;
  flex-shrink: 0;
}
.flow-step.active .flow-step-num {
  background: #0ea5e9;
  color: #fff;
}
.flow-step.done .flow-step-num {
  background: #22c55e;
  color: #fff;
}
.flow-arrow {
  color: #cbd5e1;
  font-size: 12px;
  padding: 0 2px;
}

/* ── 판정 요약 패널 ─────────────────────────────────────── */
.eval-summary-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  border-radius: 8px;
  color: #fff;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.eval-summary-bar .stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}
.eval-summary-bar .stat-pass   { color: #86efac; }
.eval-summary-bar .stat-caution{ color: #fde68a; }
.eval-summary-bar .stat-exclude{ color: #fca5a5; }

/* ══════════════════════════════════════════════════════════════
   주간식단 그리드 개선 디자인 (menu-planner 통합)
══════════════════════════════════════════════════════════════ */

/* 그리드 테이블 */
.week-grid-v2{border-collapse:collapse;width:100%;table-layout:fixed;border:1.5px solid #cbd5e1;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08)}

/* 헤더 */
.week-grid-v2 thead th{background:#0f172a;padding:0;text-align:center;font-weight:700;font-size:12px;color:#e2e8f0;position:sticky;top:0;z-index:10}
.wg-th-inner{padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:2px}
.wg-th-day{font-size:13px;font-weight:800}
.wg-th-date{font-size:10px;color:#94a3b8}
.wg-th-today{background:linear-gradient(135deg,#14532d,#166534)!important}
.wg-th-today .wg-th-day{color:#4ade80}
.wg-th-today .wg-th-date{color:#86efac}
.wg-th-sat .wg-th-day{color:#93c5fd}
.wg-th-sun .wg-th-day{color:#fca5a5}

/* 끼니 밴드 */
.wg-meal-band{writing-mode:vertical-lr;transform:rotate(180deg);font-size:11px;font-weight:800;letter-spacing:1px;text-align:center;color:#fff;padding:8px 3px;width:28px}
.wg-band-bf{background:linear-gradient(180deg,#059669,#047857)}
.wg-band-lu{background:linear-gradient(180deg,#2563eb,#1d4ed8)}
.wg-band-di{background:linear-gradient(180deg,#7c3aed,#6d28d9)}

/* 슬롯 타입 열 */
.wg-slot-label{font-size:10px;font-weight:700;color:#94a3b8;background:#f8fafc;text-align:center;padding:6px 3px;border-right:1px solid #f1f5f9;width:38px;white-space:nowrap}
.wg-slot-label-bf{border-left:3px solid #34d399}
.wg-slot-label-lu{border-left:3px solid #60a5fa}
.wg-slot-label-di{border-left:3px solid #a78bfa}

/* ── 메뉴 셀 ─────────────────────────────────────── */
.wg-cell{
  padding:5px 6px;
  vertical-align:top;
  cursor:pointer;
  transition:background .15s;
  border-bottom:1px solid #f1f5f9;
  border-left:1px solid #f1f5f9;
  position:relative;
  /* 고정 높이: 슬롯필(16px) + 메뉴명(34px) + 속성행(20px) + padding(10px) + 여유 = 96px */
  height:96px;
  overflow:hidden;
}
.wg-cell-bf{border-left:2px solid #a7f3d0!important}
.wg-cell-lu{border-left:2px solid #bfdbfe!important}
.wg-cell-di{border-left:2px solid #ddd6fe!important}
.wg-cell:hover{background:#f0fdf4!important}
.wg-cell-today{background:#f0fdf4}
.wg-cell-today:hover{background:#dcfce7!important}

/* 셀 내부 레이아웃: 메뉴명 영역 + 속성 영역 분리 */
.wg-cell-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  gap:0;
  min-height:76px;
}

/* 슬롯 타입 필 + 메뉴명 한 줄 행 */
.wg-cell-slot-row{
  display:flex;
  align-items:center;
  gap:3px;
  flex:0 0 auto;
  margin-bottom:2px;
  flex-wrap:wrap;
}

/* 메뉴명 영역 - 2줄 말줄임 */
.wg-menu-name{
  font-size:11.5px;
  font-weight:800;
  color:#0f172a;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1 1 auto;
  min-height:26px;
  max-height:34px;
  letter-spacing:-.01em;
}

/* ── [A] 셀 상단: 슬롯 필 + 메뉴명 ─────────── */
.wg-cell-top{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  gap:2px;
}
/* 슬롯 타입 필 (죽, 소, 대 등) */
.wg-slot-pill{
  display:inline-block;
  font-size:8px;
  font-weight:800;
  padding:1px 4px;
  border-radius:3px;
  white-space:nowrap;
  flex-shrink:0;
  margin-top:1px;
  line-height:1.4;
}
.wg-slot-pill-breakfast{ background:#dcfce7; color:#166534; }
.wg-slot-pill-lunch    { background:#dbeafe; color:#1e40af; }
.wg-slot-pill-dinner   { background:#ede9fe; color:#6d28d9; }

/* 빈 셀에서 슬롯 타입 레이블 */
.wg-add-slot-label{ position:absolute; top:4px; left:5px; }

/* ── [A] 속성 고정 행 ─────────────────────────────
   4개 고정 칸: [단백질군] [색상] [맵기] [조리법]
   빈 값도 동일 폭 유지 → 셀 높이 흔들림 없음
─────────────────────────────────────────────── */
.wg-cell-attrs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  flex:0 0 20px;
  margin-top:auto;
  padding-top:3px;
  border-top:1px solid rgba(0,0,0,.07);
  align-items:center;
}
.wg-cell-attrs-empty{
  border-top-color:transparent;
}

/* 속성 칩 공통 */
.wg-attr{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:700;
  padding:1px 3px;
  border-radius:4px;
  white-space:nowrap;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  min-height:16px;
}
/* 빈 플레이스홀더 (칸 고정용) — 칩 없어도 높이 유지 */
.wg-attr-empty{
  display:block;
  min-height:16px;
  border-radius:4px;
  background:transparent;
}
/* 단백질군 칩 */
.wg-attr-protein{ background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
/* 색상 칩 */
.wg-attr-color{ background:#faf5ff; color:#7c3aed; border:1px solid #e9d5ff; }
/* 맵기 칩 */
.wg-attr-spicy0{ background:#f8fafc; color:#94a3b8; border:1px solid #e2e8f0; }
.wg-attr-spicy1{ background:#fef9c3; color:#92400e; border:1px solid #fde68a; }
.wg-attr-spicy2{ background:#fed7aa; color:#c2410c; border:1px solid #fdba74; }
.wg-attr-spicy3{ background:#fee2e2; color:#dc2626; border:1px solid #fca5a5; }
/* 조리법 칩 */
.wg-attr-cook{ background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }

/* 치료식 판정 배지 행 */
.wg-treat-row{
  margin-top:2px;
  flex:0 0 auto;
}

/* 빈 셀 추가 버튼 */
.wg-menu-empty{font-size:10px;color:#cbd5e1;font-style:italic}
.wg-add-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  height:100%;
  min-height:60px;
  border:1.5px dashed #e2e8f0;
  border-radius:6px;
  color:#cbd5e1;
  font-size:10px;
  cursor:pointer;
  transition:.15s;
  position:relative;
}
.wg-add-btn:hover{border-color:#4ade80;color:#16a34a;background:#f0fdf4}

/* 치료식 배지 (그리드용) */
.wg-treat-pass{font-size:9px;background:#dcfce7;color:#16a34a;border-radius:4px;padding:1px 5px;font-weight:700}
.wg-treat-caution{font-size:9px;background:#fef9c3;color:#92400e;border-radius:4px;padding:1px 5px;font-weight:700}
.wg-treat-exclude{font-size:9px;background:#fee2e2;color:#dc2626;border-radius:4px;padding:1px 5px;font-weight:700}

/* ── 등급 뱃지 ─────────────────────────────────────── */
.wg-grade-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;line-height:1;
  border-radius:3px;padding:1px 4px;margin-left:3px;
  vertical-align:middle;letter-spacing:0;
}
.wg-grade-a{background:#fef9c3;color:#854d0e;border:1px solid #fde047;}
.wg-grade-b{background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1;}

/* ── 점수 구성 버튼 ─────────────────────────────────── */
.wg-score-btn{
  display:flex;align-items:center;
  font-size:10px;cursor:pointer;
  margin-top:3px;padding:2px 5px;
  background:#f5f3ff;border:1px solid #ddd6fe;
  border-radius:4px;width:fit-content;
  transition:background .15s;
}
.wg-score-btn:hover{background:#ede9fe;}

/* ── 치료식 Audit 버튼 ────────────────────────────────── */
.wg-audit-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  background:#fdf4ff;border:1px solid #e9d5ff;
  border-radius:4px;cursor:pointer;color:#7c3aed;
  font-size:9px;transition:background .15s;padding:0;
}
.wg-audit-btn:hover{background:#ede9fe;border-color:#c4b5fd;}

/* ── 점수 팝업 패널 ─────────────────────────────────── */
#score-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:3000;
  display:flex;align-items:center;justify-content:center;
}
#score-popup{
  background:#fff;border-radius:14px;
  width:560px;max-width:94vw;max-height:80vh;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  overflow:hidden;
}
#score-popup-header{
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  color:#fff;padding:14px 18px;display:flex;
  align-items:center;justify-content:space-between;flex-shrink:0;
}
#score-popup-header h3{margin:0;font-size:14px;font-weight:700}
#score-popup-header .sp-close{
  background:rgba(255,255,255,.2);border:none;color:#fff;
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;
}
#score-popup-header .sp-close:hover{background:rgba(255,255,255,.35)}
#score-popup-summary{
  padding:12px 18px;border-bottom:1px solid #e2e8f0;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;flex-shrink:0;
  background:#fafbff;
}
.sp-score-chip{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;border:1px solid #e2e8f0;border-radius:8px;
  padding:6px 12px;min-width:70px;
}
.sp-score-chip .sp-val{font-size:18px;font-weight:800;color:#1e293b}
.sp-score-chip .sp-lbl{font-size:9px;color:#94a3b8;margin-top:1px}
.sp-delta-arrow{font-size:20px;color:#94a3b8}
.sp-cat-badges{display:flex;gap:5px;flex-wrap:wrap;margin-left:4px}
.sp-cat-badge{
  font-size:10px;font-weight:600;padding:3px 7px;
  border-radius:10px;white-space:nowrap;
}
#score-popup-body{
  overflow-y:auto;padding:12px 18px;flex:1;
}
.sp-rule-row{
  display:grid;
  grid-template-columns:1fr 90px 80px;
  gap:4px;align-items:center;
  padding:6px 8px;border-radius:6px;margin-bottom:4px;
  border:1px solid #f1f5f9;
}
.sp-rule-row.applied{background:#f8faff;border-color:#e0e7ff}
.sp-rule-row.not-applied{background:#f8fafc;border-color:#f1f5f9;opacity:.7}
.sp-rule-name{font-size:11px;font-weight:600;color:#1e293b}
.sp-rule-detail{font-size:10px;color:#64748b;margin-top:1px}
.sp-rule-delta{
  font-size:12px;font-weight:700;text-align:center;
}
.sp-rule-score{
  font-size:10px;color:#94a3b8;text-align:right;
}
.sp-section-title{
  font-size:10px;font-weight:700;color:#6366f1;
  text-transform:uppercase;letter-spacing:.5px;
  margin:10px 0 5px;padding-bottom:4px;
  border-bottom:1px solid #e0e7ff;
}
.sp-empty{text-align:center;color:#94a3b8;font-size:12px;padding:20px}

/* ── [B] 계획 선택 카드형 중앙 정렬 ─────────────── */
.plan-card{
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  margin-bottom:6px;
  text-align:center;
  border:2px solid #e2e8f0;
  background:#fff;
  user-select:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
.plan-card:hover{
  border-color:#86efac;
  background:#f0fdf4;
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(22,163,74,.12);
}
.plan-card.active{
  border-color:#16a34a;
  background:linear-gradient(135deg,#f0fdf4,#dcfce7);
  box-shadow:0 2px 12px rgba(22,163,74,.20);
}
/* 선택된 카드 ✓ 체크 */
.plan-card.active::after{
  content:'✓';
  position:absolute;
  top:6px; right:8px;
  font-size:12px;
  font-weight:900;
  color:#16a34a;
}
.plan-card-week{
  font-weight:900;
  font-size:14px;
  color:#1e293b;
  margin-bottom:2px;
  letter-spacing:-.03em;
  text-align:center;
  width:100%;
  line-height:1.3;
}
.plan-card.active .plan-card-week{ color:#15803d; }
/* 날짜 행 */
.plan-card-date{
  font-size:11px;
  color:#64748b;
  margin-bottom:7px;
  letter-spacing:.01em;
  text-align:center;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.plan-card.active .plan-card-date{ color:#16a34a; }
.plan-card-badges{
  display:flex;
  gap:4px;
  justify-content:center;
  flex-wrap:wrap;
  width:100%;
}

/* 조리지시서 버튼 (주간식단 헤더) */
.btn-inst{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;border:none;padding:6px 12px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.15s}
.btn-inst:hover{opacity:.9}

/* ── [C] 슬롯 피커 강화 스타일 ─────────────────────────── */
/* 메뉴 행 */
.sp-menu-row{
  padding:8px 10px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  cursor:pointer;
  background:#fff;
  transition:all .12s;
  margin-bottom:4px;
}
.sp-menu-row:hover{
  background:#f0fdf4;
  border-color:#86efac;
}
.sp-menu-row-top{
  display:flex;
  align-items:center;
  gap:8px;
}
.sp-menu-name-wrap{
  flex:1;
  min-width:0;
}
.sp-menu-name{
  display:block;
  font-weight:700;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#1e293b;
}
.sp-menu-badges{
  display:flex;
  gap:4px;
  margin-top:3px;
  flex-wrap:wrap;
  align-items:center;
}
.sp-grade-badge{
  display:inline-block;
  padding:1px 6px;
  border-radius:8px;
  font-size:10px;
  font-weight:600;
}
/* 추가 정보 칩 행 */
.sp-menu-info{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-top:5px;
  padding-top:5px;
  border-top:1px solid #f1f5f9;
}
.sp-info-chip{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:10px;
  padding:2px 6px;
  border-radius:4px;
  font-weight:500;
  white-space:nowrap;
}
.sp-chip-ingr { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.sp-chip-color{ background:#faf5ff; color:#7c3aed; border:1px solid #e9d5ff; }
.sp-chip-cook { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.sp-chip-exclude{ background:#fff1f2; color:#be123c; border:1px solid #fecdd3; }
/* 치료식 제외 태그 행 */
.sp-menu-tags{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:5px;
  padding-top:4px;
  border-top:1px dashed #fecaca;
  flex-wrap:wrap;
  font-size:10px;
  color:#dc2626;
  font-weight:600;
}
.sp-tag-item{
  display:inline-block;
  background:#fff1f2;
  color:#be123c;
  border:1px solid #fecdd3;
  border-radius:4px;
  padding:1px 5px;
  font-size:9px;
  font-weight:700;
}

/* ── 밥 슬롯 특식 교체 버튼 ───────────────────────────────────── */
.btn-rice-override {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  background:#fef3c7;
  border:1px solid #fcd34d;
  border-radius:4px;
  color:#d97706;
  font-size:9px;
  cursor:pointer;
  margin-left:4px;
  vertical-align:middle;
  transition:all .15s;
  padding:0;
  line-height:1;
}
.btn-rice-override:hover {
  background:#fde68a;
  border-color:#f59e0b;
  color:#92400e;
  transform:scale(1.1);
}