.ns-note {
margin: 20px 0 0;
padding: 14px 16px;
border: 1px solid #fed7aa;
border-left: 3px solid #ea580c;
border-radius: 12px;
background: #fff7ed;
color: #7c2d12;
font-size: 15px;
}
.pagehead { padding: 40px 0 4px; max-width: 46rem; }
.pagehead h1 { font-size: clamp(26px, 5.4vw, 36px); font-weight: 800; letter-spacing: -.6px; }
.pagehead p { margin-top: 10px; color: var(--slate); font-size: clamp(15px, 3.6vw, 16.5px); }
.studio {
display: grid;
gap: clamp(24px, 4vw, 44px);
align-items: start;
padding: 28px 0 72px;
}
@media (min-width: 1000px) {
.studio { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); }
}
.panelbox { display: grid; gap: 20px; }
.panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px;
display: grid;
gap: 16px;
}
.panel__head { display: flex; align-items: baseline; gap: 12px; }
.panel__head h2 { font-size: 16px; font-weight: 800; }
.aside { margin-left: auto; font-size: 12.5px; color: #94a3b8; text-align: right; }
.field { display: grid; gap: 6px; }
.lbl {
font-size: 12px;
font-weight: 700;
letter-spacing: .03em;
color: var(--slate);
}
.ctrl {
width: 100%;
font: inherit;
font-size: 15px;
color: var(--ink);
background: var(--field);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
transition: border-color .12s, box-shadow .12s;
}
.ctrl:focus {
outline: none;
border-color: #ea580c;
box-shadow: 0 0 0 3px rgba(234, 88, 12, .15);
}
.ctrl.mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13.5px;
line-height: 1.65;
resize: vertical;
}
.note { font-size: 13px; color: #94a3b8; line-height: 1.55; }
.check {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 14.5px;
color: var(--slate);
cursor: pointer;
}
.check input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: #ea580c; }
.picker {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
gap: 10px;
border: 0;
padding: 0;
}
.opt {
display: grid;
gap: 5px;
padding: 10px 8px;
border: 1px solid var(--line);
border-radius: 12px;
cursor: pointer;
text-align: center;
transition: border-color .12s, box-shadow .12s;
}
.opt:hover { border-color: #cbd5e1; }
.opt:has(input:checked) { border-color: #ea580c; box-shadow: inset 0 0 0 1px #ea580c; }
.opt:has(input:focus-visible) { outline: 2px solid #ea580c; outline-offset: 2px; }
.opt__box {
display: grid;
place-items: center;
aspect-ratio: 1;
background: var(--soft);
border-radius: 8px;
}
.opt__chip { display: block; background: var(--chip-off); border-radius: 2px; }
.opt:has(input:checked) .opt__chip { background: #ea580c; }
.opt__name { font-size: 13px; font-weight: 700; }
.opt__size { font-size: 11.5px; color: #94a3b8; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
width: 30px;
height: 30px;
border-radius: 9px;
border: 1px solid rgba(0, 0, 0, .12);
cursor: pointer;
padding: 0;
}
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.preview { display: grid; gap: 12px; }
.preview__bar { display: flex; align-items: baseline; gap: 12px; min-height: 20px; }
.preview__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.preview__foot .note { flex: 1 1 16rem; }
.preview__stage {
--scale: 1;
position: relative;
height: var(--stage-h, auto);
overflow: hidden;
}
.a4 {
width: 210mm;
height: 297mm;
transform: scale(var(--scale));
transform-origin: 0 0;
background: #fff;
box-shadow: 0 18px 44px rgba(15, 23, 42, .14);
display: grid;
grid-template-columns: repeat(var(--cols, 4), var(--cw, 50mm));
grid-template-rows: repeat(var(--rows, 5), var(--ch, 50mm));
align-content: start;
justify-content: start;
overflow: hidden;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.lbl-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1mm;
padding: 2mm;
overflow: hidden;
text-align: center;
}
.a4.show-cut .lbl-cell {
outline: 0.2mm dashed #cbd5e1;
outline-offset: -0.1mm;
}
.lbl-qr {
display: block;
flex: none;
width: calc(var(--ch) * .58);
height: calc(var(--ch) * .58);
}
.a4.no-text .lbl-qr { width: calc(var(--ch) * .78); height: calc(var(--ch) * .78); }
.lbl-qr svg { display: block; width: 100%; height: 100%; }
.lbl-txt {
max-width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: max(1.9mm, calc(var(--ch) * .075));
line-height: 1.25;
color: #16181d;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lbl-cell.is-wide {
flex-direction: row;
gap: 2.5mm;
text-align: left;
justify-content: flex-start;
}
.lbl-cell.is-wide .lbl-qr { width: calc(var(--ch) * .74); height: calc(var(--ch) * .74); }
.a4.no-text .lbl-cell.is-wide .lbl-qr { width: calc(var(--ch) * .8); height: calc(var(--ch) * .8); }
.lbl-cell.is-wide .lbl-txt { -webkit-line-clamp: 3; font-size: max(2.1mm, calc(var(--ch) * .085)); }
@media print {
header,
footer,
.panelbox,
.preview__bar,
.preview__foot,
.pagehead,
.ns-note { display: none !important; }
.wrap { max-width: none; padding: 0; }
.studio { display: block; gap: 0; padding: 0; }
.preview__stage { height: auto; overflow: visible; }
.a4 { transform: none; box-shadow: none; }
}
.howto { padding: 36px 0 8px; max-width: 46rem; }
.howto h2 { font-size: clamp(20px, 4.4vw, 25px); font-weight: 800; letter-spacing: -.5px; margin-bottom: 16px; }
.steps { display: grid; gap: 10px; padding-left: 1.2em; }
.steps li { color: var(--slate); font-size: 15px; line-height: 1.65; }
.steps b { color: var(--ink); font-weight: 700; }
.howto__note {
margin-top: 16px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--soft);
font-size: 14.5px;
color: var(--slate);
line-height: 1.65;
}
.howto__note b { color: var(--ink); font-weight: 700; }