* { box-sizing: border-box; }
html { background: #210503; }
body { margin: 0; color: #fff0cf; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.poster { position: relative; width: 100%; max-width: 750px; min-height: 100svh; aspect-ratio: 750 / 1468; margin: 0 auto; background: #210503 url("images/poster-background.webp") center top / 100% auto no-repeat; container-type: inline-size; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.poster-form { position: absolute; top: 88.8cqw; left: 17.2%; width: 65.8%; }
#employee-no { display: block; width: 100%; height: 11.2cqw; min-height: 44px; padding: 0 3.6cqw; border: 0; border-radius: 2.5cqw; background: #fff; color: #30231d; font-size: max(16px, 4.27cqw); }
#employee-no::placeholder { color: #cacaca; opacity: 1; }
#match-button { display: block; width: 100%; height: 12.53cqw; min-height: 44px; margin: 5cqw 0 0; padding: 0 0 .4cqw; border: 0; background: url("images/poster-button.png") center / 100% 100% no-repeat; color: #4c2904; font-size: 4.8cqw; font-weight: 700; letter-spacing: .8cqw; cursor: pointer; }
#match-button:disabled { cursor: wait; filter: brightness(.8); }
button:focus-visible, input:focus-visible { outline: 3px solid #ffe29b; outline-offset: 4px; }
#scan-error { margin: 2cqw 0 0; color: #fff0cf; text-align: center; font-size: max(14px, 2.4cqw); line-height: 1.5; }
#scan-error:empty { display: none; }
.scan-result { margin-top: 2cqw; padding: 2cqw; border: 1px solid #b38a43; border-radius: 1.6cqw; background: rgb(35 5 2 / 92%); text-align: center; font-size: max(14px, 2.4cqw); line-height: 1.5; }
#push-status { margin: 0; }
#retry-button { min-height: 44px; margin-top: 8px; padding: 8px 20px; border: 1px solid #e6c16c; border-radius: 8px; color: #ffe7af; background: #4a160b; cursor: pointer; }
.poster-unavailable { position: absolute; top: 88.8cqw; left: 10%; width: 80%; padding: 24px; background: rgb(35 5 2 / 94%); border: 1px solid #b38a43; border-radius: 16px; text-align: center; line-height: 1.6; }
.poster-unavailable h2 { margin-top: 0; }