@charset "UTF-8";
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 500;
  color: #1d1d1d;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: anywhere;
}

button, a {
  cursor: pointer;
}

/* 7) 애니메이션/스무스 스크롤 접근성 */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
.topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 20;
  height: 64px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.06);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 16px;
}
.topbar .brand__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0;
}
.topbar__actions {
  justify-self: end;
  display: flex;
  gap: 16px;
  align-items: center;
}
.topbar .icon-notice {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f0f0f0;
  background-image: url("../images/ico-notice.png");
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}
.topbar .icon-notice span {
  position: absolute;
  right: -2px;
  top: -2px;
  font-size: 7px;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border-radius: 50%;
  background: #0758ac;
  color: #fff;
}
.topbar .avatar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 12px;
  background: #f0f0f0;
  font-weight: 300;
  margin-right: 14px;
}
.topbar .avatar__circle {
  width: 18px;
  height: 18px;
  background-image: url(../images/ico-avatar.png);
}
.topbar .avatar__label {
  font-size: 13px;
  color: #1d1d1d;
}

.burger-btn {
  cursor: pointer;
  padding: 7px 1px;
}

.burger {
  width: 20px;
  height: 2px;
  background: #111827;
  position: relative;
  display: block;
}
.burger::before, .burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}
.burger::before {
  top: -6px;
}
.burger::after {
  top: 6px;
}

/* ====== Sidenav ====== */
.sidenav {
  grid-area: sidenav;
  position: relative;
  background: #0a529d;
  color: #fff;
  font-weight: 300;
}
.sidenav__logo {
  position: relative;
  text-align: center;
  padding: 60px 0 30px 0;
  margin: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.sidenav__logo:after {
  z-index: 21;
  position: absolute;
  right: -64px;
  top: 0;
  display: block;
  content: "";
  width: 44px;
  height: 53px;
  background: url("../images/nav-after.png") no-repeat center;
}
.sidenav__logo a {
  display: block;
}
.sidenav__nav {
  display: grid;
  padding-top: 35px;
  padding-left: 20px;
  padding-bottom: 20px;
  gap: 35px;
  height: calc(100vh - 320px);
}
.sidenav .nav-sec,
.sidenav .nav-sub {
  border-radius: 12px;
}
.sidenav .nav-sec > summary,
.sidenav .nav-sub > summary {
  position: relative;
}
.sidenav .nav-sec > summary::after,
.sidenav .nav-sub > summary::after {
  position: absolute;
  top: 45%;
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border: 1.5px solid #fff;
  border-left: 0;
  border-top: 0;
  transform: rotate(-45deg) translateY(-50%);
  transition: transform 0.18s ease;
}
.sidenav .nav-sec[open] > summary::after,
.sidenav .nav-sub[open] > summary::after {
  transform: rotate(45deg) translateY(-50%);
}
.sidenav .nav-sec {
  transition: transform 0.18s ease;
}
.sidenav .nav-sec > summary::after {
  content: "";
  right: 40px;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border: 1.5px solid #fff;
  border-left: 0;
  border-top: 0;
  transform: rotate(-45deg) translateY(-50%);
  transition: transform 0.18s ease, border-color 0.18s ease;
  opacity: 0.9;
}
.sidenav .nav-sec > summary span {
  z-index: 2;
  position: relative;
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 17px;
  border-radius: 25px 0 0 25px;
  height: 50px;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.8);
}
.sidenav .nav-sec > summary span > i {
  width: 20px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}
.sidenav .nav-sec > summary.sec01 i {
  height: 20px;
  background-image: url("../images/nav-m01.svg");
}
.sidenav .nav-sec > summary.sec02 i {
  height: 20px;
  background-image: url("../images/nav-m02.svg");
}
.sidenav .nav-sec > summary.sec03 i {
  height: 20px;
  background-image: url("../images/nav-m03.svg");
}
.sidenav .nav-sec > summary.sec04 i {
  height: 20px;
  background-image: url("../images/nav-m04.svg");
}
.sidenav .nav-sec > summary.sec05 i {
  height: 20px;
  background-image: url("../images/nav-m05.svg");
}
.sidenav .nav-sec > summary.sec06 i {
  height: 20px;
  background-image: url("../images/nav-m06.svg");
}
.sidenav .nav-sec > summary.sec07 i {
  height: 20px;
  background-image: url("../images/nav-m07.svg");
}
.sidenav .nav-sec > summary.sec08 i {
  height: 20px;
  background-image: url("../images/nav-m07.svg");
}
.sidenav .nav-sec > summary + .nav-sub {
  margin-top: 20px;
}
.sidenav .nav-sec[open] {
  padding-bottom: 30px;
}
.sidenav .nav-sec[open] > summary span {
  background: #f6f7fb;
  color: #0a529d;
}
.sidenav .nav-sec[open] > summary:after {
  z-index: 10;
  border-color: #0a529d;
}
.sidenav .nav-sec[open] > summary.sec01 i {
  background-image: url("../images/nav-m01-on.svg");
}
.sidenav .nav-sec[open] > summary.sec02 i {
  background-image: url("../images/nav-m02-on.svg");
}
.sidenav .nav-sec[open] > summary.sec03 i {
  background-image: url("../images/nav-m03-on.svg");
}
.sidenav .nav-sec[open] > summary.sec04 i {
  background-image: url("../images/nav-m04-on.svg");
}
.sidenav .nav-sec[open] > summary.sec05 i {
  background-image: url("../images/nav-m05-on.svg");
}
.sidenav .nav-sec[open] > summary.sec06 i {
  background-image: url("../images/nav-m06-on.svg");
}
.sidenav .nav-sec[open] > summary.sec07 i {
  background-image: url("../images/nav-m07-on.svg");
}
.sidenav .nav-sec[open] > summary.sec08 i {
  background-image: url("../images/nav-m07-on.svg");
}
.sidenav .nav-sec[open] .round-top,
.sidenav .nav-sec[open] .round-bottom {
  position: absolute;
  right: 0;
  width: 30px;
  height: 30px;
  background: #f6f7fb;
}
.sidenav .nav-sec[open] .round-top {
  top: -30px;
}
.sidenav .nav-sec[open] .round-top:after {
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  background: #0a529d;
  border-radius: 0 0 100% 0;
}
.sidenav .nav-sec[open] .round-bottom {
  bottom: -30px;
}
.sidenav .nav-sec[open] .round-bottom:after {
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  background: #0a529d;
  border-radius: 0 100% 0 0;
}
.sidenav .nav-sec .nav-sub {
  margin-left: 32px;
}
.sidenav .nav-sec .nav-sub > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 166px;
  font-size: 15px;
  height: 35px;
  padding-left: 20px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.8);
}
.sidenav .nav-sec .nav-sub > summary:after {
  right: 20px;
}
.sidenav .nav-sec .nav-sub > summary:before {
  display: block;
  content: "";
  width: 2px;
  height: 2px;
  background: #fff;
}
.sidenav .nav-sec .nav-sub[open] > summary {
  background: #03386e;
}
.sidenav .nav-sec .nav-sub + .nav-sub {
  margin-top: 3px;
}
.sidenav .nav-sec .nav-list {
  position: relative;
  list-style: none;
  padding: 6px 4px 10px 8px;
  margin: 0;
  display: grid;
  gap: 2px;
  padding: 10px 0 10px 30px;
}
.sidenav .nav-sec .nav-list:after {
  position: absolute;
  left: 30px;
  top: 10px;
  content: "";
  width: 1px;
  height: calc(100% - 20px);
  background: rgba(255, 255, 255, 0.2);
}
.sidenav .nav-sec .nav-list li {
  position: relative;
}
.sidenav .nav-sec .nav-list a {
  display: block;
  border-radius: 10px;
  padding: 9px 15px;
  font-size: 15px;
  color: #a5c7e4;
  text-decoration: none;
  margin-left:10px;
  margin-right: 10px;
}
.sidenav .nav-sec .nav-list a::before {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
  font-size: 14px;
}
.sidenav .nav-sec .nav-list a:hover {
  color: #fff;
}
.sidenav .nav-sec .nav-list .is-active > a {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
  margin-left: 10px;
  margin-right: 10px;
}
/* 좌측 메뉴 스크롤바가 펼쳐진 섹션 헤더의 흰 배경에 가려지지 않도록 최상단 배치 */
#leftMenu .simplebar-track {
  z-index: 50;
}
/* 아래에 가려진 메뉴가 더 있을 때(스크롤 가능 & 맨 아래 아님) 하단 페이드로 표시 */
#leftMenu {
  position: relative;
}
#leftMenu::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 40;
}
#leftMenu.has-more-below::after {
  opacity: 1;
  animation: leftMenuMoreArrow 1.4s ease-in-out infinite;
}
@keyframes leftMenuMoreArrow {
  0%, 100% { bottom: 10px; }
  50%      { bottom: 5px; }
}
.sidenav .nav-foot {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 20px;
}
.sidenav .nav-foot dl {
  position: relative;
  padding-left: 32px;
}
.sidenav .nav-foot dl dt {
  font-size: 17px;
  color: #d5dde8;
  letter-spacing: 1px;
  margin-bottom: 10px;
  line-height: 1;
}
.sidenav .nav-foot dl dd {
  font-size: 17px;
  color: #d5dde8;
  font-size: 15px;
  line-height: 1;
}
.sidenav .nav-foot dl:after {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  content: "";
  width: 17px;
  height: 17px;
  background-repeat: no-repeat;
}
.sidenav .nav-foot dl.call {
  margin-bottom: 15px;
}
.sidenav .nav-foot dl.call:after {
  background-image: url("../images/ico-footcall.png");
}
.sidenav .nav-foot dl.mail:after {
  background-image: url("../images/ico-footmail.png");
}

/* details/summary 기본 마커 제거 */
details > summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.modal.active {
  display: flex;
}
.modal .modal-dialog {
  background: #ecf0f2;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
}
.modal .modal-dialog .modal-header {
  background: #047bb6;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
  font-weight: 300;
}
.modal .modal-dialog .modal-header span {
  color: #fff;
}
.modal .modal-dialog .modal-header button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-image: url("../images/modal-close.png");
}
.modal .modal-dialog .modal-content {
  padding: 20px;
  min-height: 150px;
}

.modal--alerts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.modal--alerts__col {
  width: 480px;
}
.modal--alerts__col h3 {
  font-size: 19px;
  font-weight: 500;
  color: #047bb6;
  margin-top: 10px;
  margin-bottom: 12px;
}
.modal--alerts__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}
.modal--alerts__item .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal--alerts__item .head .data {
  font-size: 13px;
  color: #717171;
}
.modal--alerts__item h4 {
  font-size: 15px;
  color: #1d1d1d;
  font-weight: 500;
}
.modal--alerts__item .info {
  font-size: 15px;
  color: #717171;
}
.modal--alerts__item + div {
  margin-top: 10px;
}

.modal__card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 480px;
  padding: 20px;
}

.stats--modal__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.stats--modal__title {
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}
.stats--modal .sub {
  font-size: 13px;
  font-weight: normal;
  color: #1d1d1d;
  margin-bottom: 20px;
}
.stats--modal .sub b {
  font-weight: normal;
  color: #1976d2;
}

.notice--regi--modal .modal__card {
  width: 980px;
}

.notice--detail--modal .modal__card {
  width: 980px;
}
.notice--detail--modal .notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.notice--detail--modal .notice-header .notice-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.notice--detail--modal .notice-header .notice-left .badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 300;
  border-radius: 4px;
  line-height: 1;
}
.notice--detail--modal .notice-header .notice-left .badge.badge-danger {
  background: #e54e57;
  color: #fff;
}
.notice--detail--modal .notice-header .notice-left .notice-title {
  font-size: 15px;
  font-weight: 300;
  color: #1d1d1d;
}
.notice--detail--modal .notice-header .notice-right {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #1d1d1d;
}
.notice--detail--modal .notice-header .notice-right .notice-writer {
  font-weight: 500;
}
.notice--detail--modal .notice-header .notice-right .divider {
  margin: 0 6px;
  color: #c6c6c6;
}
.notice--detail--modal .notice-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin-bottom: 20px;
}
.notice--detail--modal .notice-content {
  border-radius: 5px;
  border: 1px solid #c6c6c6;
  padding: 20px 10px;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 300;
}

/* ========== 단말등록 모달 ========== */
.modal--terminal-register {
  /* step3: 정류장 맵핑 */
}
.modal--terminal-register .modal--terminal-register__dialog {
  width: min(1020px, 100vw - 80px);
  max-width: 1020px;
  height: min(715px, 100vh - 80px);
  max-height: 715px;
  display: flex;
  flex-direction: column;
}
.modal--terminal-register .modal-content {
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  flex: 1 1 auto;
}
.modal--terminal-register .regi-step-bar {
  background: #ecf0f2;
}
.modal--terminal-register .regi-step {
  justify-content: center;
  gap: 50px;
}
.modal--terminal-register .regi-step__item {
  /* done 상태는 어떤 step 아이콘보다 우선 (체크 아이콘 고정) */
}
.modal--terminal-register .regi-step__item .regi-step__icon {
  background-size: 28px;
  background-repeat: no-repeat;
  background-position: center;
}
.modal--terminal-register .regi-step__item:nth-child(1) .regi-step__icon {
  background-image: url("../images/terminal-step01.svg");
}
.modal--terminal-register .regi-step__item:nth-child(2) .regi-step__icon {
  background-image: url("../images/terminal-step02.svg");
}
.modal--terminal-register .regi-step__item:nth-child(3) .regi-step__icon {
  background-image: url("../images/terminal-step03.svg");
}
.modal--terminal-register .regi-step__item:nth-child(4) .regi-step__icon {
  background-image: url("../images/terminal-step04.svg");
}
.modal--terminal-register .regi-step__item[data-status=done] .regi-step__icon {
  background-image: url("../images/route-step-checked.png") !important;
  background-size: 12px;
  background-color: #98afc8;
}
.modal--terminal-register__body {
  min-height: 0;
}
.modal--terminal-register__body .modal--terminal-register__body_inner {
  height: 100%;
  padding: 0 20px;
}
.modal--terminal-register__step-panel {
  display: none;
}
.modal--terminal-register__step-panel.is-active {
  display: block;
}
.modal--terminal-register__card {
  background: #ffffff;
  border: 1px solid #dbdee2;
  border-radius: 12px;
  padding: 20px;
}
.modal--terminal-register__card + .modal--terminal-register__card {
  margin-top: 14px;
}
.modal--terminal-register__card-title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 500;
  color: #1d1d1d;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}
.modal--terminal-register__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.modal--terminal-register__inline-group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}
.modal--terminal-register__inline-label {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 300;
  color: #1d1d1d;
  min-width: 100px;
  font-weight: 500;
}
.modal--terminal-register__radios {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.modal--terminal-register__footer {
  padding: 16px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #ecf0f2;
}
.modal--terminal-register__footer-right {
  display: flex;
  gap: 10px;
  align-items: center;
}
.modal--terminal-register__btn {
  min-width: 120px;
}
.modal--terminal-register__btn--ghost {
  background: #ffffff;
  border: 1px solid #c6c6c6;
  color: #1d1d1d;
}
.modal--terminal-register__btn--cancel {
  background: #6b7280;
  border: 1px solid #6b7280;
  color: #fff;
}
.modal--terminal-register__btn--primary {
  background: #047bb6;
  border: 1px solid #047bb6;
  color: #fff;
}
.modal--terminal-register__placeholder {
  font-size: 15px;
  font-weight: 300;
  color: #717171;
  padding: 10px 0 16px;
}
.modal--terminal-register .terminal-station-map {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
}
.modal--terminal-register .terminal-station-map__search-inner {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid #c6c6c6;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.modal--terminal-register .terminal-station-map__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0 14px;
  font-size: 15px;
  outline: none;
  background: transparent;
}
.modal--terminal-register .terminal-station-map__search-btn {
  width: 54px;
  height: 100%;
  border: 0;
  background: #fff url("../images/ico-search.png") no-repeat center;
  cursor: pointer;
}
.modal--terminal-register .terminal-station-map__map-box {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #717171;
  background: #f3f4f6;
}

/* 단말 상세 조회 모달 */
.modal--terminal-detail .modal--terminal-detail__dialog {
  width: min(1020px, 100vw - 80px);
  max-width: 1020px;
  height: min(710px, 100vh - 80px);
  max-height: 710px;
  display: flex;
  flex-direction: column;
}
.modal--terminal-detail .modal-content {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  flex: 1 1 auto;
}
.modal--terminal-detail__body {
  min-height: 0;
}
.modal--terminal-detail__body .modal--terminal-detail__body_inner {
  padding: 0 20px;
}
.modal--terminal-detail__body_inner {
  height: 100%;
  padding: 0;
}
.modal--terminal-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.modal--terminal-detail__card {
  background: #fff;
  border: 1px solid #dbdee2;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.modal--terminal-detail__title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 500;
  color: #1d1d1d;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}
.modal--terminal-detail__map {
  height: 238px;
  border-radius: 8px;
  border: 1px solid #d8d8d8;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #717171;
  font-size: 14px;
  margin-bottom: 12px;
}
.modal--terminal-detail__footer {
  padding: 16px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ecf0f2;
}
.modal--terminal-detail__footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 사이트 등록 모달 */
.modal--customer-register .modal--customer-register__dialog {
  width: min(1020px, 100vw - 80px);
  max-width: 1020px;
  height: min(715px, 100vh - 80px);
  max-height: 715px;
  display: flex;
  flex-direction: column;
}
.modal--customer-register .modal-content {
  padding: 0;
  flex: 1 1 auto;
}
.modal--customer-register .modal--terminal-register__card + .modal--terminal-register__card {
  margin-top: 14px;
}
.modal--customer-register .modal--customer-register__footer {
  padding: 16px 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: #ecf0f2;
}
.modal--customer-register .modal--customer-register__footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal--customer-register .regi-step__item {
  /* 사이트 등록도 done(체크) 아이콘은 12px로 */
}
.modal--customer-register .regi-step__item .regi-step__icon {
  background-size: 28px;
  background-repeat: no-repeat;
  background-position: center;
}
.modal--customer-register .regi-step__item:nth-child(2) .regi-step__icon {
  background-image: url("../images/terminal-step05.svg");
  background-size: 25px;
}
.modal--customer-register .regi-step__item:nth-child(3) .regi-step__icon {
  background-image: url("../images/terminal-step04.svg");
}
.modal--customer-register .regi-step__item:nth-child(4)::after {
  display: none;
}
.modal--customer-register .regi-step__item[data-status=done] .regi-step__icon {
  background-image: url("../images/route-step-checked.png") !important;
  background-size: 12px;
}

/* terminal-view (상세 키/값 리스트) - 공용 */
.terminal-view__section {
  margin-top: 6px;
}
.terminal-view__list {
  display: grid;
}
.terminal-view__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  align-items: center;
  padding: 10px;
}
.terminal-view__row:nth-child(even) {
  background: #f8fbfd;
}
.terminal-view__label {
  font-size: 15px;
  font-weight: 300;
  color: #717171;
}
.terminal-view__value {
  font-size: 17px;
  font-weight: 500;
  color: #1d1d1d;
}

.small--pop {
  position: absolute;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.small--pop__head {
  font-size: 17px;
  margin-bottom: 10px;
}
.small--pop .line-flex-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #c6c6c6;
  border-radius: 5px;
  margin-bottom: 5px;
}

.modal--select-station .modal--select-station__dialog {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 350px;
  max-width: 90%;
  padding: 30px 20px 20px;
  text-align: center;
}
.modal--select-station .modal--select-station__icon {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal--select-station .modal--select-station__icon svg {
  display: block;
  width: 56px;
  height: 56px;
}
.modal--select-station .modal--select-station__message {
  margin: 0 0 28px;
  font-size: 16px;
  color: #1d1d1d;
  line-height: 1.5;
}

.notice-dialog {
  position: relative;
}
.notice-dialog .notice-bottom {
  background: #ecf0f2;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 70px;
}
.notice-dialog .notice-bottom .no-week {
  font-size: 14px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notice-dialog .notice-bottom .no-week input[type=checkbox] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
}
.notice-dialog .notice-bottom .btn-close {
  background: none;
  border: none;
  color: #111;
  font-size: 15px;
  cursor: pointer;
  padding: 5px 10px;
}

.notice-type02-modal {
  max-height: 700px;
  background: #daebfc;
}
.notice-type02-modal .notice-top {
  text-align: center;
  padding-bottom: 240px;
  background-image: url("../images/top-img.png");
  background-position: bottom;
  background-repeat: no-repeat;
  margin-bottom: 30px;
}
.notice-type02-modal .notice-logo {
  padding-top: 80px;
}
.notice-type02-modal .notice-title {
  padding-top: 20px;
  font-size: 60px;
  font-weight: bold;
  color: #0844aa;
}
.notice-type02-modal .notice-row-head {
  background: #0067c5;
  color: #fff;
  font-size: 25px;
  padding: 14px 20px;
  font-weight: 600;
  text-align: center;
  border-radius: 10px 10px 0 0;
}
.notice-type02-modal .notice-box {
  background: #fff;
  margin-bottom: 20px;
  border-radius: 0 0 10px 10px;
  padding: 30px;
}
.notice-type02-modal .notice-img-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}
.notice-type02-modal .notice-img-box img {
  width: 100%;
}
.notice-type02-modal .notice-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.notice-type02-modal .notice-row:last-child {
  margin-bottom: 0;
}
.notice-type02-modal .notice-row .label {
  background: #077cb4;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 20px;
  white-space: nowrap;
  display: inline-block;
}
.notice-type02-modal .notice-row .value {
  font-size: 20px;
  color: #0a244a;
}
.notice-type02-modal .notice-row .value.strong {
  font-weight: 700;
}

.notice-type01-modal {
  max-height: 700px;
  position: relative;
  padding: 80px 80px !important;
  background-color: #0972db;
  background-image: url("../images/notice-type01-bg.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.notice-type01-modal:after {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 220px;
  background-image: url("../images/notice-type01-bottom.png");
}
.notice-type01-modal .notice-title {
  font-size: 55px;
  color: #fff;
  font-weight: 100;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 20px;
}
.notice-type01-modal .notice-title strong {
  font-weight: 700;
  color: #fff;
}
.notice-type01-modal .notice-box {
  background: #fff;
  border-radius: 10px;
  padding: 60px 80px 60px 80px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.notice-type01-modal .notice-box .notice-desc {
  font-size: 24px;
  color: #333;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 25px;
}
.notice-type01-modal .notice-box .notice-desc strong {
  font-weight: 700;
}
.notice-type01-modal .notice-box .row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.notice-type01-modal .notice-box .row .label {
  min-width: 140px;
  background: #333;
  color: #fff;
  font-size: 20px;
  padding: 10px 10px;
  border-radius: 0px 5px 5px 5px;
  min-width: 95px;
  text-align: center;
}
.notice-type01-modal .notice-box .row .value {
  font-size: 25px;
  font-weight: 700;
  color: #0758ac;
  display: flex;
  align-items: center;
}
.notice-type01-modal .notice-box .notice-sub {
  font-size: 15px;
  color: #777;
  margin-left: 150px;
  margin-bottom: 15px;
}

.modal-dispatch-cont {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-dispatch-cont .route--manage__box .listbody {
  height: 200px;
}

.modal--vehicle-dispatch .modal-dialog {
  width: 100%;
  max-width: 568px;
  max-height: calc(100vh - 32px);
  border-radius: 22px;
  overflow: hidden;
}
.modal--vehicle-dispatch .modal-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 20px 22px;
  background: #eef0f2;
}
.modal--vehicle-dispatch .modal-header {
  display: none;
}
.modal--vehicle-dispatch__summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: 16px 20px;
  min-height: 64px;
  background: #d9ebf7;
  border: 1px solid #88bfe3;
  border-radius: 16px;
}
.modal--vehicle-dispatch__summary-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: bold;
  color: #2f2f2f;
}
.modal--vehicle-dispatch__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
}
.modal--vehicle-dispatch__icon--bus {
  background-image: url("../images/ico-bus.png");
}
.modal--vehicle-dispatch__icon--cal {
  background-image: url("../images/ico-calendar.png");
}
.modal--vehicle-dispatch__section {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal--vehicle-dispatch__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.modal--vehicle-dispatch__section-head--line {
  padding-bottom: 12px;
  border-bottom: 1px solid #d9d9d9;
}
.modal--vehicle-dispatch__section-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: bold;
  color: #2d2d2d;
}
.modal--vehicle-dispatch__section-title span {
  color: #047bb6;
  font-weight: bold;
}
.modal--vehicle-dispatch__section-note {
  margin: 0;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: #047bb6;
  white-space: nowrap;
}
.modal--vehicle-dispatch__search-wrap {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid #c6c6c6;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.modal--vehicle-dispatch__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  background: transparent;
  padding: 0 14px;
  font-size: 15px;
  color: #333;
  box-shadow: none !important;
}
.modal--vehicle-dispatch__input::placeholder {
  color: #b8b8b8;
  font-weight: 600;
}
.modal--vehicle-dispatch__search-btn {
  width: 46px;
  height: 100%;
  flex-shrink: 0;
  border: 0;
  background: #fff url("../images/ico-search2.png") no-repeat center;
  cursor: pointer;
}
.modal--vehicle-dispatch__chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Swiper 적용 시 */
}
.modal--vehicle-dispatch__chips::-webkit-scrollbar {
  display: none;
}
.modal--vehicle-dispatch__chips.swiper {
  width: 100%;
  overflow: hidden;
}
.modal--vehicle-dispatch__chips.swiper:active {
  cursor: grabbing;
}
.modal--vehicle-dispatch__chips.swiper .swiper-wrapper {
  display: flex;
}
.modal--vehicle-dispatch__chips.swiper .swiper-slide {
  width: 220px;
}
.modal--vehicle-dispatch__chip {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e4e4e4;
  background: #f3f3f3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.modal--vehicle-dispatch__chip.is-selected {
  border-color: #0f84c7;
  background: #0f84c7;
}
.modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-top {
  color: #fff;
  background: #0f84c7;
}
.modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-divider {
  background: rgba(255, 255, 255, 0.2);
}
.modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-remove {
  opacity: 1;
  filter: brightness(0) invert(1);
}
.modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-check {
  background: #0a6fa7;
  color: #fff;
}
.modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-check span {
  color: #fff;
}
.modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-name {
  color: #fff;
}
.modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-course {
  color: #fff;
}
.modal--vehicle-dispatch__chip-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 14px 17px;
  min-height: 60px;
  height: 60px;
  background: #f3f3f3;
  color: #2f2f2f;
}
.modal--vehicle-dispatch__chip-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.modal--vehicle-dispatch__chip-name {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: bold;
  line-height: 1;
  flex: 1;
  text-align: center;
}
.modal--vehicle-dispatch__chip-divider {
  width: 1px;
  height: 24px;
  background: #dddddd;
  flex-shrink: 0;
}
.modal--vehicle-dispatch__chip-course {
  min-width: 0;
  font-size: 17px;
  font-weight: bold;
  flex: 1;
  text-align: center;
  line-height: 1.1;
}
.modal--vehicle-dispatch__chip-course--placeholder {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #b6b6b6;
  white-space: normal;
  word-break: keep-all;
}
.modal--vehicle-dispatch__chip-remove {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center;
  background-size: 16px;
  cursor: pointer;
  opacity: 0.9;
}
.modal--vehicle-dispatch__chip-check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 12px;
  background: #ececec;
  color: #8b8b8b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.modal--vehicle-dispatch__chip-check span {
  order: 1;
  font-size: 13px;
}
.modal--vehicle-dispatch__chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.modal--vehicle-dispatch__chip-check i {
  order: 2;
  width: 14px;
  height: 14px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
}
.modal--vehicle-dispatch__chip-check i .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
.modal--vehicle-dispatch__chip-check i .modal.active {
  display: flex;
}
.modal--vehicle-dispatch__chip-check i .modal .modal-dialog {
  background: #ecf0f2;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 90%;
  max-height: 90%;
  overflow: hidden;
}
.modal--vehicle-dispatch__chip-check i .modal .modal-dialog .modal-header {
  background: #047bb6;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
  font-weight: 300;
}
.modal--vehicle-dispatch__chip-check i .modal .modal-dialog .modal-header span {
  color: #fff;
}
.modal--vehicle-dispatch__chip-check i .modal .modal-dialog .modal-header button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-image: url("../images/modal-close.png");
}
.modal--vehicle-dispatch__chip-check i .modal .modal-dialog .modal-content {
  padding: 20px;
  min-height: 150px;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts__col {
  width: 480px;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts__col h3 {
  font-size: 19px;
  font-weight: 500;
  color: #047bb6;
  margin-top: 10px;
  margin-bottom: 12px;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts__item .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts__item .head .data {
  font-size: 13px;
  color: #717171;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts__item h4 {
  font-size: 15px;
  color: #1d1d1d;
  font-weight: 500;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts__item .info {
  font-size: 15px;
  color: #717171;
}
.modal--vehicle-dispatch__chip-check i .modal--alerts__item + div {
  margin-top: 10px;
}
.modal--vehicle-dispatch__chip-check i .modal__card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 480px;
  padding: 20px;
}
.modal--vehicle-dispatch__chip-check i .stats--modal__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.modal--vehicle-dispatch__chip-check i .stats--modal__title {
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}
.modal--vehicle-dispatch__chip-check i .stats--modal .sub {
  font-size: 13px;
  font-weight: normal;
  color: #1d1d1d;
  margin-bottom: 20px;
}
.modal--vehicle-dispatch__chip-check i .stats--modal .sub b {
  font-weight: normal;
  color: #1976d2;
}
.modal--vehicle-dispatch__chip-check i .notice--regi--modal .modal__card {
  width: 980px;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .modal__card {
  width: 980px;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-header .notice-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-header .notice-left .badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 300;
  border-radius: 4px;
  line-height: 1;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-header .notice-left .badge.badge-danger {
  background: #e54e57;
  color: #fff;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-header .notice-left .notice-title {
  font-size: 15px;
  font-weight: 300;
  color: #1d1d1d;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-header .notice-right {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #1d1d1d;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-header .notice-right .notice-writer {
  font-weight: 500;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-header .notice-right .divider {
  margin: 0 6px;
  color: #c6c6c6;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin-bottom: 20px;
}
.modal--vehicle-dispatch__chip-check i .notice--detail--modal .notice-content {
  border-radius: 5px;
  border: 1px solid #c6c6c6;
  padding: 20px 10px;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 300;
}
.modal--vehicle-dispatch__chip-check i .small--pop {
  position: absolute;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.modal--vehicle-dispatch__chip-check i .small--pop__head {
  font-size: 17px;
  margin-bottom: 10px;
}
.modal--vehicle-dispatch__chip-check i .small--pop .line-flex-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #c6c6c6;
  border-radius: 5px;
  margin-bottom: 5px;
}
.modal--vehicle-dispatch__chip-check i .modal--select-station .modal--select-station__dialog {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 350px;
  max-width: 90%;
  padding: 30px 20px 20px;
  text-align: center;
}
.modal--vehicle-dispatch__chip-check i .modal--select-station .modal--select-station__icon {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal--vehicle-dispatch__chip-check i .modal--select-station .modal--select-station__icon svg {
  display: block;
  width: 56px;
  height: 56px;
}
.modal--vehicle-dispatch__chip-check i .modal--select-station .modal--select-station__message {
  margin: 0 0 28px;
  font-size: 16px;
  color: #1d1d1d;
  line-height: 1.5;
}
.modal--vehicle-dispatch__chip-check i .notice-dialog {
  position: relative;
}
.modal--vehicle-dispatch__chip-check i .notice-dialog .notice-bottom {
  background: #ecf0f2;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 70px;
}
.modal--vehicle-dispatch__chip-check i .notice-dialog .notice-bottom .no-week {
  font-size: 14px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal--vehicle-dispatch__chip-check i .notice-dialog .notice-bottom .no-week input[type=checkbox] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
}
.modal--vehicle-dispatch__chip-check i .notice-dialog .notice-bottom .btn-close {
  background: none;
  border: none;
  color: #111;
  font-size: 15px;
  cursor: pointer;
  padding: 5px 10px;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal {
  max-height: 700px;
  background: #daebfc;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-top {
  text-align: center;
  padding-bottom: 240px;
  background-image: url("../images/top-img.png");
  background-position: bottom;
  background-repeat: no-repeat;
  margin-bottom: 30px;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-logo {
  padding-top: 80px;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-title {
  padding-top: 20px;
  font-size: 60px;
  font-weight: bold;
  color: #0844aa;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-row-head {
  background: #0067c5;
  color: #fff;
  font-size: 25px;
  padding: 14px 20px;
  font-weight: 600;
  text-align: center;
  border-radius: 10px 10px 0 0;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-box {
  background: #fff;
  margin-bottom: 20px;
  border-radius: 0 0 10px 10px;
  padding: 30px;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-img-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-img-box img {
  width: 100%;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-row:last-child {
  margin-bottom: 0;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-row .label {
  background: #077cb4;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 20px;
  white-space: nowrap;
  display: inline-block;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-row .value {
  font-size: 20px;
  color: #0a244a;
}
.modal--vehicle-dispatch__chip-check i .notice-type02-modal .notice-row .value.strong {
  font-weight: 700;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal {
  max-height: 700px;
  position: relative;
  padding: 80px 80px !important;
  background-color: #0972db;
  background-image: url("../images/notice-type01-bg.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal:after {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 220px;
  background-image: url("../images/notice-type01-bottom.png");
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-title {
  font-size: 55px;
  color: #fff;
  font-weight: 100;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 20px;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-title strong {
  font-weight: 700;
  color: #fff;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-box {
  background: #fff;
  border-radius: 10px;
  padding: 60px 80px 60px 80px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-box .notice-desc {
  font-size: 24px;
  color: #333;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 25px;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-box .notice-desc strong {
  font-weight: 700;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-box .row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-box .row .label {
  min-width: 140px;
  background: #333;
  color: #fff;
  font-size: 20px;
  padding: 10px 10px;
  border-radius: 0px 5px 5px 5px;
  min-width: 95px;
  text-align: center;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-box .row .value {
  font-size: 25px;
  font-weight: 700;
  color: #0758ac;
  display: flex;
  align-items: center;
}
.modal--vehicle-dispatch__chip-check i .notice-type01-modal .notice-box .notice-sub {
  font-size: 15px;
  color: #777;
  margin-left: 150px;
  margin-bottom: 15px;
}
.modal--vehicle-dispatch__chip-check i .modal-dispatch-cont {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal--vehicle-dispatch__chip-check i .modal-dispatch-cont .route--manage__box .listbody {
  height: 200px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch .modal-dialog {
  width: 100%;
  max-width: 568px;
  max-height: calc(100vh - 32px);
  border-radius: 22px;
  overflow: hidden;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch .modal-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 20px 22px;
  background: #eef0f2;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch .modal-header {
  display: none;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  padding: 16px 20px;
  min-height: 64px;
  background: #d9ebf7;
  border: 1px solid #88bfe3;
  border-radius: 16px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__summary-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: bold;
  color: #2f2f2f;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__icon--bus {
  background-image: url("../images/ico-bus.png");
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__icon--cal {
  background-image: url("../images/ico-calendar.png");
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__section {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__section-head--line {
  padding-bottom: 12px;
  border-bottom: 1px solid #d9d9d9;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__section-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: bold;
  color: #2d2d2d;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__section-title span {
  color: #047bb6;
  font-weight: bold;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__section-note {
  margin: 0;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: #047bb6;
  white-space: nowrap;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__search-wrap {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid #c6c6c6;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  background: transparent;
  padding: 0 14px;
  font-size: 15px;
  color: #333;
  box-shadow: none !important;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__input::placeholder {
  color: #b8b8b8;
  font-weight: 600;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__search-btn {
  width: 46px;
  height: 100%;
  flex-shrink: 0;
  border: 0;
  background: #fff url("../images/ico-search2.png") no-repeat center;
  cursor: pointer;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Swiper 적용 시 */
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chips::-webkit-scrollbar {
  display: none;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chips.swiper {
  width: 100%;
  overflow: hidden;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chips.swiper:active {
  cursor: grabbing;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chips.swiper .swiper-wrapper {
  display: flex;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chips.swiper .swiper-slide {
  width: 220px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e4e4e4;
  background: #f3f3f3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip.is-selected {
  border-color: #0f84c7;
  background: #0f84c7;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-top {
  color: #fff;
  background: #0f84c7;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-divider {
  background: rgba(255, 255, 255, 0.2);
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-remove {
  opacity: 1;
  filter: brightness(0) invert(1);
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-check {
  background: #0a6fa7;
  color: #fff;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-check span {
  color: #fff;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-name {
  color: #fff;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip.is-selected .modal--vehicle-dispatch__chip-course {
  color: #fff;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 14px 17px;
  min-height: 60px;
  height: 60px;
  background: #f3f3f3;
  color: #2f2f2f;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-name {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: bold;
  line-height: 1;
  flex: 1;
  text-align: center;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-divider {
  width: 1px;
  height: 24px;
  background: #dddddd;
  flex-shrink: 0;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-course {
  min-width: 0;
  font-size: 17px;
  font-weight: bold;
  flex: 1;
  text-align: center;
  line-height: 1.1;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-course--placeholder {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: #b6b6b6;
  white-space: normal;
  word-break: keep-all;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-remove {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a7a' stroke-width='2'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center;
  background-size: 16px;
  cursor: pointer;
  opacity: 0.9;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 12px;
  background: #ececec;
  color: #8b8b8b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-check span {
  order: 1;
  font-size: 13px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-check i {
  order: 2;
  width: 14px;
  height: 14px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-check input:checked + i {
  border-color: #ffffff;
  background: #ffffff;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__chip-check input:checked + i::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: #0f84c7;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__course-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-height: 156px;
  overflow-y: auto;
  padding-right: 2px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__course-grid::-webkit-scrollbar {
  width: 6px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__course-grid::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 999px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__course-btn {
  height: 36px;
  border: 1px solid #c6c6c6;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #6b6b6b;
  cursor: pointer;
  text-align: center;
  padding: 0 8px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__course-btn.is-selected {
  border-color: #047bb6;
  background: #fff;
  color: #047bb6;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 0;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__footer-btn {
  min-width: 106px;
  height: 40px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  border: 0;
  box-shadow: none;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__footer-btn--ghost {
  background: #fff;
  border: 1px solid #555555 !important;
  color: #555555;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__footer-btn--dark {
  background: #555555;
  color: #fff;
}
.modal--vehicle-dispatch__chip-check i .modal--vehicle-dispatch__footer-btn--primary {
  background: #047bb6;
  color: #fff;
}
.modal--vehicle-dispatch__chip-check input:checked + i {
  border-color: #ffffff;
  background: #ffffff;
}
.modal--vehicle-dispatch__chip-check input:checked + i::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: #0f84c7;
}
.modal--vehicle-dispatch__course-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-height: 156px;
  overflow-y: auto;
  padding-right: 2px;
}
.modal--vehicle-dispatch__course-grid::-webkit-scrollbar {
  width: 6px;
}
.modal--vehicle-dispatch__course-grid::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 999px;
}
.modal--vehicle-dispatch__course-btn {
  height: 36px;
  border: 1px solid #c6c6c6;
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #6b6b6b;
  cursor: pointer;
  text-align: center;
  padding: 0 8px;
}
.modal--vehicle-dispatch__course-btn.is-selected {
  border-color: #047bb6;
  background: #fff;
  color: #047bb6;
}
.modal--vehicle-dispatch__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 0;
}
.modal--vehicle-dispatch__footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal--vehicle-dispatch__footer-btn {
  min-width: 106px;
  height: 40px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  border: 0;
  box-shadow: none;
}
.modal--vehicle-dispatch__footer-btn--ghost {
  background: #fff;
  border: 1px solid #555555 !important;
  color: #555555;
}
.modal--vehicle-dispatch__footer-btn--dark {
  background: #555555;
  color: #fff;
}
.modal--vehicle-dispatch__footer-btn--primary {
  background: #047bb6;
  color: #fff;
}

.modal--schedule-clear {
  /* 등록/확인 공용 info 아이콘 */
}
.modal--schedule-clear .modal-dialog {
  width: 100%;
  max-width: 460px;
  border-radius: 16px;
  overflow: hidden;
}
.modal--schedule-clear .modal-content {
  padding: 18px 18px 14px;
  background: #ecf0f2;
}
.modal--schedule-clear .modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border: 0;
  background: url("../images/info-ico.png") no-repeat center/contain;
}
.modal--schedule-clear__body {
  background: #fff;
  border-radius: 12px;
  min-height: 170px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.modal--schedule-clear__icon {
  width: 47px;
  height: 40px;
  background: url("../images/ico-remove.png") no-repeat center;
}
.modal--schedule-clear__message {
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.25;
  color: #1d1d1d;
  font-weight: 500;
}
.modal--schedule-clear__footer {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.modal--schedule-clear__btn {
  min-width: 112px;
  height: 40px;
  border: 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
}
.modal--schedule-clear__btn--cancel {
  background: #5f5f5f;
  color: #fff;
}
.modal--schedule-clear__btn--confirm {
  background: #047bb6;
  color: #fff;
}

.modal--assignee-dispatch .modal-dialog {
  width: 100%;
  max-width: 568px;
  max-height: calc(100vh - 32px);
  border-radius: 22px;
  overflow: hidden;
}
.modal--assignee-dispatch .modal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 22px;
  background: #eef0f2;
}
.modal--assignee-dispatch__summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  min-height: 48px;
  padding: 14px 16px;
  background: #d9ebf7;
  border: 1px solid #88bfe3;
  border-radius: 12px;
}
.modal--assignee-dispatch__summary-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #2f2f2f;
}
.modal--assignee-dispatch__icon {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.modal--assignee-dispatch__icon--id {
  background-image: url("../images/ico-id.png");
}
.modal--assignee-dispatch__icon--cal {
  background-image: url("../images/ico-calendar.png");
}
.modal--assignee-dispatch__section {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d9d9d9;
  padding: 16px;
}
.modal--assignee-dispatch__section--disabled {
  background: #edf1f4;
  border-color: #cfd7dd;
  color: #98a3ad;
  padding: 14px 16px;
  pointer-events: none;
}
.modal--assignee-dispatch__section-head {
  display: flex;
  align-items: center;
}
.modal--assignee-dispatch__section-head--line {
  padding-bottom: 10px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 12px;
}
.modal--assignee-dispatch__section-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  color: #2d2d2d;
}
.modal--assignee-dispatch__section-title span {
  color: #047bb6;
  font-weight: 700;
}
.modal--assignee-dispatch__section--disabled .modal--assignee-dispatch__section-title {
  color: #8e9aa5;
}
.modal--assignee-dispatch__section--disabled .modal--assignee-dispatch__section-title span {
  color: #8e9aa5;
}
.modal--assignee-dispatch__select {
  width: 100%;
  height: 44px;
  padding: 0 30px 0 12px;
  font-size: 15px;
  color: #b4b4b4;
}
.modal--assignee-dispatch__select:focus {
  color: #2d2d2d;
}
.modal--assignee-dispatch__footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
}
.modal--assignee-dispatch__footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal--assignee-dispatch__footer-btn {
  min-width: 94px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
}
.modal--assignee-dispatch__footer-btn--ghost {
  background: #fff;
  border: 1px solid #8f8f8f !important;
  color: #595959;
}
.modal--assignee-dispatch__footer-btn--dark {
  background: #5f5f5f;
  color: #fff;
}
.modal--assignee-dispatch__footer-btn--primary {
  background: #047bb6;
  color: #fff;
}

.modal--schedule-edit .modal-dialog {
  width: 100%;
  max-width: 520px;
  border-radius: 22px;
  overflow: hidden;
}
.modal--schedule-edit .modal-content {
  background: #ecf0f2;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal--schedule-edit__selected {
  background: #bdd7e6;
  border: 1px solid #6aaed0;
  border-radius: 12px;
  padding: 20px;
}
.modal--schedule-edit__title {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.2;
  color: #047bb6;
  font-weight: 500;
}
.modal--schedule-edit__info {
  margin: 0;
}
.modal--schedule-edit__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 16px;
}
.modal--schedule-edit__row + .modal--schedule-edit__row {
  margin-top: 10px;
}
.modal--schedule-edit__row dt {
  margin: 0;
  font-size: 15px;
  color: #1d1d1d;
  font-weight: 500;
}
.modal--schedule-edit__row dd {
  margin: 0;
  font-size: 15px;
  color: #1d1d1d;
  font-weight: 500;
}
.modal--schedule-edit__move {
  background: #fff;
  border-radius: 18px;
  padding: 24px 28px 28px;
}
.modal--schedule-edit__question {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 17px;
  color: #3a3a3a;
  font-weight: 600;
}
.modal--schedule-edit__question i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-image: url("../images/ico-i.png");
  background-size: 14px;
  flex-shrink: 0;
  background-repeat: no-repeat;
}
.modal--schedule-edit__field-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 10px;
}
.modal--schedule-edit__label {
  font-size: 15px;
  color: #2d2d2d;
  font-weight: 600;
}
.modal--schedule-edit__date-range {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.modal--schedule-edit__date-item {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.modal--schedule-edit__date-item::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 16px;
  pointer-events: none;
  background: url("../images/ico-cal.png") no-repeat center;
  background-size: contain;
}
.modal--schedule-edit__date-input {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  background: #fff;
  padding: 0 30px 0 10px;
  font-size: 15px;
  color: #3a3a3a;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  flex: 1;
  white-space: nowrap;
  overflow: visible;
}
.modal--schedule-edit__date-input::-webkit-datetime-edit {
  padding: 0;
}
.modal--schedule-edit__date-input::-webkit-date-and-time-value {
  text-align: left;
}
.modal--schedule-edit__date-input::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 20px;
  opacity: 0;
  cursor: pointer;
}
.modal--schedule-edit__date-sep {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2d2d2d;
}
.modal--schedule-edit__footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}
.modal--schedule-edit__btn {
  min-width: 170px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 500;
}
.modal--schedule-edit__btn--cancel {
  background: #5f5f5f;
  color: #fff;
}
.modal--schedule-edit__btn--confirm {
  background: #047bb6;
  color: #fff;
}

.modal--route-info .modal-dialog {
  min-width: 360px;
  max-width: 420px;
  border-radius: 16px;
}
.modal--route-info .modal-header {
  padding: 12px 16px;
  font-size: 28px;
  font-weight: 600;
}
.modal--route-info .modal-content {
  padding: 16px 18px 18px;
}
.modal--route-info .modal-route-body {
  background: #f4f4f4;
  border-radius: 14px;
  padding: 18px 16px 12px;
  margin-bottom: 16px;
  text-align: center;
}
.modal--route-info .modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border: none;
  background: url("../images/info-ico.png") no-repeat center/contain;
}
.modal--route-info .modal-message {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}
.modal--route-info .modal-sub {
  margin: 0;
  font-size: 13px;
  color: #2d9cdb;
  line-height: 1.35;
  word-break: keep-all;
}
.modal--route-info .btn-group {
  justify-content: center;
  margin-top: 0;
}
.modal--route-info .btn-group .btn {
  min-width: 136px;
  height: 42px;
  border-radius: 21px;
  font-size: 17px;
  text-decoration: none;
}

.modal--route-info--duplicate .modal-dialog {
  min-width: 410px;
  max-width: 410px;
}
.modal--route-info--duplicate .btn-group {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.modal--route-info--duplicate .btn-group .btn.cancle {
  border-color: #2d9cdb;
  color: #2d9cdb;
  background: #fff;
}
.modal--route-info--duplicate .btn-group .btn.primary {
  background: #047bb6;
}

.btn {
  width: 90px;
  height: 48px;
  border-radius: 5px;
  border: none;
  font-size: 17px;
  transition: all 0.15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 8px;
}
.btn.primary {
  background: #047bb6;
  color: #fff;
}
.btn.secondary {
  border: 1px solid #047bb6;
  color: #047bb6;
  background: #fff;
}
.btn.secondary:hover {
  background: #eef7fc;
}
.btn.danger {
  background: #555555;
  color: #fff;
}
.btn.border-primary {
  border: 1px solid #047bb6;
  color: #047bb6;
  background: #fff;
}
.btn.blue {
  background: #0758ac;
  color: #fff;
}
.btn:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.btn.cancle {
  background: #f0f0f0;
  border: 1px solid #d8d8d8;
  color: #555;
}
.btn.small {
  height: 36px;
  font-size: 15px;
}
.btn.border {
  border: 1px solid #d8d8d8;
}

.btn-text {
  background: transparent;
  border: none;
  color: #047bb6;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-text:hover {
  text-decoration: underline;
}

.round--btn {
  width: 106px;
  height: 42px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.btn-group.mt0 {
  margin-top: 0;
}
.btn-group.center {
  justify-content: center;
}
.btn-group.between {
  justify-content: space-between;
}
.btn-group button + button {
  margin-left: 5px;
}

.btn-refresh {
  width: 48px;
  height: 48px;
  background-image: url("../images/ico-refresh.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px;
  border: 1px solid #c6c6c6;
  background-color: #fff;
}

.btn-down {
  width: 135px;
  background-color: #023f5e;
  color: #fff;
  font-size: 15px;
  text-align: left;
  padding-left: 45px;
  background-image: url("../images/ico-down.png");
  background-repeat: no-repeat;
  background-position: 20px center;
}

.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.block {
  width: 100%;
}

.station-inner {
  height: 100%;
}

.station-list {
  height: 100%;
}
.station-list .tab--panel {
  padding: 0 20px 20px;
  height: calc(100% - 245px);
}

/* ========== 리스트 - 확장형 ========== */
.rc-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px;
  color: #111827;
  background: #fff;
  font-size: 14px;
  line-height: 1.3;
}
.rc-card + .rc-card {
  margin-top: 10px;
}
.rc-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rc-card__route {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
.rc-card__star {
  appearance: none;
  border: 0;
  background: transparent;
  color: #d1d5db;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  width: 15px;
  height: 14px;
  background-image: url("../images/ico-starline.png");
  transition: all 0.3s;
}
.rc-card__star.active, .rc-card__star:hover {
  transform: scale(1.05);
  background-image: url("../images/ico-star.png");
}
.rc-card .rc-badges {
  display: flex;
  gap: 6px;
}
.rc-card .rc-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rc-card .rc-status .rc-status__soon {
  color: #ef363d;
}
.rc-card .rc-status .rc-status__sep {
  color: #d8d8d8;
}
.rc-card .rc-status .rc-status__eta {
  color: #000;
}
.rc-card .rc-track {
  position: relative;
  margin-top: 16px;
  padding: 28px 0 34px;
}
.rc-card .rc-track__line {
  height: 12px;
  background: #e5e7eb;
  border-radius: 999px;
}
.rc-card .rc-vehicle {
  position: absolute;
  top: 0px;
  left: 0%;
  transform: translateX(-50%);
  aspect-ratio: 42/24;
}
.rc-card .rc-stops {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rc-card .rc-stop {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.rc-card .rc-stop__dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d1d5db;
  margin-top: -16px;
  aspect-ratio: 1/1;
}
.rc-card .rc-stop__dot--ring {
  position: relative;
  border-color: #047bb6;
}
.rc-card .rc-stop__dot--ring:after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: block;
  width: 8px;
  height: 8px;
  background: #047bb6;
}
.rc-card .rc-stop__label {
  margin-top: 6px;
  max-width: 120px;
  text-align: center;
  color: #6b7280;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-card .rc-stop--current .rc-stop__label {
  color: #111827;
}
.rc-card .rc-chip {
  position: relative;
  background: #047bb6;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  font-size: 12px;
}
.rc-card .rc-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid #047bb6;
}

/* ========== 리스트 - 카드형 ========== */
.bus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px) {
  .bus-grid {
    grid-template-columns: 1fr;
  }
}
.bus-grid .bus-card {
  position: relative;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
  transition: 0.15s ease;
}
.bus-grid .bus-card:hover {
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}
.bus-grid .bus-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bus-grid .bus-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: #deecf8;
  background-image: url("../images/station-bus.png");
  background-repeat: no-repeat;
  background-position: center;
  display: grid;
  place-items: center;
  color: #2563eb;
  font-size: 20px;
}
.bus-grid .bus-card__route {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #111827;
}
.bus-grid .bus-card__star {
  appearance: none;
  border: 0;
  background: transparent;
  color: #d1d5db;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  width: 15px;
  height: 14px;
  background-image: url("../images/ico-starline.png");
  transition: all 0.3s;
}
.bus-grid .bus-card__star.active, .bus-grid .bus-card__star:hover {
  transform: scale(1.05);
  background-image: url("../images/ico-star.png");
}
.bus-grid .bus-card__badges {
  display: flex;
  gap: 6px;
  margin: 4px 0 8px;
}
.bus-grid .bus-card__alert {
  margin: 6px 0 4px;
  color: #ef4444;
  font-weight: 800;
  font-size: 13px;
}
.bus-grid .bus-card__time {
  margin: 0;
  color: #111827;
  font-weight: 600;
  font-size: 13px;
}
.bus-grid .bus-card__time .sub {
  color: #6b7280;
  font-weight: 500;
}

/* ========== 단말관리(상단 카드 영역) ========== */
.terminal-manage {
  margin-bottom: 20px;
  /* 좌측 카드 */
  /* 우측 카드 */
  /* 왼쪽 도넛 카드 */
  /* 우측 헤더(전체 + 업데이트 + 전체건수) */
  /* 하단 상태 박스 */
}
.terminal-manage__cards {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.terminal-manage__card {
  border-radius: 20px;
  overflow: hidden;
}
.terminal-manage__card--chart {
  flex: 0 0 510px;
  background: #eff6ff !important;
  border: 1px solid #c9def7 !important;
}
.terminal-manage__card--wide {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid #dcdfe5;
}
.terminal-manage__head-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.terminal-manage__updated {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #8e96a3;
  font-weight: 400;
  white-space: nowrap;
}
.terminal-manage__donut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 90px;
  min-height: 120px;
}
.terminal-manage__donut-placeholder {
  position: relative;
  width: 140px;
  flex: 0 0 140px;
}
.terminal-manage__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: 10px 20px;
  font-size: 14px;
  color: #222;
  font-weight: 500;
  flex: 1;
}
.terminal-manage__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 17px;
}
.terminal-manage__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 12px;
}
.terminal-manage__card--wide .dash--card__header {
  flex-direction: column;
  align-items: baseline;
  gap: 14px;
}
.terminal-manage__total {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.terminal-manage__total-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  margin-left: auto;
}
.terminal-manage__total-num {
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: #0f86d8;
}
.terminal-manage__total-unit {
  font-size: 21px;
  line-height: 1;
  font-weight: 600;
  color: #333;
}
.terminal-manage__status-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.terminal-manage__status {
  min-height: 92px;
  border-radius: 12px;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.terminal-manage__status--good {
  background: #eafff0;
}
.terminal-manage__status--normal {
  background: #fff2cf;
}
.terminal-manage__status--bad {
  background: #fff1f1;
}
.terminal-manage__status-label {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}
.terminal-manage__status-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 25px;
  line-height: 1;
  font-weight: 700;
}
.terminal-manage__status--good .terminal-manage__status-value {
  color: #55a06d;
}
.terminal-manage__status--normal .terminal-manage__status-value {
  color: #d2a022;
}
.terminal-manage__status--bad .terminal-manage__status-value {
  color: #ef5b63;
}
.terminal-manage__status-unit {
  font-size: 15px;
  font-weight: 600;
  color: #444;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-group.ti-top {
  align-items: flex-start;
}
.form-group.ti-top .form-ti {
  padding-top: 5px;
}
.form-group .form-control {
  flex: 1;
}
.form-group + .form-group {
  margin-top: 10px;
}

.form-ti {
  font-size: 15px;
  color: #1d1d1d;
}
.form-ti.w100 {
  min-width: 100px;
}

.form-control {
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #c6c6c6;
  color: #1d1d1d;
  font-size: 15px;
  background-color: #fff;
  width: 100%;
}
.form-control:focus {
  border-color: #005bac;
}
.form-control::placeholder {
  font-weight: 300;
}

select {
  appearance: none;
  background: url("../images/select-arrow.png") no-repeat right 5% center;
}

.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 12px 6px 0;
}

.checkbox__label,
.radio__label {
  font-size: 14px;
  color: #374151;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.checkbox__input::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  background: #fff;
  mask: url("data:image/svg+xml;utf8,      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>        <path d='M20.285 6.709a1 1 0 0 1 .006 1.414l-9.2 9.2a1 1 0 0 1-1.414 0l-5.0-5.0a1 1 0 1 1 1.414-1.414l4.293 4.293 8.493-8.493a1 1 0 0 1 1.408 0z'/>      </svg>") center/contain no-repeat;
}
.checkbox__input:hover:not(:disabled) {
  border-color: #94a3b8;
}
.checkbox__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
  border-color: #1976d2;
}
.checkbox__input:checked {
  background: #1976d2;
  border-color: #1976d2;
}
.checkbox__input:checked::before {
  transform: scale(1);
}
.checkbox__input:checked:hover {
  background: #1565c0;
  border-color: #1565c0;
}
.checkbox__input:indeterminate {
  background: #1976d2;
  border-color: #1976d2;
}
.checkbox__input:indeterminate::before {
  mask: none;
  width: 10px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transform: scale(1);
}
.checkbox__input:disabled {
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #e5e7eb;
}
.checkbox__input:disabled + .checkbox__label {
  color: #9ca3af;
  cursor: not-allowed;
}

.radio__input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.radio__input::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  background: #fff;
}
.radio__input:hover:not(:disabled) {
  border-color: #94a3b8;
}
.radio__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
  border-color: #1976d2;
}
.radio__input:checked {
  background: #1976d2;
  border-color: #1976d2;
}
.radio__input:checked::before {
  background: #fff;
  transform: scale(1);
}
.radio__input:checked:hover {
  background: #1565c0;
  border-color: #1565c0;
}
.radio__input:disabled {
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #e5e7eb;
}
.radio__input:disabled + .radio__label {
  color: #9ca3af;
  cursor: not-allowed;
}

/* 업로드 영역 */
.upload-inner {
  width: 100%;
}

.upload-box {
  border: 1px dashed #c6c6c6;
  background: #f9fafb;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 12px;
}
.upload-box p {
  font-weight: 300;
  color: #9c9b9b;
}
.upload-box .btn-upload {
  margin-top: 12px;
  padding: 6px 16px;
  font-size: 14px;
  color: #fff;
  background: #999999;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.upload-box .btn-upload:hover {
  background: #555555;
}

/* 파일 리스트 */
.file-list .file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #c6c6c6;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.file-list .file-item .file-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.file-list .file-item .file-info .file-icon img {
  vertical-align: middle;
}
.file-list .file-item .file-info .file-name {
  font-weight: 300;
  color: #111827;
}
.file-list .file-item .file-info .file-ext {
  color: #6b7280;
  font-size: 13px;
}
.file-list .file-item .btn-download {
  background: none;
  border: none;
  cursor: pointer;
}
.file-list .file-item .btn-download img {
  vertical-align: middle;
}

.form--tbl__header {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}
.form--tbl__header select {
  width: 150px;
  height: 48px;
}
.form--tbl__util {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.form--tbl__util select {
  width: 150px;
  height: 48px;
}
.form--tbl__util .total {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form--tbl__util .total span {
  display: inline-block;
  margin: 0 2px;
  color: #047bb6;
  font-weight: bold;
}
.form--tbl__util .util-btn {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box {
  display: flex;
  align-items: center;
  width: 400px; /* 원하는 너비 */
  border: 1px solid #c6c6c6;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  height: 48px;
}
.search-box input {
  flex: 1;
  height: 100%;
  padding: 10px 12px;
  border: none;
  outline: none;
  font-size: 14px;
}
.search-box .search-btn {
  height: 100%;
  padding: 0 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: #555;
}
.search-box .search-btn:hover {
  color: #000;
}

.col-dl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.col-dl dt {
  font-size: 17px;
}

/* ====== Login ====== */
.login-wrapper {
  display: grid;
  grid-template-columns: 50% 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.login-Bg {
  background-image: url("../images/login-bg.jpg");
  background-size: cover;
  width: 100%;
  height: 100%;
  border-radius: 0 100px 0 0;
}

.login-box {
  position: relative;
  height: 100vh;
  margin: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 0 100px;
  width: 100%;
}
.login-box:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #BADAFF;
  z-index: -1;
}
.login-box .login-box-inner {
  background: #fff;
  border: 1px solid #cad4d9;
  border-radius: 20px;
  padding: 30px;
  width: 514px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  text-align: center;
}
.login-box .logo {
  padding-top: 50px;
}
.login-box form {
  padding-top: 100px;
}
.login-box .login-form-group {
  text-align: left;
  margin-bottom: 20px;
}
.login-box .login-form-group label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}
.login-box .login-form-group .password-box {
  position: relative;
}
.login-box .login-form-group .password-box input {
  padding-right: 40px;
}
.login-box .login-form-group .password-box .eye-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 14px;
  color: #666;
  width: 23px;
  height: 21px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.login-box .login-form-group .password-box .eye-toggle.eye {
  background-image: url("../images/eye-on.png");
}
.login-box .login-form-group .password-box .eye-toggle.eye-off {
  background-image: url("../images/eye-off.png");
}
.login-box .login-form-group .login-form-control {
  width: 100%;
  padding: 18px 20px;
  border: 1px solid #dcdcdc;
  border-radius: 28px;
  outline: none;
  font-size: 14px;
  height: 56px;
}
.login-box .login-form-group .login-form-control:focus {
  border-color: #005bac;
}
.login-box .login-btn {
  width: 100%;
  padding: 14px;
  background: #077cb4;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 20px;
}
.login-box .login-btn:hover {
  background: #005bac;
}
.login-box .help-links {
  margin-top: 20px;
  font-size: 15px;
  color: #999999;
}
.login-box .help-links a {
  text-decoration: none;
  color: #777;
  font-weight: 300;
}
.login-box .help-links a:hover {
  text-decoration: underline;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}
.tbl table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #c6c6c6;
}
.tbl th,
.tbl td {
  border: 1px solid #c6c6c6;
  padding: 8px;
  text-align: center;
  font-size: 14px;
}
.tbl th {
  background: #ebf5fd;
  font-weight: 500;
}

.form-tbl {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #c6c6c6;
}
.form-tbl table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}
.form-tbl th,
.form-tbl td {
  border-bottom: 1px solid #c6c6c6;
  padding: 20px 10px;
  text-align: center;
  font-size: 14px;
}
.form-tbl th {
  background: #ebf5fd;
  font-weight: 500;
  font-size: 17px;
}
.form-tbl td {
  font-size: 15px;
}
.form-tbl thead tr th:first-child {
  border-top-left-radius: 12px;
}
.form-tbl thead tr th:last-child {
  border-top-right-radius: 12px;
}
.form-tbl tbody tr:last-child td {
  border-bottom: none;
}
.form-tbl tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
.form-tbl tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.form-tbl .checkbox {
  margin: 0;
  justify-content: center;
}

.tbl-th {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.Map {
  position: relative;
  height: 100%;
  width: 100%;
}
.Map.nav-open .map--side {
  left: 0;
}
.Map--mode {
  border: 1px solid #b9b9b9;
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 4px;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}
.Map--mode__top {
  position: absolute;
  top: 16px;
  right: 16px;
}
.Map--mode__bottom {
  position: absolute;
  bottom: 16px;
  right: 16px;
}
.Map--mode.zoom .btn--mode + .btn--mode {
  position: relative;
}
.Map--mode.zoom .btn--mode + .btn--mode:after {
  position: absolute;
  top: -2px;
  left: -4px;
  right: -4px;
  display: block;
  content: "";
  width: calc(100% + 8px);
  height: 1px;
  border-top: 1px solid #D8D8D8;
}
.Map--mode + .Map--mode {
  margin-top: 12px;
}

.btn--mode {
  display: block;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  font-weight: 300;
  font-size: 15px;
  cursor: pointer;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: none;
}
.btn--mode.active {
  background: #0a529d;
  color: #fff;
}
.btn--mode.location {
  background-image: url("../images/tool-loction.png");
  background-position: center;
  background-repeat: no-repeat;
}
.btn--mode.zoomin {
  background-image: url("../images/tool-zoomin.png");
  background-position: center;
  background-repeat: no-repeat;
}
.btn--mode.zoomout {
  background-image: url("../images/tool-zoomout.png");
  background-position: center;
  background-repeat: no-repeat;
}

.map--side {
  position: absolute;
  z-index: 100;
  left: -314px;
  width: 270px;
  transition: all 0.3s;
}

.dimmed {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dimmed.show {
  opacity: 1;
}

.panel--wrap {
  width: 350px;
  height: 100%;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.panel--header {
  position: relative;
  height: 75px;
  display: flex;
  align-items: center;
  padding: 30px 20px;
}
.panel--header .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.panel--mid {
  text-align: center;
  padding: 0 20px 20px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.panel--mid .panel--title {
  font-size: 21px;
  margin: 20px 0;
  font-weight: 500;
  color: #0758ac;
}
.panel--mid + hr {
  border: none;
  display: block;
  width: 100%;
  height: 3px;
  background: #f8f8f8;
}

.panel--search {
  display: flex;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  height: 48px;
}
.panel--search.small {
  height: 40px;
  font-size: 13px;
}
.panel--search.small .search--input {
  padding: 6px 12px;
}
.panel--search.small .search--button {
  padding: 8px;
}
.panel--search .search--input {
  padding: 8px;
  border: none;
  background: #f9f9f9;
  border-radius: 4px 0 0 4px;
  flex: 1;
  border-radius: 5px 0 0 5px;
}
.panel--search .search--button {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  background: #f9f9f9;
  border-radius: 0 5px 5px 0;
}

.panel--list {
  height: calc(100% - 175px - 75px - 3px);
  border-top: 1px solid #f0f0f0;
  padding: 20px;
}
.panel--list .panel--item {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.panel--list .panel--item:last-child {
  margin-bottom: 0;
}
.panel--list .panel--item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #d8d8d8;
}
.panel--list .panel--item__header .panel--item__number {
  display: flex;
  align-items: center;
  word-break: break-all;
  gap: 9px;
  font-size: 32px;
  font-weight: bold;
}
.panel--list .panel--item__header .panel--item__number::before {
  display: block;
  content: "";
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #deecf8;
  background-image: url("../images/blue-bus.png");
  background-position: center;
  background-repeat: no-repeat;
}
.panel--list .panel--item__header .panel--item__plate {
  font-size: 17px;
}
.panel--list .panel--item--body {
  font-size: 13px;
  color: #333;
  margin-bottom: 10px;
}
.panel--list .panel--item--body .info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel--list .panel--item--body .info.row {
  flex-direction: row;
}
.panel--list .panel--item--body .info.row dl {
  gap: 10px;
}
.panel--list .panel--item--body .info.row dl dt {
  width: auto;
}
.panel--list .panel--item--body .info.target dl {
  cursor: pointer;
}
.panel--list .panel--item--body dl {
  display: flex;
  font-size: 15px;
}
.panel--list .panel--item--body dl dt {
  position: relative;
  min-width: 80px;
  padding-left: 10px;
}
.panel--list .panel--item--body dl dt:after {
  position: absolute;
  left: 0;
  top: 6px;
  display: block;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
}
.panel--list .panel--item--body dl dd {
  color: #717171;
}
.panel--list .panel--item--footer .option-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px 0 30px 0;
}
.panel--list .panel--item--footer .option-list .option-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
.panel--list .panel--item--footer .option-list .option-item .option-icon {
  margin-right: 4px;
  width: 14px;
  height: 14px;
  background-image: url("../images/ico-check.png");
}
.panel--list .panel--item--footer .option-list .option-item.active .option-icon {
  background-image: url("../images/ico-check-on.png");
}
.panel--list .panel--item--footer .option-list .option-item.active .option-label {
  color: #047bb6;
}
.panel--list .panel--item--footer .option-list .option-item + .option-item {
  position: relative;
}
.panel--list .panel--item--footer .option-list .option-item + .option-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #ccc;
}
.panel--list .panel--item--footer .round-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.panel--list .panel--item--footer .status--tag {
  display: inline-block;
  padding: 10px 10px;
  border-radius: 15px;
  font-size: 15px;
  text-align: center;
  border: 1px solid;
  border-color: #d8d8d8;
  line-height: 1;
}
.panel--list .panel--item--footer .status--tag.green {
  color: #2ba45b;
  border-color: #2ba45b;
  background: #eafff0;
}
.panel--list .panel--item--footer .status--tag.red {
  color: #e64f58;
  border-color: #e64f58;
  background: #fff1f1;
}

.panel--expand {
  position: absolute;
  left: 0px;
  height: 100%;
  top: 0px;
  background: #f6f7fb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 450px;
  overflow: hidden;
}
.panel--expand__head {
  background: #047bb6;
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
  font-weight: 300;
}
.panel--expand__head span {
  color: #fff;
}
.panel--expand__head .back {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 9px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/panel-expand-back.png");
}
.panel--expand__head .close {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-image: url("../images/modal-close.png");
}
.panel--expand__content {
  position: relative;
  background: #f6f7fb;
  height: 100%;
}
.panel--expand__content .bus-type-inner {
  padding: 30px 50px;
}
.panel--expand__content .bus-type {
  position: relative;
  display: inline-flex;
  width: 100%;
  align-items: center;
  gap: 50px;
  padding: 8px 8px;
  border: 2px solid #0758ac;
  border-radius: 30px;
  background: #fff;
  font-size: 14px;
}
.panel--expand__content .bus-type::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid #e0e0e0;
  border-radius: 36px;
}
.panel--expand__content .bus-type .bus-type-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 38px;
  border-radius: 50%;
  background: #0758ac;
  padding: 5px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
.panel--expand__content .bus-type .bus-type-label {
  font-size: 22px;
  color: #0758ac;
  white-space: nowrap;
  font-weight: 500;
}
.panel--expand__content .bus-info-inner {
  padding: 0 20px 30px 20px;
}
.panel--expand__content .bus-info {
  height: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f9f9f9;
  border: 1px solid #d8d8d8;
  padding: 20px;
  border-radius: 10px;
}
.panel--expand__content .bus-info dl {
  display: flex;
  font-size: 15px;
}
.panel--expand__content .bus-info dl dt {
  position: relative;
  width: 80px;
  padding-left: 10px;
}
.panel--expand__content .bus-info dl dt:after {
  position: absolute;
  left: 0;
  top: 6px;
  display: block;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
}
.panel--expand__content .bus-info dl dd {
  color: #717171;
}
.panel--expand__content .bus-search-inner {
  padding: 0 20px 30px 20px;
}
.panel--expand__content .bus-search-inner .btn-group {
  margin-bottom: 10px;
}
.panel--expand__content .bus-search-inner .cal-picker {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 10px;
}
.panel--expand__content .section--meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #f7f7f7;
}
.panel--expand__content .section--meta__title {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
}
.panel--expand__content .section--meta__info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 15px;
}
.panel--expand__content .section--meta__status {
  font-weight: 600;
  color: #555555;
}
.panel--expand__content .section--meta__timestamp {
  font-size: 13px;
  color: #999999;
}
.panel--expand__content .section--meta__refresh {
  background: none;
  border: none;
  width: 12px;
  height: 12px;
  background-image: url("../images/ico-refresh2.png");
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  transition: transform 0.2s ease;
}
.panel--expand__content .section--meta__refresh:hover {
  color: #000;
  transform: rotate(90deg);
}
.panel--expand__content .section--meta__refresh:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
.panel--expand__content .route-event-inner {
  padding: 20px;
  height: calc(100% - 54px - 118px - 338px);
}
.panel--expand__content .route-timeline-inner {
  padding: 20px;
  height: calc(100% - 54px - 118px - 338px);
}
.panel--expand__content .route-timeline {
  position: relative;
  padding-left: 90px;
  /* 정류장 목록 */
  /* 버스 아이콘 (유동적) */
}
.panel--expand__content .route-timeline .stops {
  list-style: none;
  margin: 0;
  padding: 0;
}
.panel--expand__content .route-timeline .stops .stop {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid #d8d8d8;
}
.panel--expand__content .route-timeline .stops .stop:first-child {
  border-top: none;
}
.panel--expand__content .route-timeline .stops .stop::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -1px;
  bottom: 0;
  width: 2px;
  background: #cbd5e1;
}
.panel--expand__content .route-timeline .stops .stop:first-child::before {
  top: 50%;
}
.panel--expand__content .route-timeline .stops .stop:last-child::before {
  bottom: 50%;
}
.panel--expand__content .route-timeline .stops .stop .stop-marker {
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #848484;
  background-image: url("../images/marker-arrow.png");
  background-repeat: no-repeat;
  background-position: center;
}
.panel--expand__content .route-timeline .stops .stop .stop-info .stop-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
  word-break: break-all;
}
.panel--expand__content .route-timeline .stops .stop .stop-info .stop-code {
  font-size: 15px;
  color: #555555;
  margin-top: 2px;
}
.panel--expand__content .route-timeline .stops .stop .stop-info .stop-status {
  font-size: 15px;
  color: #999999;
  margin-top: 2px;
}
.panel--expand__content .route-timeline .buses {
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 0;
}
.panel--expand__content .route-timeline .buses .bus {
  position: absolute;
  display: block;
  width: 15px;
  height: 16px;
  z-index: 10;
  left: 80px;
  transform: translateX(-50%);
  cursor: default;
  /* 툴팁 */
}
.panel--expand__content .route-timeline .buses .bus::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 24px;
  /* 기본은 오른쪽 */
  top: 50%;
  transform: translateY(-50%);
  background: #ebf5fd;
  border: 1px solid #a6c3e1;
  border-radius: 6px;
  padding: 2px 2px;
  font-size: 10px;
  color: #111827;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.panel--expand__content .route-timeline .buses .bus.tooltip-left::after {
  left: auto;
  right: 24px;
  /* 왼쪽으로 표시 */
}

.bus-typenumber-inner {
  padding: 20px 30px;
}

.bus-typenumber {
  display: inline-flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 12px;
}
.bus-typenumber .bus-type-badge {
  padding: 5px 25px;
  border-radius: 5px;
  background: #047bb6;
  color: #fff;
}
.bus-typenumber .bus-type-label {
  font-size: 30px;
  font-weight: bold;
}

.hr {
  border: none;
  display: block;
  width: 100%;
  height: 3px;
  background: #f8f8f8;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.Mac-container {
  overflow: hidden;
  padding: 0px !important;
}

.step-dropzone {
  border: 1px dashed rgba(25, 109, 255, 0.2);
  border-radius: 10px;
  background: #f7fafd;
  padding: 20px 15px;
  text-align: center;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.step-dropzone:focus, .step-dropzone:hover {
  border-color: #196DFF;
  box-shadow: 0 2px 12px rgba(38, 118, 230, 0.08);
}
.step-dropzone__desc {
  color: #949494;
  font-size: 15px;
  margin-bottom: 20px;
  line-height: 1.7;
  font-weight: 400;
}
.step-dropzone__btn {
  display: inline-block;
  background: #fff;
  color: #196DFF;
  border: 1px solid #196DFF;
  background: rgba(25, 109, 255, 0.1);
  font-size: 15px;
  line-height: 1.5;
  border-radius: 4px;
  padding: 8.5px 12px;
  width: 100%;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border 0.14s;
}
.step-dropzone__btn:focus, .step-dropzone__btn:hover {
  background: #2676e6;
  color: #fff;
  border-color: #2676e6;
  outline: none;
}
.step-dropzone__btn input[type=file] {
  display: none;
}

.operation--inner {
  padding: 20px;
}
.operation--search {
  padding-top: 20px;
  display: flex;
  gap: 20px;
}
.operation--search .search--optionline {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.operation--search .search--optionline dt {
  width: 70px;
}
.operation--search .search--optionline dd {
  flex: 1;
}
.operation--search__col {
  flex: 1;
  width: 50%;
}

.search--line {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.search--line .panel--search {
  flex: 0 0 200px;
}
.search--line.flex-end {
  justify-content: flex-end;
}

.operation--player {
  background: #fff;
  border-radius: 6px;
  border: 1.5px solid #d5dee7;
  padding: 8px 12px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #000;
  margin-bottom: 10px;
}
.operation--player__top {
  display: flex;
  align-items: center;
}
.operation--player .play-btn,
.operation--player .pause-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.operation--player .play-btn.play-btn,
.operation--player .pause-btn.play-btn {
  background: #deecf8;
  color: #007bff;
}
.operation--player .play-btn.pause-btn,
.operation--player .pause-btn.pause-btn {
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
}
.operation--player .play-btn:hover,
.operation--player .pause-btn:hover {
  transform: scale(1.05);
}
.operation--player .progress-bar {
  position: relative;
  flex: 1;
  height: 5px;
  background: #e0e0e0;
  border-radius: 3px;
}
.operation--player .progress-bar .progress {
  width: 40%;
  height: 100%;
  background: #2f80ed;
  border-radius: 3px 0 0 3px;
}
.operation--player .progress-bar .handle {
  position: absolute;
  top: -4px;
  left: 40%;
  width: 12px;
  height: 12px;
  background: #2f80ed;
  border-radius: 50%;
  transform: translateX(-50%);
}
.operation--player .time-display {
  min-width: 160px;
  text-align: right;
  color: #111;
}

.route--manage {
  padding: 20px;
  height: calc(100% - 54px);
}
.route--manage ul {
  list-style: none;
}
.route--manage__row {
  display: flex;
  gap: 20px;
  height: 100%;
}
.route--manage__row.column {
  flex-direction: column;
}
.route--manage__row01 {
  flex: 0 0 200px;
  height: 100%;
}
.route--manage__row02 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.route--manage__row02 .route--manage__box {
  max-height: 50%;
}
.route--manage__row03 {
  display: flex;
  gap: 20px;
  height: calc(100% - 80px);
}
.route--manage__row04 {
  flex: 0 0 600px;
}
.route--manage__row05 {
  height: 100%;
  flex: 1;
  display: flex;
  gap: 20px;
  min-width: 0;
}
.route--manage__row05 .route--manage__box02 {
  flex: 0 0 300px;
  min-width: 0;
}
.route--manage__row06 {
  height: calc(100% - 20px);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.route--manage__row06 .route--manage__box {
  min-width: 350px;
  height: 50%;
}
.route--manage__box {
  flex: 1;
  background: #f9f9f9;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  padding: 16px;
  min-width: 0;
  height: 100%;
}
.route--manage__ti {
  padding-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
  margin-bottom: 20px;
}
.route--manage__cont {
  height: 100%;
}
.route--manage__listinner {
  height: 100%;
}

.listhead {
  display: table;
  width: 100%;
}
.listhead span {
  display: table-cell;
  width: 25%;
  text-align: center;
  padding: 10px 5px;
  background: #ebf5fd;
}
.listhead span:first-child {
  border-radius: 10px 0 0 0;
}
.listhead span:last-child {
  border-radius: 0 10px 0 0;
}

.listbody.route-manage-bar {
  height: calc(100% - 140px);
}
.listbody ul li {
  width: 100%;
  background: #fff;
  align-items: center;
}
.listbody ul li + li {
  border-top: 1px solid #d8d8d8;
}
.listbody ul li > span, .listbody ul li > div {
  text-align: center;
  padding: 10px 5px;
  font-size: 15px;
  box-sizing: border-box;
}
.listbody ul li > span .btn, .listbody ul li > div .btn {
  height: 30px;
  font-size: 13px;
  width: 60px;
}
.listbody ul.board li {
  cursor: pointer;
  transition: all 0.3s;
}
.listbody ul.board li:hover, .listbody ul.board li.is-active {
  background: #ededed;
}

.sel-list li {
  padding: 10px 5px;
  border-radius: 6px;
  margin-bottom: 3px;
  transition: all 0.3s;
  border: 1px solid transparent;
  cursor: pointer;
}
.sel-list li:hover, .sel-list li.is-active {
  border: 1px solid #0a529d;
  background: #eff6ff;
}
.sel-list li:hover span, .sel-list li.is-active span {
  color: #0a529d;
}
.sel-list li:hover .ico-schedule, .sel-list li.is-active .ico-schedule {
  background-image: url("../images/ico-schedule-blue.svg");
}
.sel-list.li-flex li {
  display: flex;
  justify-content: space-between;
}
.sel-list.time-sel-list li {
  gap: 20px;
}
.sel-list.time-sel-list li .left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ico-schedule {
  display: inline-block;
  background-image: url("../images/ico-schedule.svg");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
}

.panel--wrap--qr {
  display: flex;
  flex-direction: column;
}
.panel--wrap--qr .panel--mid {
  border-bottom: none;
  padding: 20px;
}
.panel--wrap--qr .panel--qr__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px 12px;
}
.panel--wrap--qr .panel--qr__summary .panel--qr__total {
  font-size: 15px;
  color: #1d1d1d;
}
.panel--wrap--qr .panel--qr__summary .panel--qr__total strong {
  color: #047bb6;
  font-weight: 600;
}
.panel--wrap--qr .panel--qr__summary .panel--qr__filters {
  display: flex;
  gap: 8px;
}
.panel--wrap--qr .panel--qr__summary .form-control--sm {
  padding: 6px 28px 6px 10px;
  font-size: 14px;
  min-width: 100px;
}
.panel--wrap--qr .panel--qr__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
}
.panel--wrap--qr .panel--qr__actions .checkbox__label {
  font-size: 15px;
}
.panel--wrap--qr > hr {
  border: none;
  height: 1px;
  background: #f0f0f0;
  margin: 0;
}
.panel--wrap--qr .panel--list--qr {
  flex: 1;
  height: auto;
  min-height: 200px;
  padding: 16px 20px;
}
.panel--wrap--qr .panel--qr__paging {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
}
.panel--wrap--qr .panel--qr__paging .pagination {
  justify-content: center;
}

.panel--list--qr .panel--item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.3s;
}
.panel--list--qr .panel--item .panel--item__chk {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}
.panel--list--qr .panel--item .panel--item__chk .checkbox__input {
  margin: 0;
}
.panel--list--qr .panel--item .panel--item__header {
  flex: 1;
  min-width: 0;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #d8d8d8;
  justify-content: flex-start;
}
.panel--list--qr .panel--item .panel--item__header .panel--item__number {
  font-size: 18px;
}
.panel--list--qr .panel--item .panel--item__header .panel--item__number::before {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background-color: #e8e8e8;
  background-image: url("../images/blue-bus.png");
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s;
}
.panel--list--qr .panel--item .panel--item__header .badge--round {
  min-width: 37px;
}
.panel--list--qr .panel--item .panel--item--body {
  width: 100%;
  margin-bottom: 0;
}
.panel--list--qr .panel--item .panel--item--body .info dl {
  font-size: 13px;
}
.panel--list--qr .panel--item.is-active, .panel--list--qr .panel--item:hover {
  border-color: #047bb6;
  background: #e8f2fa;
  box-shadow: 0 2px 8px rgba(4, 123, 182, 0.15);
}
.panel--list--qr .panel--item.is-active .panel--item__header .panel--item__number::before, .panel--list--qr .panel--item:hover .panel--item__header .panel--item__number::before {
  background-color: #0a529d;
  background-image: url("../images/white-bus.png");
}

.panel--qr-preview {
  position: absolute;
  left: 370px;
  top: 20px;
  width: 350px;
  background: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}

.panel--qr-preview__header {
  display: flex;
  align-items: center;
  position: relative;
  padding: 20px 20px 16px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #133d6e, #21272f);
  border-radius: 12px 12px 0 0;
}

.panel--qr-preview__title {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  color: #fff;
}

.panel--qr-preview__close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent url("../images/modal-close.png") no-repeat center;
  cursor: pointer;
  padding: 0;
}

.panel--qr-preview__content {
  position: relative;
  padding: 20px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f6f7fb;
  border-radius: 0 0 12px 12px;
}
.panel--qr-preview__content::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 16px;
  height: 16px;
  z-index: 1;
  background-image: url("../images/qr-head-after.jpg");
  background-repeat: no-repeat;
}

.panel--qr-preview__selected {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 20px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
}

.panel--qr-preview__stop-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #deecf8;
  background-image: url("../images/blue-bus.png");
  background-position: center;
  background-repeat: no-repeat;
}

.panel--qr-preview__stop-name {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1d;
}

.panel--qr-preview__types {
  margin-bottom: 2px;
}

.panel--qr-preview__tem {
  width: 100%;
  aspect-ratio: 1;
  height: 440px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  margin-bottom: 20px;
  flex-shrink: 0;
  padding: 20px 35px;
  position: relative;
  overflow: hidden;
}
.panel--qr-preview__tem.skin-type01 {
  background-image: url("../images/skin-type01bg.png");
  background-size: cover;
}
.panel--qr-preview__tem .panel--qr-preview__tem-brand {
  position: absolute;
  left: 18px;
  top: 16px;
}
.panel--qr-preview__tem .panel--qr-preview__tem-brand img {
  display: block;
  height: 18px;
  width: auto;
}
.panel--qr-preview__tem .panel--qr-preview__tem-flex {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.panel--qr-preview__tem .panel--qr-preview__tem-name {
  padding-bottom: 10px;
  font-size: 24px;
  font-family: "esamanru";
  text-align: center;
  font-weight: bold;
}
.panel--qr-preview__tem .panel--qr-preview__tem-code {
  margin-bottom: 25px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(207, 231, 247, 0.95);
  color: #0d141c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
  font-family: "esamanru";
}
.panel--qr-preview__tem .panel--qr-preview__tem-qr {
  width: 145px;
  height: 145px;
  padding: 25px;
  border-radius: 22px;
  background: #ffffff;
  border: 2px solid rgba(24, 59, 114, 0.85);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel--qr-preview__tem .panel--qr-preview__tem-qr-inner {
  width: 100%;
  height: 100%;
  background: #eaeaea;
  border: 1px solid #d8d8d8;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.panel--qr-preview__tem .panel--qr-preview__tem-footer {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  letter-spacing: -0.2px;
}

.panel--qr-preview__stand {
  width: 100%;
  aspect-ratio: 1;
  height: 280px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  margin-bottom: 20px;
  flex-shrink: 0;
  padding: 20px 35px;
}
.panel--qr-preview__stand .qr-standalone {
  border-radius: 10px;
  background: #eaeaea;
  border: 1px solid #d8d8d8;
  height: 100%;
}

.panel--qr-preview__actions {
  text-align: right;
  flex-shrink: 0;
}

.btn--dropdown {
  display: inline-flex;
  align-items: center;
  padding: 0 30px 0 15px;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  position: relative;
}
.btn--dropdown::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 5px;
  background-image: url("../images/white-arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.btn--dropdown:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.download-dropdown {
  position: relative;
  display: inline-block;
}
.download-dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #d8d8d8;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.download-dropdown__item {
  padding: 0;
}
.download-dropdown__button {
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 14px;
  color: #111827;
  cursor: pointer;
  white-space: nowrap;
}
.download-dropdown__button:hover {
  background-color: #f3f4f6;
}
.download-dropdown.is-open .download-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.panel--wrap--route .panel--mid {
  border-bottom: none;
  padding: 20px;
}
.panel--wrap--route .panel--route__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px 12px;
}
.panel--wrap--route .panel--route__summary .panel--qr__total {
  font-size: 15px;
  color: #1d1d1d;
}
.panel--wrap--route .panel--route__summary .panel--qr__total strong {
  color: #047bb6;
  font-weight: 600;
}
.panel--wrap--route .panel--route__summary .panel--qr__filters {
  display: flex;
  gap: 8px;
}
.panel--wrap--route .panel--route__summary .form-control--sm {
  padding: 6px 28px 6px 10px;
  font-size: 14px;
  min-width: 100px;
}
.panel--wrap--route > hr {
  border: none;
  display: block;
  width: 100%;
  height: 5px;
  background: #f8f8f8;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
}

.route-list-wrap {
  height: 100%;
}

.route-list-search {
  padding: 12px 16px 0;
}

.route-list-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  flex-wrap: nowrap;
}
.route-list-filter .total {
  font-size: 13px;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
}
.route-list-filter .form-control {
  width: auto;
  font-size: 12px;
  padding: 4px 22px 4px 8px;
  height: 30px;
  flex-shrink: 0;
}

.route-list-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 20px 16px 10px 16px;
  width: calc(100% - 32px);
  height: 38px;
  background: #0758ac;
  color: #fff;
  font-size: 15px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
}
.route-list-add-btn span {
  color: #fff;
}

.route-card-list {
  padding: 0 12px;
  height: calc(100vh - 319px);
  position: relative;
}
.route-card-list .simplebar-mask,
.route-card-list .simplebar-offset,
.route-card-list .simplebar-content {
  overflow: visible !important;
}
.route-card-list .simplebar-content-wrapper {
  overflow-x: visible !important;
  overflow-y: auto !important;
}

.route-card {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}
.route-card:hover {
  border-color: #aaa;
}
.route-card.is-active {
  border-color: #047bb6;
  background: #edf5ff;
  box-shadow: 0 2px 8px rgba(4, 123, 182, 0.15);
}
.route-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dddddd;
}
.route-card__left, .route-card__route {
  display: flex;
  align-items: center;
  gap: 8px;
}
.route-card__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.route-card__menu {
  position: relative;
  line-height: 0;
}
.route-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #e2eef9;
  background-image: url("../images/blue-bus.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  flex-shrink: 0;
}
.route-card.is-active .route-card__icon {
  background-color: #deecf8;
  background-image: url("../images/blue-bus.png");
}
.route-card__num {
  font-size: 21px;
  font-weight: 700;
  color: #1d1d1d;
  line-height: 1;
}
.route-card.is-active .route-card__num {
  color: #0a529d;
}
.route-card__more-btn {
  width: 9px;
  height: 23px;
  border: 1px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 4px;
  flex-shrink: 0;
  background: #fff;
}
.route-card__more-btn::before, .route-card__more-btn::after {
  display: block;
  content: "";
  width: 3px;
  height: 3px;
  background: #8e8e8e;
  border-radius: 50%;
}
.route-card__more-btn span {
  display: block;
  width: 3px;
  height: 3px;
  background: #8a96a3;
  border-radius: 50%;
}
.route-card__more-btn:hover {
  background: #ededed;
}
.route-card__path {
  position: relative;
  padding-left: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #717171;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.route-card__path::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  color: #7c8a98;
  font-weight: 700;
}
.route-card__dropdown {
  position: absolute;
  right: 15px;
  top: -4px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  z-index: 20;
  overflow: hidden;
  display: none;
  border: 1px solid #8e8e8e;
  padding: 3px;
}
.route-card__dropdown.show {
  display: block;
}
.route-card__dropdown button {
  display: block;
  width: 100%;
  padding: 7px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #3f3f3f;
  cursor: pointer;
}
.route-card__dropdown button:hover {
  background: #f5f5f5;
}
.route-card__dropdown button + button {
  border-top: 1px solid #f0f0f0;
}
.route-card .badge--round {
  min-width: 45px;
  height: 25px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.route-list-paging {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.regi-panel {
  width: 700px !important;
}
.regi-panel .panel--expand__content {
  height: calc(100% - 54px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.regi-step-bar {
  padding: 25px 50px 18px;
  flex-shrink: 0;
}

.regi-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.regi-step__item {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  min-width: 0;
}
.regi-step__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -25px;
  width: 9px;
  height: 14px;
  background-image: url("../images/route-step-arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 0;
}
.regi-step__item:nth-child(1) .regi-step__icon {
  background-image: url("../images/route-step01.png");
}
.regi-step__item:nth-child(2) .regi-step__icon {
  background-image: url("../images/route-step02.png");
}
.regi-step__item:nth-child(3) .regi-step__icon {
  background-image: url("../images/route-step03.png");
}
.regi-step__item:nth-child(4) .regi-step__icon {
  background-image: url("../images/route-step04.png");
}
.regi-step__item[data-status=done] .regi-step__icon {
  background-image: url("../images/route-step-checked.png");
}
.regi-step__item[data-status=done] .regi-step__num,
.regi-step__item[data-status=done] .regi-step__label {
  color: #9facc2;
}
.regi-step__item[data-status=active]::after {
  background-image: url("../images/route-step-arrow-active.png");
}
.regi-step__item[data-status=active] .regi-step__icon {
  width: 50px;
  height: 50px;
  background-color: #0a529d;
  border: 3px solid #7bbafd;
}
.regi-step__item[data-status=active] .regi-step__num,
.regi-step__item[data-status=active] .regi-step__label {
  color: #0b427c;
  font-weight: 700;
}

.regi-step__icon {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background-color: #98afc8;
  border-radius: 50%;
}

.regi-step__label-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  white-space: nowrap;
}

.regi-step__num {
  font-size: 13px;
  font-weight: 700;
  color: #b7c6d8;
  line-height: 1;
}

.regi-step__label {
  font-size: 15px;
  color: #b7c6d8;
  line-height: 1.25;
  word-break: keep-all;
  letter-spacing: -0.02em;
}

.regi-guide {
  background: #dee6f1;
  padding: 9px 16px;
  margin: 0 20px 0px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #047bb6;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
}
.regi-guide span {
  color: #047bb6;
}

.regi-body {
  flex: 1;
  padding: 16px;
  height: calc(100vh - 345px);
  background: #f6f7fb;
}

.regi-step-content {
  display: none;
}
.regi-step-content.is-show {
  display: block;
}

.regi-form-title {
  font-size: 19px;
  font-weight: 600;
  color: #1d1d1d;
  margin-right: 30px;
}

.regi-form-required {
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
  text-align: right;
}

.regi-form-row {
  margin-bottom: 12px;
}
.regi-form-row label {
  display: block;
  font-size: 15px;
  color: #555;
  margin-bottom: 4px;
}
.regi-form-row label.required::after {
  content: " *";
  color: #e54e57;
}
.regi-form-row .form-control {
  width: 100%;
  height: 42px;
  font-size: 14px;
}

.regi-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d8d8d8;
}
.regi-form-head .regi-form-title,
.regi-form-head .regi-form-required {
  margin: 0;
}

.regi-route-section--basic {
  background: #f7f7f7;
  border-radius: 12px;
  padding: 20px;
}
.regi-route-section--basic .regi-form-title {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1d;
}
.regi-route-section--basic .regi-form-required {
  font-size: 13px;
  font-weight: 600;
  color: #2d9cdb;
  text-align: right;
}
.regi-route-section--basic .regi-form-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.regi-route-section--basic .regi-form-row:last-child {
  margin-bottom: 0;
}
.regi-route-section--basic .regi-form-row label {
  flex: 0 0 120px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
}
.regi-route-section--basic .regi-form-row label.required::after {
  color: #2d9cdb;
}
.regi-route-section--basic .regi-form-row .form-control {
  flex: 1;
  height: 48px;
  border-radius: 8px;
  border-color: #cfcfcf;
  font-size: 16px;
  color: #3a3a3a;
  background-color: #fff;
}

.regi-foot {
  background: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.regi-foot .btn-group {
  margin: 0;
}
.regi-foot .btn {
  min-width: 78px;
  height: 40px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
}
.regi-foot .btn.danger {
  background: #585b61;
  border-color: #585b61;
  color: #fff;
}
.regi-foot .btn.primary {
  min-width: 102px;
  background: #047bb6;
  border-color: #047bb6;
}

.regi-ref-route {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #0a529d;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
.regi-ref-route__title {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 10px;
}
.regi-ref-route__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.regi-ref-route__row .panel--search {
  flex: 1;
  height: 38px;
}
.regi-ref-route__row .btn {
  height: 38px;
  min-width: 70px;
  font-size: 13px;
  flex-shrink: 0;
}
.regi-ref-route__selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  background: #f9f9f9;
  font-size: 14px;
  color: #1d1d1d;
}
.regi-ref-route__selected .icon-ref {
  width: 20px;
  height: 20px;
  background: #047bb6;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.regi-ref-route__selected .btn-change {
  margin-left: auto;
  background: transparent;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  color: #555;
}

.regi-station-section {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 20px;
}

.regi-station-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.regi-station-top .regi-form-title {
  margin-bottom: 0;
}

.regi-station-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.regi-station-head__count {
  font-size: 15px;
  color: #1d1d1d;
}
.regi-station-head__count strong {
  color: #047bb6;
  font-weight: 700;
  font-size: 17px;
}
.regi-station-head .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 5px 10px;
  border: 1px solid #555555;
  border-radius: 4px;
  background: #fff;
  color: #555555;
  font-size: 15px;
  line-height: 1;
}
.regi-station-head .btn-text:hover {
  background: #f5f5f5;
  text-decoration: none;
}
.regi-station-head__reset-icon {
  line-height: 1;
  width: 16px;
  height: 16px;
  background-image: url("../images/ico-refresh3.png");
}
.regi-station-head__reset {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  color: #555;
}
.regi-station-head__reset:hover {
  background: #f5f5f5;
}

.regi-station-tblhead {
  display: flex;
  align-items: center;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #e4e4e4;
}
.regi-station-tblhead span {
  padding: 9px 10px;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}
.regi-station-tblhead span:first-child {
  position: relative;
  flex: 0 0 72px;
  text-align: center;
}
.regi-station-tblhead span:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #d8d8d8;
}
.regi-station-tblhead span:nth-child(2) {
  flex: 1;
  text-align: center;
}

.regi-station-list {
  margin-top: 12px;
  margin-bottom: 18px;
}

.station-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 8px;
  background: #fff;
  transition: background 0.15s;
}
.station-item:last-child {
  margin-bottom: 0;
}
.station-item.is-dragging {
  opacity: 0.5;
  background: #f0f6ff;
}
.station-item.drag-over {
  background: #eef7fc;
  border-top: 2px solid #047bb6;
}
.station-item__num-wrap {
  position: relative;
  width: 28px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.station-item__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #02b0f2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.station-item__insert {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #0f95d8;
  background: #f5fbff;
  color: #0f95d8;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s, background 0.15s;
  z-index: 3;
}
.station-item__insert:hover {
  background: #e8f4fc;
}
.station-item__num-wrap:hover .station-item__num {
  opacity: 0;
}
.station-item__num-wrap:hover .station-item__insert {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.station-item__num--add {
  background: #e0e0e0;
  color: #888;
  font-size: 16px;
}
.station-item__handle, .station-item__drag {
  width: 20px;
  color: #8e8e8e;
  font-size: 15px;
  cursor: grab;
  flex-shrink: 0;
  text-align: center;
  user-select: none;
  letter-spacing: -1px;
  line-height: 1;
}
.station-item__handle:active, .station-item__drag:active {
  cursor: grabbing;
}
.station-item__name, .station-item__input {
  flex: 1;
  height: 40px;
  font-size: 14px;
  padding: 0 40px 0 5px;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  color: #1d1d1d;
  background: #fff;
  line-height: 38px;
  transition: border-color 0.15s;
  text-align: left;
}
.station-item__name:focus, .station-item__input:focus {
  outline: none;
  border-color: #047bb6;
}
.station-item__name::placeholder, .station-item__input::placeholder {
  color: #a7a7a7;
}
.station-item__name {
  display: flex;
  align-items: center;
  width: 100%;
  cursor: default;
}
.station-item__name-text {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.station-item.is-empty .station-item__name {
  color: #a7a7a7;
}
.station-item__del {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-left: -32px;
}
.station-item__del:hover {
  background: transparent;
  color: #4a4a4a;
}
.station-item__del::before {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("../images/close-12@12.png");
}

.station-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #047bb6;
  background: #f5fbff;
  color: #047bb6;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 auto;
}
.station-add-btn:hover {
  background: #e8f4fc;
}
.station-add-btn .icon-plus {
  width: auto;
  height: auto;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  font-weight: bold;
  color: #047bb6;
}

.regi-route-section {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 20px;
}
.regi-route-section + .regi-route-section {
  margin-top: 12px;
}

.regi-route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.regi-route-head__title {
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1d;
}
.regi-route-head__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 5px 10px;
  border: 1px solid #555555;
  border-radius: 4px;
  background: #fff;
  color: #555555;
  font-size: 15px;
  line-height: 1;
}
.regi-route-head__reset:hover {
  background: #f5f5f5;
}
.regi-route-head__reset-icon {
  line-height: 1;
  width: 16px;
  height: 16px;
  background-image: url("../images/ico-refresh3.png");
}

.route-acc-item {
  margin-bottom: 9px;
  overflow: hidden;
  background: #fff;
}
.route-acc-item:last-child {
  margin-bottom: 0;
}
.route-acc-item.is-open .route-acc-head__arrow,
.route-acc-item.is-open .route-acc-head__toggle {
  transform: rotate(180deg);
}
.route-acc-item.is-open .route-acc-head__arrow::after,
.route-acc-item.is-open .route-acc-head__toggle::after {
  border-color: #047bb6;
}
.route-acc-item.is-open .route-acc-head__icon::after {
  background-image: url("../images/drawing-on.png");
}
.route-acc-item.is-open .route-acc-head__sep {
  background: #cde6f5;
}
.route-acc-item.is-open .route-acc-head {
  border: 1px solid #02b0f2;
}

.route-acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  border: 1px solid #c6c6c6;
  border-radius: 5px;
}
.route-acc-head__icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-acc-head__icon::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("../images/drawing-off.png");
}
.route-acc-head__label, .route-acc-head__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.route-acc-head__meta, .route-acc-head__count {
  font-size: 15px;
  color: #717171;
  flex-shrink: 0;
  white-space: nowrap;
}
.route-acc-head__meta strong, .route-acc-head__count strong {
  font-size: 17px;
  font-weight: 500;
  color: #047bb6;
}
.route-acc-head__sep {
  width: 1px;
  height: 14px;
  background: #d8d8d8;
  flex-shrink: 0;
  border-radius: 1px;
}
.route-acc-head__arrow, .route-acc-head__toggle {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.route-acc-head__arrow::after, .route-acc-head__toggle::after {
  content: "";
  display: block;
  width: 10px;
  height: 5px;
  background-image: url("../images/route-acc-arrow.png");
  transform: rotate(180deg);
  transition: border-color 0.2s;
}

.route-acc-body {
  display: none;
  background: #fff;
  border-top: 1px solid #e8e8e8;
}
.is-open .route-acc-body {
  display: block;
}
.route-acc-body__empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  color: #bbb;
}

.route-point-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.route-point-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border: 1px solid #e9e9e9;
  cursor: pointer;
  background: #fff;
  transition: background 0.15s;
  background: #f8f8f8;
  margin-top: 4px;
  border-radius: 5px;
}
.route-point-item:first-child {
  margin-top: 7px;
}
.route-point-item:hover {
  background: #f8fbfe;
}
.route-point-item.is-active {
  background: #fff;
}
.route-point-item.is-active .route-point-item__num {
  color: #047bb6;
  font-weight: 700;
}
.route-point-item__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #02b0f2;
  flex-shrink: 0;
}
.route-point-item__num {
  font-size: 13px;
  color: #444;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.route-point-item__del {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0c0c0;
  font-size: 17px;
  flex-shrink: 0;
  border-radius: 4px;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.route-point-item__del:hover {
  background: #ffe5e5;
  color: #e54e57;
}
.route-point-item__del::before {
  content: "×";
}

.regi-map-legend {
  position: absolute;
  right: 780px;
  bottom: 18px;
  z-index: 210;
  min-width: 160px;
  padding: 10px 12px;
  border: 1px solid #1d1d1d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.regi-map-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.regi-map-legend__item + .regi-map-legend__item {
  margin-top: 8px;
}
.regi-map-legend__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
.regi-map-legend__icon--selected {
  background-image: url("../images/select-poi.png");
}
.regi-map-legend__icon--unselected {
  background-image: url("../images/noselect-poi.png");
}
.regi-map-legend__label {
  font-size: 15px;
  line-height: 1.2;
  color: #555555;
  font-weight: 600;
  white-space: nowrap;
}

.regi-map-bar {
  position: absolute;
  bottom: 0;
  left: 520px;
  right: 0;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid #d8d8d8;
  padding: 12px 20px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 100;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.regi-map-bar.show {
  display: flex;
}
.regi-map-bar__segment {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1d;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.regi-map-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.regi-map-bar__btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.regi-map-bar__icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #d8d8d8;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
}
.regi-map-bar__icon-btn:hover {
  background: #f5f5f5;
  border-color: #aaa;
}

.regi-map-bar.regi-map-bar--floating {
  left: auto;
  right: 140px;
  bottom: 18px;
  width: 592px;
  min-height: 52px;
  padding: 8px 10px 8px 18px;
  border: 1px solid rgb(11, 66, 124);
  border-radius: 30px;
  background: rgba(11, 66, 124, 0.75);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  justify-content: space-between;
  gap: 12px;
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__segment {
  color: #fff;
  font-size: 17px;
  letter-spacing: -0.2px;
  line-height: 1.2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__actions {
  gap: 8px;
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  overflow: visible;
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__icon-btn .map-ico-back {
  width: 13px;
  height: 13px;
  display: inline-block;
  background-image: url("../images/map-ico-back.png");
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__icon-btn .map-ico-re {
  width: 13px;
  height: 13px;
  display: inline-block;
  background-image: url("../images/map-ico-re.png");
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.9);
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__icon-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(20, 31, 43, 0.95);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 30;
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__icon-btn[data-tooltip]:hover::after, .regi-map-bar.regi-map-bar--floating .regi-map-bar__icon-btn[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__draw-btn {
  height: 40px;
  min-width: 120px;
  padding: 0 18px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  background: #fff;
  color: #0f4d8b;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.regi-map-bar.regi-map-bar--floating .regi-map-bar__draw-btn:hover {
  background: #f3f8fc;
}

.route-time {
  font-size: 15px;
}
.route-time__mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.route-time__mode-card {
  padding: 14px;
  border: 1px solid #bcc4cd;
  border-radius: 9px;
  background: #f4f6f8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  background: #fff;
}
.route-time__mode-card.is-selected {
  border: 1px solid #1588c8;
}
.route-time__mode-card.is-selected .route-time__mode-title {
  color: #047bb6;
}
.route-time__mode-card.is-selected .route-time__mode-icon {
  background-color: #e0eff6;
}
.route-time__mode-card.is-selected .route-time__mode-icon--individual {
  background-image: url("../images/individual-dispatch-active.png");
}
.route-time__mode-card.is-selected .route-time__mode-icon--period {
  background-image: url("../images/period-dispatch-active.png");
}
.route-time__mode-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  border: 1px solid #d5dbe2;
  background: #eeeeee;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.route-time__mode-icon--individual {
  background-image: url("../images/individual-dispatch.png");
}
.route-time__mode-icon--period {
  background-image: url("../images/period-dispatch.png");
}
.route-time__mode-copy {
  flex: 1;
  min-width: 0;
}
.route-time__mode-title {
  display: block;
  margin-bottom: 1px;
  color: #1d1d1d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
}
.route-time__mode-desc {
  display: block;
  color: #555555;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
}
.route-time__mode-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #c8cfd7;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}
.route-time__mode-card.is-selected .route-time__mode-radio {
  border-color: #047bb6;
}
.route-time__mode-card.is-selected .route-time__mode-radio::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #047bb6;
}
.route-time__box {
  border: 1px solid #dae0e8;
  border-radius: 10px;
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
}
.route-time__tabs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #d6dbe1;
  border-radius: 6px;
  overflow: hidden;
}
.route-time__tab {
  border: 0;
  border-right: 1px solid #d9dde2;
  background: #fff;
  color: #2f343a;
  font-size: 15px;
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
}
.route-time__tab:last-child {
  border-right: 0;
}
.route-time__tab.is-active {
  background: #047bb6;
  color: #fff;
  border-radius: 0;
}
.route-time__form {
  margin-top: 20px;
  display: grid;
  row-gap: 10px;
}
.route-time__form-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  column-gap: 8px;
}
.route-time__label {
  color: #2a2f35;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.route-time__control {
  position: relative;
}
.route-time__control input,
.route-time__control select {
  width: 100%;
  height: 40px;
  border: 1px solid #d7dce2;
  border-radius: 5px;
  background: #fff;
  color: #40464d;
  font-size: 15px;
  font-weight: 500;
  padding: 0 9px;
}
.route-time__control select {
  appearance: none;
  background-image: url("../images/select-arrow.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 6px;
  padding-right: 24px;
}
.route-time__control--with-icon input {
  padding-right: 24px;
}
.route-time__clock {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 13px;
  border-radius: 50%;
  background-image: url("../images/ico-schedule.png");
}
.route-time__clock--trigger {
  cursor: pointer;
}
.route-time__actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.route-time__check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #717171;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transform: translateY(1px);
}
.route-time__check input {
  width: 14px;
  height: 14px;
  margin: 0;
}
.route-time__generate {
  height: 41px;
  width: auto;
  border: 1px solid #047bb6;
  border-radius: 8px;
  background: #fff;
  color: #047bb6;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 700;
}
.route-time__timetable-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}
.route-time__timetable-title {
  margin: 0;
  color: #2a2f35;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.route-time__count {
  margin: 0;
  color: #747b83;
  font-size: 15px;
  font-weight: 500;
}
.route-time__count strong {
  color: #047bb6;
  font-size: 17px;
  font-weight: 700;
}
.route-time__add-row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 66px;
  gap: 6px;
}
.route-time__add-input {
  position: relative;
}
.route-time__add-input input {
  width: 100%;
  height: 40px;
  border: 1px solid #d6dbe1;
  border-radius: 5px;
  background: #fff;
  color: #3a3f46;
  font-size: 15px;
  font-weight: 500;
  padding: 0 24px 0 8px;
}
.route-time__add-input input::placeholder {
  color: #9aa0a8;
}
.route-time__add-btn {
  height: 40px;
  border: 1px solid #555555;
  border-radius: 5px;
  background: #fff;
  color: #555555;
  font-size: 15px;
  font-weight: 700;
}
.route-time__add-btn:disabled {
  border-color: #d2d6dc;
  background: #f3f4f6;
  color: #b0b6bd;
  cursor: default;
}
.route-time__grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.route-time__grid.is-empty {
  display: none;
}
.route-time__time-btn {
  position: relative;
  height: 32px;
  line-height: 32px;
  border: 1px solid #d7dce2;
  border-radius: 4px;
  background: #f6f7f8;
  color: #6f757c;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.route-time__time-btn:hover {
  border-color: #9ca2aa;
}
.route-time__time-btn.is-selected {
  border-color: #1588c8;
  background-color: #fff;
  color: #047bb6;
  background-image: url("../images/hover-time.png");
  background-position: 95% center;
  background-repeat: no-repeat;
}
.route-time__empty {
  display: none;
  height: 40px;
  margin-top: 6px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #7f858d;
  font-size: 15px;
  font-weight: 500;
}
.route-time__empty.is-show {
  display: flex;
}
.route-time__empty-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #87a7bf;
  position: relative;
}
.route-time__empty-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #1588c8;
}

.route-time-pop {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  border: 1px solid #8e8e8e;
  border-radius: 5px;
  background: #fff;
  z-index: 20;
  padding: 3px;
  width: 100%;
}
.route-time-pop__value {
  height: 18px;
  border: 1px solid #d6dbe0;
  border-radius: 3px;
  background: #fbfcfd;
  color: #3a3f46;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-time-pop__spinner {
  display: grid;
  grid-template-columns: 1fr 8px 1fr;
  align-items: center;
  margin-bottom: 5px;
}
.route-time-pop__unit {
  display: grid;
  row-gap: 1px;
  justify-items: center;
  gap: 2px;
}
.route-time-pop__unit span {
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: #1f242a;
  padding: 5px;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
}
.route-time-pop__colon {
  text-align: center;
  color: #3a3f46;
  font-size: 15px;
  font-weight: 700;
}
.route-time-pop__arrow {
  width: 36px;
  height: 24px;
  border: none;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  background: #fff;
  transition: all 0.3s;
}
.route-time-pop__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 12px;
  transform: translate(-50%, -50%);
  transition: all 0.3s;
}
.route-time-pop__arrow:hover {
  background-color: #f0f0f0;
}
.route-time-pop__arrow:focus {
  background-color: #e5f2f8;
}
.route-time-pop__arrow--up::before {
  background-image: url("../images/time-up-arrow.png");
}
.route-time-pop__arrow--up:hover::before {
  background-image: url("../images/time-up-arrow-on.png");
}
.route-time-pop__arrow--down::before {
  background-image: url("../images/time-down-arrow.png");
}
.route-time-pop__arrow--down:hover::before {
  background-image: url("../images/time-down-arrow-on.png");
}
.route-time-pop__actions {
  margin-top: 2px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.route-time-pop__btn {
  border: 1px solid #555555;
  border-radius: 4px;
  background: #ededed;
  color: #555555;
  font-size: 15px;
  padding: 5px 9px;
  cursor: pointer;
  line-height: 1;
}
.route-time-pop__btn--confirm {
  border-color: #047bb6;
  color: #047bb6;
  background: #fff;
}

.search-popover-trigger {
  position: absolute;
  top: 15px;
  left: 720px;
  z-index: 205;
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: #0f4d8b;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.search-popover {
  position: absolute;
  top: 15px;
  left: 720px;
  width: 295px;
  background: #0b427c;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
  overflow: visible;
  z-index: 200;
  border: 1px solid #d3d9e1;
  display: none;
}
.search-popover.is-open {
  display: block;
}
.search-popover__head {
  height: 40px;
  background: #0f4d8b;
  color: #fff;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px 8px 0 0;
}
.search-popover__title {
  line-height: 1;
  color: #fff;
}
.search-popover__close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
}
.search-popover__close::before {
  content: "";
  font-size: 14px;
  width: 14px;
  height: 14px;
  background-image: url("../images/popover-close.png");
}
.search-popover__inner {
  background: #fff;
  border-radius: 8px 0 12px 12px;
  margin: 0 0px 4px;
  padding: 15px;
}
.search-popover__search {
  margin-bottom: 10px;
}
.search-popover__search .panel--search {
  height: 40px;
  border-radius: 5px;
  border: 1px solid #cfd3d7;
  background: #fff;
}
.search-popover__search .panel--search .search--input {
  background: transparent;
  font-size: 15px;
  color: #4c4c4c;
  padding: 0 20px;
}
.search-popover__search .panel--search .search--input::placeholder {
  color: #b5b7bb;
  font-weight: 500;
}
.search-popover__search .panel--search .search--button {
  background: transparent;
  padding: 0 18px;
}
.search-popover__search .panel--search .search--button img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: 0.95;
}
.search-popover__count {
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: #3f4449;
}
.search-popover__count strong {
  font-size: 17px;
  color: #1074c1;
  font-weight: 700;
}
.search-popover__list {
  position: relative;
  max-height: 290px;
  overflow-y: auto;
}
.search-popover__list::-webkit-scrollbar {
  width: 12px;
}
.search-popover__list::-webkit-scrollbar-thumb {
  background: #c2c5ca;
  border-radius: 10px;
}
.search-popover__list::-webkit-scrollbar-track {
  background: transparent;
}
.search-popover__item {
  min-height: 27px;
  padding: 0 8px;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 0;
  color: #5a5e63;
  border-radius: 4px;
}
.search-popover__item:last-child {
  border-bottom: none;
}
.search-popover__item:hover {
  background: #e7ebef;
}
.search-popover__item.is-active {
  background: #d9e6f0;
  font-weight: 700;
}
.search-popover__item.is-active span {
  color: #047bb6;
}
.search-popover__item.is-active .search-popover__item__visibility {
  background-image: url("../images/visibility-toggle-on.png");
}
.search-popover__item__dot {
  display: none;
}
.search-popover__item__visibility {
  display: inline-block;
  width: 18px;
  height: 14px;
  background-image: url("../images/visibility-toggle-off.png");
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5px;
}
.search-popover__item__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-popover__empty {
  min-height: 145px;
  padding: 32px 16px;
  border-radius: 10px;
  background: #f9f9f9;
  text-align: center;
  color: #6f7378;
  font-size: 42px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.search-popover__empty-icon {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}
.search-popover__empty-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #98b3cc;
  background-image: url("../images/popover-empty-icon.png");
  background-repeat: no-repeat;
  background-position: center;
}
.search-popover__empty p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #6f7378;
}

.Map.station-search-open .search-popover-trigger {
  display: none;
}

.ico-no {
  display: inline-block;
  background-image: url("../images/ico-tbl-no.png");
  width: 20px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.ico-list {
  display: inline-block;
  background-image: url("../images/ico-tbl-list.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.ico-call {
  display: inline-block;
  background-image: url("../images/ico-tbl-call.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.ico-car {
  display: inline-block;
  background-image: url("../images/ico-tbl-car.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.ico-cars {
  display: inline-block;
  background-image: url("../images/ico-tbl-cars.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.ico-address {
  display: inline-block;
  background-image: url("../images/ico-tbl-address.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.ico-ceo {
  display: inline-block;
  background-image: url("../images/ico-tbl-ceo.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.ico-empty {
  display: inline-block;
  background-image: url("../images/ico-tbl-empty.png");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination a, .pagination strong, .pagination span {
  transition: all 0.25s;
}
.pagination a,
.pagination strong {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 400;
  height: 30px;
  width: 30px;
  text-decoration: none;
  color: #717171;
}
.pagination .paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  margin: 0 10px;
}
.pagination .paging a,
.pagination .paging strong {
  border-radius: 50%;
  font-size: 15px;
}
.pagination .paging a:hover, .pagination .paging a:focus,
.pagination .paging strong:hover,
.pagination .paging strong:focus {
  background-color: #f5f7fa;
  color: #000;
}
.pagination .paging strong {
  color: #fff;
  background-color: #000;
  font-weight: 700;
}
.pagination .fir,
.pagination .prev,
.pagination .next,
.pagination .last {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
}
.pagination .fir span,
.pagination .prev span,
.pagination .next span,
.pagination .last span {
  white-space: nowrap;
  color: #555555;
  font-size: 15px;
}
.pagination .fir:hover, .pagination .fir:focus,
.pagination .prev:hover,
.pagination .prev:focus,
.pagination .next:hover,
.pagination .next:focus,
.pagination .last:hover,
.pagination .last:focus {
  color: #717171;
}
.pagination .fir:hover span, .pagination .fir:focus span,
.pagination .prev:hover span,
.pagination .prev:focus span,
.pagination .next:hover span,
.pagination .next:focus span,
.pagination .last:hover span,
.pagination .last:focus span {
  color: #717171;
}
.pagination .fir img,
.pagination .prev img,
.pagination .next img,
.pagination .last img {
  display: flex;
}

/* ========== Tab - 공통  ========== */
.tab--btn__nav {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
}
.tab--btn__nav .tab--item {
  flex: 1;
  padding: 10px;
  border: none;
  background: #f5f5f5;
  font-size: 17px;
  cursor: pointer;
  border-left: 1px solid #d8d8d8;
  font-weight: 500;
}
.tab--btn__nav .tab--item:first-child {
  border-radius: 5px 0 0 5px;
  border-left: none;
}
.tab--btn__nav .tab--item:last-child {
  border-radius: 0 5px 5px 0;
}
.tab--btn__nav .tab--item.active {
  background: #047bb6;
  color: #fff;
  border-left: none;
}

.tab--type__nav {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  padding: 10px 20px;
}
.tab--type__nav .tab--item {
  border: none;
  width: 19px;
  height: 14px;
}
.tab--type__nav .tab--item + button {
  width: 14px;
}
.tab--type__nav .tab--item .ico {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
}
.tab--type__nav .tab--item .ico.list {
  width: 19px;
  height: 14px;
  background-image: url("../images/tab-list.png");
}
.tab--type__nav .tab--item .ico.card {
  width: 14px;
  height: 14px;
  background-image: url("../images/tab-card.png");
}
.tab--type__nav .tab--item.active .list {
  background-image: url("../images/tab-list-on.png");
}
.tab--type__nav .tab--item.active .card {
  background-image: url("../images/tab-card-on.png");
}

.tab--container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.event-nav {
  margin: 0 20px 20px;
}

.tab--content {
  height: 100%;
}
.tab--content .tab--panel {
  display: none;
  height: 100%;
}
.tab--content .tab--panel.active {
  display: block;
}

.tabs__list,
.al-tabs__list {
  display: inline-flex;
  gap: 2px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 4px;
  list-style: none;
  background: #F1F5F9;
  gap: 10px;
}
.tabs__tab,
.al-tabs__tab {
  border: 0;
  border-radius: 4px;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: #1E293B;
  min-height: 32px;
  min-width: 97px;
}
.tabs__tab:hover:not(.tabs__tab--active,
.al-tabs__tab--active),
.al-tabs__tab:hover:not(.tabs__tab--active,
.al-tabs__tab--active) {
  background: rgba(18, 118, 167, 0.08);
}
.tabs__tab--active, .tabs__tab.is-active,
.al-tabs__tab--active,
.al-tabs__tab.is-active {
  background: #fff;
  color: #1E293B;
  font-weight: 500;
}
.tabs__tab:focus-visible,
.al-tabs__tab:focus-visible {
  outline: 2px solid var(--al-color-primary);
  outline-offset: 2px;
}
.tabs__panel,
.al-tabs__panel {
  display: none;
}
.tabs__panel--active,
.al-tabs__panel--active {
  display: block;
}
.tabs--status .tabs__panel,
.tabs--status .al-tabs__panel,
.al-tabs--status .tabs__panel,
.al-tabs--status .al-tabs__panel {
  display: none;
}
.tabs--line .tabs__list,
.tabs--line .al-tabs__list,
.al-tabs--line .tabs__list,
.al-tabs--line .al-tabs__list {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #d8dfe8;
  border-radius: 0;
  background: transparent;
  margin-bottom: 20px;
}
.tabs--line .tabs__tab,
.tabs--line .al-tabs__tab,
.al-tabs--line .tabs__tab,
.al-tabs--line .al-tabs__tab {
  font-size: 19px;
  font-weight: 700;
  color: #94A3B8;
  padding: 0 0 12px;
  margin-right: 52px;
  min-width: auto;
  text-align: left;
}
.tabs--line .tabs__tab:hover:not(.tabs__tab--active):not(.al-tabs__tab--active):not(.is-active),
.tabs--line .al-tabs__tab:hover:not(.tabs__tab--active):not(.al-tabs__tab--active):not(.is-active),
.al-tabs--line .tabs__tab:hover:not(.tabs__tab--active):not(.al-tabs__tab--active):not(.is-active),
.al-tabs--line .al-tabs__tab:hover:not(.tabs__tab--active):not(.al-tabs__tab--active):not(.is-active) {
  background: transparent;
  color: #52657a;
}
.tabs--line .tabs__tab.active,
.tabs--line .al-tabs__tab.active,
.al-tabs--line .tabs__tab.active,
.al-tabs--line .al-tabs__tab.active {
  background: transparent;
  color: var(--al-color-text);
  box-shadow: none;
}
.tabs--line .tabs__tab.active::before,
.tabs--line .al-tabs__tab.active::before,
.al-tabs--line .tabs__tab.active::before,
.al-tabs--line .al-tabs__tab.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: currentColor;
}
.tabs--line .tabs__tab.active::after,
.tabs--line .al-tabs__tab.active::after,
.al-tabs--line .tabs__tab.active::after,
.al-tabs--line .al-tabs__tab.active::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 16px;
  margin-left: 6px;
  background-image: url("../images/ico-tab-select.svg");
}

.route--add {
  padding: 20px;
  height: calc(100% - 142px);
}
.route--add .acc-item {
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.route--add .acc-item.is-active {
  border-color: #0a529d;
}
.route--add .acc-item.is-active .acc-panel {
  opacity: 1;
  padding: 16px;
}
.route--add .acc-item .acc-box {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
  padding: 20px;
}
.route--add .acc-item .acc-box + .acc-box {
  margin-top: 20px;
}
.route--add .acc-item .acc-box__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #c6c6c6;
  border-radius: 5px;
}
.route--add .acc-item .acc-box__item.is-active {
  border: 1px solid #0758ac;
  background: #eff6ff;
}
.route--add .acc-item .acc-box__item.is-active .info span {
  color: #0758ac;
}
.route--add .acc-item .acc-box__item .info {
  display: flex;
  width: 100%;
  align-items: center;
}
.route--add .acc-item .acc-box__item .info div {
  flex: 1 0 18%;
  text-align: center;
  font-size: 14px;
}
.route--add .acc-item .acc-box__item .info div + div {
  flex: 1 0 20%;
}
.route--add .acc-item .acc-box__item .info div + div + div {
  flex: 1 0 62%;
}
.route--add .acc-item .acc-box__item .info.ea4 div {
  vertical-align: middle;
  flex: 1 0 15%;
  text-align: center;
}
.route--add .acc-item .acc-box__item .info.ea4 div + div {
  flex: 1 0 40%;
}
.route--add .acc-item .acc-box__item .info.ea4 div + div + div {
  display: flex;
  align-items: center;
  flex: 1 0 30%;
  justify-content: center;
  gap: 5px;
}
.route--add .acc-item .acc-box__item .info.ea4 div + div + div input[type=text] {
  padding: 5px;
  width: 50px;
}
.route--add .acc-item .acc-box__item .info.ea4 div + div + div .btn {
  width: 40px;
  height: 29px;
  font-size: 14px;
}
.route--add .acc-item .acc-box__item .info.ea4 div + div + div + div {
  flex: 1 0 15%;
}
.route--add .acc-item .acc-box__item .del {
  border: none;
  background-image: url("../images/ico-del10@10.png");
  width: 10px;
  height: 10px;
  background-color: transparent;
  flex: 0 0 10px;
}
.route--add .acc-item .acc-box__item + .acc-box__item {
  margin-top: 10px;
}
.route--add .acc-item .acc-box__top {
  margin: 20px 0 10px;
  display: table;
  width: 100%;
  border-top: 2px solid #000;
  border-bottom: 1px solid #dddddd;
}
.route--add .acc-item .acc-box__top span {
  display: table-cell;
  text-align: center;
  padding: 8px;
}
.route--add .acc-item .acc-box .acc-box-btn button {
  flex: 1;
  gap: 10px;
}
.route--add .acc-btn {
  width: 100%;
  background: #f9f9f9;
  border: none;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}
.route--add .acc-btn__inner {
  display: flex;
  gap: 5px;
  align-items: center;
}
.route--add .acc-btn__num {
  color: #0758ac;
  font-weight: bold;
}
.route--add .acc-btn__complet {
  font-size: 13px;
  color: #0758ac;
}
.route--add .acc-panel {
  height: 0;
  opacity: 0;
  overflow: hidden;
  background: #f9f9f9;
  transition: opacity 0.3s ease;
  will-change: height;
}
.route--add .acc-panel__desc {
  position: relative;
  font-size: 14px;
  color: #1d1d1d;
  margin-bottom: 8px;
  padding-left: 20px;
}
.route--add .acc-panel__desc:after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  background-image: url("../images/i-mark.png");
}
.route--add .acc-panel__btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #0a529d;
  background: #eff6ff;
  border-radius: 6px;
  color: #0a529d;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.route--add .acc-panel__btn:hover {
  background: #0a529d;
  color: #fff;
}

.acc-item.is-active .acc-panel {
  opacity: 1;
}

.route--add__btn {
  position: absolute;
  padding: 20px;
  bottom: 54px;
  width: 100%;
  background: #fff;
}
.route--add__btn button {
  flex: 1;
}

/* 드래그 CSS */
.ghost-wrapper {
  width: 100%;
  height: auto !important;
  background: transparent !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 드래그 UI */
.ghost-drag-item {
  background: #ffffff;
  padding: 12px 18px;
  border-radius: 10px;
  color: #333;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: scale(1.06);
  opacity: 0.95;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 15px;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.2px;
  border: 1px solid #e3e3e3;
  background: #fff;
  line-height: 1;
  color: #374151;
}
.badge--muted {
  color: #848484;
}
.badge--blue {
  border-color: var(--primary-color);
  background: #dcedf4;
  color: var(--primary-color);
}
.badge--warn {
  border-color: #ffe0a6;
  background: #fff7ed;
  color: #f59e0b;
}
.badge--purple {
  border-color: #8080e0;
  background: #e8e7f7;
  color: #8080e0;
}
.badge--green {
  border-color: #56946f;
  background: #eafff0;
  color: #56946f;
}
.badge--red {
  border-color: #fb5852;
  background: #fee9e9;
  color: #fb5852;
}
.badge--round {
  border-radius: 99px;
  display: inline;
}

.label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 15px;
  padding: 7px 8px;
  border-radius: 99px;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.2px;
  background: #fff;
  line-height: 1;
}
.label .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
}
.label.accident {
  background: #fef1f8;
}
.label.accident .dot {
  background: #e252a7;
}
.label.breakdown {
  background: #fff2cf;
}
.label.breakdown .dot {
  background: #f3c953;
}
.label.emergency {
  background: #eafff0;
}
.label.emergency .dot {
  background: #56946f;
}
.label.accident {
  background: #e8e7f7;
}
.label.accident .dot {
  background: #8080e0;
}
.label.construction {
  background: #ffebd6;
}
.label.construction .dot {
  background: #fe992f;
}
.label.closure {
  background: #dff0f7;
}
.label.closure .dot {
  background: #60b5d4;
}
.label.protest {
  background: #dfe4f8;
}
.label.protest .dot {
  background: #607ddb;
}
.label.stop {
  background: #fff1f1;
}
.label.stop .dot {
  background: #e74d57;
}

.badge,
.al-badge {
  --badge-bg: #eef5f0;
  --badge-color: #267337;
  --badge-dot: #24933f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 62px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-color);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.badge::before,
.al-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--badge-dot);
  flex-shrink: 0;
}
.badge--sm,
.al-badge--sm {
  min-width: auto;
  min-height: 28px;
  padding: 0 10px;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
}
.badge--sm::before,
.al-badge--sm::before {
  width: 7px;
  height: 7px;
}
.badge--success, .badge--safe,
.al-badge--success,
.al-badge--safe {
  --badge-bg: #eaf6ec;
  --badge-color: #267337;
  --badge-dot: #24933f;
}
.badge--warn,
.al-badge--warn {
  --badge-bg: #fff3db;
  --badge-color: #c78500;
  --badge-dot: #ffb114;
}
.badge--danger,
.al-badge--danger {
  --badge-bg: #fcdfd9;
  --badge-color: #bd2c0f;
  --badge-dot: #de3412;
}
.badge--info,
.al-badge--info {
  --badge-bg: #e6f3ff;
  --badge-color: #228be6;
  --badge-dot: #228be6;
}
.badge--none,
.al-badge--none {
  --badge-bg: #f1f3f5;
  --badge-color: #5c6670;
  --badge-dot: #868e96;
}
.badge--new,
.al-badge--new {
  --badge-bg: #fee2e2;
  --badge-color: #dc2626;
  --badge-dot: #f44336;
}

.schedule-panel {
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
  border-radius: 10px 10px 0 0;
  margin-bottom: 0;
}
.schedule-toolbar__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.schedule-toolbar__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.schedule-toolbar__nav-btn {
  width: 32px;
  height: 32px;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
}
.schedule-toolbar__nav-btn:hover {
  background: #f8fafc;
}
.schedule-toolbar__title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  min-width: 120px;
  text-align: center;
}
.schedule-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.schedule-toolbar__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 130px;
  padding-left: 16px;
}
.schedule-toolbar__download-icon {
  width: 16px;
  height: 16px;
  background-image: url("../images/ico-down.png");
}
.schedule-toolbar__fullscreen {
  width: 36px;
  height: 36px;
  border: 1px solid #c6c6c6;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  background-image: url("../images/ico-fullscreen.png");
  background-repeat: no-repeat;
  background-position: center;
}
.schedule-toolbar__fullscreen:hover::before {
  border-color: #0f172a;
}

.schedule-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #1d1d1d;
}
.schedule-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.schedule-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.schedule-legend__dot--sick {
  background: #ffb300;
}
.schedule-legend__dot--leave {
  background: #4caf50;
}
.schedule-legend__dot--off {
  background: #9575cd;
}
.schedule-legend__dot--weekday {
  background: #333333;
}
.schedule-legend__dot--weekend {
  background: #1a73e8;
}
.schedule-legend__dot--holiday {
  background: #e53935;
}
.schedule-legend__dot--temp {
  background: #ff00ff;
}

.schedule-dropdown {
  position: relative;
}
.schedule-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 15px;
  border-radius: 5px;
  cursor: pointer;
  height: 36px;
  min-width: 120px;
  background: #fff;
  justify-content: space-between;
}
.schedule-dropdown__caret {
  width: 9px;
  height: 5px;
  background-image: url("../images/select-arrow2.png");
}
.schedule-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 120px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #c6c6c6;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.schedule-dropdown__menu[aria-hidden=false] {
  opacity: 1;
  pointer-events: auto;
}
.schedule-dropdown__item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  font-size: 14px;
  color: #0f172a;
  background: none;
  border: none;
  cursor: pointer;
}
.schedule-dropdown__item:hover {
  background: #f8fafc;
}
.schedule-dropdown.is-open .schedule-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
}

.schedule-view-toggle {
  display: flex;
  border: 1px solid #c6c6c6;
  border-radius: 5px;
  overflow: hidden;
  height: 36px;
}
.schedule-view-toggle__btn {
  padding: 8px 14px;
  font-size: 14px;
  background: #fff;
  border: none;
  color: #1d1d1d;
  cursor: pointer;
}
.schedule-view-toggle__btn.is-active {
  background: #047bb6;
  color: #fff;
}
.schedule-view-toggle__btn:not(.is-active):hover {
  background: #f8fafc;
}

.schedule-wrap {
  background: #fff;
  border: 1px solid #c6c6c6;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid #c6c6c6;
  overflow: auto;
  min-height: 400px;
  margin-top: 0;
}

.schedule-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  /* 마지막 행: 셀의 border-bottom은 제거해서 wrap의 1px 라인만 보이도록 */
  /* 마지막 행: 별도 제어 없이 기본 cell border-bottom으로만 한 줄 유지 */
  /* 전체 그리드의 가장 오른쪽 열만 외곽선 1px로 보이도록 */
}
.schedule-grid__head {
  display: flex;
  align-items: stretch;
  color: #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.schedule-grid__head-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 10px -10px rgba(15, 23, 42, 0.35);
}
.schedule-grid__head-cell--name {
  min-width: 140px;
  max-width: 140px;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 12;
  background: #fff;
  border-right: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
}
.schedule-grid__head-cell--date {
  min-width: 120px;
  flex: 1;
  position: relative;
}
.schedule-grid__head-dates {
  display: flex;
  flex: 1;
  min-width: 0;
}
.schedule-grid__head-dates .schedule-grid__head-cell--date {
  flex: 1;
  min-width: 120px;
  border-right: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
  /* 활성화 시에는 .schedule-grid__head-cell--col-selected 에서 border-bottom만 별도로 제어 */
}
.schedule-grid__body {
  display: flex;
  flex-direction: column;
}
.schedule-grid__row {
  display: flex;
  align-items: stretch;
  min-height: 56px;
  overflow: visible;
  position: relative;
}
.schedule-grid__row:last-child .schedule-grid__cell,
.schedule-grid__row:last-child .schedule-grid__name-cell {
  border-bottom: none;
}
.schedule-grid__name-cell {
  min-width: 140px;
  max-width: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #fff;
  border-right: 1px solid #c6c6c6;
  border-bottom: 1px solid #c6c6c6;
  gap: 6px;
  position: sticky;
  left: 0;
  z-index: 8;
  box-shadow: 6px 0 10px rgba(15, 23, 42, 0.06);
  overflow: visible;
  /* 행 드롭다운이 다음 행 위에 보이도록 */
  isolation: isolate;
  /* 행 선택 배경은 sticky 셀에서 가상 요소로 분리 */
}
.schedule-grid__name-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
}
.schedule-grid__row--selected .schedule-grid__name-cell::before {
  background: rgba(10, 82, 157, 0.1);
}
.schedule-grid__name {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.schedule-grid__name-menu, .schedule-grid__cell-menu {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.schedule-grid__name-menu::before, .schedule-grid__cell-menu::before {
  content: "⋮";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -2px;
  color: #1d1d1d;
}
.schedule-grid__name-menu:hover::before, .schedule-grid__cell-menu:hover::before {
  color: #0f172a;
}
.schedule-grid__cell {
  flex: 1;
  min-width: 120px;
  padding: 6px;
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  flex-direction: column;
  gap: 5px;
}
.schedule-grid__cell:last-child {
  border-right: none;
}
.schedule-grid__cell--empty .schedule-grid__add {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.schedule-grid__cell--empty:hover .schedule-grid__add {
  opacity: 1;
}
.schedule-grid__cell--col-selected {
  background: rgba(10, 82, 157, 0.1);
  /* X축과 동일하게 1px 느낌으로 좌우 라인만 얇게 */
  box-shadow: inset 1px 0 0 0 rgba(45, 45, 45, 0.9), inset -1px 0 0 0 rgba(45, 45, 45, 0.9);
}
.schedule-grid__row .schedule-grid__cell:last-child {
  border-right: 1px solid #c6c6c6;
}
.schedule-grid__row:last-child .schedule-grid__cell--col-selected {
  /* 마지막 행은 하단에도 1px만 추가 */
  box-shadow: inset 1px 0 0 0 rgba(45, 45, 45, 0.9), inset -1px 0 0 0 rgba(45, 45, 45, 0.9), inset 0 -1px 0 0 rgba(45, 45, 45, 0.9);
}
.schedule-grid__add {
  width: 100%;
  height: 100%;
  min-height: 40px;
  border: 1px dashed #c6c6c6;
  border-radius: 8px;
  background: transparent;
  font-size: 20px;
  color: #1d1d1d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, opacity 0.15s ease;
}
.schedule-grid__add:hover {
  background: rgba(59, 130, 246, 0.08);
  color: #047bb6;
  border-color: #047bb6;
}

.schedule-grid__head,
.schedule-grid__body,
.schedule-grid__row {
  width: max-content;
  min-width: 100%;
}

.schedule-grid__head-dates {
  display: flex;
  width: max-content;
  min-width: 0;
}

.schedule-grid__head-label {
  pointer-events: none;
}

.schedule-grid__kebab {
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.schedule-grid__kebab::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8e8e8e;
  box-shadow: 0 -5px 0 #8e8e8e, 0 5px 0 #8e8e8e;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.schedule-grid__kebab:hover {
  background: #f1f3f5;
}
.schedule-grid__kebab:hover::before {
  background: #6b7280;
  box-shadow: 0 -5px 0 #6b7280, 0 5px 0 #6b7280;
}
.schedule-grid__kebab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(4, 123, 182, 0.25);
}
.schedule-grid__kebab--row {
  width: 9px;
  height: 23px;
}
.schedule-grid__kebab--col::before {
  box-shadow: -5px 0 0 #8e8e8e, 5px 0 0 #8e8e8e;
}
.schedule-grid__kebab--col {
  width: 23px;
  height: 9px;
}
.schedule-grid__kebab--col:hover::before {
  box-shadow: -5px 0 0 #6b7280, 5px 0 0 #6b7280;
}

.schedule-grid__head-cell--date.is-open .schedule-grid__kebab--col,
.schedule-grid__head-cell--col-selected .schedule-grid__kebab--col,
.schedule-grid__row--selected .schedule-grid__kebab--row {
  background: #fff;
  box-shadow: inset 0 0 0 1px #d9dee5;
}
.schedule-grid__head-cell--date.is-open .schedule-grid__kebab--col::before,
.schedule-grid__head-cell--col-selected .schedule-grid__kebab--col::before,
.schedule-grid__row--selected .schedule-grid__kebab--row::before {
  background: #6b7280;
  box-shadow: 0 -5px 0 #6b7280, 0 5px 0 #6b7280;
}

.schedule-grid__head-cell--date.is-open .schedule-grid__kebab--col::before,
.schedule-grid__head-cell--col-selected .schedule-grid__kebab--col::before {
  box-shadow: -5px 0 0 #6b7280, 5px 0 0 #6b7280;
}

.schedule-grid__head-cell--date .schedule-grid__kebab,
.schedule-grid__name-cell .schedule-grid__kebab {
  margin-left: 4px;
}

.schedule-grid__menu {
  position: absolute;
  right: 50%;
  top: 100%;
  transform: translateX(50%);
  margin-top: 4px;
  min-width: 150px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #c6c6c6;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
  z-index: 20;
  list-style: none;
  display: none;
  /* X열(행) 메뉴: 이름 셀 오른쪽으로 뜨도록 위치 재조정 + z-index 상승 */
}
.schedule-grid__menu[aria-hidden=false] {
  display: block;
}
.schedule-grid__menu--row {
  z-index: 100;
  right: auto;
  left: 100%;
  top: 50%;
  margin-top: 0;
  margin-left: 8px;
  transform: translateY(-50%);
}

.schedule-grid__menu-item {
  width: 100%;
  padding: 6px 12px;
  font-size: 13px;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #0f172a;
}
.schedule-grid__menu-item:hover {
  background: #f8fafc;
}

/* Y열 선택: 헤더는 X축과 동일하게 1px 테두리 느낌만 */
.schedule-grid__head-cell--col-selected {
  /* 상/좌/우만 파란 라인, 하단은 본문 셀 border만 보이도록 처리 */
  box-shadow: inset 0 1px 0 0 rgba(45, 45, 45, 0.9), inset 1px 0 0 0 rgba(45, 45, 45, 0.9), inset -1px 0 0 0 rgba(45, 45, 45, 0.9); /* right */
  background: rgba(10, 82, 157, 0.1);
  border-bottom-color: transparent; /* 활성화 시에는 헤더 바텀 라인은 숨겨서 이중선 방지 */
}

.schedule-grid__row--selected {
  z-index: 50;
  position: relative;
  /* 행 선택: 박스섀도우 대신 border 기반으로 처리해서 스크롤 시 top 라인이 사라지지 않도록 */
}
.schedule-grid__row--selected .schedule-grid__name-cell,
.schedule-grid__row--selected .schedule-grid__cell {
  background: rgba(10, 82, 157, 0.1);
  border-top: 1px solid rgba(45, 45, 45, 0.9); /* X축처럼 위쪽 1px 라인 고정 */
  border-bottom-color: rgba(45, 45, 45, 0.9); /* 하단도 파란 1px */
}
.schedule-grid__row--selected .schedule-grid__name-cell {
  border-left: 1px solid rgba(45, 45, 45, 0.9); /* 좌측 파란 라인 */
  background: #fff;
}
.schedule-grid__row--selected .schedule-grid__cell:last-child {
  border-right: 1px solid rgba(45, 45, 45, 0.9); /* 우측 파란 라인 */
}

.schedule-item {
  position: relative;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(10, 82, 157, 0.1);
  min-height: 60px;
  justify-content: center;
}
.schedule-item__dot {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.schedule-item__range, .schedule-item__code {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}
.schedule-item__code {
  font-size: 15px;
  color: #1d1d1d;
  font-weight: 500;
}
.schedule-item__label {
  font-size: 15px;
  font-weight: 500;
}
.schedule-item--sick {
  background: rgb(255, 247, 229);
}
.schedule-item--sick .schedule-item__dot {
  background: #ffb300;
}
.schedule-item--sick .schedule-item__range {
  color: #ffb300;
}
.schedule-item--sick .schedule-item__label {
  color: #ffb300;
}
.schedule-item--leave {
  background: rgb(237, 247, 237);
}
.schedule-item--leave .schedule-item__dot {
  background: #4caf50;
}
.schedule-item--leave .schedule-item__range {
  color: #4caf50;
}
.schedule-item--leave .schedule-item__label {
  color: #4caf50;
}
.schedule-item--off {
  background: rgb(244, 241, 250);
}
.schedule-item--off .schedule-item__dot {
  background: #9575cd;
}
.schedule-item--off .schedule-item__range {
  color: #9575cd;
}
.schedule-item--off .schedule-item__label {
  color: #9575cd;
}
.schedule-item--weekday {
  background: rgb(234, 234, 234);
}
.schedule-item--weekday .schedule-item__dot {
  background: #333333;
}
.schedule-item--weekday .schedule-item__range {
  color: #333333;
}
.schedule-item--weekday .schedule-item__label {
  color: #333333;
}
.schedule-item--weekend {
  background: rgb(232, 241, 253);
}
.schedule-item--weekend .schedule-item__dot {
  background: #1a73e8;
}
.schedule-item--weekend .schedule-item__range {
  color: #1a73e8;
}
.schedule-item--weekend .schedule-item__label {
  color: #1a73e8;
}
.schedule-item--holiday {
  background: rgb(252, 235, 234);
}
.schedule-item--holiday .schedule-item__dot {
  background: #e53935;
}
.schedule-item--holiday .schedule-item__range {
  color: #e53935;
}
.schedule-item--holiday .schedule-item__label {
  color: #e53935;
}
.schedule-item--temp {
  background: rgb(255, 229, 255);
}
.schedule-item--temp .schedule-item__dot {
  background: #ff00ff;
}
.schedule-item--temp .schedule-item__range {
  color: #ff00ff;
}
.schedule-item--temp .schedule-item__label {
  color: #ff00ff;
}

.al-app-dashboard .al-page-body {
  background: #f6f8fc;
  border: 0;
  box-shadow: none;
}
.al-app-dashboard__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: 740px;
}
.al-app-dashboard__left {
  display: grid;
  gap: 24px;
}
.al-app-dashboard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.al-app-dashboard__card {
  background: #fff;
  border: 1px solid #e9edf4;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.al-app-dashboard__card--map {
  height: 100%;
  min-height: 740px;
}
.al-app-dashboard__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.al-app-dashboard__card-head--issue {
  margin-bottom: 12px;
}
.al-app-dashboard__card-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2f343f;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}
.al-app-dashboard__more {
  width: 24px;
  height: 24px;
  display: inline-block;
  overflow: hidden;
  background: url("../images/dash-arrow.png") no-repeat center/contain;
  text-decoration: none;
  text-indent: -9999px;
}
.al-app-dashboard__status-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 8px;
  padding: 12px 20px;
  gap: 12px;
  border: 1px solid rgb(226, 232, 240);
}
.al-app-dashboard__status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 8px;
}
.al-app-dashboard__status-item--all {
  display: block;
}
.al-app-dashboard__status-item--all .al-app-dashboard__status-label {
  text-align: left;
  font-weight: 600;
  font-size: 17px;
  line-height: 150%;
  color: var(--al-color-text);
}
.al-app-dashboard__status-item--all .al-app-dashboard__status-value {
  text-align: right;
  display: block;
}
.al-app-dashboard__status-item--all .al-app-dashboard__status-value strong {
  color: #1C8CF4;
  font-weight: 800;
  font-size: 32px;
  text-decoration: underline;
}
.al-app-dashboard__status-item--all .al-app-dashboard__status-value span {
  font-weight: 500;
  color: var(--al-color-text);
  font-size: 13px;
}
.al-app-dashboard__status-item--ok {
  background: rgb(234, 246, 236);
}
.al-app-dashboard__status-item--error {
  background: rgb(253, 239, 236);
}
.al-app-dashboard__status-item--offline {
  background: rgb(241, 245, 249);
}
.al-app-dashboard__status-label {
  color: var(--al-color-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 4px;
}
.al-app-dashboard__status-value {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #2f343f;
  font-size: 19px;
  font-weight: 800;
}
.al-app-dashboard__status-value strong {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: #2f343f;
  text-decoration: underline 2px solid;
}
.al-app-dashboard__status-value span {
  font-weight: 500;
  font-size: 13px;
  color: var(--al-color-text);
}
.al-app-dashboard__status-item--ok .al-app-dashboard__status-value strong {
  color: #228738;
}
.al-app-dashboard__status-item--error .al-app-dashboard__status-value strong {
  color: #DE3412;
}
.al-app-dashboard__status-item--offline .al-app-dashboard__status-value strong {
  color: #334155;
}
.al-app-dashboard__status-value--all strong {
  color: #2f98d6;
}
.al-app-dashboard__chart-placeholder {
  margin-top: 10px;
  min-height: 120px;
  border-radius: 8px;
  background: #f1f3f7;
}
.al-app-dashboard__service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.al-app-dashboard__service-item {
  padding: 16px 0 21px;
  border-radius: 8px;
  border: 1px solid #ebeff5;
  background: rgb(240, 247, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.al-app-dashboard__service-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
.al-app-dashboard__service-icon img {
  vertical-align: top;
}
.al-app-dashboard__service-label {
  font-size: 13px;
  text-align: center;
  padding-top: 12px;
  color: var(--al-color-text);
  font-weight: 400;
  line-height: 100%;
}
.al-app-dashboard__service-value {
  line-height: 100%;
  padding-top: 5px;
}
.al-app-dashboard__service-value strong {
  font-weight: 900;
  color: rgb(3, 105, 156);
  font-size: 19px;
  text-decoration: underline 2px solid;
}
.al-app-dashboard__service-value span {
  font-weight: 400;
  font-size: 13px;
  color: var(--al-color-text);
}
.al-app-dashboard__ota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.al-app-dashboard__ota-chart {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
}
.al-app-dashboard__ota-chart-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.al-app-dashboard__ota-chart-inner span {
  font-weight: 600;
  font-size: 15px;
  color: var(--al-color-text);
}
.al-app-dashboard__ota-chart-inner strong {
  line-height: 1;
  color: #2f343f;
  font-weight: 900;
  font-size: 24px;
}
.al-app-dashboard__ota-chart-inner strong span {
  font-size: 17px;
}
.al-app-dashboard__ota-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.al-app-dashboard__ota-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-left: 16px;
}
.al-app-dashboard__ota-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.al-app-dashboard__ota-list li:nth-child(1)::before {
  background: rgb(4, 123, 182);
}
.al-app-dashboard__ota-list li:nth-child(1) strong {
  color: rgb(4, 123, 182);
}
.al-app-dashboard__ota-list li:nth-child(2)::before {
  background: rgb(126, 191, 255);
}
.al-app-dashboard__ota-list li:nth-child(2) strong {
  color: rgb(126, 191, 255);
}
.al-app-dashboard__ota-list li:nth-child(3)::before {
  background: rgb(0, 34, 54);
}
.al-app-dashboard__ota-list li:nth-child(3) strong {
  color: rgb(0, 34, 54);
}
.al-app-dashboard__ota-list li > span {
  font-size: 13px;
}
.al-app-dashboard__ota-list strong {
  font-size: 19px;
  width: 60px;
  text-align: right;
  font-weight: 900;
}
.al-app-dashboard__ota-list strong span {
  font-weight: 500;
  font-size: 13px;
}
.al-app-dashboard__tabs {
  display: inline-flex;
  border-radius: 8px;
  border: 1px solid #e5eaf2;
  background: rgb(241, 245, 249);
  gap: 10px;
  padding: 4px;
}
.al-app-dashboard__tab {
  width: 97.3333358765px;
  height: 32px;
  border-radius: 4px;
  font-weight: 500;
  color: rgb(71, 85, 105);
  font-size: 15px;
  vertical-align: top;
}
.al-app-dashboard__tab.is-active {
  background: #fff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
}
.al-app-dashboard .form-tbl--dashboard.form-tbl--dashboard-cols {
  --column-count: 4;
}
.al-app-dashboard .form-tbl--dashboard .table-header {
  background: rgb(240, 247, 255);
  height: 40px;
}
.al-app-dashboard .form-tbl--dashboard .table-header .table-cell {
  font-size: 13px;
  font-weight: 500;
  color: var(--al-color-text);
}
.al-app-dashboard .form-tbl--dashboard .table-cell__row {
  border-color: rgb(226, 232, 240);
}
.al-app-dashboard .form-tbl--dashboard .table-cell {
  font-size: 15px;
  font-weight: 600;
  color: #2f343f;
  padding: 9px 8px;
}
.al-app-dashboard .form-tbl--dashboard .table-cell.thin {
  font-weight: 400;
  color: rgb(71, 85, 105);
}
.al-app-dashboard__time {
  color: rgb(227, 0, 132);
  width: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgb(240, 247, 255);
  background: rgb(240, 247, 255);
  font-size: 13px;
  font-weight: 500;
  vertical-align: top;
  padding: 8px 0;
  gap: 0 4px;
}
.al-app-dashboard__time::before {
  content: "";
  width: 15px;
  height: 10px;
  display: inline-block;
  vertical-align: top;
  background: url("../images/icon-time-now.svg") no-repeat center center/contain;
}
.al-app-dashboard .al-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  font-size: 15px;
}
.al-app-dashboard .al-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: top;
}
.al-app-dashboard .al-badge--success {
  color: #267337;
  background: #EAF6EC;
}
.al-app-dashboard .al-badge--success::before {
  background-color: #267337;
}
.al-app-dashboard .al-badge--warn {
  color: #C78500;
  background: #FFF3DB;
}
.al-app-dashboard .al-badge--warn::before {
  background-color: #FFB114;
}
.al-app-dashboard .al-badge--danger {
  color: #BD2C0F;
  background: #FCDFD9;
}
.al-app-dashboard .al-badge--danger::before {
  background-color: #DE3412;
}
.al-app-dashboard .al-badge--info {
  color: #228BE6;
  background: #E6F3FF;
}
.al-app-dashboard .al-badge--info::before {
  background-color: #228BE6;
}
.al-app-dashboard__map-placeholder {
  position: relative;
  height: calc(100% - 40px);
}
.al-app-dashboard__map-legend-chips {
  display: flex;
  gap: 8px;
}
.al-app-dashboard__map-legend {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
}
.al-app-dashboard__legend-chip {
  border: 0;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  height: 32px;
  border-radius: 100px;
  padding-right: 12px;
  padding-left: 12px;
  gap: 2px;
  background: rgb(255, 255, 255);
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.al-app-dashboard__legend-chip::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.al-app-dashboard__legend-chip[aria-pressed=true] {
  color: #fff;
}
.al-app-dashboard__legend-chip--ok::before {
  background-image: url("../images/icon-map-ok.svg");
}
.al-app-dashboard__legend-chip--ok[aria-pressed=true] {
  background: #228738;
}
.al-app-dashboard__legend-chip--ok[aria-pressed=true]::before {
  background-image: url("../images/icon-map-ok-on.svg");
}
.al-app-dashboard__legend-chip--warn::before {
  background-image: url("../images/icon-map-warn.svg");
}
.al-app-dashboard__legend-chip--warn[aria-pressed=true] {
  background: #c78500;
}
.al-app-dashboard__legend-chip--warn[aria-pressed=true]::before {
  background-image: url("../images/icon-map-warn-on.svg");
}
.al-app-dashboard__legend-chip--danger::before {
  background-image: url("../images/icon-map-danger.svg");
}
.al-app-dashboard__legend-chip--danger[aria-pressed=true] {
  background: #bd2c0f;
}
.al-app-dashboard__legend-chip--danger[aria-pressed=true]::before {
  background-image: url("../images/icon-map-danger-on.svg");
}
.al-app-dashboard__legend-chip--offline::before {
  background-image: url("../images/icon-map-offline.svg");
}
.al-app-dashboard__legend-chip--offline[aria-pressed=true] {
  background: #475569;
}
.al-app-dashboard__legend-chip--offline[aria-pressed=true]::before {
  background-image: url("../images/icon-map-offline-on.svg");
}
.al-app-dashboard__legend-chip:focus-visible {
  outline: 2px solid var(--al-color-primary);
  outline-offset: 2px;
}
.al-app-dashboard__map-refresh {
  margin-left: auto;
  cursor: pointer;
  height: 32px;
  border: none;
}
.al-app-dashboard__map-refresh img {
  vertical-align: top;
}
.al-app-dashboard__map-placeholder {
  position: relative;
  border-radius: 8px;
  background: #f1f3f7;
  color: #767b83;
  font-size: 48px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.al-app-dashboard__map-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.al-app-dashboard__map-dot--ok {
  top: 22%;
  left: 41%;
  background: #20b562;
}
.al-app-dashboard__map-dot--warn {
  top: 34%;
  left: 22%;
  background: #f3b43f;
}
.al-app-dashboard__map-dot--danger {
  top: 52%;
  left: 78%;
  background: #f05a4a;
}
.al-app-dashboard__map-dot--offline {
  top: 72%;
  left: 50%;
  background: #364152;
}

.al-app-dashboard__right {
  position: relative;
}

.adx-pop {
  border: 1px solid #047bb6;
  border-radius: 20px;
  overflow: hidden;
  background: #FFF;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.adx-pop__hd {
  height: 56px;
  padding: 0 32px;
  background: #047bb6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.adx-pop__tt {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #FFF;
}
.adx-pop__x {
  border: none;
  width: 32px;
  height: 32px;
  background: url("../images/icon-pop-close.svg") no-repeat center center/contain;
}
.adx-pop__bd {
  padding: 32px;
  display: grid;
  gap: 20px;
}

.adx-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.adx-box {
  border: 1px solid rgb(186, 218, 255);
  border-radius: 12px;
  background: #fff;
  padding: 20px;
}
.adx-box__tt {
  font-weight: 600;
  font-size: 19px;
  line-height: 150%;
  color: #2F343F;
  margin-bottom: 4px;
}

.adx-stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.adx-stat__item {
  background: rgb(240, 247, 255);
  border-radius: 12px;
  height: 115px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
}
.adx-stat__k {
  font-weight: 400;
  font-size: 13px;
  line-height: 100%;
  text-align: center;
}
.adx-stat__v {
  font-weight: 900;
  font-size: 19px;
  line-height: 100%;
  text-align: center;
  color: rgb(3, 105, 156);
}
.adx-stat__v span {
  font-weight: 400;
  font-size: 13px;
  line-height: 100%;
  text-align: center;
}

.adx-info {
  margin: 0;
  display: grid;
  gap: 2px;
}
.adx-info__row {
  height: 37px;
  border-radius: 8px;
  gap: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  background: rgb(248, 250, 252);
}
.adx-info dt {
  color: rgb(71, 85, 105);
  font-weight: 500;
  font-size: 13px;
  line-height: 100%;
}
.adx-info dd {
  font-size: 15px;
}

.adx-ctl {
  border: 1px solid rgb(186, 218, 255);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  overflow: hidden;
}

.adx-utils {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
}

.adx-btns {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.adx-btn {
  height: 86px;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(204, 219, 237);
  background: #fff;
  color: var(--al-color-text);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.adx-br {
  margin-top: 12px;
  width: 100%;
  height: 55px;
  border-radius: 8px;
  gap: 12px;
  padding: 16px;
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
  background: #fff;
  border: 1px solid rgb(203, 213, 225);
  display: flex;
  align-items: center;
}
.adx-br__lb {
  font-size: 13px;
  color: rgb(15, 23, 42);
}
.adx-br__bar {
  position: relative;
  height: 20px;
  border-radius: 999px;
  background-color: rgb(226, 232, 240);
  border: 1px solid var(--g20, rgb(205, 209, 213));
  flex: 1;
}
.adx-br__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1C8CF4, #1C8CF4);
}
.adx-br__fill::before {
  display: inline-block;
  vertical-align: top;
  content: "";
  width: 16px;
  height: 16px;
  margin: 1px 0 0 4px;
  background: url("../images/sun.svg") no-repeat center center;
}
.adx-br__thumb {
  position: absolute;
  top: 50%;
  left: calc(40% - 9px);
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1C8CF4;
  transform: translateY(-50%);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.adx-br__val {
  min-width: 44px;
  font-size: 19px;
  color: #1C8CF4;
  line-height: 1;
  font-weight: 900;
  text-align: right;
}
.adx-br__val span {
  font-size: 13px;
}

.adx-cap {
  position: relative;
  height: 100%;
  background-color: #f3f6fa;
  margin: 0 -16px;
  border-radius: 0 0 12px 12px;
  background: rgb(240, 247, 255);
  min-height: 554px;
}

.modal-card {
  padding: 24px 32px;
  border: 1px solid #d7e4f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(87, 161, 234, 0.05);
}
.modal-card + .modal-card {
  margin-top: 18px;
}
.modal-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce4ec;
}
.modal-card__title {
  margin: 0;
  font-size: 19px;
  font-weight: bold;
  color: #2d2d2d;
}

.mdm-status-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* listhead / listbody — 8열 상태 이력 */
  /* listhead / listbody — 원격 제어 이력 2열 */
}
.mdm-status-modal .modal-card {
  margin-top: 0;
}
.mdm-status-modal__head-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.mdm-status-modal__head-box {
  min-height: 91px;
  border-radius: 12px;
  border: 1px solid var(--gray-g-20, #E2E8F0);
  background: var(--gray-g-10, #F1F5F9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.mdm-status-modal__head-box p {
  margin: 0;
  font-size: 15px;
  color: #475569;
}
.mdm-status-modal__head-box strong {
  font-size: 17px;
  font-weight: 400;
  color: #1e293b;
}
.mdm-status-modal__data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.mdm-status-modal__block h4 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  height: 48px;
  display: flex;
  align-items: center;
}
.mdm-status-modal__block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mdm-status-modal__block li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  color: #1e293b;
}
.mdm-status-modal__block li span:first-child {
  min-width: 120px;
  font-size: 15px;
  color: #475569;
}
.mdm-status-modal__block li small {
  font-weight: 400 !important;
  font-size: 13px !important;
}
.mdm-status-modal__block li .value .time {
  font-size: 15px;
  color: #475569;
}
.mdm-status-modal .mb-20 {
  margin-bottom: 20px;
}
.mdm-status-modal__block--dashed {
  height: 1px;
  border-top: 1px dashed #cbd5e1;
}
.mdm-status-modal__filter-row {
  background: #f0f7ff;
  border: 1px solid #badaff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  gap: 0 12px;
  align-items: center;
}
.mdm-status-modal .form__date_group {
  display: flex;
  align-items: center;
  gap: 0 10px;
}
.mdm-status-modal .form__date_group > label {
  color: var(--gray-g-80, #1E293B);
  font-family: "Pretendard GOV";
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 25.5px */
  white-space: nowrap;
}
.mdm-status-modal .form__date_group .form__field--date {
  width: 156px;
}
.mdm-status-modal .form__date_group .form__field--time {
  width: 110px;
}
.mdm-status-modal__chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.mdm-status-modal__chart-grid .chart-placeholder {
  min-height: 160px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: rgba(30, 33, 36, 0.5);
}
.mdm-status-modal .divider {
  border-bottom: 1px dashed var(--gray-g-30, #CBD5E1);
  margin: 20px 0;
}
.mdm-status-modal__table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.mdm-status-modal__table-head p {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #1e293b;
}
.mdm-status-modal__table-head strong {
  color: #03699c;
  font-size: 25px;
}
.mdm-status-modal__table-head .form__field {
  width: 122px;
}
.mdm-status-modal .table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mdm-status-modal__history-list {
  min-width: 720px;
}
.mdm-status-modal__history-list .listhead span {
  width: 12.5%;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  vertical-align: middle;
  line-height: 1.35;
  text-align: center;
  background: #f0f7ff;
  border-bottom: 1px solid #cbd5e1;
}
.mdm-status-modal__history-list .listhead span.nowrap {
  white-space: nowrap;
}
.mdm-status-modal__history-list .listbody ul li {
  border-top: 1px solid #e2e8f0;
  align-items: center;
}
.mdm-status-modal__history-list .listbody ul li:first-child {
  border-top: none;
}
.mdm-status-modal__history-list .listbody .table-cell {
  font-size: 15px;
  color: #1e293b;
  text-align: center;
}
.mdm-status-modal__history-list .listbody .table-cell .time-wrap {
  align-items: center;
}
.mdm-status-modal__history-list .listbody .table-cell .unit-value-wrap,
.mdm-status-modal__history-list .listbody .table-cell .unit-text-wrap {
  align-items: center;
}
.mdm-status-modal__remote-history-list {
  min-width: 0;
}
.mdm-status-modal__remote-history-list .listhead {
  table-layout: fixed;
}
.mdm-status-modal__remote-history-list .listhead span {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  vertical-align: middle;
  line-height: 1.35;
  text-align: center;
  background: #f0f7ff;
  border-bottom: 1px solid #cbd5e1;
}
.mdm-status-modal__remote-history-list .listhead span:first-child {
  width: 166px;
}
.mdm-status-modal__remote-history-list .listhead span:last-child {
  width: auto;
}
.mdm-status-modal__remote-history-list .listbody ul.board {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0;
  padding: 0;
  list-style: none;
  border-collapse: collapse;
}
.mdm-status-modal__remote-history-list .listbody ul li {
  display: table-row;
  align-items: center;
}
.mdm-status-modal__remote-history-list .listbody ul.board li:first-child .table-cell {
  border-top: none;
}
.mdm-status-modal__remote-history-list .listbody .table-cell {
  display: table-cell;
  vertical-align: middle;
  font-size: 15px;
  color: #1e293b;
  text-align: center;
}
.mdm-status-modal__remote-history-list .listbody .table-cell:first-child {
  width: 166px;
}
.mdm-status-modal__remote-history-list .listbody .table-cell .time-wrap {
  align-items: center;
}
.mdm-status-modal .time-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mdm-status-modal .time-wrap.inline {
  flex-direction: row;
  gap: 4px;
}
.mdm-status-modal .time-wrap span {
  white-space: nowrap;
}
.mdm-status-modal .time-wrap .time {
  font-size: 15px;
  color: #475569;
}
.mdm-status-modal .unit-value small {
  font-size: 13px;
  color: #475569;
}
.mdm-status-modal .unit-value-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mdm-status-modal .unit-value-wrap .unit-value-desc {
  font-size: 13px;
  color: #475569;
}
.mdm-status-modal .unit-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mdm-status-modal .unit-text-wrap .unit-text {
  font-size: 17px;
  color: #1E293B;
}
.mdm-status-modal .unit-text-wrap .unit-text-desc {
  font-size: 15px;
  color: #475569;
  white-space: nowrap;
}
.mdm-status-modal__remote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.mdm-status-modal__remote-grid > .left,
.mdm-status-modal__remote-grid > .right {
  min-width: 0;
}
.mdm-status-modal__remote-grid > .right {
  border-left: 1px dashed #cbd5e1;
  padding-left: 20px;
}
.mdm-status-modal__remote-grid h4 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  height: 48px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
.mdm-status-modal__command {
  background: #f0f7ff;
  border: 1px solid #badaff;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.mdm-status-modal__simple-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.mdm-status-modal__simple-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  color: #1e293b;
}
.mdm-status-modal__simple-list li span:first-child {
  min-width: 96px;
  color: #475569;
  font-size: 15px;
}
.mdm-status-modal__dashed {
  border-top: 1px dashed #cbd5e1;
  margin: 20px 0;
}
.mdm-status-modal .image-placeholder {
  min-height: 160px;
  border-radius: 12px;
  background: #f4f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(30, 33, 36, 0.5);
  font-size: 32px;
  font-weight: 700;
}

.round-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.round-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.round-list__item .label {
  position: relative;
  color: #475569;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  /* 22.5px */
  padding-left: 14px;
  width: 120px;
  flex-shrink: 0;
  justify-content: flex-start;
}
.round-list__item .label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #CBD5E1;
  width: 8px;
  height: 8px;
}
.round-list__item .danger {
  color: #de3412 !important;
  font-weight: 900 !important;
}
.round-list__item .danger small {
  color: #BD2C0F;
}
.round-list__item .warn {
  font-weight: 900 !important;
  color: #ffb114 !important;
}
.round-list__item .warn small {
  color: #C78500;
}
.round-list__item .value {
  color: #1E293B;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 25.5px */
}

.mdm-scroll {
  max-height: min(60vh, 320px);
  min-height: 0; /* flex 자식일 때 필요할 때 많음 */
}

/* ====== Design tokens ====== */
body {
  min-width: 1280px;
  height: 100vh;
  font-family: "Freesentation", Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, "Malgun Gothic", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.a11y-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ====== Layout ====== */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas: "sidenav topbar" "sidenav content";
  min-height: 100vh;
}

/* ====== Content ====== */
.content {
  grid-area: content;
  min-width: 0;
  background: #f6f7fb;
  padding: 40px;
  height: calc(100vh - 64px);
}

.content--terminal-status {
  background: #eef2f7;
}

.content__empty {
  display: grid;
  place-items: center;
  height: calc(100vh - 64px - 80px);
}

/* Grid */
.dash--grid {
  display: grid;
  gap: 16px;
}
.dash--grid__top {
  grid-template-columns: repeat(3, 1fr);
}
.dash--grid__mid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
}
.dash--grid__bottom {
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}

@media (max-width: 1080px) {
  .dash--grid__top,
  .dash--grid__mid {
    grid-template-columns: 1fr;
  }
  .dash--grid__bottom {
    grid-template-columns: 1fr;
  }
}
.page-header {
  margin-bottom: 40px;
}
.page-header .breadcrumb {
  font-size: 15px;
  color: #9ca3af;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 300;
}
.page-header .breadcrumb a {
  color: #8e8e8e;
  text-decoration: none;
}
.page-header .breadcrumb a:hover {
  text-decoration: underline;
}
.page-header .breadcrumb .current {
  color: #047bb6;
  font-weight: 500;
}
.page-header .breadcrumb .divider {
  font-size: 15px;
  margin: 0 6px;
  line-height: 1;
}
.page-header .page-title {
  font-size: 40px;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

/* Card */
.dash--card {
  background: #ffffff;
  border: 1px solid #dbdee2;
  border-radius: 20px;
  padding: 20px;
}
.dash--card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.dash--card__header .icon-Link {
  border: none;
  background: transparent;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  background-image: url("../images/ico-arrow.png");
  background-repeat: no-repeat;
  background-position: center;
}
.dash--card__header .icon-Link.blue {
  background-color: #047bb6;
}
.dash--card__header .icon-Link.green {
  background-color: #80b249;
}
.dash--card__header .icon-Link.purple {
  background-color: #8081da;
}
.dash--card__header .util {
  display: flex;
  gap: 10px;
}
.dash--card__header .util select.mw150 {
  width: 150px;
}
.dash--card__header .util .icon-refresh {
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px;
  border: 1px solid #cccccc;
  background-color: #fff;
  background-image: url("../images/ico-refresh4.png");
}
.dash--card__header .util .icon-refresh:hover {
  background-color: #f6f7fb;
}
.dash--card__title {
  margin: 0;
  font-size: 21px;
  color: #1e1f24;
  font-weight: 500;
}
.dash--card.stats--blue {
  background: #eff6ff;
  border: 1px solid #c9def7;
}
.dash--card.stats--green {
  background: #f2f7ec;
  border: 1px solid #d1e5ba;
}
.dash--card.stats--purple {
  background: #f3f2fc;
  border: 1px solid #d7d6ef;
}
.dash--card .stat.blue {
  background: #dcedfa;
}
.dash--card .stat.green {
  background: #e4f1d4;
}
.dash--card .stat.purple {
  background: #e6e4f4;
}

/* Stats */
.stats__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stats__row.grid-four {
  grid-template-columns: repeat(4, 1fr);
}
.stats__row.grid-six {
  grid-template-columns: repeat(6, 1fr);
}
.stats__row.grid-seven {
  grid-template-columns: repeat(7, 1fr);
}

.stats__row--tight {
  gap: 8px;
}

.stat {
  background: #e9f0ff;
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(20, 30, 60, 0.08);
  padding: 16px;
  text-align: center;
}
.stat__label {
  font-size: 15px;
  color: #717171;
  margin-bottom: 10px;
}
.stat__value {
  font-size: 25px;
  font-weight: 700;
  color: #1d1d1d;
}
.stat__unit {
  font-size: 15px;
  font-weight: 300;
  margin-left: 4px;
  color: #1d1d1d;
}

/* Bus List */
.buses .bus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.bus-item {
  background: #ffffff;
  border: 1px solid #dbdee2;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(20, 30, 60, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.bus-item__icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: #e3effb;
  border-radius: 50%;
  background-image: url("../images/ico-blue-bus.png");
  background-repeat: no-repeat;
  background-position: center;
}
.bus-item__meta {
  flex: 1;
  min-width: 0;
}
.bus-item__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 300;
  color: #1e1f24;
  margin-bottom: 15px;
}
.bus-item__desc {
  display: flex;
  align-content: center;
  color: #9aa0ad;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  gap: 20px;
  font-weight: 300;
}
.bus-item__desc dl {
  display: flex;
  gap: 3px;
}
.bus-item__desc dl dt {
  color: #888888;
}
.bus-item__desc dl dd {
  color: #1d1d1d;
}
.bus-item .sep {
  color: #e7e9f1;
}
.bus-item .badge {
  display: inline-flex;
  padding: 5px 7px 5px 25px;
  border-radius: 999px;
  font-weight: 300;
  font-size: 13px;
  background: #f7ebed;
  color: #db434c;
  background-image: url("../images/ico-dash-time.png");
  background-repeat: no-repeat;
  background-position: 9px center;
}

/* Segmented */
.seg {
  display: flex;
  border: 1px solid #d8d8d8;
  border-radius: 5px;
}

.seg__btn {
  padding: 6px 12px;
  border-radius: 5px;
  border: none;
  background: #fff;
  color: #aaaaaa;
  font-weight: 300;
  font-size: 15px;
  cursor: pointer;
  border-left: 1px solid #d8d8d8;
}
.seg__btn:first-child {
  border-left: none;
  border-radius: 5px 0 0 5px;
}
.seg__btn:last-child {
  border-radius: 0 5px 5px 0;
}
.seg__btn--active {
  background: #047bb6;
  border-color: #047bb6;
  color: #fff;
}

/* Alerts */
.alert-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}
.alert-list .alert-item {
  background: #ffffff;
  border-top: 1px solid #e7e9f1;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px;
  cursor: pointer;
}
.alert-list .alert-item .alert-item__text {
  color: #1e1f24;
  font-weight: 500;
  font-size: 17px;
}

/* Incidents */
.incident-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}
.incident-list .incident-item {
  background: #ffffff;
  border-top: 1px solid #e7e9f1;
  display: flex;
  align-items: center;
  padding: 20px;
}
.incident-list .incident-item__type {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #000000;
  margin-right: 15px;
  border-radius: 15px;
}
.incident-list .incident-item__type.warning {
  background: #fff2cf;
}
.incident-list .incident-item__type.warning i {
  background: #f3c950;
}
.incident-list .incident-item__type.danger {
  background: #fef1f8;
}
.incident-list .incident-item__type.danger i {
  background: #e252a7;
}
.incident-list .incident-item__type.info {
  background: #fef1f8;
}
.incident-list .incident-item__type.info i {
  background: #8180e0;
}
.incident-list .incident-item__type.alert {
  background: #fff1f1;
}
.incident-list .incident-item__type.alert i {
  background: #e54e57;
}
.incident-list .incident-item__type.success {
  background: #eafff0;
}
.incident-list .incident-item__type.success i {
  background: #56946e;
}
.incident-list .incident-item__bus {
  color: #2d2d2d;
  font-size: 17px;
}
.incident-list .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 15px;
  border-radius: 18px;
}
.chip i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.chart-area {
  border-radius: 10px;
  background: #fff;
  border: 1px solid #c6c6c6;
  margin-bottom: 20px;
}

.dash-flex {
  display: flex;
  gap: 20px;
}
.dash-flex .dash-flex-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dash-flex .dash-flex-col.terminal-first {
  flex: 0 0 650px;
}
.dash-flex .dash-flex-col.terminal-first .dash--card {
  height: 403px;
}
.dash-flex .dash-flex-col.terminal-second {
  min-width: 850px;
  flex: 1;
}
.dash-flex .dash-flex-col.terminal-second .dash--card + .dash--card {
  flex: 1;
}
.dash-flex .dash-flex-col.unexpected-first {
  flex: 0 0 520px;
}
.dash-flex .dash-flex-col.unexpected-first .dash--card {
  height: 826px;
  border: 1px solid #c9def7;
  background: #eff6ff;
}
.dash-flex .dash-flex-col.unexpected-first .dash--card__con {
  height: calc(100% - 45px);
}
.dash-flex .dash-flex-col.unexpected-second {
  min-width: 850px;
  flex: 1;
}
.dash-flex .dash-flex-col.unexpected-second .dash--grid {
  flex: 1;
}
.dash-flex.route {
  height: calc(100% - 128px);
}
.dash-flex.route .dash--card {
  flex: 1;
  height: 100%;
}
.dash-flex.route .dash--card .dash--card__con {
  overflow: hidden;
  height: 100%;
}
.dash-flex.route .route--fir--card {
  flex: 0 0 250px;
  min-width: 200px;
}
.dash-flex.route .route--second--card,
.dash-flex.route .route--thr--card {
  min-width: 320px;
}

.dashcard--alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.dashcard--alert__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-image: url("../images/ico-unexpected.png");
}
.dashcard--alert__content {
  flex: 1;
  margin-left: 12px;
}
.dashcard--alert__content .plate {
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 4px;
}
.dashcard--alert__content .info {
  font-size: 17px;
  color: #333;
}
.dashcard--alert__content .info .label {
  color: #666;
  margin-right: 4px;
}
.dashcard--alert__content .info .bold {
  font-weight: 600;
}
.dashcard--alert__content .info p {
  margin: 2px 0;
}
.dashcard--alert__status {
  background: #ffeaea;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: fit-content;
  white-space: nowrap;
}
.dashcard--alert__status .dot {
  width: 8px;
  height: 8px;
  background: #d32f2f;
  border-radius: 50%;
  display: inline-block;
}
.dashcard--alert + .dashcard--alert {
  margin-top: 20px;
}

.dash-transport {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: calc(100% - 80px);
}
.dash-transport .dash-flex + .dash-flex {
  height: calc(100% - 100px);
  overflow: hidden;
}
.dash-transport .dash-flex + .dash-flex .dash--card {
  flex: 1;
  min-width: 500px;
}
.dash-transport .dash-flex + .dash-flex .dash--card + .dash--card {
  flex: 0 0 300px;
  min-width: 300px;
}
.dash-transport .dash-flex + .dash-flex .dash--card .dash--card__con {
  height: 100%;
}

/* 단말기 현황 — 디자인 목업 정합 */
.terminal-status-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: calc(100vh - 64px - 200px);
  color: #333333;
}
.terminal-status-page .dash--card {
  border-radius: 12px;
  border-color: #d8dde6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.terminal-status-page__row {
  display: flex;
  align-items: stretch;
  gap: 20px;
  flex: 1;
  min-height: 680px;
}
.terminal-status-page__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.terminal-status-page__col--charts {
  flex: 0 0 22%;
  max-width: 320px;
  min-width: 260px;
}
.terminal-status-page__col--map {
  flex: 1;
}
.terminal-status-page__col--table {
  flex: 0 0 400px;
}
.terminal-status-page .terminal-chart-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.terminal-status-page .terminal-chart-card .dash--card__header {
  margin-bottom: 10px;
}
.terminal-status-page .terminal-chart-card .dash--card__title {
  font-size: 18px;
  font-weight: 600;
}
.terminal-status-page .terminal-chart-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.terminal-status-page .terminal-chart-card__plot {
  flex: 1;
  min-height: 120px;
  margin-bottom: 0 !important;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #8a93a3;
  background: #e8ecf2 !important;
  border-color: #d8dde6 !important;
  border-radius: 10px;
}
.terminal-status-page .terminal-map-card.dash--card {
  flex: 1;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.terminal-status-page .terminal-map {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  position: relative;
}
.terminal-status-page .terminal-map__body {
  position: relative;
  flex: 1;
  min-height: 0;
}
.terminal-status-page .terminal-map__notice {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  border: 1px solid #000;
}
.terminal-status-page .terminal-map__notice span {
  color: #fff;
  font-size: 17px;
}
.terminal-status-page .terminal-map__notice-close-wrap {
  position: absolute;
  top: 8px;
  right: 10px;
}
.terminal-status-page .terminal-map__notice-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  cursor: pointer;
  background: url("../images/ico-close.png") no-repeat center center;
}
.terminal-status-page .terminal-map__legend {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 10px;
  top: auto;
  width: 120px;
  padding: 10px;
  background: #fff;
  border: 1px solid #1d1d1d;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.terminal-status-page .terminal-map__legend-title {
  margin: 10px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1d;
}
.terminal-status-page .terminal-map__legend-title:first-child {
  margin-top: 0;
}
.terminal-status-page .terminal-map__legend-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.terminal-status-page .terminal-map__legend-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.25;
  font-size: 13px;
  color: #555555;
}
.terminal-status-page .terminal-map__legend-list li + li {
  margin-top: 8px;
}
.terminal-status-page .terminal-map__legend-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 4px;
}
.terminal-status-page .terminal-map__legend-list li span.c-ok {
  background-color: #228738;
}
.terminal-status-page .terminal-map__legend-list li span.c-warn {
  background-color: #90a84a;
}
.terminal-status-page .terminal-map__legend-list li span.c-serious {
  background-color: #f3c950;
}
.terminal-status-page .terminal-map__legend-list li span.c-crit {
  background-color: #e54e57;
}
.terminal-status-page .term-legend-svg {
  background-image: url("../images/ico-legend-ok.png");
}
.terminal-status-page .term-legend-battery {
  background-image: url("../images/ico-legend-ico.png");
}
.terminal-status-page .term-legend-temp {
  background-image: url("../images/ico-legend-temp.png");
}
.terminal-status-page .terminal-map__canvas {
  position: absolute;
  inset: 0;
}
.terminal-status-page .terminal-map__marker {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 12px;
  border: 2px solid #fff;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.terminal-status-page .terminal-map__marker.type-svg {
  background-image: url("../images/ico-legend-ok.png");
}
.terminal-status-page .terminal-map__marker.type-temp {
  background-image: url("../images/ico-legend-temp.png");
}
.terminal-status-page .terminal-map__marker--a {
  background-color: #28a745;
}
.terminal-status-page .terminal-map__marker--b {
  background-color: #ffc107;
}
.terminal-status-page .terminal-map__marker--c {
  background-color: #dc3545;
}
.terminal-status-page .terminal-map__marker--d {
  background-color: #90a84a;
}
.terminal-status-page .terminal-map__popup {
  position: absolute;
  left: 52%;
  top: 36%;
  z-index: 3;
  min-width: 132px;
  padding: 10px;
  background: #fff;
  border: 1px solid #bfbfbf;
  border-radius: 8px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16);
}
.terminal-status-page .terminal-map__popup::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  transform: translateX(-50%) rotate(45deg);
}
.terminal-status-page .terminal-map__popup-title {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 10px;
  color: #222;
  line-height: 1.2;
}
.terminal-status-page .terminal-map__popup-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
}
.terminal-status-page .terminal-map__popup-label {
  font-size: 15px;
  color: #717171;
  line-height: 1.2;
}
.terminal-status-page .terminal-map__popup-value {
  font-size: 15px;
  color: #717171;
  line-height: 1.2;
}
.terminal-status-page .terminal-table-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.terminal-status-page .terminal-table-card__body {
  flex: 1;
  min-height: 0;
}
.terminal-status-page .terminal-status-tbl {
  margin-bottom: 0;
}
.terminal-status-page .terminal-status-tbl table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
}
.terminal-status-page .terminal-status-tbl thead th {
  background: #3374c4;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  border: none;
  padding: 10px 14px;
}
.terminal-status-page .terminal-status-tbl__h--time {
  text-align: center;
}
.terminal-status-page .terminal-status-tbl tbody td {
  vertical-align: middle;
  font-size: 15px;
  padding: 17px 14px;
  border: none;
  border-bottom: 1px solid #eeeeee;
  background: #fff;
}
.terminal-status-page .terminal-status-tbl tbody tr:last-child td {
  border-bottom: none;
}
.terminal-status-page .terminal-status-tbl .terminal-status-tbl__row {
  cursor: pointer;
}
.terminal-status-page .terminal-status-tbl .terminal-status-tbl__row:hover td {
  background: #f5f8fc;
}
.terminal-status-page .terminal-status-tbl__cell--id {
  text-align: left;
}
.terminal-status-page .terminal-status-tbl__cell--state {
  text-align: center;
}
.terminal-status-page .terminal-status-tbl__cell--time {
  text-align: right;
}
.terminal-status-page .term-cell-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.terminal-status-page .term-cell-id__code {
  font-weight: 700;
  color: #2d2d2d;
  line-height: 1.2;
}
.terminal-status-page .term-battery {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.terminal-status-page .term-battery__pct {
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}
.terminal-status-page .term-battery__graphic {
  width: 20px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.terminal-status-page .term-battery__graphic--ok {
  background-image: url("../images/ico-battery-ok.png");
}
.terminal-status-page .term-battery__graphic--ok + .term-battery__pct {
  color: #56946e;
}
.terminal-status-page .term-battery__graphic--warn {
  background-image: url("../images/ico-battery-warn.png");
}
.terminal-status-page .term-battery__graphic--warn + .term-battery__pct {
  color: #f3c950;
}
.terminal-status-page .term-battery__graphic--crit {
  background-image: url("../images/ico-battery-crit.png");
}
.terminal-status-page .term-battery__graphic--crit + .term-battery__pct {
  color: #e54e57;
}
.terminal-status-page .term-battery__shell {
  display: block;
  width: 18px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
  box-sizing: border-box;
  position: relative;
  background: transparent;
}
.terminal-status-page .term-battery__shell::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 2px;
  width: 2px;
  height: 4px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}
.terminal-status-page .term-battery__bolt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%) scale(0.85);
  pointer-events: none;
}
.terminal-status-page .term-battery--charge .term-battery__bolt {
  display: block;
}
.terminal-status-page .term-battery:not(.term-battery--charge) .term-battery__bolt {
  display: none;
}
.terminal-status-page .term-battery--empty .term-battery__shell {
  background: transparent;
}
.terminal-status-page .term-time {
  display: inline-block;
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}
.terminal-status-page .term-time__date {
  color: #333;
}
.terminal-status-page .term-time__hm {
  color: #999;
}
.terminal-status-page .term-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  color: #222;
}
.terminal-status-page .term-state__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.terminal-status-page .term-state--ok {
  background: #e6f4ea;
}
.terminal-status-page .term-state--ok .term-state__dot {
  background: #28a745;
}
.terminal-status-page .term-state--warn {
  background: #fff8e1;
}
.terminal-status-page .term-state--warn .term-state__dot {
  background: #f3c950;
}
.terminal-status-page .term-state--off {
  background: #ffebee;
}
.terminal-status-page .term-state--off .term-state__dot {
  background: #e54e57;
}
.terminal-status-page__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: #eff6ff;
  border: 1px solid #c9def7;
  border-radius: 20px;
  font-size: 21px;
  color: #1d1d1d;
}
.terminal-status-page .terminal-summary__stats {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}
.terminal-status-page .terminal-summary__stat {
  width: 250px;
  height: 58px;
  background: #dcedfa;
  padding: 0 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.terminal-status-page .terminal-summary__stat-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #717171;
  font-size: 15px;
  gap: 5px;
}
.terminal-status-page .terminal-summary__stat-ico span {
  color: #717171;
}
.terminal-status-page .terminal-summary__stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.terminal-status-page .terminal-summary__stat-value {
  font-weight: 700;
  font-size: 25px;
  color: #1d1d1d;
}
.terminal-status-page .terminal-summary__unit {
  font-weight: 500;
  font-size: 15px;
}
.terminal-status-page .terminal-summary__updated {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 17px;
  color: #717171;
  font-weight: 600;
}
.terminal-status-page .terminal-summary__updated span {
  color: #717171;
}
.terminal-status-page .terminal-summary__clock {
  display: flex;
}

/* 단말 제어 팝업 (단말기 현황) */
.modal--terminal-control.modal .modal-dialog.terminal-control-dialog {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-width: 0;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 48px);
  overflow: visible;
}

.terminal-control {
  background: #ecf0f2;
  border: 1px solid #0b427c;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  font-family: inherit;
  color: #333;
}
.terminal-control__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0px 20px;
  background: #004080;
  height: 55px;
  border-radius: 16px 16px 0 0;
}
.terminal-control__heading {
  margin: 0;
  font-size: 19px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
}
.terminal-control__close {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 0;
  background: url("../images/modal-close2.png") no-repeat center center;
}
.terminal-control__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.terminal-control__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.terminal-control__card {
  background: #fff;
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  min-height: 88px;
  justify-content: center;
}
.terminal-control__card-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  line-height: 1.2;
}
.terminal-control__card-value {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
}
.terminal-control__card-value--battery {
  color: #e53935;
}
.terminal-control__card-value--temp {
  color: #6d7c32;
}
.terminal-control__card-value--ok {
  color: #2e7d32;
}
.terminal-control__section {
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.terminal-control__section-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.terminal-control__section--maint .terminal-control__section-title {
  margin-bottom: 10px;
}
.terminal-control__quick {
  border-radius: 12px;
  background-color: #e8e8e8;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  margin: 0 -15px -15px;
  min-height: 250px;
  position: relative;
}
.terminal-control__quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
}
.terminal-control__action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px;
  padding-right: 26px;
  background: #fff;
  border: 1px solid #dbdee2;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1d;
}
.terminal-control__action-ico {
  display: flex;
  color: #1976d2;
}
.terminal-control__action-label {
  text-align: center;
  line-height: 1.25;
}
.terminal-control__brightness {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  padding: 10px 5px;
  border: 1px solid #dbdee2;
  position: absolute;
  top: 60px;
  left: 12px;
  right: 12px;
}
.terminal-control__brightness-label {
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1d;
  flex-shrink: 0;
}
.terminal-control__brightness-icon-slot {
  width: 12px;
  height: 12px;
  display: inline-block;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: url("../images/ico-brightness.png") no-repeat center center;
  background-size: contain;
}
.terminal-control__brightness-track {
  flex: 1;
  min-width: 0;
}
.terminal-control__brightness-pct {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 900;
  color: #047bb6;
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
}
.terminal-control__brightness-pct span {
  color: #1d1d1d;
  font-size: 13px;
  font-weight: 600;
}
.terminal-control__brightness-bar {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #bfcbd7;
  background: #d6dde4;
}
.terminal-control__brightness-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #047bb6;
  border-radius: 999px;
}
.terminal-control__brightness-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #047bb6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 3;
}
.terminal-control__brightness-thumb:active {
  cursor: grabbing;
}
.terminal-control__divider {
  height: 1px;
  background: #d8d8d8;
  margin: 0 0 20px;
}
.terminal-control__dl {
  margin: 0;
}
.terminal-control__dl-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  padding-left: 12px;
}
.terminal-control__dl-row:last-child {
  margin-bottom: 0;
}
.terminal-control__dl-row dt {
  margin: 0;
  flex: 0 0 100px;
  color: #717171;
  font-weight: 500;
  font-size: 15px;
}
.terminal-control__dl-row dd {
  margin: 0;
  flex: 1;
  color: #222;
  font-size: 17px;
  font-weight: 600;
}

@media (max-width: 520px) {
  .terminal-control__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}