*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#fff;color:#111;font-family:Arial,"Malgun Gothic",sans-serif}body{min-height:100svh;display:grid;place-items:center}main{width:min(100%,420px);padding:24px;text-align:center}h1{font-size:30px;line-height:1.2;font-weight:500;letter-spacing:1px;margin:0 0 56px}#lock-form{margin:0}#pattern{width:300px;height:300px;max-width:100%;position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);touch-action:none;user-select:none;margin:auto}#pattern svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#trail{fill:none;stroke:#111;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#pattern button{appearance:none;background:none;border:0;position:relative;cursor:pointer;padding:0;touch-action:none;-webkit-tap-highlight-color:transparent}#pattern button:before{content:"";display:block;width:12px;height:12px;background:#000;border-radius:50%;margin:auto;transition:box-shadow .12s}#pattern button.selected:before{background:#000;box-shadow:0 0 0 12px #00000012}#pattern button:focus-visible{outline:1px solid #777;border-radius:50%}#status{min-height:40px;margin:28px 0 0;font-size:13px;line-height:1.6;color:#555}#enrollment{margin:0 0 20px;font-size:12px;color:#555}#enrollment input{display:block;width:100%;margin:14px auto;padding:12px;background:#fff;color:#111;border:1px solid #aaa;border-radius:6px}#enrollment p{line-height:1.6}#restart{border:0;background:none;color:#555;font-size:12px;padding:8px;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.keyboard-submit:focus{position:static;clip:auto;width:auto;height:auto;margin:8px;padding:8px}@media(max-height:650px){main{padding:24px}h1{margin-bottom:24px}#pattern{width:270px;height:270px}#enrollment{margin:0 0 8px}#status{margin-top:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 투명 로고 비율과 글자 중앙 기준 정렬을 유지한다. */
.lock-logo{display:block;width:300px;max-width:100%;height:auto;margin:0 auto 0;transform:translateX(6.5%)}
@media(max-height:650px){.lock-logo{width:230px;margin-bottom:0}main{padding:12px 24px}}