/* ───── 모바일 전용 화면 (폭 820px 이하에서만 적용) ───── */
:root{--tab-h:58px;--safe-b:env(safe-area-inset-bottom,0px)}
html,body{overscroll-behavior:none}
body{font-size:15px;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-size:16px!important}            /* iOS 자동 확대 방지 */
.btn{min-height:42px;padding:8px 14px}
.btn.sm{min-height:36px;padding:4px 12px}
.btn .lbl{display:inline!important}

/* 틀: 사이드바 숨기고 위(제목·검색) / 가운데(내용) / 아래(탭바) */
body.shell #app:not([hidden]){display:flex;flex-direction:column}
body.shell #sidebar{display:none}
body.shell #content{height:100%;padding-bottom:calc(var(--tab-h) + var(--safe-b))}
body.shell #topbar{display:block;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;background:var(--navy);color:#fff}
.m-bar{display:flex!important;align-items:center;gap:8px}
.m-bar b{flex:1;font-size:18px;letter-spacing:.5px}
.m-bar button{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:10px;width:42px;height:42px;font-size:18px}
#topRight{display:none}
#searchForm{display:none;max-width:none;margin-top:8px}
#topbar.m-search #searchForm{display:flex}
#searchForm .btn{padding:0 16px}
#searchResults{max-height:55vh}
body.shell main{padding:12px 12px 20px;overflow-x:hidden}

/* 하단 탭바 */
#tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(20,35,80,.08)}
#tabbar a,#tabbar button{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;background:none;color:var(--muted);padding:0}
#tabbar span{font-size:20px;line-height:1}
#tabbar em{font-style:normal;font-size:11px;font-weight:600}
#tabbar .active{color:var(--blue)}
#tabbar .active em{font-weight:800}
#tabbar .badge-n{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;line-height:18px;font-size:11px}

/* 더보기 시트 */
#moreSheet{display:block;position:fixed;inset:0;z-index:120}
#moreSheet .m-back{position:absolute;inset:0;background:rgba(14,26,58,.45)}
#moreSheet .m-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;padding:16px 14px calc(16px + var(--safe-b));box-shadow:0 -10px 30px rgba(0,0,0,.2)}
.m-user{padding:0 4px 12px;font-size:15px}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-grid a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px;background:var(--gray-soft);border-radius:12px;font-weight:600;font-size:13.5px}
.m-grid a span{font-size:24px}
.m-acts{display:grid;gap:8px;margin-top:14px}
.m-acts button{min-height:46px;border:1px solid var(--line);background:#fff;border-radius:10px;font-weight:600}
.m-acts button[data-act=quitBtn]{background:var(--red);border-color:var(--red);color:#fff}

/* 페이지 머리 */
body.shell .page-head{margin-bottom:10px;gap:6px}
body.shell .page-head h1{font-size:20px}
.page-head p{display:none}
.page-head .actions{margin-left:0;width:100%;display:flex;flex-wrap:wrap}
.page-head .actions .btn{flex:1 1 auto}

/* 격자 → 한 줄 (KPI는 옆으로 밀어서 보는 띠) */
.kpis{display:flex!important;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;scrollbar-width:none;margin-bottom:10px;padding-bottom:2px}
.kpis::-webkit-scrollbar{display:none}
.kpis > .kpi{flex:0 0 auto;min-width:148px;scroll-snap-align:start}
.row3,.cols2,.sms-grid,.split,body.shell .sms-grid,body.shell .sch-wrap{grid-template-columns:minmax(0,1fr)!important}
body.shell .split.fill{overflow:visible}
body.shell .split.fill > *{overflow:visible;min-height:0}
body.shell .card.fill{overflow:visible;display:block}
body.shell .card.fill > .table-wrap{overflow:visible}
body.shell main > .fill{min-height:0;flex:none}
body.shell #smsBody.fill,body.shell #schBody.fill{overflow:visible;display:block}
body.shell .sms-grid > .card{max-height:none;overflow:visible}
body.shell .kpi{padding:10px}
body.shell .kpi .v{font-size:17px}
body.shell .kpi .ic{width:36px;height:36px;font-size:16px}
body.shell .card{padding:12px}
.row3 .card > svg,.card svg{max-width:100%;height:auto}
.donut-wrap svg{width:110px!important;height:110px!important}
.kv{grid-template-columns:92px 1fr}
.kv>.wide{grid-column:span 1}
.f .two{grid-template-columns:1fr}
.detail-head{flex-wrap:wrap}
.detail-head .actions{margin-left:0;width:100%}
.veh{flex-wrap:wrap}
.veh .ops{flex-direction:row;margin-left:0;width:100%}
.filters{gap:6px}
.filters input:not([type=checkbox]),.filters select{flex:1 1 140px;min-height:42px}
.filters input[type=checkbox]{flex:none;width:22px;height:22px;min-height:0}
.filters label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.tabs button{white-space:nowrap;padding:10px 14px}
.set-nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.set-nav button{white-space:nowrap;min-height:38px}
body.shell main .card[id]{scroll-margin-top:8px}
.pager{flex-wrap:wrap}
.pager button{min-width:38px;height:38px}

/* 표 → 카드 */
table.m-cards,table.m-cards tbody,table.m-cards tr,table.m-cards td{display:block;width:100%}
table.m-cards thead{display:none}
table.m-cards tr{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:8px 12px;background:#fff;box-shadow:var(--shadow)}
table.m-cards tr:hover{background:#fff}
table.m-cards td,body.shell table.m-cards td{display:flex!important;justify-content:space-between;align-items:center;gap:14px;border:0;padding:3px 0;font-size:14px;white-space:normal;text-align:right;min-width:0;max-width:none}
table.m-cards td::before{content:attr(data-label);flex:none;color:var(--muted);font-size:12.5px;text-align:left}
table.m-cards td[data-label=""]::before{display:none}
table.m-cards td[data-label=""]{justify-content:flex-end;flex-wrap:wrap}
table.m-cards td:empty{display:none!important}
table.m-cards td.wrap{min-width:0}
table.m-cards td[colspan]{justify-content:center;color:var(--muted)}
table.m-cards td[colspan]::before{display:none}
table.m-cards td .btn{min-height:38px}
table.m-cards select{max-width:60%}
.wo-table td:nth-child(4){display:flex}

/* 달력: 칸에는 일정 종류별 점만 표시, 자세한 내용은 아래 목록에서 */
.cal-cell{min-height:54px!important;padding:3px!important}
.cal-grid:not(.week) .chip,.cal-grid:not(.week) .more-ev{display:none}
.cal-grid:not(.week) .dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-top:3px}
.dots i{width:7px;height:7px;border-radius:50%;border:0!important;background:#2563eb;padding:0}
.dots i.ev-in{background:#12a56b}.dots i.ev-out{background:#f08a1c}.dots i.ev-next{background:#7c5ce6}
.cal-grid:not(.week) .cal-num{text-align:center}
.cal-grid.week{grid-template-columns:minmax(0,1fr)}
.cal-grid.week .cal-cell{min-height:0!important;border-right:0}
body.shell .cal-card .cal-grid{grid-template-rows:none}
body.shell .cal-cell{overflow:visible}

/* 모달 → 아래에서 올라오는 시트 */
.overlay{place-items:end stretch;padding:0}
.modal{width:100%;max-height:92dvh;border-radius:18px 18px 0 0}
.modal .body{padding:14px 16px}
.modal footer{padding:10px 16px calc(10px + var(--safe-b));position:sticky;bottom:0;background:#fff}
.modal footer .btn{flex:1}
#toast{bottom:calc(var(--tab-h) + var(--safe-b) + 14px);max-width:calc(100vw - 32px);text-align:center}

/* 로그인 화면 */
#auth .auth-card,#auth form{max-width:100%}
.auth-quit{right:12px;bottom:calc(12px + var(--safe-b))}

/* 대화창: 전체 화면 */
#chatFab{display:none}
#chatPanel{inset:0;right:0;bottom:0;width:100%;max-width:none;height:100dvh;border:0;border-radius:0;z-index:150}
#chatPanel header{padding:calc(10px + env(safe-area-inset-top,0px)) 10px 10px}
#chatPanel header button{min-width:42px;min-height:42px}
#chatForm{padding:8px 8px calc(8px + var(--safe-b))}
#chatForm .btn{min-height:44px}
#chatForm textarea{height:44px}
.pp{padding:14px 16px}
#chatList .cm{max-width:92%}
#chatList .cm .x{opacity:1}
#chatList .cimg img{max-height:260px}
.cks{max-height:none}