/* ===== Base UI ===== */
.tab-btn {
  padding: 0.65rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .15s;
}
.tab-btn:hover { color: #0f172a; background:#f8fafc; }
.tab-btn.active { color:#e11d48; border-bottom-color:#e11d48; }

.form-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #fff;
}
.form-input:focus { outline: none; border-color:#f59e0b; box-shadow: 0 0 0 3px rgb(245 158 11 / 0.2); }

/* ===== 레시피 탭(②) 편집 영역 컴팩트화 — 세로 스크롤 감소 ===== */
#tab2 .form-input { padding: 0.3rem 0.55rem; }       /* 입력칸 높이 축소 */
#tab2 label.text-xs { display: block; margin-bottom: 1px; line-height: 1.1; }

/* ===== Recipe list items ===== */
.recipe-item {
  padding: 0.55rem 0.7rem; border-radius: 0.4rem; cursor: pointer;
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid transparent;
}
.recipe-item:hover { background:#f1f5f9; }
.recipe-item.active { background:#fff1f2; border-color:#fda4af; }
.recipe-item.sel-active { background:#eef2ff; border-color:#c7d2fe; }
.recipe-item .badge { font-size:.65rem; padding:1px 6px; border-radius:999px; }
.recipe-item .recipe-sel-no {
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-right:6px; border-radius:999px;
  background:#4f46e5; color:#fff; font-size:11px; font-weight:700;
}
.recipe-item .recipe-sel-no:empty { display:none; }

/* 레시피 목록 분류 필터 버튼 */
.cat-filter-btn { font-size:11px; padding:2px 9px; border:1px solid #cbd5e1; border-radius:999px; background:#fff; color:#475569; cursor:pointer; line-height:1.5; transition:background .12s,border-color .12s,color .12s; }
.cat-filter-btn:hover { background:#f1f5f9; }
.cat-filter-btn.active { background:#f43f5e; border-color:#f43f5e; color:#fff; }

/* ===== Toggle switch ===== */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
}
/* 화면에서 보이지 않지만 라벨 클릭 시 토글 가능. 위치를 명시해 일부 브라우저 0-size 비활성 회피 */
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 48px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.toggle-switch .slider {
  position: relative;
  width: 48px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 999px;
  transition: .2s;
  flex-shrink: 0;
  pointer-events: none;        /* input이 클릭 받도록 */
}
.toggle-switch .slider::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: .2s;
}
.toggle-switch input:checked + .slider { background: #e11d48; }
.toggle-switch input:checked + .slider.prep { background: #f59e0b; }
.toggle-switch input:checked + .slider::before { transform: translateX(24px); }
.toggle-switch .labels::before { content: attr(data-off); font-size: .75rem; color: #64748b; }
.toggle-switch input:checked ~ .labels::before { content: attr(data-on); color: #e11d48; font-weight: 600; }

/* ===== Skeleton ===== */
.skel { background: linear-gradient(90deg,#e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius:6px; }
@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* ===== Step image uploader ===== */
.step-img-box {
  width: 144px; height: 144px;
  border: 2px dashed #cbd5e1; border-radius: 0.5rem;
  display:flex; align-items:center; justify-content:center;
  background: #f8fafc; cursor: pointer; overflow:hidden; flex-shrink:0;
}
.step-img-box img { width:100%; height:100%; object-fit:cover; }

/* ===== Watermark ===== */
.watermark-bg {
  position: relative;
  overflow: hidden;          /* 워터마크가 페이지 경계 밖으로 새는 것 방지 */
}
.watermark-bg::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;     /* 부모(.training-page) 전체 채움 */
  background-image: var(--brand-logo, none);
  background-repeat: no-repeat;
  background-position: 50% 50%;             /* 가운데 정렬 */
  background-size: 50% auto;
  opacity: 0.12;
  pointer-events: none;
  z-index: 5;                /* 콘텐츠(사진) 위에 옅게 겹침 → 사진 페이지에서도 워터마크가 보이도록 */
}
.watermark-bg > * { position: relative; z-index: 1; }

/* ===== Tab 3 — Kitchen Wall Portrait (1페이지 2메뉴) ===== */
.kitchen-page {
  width: 210mm;
  min-height: 297mm;
  padding: 10mm;
  margin: 0 auto 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 5mm;
  page-break-after: always;
  break-after: page;
  position: relative;
  box-sizing: border-box;
}
/* 페이지에 실제 들어간 항목 수에 맞춰 행 분할 (마지막 페이지가 1~2개여도 자연스럽게) */
.kitchen-page[data-count="1"] { grid-template-rows: 1fr; }
.kitchen-page[data-count="2"] { grid-template-rows: 1fr 1fr; }
.kitchen-page:last-child { page-break-after: auto; }

.kitchen-entry {
  border: 2px solid #0f172a;
  border-radius: 0.5rem;
  padding: 4mm 5mm;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  min-height: 0;     /* 그리드 행에서 자식이 줄어들 수 있도록 */
}
.kitchen-entry-empty { border: 1px dashed #cbd5e1; }
/* 슬롯 초과 시 JS가 scale 적용 — 위에서부터 축소 */
.kentry-fit { transform-origin: top center; display: flex; flex-direction: column; gap: 3mm; }
/* 조리과정 없는 항목 — 헤더 하단 구분선/하단 여백 제거하여 빈 공간 최소화 */
.kitchen-entry.no-steps .kitchen-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.kitchen-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6mm;
  align-items: start;
  padding-bottom: 3mm;
  margin-bottom: 3mm;
  border-bottom: 1px solid #0f172a;
}
/* 완성본 사진이 없으면 사진 칸 자체 제거 → 재료 영역 확보 (flexbox는 자동으로 더 많은 항목 수용) */
.kitchen-header.no-photo {
  grid-template-columns: 1fr;
}
.kitchen-meta .kname { font-size: 1.9rem; font-weight: 900; margin: 0 0 2mm; }
.kitchen-meta .kusage { font-size: 1.55rem; line-height: 1.45; }
/* 매장 매뉴얼 재료 리스트 — 스타일 B(표 정렬형): 수량 우측 정렬 + 줄 구분선 */
/* auto-fit + 260px 하한 → 사진 옆 좁은 영역은 1단, 전폭(소스 등)은 2단까지만(3단 잘림 방지) */
.kitchen-entry .usage-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 2rem;
  row-gap: 0;
}
.kitchen-entry .usage-list > li {
  font-size: 1.55rem;
  line-height: 1.35;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* 재료명(좌) · 수량(우 정렬), 좁으면 이름 줄바꿈 */
  align-items: baseline;
  column-gap: 0.75rem;
  white-space: normal;                 /* 긴 이름은 줄바꿈 허용(가로 넘침 방지) */
  border-bottom: 1px solid #cbd5e1;
  padding: 1.6mm 0;
}
.kitchen-entry .usage-list > li > span:last-child {
  white-space: nowrap;                 /* 수량은 줄바꿈 안 함 */
}
.kitchen-entry .usage-topping-header {
  font-size: 1.3rem;
  grid-column: 1 / -1;
}

/* 조리과정 — 2열 배치(세로 길이 절반). 각 카드: [사진(번호 오버레이) | 설명(줄바꿈)] */
.kitchen-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
  align-content: start;
}
.kstep {
  display: grid;
  grid-template-columns: auto 1fr;          /* 사진 · 설명 */
  column-gap: 2.5mm;
  align-items: center;
  padding: 1.5mm 2mm;
  border: 1.5px solid #0f172a;
  border-radius: 0.4rem;
  background: transparent;
  break-inside: avoid;
}
.kstep-photo { position: relative; flex-shrink: 0; line-height: 0; }
.kstep-photo img {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 0.3rem;
  display: block;
}
/* 조리순서 번호 — 사진 위(좌상단)에 오버레이 */
.kstep-photo .num {
  position: absolute; top: 2px; left: 2px;
  background: #0f172a; color: #fff;
  width: 24px; height: 24px;
  border-radius: 50%;
  text-align: center; line-height: 24px;
  font-size: 1.05rem; font-weight: bold;
  box-shadow: 0 0 0 2px #fff;
}
/* 사진 없는 단계 — 번호를 보통 배지로 인라인 표시 */
.kstep.no-image .kstep-photo { position: static; line-height: normal; }
.kstep.no-image .kstep-photo .num { position: static; box-shadow: none; }
.kstep .kdesc {
  font-size: 1.05rem;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 매장 부착용 — 오른쪽 칼럼: 완성본 사진 + 그 아래 토핑/마무리(작은 글씨) */
.kitchen-side { display: flex; flex-direction: column; gap: 3mm; align-items: flex-start; }
.kitchen-side .ktopping-box { width: 260px; }
.kitchen-side .usage-topping-header { font-size: 1.05rem; margin-top: 0.5mm; }
.kitchen-entry .ktopping > li { font-size: 1.05rem; line-height: 1.2; padding: 0.7mm 0; }

/* Tab 3 chip selector */
.tab3-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s;
}
.tab3-chip:hover { background: #f1f5f9; border-color: #94a3b8; }
/* 선택 가능 목록에서 그룹(요리)이 바뀔 때마다 옅은 음영으로 묶음 구분 */
.tab3-chip.chip-grp-alt { background: #f1f5f9; border-color: #cbd5e1; }
.tab3-chip.chip-grp-alt:hover { background: #e2e8f0; border-color: #94a3b8; }
.tab3-chip.selected {
  background: #fff7ed;
  border: 2px solid #f59e0b;
  cursor: grab;
}
.tab3-chip.selected.pair-end {
  border-right: 4px solid #d97706;  /* 짝꿍의 끝(짝수번째)에 강조 보더 */
  margin-right: 0.5rem;
}
.tab3-chip.selected .pair-no {
  background: #0f172a; color: #fff;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: bold;
}
.tab3-chip.selected .rm {
  color: #dc2626;
  font-weight: bold;
  padding: 0 0.2rem;
  border-radius: 0.2rem;
}
.tab3-chip.selected .rm:hover { background: #fee2e2; }
.tab3-chip.dragging { opacity: 0.4; }

/* ④ 매장 부착용 '선택 가능' — 분류 헤더 1행(가로). 펼치면 그 헤더 너비로만 아래 1열 펼침 */
#tab3Available { display: flex; flex-direction: column; gap: 8px; }
/* align-items:flex-start → 펼친 칼럼만 길어지고 다른 칼럼(헤더)은 안 늘어남(행 전체 안 채움) */
.tab3-catbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.tab3-cat { flex: 1 1 0; min-width: 92px; display: flex; flex-direction: column; gap: 6px; }
.tab3-cat-head { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; background: var(--ntn-surface, #f6f5f4); border: 1px solid var(--ntn-hairline, #e5e3df); border-radius: 8px; cursor: pointer; user-select: none; font-weight: 600; color: var(--ntn-charcoal, #37352f); font-size: 0.9rem; }
.tab3-cat-head:hover { background: #efeeec; }
.tab3-cat-head.open { background: #f3f0ff; border-color: var(--ntn-primary, #5645d4); color: var(--ntn-primary, #5645d4); }
.tab3-cat-head .tab3-cat-name { white-space: nowrap; }
.tab3-cat-head .tab3-cat-count { font-size: 0.72rem; font-weight: 600; color: var(--ntn-steel, #787671); background: #fff; border: 1px solid var(--ntn-hairline, #e5e3df); border-radius: 999px; padding: 0 7px; }
.tab3-cat-head.open .tab3-cat-count { color: var(--ntn-primary, #5645d4); border-color: #c9bff5; }
.tab3-cat-head .tab3-cat-arrow { font-size: 0.7rem; color: var(--ntn-steel, #787671); }
.tab3-cat-head.open .tab3-cat-arrow { color: var(--ntn-primary, #5645d4); }
.tab3-cat-panel { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--ntn-hairline, #e5e3df); border-radius: 8px; padding: 6px; background: #fff; max-height: 340px; overflow-y: auto; }
.tab3-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.tab3-opt:hover { background: var(--ntn-surface-soft, #fafaf9); }
.tab3-opt.on { background: #f3f0ff; }
.tab3-opt input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--ntn-primary, #5645d4); cursor: pointer; flex-shrink: 0; }
.tab3-opt-name { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--ntn-ink, #1a1a1a); word-break: keep-all; }

/* Supabase 공유 로그인 게이트 (USE_SUPABASE일 때만 표시) */
#sbLoginGate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(15,15,15,0.55); backdrop-filter: blur(3px); }
#sbLoginGate .sb-gate-card { width: min(92vw, 380px); background: #fff; border: 1px solid var(--ntn-hairline, #e5e3df); border-radius: 14px; padding: 28px 26px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
#sbLoginGate h2 { font-size: 1.15rem; font-weight: 700; color: var(--ntn-ink, #1a1a1a); margin-bottom: 6px; }
#sbLoginGate .sb-gate-sub { font-size: 0.82rem; color: var(--ntn-slate, #5d5b54); line-height: 1.5; margin-bottom: 16px; }
#sbLoginGate input { width: 100%; padding: 10px 12px; border: 1px solid var(--ntn-hairline-strong, #c8c4be); border-radius: 8px; font-size: 0.95rem; margin-bottom: 10px; }
#sbLoginGate input:focus { outline: none; border-color: var(--ntn-primary, #5645d4); box-shadow: 0 0 0 3px rgb(86 69 212 / 0.18); }
#sbLoginGate button { width: 100%; padding: 10px; background: var(--ntn-primary, #5645d4); color: #fff; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; }
#sbLoginGate button:hover { background: var(--ntn-primary-pressed, #4534b3); }
#sbLoginGate button:disabled { opacity: 0.6; cursor: default; }
#sbLoginGate .sb-gate-msg { font-size: 0.8rem; color: var(--ntn-slate, #5d5b54); margin-top: 12px; min-height: 1em; line-height: 1.45; }

/* "정식 2인" 계산 표시 — 원가계산서/요약 공통 */
.cs-jeongsik-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; color: #6d28d9; background: #ede9fe; border: 1px solid #ddd6fe; border-radius: 999px; padding: 1px 7px; }
.cs-jeongsik-note { color: #7c3aed; }
.cs-jeongsik { font-size: 0.85em; color: #7c3aed; font-weight: 600; }                  /* 원가계산서 판매가 옆 ×2 표기 */
.cs-jeongsik-note { font-size: 0.85em; color: #7c3aed; font-weight: 600; }              /* 원가계산서 Food Cost 하단 안내 */

/* ⑤ 조리 매뉴얼 메뉴별 순서 잠금 — 카드 우상단 🔒 토글 + 잠긴 카드 강조 */
.menu-intro-card, .prep-card { position: relative; }
.menu-lock-toggle { position: absolute; top: 4px; right: 4px; z-index: 2; width: 24px; height: 24px; padding: 0; line-height: 1; border: 1px solid var(--ntn-hairline, #e5e3df); border-radius: 6px; background: rgba(255,255,255,0.92); font-size: 13px; cursor: pointer; opacity: 0.55; transition: opacity 0.12s, background 0.12s; }
.menu-intro-card:hover .menu-lock-toggle, .prep-card:hover .menu-lock-toggle { opacity: 1; }
.menu-lock-toggle.on { opacity: 1; background: #f3f0ff; border-color: var(--ntn-primary, #5645d4); }
.menu-intro-card.locked, .prep-card.locked { outline: 2px solid var(--ntn-primary, #5645d4); outline-offset: -2px; }
.menu-intro-card.locked { cursor: default; }
/* 인쇄 시 잠금 버튼·강조는 숨김 */
@media print { .menu-lock-toggle { display: none !important; } .menu-intro-card.locked, .prep-card.locked { outline: none !important; } }

/* ===== Print Manuals (Tab 4 - portrait, training matrix) ===== */
/* 메뉴 제조 / 전처리 상세 — 동일한 뷰 (1열 기본, 5단계 이상이면 2열로 자동 전환) */
.print-portrait .matrix-row {
  display: grid;
  grid-template-columns: 36px 140px 1fr;
  column-gap: 0.6rem;
  padding: 0.5rem 0;
  align-items: center;
  border-bottom: 1px dashed #e2e8f0;
  break-inside: avoid;
}
.print-portrait .matrix-row img {
  width: 140px; height: 140px; object-fit: cover; border-radius: 0.5rem;
}
.print-portrait .matrix-row .num {
  font-size: 1.4rem; font-weight: bold; color: #0f172a;
  text-align: center; align-self: center;
}
.print-portrait .matrix-row .desc {
  font-size: 0.9rem; line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  padding-left: 0.3rem;
}

/* ===== 토핑 식재료 시각 구분 ===== */
/* Tab 2 식재료 테이블 - 첫 번째 토핑 행 위에 굵은 점선 구분선 */
#rcpIngTbody tr.topping-row {
  background: #fff7ed;       /* 옅은 주황 배경 */
}
#rcpIngTbody tr.topping-row:first-of-type {
  border-top: 2px dashed #f59e0b !important;
}
/* 식재료 행 드래그 시각 효과 */
#rcpIngTbody tr.ing-row {
  transition: background 0.12s, opacity 0.12s, transform 0.12s;
}
#rcpIngTbody tr.ing-row.dragging {
  opacity: 0.4;
  background: #f1f5f9 !important;
}
.ing-drag-handle {
  font-weight: bold;
  letter-spacing: -2px;
  padding: 0 2px;
}
.ing-drag-handle:active { cursor: grabbing; }
/* 매뉴얼 토핑 헤더 */
.usage-topping-header {
  margin-top: 0.4rem;
  padding-top: 0.3rem;
  border-top: 1.5px dashed #f59e0b;
  font-size: 0.85em;
  font-weight: 700;
  color: #b45309;
}
.usage-topping > li {
  color: #92400e;
}

/* ===== Usage list — Grid auto-fit (각 재료가 열로 정렬됨, 1행 유지) ===== */
.usage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  column-gap: 1rem;
  row-gap: 0.3rem;
  align-items: baseline;
  list-style: none;
  padding: 0;
  margin: 0;
}
.usage-list > li {
  white-space: nowrap;        /* 재료명+소요량이 줄바꿈되지 않음 */
  break-inside: avoid;
  padding: 2px 0;
}
/* 토핑 헤더는 다음 줄 시작 + 전체 폭 */
.usage-topping-header { grid-column: 1 / -1; }
.usage-list-2,
.usage-list-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  column-gap: 1rem; row-gap: 0.3rem;
}

/* ===== Tab 4 — Training Manual (multi-section book) ===== */
.training-page {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  padding: 2rem;
  margin-bottom: 1rem;
  page-break-after: always;
  break-after: page;
  min-height: 280mm;
  position: relative;
}
.training-page:last-child { page-break-after: auto; }

.section-title {
  font-size: 1.5rem; font-weight: 900;
  border-bottom: 3px solid #0f172a;
  padding-bottom: 0.5rem; margin-bottom: 1.25rem;
}

/* 메뉴소개 4-up grid */
.menu-intro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.menu-intro-card {
  border: 2px solid #0f172a;
  border-radius: 0.6rem;
  padding: 0.6rem;
  text-align: center;
  background: transparent;       /* 워터마크가 비쳐 보이도록 투명 */
  break-inside: avoid;
}
.menu-intro-card img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 0.4rem; margin-bottom: 0.5rem;
}
.menu-intro-card .name { font-weight: 700; font-size: 0.95rem; }
.menu-intro-card .brand { font-size: 0.7rem; color: #64748b; }

/* 전처리 카드(간략) */
.prep-card {
  border-left: 4px solid #f59e0b;
  background: transparent;         /* 워터마크가 비쳐 보이도록 투명 */
  padding: 0.6rem 0.9rem;
  border-radius: 0.4rem;
  margin-bottom: 0.7rem;
  break-inside: avoid;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.prep-card .body-wrap { flex: 1; min-width: 0; }
.prep-card .name { font-weight: 700; font-size: 1.05rem; color: #92400e; }
.prep-card .body { font-size: 0.9rem; line-height: 1.55; margin-top: 2px; }
.prep-card .thumb {
  width: 90px; height: 90px;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 2px solid #f59e0b;
  flex-shrink: 0;
}

/* 메뉴제조방법 — 1메뉴 1페이지 */
.menu-page-header {
  display: grid; grid-template-columns: 1fr auto; gap: 1.25rem;
  align-items: start; padding-bottom: 0.8rem;
  border-bottom: 2px solid #0f172a; margin-bottom: 1rem;
}

/* ⑤ 상세 페이지 제목: 브랜드명(왼쪽 인라인) + 메뉴명(크게) — '메뉴 제조 방법' 라벨 대체 */
.menu-detail-title { font-weight: 700; }
.menu-detail-title .mdt-brand {
  font-size: 0.8em; font-weight: 600; color: var(--ntn-slate, #5d5b54);
  letter-spacing: 0; margin-right: 0.5rem;
}

/* ⑤ 사용량: 3열 기본 + 열-우선 채움(1열 위→아래 다 채운 뒤 2열). 긴 이름은 뒤로 정렬되어 아래쪽 배치. */
.usage-grid { display: flex; flex-direction: column; gap: 6px; }
.usage-grid .ug-cols {
  display: grid;                     /* 열 수·행 수는 인라인으로 지정 */
  grid-auto-flow: column;            /* 열-우선: 1열을 위→아래로 다 채운 뒤 2열 */
  gap: 4px 8px; align-content: start;
  justify-content: start;            /* 열 폭을 좌측에 모음 — 1열일 때 전체 폭으로 늘어나지 않게 */
}
.usage-grid .ug-item {
  display: flex; justify-content: space-between; gap: 6px; line-height: 1.25;
  font-size: 12.5px; padding: 3px 8px; background: #fafaf9;
  border: 1px solid #ede9e4; border-radius: 6px;
}
.usage-grid .ug-item .nm { flex: 1; min-width: 0; font-weight: 600; color: #1a1a1a; word-break: keep-all; }
.usage-grid .ug-item .q  { color: #5d5b54; white-space: nowrap; font-variant-numeric: tabular-nums; }
.usage-grid .ug-topping-head { font-size: 11px; font-weight: 700; color: #793400; margin-top: 2px; }
.usage-grid .ug-topping { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.usage-grid .ug-topping .ug-item { font-size: 10.5px; background: #ffe8d4; border-color: transparent; padding: 2px 7px; }

/* 메뉴 제조 / 전처리 상세 — 5단계 이상이면 2열 그리드 (최대 8단계) */
.menu-steps-2col {
  column-count: 2;
  column-gap: 1rem;
  column-fill: balance;
}
.menu-steps-2col .matrix-row {
  grid-template-columns: 24px 140px 1fr;    /* 1열 → 2열 전환 시 번호 칸만 더 좁게 */
  column-gap: 0.4rem;
  padding: 0.45rem 0;
}

/* ===== 메뉴 제조 — 3×3 격자 카드 (사진 위 / 캡션 아래 9pt) ===== */
.print-portrait .menu-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 가로 3칸 → 9단계면 3×3 */
  gap: 0.6rem 0.7rem;
}
.print-portrait .matrix-card {
  display: flex;
  flex-direction: column;
  break-inside: avoid;
}
.print-portrait .matrix-card .matrix-card-img {
  position: relative;
  width: 100%;
  max-width: 160px;           /* 사진 축소 — 9단계 3×3가 한 페이지에 들어가도록 */
  margin: 0 auto;             /* 칸 안에서 가운데 정렬 */
  aspect-ratio: 1 / 1;        /* 정사각 사진 칸 */
}
.print-portrait .matrix-card .matrix-card-img img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem;
}
.print-portrait .matrix-card .matrix-card-img .no-img {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center;
  background: #f1f5f9; color: #94a3b8; font-size: 0.7rem; border-radius: 0.5rem;
}
.print-portrait .matrix-card .matrix-card-img .num {
  position: absolute; top: 0.3rem; left: 0.3rem;
  min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem;
  border-radius: 0.3rem; background: #e11d48; color: #fff;
  font-size: 0.85rem; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-portrait .matrix-card .desc {
  font-size: 9pt; line-height: 1.45;       /* 사진 아래 캡션 9pt */
  word-break: keep-all; overflow-wrap: break-word;
  padding: 0.35rem 0.2rem 0;
  text-align: center;
}

/* ===== 화면에서 실제 A4 출력처럼 보이는 미리보기 (Tab 4 조리 매뉴얼) ===== */
@media screen {
  #trainingManual.print-portrait {
    overflow-x: auto;               /* 좁은 화면에서 A4 폭이 넘칠 때 */
  }
  /* 모든 페이지(표지·본문)를 A4 세로 한 장처럼 */
  #trainingManual .training-page {
    width: 210mm;
    min-height: 297mm;
    padding: 12mm;
    margin: 0 auto 18px;
    border: none;
    border-radius: 2px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
  }
  #trainingManual .training-page.cover-page {
    height: 297mm;
    min-height: 297mm;
    padding: 0;
  }
  #trainingManual .training-page:last-child { margin-bottom: 0; }
}

/* ===== 조리 매뉴얼 상단 툴바 — 전역 헤더 아래에 고정 (sticky) ===== */
.tab4-toolbar {
  position: sticky;
  top: var(--app-header-h, 64px);   /* 전역 헤더 높이만큼 내려서 겹침 방지 */
  z-index: 30;
  background: #f8fafc;              /* body(slate-50)와 동일 — 아래 내용이 비치지 않도록 */
  padding: 0.75rem 0;
  border-bottom: 1px solid #e2e8f0;
}

/* ===== Drag & Drop (Tab 4 매뉴얼 순서 변경) ===== */
.drag-zone [data-rid] {
  cursor: grab;
  transition: transform 0.12s, opacity 0.12s;
}
.drag-zone [data-rid]:active { cursor: grabbing; }
.drag-zone [data-rid].dragging {
  opacity: 0.4;
  transform: scale(0.97);
}
@media print {
  .drag-zone [data-rid] { cursor: default; }
}

/* ===== Drag & Drop (Tab 2 조리 공정 순서 변경) ===== */
.step-item {
  transition: transform 0.12s, opacity 0.12s, box-shadow 0.12s;
}
.step-item:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.step-item.dragging {
  opacity: 0.4;
  transform: scale(0.99);
}
.step-drag-handle {
  cursor: grab;
  user-select: none;
  padding: 4px 2px;
  letter-spacing: -2px;
  font-weight: bold;
}
.step-drag-handle:active { cursor: grabbing; }

/* ===== 매뉴얼 표지 (Tab 4 첫 페이지) ===== */
.cover-page {
  display: block !important;       /* training-page block 유지 */
  height: 280mm;
  min-height: 280mm;
  padding: 0 !important;
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  page-break-after: always;
  break-after: page;
  box-sizing: border-box;
}
.cover-page::before { display: none !important; }   /* 표지엔 워터마크 없음 */

/* 절대 위치로 페이지 정중앙에 고정 — 어떤 부모 컨텍스트에서도 동일하게 작동 */
.cover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40mm);
  max-width: 170mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cover-logo {
  width: auto;
  max-width: 70%;
  max-height: 320px;
  object-fit: contain;
}
.cover-title {
  margin-top: 2rem;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-align: center;
}
.cover-subtitle {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: #475569;
  text-align: center;
}
.cover-date {
  position: absolute;
  bottom: 18mm; right: 22mm;
  font-size: 0.85rem;
  color: #64748b;
}

/* ===== 섹션 탭 네비게이션 (책 열람용 thumb index) ===== */
.section-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 1rem;
}
.section-tabs .stab {
  text-align: center;
  padding: 8px 4px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.section-tabs .stab:hover:not(.active) {
  background: #e2e8f0;
  color: #475569;
}
@media print { .section-tabs .stab { cursor: default; } }
.section-tabs .stab.active {
  background: #0f172a;
  color: #fff;
  border-bottom-color: #e11d48;
  box-shadow: 0 2px 4px rgba(15,23,42,0.2);
}

/* ===== Print Rules ===== */
@media print {
  body { background: white; color: black; }
  .no-print { display: none !important; }
  header, nav { display:none !important; }
  main { max-width: none !important; padding: 0 !important; }
  .page-break { page-break-before: always; }
  .manual-card { page-break-inside: avoid; box-shadow:none !important; border:none !important; }
  /* 인쇄: 섹션별 워터마크 끄고, 페이지마다 1개씩 반복되는 고정(fixed) 워터마크.
     fixed 요소는 브라우저가 모든 인쇄 페이지에 반복 출력 → 페이지당 1개.
     표지(.cover-page)는 흰 배경 + 높은 z-index로 워터마크를 덮어 제외. */
  .watermark-bg::before { display: none !important; }
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: var(--brand-logo, none);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% auto;
    opacity: 0.12;
    z-index: 9999;
    pointer-events: none;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .cover-page { position: relative; z-index: 10000; background: #fff !important; }
  .print-landscape { width: 297mm; min-height: 210mm; }
  .print-portrait  { width: 210mm; min-height: 297mm; }
  @page { margin: 10mm; }

  .training-page {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    page-break-after: always;
    break-after: page;
    min-height: auto;
  }
  .training-page:last-child { page-break-after: auto; }
  .menu-intro-card { box-shadow: none; }
  .kitchen-page {
    border: none !important;
    margin: 0 !important;
    /* @page margin 10mm → 인쇄영역 190×277mm. 페이지를 그 안(190×276mm, 패딩 0)으로 → 항상 1장 */
    width: 190mm !important;
    height: 276mm !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .cover-page {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  .section-tabs .stab,
  .section-tabs .stab.active {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}
@page { size: A4 portrait; }

/* ===== 식재료/부자재 단가표 인쇄 — ID·카테고리 제외, 각 재료 1행에 깔끔히 ===== */
@media print {
  #tab1 .overflow-x-auto { overflow: visible !important; max-height: none !important; }
  #tab1 thead th { position: static !important; }
  /* 미리보기 폭맞춤 zoom 해제 — 인쇄는 항상 원본 A4 크기로 */
  #costSheets, #kitchenManual, #trainingManual, #tabCostSum table { zoom: 1 !important; }
  #tab1 .bg-white { box-shadow: none !important; border: none !important; }
  #tab1 table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  #tab1 thead th {
    background: #f1f5f9 !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    border: 1px solid #cbd5e1; padding: 3px 6px; text-align: left;
  }
  #tab1 tbody td { border: 1px solid #cbd5e1; padding: 3px 6px; vertical-align: top; }
  #tab1 tbody tr { page-break-inside: avoid; }
  #tab1 .text-rose-600 { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ===== 식재료 검색 커스텀 드롭다운 (HTML datalist 대체 — 한글 IME 기본 유지용) ===== */
.ing-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 40;
}
.ing-dropdown .ing-opt {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.85rem;
}
.ing-dropdown .ing-opt:last-child { border-bottom: none; }
.ing-dropdown .ing-opt:hover { background: #f8fafc; }
.ing-dropdown .ing-opt.active { background: #e0e7ff; }   /* ↑/↓ 키보드 강조 */
.ing-dropdown .ing-opt-name { font-weight: 500; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-dropdown .ing-opt-meta { font-size: 0.75rem; color: #64748b; white-space: nowrap; }

/* ===== 원가계산서 메뉴 선택 체크박스 트리 ===== */
.tcost-tree { font-size: 0.875rem; }
.tcost-tree-head { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; color: #334155; padding: 4px 2px; margin-bottom: 6px; user-select: none; }
.tcost-tree-head:hover { color: #1e293b; }
/* 베이스 목록: 1행 4개 그리드 (좁아지면 단계적으로 축소) */
.tcost-tree-body { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-items: start; }
.tcost-base { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.tcost-base-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #f8fafc; }
.tcost-base-main { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; cursor: pointer; }
.tcost-base-main .tcost-name { flex: 1; min-width: 0; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcost-count { flex-shrink: 0; color: #94a3b8; font-size: 0.72rem; font-weight: 400; }
.tcost-exp { flex-shrink: 0; cursor: pointer; color: #4f46e5; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 6px; padding: 0 6px; font-size: 0.8rem; line-height: 1.6; }
.tcost-exp:hover { background: #e0e7ff; }
.tcost-variants { padding: 4px 8px 8px 14px; display: flex; flex-direction: column; gap: 3px; }
.tcost-var { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 1px 0; font-size: 0.82rem; }
.tcost-var .tcost-vname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #334155; }
.tcost-var .tcost-price { margin-left: auto; flex-shrink: 0; color: #e11d48; font-variant-numeric: tabular-nums; }
.tcost-tree input[type=checkbox] { width: 15px; height: 15px; accent-color: #1e293b; cursor: pointer; flex-shrink: 0; }
@media (max-width: 1024px) { .tcost-tree-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .tcost-tree-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .tcost-tree-body { grid-template-columns: 1fr; } }

/* ===== 원가계산서 요약 - 추가항목 ===== */
.cs-addon-chip { display:inline-flex; align-items:center; gap:3px; font-size:11px; background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd; border-radius:999px; padding:1px 6px; }
.cs-addon-rm { cursor:pointer; font-weight:700; color:#0284c7; }
.cs-addon-rm:hover { color:#dc2626; }
#addonModalList .addon-opt { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e2e8f0; border-radius:8px; cursor:pointer; }
#addonModalList .addon-opt:hover { background:#f8fafc; }
#addonModalList .addon-opt.addon-on { background:#eff6ff; border-color:#93c5fd; }
#addonModalList .addon-check { width:16px; color:#2563eb; font-weight:700; flex-shrink:0; text-align:center; }
#addonModalList .addon-name { font-weight:600; color:#0f172a; flex:1; min-width:0; }
#addonModalList .addon-meta { font-size:11px; color:#64748b; white-space:nowrap; flex-shrink:0; }

/* ===== 원가계산서 (Cost Sheet) — A4 1메뉴 1페이지 ===== */
.cost-page {
  width: 210mm;
  min-height: 280mm;
  padding: 14mm 14mm 12mm;
  margin: 0 auto 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-sizing: border-box;
  page-break-after: always;
  break-after: page;
  font-size: 11pt;
  color: #0f172a;
  position: relative;
}
.cost-page:last-child { page-break-after: auto; }
.cost-page .cs-title {
  text-align: center;
  font-size: 18pt;
  font-weight: 900;
  letter-spacing: 0.1em;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.cost-page .cs-header {
  display: grid;
  grid-template-columns: 1fr 55mm;
  gap: 10mm;
  margin-bottom: 10px;
}
.cost-page .cs-meta { display: flex; flex-direction: column; gap: 6px; }
.cost-page .cs-row {
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: 1px dotted #cbd5e1; padding: 4px 0;
}
.cost-page .cs-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-bottom: none;
  padding: 0;
}
.cost-page .cs-row-2 > div {
  display: flex; align-items: baseline; gap: 8px;
  border-bottom: 1px dotted #cbd5e1; padding: 4px 0;
}
.cost-page .cs-label {
  font-size: 9pt;
  color: #64748b;
  font-weight: 600;
  min-width: 50px;
  flex-shrink: 0;
}
.cost-page .cs-value { font-weight: 600; font-size: 11pt; }
.cost-page .cs-menu { font-size: 14pt; font-weight: 800; }
.cost-page .cs-photo {
  width: 55mm; height: 55mm;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc;
}
.cost-page .cs-photo img { width: 100%; height: 100%; object-fit: cover; }
.cost-page .cs-no-photo { font-size: 9pt; color: #94a3b8; }
.cost-page .cs-section-title {
  font-weight: 700; font-size: 11pt;
  background: #0f172a; color: #fff;
  padding: 4px 8px; border-radius: 3px;
  margin: 8px 0 4px;
}
.cost-page .cs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10pt;
}
.cost-page .cs-table th, .cost-page .cs-table td {
  border: 1px solid #cbd5e1;
  padding: 4px 6px;
}
.cost-page .cs-table thead th {
  background: #f1f5f9;
  font-weight: 700;
  font-size: 10pt;
}
.cost-page .cs-table .cs-num { text-align: right; white-space: nowrap; }
.cost-page .cs-table .cs-cat { color: #64748b; font-size: 9pt; }
.cost-page .cs-topping {
  display: inline-block; font-size: 8pt;
  background: #fef3c7; color: #92400e;
  padding: 0 4px; border-radius: 2px; margin-left: 4px;
}
.cost-page .cs-empty { text-align: center; color: #94a3b8; padding: 16px; }
.cost-page .cs-table tfoot td {
  background: #f8fafc;
  font-weight: 600;
  vertical-align: top;
}
/* 합계 영역 2단 압축 — 왼쪽(품명 아래): 총원가·단위원가·Food Cost, 오른쪽: 식재료·포장재 */
.cost-page .cs-foot-grid {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  width: fit-content;
}
.cost-page .cs-foot-grid > span:nth-child(even) { text-align: right; white-space: nowrap; }
.cost-page .cs-foot-grid-right { margin-left: auto; }   /* 오른쪽 묶음은 소계 쪽으로 정렬 */
.cost-page .cs-foot-total { color: #be123c; font-weight: 800; font-size: 11pt; }
.cost-page .cs-foot-unit  { color: #4338ca; font-weight: 700; }
.cost-page .cs-foot-pct   { color: #047857; font-weight: 700; }
.cost-page .cs-foot-pct.cs-pct-warn { color: #be123c; }

/* 구성 하위 레시피 세부내역 (메인 원가계산서 아래, 같은 페이지) */
.cost-page .cs-sub-section-title { background: #475569; margin-top: 14px; }
.cost-page .cs-sub { margin: 6px 0 10px; break-inside: avoid; page-break-inside: avoid; }
/* 하위 레시피 세부내역 — <details>로 기본 접힘. summary 클릭 시 펼침/접힘 */
.cost-page .cs-sub > summary.cs-sub-head { cursor: pointer; list-style: none; }
.cost-page .cs-sub > summary.cs-sub-head::-webkit-details-marker { display: none; }
.cost-page .cs-sub > summary.cs-sub-head::marker { content: ""; }
.cost-page .cs-sub-toggle { display: inline-block; color: #64748b; font-weight: 700;
  transition: transform .12s ease; transform-origin: center; }
.cost-page .cs-sub[open] > summary .cs-sub-toggle { transform: rotate(90deg); }
.cost-page .cs-sub-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 3px 2px; border-bottom: 1.5px solid #cbd5e1; margin-bottom: 3px;
}
.cost-page .cs-sub-name { font-weight: 800; font-size: 11pt; color: #334155; }
.cost-page .cs-sub-meta { font-size: 9pt; color: #64748b; font-weight: 600; white-space: nowrap; }
.cost-page .cs-sub-dot { color: #cbd5e1; margin: 0 2px; }
.cost-page .cs-sub-table { font-size: 9pt; }
.cost-page .cs-sub-table th, .cost-page .cs-sub-table td { padding: 2px 6px; }
.cost-page .cs-sub-table thead th { background: #f8fafc; font-size: 9pt; }
/* 하위 레시피 이름 링크 (클릭 시 해당 메뉴 원가계산서 펼침/접힘 토글) */
.cost-page .cs-link {
  color: #2563eb; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
}
.cost-page .cs-link:hover { color: #1d4ed8; background: #eff6ff; }
.cost-page .cs-link-arrow { font-size: 8pt; margin-right: 2px; text-decoration: none; display: inline-block; }
.cost-page .cs-link-open { color: #047857; }                 /* 펼쳐진 상태 표시 */
.cost-page .cs-link-open:hover { color: #065f46; background: #ecfdf5; }
@media print {
  .cost-page .cs-link { color: inherit; text-decoration: none; font-weight: inherit; }
  .cost-page .cs-link-arrow { display: none; }
}

@media print {
  .cost-page {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 12mm !important;
    min-height: 0;
  }
}

/* 단가표 브랜드 열: 전체 모드에서만 표시 (table에 show-ing-brand 클래스 부여 시) */
#ingredientsTbody .ing-brand-col, thead .ing-brand-col { display: none; }
.show-ing-brand #ingredientsTbody .ing-brand-col,
.show-ing-brand thead .ing-brand-col { display: table-cell; }

/* ============================================================
 * 반응형 (Phase 1) — 좁은 화면/모바일 공통 셸
 * 인쇄/A4(@media print, .cost-page, .kitchen-page 등)는 영향 없음(화면 전용 규칙).
 * ============================================================ */
/* 페이지 가로 스크롤 방지 — 넓은 표는 자체 .overflow-x-auto 컨테이너에서만 스크롤.
 * clip은 hidden과 달리 스크롤 컨테이너를 만들지 않아 sticky 헤더를 깨지 않는다. */
@media screen {
  body { overflow-x: clip; }
  /* ③ 원가계산서·④ 매장 부착용 매뉴얼: 가로 스크롤은 fallback. 기본은 fitPreviewToWidth()가 폭에 맞춰 zoom 축소. */
  #costSheets, #kitchenManual { overflow-x: auto; }
  /* 단가표(①): 표 영역을 높이 제한 세로 스크롤 영역으로 만들고 헤더(thead)를 고정(sticky). */
  #tab1 .overflow-x-auto { max-height: calc(100vh - 220px); overflow: auto; }
  #tab1 thead th { position: sticky; top: 0; z-index: 3; background: #f1f5f9; }
}
@media screen and (max-width: 640px) {
  /* 본문 여백 축소 */
  main { padding-left: 0.75rem; padding-right: 0.75rem; }
  /* 탭 네비: 줄바꿈 없이 가로 스크롤, 터치 스크롤 부드럽게 */
  nav.overflow-x-auto { -webkit-overflow-scrolling: touch; }
  nav .tab-btn { white-space: nowrap; flex: 0 0 auto; }
  /* 표 컨테이너: 터치 가로 스크롤 부드럽게 */
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  /* 등록/가져오기 모달: 작은 화면에서 폼 라벨·여백 조금 축소 */
  #ingModal label, #importModal label { font-size: 0.78rem; }
  /* 헤더 액션 버튼이 줄바꿈될 때 살짝 촘촘하게 */
  header .max-w-7xl { row-gap: 0.4rem; }

  /* 단가표(①): 작은 화면에선 품목명·입고단가·단위변환·상세스펙만 표시 (ID는 항상 hidden) */
  #tab1 .ing-col-cat, #tab1 .ing-col-unitspec, #tab1 .ing-col-supplier, #tab1 .ing-col-actions { display: none !important; }
  #tab1 #ingredientsTbody .ing-brand-col, #tab1 thead .ing-brand-col,
  .show-ing-brand #ingredientsTbody .ing-brand-col, .show-ing-brand thead .ing-brand-col { display: none !important; }

  /* 레시피(②) 소요 식재료 그리드: 작은 화면에선 카테고리·단위원가 숨김 */
  #tab2 .rcp-col-cat, #tab2 .rcp-col-unit { display: none !important; }

  /* 📊 원가계산서 요약: 표를 줄이지 말고 전체 크기 유지 → 컨테이너(.overflow-x-auto)에서 가로 스크롤 */
  #tabCostSum table { min-width: 720px; }
}

/* ============================================================
 * Notion 테마 (design-md/notion/DESIGN.md) — 색·타이포·컴포넌트 스킨.
 * 레이아웃은 유지하고 색/폰트/라운드/보더만 노션 토큰으로 매핑.
 * 인쇄(@media print)는 기존 규칙 유지.
 * ============================================================ */
:root{
  --ntn-primary:#5645d4; --ntn-primary-pressed:#4534b3;
  --ntn-ink:#1a1a1a; --ntn-charcoal:#37352f; --ntn-slate:#5d5b54; --ntn-steel:#787671;
  --ntn-surface:#f6f5f4; --ntn-surface-soft:#fafaf9; --ntn-canvas:#fff;
  --ntn-hairline:#e5e3df; --ntn-hairline-strong:#c8c4be;
}
/* 카테고리 배지 — 노션 태그 틴트 (catBadge가 ntn-tag-* 클래스 사용) */
.ntn-tag-mint{ background:#d9f3e1; color:#1aae39; }
.ntn-tag-sky{ background:#dcecfa; color:#0075de; }
.ntn-tag-lavender{ background:#e6e0f5; color:#391c57; }
.ntn-tag-purple{ background:#5645d4; color:#fff; }
.ntn-tag-gray{ background:#f0eeec; color:#787671; }

@media screen {
  body{ font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Malgun Gothic","Apple SD Gothic Neo",sans-serif; }
  body.bg-slate-50{ background:var(--ntn-surface-soft); }
  body.text-slate-800{ color:var(--ntn-ink); }

  /* 탭 — 밑줄 세그먼트(ink) */
  .tab-btn{ color:var(--ntn-steel); }
  .tab-btn:hover{ color:var(--ntn-charcoal); background:var(--ntn-surface); }
  .tab-btn.active{ color:var(--ntn-ink); border-bottom-color:var(--ntn-ink); }

  /* 입력 — 퍼플 포커스 */
  .form-input:focus{ border-color:var(--ntn-primary); box-shadow:0 0 0 3px rgb(86 69 212 / 0.18); }

  /* 프라이머리 액션(amber/rose 500) → 퍼플, 다크 보조(indigo/slate-800) → 검정, 8px 라운드 */
  .bg-amber-500, .bg-rose-500 { background-color:var(--ntn-primary)!important; }
  .hover\:bg-amber-600:hover, .hover\:bg-rose-600:hover { background-color:var(--ntn-primary-pressed)!important; }
  .bg-indigo-500, .bg-slate-800 { background-color:#000!important; }
  .hover\:bg-indigo-600:hover, .hover\:bg-slate-900:hover { background-color:#1a1a1a!important; }
  .bg-amber-500, .bg-rose-500, .bg-indigo-500, .bg-slate-800 { border-radius:8px!important; }

  /* 표면/보더 중성화 */
  .bg-amber-50 { background-color:var(--ntn-surface)!important; }
  .border-amber-200, .border-amber-300, .border-slate-200, .border-slate-300 { border-color:var(--ntn-hairline)!important; }
  .text-amber-700 { color:var(--ntn-slate)!important; }
  .shadow { box-shadow:rgba(15,15,15,0.04) 0 1px 2px 0!important; }

  /* ⑤ 조리 매뉴얼 — 표지(흰색 유지)·섹션 탭·단계 번호 배지 노션화 */
  .section-tabs .stab.active { background:var(--ntn-ink); border-bottom-color:var(--ntn-primary); }
  .cover-title { font-weight:600; letter-spacing:-0.5px; color:var(--ntn-ink); }
  .cover-subtitle { color:var(--ntn-slate); }
  .print-portrait .matrix-card .matrix-card-img .num { background:var(--ntn-primary)!important; }
}