/* QR · 라벨 스튜디오 — 앱 전용 스타일(공통은 css/site.css 사본) */
:root { --accent: #1d4ed8; --accent-soft: #dbeafe; }
.qr-two { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.types { flex-wrap: wrap; margin-bottom: 14px; } .types button { flex: 1 1 auto; }
.fields { display: grid; gap: 10px; margin-bottom: 14px; }
.fields .field { margin: 0; }
.fields input[type="text"], .fields input[type="url"], .fields input[type="email"], .fields input[type="tel"], .fields textarea, .fields select, .opts-grid input, .opts-grid select, #b-sheet { width: 100%; }
.fields textarea { min-height: 90px; resize: vertical; }
h3 { font-size: .95rem; margin: 6px 0 8px; color: var(--muted); }
.opts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ec-lab { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ec-lab > label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.qmark { position: relative; flex: none; width: 18px; height: 18px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1; cursor: help; display: inline-flex; align-items: center; justify-content: center; }
.qmark-tip { display: none; position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: 260px; max-width: 70vw; padding: 8px 10px; background: #0f172a; color: #fff; font-size: .75rem; font-weight: 500; line-height: 1.45; text-align: left; border-radius: 8px; box-shadow: var(--shadow); pointer-events: none; }
.qmark:hover .qmark-tip, .qmark:focus .qmark-tip, .qmark:focus-visible .qmark-tip { display: block; }
.opts-grid .field { margin: 0; } .opts-grid .wide { grid-column: 1 / -1; }
.opts-grid input[type="color"] { height: 38px; padding: 2px; }
.preview-card { position: sticky; top: 12px; }
.qr-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px; background: #fff; text-align: center; }
.qr-box svg { width: 100%; max-width: 280px; height: auto; display: block; }
.qr-box .cap { font-weight: 700; margin-top: 6px; word-break: break-all; }
.payload { white-space: pre-wrap; word-break: break-all; background: var(--soft); padding: 8px; border-radius: 8px; font-size: .75rem; max-height: 140px; overflow: auto; }
.ta { width: 100%; min-height: 150px; resize: vertical; font-family: var(--mono); font-size: .85rem; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); white-space: pre; }
.chk { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: .92rem; }
/* 시트 미리보기: 210×297 mm 를 화면에 축소 */
.sheet-wrap { overflow: hidden; min-width: 0; }
.sheet { width: 210mm; height: 297mm; background: #fff; box-shadow: var(--shadow); position: relative; transform-origin: top left; }
.sheet .cell { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; outline: 1px dashed #cbd5e1; outline-offset: -1px; }
.sheet .cell svg { display: block; height: auto; }
.sheet .cell .lb { font-weight: 700; text-align: center; line-height: 1.15; max-width: 94%; overflow: hidden; word-break: break-all; }
.sheet .cell .tx { font-size: 6pt; color: #475569; text-align: center; max-width: 94%; overflow: hidden; word-break: break-all; }
.sheet .page-break { page-break-after: always; break-after: page; }
@media (max-width: 900px) { .qr-two { grid-template-columns: 1fr; } .preview-card { position: static; } }
@media print {
  @page { size: A4 portrait; margin: 0; }
  body { background: #fff; } .main { padding: 0; max-width: none; margin: 0; } .lead { display: none; }
  #single, #tabs, .no-print { display: none !important; }
  #batch { display: block !important; } .qr-two { display: block; }
  .sheet-wrap { overflow: visible; } .sheet { box-shadow: none; margin: 0 !important; transform: none !important; width: 210mm; height: 297mm; page-break-after: always; }
  .sheet:last-child { page-break-after: auto; }
  .sheet .cell { outline: 0; }
}
