/* U+웍스 차량운행일지 — 디자인 기준 v1 토큰 */
/* Pretendard v1.3.9 (SIL Open Font License 1.1) — public/fonts/LICENSE.txt */
@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url("/fonts/Pretendard-Regular.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;src:url("/fonts/Pretendard-SemiBold.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url("/fonts/Pretendard-Bold.subset.woff2") format("woff2")}
@font-face{font-family:"Pretendard";font-weight:800;font-display:swap;src:url("/fonts/Pretendard-ExtraBold.subset.woff2") format("woff2")}
:root{
  --primary:#0E6E6B; --primary-dark:#0A4F4D; --primary-bg:#E6F2F1;
  --text:#101828; --text-2:#475467; --text-3:#667085; --text-4:#98A2B3;
  --line:#E4E7EC; --line-input:#CFD6DD; --line-row:#F2F4F7;
  --bg:#F2F4F7; --panel:#F8FAFB; --white:#fff;
  --gnb:#101828; --gnb-2:#1D2939; --gnb-line:#344054;
  --warn:#B54708; --warn-bg:#FFF3E4; --warn-bar:#DC8A2E; --warn-field:#FFFCF7; --warn-line:#F0D9BC;
  --danger:#B42318; --danger-bg:#FEE4E2; --danger-line:#D92D20; --danger-field:#FFFBFA; --danger-soft:#F3C7C2;
  --info:#175CD3; --info-bg:#EFF4FF;
  --neutral:#344054; --neutral-bg:#EEF2F6; --btn-line:#D7DDE4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Pretendard","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-size:13px}
button,input,select,textarea{font-family:inherit}
a{color:var(--primary);text-decoration:none}
.num{font-variant-numeric:tabular-nums;text-align:right}
.hide{display:none !important}

/* GNB */
.gnb{height:56px;background:var(--gnb);color:#fff;display:flex;align-items:center;padding:0 22px;gap:22px;position:sticky;top:0;z-index:30}
.gnb .brand{font-size:16px;font-weight:800;letter-spacing:-.01em}
.gnb .svc{display:flex;gap:16px;font-size:13.5px;color:#fff;flex:1}
.gnb .svc b{color:#fff;font-weight:700}
.gnb .right{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#D0D5DD}
.gnb select{height:30px;background:var(--gnb-2);color:#fff;border:1px solid var(--gnb-line);border-radius:6px;font-size:12.5px;padding:0 8px}
.avatar{width:28px;height:28px;border-radius:999px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}

/* 레이아웃 */
.wrap{display:flex;min-height:calc(100vh - 56px)}
.side{width:216px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:20px 0}
.side h3{font-size:14px;font-weight:800;margin:0 0 12px;padding:0 20px}
.side a{display:flex;align-items:center;gap:8px;padding:9px 20px;color:var(--text-2);font-size:13px;border-left:3px solid transparent}
.side a.on{background:var(--primary-bg);color:var(--primary-dark);font-weight:700;border-left-color:var(--primary)}
.side .badge{margin-left:auto;background:var(--warn-bg);color:var(--warn);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.main{flex:1;background:#fff;padding:28px 32px 56px;min-width:0}
h1.page{font-size:21px;font-weight:700;margin:0 0 4px}
.page-sub{font-size:12.5px;color:var(--text-3);margin-bottom:20px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* 카드 */
.cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.card{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fff;flex:1;min-width:180px}
.card .t{font-size:12.5px;color:var(--text-3)}
.card .v{font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:4px}
.card .v small{font-size:13px;font-weight:600;color:var(--text-3);margin-left:3px}
.card .d{font-size:11.5px;color:var(--text-4);margin-top:6px}
.card.zero .v{color:var(--text-4)}
.card.alert .v{color:var(--warn)}
.panel{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:16px;overflow:hidden}
.panel>h2{font-size:13.5px;font-weight:700;margin:0;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--panel);display:flex;align-items:center;gap:8px}
.panel .body{padding:16px 18px}

/* 표 */
table{border-collapse:collapse;width:100%}
th{background:var(--panel);font-size:12px;font-weight:700;color:var(--text-2);text-align:center;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{font-size:12.5px;color:var(--text);padding:11px 12px;border-bottom:1px solid var(--line-row);text-align:center}
td.l{text-align:left}
th.l,th.num{text-align:center}   /* 헤더는 항상 중앙정렬 */
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr.clickable:hover{background:#FAFCFC;cursor:pointer}
tfoot td{background:var(--panel);font-weight:700;border-top:1px solid var(--line)}
.empty{padding:40px 0;text-align:center;color:var(--text-4);font-size:13px}

/* 버튼 */
.btn{height:36px;padding:0 18px;border:1px solid var(--btn-line);background:#fff;color:var(--text-2);border-radius:6px;font-size:13.5px;font-weight:600;cursor:pointer}
.btn:hover{background:#FAFAFB}
.btn.pri{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.pri:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn.danger{border-color:#E5B0AA;color:var(--danger)}
.btn.sm{height:28px;padding:0 11px;font-size:12px;border-radius:5px}
.btn:disabled{background:var(--bg);border-color:var(--line);color:#B0B7C3;cursor:not-allowed}
.btn.pri:disabled{background:var(--bg);border-color:var(--line);color:#B0B7C3}

/* 배지 */
.bdg{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.bdg.grey{background:var(--neutral-bg);color:var(--neutral)}
.bdg.green{background:var(--primary-bg);color:var(--primary-dark)}
.bdg.warn{background:var(--warn-bg);color:var(--warn)}
.bdg.danger{background:var(--danger-bg);color:var(--danger)}
.bdg.info{background:var(--info-bg);color:var(--info)}
.bdg.out{background:#fff;border:1px solid var(--btn-line);color:var(--text-3)}

/* 입력 */
label.f{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:6px}
label.f .req{color:var(--danger);margin-left:2px}
.inp{width:100%;height:36px;border:1px solid var(--line-input);border-radius:6px;padding:0 12px;font-size:13.5px;background:#fff;color:var(--text)}
.inp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(14,110,107,.15)}
.inp.warn{border-color:var(--warn-bar);background:var(--warn-field)}
.inp.err{border-color:var(--danger-line);background:var(--danger-field)}
.inp[readonly]{background:var(--panel);color:var(--text-4)}
textarea.inp{height:auto;padding:9px 12px;min-height:64px;line-height:1.6}
.msg{margin-top:5px;font-size:11.5px;font-weight:600}
.msg.warn{color:var(--warn)}
.msg.err{color:var(--danger)}
.msg.hint{color:var(--text-4);font-weight:500}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px}
.seg{display:flex;height:36px;border:1px solid var(--line-input);border-radius:6px;overflow:hidden}
.seg button{flex:1;border:0;border-left:1px solid var(--line);background:#fff;color:var(--text-2);font-size:13px;cursor:pointer}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--primary);color:#fff;font-weight:600}

/* 모달 */
.overlay{position:fixed;inset:0;background:rgba(16,24,40,.45);display:grid;place-items:center;z-index:50;padding:24px}
.modal{background:#fff;border-radius:12px;width:min(720px,100%);max-height:90vh;overflow:auto;animation:popIn .14s ease-out}
.modal.wide{width:min(1060px,100%)}
@keyframes popIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.modal header{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal header h2{font-size:15px;font-weight:700;margin:0}
.modal .content{padding:20px 22px}
.modal footer{padding:14px 22px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--panel)}
.x{margin-left:auto;border:0;background:transparent;font-size:18px;color:var(--text-3);cursor:pointer}

/* 알림 줄 */
.notice{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:12px;display:flex;align-items:center;gap:10px;font-size:13px}
.notice.warn{background:#FFFBF5;border-color:var(--warn-line);color:var(--warn)}
.notice.info{background:#F2FAF9;border-color:#9FD0CD;color:var(--primary-dark)}
.notice.danger{background:var(--danger-field);border-color:var(--danger-soft);color:var(--danger)}
.notice b{font-weight:700}

/* 진행바 */
.bar{height:8px;border-radius:999px;background:var(--line-row);overflow:hidden;min-width:90px}
.bar>span{display:block;height:8px;background:var(--primary)}
.bar.soon>span{background:var(--warn-bar)}
.bar.over>span{background:var(--danger)}

/* 토스트 */
#toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:var(--gnb);color:#fff;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:600;z-index:80;animation:toastIn .18s ease-out}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* 로그인 */
.login{min-height:100vh;display:grid;place-items:center;background:var(--bg)}
.login .box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;width:min(460px,92vw)}
.login h1{font-size:20px;margin:0 0 4px}
.login p{color:var(--text-3);font-size:13px;margin:0 0 20px}
.login .u{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 14px;margin-bottom:8px;cursor:pointer;text-align:left}
.login .u:hover{border-color:var(--primary);background:#FAFEFD}
.login .u .nm{font-weight:700}
.login .u .dp{color:var(--text-3);font-size:12px}

/* 모바일 */
@media (max-width:820px){
  .gnb .svc{display:none}
  .wrap{display:block}
  .side{width:100%;display:flex;gap:4px;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:56px;z-index:20;background:var(--panel)}
  .side h3{display:none}
  .side a{white-space:nowrap;border-left:0;border-radius:999px;padding:8px 14px}
  .side a.on{border-left:0}
  .main{padding:16px 14px 80px}
  .cards{flex-direction:column}
  .grid2,.grid3{grid-template-columns:1fr}
  .inp{height:46px}
  .btn{height:44px}
  .modal{width:100%;max-height:96vh;border-radius:14px}
  .modal footer{position:sticky;bottom:0}
  .modal footer .btn{flex:1}
  table.resp thead{display:none}
  table.resp tbody tr{display:block;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:6px 10px}
  table.resp tbody td{display:flex;justify-content:space-between;border:0;padding:6px 2px;text-align:right}
  table.resp tbody td::before{content:attr(data-l);color:var(--text-3);font-size:12px;font-weight:600}
  table.resp tbody td.l{text-align:right}
  tfoot{display:none}
}

/* 좁은 화면 보정 */
.gnb .brand{white-space:nowrap}
.panel>h2{flex-wrap:wrap;gap:8px}
.panel>h2>span:first-of-type{white-space:nowrap}
@media (max-width:820px){
  .gnb{padding:0 12px;gap:10px}
  .gnb .right{gap:6px;font-size:11.5px}
  .gnb .right>span:first-child{display:none}
  .panel>h2{align-items:flex-start}
  .panel>h2 .inp{flex:1;min-width:130px}
  .row>.spacer{flex-basis:100%;height:0}
}

/* 관리자 모드 구분 */
.gnb.adm{background:#0A4F4D}
.side-note{margin:14px 20px 0;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:11.5px;color:var(--text-3);line-height:1.6}
@media (max-width:820px){ .side-note{display:none} }