/* 구형 브라우저용: CSS 변수·grid 없이, flex 는 -webkit- 접두어와 함께 */
* { -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #FFF8F1; color: #1A1A1A; font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; word-break: keep-all; }
button { font-family: inherit; cursor: pointer; }
.muted { color: #5d6965; }
.btn { font-size: 20px; font-weight: 900; border: 3px solid #1A1A1A; border-radius: 999px; padding: 16px; background: #1A1A1A; color: #fff; -webkit-box-shadow: 4px 4px 0 #FFE77A; box-shadow: 4px 4px 0 #FFE77A; }
.btn[disabled] { opacity: .4; }
.btn.ghost { background: #FFFFFF; color: #1A1A1A; -webkit-box-shadow: 3px 3px 0 #1A1A1A; box-shadow: 3px 3px 0 #1A1A1A; }
.wide { display: block; width: 100%; margin-top: 12px; }

.pair { max-width: 420px; margin: 0 auto; padding: 24px 16px; text-align: center; }
.pair h1 { font-size: 24px; }
.pair .code { font-size: 44px; letter-spacing: .25em; font-weight: 900; color: #1A1A1A; margin: 16px 0; font-family: Menlo, monospace; }
.msg.err { background: #fdf0e8; color: #9a3b12; padding: 10px; border-radius: 10px; }

.keypad { overflow: hidden; margin: 0 -4px; }
.key { float: left; width: 31.333%; height: 64px; margin: 1%; font-size: 26px; font-weight: 900; background: #fff; border: 2px solid #1A1A1A; border-radius: 14px;
  -webkit-box-shadow: 3px 3px 0 #1A1A1A; box-shadow: 3px 3px 0 #1A1A1A; }
.key:active { background: #BFEADF; -webkit-box-shadow: none; box-shadow: none; }

.head { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 12px 20px; background: #FFF8F1; border-bottom: 3px solid #1A1A1A; }
.biz { -webkit-flex: 1; flex: 1; font-size: 24px; font-weight: 900; }
.clock { font-size: 18px; color: #5d6965; }
.clock b { font-size: 30px; color: #1c2321; font-family: Menlo, monospace; margin-left: 8px; }
.offline { background: #b42318; color: #fff; padding: 10px 20px; font-weight: 700; }
.cols { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 12px; }
.col { -webkit-flex: 1 1 320px; flex: 1 1 320px; padding: 8px; }
.qrcol { text-align: center; }
.qrbox { background: #fff; border: 3px solid #1A1A1A; border-radius: 18px; padding: 16px; margin: 0 auto; max-width: 380px; min-height: 200px; -webkit-box-shadow: 6px 6px 0 #1A1A1A; box-shadow: 6px 6px 0 #1A1A1A; }
.qrbox svg { width: 100%; height: auto; display: block; }
.bar { height: 10px; background: #FFFFFF; border: 2px solid #1A1A1A; border-radius: 6px; margin: 14px auto 0; max-width: 380px; overflow: hidden; }
.bar div { height: 6px; background: #FFE77A; width: 100%; -webkit-transition: width 1s linear; transition: width 1s linear; }
.hint { font-size: 18px; text-align: center; margin: 12px 0; }
.emps { overflow: hidden; }
.emp { float: left; width: 46%; margin: 2%; min-height: 76px; font-size: 22px; font-weight: 900; background: #fff; border: 2px solid #1A1A1A; border-radius: 16px; padding: 10px; -webkit-box-shadow: 4px 4px 0 #1A1A1A; box-shadow: 4px 4px 0 #1A1A1A; }
.emp small { display: block; font-size: 14px; color: #1A1A1A; min-height: 18px; }
.emp.working { background: #BFEADF; }

.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 10; overflow: auto; }
.sheet { background: #FFF8F1; border: 3px solid #1A1A1A; max-width: 400px; margin: 24px auto; border-radius: 20px; padding: 18px; text-align: center; -webkit-box-shadow: 6px 6px 0 #1A1A1A; box-shadow: 6px 6px 0 #1A1A1A; }
.sheet h2 { margin: 4px 0 12px; font-size: 26px; }
.types { overflow: hidden; margin-bottom: 12px; }
.type { float: left; width: 48%; margin: 0 1%; font-size: 22px; font-weight: 900; padding: 14px; border-radius: 999px; border: 2px solid #1A1A1A; background: #fff; color: #1A1A1A; }
.type.on { background: #FFE77A; -webkit-box-shadow: 3px 3px 0 #1A1A1A; box-shadow: 3px 3px 0 #1A1A1A; }
.dots { height: 28px; margin: 6px 0 12px; }
.dots span { display: inline-block; width: 18px; height: 18px; border-radius: 9px; border: 2px solid #1A1A1A; margin: 0 8px; }
.dots span.on { background: #1A1A1A; }

.toast { position: fixed; left: 0; right: 0; bottom: -120px; margin: 0 auto; max-width: 520px; background: #1A1A1A; color: #fff; border: 3px solid #1A1A1A; font-size: 24px; font-weight: 800;
  padding: 20px; border-radius: 16px; text-align: center; -webkit-transition: bottom .25s; transition: bottom .25s; z-index: 30; }
.toast:not(.show) { visibility: hidden; }
.toast.show { bottom: 24px; }
.toast.err { background: #b42318; font-size: 20px; }
.failed { background: #fdf0e8; color: #9a3b12; padding: 10px 20px; font-size: 15px; }
.failed .btn { font-size: 14px; padding: 6px 12px; margin-top: 6px; }
.type { margin-bottom: 6px; }