astro-island:has(>.qr-tool){display:block}.qr-tool{--qr-link:#22d3ee;--qr-warning:#fdba74;z-index:1;background:var(--bg-base);color:var(--text-primary);padding:var(--shell-pad);font-family:var(--font-body);position:relative}:root[data-theme=light] .qr-tool{--qr-link:#087b94;--qr-warning:#9a3412}.qr-tool,.qr-tool *{box-sizing:border-box}.qr-tool :is(h1,h2,h3,p,fieldset){margin:0}.qr-tool :is(h1,h2,h3){color:var(--text-primary);font-family:var(--font-display);letter-spacing:-.015em}.qr-tool h1{font-size:calc(clamp(28px, 3vw, 40px) * var(--type-scale));text-wrap:balance;line-height:1.5}.qr-tool h2{font-size:calc(24px * var(--type-scale));line-height:1.5}.qr-tool h3,.qr-tool legend{font-size:calc(18px * var(--type-scale));font-weight:600;line-height:1.6}.qr-tool :is(p,label,button){font-size:calc(16px * var(--type-scale));line-height:1.65}.qr-tool :is(p,legend){color:var(--text-secondary)}.qr-tool :is(h1,h2,h3,p,label,legend,button){overflow-wrap:break-word;text-wrap:pretty}:root[lang=ko] .qr-tool :is(h1,h2,h3,p,label,legend,button){word-break:keep-all}.qr-tool .qr-phrase{display:inline-block}.qr-intro{gap:8px;margin-block-end:24px;display:grid}.qr-workflow{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:24px;display:grid}.qr-tool .qr-card{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);gap:24px;min-width:0;padding:24px;display:grid}.qr-tool fieldset{border:0;min-width:0;max-width:100%;padding:0}.qr-tool legend{max-width:100%;margin-block-end:12px}.qr-type-grid,.qr-ecc-grid{flex-wrap:wrap;gap:8px;display:flex}.qr-tool .qr-choice{flex:1 1 calc(110px * var(--type-scale));border:1px solid var(--text-secondary);border-radius:var(--radius-sm);background:var(--bg-raised);min-width:min-content;max-width:100%;min-height:44px;color:var(--text-primary);cursor:pointer;align-items:center;gap:10px;padding:12px;display:flex}.qr-tool .qr-choice.is-selected{border:2px solid var(--qr-link);padding:11px}.qr-tool :is(.qr-choice,.qr-check) input{inline-size:calc(20px * var(--type-scale));block-size:calc(20px * var(--type-scale));accent-color:var(--qr-link);flex:none;margin:0}.qr-tool .qr-choice:has(input:focus-visible),.qr-tool .qr-check:has(input:focus-visible){outline:3px solid var(--qr-link);outline-offset:3px}.qr-tool .qr-choice:has(input:disabled){cursor:default}.qr-tool .qr-notice{background:var(--bg-raised);border-inline-start:3px solid var(--qr-link);color:var(--text-secondary);gap:8px;padding:16px;display:grid}.qr-tool>.qr-notice{margin-block-end:24px}.qr-tool .qr-notice strong{font-size:calc(16px * var(--type-scale));color:var(--text-primary);line-height:1.65}.qr-fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;min-width:0;display:grid}.qr-field{gap:8px;min-width:0;display:grid}.qr-field--wide{grid-column:1/-1}.qr-tool .qr-field>label{color:var(--text-primary)}.qr-tool .qr-input{border-radius:var(--radius-sm);border:1px solid var(--text-secondary);background-color:var(--bg-raised);width:100%;min-width:0;min-height:44px;color:var(--text-primary);font-family:var(--font-body);font-size:calc(22px * var(--type-scale));letter-spacing:0;padding:12px;line-height:1.6}.qr-tool select.qr-input{color-scheme:dark;padding-inline-end:40px}:root[data-theme=light] .qr-tool select.qr-input{color-scheme:light}.qr-tool textarea.qr-input{resize:vertical}.qr-tool .qr-input:disabled{opacity:1;color:var(--text-secondary);cursor:not-allowed}.qr-tool .qr-input::placeholder{color:var(--text-secondary);opacity:1}.qr-tool :is(button,input,select,textarea,a):focus-visible{outline:3px solid var(--qr-link);outline-offset:3px;box-shadow:none}.qr-check{min-width:0;min-height:44px;color:var(--text-primary);cursor:pointer;align-items:center;gap:10px;display:flex}.qr-tool .qr-help,.qr-tool .qr-advice{font-size:calc(16px * var(--type-scale));color:var(--text-secondary);line-height:1.65}.qr-tool .qr-error{color:var(--qr-warning)}.qr-sample-content,.qr-settings{gap:16px;min-width:0;display:grid}.qr-actions{flex-wrap:wrap;align-items:stretch;gap:12px;min-width:0;display:flex}.qr-tool .qr-button{border:1px solid var(--text-secondary);border-radius:var(--radius-sm);background:var(--bg-raised);min-width:0;max-width:100%;min-height:44px;color:var(--text-primary);font-family:var(--font-body);cursor:pointer;box-shadow:none;padding:10px 16px;font-weight:600;text-decoration:none}.qr-tool .qr-button--primary{background:var(--accent-yellow);color:var(--accent-yellow-fg);border-color:var(--accent-yellow)}.qr-tool .qr-button:disabled{opacity:1;cursor:not-allowed;background:var(--bg-raised);color:var(--text-secondary);border-style:dashed}.qr-tool .qr-button:hover:not(:disabled){border-color:var(--qr-link)}.qr-preview-stage{justify-items:center;width:100%;min-width:0;display:grid}.qr-tool canvas{aspect-ratio:1;width:min(360px,100%);max-width:100%;height:auto;display:block}.qr-settings{border-block-start:1px solid var(--border-default);padding-block-start:24px}.qr-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.qr-tool input[type=color]{background:var(--bg-raised);border:1px solid var(--text-secondary);border-radius:var(--radius-xs);cursor:pointer;width:64px;max-width:100%;height:44px;min-height:44px;padding:4px}.qr-tool input[type=range]{width:100%;min-width:0;min-height:44px;accent-color:var(--qr-link);margin:0}.qr-advice{gap:12px;min-width:0;display:grid}.qr-advice strong{font-size:calc(16px * var(--type-scale));line-height:1.65;font-family:var(--font-code);font-weight:600}.qr-tool a{color:var(--qr-link);text-underline-offset:3px;min-height:44px;font-size:calc(16px * var(--type-scale));align-items:center;line-height:1.65;text-decoration:underline;display:flex}.qr-cases{gap:16px;margin-block-start:32px;display:grid}.qr-case-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}@media (width<=1050px){.qr-workflow{grid-template-columns:minmax(0,1fr)}}@media (width<=600px){.qr-tool .qr-card{padding:16px}.qr-fields,.qr-colors,.qr-case-grid{grid-template-columns:minmax(0,1fr)}.qr-tool .qr-downloads{grid-template-columns:minmax(0,1fr);display:grid}}.qr-tool .qr-samples{min-width:0}.qr-tool summary{cursor:pointer;min-height:44px;color:var(--qr-link);font-size:calc(16px * var(--type-scale));padding-block:10px;line-height:1.65}.qr-tool summary:focus-visible{outline:3px solid var(--qr-link);outline-offset:3px}.qr-tool .qr-sample-content{margin-block-start:12px}
