* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0e1525; --card: #18223a; --card2: #1f2c49; --line: #2b3a5c;
  --txt: #e8edf7; --sub: #8ea2c4; --accent: #4f8cff; --accent2: #2f9e44;
  --warn: #e8590c; --danger: #e03131;
}

body {
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg); color: var(--txt); min-height: 100vh; padding-bottom: 78px;
}

.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; background: linear-gradient(135deg, #1b2748, #0e1525);
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 17px; font-weight: 800; }
.brand .ver { font-size: 10px; color: #5e6f91; font-weight: 400; }
.appbar-right { display: flex; align-items: center; gap: 8px; }
.stock-pill { background: var(--card2); color: var(--sub); padding: 6px 11px; border-radius: 20px; font-size: 12px; white-space: nowrap; }
.stock-pill b { color: var(--accent); }

/* v33 — 음성안내 토글 / 로그인 기억 / 생체인식 버튼 */
.voice-btn { background: var(--card2); color: var(--txt); border: 1px solid var(--line); padding: 7px 10px; font-size: 14px; border-radius: 20px; line-height: 1; }
.voice-btn.off { opacity: .55; }
#voiceToggle { padding: 7px 9px; font-size: 16px; }
.remember-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); cursor: pointer; user-select: none; padding: 2px 2px; }
.remember-row input { width: auto; margin: 0; }
.bio-btn { background: transparent; color: var(--txt); border: 1px solid var(--accent); padding: 12px; font-size: 14px; font-weight: 700; }
.login-bottom { display: flex; justify-content: center; margin-top: 4px; }
.login-bottom .voice-btn { font-size: 12px; padding: 8px 12px; }

/* 모드/지점 선택바 */
.setupbar {
  position: sticky; top: 49px; z-index: 19;
  display: flex; align-items: center; gap: 8px; padding: 9px 16px;
  background: #101a30; border-bottom: 1px solid var(--line);
}
.ctxline { flex: 1; min-width: 0; font-size: 13px; color: var(--txt); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctxline .ctype { font-size: 11px; color: var(--accent); }

/* 로그인 화면 */
.login-screen { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.login-logo { font-size: 24px; font-weight: 800; text-align: center; }
.login-sub { font-size: 12px; color: var(--sub); text-align: center; margin-bottom: 6px; }
.login-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
.ltab { flex: 1; background: var(--card2); color: var(--sub); border: 1px solid var(--line); padding: 11px; font-size: 13px; }
.ltab.active { background: var(--accent); color: #fff; border-color: transparent; }
#login-dealer, #login-admin { display: flex; flex-direction: column; gap: 10px; }

.screen { padding: 16px; max-width: 720px; margin: 0 auto; }
.view { display: none; flex-direction: column; gap: 11px; }
.view.active { display: flex; }
.view h2 { font-size: 18px; }
.hint-inline { font-size: 12px; color: var(--sub); font-weight: 400; margin-left: 6px; }

input, select, textarea {
  width: 100%; padding: 12px 13px; background: var(--card);
  border: 1px solid var(--line); border-radius: 11px; color: var(--txt); font-size: 15px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
textarea { min-height: 80px; resize: vertical; }
select { appearance: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.scan-row { display: flex; gap: 7px; }
.scan-row input { flex: 1; }

button {
  border: none; border-radius: 11px; cursor: pointer; font-size: 15px;
  font-weight: 600; color: #fff; padding: 12px 13px; transition: opacity .15s, transform .05s;
}
button:active { transform: scale(.98); }
button.primary { background: var(--accent); }
button.scan { background: var(--card2); color: var(--txt); white-space: nowrap; padding: 12px 13px; }
button.ghost { background: transparent; border: 1px solid var(--line); color: var(--sub); }
button.mini { padding: 6px 10px; font-size: 12px; }

.msg { font-size: 13px; min-height: 15px; }
.msg.ok { color: #51cf66; } .msg.err { color: #ff6b6b; }
.hidden { display: none !important; }
.hint { font-size: 12px; color: var(--sub); }

/* 리스트/카드 */
.list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.unit { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; }
.unit .u-top { display: flex; justify-content: space-between; align-items: center; }
.unit .u-model { font-weight: 700; }
.unit .u-serial { font-size: 12px; color: var(--sub); font-family: monospace; margin-top: 2px; }
.unit .u-meta { font-size: 12px; color: var(--sub); margin-top: 5px; }
.unit .u-actions { display: flex; gap: 6px; margin-top: 9px; }
.unit .u-actions button { padding: 7px 11px; font-size: 13px; }
.badge { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px; }
.badge.재고 { background: #143a2a; color: #51cf66; }
.badge.판매 { background: #15294d; color: #74a9ff; }
.badge.AS { background: #3a2410; color: #ffa94d; }
.badge.반품 { background: #3a1520; color: #ff8fb3; }
.u-actions .ret-btn { border-color: #6b2a3a; color: #ff8fb3; }
/* 대시보드 기간 조회 패널 — 차종 표는 2열 */
#dash-period .cat-head, #dash-period .cat-row { grid-template-columns: 1.4fr 1fr; }

/* v37 — 동기화 상태칩 / 업데이트 배너 / 백업 도구 / 연간존 구분 */
.sync-chip { font-size: 11px; padding: 5px 9px; border-radius: 20px; white-space: nowrap; background: var(--card2); color: var(--sub); border: 1px solid var(--line); }
.sync-chip.ok { color: #51cf66; }
.sync-chip.syncing { color: #ffd43b; border-color: #5a4a1a; }
.sync-chip.off { color: #ff6b6b; border-color: #5a2a2a; }
.sync-chip.warn { color: #ffa94d; }
.update-banner { position: sticky; top: 49px; z-index: 18; background: #15294d; color: #cfe0ff; border-bottom: 1px solid var(--accent); padding: 9px 14px; font-size: 13px; text-align: center; }
.update-banner button { background: var(--accent); color: #fff; padding: 6px 12px; font-size: 12px; border-radius: 8px; margin-left: 8px; }
.dash-tools { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.dash-tools .sub-head { width: 100%; }
.dash-tools button { flex: 1 1 45%; }
.region.zone-sep { margin-top: 20px; padding-top: 12px; border-top: 2px dashed var(--line); }
.region.zone-sep h3 { color: var(--accent); }

/* 반품 모달 — 사유 선택 버튼 / 처리방법 */
.reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reason-btn { background: var(--card2); color: var(--txt); border: 1px solid var(--line); padding: 12px; font-size: 14px; font-weight: 600; }
.reason-btn.sel { background: var(--accent); border-color: transparent; color: #fff; }
.restock-opts { display: flex; flex-direction: column; gap: 8px; }
.ropt { display: flex; align-items: center; gap: 8px; font-size: 14px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 11px; cursor: pointer; }
.ropt input { width: auto; margin: 0; }
.ropt .hint { margin-left: auto; }
#returnModal .info-box { font-size: 14px; }
.empty { color: var(--sub); text-align: center; padding: 22px; }

.info-box { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 13px; font-size: 14px; line-height: 1.7; }
.info-box .k { color: var(--sub); }
.info-box .big { font-size: 16px; font-weight: 700; }
.info-box .ok { color: #51cf66; } .info-box .err { color: #ff6b6b; }
.info-box img.sign-thumb { background: #fff; border-radius: 6px; margin-top: 4px; max-width: 140px; }

/* 탭 */
.tabs { display: flex; gap: 6px; }
.tab { flex: 1; background: var(--card); color: var(--sub); border: 1px solid var(--line); padding: 10px; font-size: 13px; }
.tab.active { background: var(--accent); color: #fff; border-color: transparent; }

/* 주의사항 체크리스트 */
.notes-box { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.notes-title { font-weight: 700; margin-bottom: 8px; font-size: 14px; }
.notes-title .mini { float: right; }
.sub-head { font-size: 12px; color: var(--accent); font-weight: 700; margin: 10px 0 4px; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--txt); margin: 6px 0; line-height: 1.4; }
.chk input { width: auto; margin-top: 2px; }
.chk-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.chk-item .chk-t { font-size: 13px; flex: 1; line-height: 1.4; }
.chk-opts { display: flex; gap: 10px; white-space: nowrap; }
.chk-opts label { font-size: 12px; color: var(--sub); display: flex; align-items: center; gap: 4px; }
.chk-opts input { width: auto; }
.chk-opts input.agree-na { accent-color: #888; }

/* 서명 패드 */
.sign-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sign-col { display: flex; flex-direction: column; gap: 6px; }
.sign-label { font-size: 12px; color: var(--sub); }
.sign-pad { width: 100%; height: 110px; background: #fff; border-radius: 10px; border: 1px solid var(--line); touch-action: none; }

/* 대시보드 */
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.metric { background: var(--card2); border-radius: 11px; padding: 13px; }
.metric .label { font-size: 12px; color: var(--sub); }
.metric .value { font-size: 24px; font-weight: 800; margin-top: 3px; }
.metric .value.blue { color: var(--accent); }
.metric .value.green { color: #51cf66; }
.metric .value.amber { color: #ffa94d; }

.region { margin-top: 14px; }
.region h3 { font-size: 14px; color: var(--sub); margin-bottom: 8px; }
.branch-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.branch-name { width: 86px; font-size: 13px; }
.bar-track { flex: 1; background: var(--card); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); }
.branch-nums { font-size: 12px; color: var(--sub); white-space: nowrap; min-width: 96px; text-align: right; }

.order-row { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin: 6px 0; }
.order-m { font-weight: 700; font-size: 14px; }
.order-d { font-size: 12px; color: var(--sub); margin-top: 3px; }
.order-act { font-size: 13px; margin-top: 5px; }
.order-act.urgent { color: #ff6b6b; font-weight: 700; }
.order-act b { color: var(--accent); }
.order-m small { color: var(--sub); font-weight: 400; font-size: 11px; }
.sales-sub { font-size: 12px; color: var(--sub); margin: 8px 2px 0; line-height: 1.6; }
.sales-sub b { color: var(--accent); }

/* 브랜드 분석 */
.brand-an { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin: 6px 0; }
.brand-an.under { border-color: #5a2a2a; }
.ba-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.ba-h span { font-size: 12px; color: var(--sub); }
.ba-cause { font-size: 12px; color: #ffb4b4; margin-top: 6px; line-height: 1.5; }
.ba-ok { font-size: 12px; color: #51cf66; margin-top: 5px; }
/* 차종 전년대비 표 */
.cat-head, .cat-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 6px; padding: 7px 10px; font-size: 13px; }
.cat-head { color: var(--sub); font-size: 11px; border-bottom: 1px solid var(--line); }
.cat-row { background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin: 5px 0; }
.cat-row .up { color: #51cf66; font-weight: 700; }
.cat-row .down { color: #ff6b6b; font-weight: 700; }

/* 실재고/내역 기간 필터 (AS 처리현황과 동일 스타일) */
.stock-filter { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 11px; margin-top: 4px; }
.stock-filter .as-quick { display: flex; gap: 6px; }
.stock-filter .as-quick button { flex: 1; background: var(--card2); color: var(--sub); border: 1px solid var(--line); padding: 8px; font-size: 12px; }
.stock-filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stock-count { font-size: 13px; color: var(--sub); text-align: right; margin: 10px 2px 4px; }
.stock-count b { color: var(--accent); }

/* AS 접수 현황 */
.as-filter { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 11px; }
.as-quick { display: flex; gap: 6px; }
.as-quick button { flex: 1; background: var(--card2); color: var(--sub); border: 1px solid var(--line); padding: 8px; font-size: 12px; }
.as-count { font-size: 13px; color: var(--sub); text-align: right; margin: 10px 2px 4px; }
.as-count b { color: var(--accent); }
.as-head { display: grid; grid-template-columns: 52px 1fr 1.4fr 64px; gap: 6px; font-size: 11px; color: var(--sub); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.as-row { display: grid; grid-template-columns: 52px 1fr 1.4fr 64px; gap: 6px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin: 6px 0; cursor: pointer; font-size: 12px; }
.as-row .asc-g { font-weight: 700; }
.as-row .asc-no { font-family: monospace; font-size: 11px; color: var(--sub); }
.as-row .asc-p { font-weight: 600; }
.as-row .asc-p small { color: var(--sub); font-weight: 400; font-size: 11px; }
.as-st { font-size: 11px; font-weight: 700; padding: 4px 7px; border-radius: 20px; text-align: center; white-space: nowrap; }
.as-st.ing { background: #3a2410; color: #ffa94d; }
.as-st.done { background: #143a2a; color: #51cf66; }

/* 네비 */
.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; background: #121b30; border-top: 1px solid var(--line); }
.navbtn { flex: 1; background: none; color: var(--sub); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 11px; font-size: 11px; font-weight: 600; }
.navbtn span { font-size: 19px; }
.navbtn.active { color: var(--accent); }

/* 모달 */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 440px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.modal-head-btns { display: flex; align-items: center; gap: 6px; }
.modal-head button { background: none; color: var(--sub); padding: 4px 8px; font-size: 18px; }
.modal-head button.flip { background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
#reader { width: 100%; border-radius: 12px; overflow: hidden; }
/* v41 — 박스재고 배지 / 단말기 연속스캔 입력 */
.badge.박스재고 { background: #2a2440; color: #b9a6ff; }
#in-scan-buffer { border-color: var(--accent); }
#in-scan-buffer:focus { outline: 2px solid var(--accent); }

/* v43 — 스캐너 토치/줌 */
.flip.on { background: #ffd43b; color: #1a1a1a; }
.zoom-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; font-size: 14px; }
.zoom-row input[type=range] { flex: 1; }