/* ==========================================================================
   오케이로지웰 OMS 브랜드 테마
   - 로고 컬러: 네이비(#2e2a4d) + 레드(#cd0e2e)
   - 로고의 셰브론(») 모티프를 카드 헤더/네비게이션 포인트로 사용
   ========================================================================== */

:root {
  --ok-navy: #2e2a4d;
  --ok-navy-soft: #443e6e;
  --ok-navy-deep: #201d38;
  --ok-red: #cd0e2e;
  --ok-red-soft: #e8394f;
  --ok-bg: #f3f4f9;
  --ok-ink: #26233f;
  --ok-line: #e7e9f2;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  /* 세로 스크롤바가 나타나고 사라질 때 콘텐츠 폭이 출렁이지 않게 자리를 고정한다.
     그리드(fitColumns)가 "행 렌더 → 스크롤바 생김 → 폭 감소 → 재계산 → 스크롤바 사라짐 → 폭 증가"
     레이아웃 진동에 빠져 렌더가 끝나지 않던 문제의 촉매 제거. */
  scrollbar-gutter: stable;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

body {
  margin-bottom: 64px; /* 고정 푸터 높이만큼 */
  background: var(--ok-bg);
  color: var(--ok-ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, .card-header.fw-bold {
  color: var(--ok-navy);
  font-weight: 700;
}

a {
  color: var(--ok-navy-soft);
}

a:hover {
  color: var(--ok-red);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(46, 42, 77, 0.4);
}

.form-control:focus, .form-select:focus {
  border-color: var(--ok-navy-soft);
  box-shadow: 0 0 0 0.2rem rgba(46, 42, 77, 0.12);
}

.form-check-input:checked {
  background-color: var(--ok-navy);
  border-color: var(--ok-navy);
}

/* ----- 버튼: 브랜드 네이비/레드 ----- */

.btn-primary {
  --bs-btn-bg: var(--ok-navy);
  --bs-btn-border-color: var(--ok-navy);
  --bs-btn-hover-bg: var(--ok-navy-soft);
  --bs-btn-hover-border-color: var(--ok-navy-soft);
  --bs-btn-active-bg: var(--ok-navy-deep);
  --bs-btn-active-border-color: var(--ok-navy-deep);
  --bs-btn-disabled-bg: var(--ok-navy);
  --bs-btn-disabled-border-color: var(--ok-navy);
}

.btn-outline-primary {
  --bs-btn-color: var(--ok-navy);
  --bs-btn-border-color: var(--ok-navy);
  --bs-btn-hover-bg: var(--ok-navy);
  --bs-btn-hover-border-color: var(--ok-navy);
  --bs-btn-active-bg: var(--ok-navy-deep);
  --bs-btn-active-border-color: var(--ok-navy-deep);
}

.btn-danger, .btn-outline-danger {
  --bs-btn-color: var(--ok-red);
  --bs-btn-border-color: var(--ok-red);
  --bs-btn-hover-bg: var(--ok-red);
  --bs-btn-hover-border-color: var(--ok-red);
  --bs-btn-active-bg: #a50b25;
  --bs-btn-active-border-color: #a50b25;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ok-red);
}

/* ----- 상단 네비게이션 ----- */

.navbar-ok {
  background: var(--ok-navy);
  border-top: 4px solid var(--ok-red);
  box-shadow: 0 2px 14px rgba(32, 29, 56, 0.28);
}

.navbar-ok .navbar-brand {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.navbar-ok .brand-oms {
  color: var(--ok-red-soft);
  font-weight: 800;
}

.navbar-ok .nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  padding: 0.9rem 1rem;
}

.navbar-ok .nav-link:hover,
.navbar-ok .nav-link.active {
  color: #fff;
}

.navbar-ok .nav-link.active::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--ok-red-soft);
}

.navbar-ok .navbar-user {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}

/* 사용자 이름 = 내 정보 링크 */
.navbar-ok .navbar-user a {
  color: inherit;
  text-decoration: none;
}

.navbar-ok .navbar-user a:hover {
  color: #fff;
  text-decoration: underline;
}

/* 접힌 메뉴(모바일): 사용자 영역을 한 줄(이름 좌 / 로그아웃 우)로 정리하고 메뉴와 구분선.
   좌우 패딩 1rem = nav-link 텍스트 시작 위치와 정렬 */
@media (max-width: 575.98px) {
  .navbar-ok .navbar-user-area {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem 0.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
}

/* ----- 카드: 라운드 + 부드러운 그림자, 헤더에 셰브론 마커 ----- */

.card {
  border: 0;
  border-radius: 0.9rem;
  box-shadow: 0 1px 2px rgba(32, 29, 56, 0.05), 0 10px 28px -14px rgba(32, 29, 56, 0.22);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #fff;
  border-bottom: 1px solid var(--ok-line);
  border-radius: 0.9rem 0.9rem 0 0 !important;
  padding: 0.8rem 1rem;
}

/* 로고의 셰브론(») 을 섹션 마커로 */
.card-header.fw-bold::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 14px;
  background: var(--ok-red);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}

/* ----- 테이블 ----- */

.table {
  --bs-table-striped-bg: #f6f7fc;
  --bs-table-hover-bg: #edeff8;
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(32, 29, 56, 0.05), 0 10px 28px -14px rgba(32, 29, 56, 0.18);
}

.table thead th {
  background: var(--ok-navy);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  border-color: var(--ok-navy-soft);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.table > :not(caption) > * > * {
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

/* ----- 푸터 ----- */

.footer-ok {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  background: var(--ok-navy-deep);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
}

.footer-ok .footer-slogan {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 700;
}

.footer-ok .footer-slogan::before {
  content: "";
  width: 8px;
  height: 12px;
  background: var(--ok-red-soft);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}

/* ----- 대시보드 히어로 ----- */

.hero-ok {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  padding: 2.2rem 2.4rem;
  background: linear-gradient(115deg, var(--ok-navy-deep) 0%, var(--ok-navy) 55%, var(--ok-navy-soft) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -16px rgba(32, 29, 56, 0.55);
}

.hero-ok h1 {
  color: #fff;
  font-weight: 800;
}

.hero-ok .hero-slogan {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--ok-red-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-ok .hero-slogan::before {
  content: "";
  width: 9px;
  height: 14px;
  background: var(--ok-red-soft);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}

/* 히어로 오른쪽의 큰 셰브론 장식 (로고 모티프) */
.hero-ok::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -3rem;
  width: 46%;
  height: 140%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    linear-gradient(rgba(205, 14, 46, 0.35), rgba(205, 14, 46, 0.35));
  background-size: 48% 100%, 48% 100%;
  background-position: right center, left center;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 30% 0, 60% 50%, 30% 100%, 0 100%, 30% 50%);
  pointer-events: none;
}

/* 대시보드 바로가기 카드 */
.quick-card {
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(32, 29, 56, 0.08), 0 18px 34px -14px rgba(32, 29, 56, 0.3);
}

.quick-card .quick-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: rgba(46, 42, 77, 0.08);
  color: var(--ok-navy);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

/* 대시보드 상태 요약 카드 (클릭 시 해당 조건의 화물 목록으로) */
.stat-card {
  border-left: 4px solid var(--ok-navy);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(32, 29, 56, 0.08), 0 18px 34px -14px rgba(32, 29, 56, 0.3);
}

.stat-card .stat-label {
  color: #6c6a80;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.stat-card .stat-value {
  color: var(--ok-navy);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-card .stat-unit {
  font-size: 0.95rem;
  font-weight: 400;
  color: #6c6a80;
  margin-left: 0.25rem;
}

/* 모바일 목록 카드 (화물/거래처 — 좁은 화면에서 그리드 대체) */
.row-card {
  color: inherit;
  cursor: pointer;
}

.row-card:active {
  background: rgba(46, 42, 77, 0.05);
}

/* ----- 로그인 ----- */

.login-wrap {
  display: flex;
  justify-content: center;
  padding: 3.5rem 0 2rem;
}

.login-card {
  width: 100%;
  max-width: 420px;
}

.login-brand {
  font-weight: 800;
  color: var(--ok-navy);
  letter-spacing: -0.02em;
}

.login-brand .brand-oms {
  color: var(--ok-red);
}

.login-slogan {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #8a8798;
  font-weight: 600;
}

.login-slogan::before {
  content: "";
  width: 8px;
  height: 12px;
  background: var(--ok-red);
  clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}

/* ----- Tabulator 그리드 — 기존 테이블과 동일한 브랜드 룩 ----- */

.tabulator {
  border: 0;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(32, 29, 56, 0.05), 0 10px 28px -14px rgba(32, 29, 56, 0.18);
  /* 테마(tabulator_bootstrap5)가 16px 를 하드코딩 — 본문과 동일한 앱 기준(1rem = 15px)으로 통일 */
  font-size: 1rem;
}

.tabulator .tabulator-header {
  background: var(--ok-navy);
  border-bottom: 0;
  border-radius: 0.75rem 0.75rem 0 0;
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--ok-navy);
  color: #fff;
  border-right: 1px solid var(--ok-navy-soft);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  font-weight: 600;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background: var(--ok-navy-soft);
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter {
  color: rgba(255, 255, 255, 0.75);
}

.tabulator .tabulator-header .tabulator-col.tabulator-moving {
  background: var(--ok-navy-deep);
  border: 1px solid var(--ok-red);
}

/* 그리드 글자 크기([가−]/[가＋], ok-grid.js data-grid-font)에 행·헤더 높이가 따라오도록
   테마·부트스트랩의 px/rem 고정값을 em 으로 전환 — 기본 크기(그리드 폰트 1rem = 15px)에선 기존과 픽셀 동일.
   12px = 0.8em, btn-sm 폰트 0.875rem = 0.875em, btn-sm 패딩 3.75px/7.5px = 버튼 폰트 기준 0.2857em/0.5714em. */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 0.8em;
}

.tabulator .tabulator-row .tabulator-cell {
  padding: 0.8em;
}

.tabulator .tabulator-cell .btn {
  font-size: 0.875em;
  padding: 0.2857em 0.5714em;
}

.tabulator .tabulator-row.tabulator-row-even {
  background-color: #f6f7fc;
}

.tabulator .tabulator-row:hover {
  background-color: #edeff8;
}

.tabulator .tabulator-placeholder .tabulator-placeholder-contents {
  color: #8a8798;
  font-size: 0.95rem;
}

.tabulator-menu .tabulator-menu-item {
  padding: 0.35rem 0.75rem;
}

/* 헤더 필터 — [필터] 토글로 표시/숨김. 꺼진 상태는 헤더에서 필터 행 자체를 제거해 높이를 되돌린다. */
.tabulator .tabulator-header .tabulator-header-filter {
  margin-top: 0.3rem;
}

.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select {
  border-radius: 0.35rem;
  border: 1px solid var(--ok-navy-soft);
  font-weight: 400;
}

#orderGrid.ok-grid-filters-hidden .tabulator-header-filter,
#partnerGrid.ok-grid-filters-hidden .tabulator-header-filter {
  display: none !important;
}

/* Excel 스타일 다중 체크 필터(okCheckFilter) — 패널은 [컬럼 설정](.ok-grid-colpicker) 스타일을 공유,
   입력란은 읽기 전용(클릭 = 패널 열기), (전체) 항목은 구분선으로 분리 */
.tabulator .tabulator-header .tabulator-header-filter input[readonly] {
  cursor: pointer;
  background: #fff;
}

.ok-grid-checkfilter .ok-grid-checkfilter-all {
  border-bottom: 1px solid #e4e2ee;
  border-radius: 0.35rem 0.35rem 0 0;
  margin-bottom: 0.2rem;
}

/* 목록 페이지(그리드 화면)는 PC 에서 화면 폭의 80% 를 차지 — 타이틀/검색 폼/칩/그리드가 같은 폭으로 정렬.
   각 구간의 부트스트랩 기본 max-width 를 하한으로 유지해(80vw 가 더 좁으면 기존 폭) 좁은 데스크톱에선 기존과 동일. */
@media (min-width: 992px) {
  .container.container-wide {
    max-width: max(960px, 80vw);
  }
}
@media (min-width: 1200px) {
  .container.container-wide {
    max-width: max(1140px, 80vw);
  }
}
@media (min-width: 1400px) {
  .container.container-wide {
    max-width: max(1320px, 80vw);
  }
}

/* ===== 위치/주소 검색 모달 (화물 등록/수정, 거래처 상세 공용) ===== */
.location-search-results {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--ok-line);
  border-radius: 0.5rem;
}

/* ===== 상세 모달 (htmx) ===== */
/* PC 에서 상세 카드(2단)가 넉넉히 보이도록 기본 모달보다 넓게 — 화면 중앙 표시 */
.detail-actions .btn {
  /* 상세 헤더·모달 푸터 버튼 — 좁은 폭에서 flex 가 버튼을 줄여 한글이 세로로 쪼개지지 않게 (bootstrap 5 .btn 은 nowrap 이 아님) */
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  /* 모바일에선 버튼 좌우 여백을 줄여 한 줄에 더 들어가게 (px-4 는 bootstrap 이 !important 라 같은 강도로 덮는다) */
  .detail-actions .btn.px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* 경유지 표(등록 폼·상세 공용) — 모바일에선 6~7열을 화면 폭에 억지로 눌러 글자가 세로로 쪼개지므로
   열을 누르지 않고(nowrap) 감싼 .table-responsive 가 가로 스크롤을 내게 한다. 주소만 최소 폭을 두고 줄바꿈 허용. */
@media (max-width: 767.98px) {
  .waypoint-table th,
  .waypoint-table td {
    white-space: nowrap;
  }

  .waypoint-table td:nth-child(2) {
    min-width: 14rem;
    white-space: normal;
  }
}

.detail-modal {
    max-width: min(1200px, 95vw);
}

/* 상세 카드의 정의 목록: 값이 빈 dd 는 높이 0으로 접혀 행 높이가 라벨만 남는다 —
   좌우 카드(출발지/도착지 등)의 같은 행이 빈 값 유무에 따라 어긋나는 원인.
   빈 dd 도 한 줄 높이를 차지하게 해 행 높이를 균일하게 유지한다. */
.card-body dl.row dd {
  min-height: 1.5em;
}

/* ===== 화물 목록 상태별 건수 칩 ===== */
.status-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ok-line);
  box-shadow: 0 1px 2px rgba(32, 29, 56, 0.05);
  font-size: 0.85rem;
  line-height: 1;
  color: var(--ok-ink);
  white-space: nowrap;
}

.status-chip b {
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* 숫자 폭 고정 — 갱신 시 칩 폭 출렁임 방지 */
}

.status-chip .dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
}

.status-chip.is-zero {
  opacity: 0.45;
}

.status-chip-total {
  background: var(--ok-navy);
  border-color: var(--ok-navy);
  color: #fff;
}

/* 상하차지 즐겨찾기 ☆ — 카드 헤더 우측 / 검색 결과 행 우측.
   색은 부트스트랩 유틸리티(text-warning 등)에 맡기지 않고 여기서 못 박는다 —
   btn-link 의 기본 색과 특이성 경합이 생기지 않게. 켜짐 상태는 .is-on (JS 토글) */
.favorite-star,
.favorite-star:hover,
.favorite-star:focus {
  text-decoration: none;
  color: var(--bs-secondary-color);
}

.favorite-star.is-on,
.favorite-star:hover {
  color: #ffc107;
}

/* 상하차지 "위치 보기" 📍 — 카드 헤더 우측(등록 폼은 ☆ 옆, 상세는 단독). 색은 favorite-star 와 같은 이유로 여기서 고정 */
.location-map-btn,
.location-map-btn:hover,
.location-map-btn:focus {
  text-decoration: none;
  color: var(--ok-navy-soft);
}

.location-map-btn:hover {
  color: var(--ok-red);
}

/* 위치 검색 모달 탭 — 즐겨찾기/최근 추가로 4개가 되면서 좁은 화면(375px)에서 두 줄로 꺾인다.
   줄바꿈 대신 한 줄 유지 + 가로 스크롤 (스크롤바는 숨김 — 탭 스와이프가 자연스러운 모바일 관례) */
#locationSearchModal .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

#locationSearchModal .nav-tabs::-webkit-scrollbar {
  display: none;
}

#locationSearchModal .nav-tabs .nav-item {
  flex-shrink: 0;
}

/* 즐겨찾기 사용처 배지 (출발지·도착지·경유 상차·경유 하차) — 클릭하면 아래에 토글 편집 행이 펼쳐진다 */
.favorite-kind {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  color: var(--ok-navy);
  background: #fff;
  border: 1px solid var(--ok-line);
  border-radius: 0.35rem;
}

.favorite-kind-btn,
.favorite-kind-btn:hover {
  text-decoration: none;
}

.favorite-kind-btn:hover .favorite-kind {
  color: #fff;
  background: var(--ok-navy);
  border-color: var(--ok-navy);
}

/* ↑↓/Enter 로 하이라이트된 행은 배경이 파랑 — 행 안의 버튼도 그 위에서 읽히게 (별표는 상태 구분 유지) */
.location-search-results .list-group-item-action.active .btn-link {
  color: rgba(255, 255, 255, 0.85);
}

.location-search-results .list-group-item-action.active .favorite-star.is-on {
  color: #ffe08a;
}

.location-search-results .list-group-item-action.active .favorite-kind {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
}

/* 사용처 편집 행 — 즐겨찾기 탭에서 배지를 눌렀을 때 그 행 아래에 펼쳐지는 토글 버튼 줄 */
.favorite-kind-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  background: var(--ok-bg);
}

/* 즐겨찾기 퀵 칩 — 상하차지 카드·경유지 카드에서 모달 없이 한 번에 채우는 단축 버튼 */
.favorite-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* 경유지 칩의 구분 마커 (상차/하차) — 칩 텍스트 뒤에 작은 알약 */
.favorite-chip-type {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  font-size: 0.68rem;
  line-height: 1.4;
  border-radius: 999px;
  color: #fff;
  background: var(--ok-navy-soft, #3a4a8f);
}

.favorite-chip-type-unloading {
  background: var(--ok-red, #cd0e2e);
}

.favorite-chip:hover .favorite-chip-type,
.favorite-chip:focus .favorite-chip-type {
  background: rgba(255, 255, 255, 0.25);
}

.favorite-chip {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.15rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ok-navy);
  background: #fff;
  border: 1px solid var(--ok-line);
  border-radius: 999px;
}

.favorite-chip:hover,
.favorite-chip:focus {
  color: #fff;
  background: var(--ok-navy);
  border-color: var(--ok-navy);
}

/* ----- 그리드 [컬럼 설정] 드롭다운 (ok-grid.js toggle — data-grid-columns 버튼 아래에 뜬다) ----- */

.ok-grid-colpicker {
  position: absolute;
  z-index: 1080;
  min-width: 11rem;
  max-height: 20rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 10px 28px -14px rgba(32, 29, 56, 0.35);
  padding: 0.4rem;
}

.ok-grid-colpicker label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.5rem;
  margin: 0;
  border-radius: 0.35rem;
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
}

.ok-grid-colpicker label:hover {
  background: #f4f3f8;
}

/* 화물 등록 폼 — 상하차지 카드의 "거래처메모" 안내 (연결 거래처의 oms_memo, 참고용).
   입력란이 아님을 분명히 하려고 폼 컨트롤 외형(테두리 상자·흰 배경) 대신 왼쪽 띠 + 옅은 배경의 노트 형태로 그린다. */
.partner-memo-note {
  background: var(--ok-bg);
  border-left: 3px solid var(--ok-navy);
  border-radius: 0 .25rem .25rem 0;
  padding: .35rem .6rem;
  font-size: .85rem;
  line-height: 1.45;
  color: #5a5773;
  white-space: pre-line;
  cursor: default;
}
.partner-memo-note .partner-memo-label {
  font-weight: 700;
  color: var(--ok-navy);
  margin-right: .45rem;
}

/* PWA 설치 안내 배너 (pwa.js) — 모바일 하단 고정, 토스트(1090)보다 아래 */
.pwa-banner {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  background: #fff;
  border-radius: .85rem;
  border-top: 3px solid var(--ok-red);
  box-shadow: 0 8px 28px rgba(46, 42, 77, .22);
}
.pwa-banner-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.pwa-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}
.pwa-banner-title {
  font-weight: 700;
  color: var(--ok-navy);
  font-size: .95rem;
}
.pwa-banner-text {
  font-size: .82rem;
  color: #5a5773;
  line-height: 1.4;
}
.pwa-banner .btn-close {
  flex-shrink: 0;
}

/* ==========================================================================
   공개(비로그인) 화물 접수·조회 — Areas/Public (_PublicLayout). 로그인 화면과 레이아웃이 달라 .pub-* 로 분리.
   모바일(홈페이지 → 폰) 우선: 본문 폭 640px 상한, 큰 입력란·버튼.
   ========================================================================== */
.pub-body {
  margin-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pub-body main {
  flex: 1 0 auto;
}

.pub-container {
  max-width: 640px;
}

.pub-header {
  background: var(--ok-navy);
  border-top: 3px solid var(--ok-red);
  padding: 0.65rem 0;
}

.pub-brand {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pub-phone {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
}

.pub-phone:hover {
  color: #fff;
  background: var(--ok-red);
}

.pub-footer {
  padding: 1rem 0 1.4rem;
  color: #8a8798;
}

.pub-footer-chevron {
  color: var(--ok-red);
  font-weight: 800;
}

.pub-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(115deg, var(--ok-navy-deep) 0%, var(--ok-navy) 55%, var(--ok-navy-soft) 100%);
  color: #fff;
  box-shadow: 0 14px 34px -16px rgba(32, 29, 56, 0.55);
}

.pub-hero h1 {
  color: #fff;
  font-weight: 800;
}

.pub-hero-kicker {
  color: var(--ok-red-soft);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

.pub-serial-inline {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.pub-card-sec {
  margin-bottom: 1rem;
}

.pub-card {
  background: #fff;
  border: 1px solid var(--ok-line);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 10px 28px -18px rgba(32, 29, 56, 0.4);
}

.pub-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: var(--ok-bg);
  color: var(--ok-navy);
}

.pub-icon-ok {
  background: var(--ok-navy);
  color: #fff;
  font-weight: 800;
}

.pub-serial {
  background: var(--ok-bg);
  border-radius: 0.8rem;
  padding: 1rem;
}

.pub-serial-no {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ok-navy);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.pub-link-box {
  text-align: left;
  border: 1px dashed var(--ok-line);
  border-radius: 0.8rem;
  padding: 0.9rem 1rem;
}

.pub-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: 1px;
}

.pub-dot-load { background: #3a4a8f; }
.pub-dot-unload { background: var(--ok-red); }

.pub-validation:empty,
.pub-validation.validation-summary-valid {
  display: none;
}

.pub-pay .btn {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.pub-address-results {
  max-height: 46vh;
  overflow-y: auto;
  margin-bottom: 0.75rem;
}

.pub-address-selected {
  border-top: 1px solid var(--ok-line);
  padding-top: 0.75rem;
}

/* 진행 단계 — 접수 → 배차 → 운행 → 완료 */
.pub-steps {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0 0 1.25rem;
  position: relative;
}

.pub-steps::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 16px;
  height: 3px;
  background: var(--ok-line);
}

.pub-steps li {
  position: relative;
  flex: 1;
  text-align: center;
}

.pub-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ok-line);
  color: #9a98a8;
  font-weight: 700;
  font-size: 0.9rem;
}

.pub-step-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #8a8798;
  font-weight: 600;
}

.pub-steps li.done .pub-step-dot {
  background: var(--ok-navy);
  border-color: var(--ok-navy);
  color: #fff;
}

.pub-steps li.active .pub-step-dot {
  border-color: var(--ok-red);
  color: var(--ok-red);
  box-shadow: 0 0 0 4px rgba(205, 14, 46, 0.15);
}

.pub-steps li.done .pub-step-label,
.pub-steps li.active .pub-step-label {
  color: var(--ok-navy);
}

.pub-dl dt {
  color: #8a8798;
  font-weight: 600;
}

.pub-dl dd {
  min-height: 1.5em;
}

/* ----- 공개 접수 폼: 대화형 5단계 위저드 ----- */
/* 등록 첫 단계 위 소개 띠 — 2단계부터는 JS 가 숨김(질문에 집중). 셰브론 워터마크는 기사웹 헤더와 같은 모티프. */
.pub-intro::after {
  content: "»";
  position: absolute;
  right: 0.1rem;
  bottom: -2.2rem;
  font-size: 7.5rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  opacity: 0.08;
  pointer-events: none;
}

.pub-intro h1 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.pub-intro-sub {
  margin-bottom: 0;
  opacity: 0.85;
}

.pub-flow {
  display: flex;
  gap: 0.4rem;
  margin-top: 1rem;
  position: relative;
}

.pub-flow-item {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.7rem;
  padding: 0.5rem 0.3rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.pub-flow-no {
  display: block;
  color: var(--ok-red-soft);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.1rem;
}

/* 위저드 카드 — 폼 전체를 흰 카드로 감싸 바탕(--ok-bg) 위에 띄움. 카드 안의 요약 카드는 바탕색으로 대비. */
.pub-wizard {
  padding: 1.6rem 1.4rem;
}

.pub-wizard .pub-summary-card {
  background: var(--ok-bg);
}

/* 단계 라벨 — 상태 화면의 .pub-steps 를 5단계용으로 좁힘 */
.pub-wizard-steps {
  margin-bottom: 1.5rem;
}

.pub-wizard-steps::before {
  left: 10%;
  right: 10%;
  top: 14px;
}

.pub-wizard-steps .pub-step-dot {
  width: 30px;
  height: 30px;
  font-size: 0.8rem;
}

.pub-wizard-steps .pub-step-label {
  font-size: 0.76rem;
  margin-top: 0.3rem;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .pub-wizard {
    padding: 1.25rem 1rem;
  }

  .pub-intro h1 {
    font-size: 1.3rem;
  }

  .pub-flow-item {
    font-size: 0.74rem;
    padding: 0.45rem 0.2rem;
  }

  .pub-wizard-steps .pub-step-label {
    font-size: 0.7rem;
  }
}

.pub-q {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ok-navy);
  margin-bottom: 0.4rem;
}

.pub-q-sub {
  color: #6f6c80;
  margin-bottom: 1.4rem;
}

.pub-field {
  margin-bottom: 1.25rem;
}

.pub-field .form-label {
  font-weight: 700;
  color: var(--ok-ink);
}

.pub-address-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 2px dashed #c9cbda;
  border-radius: 0.8rem;
  background: #fff;
  color: #8a8798;
  font-size: 1.05rem;
}

.pub-address-btn:hover { border-color: var(--ok-navy-soft); }

.pub-address-btn.has-value {
  border-style: solid;
  border-color: var(--ok-navy);
  color: var(--ok-ink);
  font-weight: 600;
}

.pub-address-text:empty::before {
  content: attr(data-placeholder);
}

.pub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pub-chip {
  border-radius: 999px;
  border: 1.5px solid #d6d8e4;
  background: #fff;
  color: var(--ok-ink);
  padding: 0.45rem 0.95rem;
  font-weight: 600;
}

.pub-chip:hover { border-color: var(--ok-navy-soft); color: var(--ok-navy); }

.btn-check:checked + .pub-chip {
  background: var(--ok-navy);
  border-color: var(--ok-navy);
  color: #fff;
}

.pub-time-select[hidden] { display: none !important; }

.pub-more {
  margin-top: -0.4rem;
  margin-bottom: 1.25rem;
}

.pub-more summary {
  cursor: pointer;
  color: var(--ok-navy-soft);
  font-weight: 600;
}

.pub-pay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  padding: 1rem 0.5rem;
  border: 2px solid #d6d8e4;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  text-align: center;
}

.pub-pay-icon { font-size: 1.6rem; }
.pub-pay-title { font-weight: 800; color: var(--ok-navy); }
.pub-pay-sub { font-size: 0.85rem; color: #6f6c80; }

.btn-check:checked + .pub-pay-card {
  border-color: var(--ok-red);
  background: #fff5f6;
  box-shadow: 0 0 0 3px rgba(205, 14, 46, 0.12);
}

.pub-nav {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.pub-summary-card {
  background: #fff;
  border: 1px solid var(--ok-line);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}

.pub-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: var(--ok-navy);
  margin-bottom: 0.4rem;
}