@charset "UTF-8";
/* ==========================================================================
   WTSP UI Mockup Kit — 실제 화면 캡쳐처럼 보이는 인터페이스 목업 컴포넌트
   (이미지 파일이 아닌 HTML/CSS/SVG로 렌더링되어 선명하고 가볍습니다)
   ========================================================================== */

/* --- 스케일 래퍼: 화면을 고정 폭(1180px)으로 그린 뒤 축소해
       실제 스크린샷처럼 비율이 유지되도록 합니다 (JS: fitShots) --- */
.shot-scale{position:relative;width:100%;overflow:hidden}
.shot-inner{width:100%;transform-origin:top left;will-change:transform}

.shot{
  --mock-bg:#F4F6FA;
  position:relative;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 30px 70px rgba(6,36,84,.20),0 8px 24px rgba(11,18,32,.10),0 0 0 1px rgba(11,18,32,.07);
  font-size:13px;line-height:1.5;color:#2A3550;
}
.shot--tilt{transform:perspective(1800px) rotateY(-6deg) rotateX(1.6deg);transition:transform .6s var(--ease,ease)}
.shot--tilt:hover{transform:perspective(1800px) rotateY(-2deg) rotateX(.5deg) translateY(-6px)}
.shot *{box-sizing:border-box}

/* --- browser chrome --- */
.shot__bar{
  display:flex;align-items:center;gap:12px;padding:11px 14px;background:#EDF0F5;border-bottom:1px solid #DCE2EC
}
.shot__dots{display:flex;gap:6px;flex:none}
.shot__dots i{width:11px;height:11px;border-radius:50%;display:block}
.shot__dots i:nth-child(1){background:#FF5F57}
.shot__dots i:nth-child(2){background:#FEBC2E}
.shot__dots i:nth-child(3){background:#28C840}
.shot__url{
  flex:1;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #DCE2EC;border-radius:999px;
  padding:5px 14px;font-size:11.5px;color:#616E8C;max-width:420px;margin-inline:auto
}
.shot__url svg{width:11px;height:11px;color:#0E9F6E;flex:none}
.shot__actions{display:flex;gap:8px;flex:none;color:#B6BFD1}
.shot__actions svg{width:14px;height:14px}

/* --- app shell --- */
.app{display:grid;grid-template-columns:186px 1fr;min-height:520px;background:var(--mock-bg)}
.app--wide{grid-template-columns:186px 1fr}
.app--nosb{grid-template-columns:1fr}

.side{background:#0B1220;color:#8A96B0;padding:18px 12px;display:flex;flex-direction:column}
.side__brand{display:flex;align-items:center;gap:9px;padding:4px 8px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px}
.side__logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(140deg,#1660E8,#00B2D6);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex:none;letter-spacing:-.03em}
.side__brand b{color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;display:block;line-height:1.1}
.side__brand span{font-size:9.5px;color:#616E8C;letter-spacing:.06em}
.side__label{font-size:9.5px;letter-spacing:.13em;color:#44506E;font-weight:700;padding:12px 10px 7px}
.side__nav{display:grid;gap:2px}
.side__nav a{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:12.5px;
  color:#8A96B0;font-weight:500;transition:.2s
}
.side__nav a svg{width:15px;height:15px;flex:none;opacity:.8}
.side__nav a.on{background:linear-gradient(90deg,rgba(22,96,232,.9),rgba(22,96,232,.55));color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(22,96,232,.3)}
.side__nav a .badge{margin-left:auto;background:#D93A3E;color:#fff;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:999px}
.side__foot{margin-top:auto;padding:12px 10px 2px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:9px}
.side__foot .av{width:26px;height:26px;border-radius:50%;background:#1660E8;color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none}
.side__foot b{color:#DCE2EC;font-size:11.5px;display:block;line-height:1.2}
.side__foot span{font-size:9.5px;color:#616E8C}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;gap:14px;padding:13px 20px;background:#fff;border-bottom:1px solid #E4E9F0
}
.topbar h4{font-size:15px;font-weight:800;color:#0B1220;letter-spacing:-.02em;margin:0}
.topbar .crumbs{font-size:10.5px;color:#8A96B0;letter-spacing:.02em}
.topbar__search{
  margin-left:auto;display:flex;align-items:center;gap:7px;background:#F4F6FA;border:1px solid #E4E9F0;
  border-radius:8px;padding:6px 12px;font-size:11.5px;color:#8A96B0;width:190px
}
.topbar__search svg{width:12px;height:12px}
.topbar__ico{position:relative;width:30px;height:30px;border-radius:8px;background:#F4F6FA;display:grid;place-items:center;color:#616E8C;flex:none}
.topbar__ico svg{width:15px;height:15px}
.topbar__ico .n{position:absolute;top:-3px;right:-3px;background:#D93A3E;color:#fff;font-size:8.5px;font-weight:800;min-width:15px;height:15px;border-radius:999px;display:grid;place-items:center;padding:0 3px;border:2px solid #fff}
.topbar__btn{background:#1660E8;color:#fff;font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:8px;display:flex;align-items:center;gap:5px}
.topbar__btn svg{width:12px;height:12px}

.canvas{padding:18px 20px 22px;display:grid;gap:14px;align-content:start;overflow:hidden}

/* --- KPI --- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#fff;border:1px solid #E4E9F0;border-radius:11px;padding:14px 15px;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#1660E8;opacity:.9}
.kpi--warn::after{background:#F0A11C}
.kpi--danger::after{background:#D93A3E}
.kpi--ok::after{background:#0E9F6E}
.kpi__t{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#8A96B0;font-weight:600;margin-bottom:7px}
.kpi__t svg{width:12px;height:12px}
.kpi__v{font-size:24px;font-weight:800;color:#0B1220;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.kpi__v small{font-size:12px;font-weight:600;color:#8A96B0;margin-left:3px;letter-spacing:0}
.kpi__d{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;margin-top:7px}
.kpi__d.up{color:#0E9F6E}.kpi__d.down{color:#D93A3E}.kpi__d.flat{color:#8A96B0}
.kpi__d svg{width:11px;height:11px}

/* --- panels --- */
.panels{display:grid;gap:12px}
.p-2-1{grid-template-columns:1.55fr 1fr}
.p-1-1{grid-template-columns:1fr 1fr}
.p-1-2{grid-template-columns:1fr 1.7fr}
.panel{background:#fff;border:1px solid #E4E9F0;border-radius:11px;overflow:hidden;display:flex;flex-direction:column}
.panel__h{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid #EDF1F7}
.panel__h h5{font-size:12.5px;font-weight:800;color:#16203A;margin:0;letter-spacing:-.02em}
.panel__h .sub{font-size:10px;color:#8A96B0}
.panel__h .more{margin-left:auto;font-size:10.5px;color:#1660E8;font-weight:700;display:flex;align-items:center;gap:3px}
.panel__h .more svg{width:10px;height:10px}
.panel__h .seg{margin-left:auto;display:flex;background:#F4F6FA;border-radius:7px;padding:2px;gap:2px}
.panel__h .seg span{font-size:10px;padding:3px 9px;border-radius:5px;color:#8A96B0;font-weight:600}
.panel__h .seg span.on{background:#fff;color:#16203A;box-shadow:0 1px 3px rgba(11,18,32,.1)}
.panel__b{padding:14px 15px;flex:1}
.panel__b--flush{padding:0}

/* --- alert rows --- */
.alist{display:grid}
.arow{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;padding:10px 15px;border-bottom:1px solid #F2F5F9}
.arow:last-child{border-bottom:0}
.arow:hover{background:#FAFBFD}
.dday{
  display:grid;place-items:center;height:32px;border-radius:8px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
  background:#FDF1DC;color:#C2760A;letter-spacing:-.02em
}
.dday--red{background:#FDE7E8;color:#D93A3E}
.dday--gray{background:#EDF1F7;color:#616E8C}
.arow b{font-size:12px;color:#16203A;font-weight:700;display:block;letter-spacing:-.01em}
.arow span{font-size:10.5px;color:#8A96B0;display:block}
.arow .act{font-size:10.5px;font-weight:700;color:#1660E8;border:1px solid #D8E6FD;background:#F5F9FF;padding:4px 9px;border-radius:6px;white-space:nowrap}

/* --- tables --- */
.mtbl{width:100%;border-collapse:collapse;font-size:11.5px}
.mtbl th{
  background:#F7F9FC;color:#616E8C;font-size:10px;font-weight:700;letter-spacing:.03em;text-align:left;
  padding:9px 13px;border-bottom:1px solid #E4E9F0;white-space:nowrap
}
.mtbl td{padding:10px 13px;border-bottom:1px solid #F2F5F9;color:#2A3550;white-space:nowrap}
.mtbl tr:last-child td{border-bottom:0}
.mtbl tbody tr:hover{background:#FAFBFD}
.mtbl .plate{font-weight:800;color:#0B1220;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mtbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:#16203A}
.mtbl .sum{background:#F7F9FC;font-weight:800}
.mtbl .who{display:flex;align-items:center;gap:7px}
.mtbl .who .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;flex:none}
.av-1{background:#1660E8}.av-2{background:#0E9F6E}.av-3{background:#C2760A}.av-4{background:#7C5CE6}.av-5{background:#D93A3E}.av-6{background:#0E7CA8}

.st{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.st i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.st--ok{background:#DCF7EC;color:#0E9F6E}
.st--warn{background:#FDF1DC;color:#C2760A}
.st--danger{background:#FDE7E8;color:#D93A3E}
.st--info{background:#DCF1FA;color:#0E7CA8}
.st--gray{background:#EDF1F7;color:#616E8C}
.st--brand{background:#EEF4FE;color:#1254C9}

/* --- charts --- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{font-family:var(--font,sans-serif);fill:#8A96B0;font-size:9px}
.chart .gl{stroke:#EDF1F7;stroke-width:1}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.legend li{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#616E8C}
.legend i{width:8px;height:8px;border-radius:2px;flex:none}

.donut-wrap{display:flex;align-items:center;gap:16px}
.donut-c{position:relative;width:118px;flex:none}
.donut-c .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-c .mid b{font-size:21px;font-weight:800;color:#0B1220;letter-spacing:-.04em;line-height:1;display:block}
.donut-c .mid span{font-size:9.5px;color:#8A96B0}

/* progress bars */
.bars{display:grid;gap:11px}
.bar__t{display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px;color:#44506E}
.bar__t b{font-weight:700;color:#16203A;font-variant-numeric:tabular-nums}
.bar__track{height:7px;border-radius:999px;background:#EDF1F7;overflow:hidden}
.bar__fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1660E8,#4A87F0)}
.bar__fill--ok{background:linear-gradient(90deg,#0E9F6E,#34C795)}
.bar__fill--warn{background:linear-gradient(90deg,#F0A11C,#FFC55E)}
.bar__fill--danger{background:linear-gradient(90deg,#D93A3E,#F0787B)}

/* --- vehicle detail --- */
.vhead{display:flex;align-items:center;gap:14px;padding:15px;background:#fff;border:1px solid #E4E9F0;border-radius:11px}
.vplate{
  background:#0B1220;color:#fff;border-radius:8px;padding:9px 14px;font-size:17px;font-weight:800;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;flex:none;border:2px solid #2A3550
}
.vhead .meta b{font-size:13.5px;color:#0B1220;display:block;letter-spacing:-.02em}
.vhead .meta span{font-size:10.5px;color:#8A96B0}
.vhead .right{margin-left:auto;display:flex;gap:7px;align-items:center}

.mtabs{display:flex;gap:2px;border-bottom:1px solid #E4E9F0;padding:0 15px;background:#fff}
.mtabs span{padding:10px 13px;font-size:11.5px;font-weight:600;color:#8A96B0;border-bottom:2px solid transparent;margin-bottom:-1px}
.mtabs span.on{color:#1254C9;border-bottom-color:#1660E8;font-weight:800}

.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#EDF1F7;border:1px solid #EDF1F7;border-radius:9px;overflow:hidden}
.dl-grid > div{background:#fff;padding:11px 13px}
.dl-grid dt{font-size:9.5px;color:#8A96B0;font-weight:700;letter-spacing:.04em;margin-bottom:4px}
.dl-grid dd{margin:0;font-size:12px;color:#16203A;font-weight:600}

.tline{position:relative;padding-left:20px;display:grid;gap:14px}
.tline::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:#EDF1F7}
.tline li{position:relative}
.tline li::before{content:"";position:absolute;left:-19px;top:4px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #B6BFD1}
.tline li.on::before{border-color:#1660E8;box-shadow:0 0 0 3px rgba(22,96,232,.14)}
.tline li.ok::before{border-color:#0E9F6E;background:#0E9F6E}
.tline b{font-size:11.5px;color:#16203A;display:block;font-weight:700}
.tline span{font-size:10px;color:#8A96B0}

/* --- document grid --- */
.docs{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.doccard{border:1px solid #E4E9F0;border-radius:10px;background:#fff;padding:13px;text-align:center}
.doccard .ic{width:34px;height:42px;margin:0 auto 9px;border-radius:4px;position:relative;background:#EEF4FE;border:1px solid #D8E6FD}
.doccard .ic::after{content:"";position:absolute;top:0;right:0;border-width:0 10px 10px 0;border-style:solid;border-color:#fff #fff #D8E6FD #D8E6FD}
.doccard .ic b{position:absolute;bottom:5px;left:0;right:0;font-size:7.5px;font-weight:800;color:#1254C9;letter-spacing:.04em}
.doccard .ic--pdf{background:#FDE7E8;border-color:#F7C9CB}
.doccard .ic--pdf b{color:#D93A3E}
.doccard .ic--pdf::after{border-color:#fff #fff #F7C9CB #F7C9CB}
.doccard p{font-size:10.5px;color:#16203A;font-weight:700;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doccard span{font-size:9.5px;color:#8A96B0}

/* --- phone frame --- */
.phone{
  width:252px;border-radius:34px;background:#0B1220;padding:9px;flex:none;
  box-shadow:0 26px 60px rgba(6,36,84,.28),0 0 0 1px rgba(11,18,32,.1)
}
.phone__scr{border-radius:26px;overflow:hidden;background:#F4F6FA;position:relative}
.phone__notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:78px;height:19px;background:#0B1220;border-radius:999px;z-index:3}
.phone__sb{display:flex;justify-content:space-between;align-items:center;padding:8px 16px 5px;font-size:9.5px;font-weight:700;color:#0B1220;background:#fff}
.phone__sb .ic{display:flex;gap:3px;align-items:center}
.phone__sb svg{width:11px;height:11px}
.ph-hd{background:linear-gradient(150deg,#0D42A0,#1660E8);color:#fff;padding:12px 16px 18px}
.ph-hd .row{display:flex;align-items:center;gap:9px}
.ph-hd .av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:11px;font-weight:800}
.ph-hd b{font-size:12.5px;display:block;line-height:1.2}
.ph-hd span{font-size:9.5px;opacity:.75}
.ph-hd .bell{margin-left:auto;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.16);display:grid;place-items:center;position:relative}
.ph-hd .bell svg{width:13px;height:13px}
.ph-hd .bell .n{position:absolute;top:-2px;right:-2px;width:13px;height:13px;border-radius:50%;background:#FF5F57;font-size:8px;display:grid;place-items:center;font-weight:800;border:1.5px solid #1660E8}
.ph-body{padding:0 12px 14px;margin-top:-10px;display:grid;gap:9px}
.ph-card{background:#fff;border-radius:12px;padding:12px;box-shadow:0 3px 10px rgba(11,18,32,.07)}
.ph-card h6{margin:0 0 9px;font-size:11px;font-weight:800;color:#16203A;display:flex;align-items:center;gap:6px}
.ph-card h6 svg{width:12px;height:12px;color:#1660E8}
.ph-stat{display:flex;justify-content:space-between;gap:8px}
.ph-stat div{text-align:center;flex:1}
.ph-stat b{display:block;font-size:16px;font-weight:800;color:#0B1220;letter-spacing:-.03em;line-height:1.1}
.ph-stat span{font-size:9px;color:#8A96B0}
.ph-alert{display:flex;gap:9px;align-items:center;padding:9px 11px;border-radius:10px;background:#FDF1DC;border:1px solid #F8E0B4}
.ph-alert.red{background:#FDE7E8;border-color:#F7C9CB}
.ph-alert .ic{width:26px;height:26px;border-radius:8px;background:#fff;display:grid;place-items:center;flex:none;color:#C2760A}
.ph-alert.red .ic{color:#D93A3E}
.ph-alert svg{width:13px;height:13px}
.ph-alert b{font-size:10.5px;color:#16203A;display:block;line-height:1.3}
.ph-alert span{font-size:9px;color:#616E8C}
.ph-tabbar{display:flex;background:#fff;border-top:1px solid #E4E9F0;padding:7px 0 10px}
.ph-tabbar div{flex:1;text-align:center;font-size:8.5px;color:#B6BFD1;font-weight:600}
.ph-tabbar div.on{color:#1660E8}
.ph-tabbar svg{width:16px;height:16px;margin:0 auto 3px;display:block}

/* --- captions & annotations --- */
.shot-cap{
  display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-size:14px;color:var(--ink-500,#616E8C);line-height:1.6
}
.shot-cap b{color:var(--ink-800,#16203A);font-weight:700}
.shot-cap .no{
  flex:none;width:22px;height:22px;border-radius:6px;background:var(--brand-600,#1254C9);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px
}
.shot-frame{position:relative;padding:0}
.pin{
  position:absolute;z-index:6;background:#0B1220;color:#fff;font-size:12px;font-weight:700;
  padding:7px 13px;border-radius:999px;box-shadow:0 10px 26px rgba(11,18,32,.28);display:flex;align-items:center;gap:7px;white-space:nowrap
}
.pin::after{content:"";position:absolute;width:9px;height:9px;background:#0B1220;transform:rotate(45deg)}
.pin--l::after{left:-3px;top:50%;margin-top:-4px}
.pin--r::after{right:-3px;top:50%;margin-top:-4px}
.pin i{width:7px;height:7px;border-radius:50%;background:#34C795;flex:none;box-shadow:0 0 0 3px rgba(52,199,149,.28)}

/* responsive scale-down: 목업은 축소해도 레이아웃이 깨지지 않도록 */
/* 900px 미만에서는 스케일 대신 화면 자체를 모바일 레이아웃으로 재구성 */
@media (max-width:899px){
  .shot{font-size:11px;border-radius:11px}
  .app{grid-template-columns:1fr;min-height:0}
  .side{display:none}
  .canvas{padding:13px}
  .topbar__search{display:none}
  .p-1-1{grid-template-columns:1fr}
  .docs{grid-template-columns:repeat(2,1fr)}
  .dl-grid{grid-template-columns:repeat(2,1fr)}
  .pin{display:none}
  .kpi__v{font-size:20px}
  .mtbl-scroll{overflow-x:auto}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .p-2-1,.p-1-2{grid-template-columns:1fr}
  .shot--tilt{transform:none}
  .phone{width:236px}
}