.qr-cards{display:grid;gap:24px;margin:24px 0}
.qr-editor{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:24px;min-width:0;scroll-margin-top:16px}
.qr-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}
.qr-card-head h2{font-size:18px}
.qr-editor-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr);gap:28px}
.qr-fields,.qr-fields [data-kind]{display:grid;gap:14px;min-width:0}
.qr-fields [hidden]{display:none!important}
.qr-fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-3);min-width:0}
.qr-fields input:not([type=checkbox]),.qr-fields select,.qr-fields textarea{width:100%;min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:10px;color:var(--ink);font-size:14px}
.qr-fields input[type=color]{height:42px;padding:4px;cursor:pointer}
.qr-fields textarea{resize:vertical;min-height:110px}
.qr-fields .qr-check{flex-direction:row;align-items:center}
.qr-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qr-result{min-width:0;align-self:start;text-align:center;background:var(--surface-2);border-radius:12px;padding:20px}
.qr-image canvas{display:block;width:100%;max-width:360px;height:auto;margin:auto}
.qr-image:empty{min-height:190px;display:grid;place-items:center;border:1px dashed var(--border-strong);border-radius:8px}
.qr-image:empty::after{content:'QRコードのプレビュー';font-size:13px;color:var(--ink-3)}
.qr-message{font-size:13px;margin:14px 0;overflow-wrap:anywhere}
.qr-result .utility-toolbar{justify-content:center}
.qr-fields input:focus-visible,.qr-fields select:focus-visible,.qr-fields textarea:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
@media(max-width:1000px){.qr-editor-grid{grid-template-columns:1fr}.qr-editor{padding:18px}.qr-result{width:100%}}