:root {
  font-family: "Noto Sans KR", "Noto Sans", "Malgun Gothic", sans-serif;
  color: #182033; background: #f2f4fc; font-weight: 400;
  --ink: #182033; --muted: #586377; --brand: #5b5ce2; --brand-dark: #3730a3;
  --border: #d1d5e5; --control: 52px; --radius: 24px;
  --body: .875rem; --caption: .8125rem; --title: 1rem; --main: 1.125rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; padding: 32px 24px; font-size: var(--body); line-height: 1.6; background: linear-gradient(135deg, #f6f7ff, #f2f4fc 55%, #eaedff); }
main { width: min(100%, 650px); margin: 0 auto; }
.glass-panel, .result-screen { padding: 24px; border: 1px solid #d5d8eaba; border-radius: var(--radius); background: linear-gradient(135deg, #fffffff3, #f5f6ffe1); box-shadow: 0 3px 12px #1820330a; }
@supports (backdrop-filter: blur(16px)) { .glass-panel, .result-screen, dialog { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } }
h1, h2 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
h1, #result-title { font-size: var(--main); }
.glass-panel > h1 { margin-bottom: 24px; }
h2 { font-size: var(--title); }
form { display: grid; gap: 20px; }
label, .signature-field { display: grid; gap: 8px; }
label, .field-label { font-size: var(--body); font-weight: 600; }
input { width: 100%; min-height: var(--control); padding: 12px 16px; color: var(--ink); border: 1px solid var(--border); border-radius: 16px; background: #fff; font: inherit; font-weight: 400; }
input:focus { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: -2px; }
button { min-height: var(--control); min-width: 88px; padding: 8px 16px; color: #fff; border: 1px solid transparent; border-radius: 16px; background: linear-gradient(100deg, var(--brand), var(--brand-dark)); font: inherit; font-size: var(--body); font-weight: 600; line-height: 1.5; cursor: pointer; transition: filter .15s, background-color .15s; }
button.secondary { color: var(--ink); border-color: var(--border); background: linear-gradient(#ffffffe6, #eceff9e1); }
button:hover:not(:disabled) { filter: brightness(.97); }
button:active:not(:disabled) { filter: brightness(.92); }
button:focus-visible, canvas:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.signature-wrap { position: relative; }
canvas { display: block; width: 100%; height: auto; touch-action: none; background: #fff; border: 1px solid var(--border); border-radius: 16px; cursor: crosshair; }
#clear-signature { position: absolute; top: 8px; right: 8px; min-height: 32px; min-width: 0; padding: 4px 10px; font-size: var(--caption); line-height: 1.5; border-radius: 10px; }
.privacy-warning { margin: 0; padding: 16px; color: var(--muted); border: 1px solid #dedfec; border-radius: 16px; background: #f7f7fd; font-size: var(--caption); line-height: 1.65; }
.privacy-warning strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: var(--body); font-weight: 600; }
.privacy-card { padding: 16px; border: 1px solid #dedfec; border-radius: 16px; background: #f7f7fd; }
.privacy-card p { margin: 10px 0 0; color: var(--muted); }
.privacy-terms { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: var(--caption); }
.privacy-terms th, .privacy-terms td { padding: 10px 0; border-bottom: 1px solid #dedfec; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.privacy-terms th { width: 30%; padding-right: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.privacy-terms td { font-weight: 400; }
.privacy-detail { font-size: var(--caption); line-height: 1.55; }
.consent-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.consent-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 400; }
.consent-options input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; accent-color: var(--brand-dark); }
.consent-options input:focus { outline: none; }
.consent-options input:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.result-actions { margin-top: 24px; justify-content: center; gap: 12px; }
.result-screen { display: grid; justify-items: center; text-align: center; align-content: start; }
.result-warning { width: min(100%, 480px); text-align: left; }
.qr { display: flex; justify-content: center; width: min(100%, 560px); margin: 20px 0; padding: 0; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
body.showing-qr { padding: 16px 8px; }
body.showing-qr main { width: min(100%, 650px); }
.result-screen { padding: 20px 0; }
.result-screen > h2, .result-warning, .result-actions { max-width: calc(100% - 32px); }
dialog { width: min(calc(100% - 48px), 520px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: hidden; color: var(--ink); border: 1px solid #d5d8eaba; border-radius: var(--radius); background: linear-gradient(135deg, #fffffffd, #f6f7fdf8); box-shadow: 0 8px 32px #1820331f; }
dialog::backdrop { background: #14162647; }
.confirm-card { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px; max-height: calc(100vh - 50px); max-height: calc(100dvh - 50px); }
.confirm-card h2 { flex-shrink: 0; font-size: var(--title); }
.confirm-card .actions { flex-shrink: 0; justify-content: flex-end; padding-top: 8px; }
.dialog-message { margin: 0; min-height: 0; overflow: auto; color: var(--muted); line-height: 1.65; overflow-wrap: anywhere; }
dl { display: grid; grid-template-columns: minmax(70px, 100px) minmax(0, 1fr); gap: 12px; margin: 0; padding: 16px; min-height: 0; overflow: auto; border: 1px solid #dedfec; border-radius: 16px; background: #f7f7fd; }
dt { color: var(--muted); } dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
dialog[open] { animation: dialog-in .18s ease-out; }
dialog.closing { animation: dialog-out .16s ease-in both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 520px) { body { padding: 24px 16px; } .glass-panel, .result-screen { padding: 20px; } .result-actions { width: 100%; } .result-actions button { flex: 1 1 auto; } input { font-size: 1rem; } }
@media (max-width: 520px) { body.showing-qr { padding: 12px 8px; } .result-screen { padding: 16px 0; } .result-actions { gap: 8px; margin-top: 16px; } .qr { margin: 16px 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }