/* ============================================================
   인쇄물 — 라벨·POP·QR 의 실제 인쇄 모양
   화면 미리보기와 PDF 가 같은 규칙을 쓴다. 테마와 무관하게 늘 흰 종이·검은 글씨.
   ============================================================ */

.sheet { color: #000; }
.sheet * { box-sizing: border-box; }

/* ---------- 식품 라벨 표 ---------- */
.lt {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 0.25mm solid #000;
  border-left: 0.25mm solid #000;
  line-height: 1.14;
  color: #000;
  --hw: 4.6em;                  /* 항목 이름 칸의 최소 너비 */
}
.lr { display: grid; flex: 1 1 auto; }
.lr.lnote { grid-template-columns: minmax(0, 1fr); }

.lt .th, .lt .td {
  border-right: 0.25mm solid #000;
  border-bottom: 0.25mm solid #000;
  padding: 0.12em 0.32em;
  display: flex;
  align-items: center;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.lt .th {
  font-weight: 700;
  background: #ececec;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 0.12em 0.28em;
}
.lt .td.notice { justify-content: center; text-align: center; }

.lt .fl { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }

/* 알레르기 배지 — 원재료명 안에 회색으로 붙는다 */
.lt .alg {
  display: inline-block;
  max-width: 100%;
  background: #d4d4d4;
  padding: 0 0.3em;
  margin-left: 0.3em;
  font-weight: 700;
  vertical-align: baseline;
}

/* ---------- 미리보기 틀 ---------- */
.preview-scroll {
  overflow: auto;
  /* 세로 스크롤바 자리를 미리 비워 둔다 — 없으면 그려진 뒤 폭이 줄어 가로 스크롤바가 생긴다 */
  scrollbar-gutter: stable;
  background: var(--surface-3);
  border-radius: var(--r);
  padding: var(--s-5);
  max-height: 72vh;
}
.preview-pages { display: flex; flex-direction: column; gap: var(--s-5); align-items: flex-start; }
.preview-page-no {
  font-size: var(--fs-xs); color: var(--ink-2); font-weight: 700;
  margin-bottom: var(--s-2);
}

/* ---------- 수량 조절 ---------- */
.qty-ctl {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
  width: 116px;
  flex: none;
}
.qty-ctl button {
  border: 0; background: var(--surface-2); cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--ink); padding: 0;
}
.qty-ctl button:hover { background: var(--surface-3); }
.qty-ctl input {
  border: 0; border-radius: 0; text-align: center;
  padding: var(--s-2) 0; min-height: 38px;
  background: var(--surface); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty-ctl input::-webkit-outer-spin-button,
.qty-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 용지 고르기 카드 ---------- */
.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--s-3);
}
.size-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--s-3) var(--s-2) var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  font: inherit; color: var(--ink);
}
.size-card:hover { background: var(--surface-2); border-color: var(--line-2); }
.size-card[aria-pressed="true"] {
  border-color: var(--point); background: var(--point-soft); color: var(--point);
  box-shadow: inset 0 0 0 1px var(--point);
}

/* A4 한 장과 그 위의 칸을 실제 비율로 */
.size-figure { display: block; margin-bottom: 3px; }
.size-figure .paper {
  fill: var(--surface);
  stroke: var(--line-2);
  stroke-width: 1;
}
.size-figure .slot {
  fill: var(--surface-3);
  stroke: var(--ink-3);
  stroke-width: .4;
}
.size-card[aria-pressed="true"] .size-figure .paper { fill: var(--surface); stroke: var(--point); }
.size-card[aria-pressed="true"] .size-figure .slot  { fill: var(--point); stroke: none; opacity: .85; }

.size-card .nm  { font-size: var(--fs-xs); font-weight: 700; }
.size-card .sub { font-size: 10.5px; color: var(--ink-3); line-height: 1.3; }
.size-card[aria-pressed="true"] .sub { color: var(--point); }

/* ---------- 항목 담기 목록 ---------- */
.pick-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.pick-row:last-child { border-bottom: 0; }
.pick-row .nm { flex: 1; min-width: 0; }

/* ---------- 인쇄 위치 보정 ---------- */
.nudge-pad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: var(--s-2);
  justify-content: center;
}
.nudge-pad button {
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; font-size: 16px; color: var(--ink);
}
.nudge-pad button:hover { background: var(--surface-2); }
.nudge-pad .center {
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3);
  border-style: dashed;
}

/* ---------- 라벨 내용 입력: 목록 + 편집 2단 ---------- */
@media (max-width: 760px) {
  .label-split { grid-template-columns: 1fr !important; }
  .label-split > div:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
    max-height: 240px !important;
  }
}

/* ============================================================
   인쇄물 화면 뼈대 — 왼쪽 작업 / 오른쪽 미리보기
   ============================================================ */

.print-layout {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(360px, 1.05fr);
  gap: var(--s-5);
  align-items: start;
}

.print-left {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}

/* 탭 */
.ptabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.ptab {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: var(--s-3) var(--s-4);
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--ink-2);
  font: inherit; text-align: left; cursor: pointer;
  min-width: 0;
}
.ptab + .ptab { border-left: 1px solid var(--line); }
.ptab:hover { background: var(--surface-3); color: var(--ink); }
.ptab .t { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.ptab .h { font-size: 11px; color: var(--ink-3); white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ptab[aria-selected="true"] {
  background: var(--surface);
  color: var(--point);
  border-bottom-color: var(--point);
}
.ptab[aria-selected="true"] .h { color: var(--point); opacity: .8; }

.ppanel { padding: var(--s-5); max-height: calc(100vh - 210px); overflow-y: auto; }

/* 오른쪽 미리보기 — 스크롤해도 따라온다 */
.print-right {
  position: sticky;
  top: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  min-width: 0;
}
.pv-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  min-height: 46px;
}
.pv-head h2 { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.print-right .preview-scroll {
  border-radius: 0;
  max-height: calc(100vh - 260px);
  min-height: 260px;
}
.pv-actions {
  display: flex; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* 좁은 화면 — 위아래로 쌓고 미리보기를 접을 수 있게 */
@media (max-width: 1040px) {
  .print-layout { grid-template-columns: 1fr; }
  .print-right { position: static; }
  .ppanel { max-height: none; }
  .print-right .preview-scroll { max-height: 56vh; }
}