/** QR code generator: scoped styles using the live theme tokens.
 *  ⛔ .qr-hero 는 2026-09-16 에 걷어냈다 — 상단은 셸의 도구 밴드(chrome=band)가 그린다. */
.qr-page .otl-body { background: var(--text-white); }
.qr-app, .qr-app *, .qr-app *::before, .qr-app *::after { box-sizing: border-box; }
.qr-app { width: 100%; max-width: var(--max-w); min-width: 0; margin: 0 auto; padding: var(--space-xl) var(--px) var(--space-2xl); color: var(--t-body); font-size: var(--font-base); line-height: 1.6; }
#qr-app [hidden] { display: none; }
.qr-app :is(h2, h3, p) { margin: 0; }
.qr-app h2 { color: var(--t-main); font-size: var(--font-lg); font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
.qr-app :is(button, input, textarea, select) { font: inherit; }
.qr-workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: var(--space-2xl); align-items: start; }
.qr-editor, .qr-output, .qr-panel, .qr-field, .qr-settings-grid { min-width: 0; }
.qr-editor { display: grid; gap: var(--space-lg); }
.qr-tabs { display: flex; gap: var(--space-lg); min-width: 0; border-bottom: 1px solid var(--surface-300); }
.qr-app .qr-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); margin: 0 0 -1px; padding: var(--space-sm) 0 var(--space-md); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--gray-600); font-size: var(--font-base); font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.qr-app .qr-tab[aria-selected="true"] { border-bottom-color: var(--primary); color: var(--primary); font-weight: 700; }
.qr-app .qr-tab:hover { color: var(--primary-dark); }
.qr-tab__note { color: var(--gray-500); font-size: var(--font-xs); font-weight: 400; }
.qr-panel, .qr-bulk-fields { display: grid; gap: var(--space-lg); }
.qr-field { display: grid; gap: var(--space-sm); align-content: start; }
.qr-field > label, .qr-field-label, .qr-label-row > label { color: var(--t-main); font-size: var(--font-sm); font-weight: 600; }
.qr-app .qr-help { color: var(--gray-600); font-size: var(--font-sm); font-weight: 400; line-height: 1.65; }
.qr-help strong { color: var(--t-body); font-weight: 600; }
.qr-app .qr-input { display: block; width: 100%; min-width: 0; margin: 0; padding: var(--space-nm); border: 1px solid var(--surface-300); border-radius: var(--radius-md); background: var(--text-white); box-shadow: none; color: var(--t-main); font-size: var(--font-base); line-height: 1.6; }
.qr-app .qr-input::placeholder { color: var(--gray-500); opacity: 1; }
.qr-app .qr-textarea { resize: vertical; }
.qr-app .qr-textarea--single { min-height: calc(1.6em + var(--space-nm) * 2 + 2px); overflow-y: hidden; }
.qr-app .qr-textarea--bulk { min-height: calc(var(--space-3xl) * 3); tab-size: 4; }
.qr-app .qr-input:disabled { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; }
.qr-section-heading, .qr-label-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); }
.qr-settings { display: block; padding: var(--space-md) 0; border-top: 1px solid var(--surface-200); border-bottom: 1px solid var(--surface-200); }
.qr-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--t-main); font-size: var(--font-md); font-weight: 600; list-style: none; cursor: pointer; }
.qr-settings > summary::-webkit-details-marker { display: none; }
.qr-settings > summary svg { width: var(--space-md); height: var(--space-md); flex: none; color: var(--gray-600); }
.qr-settings[open] > summary svg { transform: rotate(180deg); }
.qr-settings-content { padding-top: var(--space-lg); }
.qr-settings:not([open]) .qr-settings-content { display: none; }
.qr-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
.qr-app .qr-checkbox { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: calc(var(--space-2xl) + var(--space-xs)); color: var(--t-body); font-size: var(--font-sm); font-weight: 400; cursor: pointer; }
.qr-checkbox input { width: var(--space-md); height: var(--space-md); flex: none; margin: 0; accent-color: var(--primary); }
.qr-bulk-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-nm); padding-block: var(--space-xs); }
.qr-bulk-actions output { color: var(--gray-600); font-size: var(--font-sm); font-variant-numeric: tabular-nums; }
.qr-bulk-actions output[data-over="true"] { color: var(--color-danger); }
.qr-app .qr-button, .qr-app .qr-result-download { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: calc(var(--space-xl) + var(--space-nm)); margin: 0; padding: var(--space-sm) var(--space-md); border: 1px solid transparent; border-radius: var(--radius-md); box-shadow: none; font-size: var(--font-md); font-weight: 600; line-height: 1.5; text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); }
.qr-button svg { width: var(--space-md); height: var(--space-md); flex: none; }
.qr-app .qr-button--primary { background: var(--primary); color: var(--text-white); }
.qr-app .qr-button--primary:hover:not(:disabled) { background: var(--primary-dark); color: var(--text-white); }
.qr-app .qr-button--secondary { border-color: var(--surface-300); background: var(--text-white); color: var(--t-main); }
.qr-app .qr-button--secondary:hover:not(:disabled) { background: var(--surface-100); }
.qr-app .qr-button--text { min-height: calc(var(--space-xl) + var(--space-xs)); padding: var(--space-xs) var(--space-sm); border-color: transparent; background: transparent; color: var(--primary); font-size: var(--font-sm); }
.qr-app .qr-button--text:hover:not(:disabled) { background: var(--surface-100); color: var(--primary-dark); }
.qr-button--full { width: 100%; }
.qr-app .qr-button:disabled, .qr-app .qr-result-download:disabled { opacity: .48; cursor: not-allowed; }
.qr-local-note { display: flex; align-items: flex-start; gap: var(--space-2xs); color: var(--gray-600); font-size: var(--font-xs); line-height: 1.65; }
.qr-local-note svg { width: var(--space-md); height: var(--space-md); flex: none; margin-top: var(--space-xs); }
.qr-output { display: grid; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--surface-200); border-radius: 8px; }
.qr-output-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.qr-output-actions .qr-button { min-width: 0; padding-inline: var(--space-sm); font-size: var(--font-sm); }
.qr-output-format { color: var(--gray-500); font-size: var(--font-xs); letter-spacing: .06em; }
.qr-preview-stage { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: var(--space-md); border-radius: var(--radius-md); background: var(--gray-100); }
.qr-preview-empty { display: grid; justify-items: center; gap: var(--space-sm); text-align: center; }
.qr-preview-empty svg { width: var(--space-3xl); height: var(--space-3xl); margin-bottom: var(--space-sm); color: var(--gray-400); }
.qr-preview-empty p { color: var(--t-body); font-size: var(--font-md); font-weight: 600; }
.qr-preview-empty span { color: var(--gray-600); font-size: var(--font-sm); line-height: 1.65; }
.qr-preview-loading { display: grid; justify-items: center; gap: var(--space-md); color: var(--gray-600); font-size: var(--font-sm); text-align: center; }
.qr-preview-spinner { display: block; width: var(--space-xl); height: var(--space-xl); border: calc(var(--space-xs) / 2) solid var(--surface-300); border-top-color: var(--primary); border-radius: var(--radius-full); animation: qr-preview-spin .8s linear infinite; }
@keyframes qr-preview-spin { to { transform: rotate(360deg); } }
.qr-app #qr-preview-image { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr-app #qr-preview-image[hidden] { display: none; }
.qr-preview-meta { min-width: 0; color: var(--gray-600); font-size: var(--font-sm); text-align: center; overflow-wrap: anywhere; }
.qr-app .qr-link { color: var(--primary); font-size: var(--font-sm); font-weight: 600; text-decoration: underline; text-underline-offset: var(--space-xs); }
.qr-app .qr-link:hover { color: var(--primary-dark); }
.qr-single-login { text-align: center; }
.qr-scan-note { padding-top: var(--space-md); border-top: 1px solid var(--surface-200); color: var(--gray-600); font-size: var(--font-sm); line-height: 1.7; }
.qr-bulk-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.qr-member-gate { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--surface-200); border-radius: var(--radius-md); background: var(--surface-100); }
.qr-member-gate > svg { width: var(--space-lg); height: var(--space-lg); flex: none; color: var(--primary); }
.qr-member-gate > div { display: grid; gap: var(--space-sm); }
.qr-member-gate h2 { font-size: var(--font-base); }
.qr-member-gate p { color: var(--gray-600); font-size: var(--font-sm); }
.qr-app .qr-example-toggle { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0 0 0 auto; padding: var(--space-xs) 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--primary); font-size: var(--font-xs); font-weight: 600; line-height: 1.5; cursor: pointer; }
.qr-app .qr-example-toggle:hover { color: var(--primary-dark); }
.qr-example-toggle svg { width: var(--space-md); height: var(--space-md); flex: none; }
.qr-example-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.qr-example { padding: var(--space-md); border-radius: var(--radius-md); background: var(--surface-100); color: var(--t-body); font-size: var(--font-sm); overflow-x: auto; }
.qr-example table { width: 100%; margin: 0 0 var(--space-sm); border: 0; border-collapse: collapse; background: transparent; font-size: var(--font-sm); }
.qr-example :is(th, td) { padding: var(--space-sm); border: 1px solid var(--surface-300); text-align: left; white-space: nowrap; }
.qr-example th { color: var(--t-main); font-weight: 600; }
.qr-example p { color: var(--gray-600); }
.qr-app[data-mode="bulk"] .qr-workspace { grid-template-columns: minmax(0, 1fr); }
.qr-app[data-mode="bulk"] .qr-settings-content { max-width: calc(var(--space-3xl) * 10); }
.qr-feedback { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.qr-status:empty { display: none; }
.qr-status { color: var(--t-body); font-size: var(--font-sm); overflow-wrap: anywhere; }
.qr-status.is-error, .qr-status[data-kind="error"], .qr-status[data-type="error"] { color: var(--color-danger); }
.qr-status.is-success, .qr-status[data-kind="success"], .qr-status[data-type="success"] { color: var(--primary); }
.qr-notice { padding: var(--space-md); border: 1px solid var(--surface-200); border-radius: var(--radius-md); background: var(--surface-100); color: var(--t-body); font-size: var(--font-sm); }
.qr-app > .qr-notice, .qr-app > noscript > .qr-notice { margin-bottom: var(--space-lg); }
.qr-progress-wrap { display: grid; gap: var(--space-sm); }
.qr-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-size: var(--font-sm); }
.qr-progress-heading label { font-weight: 600; }
.qr-progress-wrap progress { display: block; width: 100%; height: var(--space-sm); margin: 0; border: 0; border-radius: var(--radius-sm); background: var(--surface-200); color: var(--primary); accent-color: var(--primary); overflow: hidden; }
.qr-progress-wrap progress::-webkit-progress-bar { background: var(--surface-200); }
.qr-progress-wrap progress::-webkit-progress-value { background: var(--primary); }
.qr-progress-wrap progress::-moz-progress-bar { background: var(--primary); }
.qr-results { display: grid; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--surface-300); }
.qr-results-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); }
.qr-results-heading > div { display: grid; gap: var(--space-xs); }
.qr-table-wrap { width: 100%; overflow: auto; overscroll-behavior-inline: contain; }
.qr-results-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; color: var(--t-body); font-size: var(--font-sm); }
.qr-results-table :is(th, td) { padding: var(--space-nm); border: 0; border-bottom: 1px solid var(--surface-200); background: var(--text-white); text-align: left; vertical-align: middle; }
.qr-results-table th { border-bottom-color: var(--surface-300); color: var(--gray-600); font-size: var(--font-xs); font-weight: 600; white-space: nowrap; }
.qr-results-table td:first-child { font-variant-numeric: tabular-nums; }
.qr-result-thumb { display: block; width: var(--space-3xl); height: var(--space-3xl); max-width: none; object-fit: contain; image-rendering: pixelated; }
.qr-result-name { min-width: calc(var(--space-3xl) * 2); max-width: calc(var(--space-3xl) * 3); overflow-wrap: anywhere; }
.qr-result-value { min-width: calc(var(--space-3xl) * 3); max-width: calc(var(--space-3xl) * 6); white-space: pre-wrap; overflow-wrap: anywhere; }
.qr-result-status { min-width: calc(var(--space-3xl) + var(--space-xl)); max-width: calc(var(--space-3xl) * 3); color: var(--primary); overflow-wrap: anywhere; }
.qr-result-status.is-error, .qr-result-status[data-status="error"], .qr-result-status[data-kind="error"] { color: var(--color-danger); }
.qr-app .qr-result-download { min-height: calc(var(--space-xl) + var(--space-xs)); padding: var(--space-xs) var(--space-nm); border-color: var(--surface-300); background: var(--text-white); color: var(--t-body); font-size: var(--font-sm); white-space: nowrap; }
.qr-app .qr-result-download:hover:not(:disabled) { background: var(--surface-100); color: var(--primary-dark); }
.qr-results-footnote { line-height: 1.7; }
.qr-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qr-app :is(button, input, select, textarea, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; box-shadow: none; }
.qr-app .qr-input[aria-invalid="true"] { border-color: var(--color-danger); }
.qr-app .qr-input[aria-invalid="true"]:focus-visible { outline: none; }
@media (max-width: 64rem) {
	/* 좌우 거터는 도구 밴드와 같은 한 벌: 30 → 24 → 20 */
	.qr-app { padding-inline: 24px; }
	.qr-workspace { gap: var(--space-lg); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
	.qr-output { padding: var(--space-md); }
	.qr-settings-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-nm); }
	.qr-app .qr-checkbox { min-height: var(--space-xl); }
}
@media (max-width: 48rem) {
	.qr-app { padding: var(--space-lg) 20px var(--space-xl); }
	.qr-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
	.qr-tabs { gap: var(--space-lg); }
	.qr-tab__note { font-size: var(--font-xs); }
	.qr-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qr-output { padding: var(--space-lg); }
	.qr-preview-stage { max-width: calc(var(--space-3xl) * 6); justify-self: center; }
	.qr-bulk-actions .qr-button { width: 100%; }
	.qr-bulk-actions output { margin-left: auto; }
	.qr-results-heading { display: grid; }
	.qr-results-heading .qr-button { width: 100%; }
}
@media (max-width: 25rem) {
	.qr-settings-grid { grid-template-columns: minmax(0, 1fr); }
	.qr-tab__note { display: none; }
	.qr-member-gate { padding: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
	.qr-app .qr-button { transition: none; }
	.qr-preview-spinner { animation: none; }
}