.btl-kiosk { --kiosk-blue: #3449df; min-height: 100vh; min-height: 100dvh; background: #f7f8fb; color: #202534; font-family: "BTL Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.025em; -webkit-font-smoothing: antialiased; }
.btl-kiosk *, .btl-kiosk *::before, .btl-kiosk *::after { box-sizing: border-box; }
.btl-kiosk button, .btl-kiosk input, .btl-kiosk select { font-family: inherit; }
.btl-kiosk button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btl-kiosk button:focus-visible, .btl-kiosk input:focus-visible, .btl-kiosk select:focus-visible { outline: 3px solid #3449df; outline-offset: 3px; }
.btl-kiosk-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1400px; height: 92px; padding: 0 48px; margin: auto; border-bottom: 1px solid #e5e7ee; }
.btl-kiosk-identity { display: flex; align-items: center; gap: 22px; }
.btl-kiosk-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.btl-kiosk-brand > span { font-size: 22px; font-weight: 800; letter-spacing: -.065em; }
.btl-kiosk-brand > span > span { margin-left: 4px; font-weight: 500; }
.btl-kiosk-brand img { flex-shrink: 0; }
.btl-kiosk-mode { padding-left: 22px; border-left: 1px solid #dce1eb; color: #687386; font-size: 13px; }
.btl-kiosk-clock { display: flex; align-items: center; gap: 17px; font-variant-numeric: tabular-nums; }
.btl-kiosk-clock > span { color: #687386; font-size: 13px; }
.btl-kiosk-clock time { color: #202534; font-size: 25px; font-weight: 600; letter-spacing: -.04em; }
.btl-kiosk-workspace { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px,5vw,80px); align-items: center; max-width: 1280px; min-height: calc(100dvh - 92px); margin: auto; padding: 32px 48px; }
.btl-kiosk-overview { min-width: 0; }
.btl-kiosk-eyebrow { color: #687386; font-size: 13px; font-weight: 550; }
.btl-kiosk-welcome h1 { margin: 15px 0 12px; font-size: clamp(29px,3vw,40px); line-height: 1.35; letter-spacing: -.045em; font-weight: 700; text-wrap: balance; }
.btl-kiosk-description { color: #687386; font-size: 14px; line-height: 1.75; text-wrap: pretty; }
.btl-kiosk-academy { display: flex; align-items: center; gap: 14px; margin-top: 22px; color: #687386; font-size: 12px; }
.btl-kiosk-academy select { min-width: 0; min-height: 44px; flex: 1; padding: 8px 12px; border: 1px solid #dfe3eb; border-radius: 8px; color: #202534; background: #fff; font-size: 14px; }
.btl-kiosk-recent { margin-top: 44px; }
.btl-kiosk-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #e2e6ed; }
.btl-kiosk-section-heading h2 { font-size: 15px; font-weight: 650; }
.btl-kiosk-section-heading > span { color: #737d8c; font-size: 11px; }
.btl-kiosk-log-list { max-height: min(33vh,310px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d5d9e3 transparent; }
.btl-kiosk-log { display: flex; align-items: center; gap: 11px; padding: 16px 0; border-bottom: 1px solid #e7eaf0; }
.btl-kiosk-log-type { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 32px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.btl-kiosk-log-type.is-arrival { background: #e7f4ef; color: #22775e; }
.btl-kiosk-log-type.is-departure { background: #edf0ff; color: #3449df; }
.btl-kiosk-log-student { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.btl-kiosk-log-student strong { font-size: 14px; font-weight: 650; }
.btl-kiosk-log-student span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #737d8c; font-size: 11px; }
.btl-kiosk-log time { flex-shrink: 0; color: #5f6878; font-size: 13px; font-variant-numeric: tabular-nums; }
.btl-kiosk-empty { display: flex; min-height: 124px; align-items: center; justify-content: center; color: #737d8c; font-size: 13px; }
.btl-kiosk-account { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btl-kiosk-account button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: #687386; font-size: 12px; }
.btl-kiosk-entry { min-width: 0; width: 100%; max-width: 560px; padding: 30px; border: 1px solid #e5e7ee; border-radius: 16px; background: #fff; box-shadow: 0 5px 20px #20253404; }
.btl-kiosk-entry-heading { text-align: center; }
.btl-kiosk-entry-heading h2 { margin-top: 8px; font-size: clamp(21px,2.3vw,27px); font-weight: 700; line-height: 1.35; letter-spacing: -.04em; }
.btl-kiosk-code { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin-top: 28px; }
.btl-kiosk-digit { display: flex; align-items: center; justify-content: center; height: 62px; border: 1px solid #e3e7ef; border-radius: 8px; color: #202534; background: #f7f8fb; font-size: 29px; font-weight: 650; font-variant-numeric: tabular-nums; }
.btl-kiosk-digit > span { width: 6px; height: 6px; border-radius: 50%; background: #d5dae4; }
.btl-kiosk-digit.is-filled { border-color: #c7cff7; background: #f4f5ff; }
.btl-kiosk-digit.is-next { border-color: #3449df; background: #fff; box-shadow: 0 0 0 2px #3449df0b; }
.btl-kiosk-status { display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 10px 0; text-align: center; }
.btl-kiosk-status > p { color: #737d8c; font-size: 12px; }
.btl-kiosk-status b { font-weight: 600; color: #5f6878; }
.btl-kiosk-notice { display: flex; width: 100%; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 8px; background: #f1f3f8; color: #4d586d; overflow-wrap: anywhere; }
.btl-kiosk-notice strong { font-size: 15px; font-weight: 650; }
.btl-kiosk-notice span { font-size: 12px; }
.btl-kiosk-notice.is-success { background: #eaf6f0; color: #237355; }
.btl-kiosk-notice.is-leave { background: #edf0ff; color: #3449df; }
.btl-kiosk-notice.is-error { background: #fff0f0; color: #b24545; }
.btl-kiosk-keypad { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.btl-kiosk-key { display: flex; align-items: center; justify-content: center; min-height: 74px; padding: 10px; border: 1px solid #e5e7ee; border-radius: 8px; background: #f7f8fb; color: #202534; font-size: 29px; font-weight: 550; font-variant-numeric: tabular-nums; transition: background-color 120ms, transform 100ms, border-color 120ms; }
.btl-kiosk-key.is-confirm { border-color: #3449df; background: #3449df; color: #fff; font-size: 19px; font-weight: 650; }
.btl-kiosk-key.is-back { color: #737d8c; background: #fff; }
.btl-kiosk-key:active { transform: scale(.96); }
.btl-kiosk-key:disabled { opacity: .55; cursor: wait; }
.btl-kiosk-instructions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 23px; color: #737d8c; font-size: 11px; }
.btl-kiosk-instructions > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.btl-kiosk-instructions i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 2px; border-radius: 50%; background: #f0f2f7; font-style: normal; font-size: 10px; }
.btl-kiosk-instructions b { color: #5f6878; font-weight: 600; }
.btl-kiosk--login { display: flex; flex-direction: column; }
.btl-kiosk--login .btl-kiosk-topbar { width: 100%; }
.btl-kiosk-login-main { display: grid; place-items: center; flex: 1; padding: 48px 20px; }
.btl-kiosk-login-card { width: 100%; max-width: 440px; padding: 36px; border: 1px solid #e5e7ee; border-radius: 14px; background: #fff; box-shadow: 0 5px 20px #20253404; }
.btl-kiosk-login-card h1 { margin: 8px 0 10px; font-size: 29px; font-weight: 700; letter-spacing: -.04em; }
.btl-kiosk-login-card .btl-kiosk-description { font-size: 13px; }
.btl-kiosk-login-fields { display: flex; flex-direction: column; margin-top: 28px; }
.btl-kiosk-login-fields label { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #5f6878; }
.btl-kiosk-login-fields input { width: 100%; height: 50px; padding: 10px 13px; margin-bottom: 20px; border: 1px solid #dfe3eb; border-radius: 8px; font-size: 16px; color: #202534; background: #fff; }
.btl-kiosk-login-error { margin-bottom: 18px; padding: 11px 13px; border-radius: 8px; color: #b24545; background: #fff0f0; font-size: 13px; }
.btl-kiosk-login-submit { display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; min-height: 50px; border: 0; border-radius: 8px; color: #fff; background: #3449df; font-size: 15px; font-weight: 600; }
.btl-kiosk-login-help { margin-top: 18px; color: #737d8c; font-size: 12px; text-align: center; }
.btl-kiosk-login-footer { padding: 0 20px 28px; color: #737d8c; font-size: 11px; text-align: center; }
@media (hover: hover) { .btl-kiosk-key:hover:not(:disabled) { background: #edf0ff; border-color: #ccd3fa; } .btl-kiosk-key.is-confirm:hover:not(:disabled), .btl-kiosk-login-submit:hover { background: #293ac5; } .btl-kiosk-account button:hover { color: #3449df; } }
@media (min-width: 761px) and (max-height: 850px) { .btl-kiosk-topbar { height: 76px; } .btl-kiosk-workspace { min-height: calc(100dvh - 76px); padding-block: 24px; } .btl-kiosk-entry { padding: 24px; } .btl-kiosk-code { margin-top: 22px; } .btl-kiosk-key { min-height: 64px; } .btl-kiosk-status { min-height: 74px; } .btl-kiosk-instructions { margin-top: 18px; } }
@media (max-width: 1050px) { .btl-kiosk-topbar { padding-inline: 28px; } .btl-kiosk-workspace { gap: 28px; padding-inline: 28px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } .btl-kiosk-entry { padding: 24px; } .btl-kiosk-welcome h1 { font-size: 30px; } .btl-kiosk-mode { display: none; } }
@media (max-width: 760px) { .btl-kiosk-topbar { height: 76px; padding-inline: 20px; gap: 14px; } .btl-kiosk-brand img { width: 32px; height: 32px; } .btl-kiosk-brand > span { font-size: 19px; } .btl-kiosk-clock { align-items: flex-end; flex-direction: column; gap: 1px; } .btl-kiosk-clock > span { font-size: 10px; } .btl-kiosk-clock time { font-size: 20px; } .btl-kiosk-workspace { grid-template-columns: minmax(0,1fr); gap: 28px; max-width: 560px; padding: 24px 20px; } .btl-kiosk-entry { grid-row: 1; max-width: none; padding: 24px; } .btl-kiosk-welcome h1 { display: none; } .btl-kiosk-welcome .btl-kiosk-description { margin-top: 7px; font-size: 12px; } .btl-kiosk-recent { margin-top: 22px; } .btl-kiosk-log-list { max-height: 240px; } .btl-kiosk-key { min-height: 68px; } .btl-kiosk-entry-heading h2 { font-size: 24px; } .btl-kiosk-digit { height: 58px; font-size: 26px; } .btl-kiosk-account { margin-top: 12px; } .btl-kiosk-login-main { padding-block: 28px; } .btl-kiosk-login-card { padding: 28px; } }
@media (max-width: 390px) { .btl-kiosk-workspace { padding: 16px 12px; } .btl-kiosk-entry { padding: 22px 18px; } .btl-kiosk-code { gap: 6px; } .btl-kiosk-digit { height: 52px; } .btl-kiosk-keypad { gap: 8px; } .btl-kiosk-key { min-height: 64px; } .btl-kiosk-instructions { gap: 8px; font-size: 10px; } .btl-kiosk-entry-heading h2 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .btl-kiosk-key { transition: none; } .btl-kiosk-key:active { transform: none; } }