/* NeCALL 단말 화면 공통 — 국내판 키오스크 디자인 (토큰 원본: packages/tokens/src/necall/necall.css)
 * KDS(1920×1080)·POS(1280×800)는 고정 캔버스를 화면 크기에 맞춰 축소한다 (키오스크 방식). */
@font-face { font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: 400; font-display: block; src: url(./icons.woff2) format('woff2'); }
:root {
  --blue: #1b4f9e; --blue-2: #2a63c4; --blue-3: #e8eef8; --red: #e4342e; --red-2: #c92922;
  --orange: #c7740f; --dark: #2b2b2b; --dark-2: #3a3a3a; --bg: #f3f3f3; --panel: #fff;
  --line: #d8d8d8; --line-2: #eaeaea; --text: #222; --muted: #6d6d6d; --ok: #2a7a2a;
  --font: Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0f0f0f; color: var(--text); font-family: var(--font); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
button:focus-visible { outline: 4px solid #f39a1e; outline-offset: 2px; }
input { font: inherit; }
#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: clip; }
#stage { position: relative; overflow: hidden; background: var(--bg); transform-origin: center center; flex: none; }
.mi { font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; line-height: 1; display: inline-flex; align-items: center; justify-content: center; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; flex: none; }
.logo { display: block; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; font-weight: 800; transition: transform .08s, filter .15s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; }
.btn.red { background: var(--red); color: #fff; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.dark { background: var(--dark); color: #fff; }
.btn.light { background: #fff; color: var(--text); border: 2px solid var(--line); }

/* 수치 박스 (콜론 없이) */
.stat { background: #fff; border: 2px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat span { color: var(--muted); }
.stat b { font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; }

/* 로그인 (키오스크 로그인 화면과 같은 모양) */
.loginscr { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(#f7f7f7, #e9edf3); }
.loginscr .box { width: 620px; background: #fff; border-radius: 24px; padding: 60px 70px 46px; box-shadow: 0 30px 80px rgba(0,0,0,.12); display: flex; flex-direction: column; align-items: center; }
.loginscr h1 { margin: 40px 0 0; font-size: 36px; font-weight: 800; }
.loginscr .sub { margin: 10px 0 30px; color: #777; font-size: 20px; }
.loginscr form { width: 100%; display: flex; flex-direction: column; gap: 18px; }
.loginscr label { display: flex; flex-direction: column; gap: 8px; font-size: 20px; font-weight: 600; color: #444; }
.loginscr input { height: 70px; border: 2px solid #ccc; border-radius: 10px; padding: 0 20px; font-size: 26px; background: #fff; color: #222; -webkit-user-select: text; user-select: text; }
.loginscr input:focus { outline: none; border-color: var(--blue-2); }
.loginscr .err { color: var(--red-2); font-size: 18px; font-weight: 700; min-height: 1em; text-align: center; }
.loginscr .btn { height: 78px; font-size: 28px; margin-top: 6px; }
.loginscr .foot { margin-top: 28px; color: #aaa; font-size: 16px; }

/* 모달 · 토스트 */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 20; animation: fade .15s; }
.modal { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: pop .18s; }
.toast { position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); background: rgba(0,0,0,.82); color: #fff; padding: 18px 34px; border-radius: 12px; font-size: 22px; z-index: 40; animation: fade 2.4s forwards; }
.conn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.conn.on { color: var(--ok); } .conn.off { color: var(--red-2); }

@keyframes fade { 0% { opacity: 0 } 10% { opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0 } }
@keyframes pop { from { transform: scale(.9); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes enter { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(228,52,46,0) } 50% { box-shadow: 0 0 0 8px rgba(228,52,46,.45) } }
@keyframes bump { 0% { transform: scale(1) } 40% { transform: scale(1.18) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }